prevent to change status once job status is done

2025-11-18 14:25:13 +05:30 · 2025-11-18 14:25:13 +05:30 · 3753d01f7d
commit 3753d01f7d
parent dd41600045
8 changed files with 184 additions and 181 deletions
--- a/src/components/ServiceProject/JobComments.jsx
+++ b/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,50 +118,42 @@ 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>
-
-            {/* 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' }}
-              >
-                <input
-                  type="file"
-                  accept=".pdf,.jpg,.jpeg,.png"
-                  id="attachments"
-                  multiple
-                  className="d-none"
-                  {...register("attachments")}
-                  onChange={(e) => {
-                    onFileChange(e);
-                    e.target.value = "";
-                  }}
-                />
-                <i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
-                Add Attachment
-              </div>
-
-              <button
-                className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
-                type="submit"
-                disabled={!watch("comment")?.trim() || isPending}
-              >
-                <i className="bx bx-xs bx-send me-1"></i>
-                Submit
-              </button>
-
-            </div>
+          <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">
+            <div
+              onClick={() => document.getElementById("attachments").click()}
+              className="cursor-pointer"
+              style={{ whiteSpace: "nowrap" }}
+            >
+              <input
+                type="file"
+                accept=".pdf,.jpg,.jpeg,.png"
+                id="attachments"
+                multiple
+                className="d-none"
+                {...register("attachments")}
+                onChange={(e) => {
+                  onFileChange(e);
+                  e.target.value = "";
+                }}
+              />
+              <i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
+              Add Attachment
+            </div>

+            <button
+              className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
+              type="submit"
+              disabled={!watch("comment")?.trim() || isPending}
+            >
+              <i className="bx bx-xs bx-send me-1"></i>
+              Submit
+            </button>
+          </div>
        </form>
      </div>
      <div className="card-body p-0">
--- a/src/components/ServiceProject/JobList.jsx
+++ b/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
-            className={`badge bg-${badgeColor}`}
-            style={{ fontSize: "12px" }}
-          >
-            {statusName}
+          <span className={`badge ${getJobStatusBadge(e?.status?.id)}`}>
+            {e?.status?.displayName}
          </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
-                key={i}
-                className="text-start"
-                
-              >
+              <tr key={i} className="text-start">
                {jobGrid.map((col) => (
-                  <td key={col.key} className={col.className} onClick={() =>
-                  setSelectedJob({ showCanvas: true, job: row?.id })
-                }>
+                  <td
+                    key={col.key}
+                    className={col.className}
+                    onClick={() =>
+                      setSelectedJob({ showCanvas: true, job: row?.id })
+                    }
+                  >
                    {col.getValue(row)}
                  </td>
                ))}
--- a/src/components/ServiceProject/JobStatusLog.jsx
+++ b/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">
-                  Level {item.nextStatus?.level ?? item.status?.level}
-                </span> */}
+                <span className="text-secondary">
+                  {formatUTCToLocalTime(item?.updatedAt,true)}
+                </span>
              </div>
              <div className="d-flex align-items-start mt-2 mx-0 px-0">
                <Avatar
