prevent to change status once job status is done

src/components/ServiceProject/JobComments.jsx

@@ -22,7 +22,7 @@ const JobComments = ({ data }) => {
     formState: { errors },
   } = useAppForm({
     resolver: zodResolver(JobCommentSchema),
-    defaultValues: { comment: "", attachments: [] }
+    defaultValues: { comment: "", attachments: [] },
   });
 
   const {
@@ -118,21 +118,16 @@ const JobComments = ({ data }) => {
               )}
             </div>
           </div>
-
-          <div className="d-flex flex-column flex-md-row justify-content-between align-items-start">
-            {/* LEFT SIDE → Uploaded Files */}
           <div className="flex-grow-1 ms-10 mt-2">
             {files?.length > 0 && (
               <Filelist files={files} removeFile={removeFile} />
             )}
           </div>
-
+          <div className="d-flex justify-content-end gap-2 align-items-center text-end mt-3 ms-10 ms-md-0">
-            {/* RIGHT SIDE → Add Attachment + Submit */}
-            <div className="d-flex gap-3 align-items-center text-end mt-3 ms-10 ms-md-0">
             <div
               onClick={() => document.getElementById("attachments").click()}
               className="cursor-pointer"
-                style={{ whiteSpace: 'nowrap' }}
+              style={{ whiteSpace: "nowrap" }}
             >
               <input
                 type="file"
