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

src/components/ServiceProject/JobList.jsx

@@ -4,17 +4,20 @@ import {
   getJobStatusBadge,
   getNextBadgeColor,
 } from "../../utils/appUtils";
-import { useServiceProjectJobs } from "../../hooks/useServiceProject";
+import { useServiceProjectJobs, useUpdateServiceProjectJob } from "../../hooks/useServiceProject";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+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"
+      {isArchiveModalOpen && (
-        aria-describedby="DataTables_Table_0_info"
+        <ConfirmModal
-      >
+          isOpen={isArchiveModalOpen}
-        <thead>
+          type="success"
-          <tr>
+          header="Archive Job"
-            {jobGrid.map((col) => (
+          message="Are you sure you want to archive this job?"
-              <th
+          onSubmit={handleArchive}
-                key={col.key}
+          onClose={() => setIsArchiveModalOpen(false)}
-                className={`${col.align || "text-center"} ${
+          loading={false}
-                  col.className || ""
+        />
-                }`}
+      )}
-                scope="col"
+
-              >
+      <div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
-                <div className={col.className}>{col.label}</div>
+        <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>
-            ))}
+            </tr>
-            <th className="sorting_disabled text-center" aria-label="Actions">
+          </thead>
-              Actions
-            </th>
-          </tr>
-        </thead>
 
-        <tbody>
+          <tbody>
-          {Array.isArray(data?.data) && data.data.length > 0 ? (
+            {Array.isArray(data?.data) && data.data.length > 0 ? (
-            data.data.map((row, i) => (
+              data.data.map((row, i) => (
-              <tr key={i} className="text-start">
+                <tr key={i} className="text-start">
-                {jobGrid.map((col) => (
+                  {jobGrid.map((col) => (
-                  <td
+                    <td
-                    key={col.key}
+                      key={col.key}
-                    className={col.className}
+                      className={col.className}
-                    onClick={() =>
+                      onClick={() =>
-                      setSelectedJob({ showCanvas: true, job: row?.id })
+                        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"
                     >
-                      <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                      {col.getValue(row)}
-                    </button>
+                    </td>
-                    <div className="dropdown-menu dropdown-menu-end">
+                  ))}
+                  <td>
+                    <div className="dropdown text-center">
                       <button
-                        className="dropdown-item py-1"
+                        className="btn btn-icon dropdown-toggle hide-arrow"
-                        onClick={() =>
+                        data-bs-toggle="dropdown"
-                          setSelectedJob({ showCanvas: true, job: row?.id })
-                        }
                       >
-                        <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>
-            ))
+            )}
-          ) : (
+          </tbody>
-            <tr style={{ height: "200px" }}>
+        </table>
-              <td
+      </div>
-                colSpan={jobGrid.length + 1}
+    </>
-                className="text-center border-0 align-middle"
-              >
-                {isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
   );
 };
 

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:

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 }) => {
+    mutationFn: async ({ id, payload, isArchiveAction = false }) => {
-      // Call the repository patch
       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: () => {

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",
+  },
+];