--- a/src/components/ServiceProject/ManageJobTicket.jsx
+++ b/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();
@ -45,33 +47,18 @@ const ManageJobTicket = ({ Job }) => {
  return (
    <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">
+        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
+        <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">
-            {data?.dueDate &&
-              (() => {
-                const { days, color } = daysLeft(
-                  data?.startDate,
-                  data?.dueDate
-                );
-                return (
-                  <span>
-                    <span className="fw-medium me-1">Days Left:</span>
-                    <span className={`badge bg-${color}`}>
-                      {days !== null ? `${days} days` : "N/A"}
-                    </span>
-                  </span>
-                );
-              })()}
            <div className="d-flex flex-row gap-2">
-              <span className="badge bg-label-primary">
-                {data?.status?.name}
+              <span className={`badge ${getJobStatusBadge(data?.status?.id)}`}>
+                {data?.status?.displayName}
              </span>
-              <HoverPopup
+             {STATUS_JOB_DONE !== data?.status?.id &&     <HoverPopup
                id="STATUS_CHANEG"
                title="Change Status"
                Mode="click"
@ -85,14 +72,12 @@ const ManageJobTicket = ({ Job }) => {
                  />
                }
              >
-                <i className="bx bx-edit bx-sm cursor-pointer"></i>
-              </HoverPopup>
+                <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>
@ -106,7 +91,7 @@ const ManageJobTicket = ({ Job }) => {
          </div>
        </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 :{" "}
@ -118,45 +103,73 @@ const ManageJobTicket = ({ Job }) => {
              {formatUTCToLocalTime(data?.startDate)}
            </span>
          </div>
+           {data?.dueDate &&
+              (() => {
+                const { days, color } = daysLeft(
+                  data?.startDate,
+                  data?.dueDate
+                );
+                return (
+                  <span>
+                    <span className="fw-medium me-1">Days Left:</span>
+                    <span className={`badge bg-${color}`}>
+                      {days !== null ? `${days} days` : "N/A"}
+                    </span>
+                  </span>
+                );
+              })()}
        </div>
        <div className="d-block mt-4 mb-3">
-          <div className="d-flex align-items-center mb-2">
-            <span className="fs-6 fw-medium me-5">Created By</span>{" "}
-            <Avatar
-              size="xs"
-              firstName={data?.createdBy?.firstName}
-              lastName={data?.createdBy?.lastName}
-            />{" "}
-            <div className="d-flex flex-row align-items-center">
-              <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
-              <small className="text-secondary ms-1">
-                ({data?.createdBy?.jobRoleName})
-              </small>
+          <div className="row align-items-start align-items-md-start gap-2 mb-1">
+            <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}
+                lastName={data?.createdBy?.lastName}
+              />{" "}
+              <div className="d-flex flex-row align-items-center">
+                <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
+                <small className="text-secondary ms-1">
+                  ({data?.createdBy?.jobRoleName})
+                </small>
+              </div>
            </div>
          </div>
-          <div className="d-flex flex-wrap align-items-start align-items-md-center">
-            <small className="fs-6 fw-medium me-3">Assigned By</small>
-            <div className="row g-3 mt-md-1">
-              {data?.assignees?.map((emp) => (
-                <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"
-                      firstName={emp.firstName}
-                      lastName={emp.lastName}
-                    />

-                    <div className="d-flex flex-column">
-                      <span className="fw-semibold">
-                        {emp.firstName} {emp.lastName}
-                      </span>
-                      <small className="text-secondary">
-                        {emp.jobRoleName}
-                      </small>
+          <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 className="d-flex align-items-center gap-2">
+                      <Avatar
+                        size="xs"
+                        firstName={emp.firstName}
+                        lastName={emp.lastName}
+                      />
+
+                      <div className="d-flex flex-column">
+                        <span className=" text-truncate">
+                          {emp.firstName} {emp.lastName}
+                        </span>
+                        <small className="text-secondary text-truncate">
+                          {emp.jobRoleName}
+                        </small>
+                      </div>
                    </div>
                  </div>
-                </div>
-              ))}
+                ))}
+              </div>
            </div>
          </div>
        </div>
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
+++ b/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,63 +40,47 @@ 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 ">
-      <table className="table w-full">
-        <thead>
-          <tr>
+ <div className="table-responsive">
+  <table className="table align-middle mb-0">
+    <thead>
+      <tr>
+        {servceProjectColmen.map((col) => (
+          <th key={col.key}>{col.label}</th>
+        ))}
+      </tr>
+    </thead>
+
+    <tbody>
+      {data?.length > 0 ? (
+        data.map((row) => (
+          <tr key={row.id}>
            {servceProjectColmen.map((col) => (
-              <th key={col.key}>{col.label}</th>
+              <td key={col.key} className={col.className}>
+                {col.getValue(row)}
+              </td>
            ))}
          </tr>
-        </thead>
+        ))
+      ) : (
+        <tr>
+          <td colSpan={servceProjectColmen.length} className="text-center py-4">
+            {isLoading ? <SpinnerLoader /> : "No Records Available"}
+          </td>
+        </tr>
+      )}
+    </tbody>
+  </table>
+</div>

-        <tbody>
-          {data?.length > 0 ? (
-            data.map((emp) => (
-              <tr key={emp?.id}>
-                <td className="w-min">
-                  <div className="d-flex align-items-center gap-2 py-1">
-                    <Avatar
-                      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">
-                {isLoading ? (
-                  <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>
  );
 };

--- a/src/components/common/OffcanvasComponent.jsx
+++ b/src/components/common/OffcanvasComponent.jsx
@ -66,7 +66,7 @@ const OffcanvasComponent = ({
          ></button>
        </div>

-        <div className="offcanvas-body">{children}</div>
+        <div className="offcanvas-body ">{children}</div>
      </div>
    </div>
  );
--- a/src/utils/appUtils.js
+++ b/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);
--- a/src/utils/constants.jsx
+++ b/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