Adding time line in Jobs Status.

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 />;