Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management

2025-11-20 17:09:09 +05:30 · 2025-11-20 17:09:09 +05:30 · 753d8c4a2c
commit 753d8c4a2c
parent 766d19744c caaadc4c08
4 changed files with 178 additions and 78 deletions
--- a/src/components/ServiceProject/JobList.jsx
+++ b/src/components/ServiceProject/JobList.jsx
@ -4,17 +4,20 @@ import {
  getJobStatusBadge,
  getNextBadgeColor,
 } from "../../utils/appUtils";
-import { useServiceProjectJobs } from "../../hooks/useServiceProject";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { useServiceProjectJobs, useUpdateServiceProjectJob } from "../../hooks/useServiceProject";
+import { ITEMS_PER_PAGE, JOBS_STATUS_IDS } from "../../utils/constants";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { SpinnerLoader } from "../common/Loader";
 import { useParams } from "react-router-dom";
 import ProjectPage from "../../pages/project/ProjectPage";
 import { useServiceProjectJobContext } from "./Jobs";
+import ConfirmModal from "../common/ConfirmModal";

 const JobList = () => {
  const { setSelectedJob, setManageJob } = useServiceProjectJobContext();
+  const { mutate: UpdateJob } = useUpdateServiceProjectJob(() => {
+  });
  const { projectId } = useParams();
  const { data, isLoading, isError, error } = useServiceProjectJobs(
    ITEMS_PER_PAGE,
@ -22,6 +25,29 @@ const JobList = () => {
    true,
    projectId
  );
+  const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
+  const [archiveJobId, setArchiveJobId] = useState(null);
+
+
+  const handleArchive = () => {
+    const payload = [
+      {
+        op: "replace",
+        path: "/isArchive",
+        value: true,
+      },
+    ];
+
+    UpdateJob({
+      id: archiveJobId,
+      payload,
+      isArchiveAction: true,
+    });
+
+    setIsArchiveModalOpen(false);
+    setArchiveJobId(null);
+  };
+

  const jobGrid = [
    {
@ -86,65 +112,85 @@ const JobList = () => {
    },
  ];

+  const canArchive = (statusId) => {
+    const closedId = JOBS_STATUS_IDS.find((s) => s.label === "Closed")?.id;
+    const workDoneId = JOBS_STATUS_IDS.find((s) => s.label === "Work Done")?.id;
+
+    return statusId === closedId || statusId === workDoneId;
+  };
+
+
  return (
-    <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"
-      >
-        <thead>
-          <tr>
-            {jobGrid.map((col) => (
-              <th
-                key={col.key}
-                className={`${col.align || "text-center"} ${
-                  col.className || ""
-                }`}
-                scope="col"
-              >
-                <div className={col.className}>{col.label}</div>
+    <>
+
+      {isArchiveModalOpen && (
+        <ConfirmModal
+          isOpen={isArchiveModalOpen}
+          type="success"
+          header="Archive Job"
+          message="Are you sure you want to archive this job?"
+          onSubmit={handleArchive}
+          onClose={() => setIsArchiveModalOpen(false)}
+          loading={false}
+        />
+      )}
+
+      <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"
+        >
+          <thead>
+            <tr>
+              {jobGrid.map((col) => (
+                <th
+                  key={col.key}
+                  className={`${col.align || "text-center"} ${col.className || ""
+                    }`}
+                  scope="col"
+                >
+                  <div className={col.className}>{col.label}</div>
+                </th>
+              ))}
+              <th className="sorting_disabled text-center" aria-label="Actions">
+                Actions
              </th>
-            ))}
-            <th className="sorting_disabled text-center" aria-label="Actions">
-              Actions
-            </th>
-          </tr>
-        </thead>
+            </tr>
+          </thead>

-        <tbody>
-          {Array.isArray(data?.data) && data.data.length > 0 ? (
-            data.data.map((row, i) => (
-              <tr key={i} className="text-start">
-                {jobGrid.map((col) => (
-                  <td
-                    key={col.key}
-                    className={col.className}
-                    onClick={() =>
-                      setSelectedJob({ showCanvas: true, job: row?.id })
-                    }
-                  >
-                    {col.getValue(row)}
-                  </td>
-                ))}
-                <td>
-                  <div className="dropdown text-center">
-                    <button
-                      className="btn btn-icon dropdown-toggle hide-arrow"
-                      data-bs-toggle="dropdown"
+          <tbody>
+            {Array.isArray(data?.data) && data.data.length > 0 ? (
+              data.data.map((row, i) => (
+                <tr key={i} className="text-start">
+                  {jobGrid.map((col) => (
+                    <td
+                      key={col.key}
+                      className={col.className}
+                      onClick={() =>
+                        setSelectedJob({ showCanvas: true, job: row?.id })
+                      }
                    >
-                      <i className="bx bx-dots-vertical-rounded bx-md"></i>
-                    </button>
-                    <div className="dropdown-menu dropdown-menu-end">
+                      {col.getValue(row)}
+                    </td>
+                  ))}
+                  <td>
+                    <div className="dropdown text-center">
                      <button
-                        className="dropdown-item py-1"
-                        onClick={() =>
-                          setSelectedJob({ showCanvas: true, job: row?.id })
-                        }
+                        className="btn btn-icon dropdown-toggle hide-arrow"
+                        data-bs-toggle="dropdown"
                      >
-                        <i className="bx bx-detail bx-sm"></i> View
+                        <i className="bx bx-dots-vertical-rounded bx-md"></i>
                      </button>
-
-                      <>
+                      <div className="dropdown-menu dropdown-menu-end">
+                        <button
+                          className="dropdown-item py-1"
+                          onClick={() =>
+                            setSelectedJob({ showCanvas: true, job: row?.id })
+                          }
+                        >
+                          <i className="bx bx-detail bx-sm"></i> View
+                        </button>
+                        <>
                        <button
                          className="dropdown-item py-1"
                          onClick={() =>
@ -153,25 +199,39 @@ const JobList = () => {
                        >
                          <i className="bx bx-edit bx-sm"></i> Edit
                        </button>
-                      </>
+                        </>
+
+                        {canArchive(row?.status?.id) && (
+                          <button
+                            className="dropdown-item py-1"
+                            onClick={() => {
+                              setArchiveJobId(row.id);
+                              setIsArchiveModalOpen(true);
+                            }}
+                          >
+                            <i className="bx bx-archive bx-sm"></i> Archive
+                          </button>
+                        )}
+
+                      </div>
                    </div>
-                  </div>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr style={{ height: "200px" }}>
+                <td
+                  colSpan={jobGrid.length + 1}
+                  className="text-center border-0 align-middle"
+                >
+                  {isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
                </td>
              </tr>
-            ))
-          ) : (
-            <tr style={{ height: "200px" }}>
-              <td
-                colSpan={jobGrid.length + 1}
-                className="text-center border-0 align-middle"
-              >
-                {isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </>
  );
 };

--- a/src/components/common/ConfirmModal.jsx
+++ b/src/components/common/ConfirmModal.jsx
@ -17,7 +17,7 @@ const ConfirmModal = ({
      case "delete":
        return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
      case "success":
-        return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
+        return <i className="bx bx-archive-in text-warning" style={{ fontSize: "60px" }}></i>;
      case "warning":
        return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
      default:
--- a/src/hooks/useServiceProject.jsx
+++ b/src/hooks/useServiceProject.jsx
@ -257,19 +257,27 @@ export const useCreateServiceProjectJob = (onSuccessCallback) => {

 export const useUpdateServiceProjectJob = (onSuccessCallback) => {
  const queryClient = useQueryClient();
+
  return useMutation({
-    mutationFn: async ({ id, payload }) => {
-      // Call the repository patch
+    mutationFn: async ({ id, payload, isArchiveAction = false }) => {
      const resp = await ServiceProjectRepository.UpdateJob(id, payload);

-      return resp;
+      return { resp, isArchiveAction };
    },
-    onSuccess: () => {
+
+    onSuccess: ({ isArchiveAction }) => {
      queryClient.invalidateQueries({ queryKey: ["serviceProjectJobs"] });
      queryClient.invalidateQueries({ queryKey: ["service-job"] });
+
      if (onSuccessCallback) onSuccessCallback();
-      showToast("Job Updated successfully", "success");
+
+      if (isArchiveAction) {
+        showToast("Job archived successfully", "success");
+      } else {
+        showToast("Job Updated successfully", "success");
+      }
    },
+
    onError: (error) => {
      showToast(
        error?.response?.data?.message ||
@ -281,6 +289,7 @@ export const useUpdateServiceProjectJob = (onSuccessCallback) => {
  });
 };

+
 //#endregion

 //#region Branch
@ -384,7 +393,7 @@ export const useDeleteBranch = () => {
  const queryClient = useQueryClient();

  return useMutation({
-    mutationFn: async ({ id, isActive}) =>
+    mutationFn: async ({ id, isActive }) =>
      await ServiceProjectRepository.DeleteBranch(id, isActive),

    onSuccess: () => {
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@ -210,4 +210,35 @@ export const PAYEE_RECURRING_EXPENSE = [
 //#region Service Project and Jobs
 export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69"

-//#endregion
+//#endregion
+
+export const JOBS_STATUS_IDS = [
+  {
+    id: "32d76a02-8f44-4aa0-9b66-c3716c45a918",
+    label: "New",
+  },
+  {
+    id: "cfa1886d-055f-4ded-84c6-42a2a8a14a66",
+    label: "Assigned",
+  },
+  {
+    id: "5a6873a5-fed7-4745-a52f-8f61bf3bd72d",
+    label: "In Progress",
+  },
+  {
+    id: "aab71020-2fb8-44d9-9430-c9a7e9bf33b0",
+    label: "Work Done",
+  },
+  {
+    id: "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7",
+    label: "Review Done",
+  },
+  {
+    id: "3ddeefb5-ae3c-4e10-a922-35e0a452bb69",
+    label: "Closed",
+  },
+  {
+    id: "75a0c8b8-9c6a-41af-80bf-b35bab722eb2",
+    label: "On Hold",
+  },
+];