Merge pull request 'Adding time line in Jobs Status.' (#527) from Implementing_TimeLine into Purchase_Invoice_Management

Reviewed-on: #52
merged

src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx

@@ -1,55 +1,38 @@
-import React from "react";
-import Avatar from "../../common/Avatar";
-import { formatUTCToLocalTime } from "../../../utils/dateUtils";
-
+import React, { useMemo } from "react";
+import Timeline from "../../common/Timeline";
+import { getColorNameFromHex } from "../../../utils/appUtils";
 
 const JobStatusLog = ({ data }) => {
+  // Prepare timeline items
+  const timelineData = useMemo(() => {
+    if (!data) return [];
+    return data
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+      .map((log) => ({
+        id: log.id,
+        title: log.nextStatus?.displayName || log.status?.displayName || "Status Updated",
+        description: log.nextStatus?.description || "",
+        timeAgo: log.updatedAt,
+        color: getColorNameFromHex(log.nextStatus?.color) || "primary",
+        userComment: log.comment,
+        users: log.updatedBy
+          ? [
+            {
+              firstName: log.updatedBy.firstName || "",
+              lastName: log.updatedBy.lastName || "",
+              role: log.updatedBy.jobRoleName || "",
+              avatar: log.updatedBy.photo || null,
+            },
+          ]
+          : [],
+      }));
+  }, [data]);
+
   return (
     <div className="card shadow-none p-0">
-      <div className="card-body p-0">
-        <div className="list-group">
-          {data?.map((item) => (
-            <div
-              key={item.id}
-              className="list-group-item border-0 border-bottom p-1"
-            >
-              <div className="d-flex justify-content-between">
-                <div>
-                  <span className="fw-semibold">
-                    {item.nextStatus?.displayName ??
-                      item.status?.displayName ??
-                      "Status"}
-                  </span>
-                </div>
-
-                <span className="text-secondary">
-                  {formatUTCToLocalTime(item?.updatedAt,true)}
-                </span>
-              </div>
-              <div className="d-flex align-items-start mt-2 mx-0 px-0">
-                <Avatar
-                  firstName={item.updatedBy?.firstName}
-                  lastName={item.updatedBy?.lastName}
-                />
-                <div className="">
-                  <div className="d-flex flex-row gap-3">
-                    <span className="fw-semibold">
-                      {item.updatedBy?.firstName} {item.updatedBy?.lastName}
-                    </span>
-                    <span className="text-secondary">
-                      {/* <em>{formatUTCToLocalTime(item?.createdAt, true)}</em> */}
-                    </span>
-                  </div>
-                  <div className="text-muted text-secondary">
-                    {item?.updatedBy?.jobRoleName}
-                  </div>
-                  <div className="text-wrap">
-                    <p className="mb-1 mt-2 text-muted">{item.comment}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
+      <div className="card-body p-3">
+        <div className="timeline-container overflow-auto" style={{ maxHeight: "400px" }}>
+          <Timeline items={timelineData} transparent={true} />
         </div>
       </div>
     </div>

src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx

@@ -23,20 +23,21 @@ const ManageJobTicket = ({ Job }) => {
   );
   const drawerRef = useRef();
   const tabsData = [
+     {
+      id: "history", 
+      title: "History",
+      icon: "bx bx-time me-2",
+      active: true,
+      content: <JobStatusLog data={data?.updateLogs} />,
+    },
     {
       id: "comment",
       title: "Comments",
       icon: "bx bx-comment me-2",
-      active: true,
+      active: false,
       content: <JobComments data={data} />,
     },
-    {
-      id: "history",
-      title: "History",
-      icon: "bx bx-time me-2",
-      active: false,
-      content: <JobStatusLog data={data?.updateLogs} />,
-    },
+   
   ];
 
   if (isLoading) return <JobDetailsSkeleton />;

src/utils/appUtils.js

@@ -43,7 +43,7 @@ export const getJobStatusBadge = (statusId) => {
     "32d76a02-8f44-4aa0-9b66-c3716c45a918": "bg-label-primary",   // New
     "cfa1886d-055f-4ded-84c6-42a2a8a14a66": "bg-label-info",      // Assigned
     "5a6873a5-fed7-4745-a52f-8f61bf3bd72d": "bg-label-warning",   // In Progress
-    "aab71020-2fb8-44d9-9430-c9a7e9bf33b0": "bg-label-label-dark",      // Review
+    "aab71020-2fb8-44d9-9430-c9a7e9bf33b0": "bg-label-dark",      // Review
     "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7": "bg-label-success",   // Done
     "3ddeefb5-ae3c-4e10-a922-35e0a452bb69": "bg-label-secondary", // Closed
     "75a0c8b8-9c6a-41af-80bf-b35bab722eb2": "bg-label-danger",    // On Hold