@@ -158,10 +153,7 @@ const JobComments = ({ data }) => {
               <i className="bx bx-xs bx-send me-1"></i>
               Submit
             </button>
-
           </div>
-          </div>
-
         </form>
       </div>
       <div className="card-body p-0">

src/components/ServiceProject/JobList.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from "react";
-import { daysLeft, getNextBadgeColor } from "../../utils/appUtils";
+import {
+  daysLeft,
+  getJobStatusBadge,
+  getNextBadgeColor,
+} from "../../utils/appUtils";
 import { useServiceProjectJobs } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
@@ -23,7 +27,7 @@ const JobList = () => {
     {
       key: "jobTicketUId",
       label: "Job Id",
-      getValue: (e) => e?.jobTicketUId || "N/A",
+      getValue: (e) => <span>{e?.jobTicketUId || "N/A"}</span>,
       align: "text-start",
     },
     {
@@ -56,22 +60,9 @@ const JobList = () => {
       key: "status",
       label: "Status",
       getValue: (e) => {
-        const statusName = e?.status?.displayName || "N/A";
-        const statusColorMap = {
-          Assigned: "label-primary",
-          Pending: "label-warning",
-          Completed: "label-success",
-          Cancelled: "label-danger",
-        };
-
-        const badgeColor = statusColorMap[statusName] || "label-secondary";
-
         return (
-          <span
+          <span className={`badge ${getJobStatusBadge(e?.status?.id)}`}>
-            className={`badge bg-${badgeColor}`}
+            {e?.status?.displayName}
-            style={{ fontSize: "12px" }}
-          >
-            {statusName}
           </span>
         );
       },
@@ -85,7 +76,7 @@ const JobList = () => {
         const { days, color } = daysLeft(e.startDate, e.dueDate);
 
         return (
-          <span className={`badge bg-${color}`} style={{ fontSize: "12px" }}>
+          <span className={`badge bg-${color}`}>
             {days !== null ? `${days} days` : "N/A"}
           </span>
         );
@@ -96,7 +87,7 @@ const JobList = () => {
   ];
 
   return (
-    <div className="dataTables_wrapper dt-bootstrap5 no-footer ">
+    <div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
       <table
         className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
         aria-describedby="DataTables_Table_0_info"
@@ -123,15 +114,15 @@ const JobList = () => {
         <tbody>
           {Array.isArray(data?.data) && data.data.length > 0 ? (
             data.data.map((row, i) => (
-              <tr
+              <tr key={i} className="text-start">
-                key={i}
-                className="text-start"
-                
-              >
                 {jobGrid.map((col) => (
-                  <td key={col.key} className={col.className} onClick={() =>
+                  <td
+                    key={col.key}
+                    className={col.className}
+                    onClick={() =>
                       setSelectedJob({ showCanvas: true, job: row?.id })
-                }>
+                    }
+                  >
                     {col.getValue(row)}
                   </td>
                 ))}

src/components/ServiceProject/JobStatusLog.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
 
 const JobStatusLog = ({ data }) => {
   return (
@@ -20,9 +21,9 @@ const JobStatusLog = ({ data }) => {
                   </span>
                 </div>
 
-                {/* <span className="badge bg-primary">
+                <span className="text-secondary">
-                  Level {item.nextStatus?.level ?? item.status?.level}
+                  {formatUTCToLocalTime(item?.updatedAt,true)}
-                </span> */}
+                </span>
               </div>
               <div className="d-flex align-items-start mt-2 mx-0 px-0">
                 <Avatar

src/components/ServiceProject/ManageJobTicket.jsx

@@ -7,10 +7,12 @@ import Avatar from "../common/Avatar";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
 import JobStatusLog from "./JobStatusLog";
 import JobComments from "./JobComments";
-import { daysLeft } from "../../utils/appUtils";
+import { daysLeft, getJobStatusBadge } from "../../utils/appUtils";
 import HoverPopup from "../common/HoverPopup";
 import ChangeStatus from "./ChangeStatus";
 import { useParams } from "react-router-dom";
+import { STATUS_JOB_DONE } from "../../utils/constants";
+import Tooltip from "../common/Tooltip";
 
 const ManageJobTicket = ({ Job }) => {
   const { projectId } = useParams();
@@ -46,12 +48,61 @@ const ManageJobTicket = ({ Job }) => {
     <div className="row text-start">
       <div className="col-12">
         <h6 className="fs-5 fw-semibold">{data?.title}</h6>
-        <div className="d-flex justify-content-between align-items-end flex-wrap mb-2">
+        <div className="d-flex justify-content-between align-items-start flex-wrap mb-2">
           <p className="mb-0">
             <span className="fw-medium me-1">Job Id :</span>
             {data?.jobTicketUId || "N/A"}
           </p>
           <div className="d-flex flex-column align-items-end gap-3 mb-3">
+            <div className="d-flex flex-row gap-2">
+              <span className={`badge ${getJobStatusBadge(data?.status?.id)}`}>
+                {data?.status?.displayName}
+              </span>
+             {STATUS_JOB_DONE !== data?.status?.id &&     <HoverPopup
+                id="STATUS_CHANEG"
+                title="Change Status"
+                Mode="click"
+                className=""
+                content={
+                  <ChangeStatus
+                    statusId={data?.status?.id}
+                    projectId={projectId}
+                    jobId={Job?.job}
+                    popUpId="STATUS_CHANEG"
+                  />
+                }
+              >
+                <Tooltip text={"Change Status"} placement="left" children={<i className="bx bx-edit bx-sm cursor-pointer"></i>}/>
+              </HoverPopup>}
+            </div>
+          </div>
+        </div>
+
+        <div className="d-flex flex-wrap">
+          <p>{data?.description || "N/A"}</p>
+        </div>
+
+        <div className="d-flex justify-content-between mb-4">
+          <div className="d-flex flex-row gap-1 fw-medium">
+            <i className="bx bx-calendar"></i>{" "}
+            <span>
+              Created Date : {formatUTCToLocalTime(data?.createdAt, true)}
+            </span>
+          </div>
+        </div>
+
+        <div className="d-flex justify-content-md-between ">
+          <div className="d-flex flex-row gap-5">
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i> Start Date :{" "}
+              {formatUTCToLocalTime(data?.startDate)}
+            </span>{" "}
+            <i className="bx bx-right-arrow-alt"></i>{" "}
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i> Due on :{" "}
+              {formatUTCToLocalTime(data?.startDate)}
+            </span>
+          </div>
            {data?.dueDate &&
               (() => {
                 const { days, color } = daysLeft(
@@ -67,61 +118,13 @@ const ManageJobTicket = ({ Job }) => {
                   </span>
                 );
               })()}
-            <div className="d-flex flex-row gap-2">
-              <span className="badge bg-label-primary">
-                {data?.status?.name}
-              </span>
-              <HoverPopup
-                id="STATUS_CHANEG"
-                title="Change Status"
-                Mode="click"
-                className=""
-                content={
-                  <ChangeStatus
-                    statusId={data?.status?.id}
-                    projectId={projectId}
-                    jobId={Job?.job}
-                    popUpId="STATUS_CHANEG"
-                  />
-                }
-              >
-                <i className="bx bx-edit bx-sm cursor-pointer"></i>
-              </HoverPopup>
-            </div>
-          </div>
-        </div>
-
-     
-
-        <div className="d-flex flex-wrap">
-          <p>{data?.description || "N/A"}</p>
-        </div>
-
-        <div className="d-flex justify-content-between mb-4">
-          <div className="d-flex flex-row gap-1 fw-medium">
-            <i className="bx bx-calendar"></i>{" "}
-            <span>
-              Created Date : {formatUTCToLocalTime(data?.createdAt, true)}
-            </span>
-          </div>
-        </div>
-
-        <div>
-          <div className="d-flex flex-row gap-5">
-            <span className="fw-medium">
-              <i className="bx bx-calendar"></i> Start Date :{" "}
-              {formatUTCToLocalTime(data?.startDate)}
-            </span>{" "}
-            <i className="bx bx-right-arrow-alt"></i>{" "}
-            <span className="fw-medium">
-              <i className="bx bx-calendar"></i> Due on :{" "}
-              {formatUTCToLocalTime(data?.startDate)}
-            </span>
-          </div>
         </div>
         <div className="d-block mt-4 mb-3">
-          <div className="d-flex align-items-center mb-2">
+          <div className="row align-items-start align-items-md-start gap-2 mb-1">
-            <span className="fs-6 fw-medium me-5">Created By</span>{" "}
+            <div className="col-12 col-md-auto">
+              <small className="fs-6 fw-medium">Created By</small>
+            </div>
+            <div className="col d-flex flex-row align-items-center ">
               <Avatar
                 size="xs"
                 firstName={data?.createdBy?.firstName}
@@ -134,11 +137,20 @@ const ManageJobTicket = ({ Job }) => {
                 </small>
               </div>
             </div>
-          <div className="d-flex flex-wrap align-items-start align-items-md-center">
+          </div>
-            <small className="fs-6 fw-medium me-3">Assigned By</small>
+
-            <div className="row g-3 mt-md-1">
+          <div className="row align-items-start align-items-md-start gap-2">
+            <div className="col-12 col-md-auto">
+              <small className="fs-6 fw-medium">Assigned By</small>
+            </div>
+
+            <div className="col">
+              <div className="row gap-4">
                 {data?.assignees?.map((emp) => (
-                <div key={emp.id} className="col-6 col-sm-6 col-md-4 col-lg-4">
+                  <div
+                    key={emp.id}
+                    className="col-6 col-sm-6 col-md-4 col-lg-4"
+                  >
                     <div className="d-flex align-items-center gap-2">
                       <Avatar
                         size="xs"
@@ -147,10 +159,10 @@ const ManageJobTicket = ({ Job }) => {
                       />
 
                       <div className="d-flex flex-column">
-                      <span className="fw-semibold">
+                        <span className=" text-truncate">
                           {emp.firstName} {emp.lastName}
                         </span>
-                      <small className="text-secondary">
+                        <small className="text-secondary text-truncate">
                           {emp.jobRoleName}
                         </small>
                       </div>
@@ -161,6 +173,7 @@ const ManageJobTicket = ({ Job }) => {
             </div>
           </div>
         </div>
+      </div>
 
       <div className="nav-align-top nav-tabs-shadow p-0 shadow-none">
         <ul className="nav nav-tabs" role="tablist">

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx

@@ -18,7 +18,7 @@ const ServiceProjectTeamList = () => {
       getValue: (e) => {
         return (
           <div className="d-flex align-itmes-center">
-            <Avatar />
+            <Avatar firstName={e.employee.firstName} lastName={e.employee.lastName} />
             <span>{`${e.employee.firstName} ${e.employee.lastName}`}</span>
           </div>
         );
@@ -30,7 +30,7 @@ const ServiceProjectTeamList = () => {
       getValue: (e) => {
         return (
           <div className="d-flex align-itmes-center">
-            <span>{`${e.teamRole.firstName}`}</span>
+            <span>{`${e.teamRole.name}`}</span>
           </div>
         );
       },
@@ -40,16 +40,17 @@ const ServiceProjectTeamList = () => {
       label: "assigned Date",
       getValue: (e) => {
         return (
-          <div className="d-flex align-itmes-center">
+          <div className="d-flex align-itmes-center text-center">
             {formatUTCToLocalTime(e.assignedAT)}
           </div>
         );
       },
+      className:"text-center"
     },
   ];
   return (
-    <div className="data-table table-responsive ">
+ <div className="table-responsive">
-      <table className="table w-full">
+  <table className="table align-middle mb-0">
     <thead>
       <tr>
         {servceProjectColmen.map((col) => (
@@ -60,43 +61,26 @@ const ServiceProjectTeamList = () => {
 
     <tbody>
       {data?.length > 0 ? (
-            data.map((emp) => (
+        data.map((row) => (
-              <tr key={emp?.id}>
+          <tr key={row.id}>
-                <td className="w-min">
+            {servceProjectColmen.map((col) => (
-                  <div className="d-flex align-items-center gap-2 py-1">
+              <td key={col.key} className={col.className}>
-                    <Avatar
+                {col.getValue(row)}
-                      size="xs"
-                      firstName={emp?.employee?.firstName}
-                      lastName={emp?.employee?.lastName}
-                    />
-                    <span className="fw-medium">
-                      {`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}
-                    </span>
-                  </div>
               </td>
-
+            ))}
-                <td>{emp?.teamRole?.name}</td>
-
-                <td>{formatUTCToLocalTime(emp.assignedAt)}</td>
           </tr>
         ))
       ) : (
         <tr>
-              <td colSpan={3} className="text-muted border-0 text-center py-4">
+          <td colSpan={servceProjectColmen.length} className="text-center py-4">
-                {isLoading ? (
+            {isLoading ? <SpinnerLoader /> : "No Records Available"}
-                  <SpinnerLoader />
-                ) : (
-                  <div className="bg-light-secondary py-3 w-50 mx-auto my-2">
-                    <i className="bx bx-box bx-md text-primary"></i>
-                    <p className="fw-medium mt-3">Please Add an Employee</p>
-                  </div>
-                )}
           </td>
         </tr>
       )}
     </tbody>
   </table>
 </div>
+
   );
 };
 

src/utils/appUtils.js

@@ -34,8 +34,24 @@ export const getColorNameFromHex = (hex) => {
     }
   }
 
-  return null; //
+  return null; 
 };
+export const getJobStatusBadge = (statusId) => {
+  if (!statusId) return "bg-label-secondary";
+
+  const map = {
+    "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
+    "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
+  };
+
+  return map[statusId] || "bg-label-secondary";
+};
+
 
 export const useDebounce = (value, delay = 500) => {
   const [debouncedValue, setDebouncedValue] = useState(value);

src/utils/constants.jsx

@@ -205,3 +205,9 @@ export const PAYEE_RECURRING_EXPENSE = [
     label: "Paused",
   },
 ];
+
+
+//#region Service Project and Jobs
+export const STATUS_JOB_DONE = "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7"
+
+//#endregion