Adding Switch button on Jobs.

src/components/ServiceProject/JobList.jsx

@@ -14,7 +14,7 @@ import ProjectPage from "../../pages/project/ProjectPage";
 import { useServiceProjectJobContext } from "./Jobs";
 import ConfirmModal from "../common/ConfirmModal";
 
-const JobList = () => {
+const JobList = ({ isArchive }) => {
   const { setSelectedJob, setManageJob } = useServiceProjectJobContext();
   const { mutate: UpdateJob } = useUpdateServiceProjectJob(() => {
   });
@@ -23,7 +23,8 @@ const JobList = () => {
     ITEMS_PER_PAGE,
     1,
     true,
-    projectId
+    projectId,
+    isArchive
   );
   const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
   const [archiveJobId, setArchiveJobId] = useState(null);

src/components/ServiceProject/Jobs.jsx

@@ -21,6 +21,8 @@ export const useServiceProjectJobContext = () => {
 };
 const Jobs = () => {
   const [manageJob, setManageJob] = useState({ isOpen: false, jobId: null });
+  const [showArchive, setShowArchive] = useState(false);
+
   const [showCanvas, setShowCanvas] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
   const [selectJob, setSelectedJob] = useState({
@@ -58,21 +60,55 @@ const Jobs = () => {
           <ManageJob Job={manageJob.jobId} />
         </OffcanvasComponent>
         <div className="card page-min-h my-2 px-7 pb-4">
-          <div className="row">
+          <div className="row align-items-center py-4">
-            <div className="col-12 py-2 d-flex justify-content-end ">
+
-              <div className="px-2">
+            {/* LEFT — Tabs */}
-                <button
+            <div className="col-12 col-md-6">
-                  className="btn btn-sm btn-primary"
+              <ul className="nav nav-pills" role="tablist">
-                  onClick={() => setManageJob({ isOpen: true, jobId: null })}
+
-                >
+                <li className="nav-item">
-                  <i className="bx bx-plus-circle bx-md me-2"></i>New Job
+                  <button
-                </button>
+                    type="button"
-              </div>
+                    className={`nav-link px-2 py-2 ${!showArchive ? "active" : ""}`}
+                    role="tab"
+                    onClick={() => setShowArchive(false)}
+                    style={{ fontSize: "13px" }}
+                  >
+                    Active Jobs
+                  </button>
+                </li>
+
+                <li className="nav-item">
+                  <button
+                    type="button"
+                    className={`nav-link px-2 py-2 ${showArchive ? "active" : ""}`}
+                    role="tab"
+                    onClick={() => setShowArchive(true)}
+                    style={{ fontSize: "13px" }}
+                  >
+                    Archived Jobs
+                  </button>
+                </li>
+
+              </ul>
             </div>
 
-            <JobList filterByProject={selectedProject} />
+
+            {/* RIGHT — New Job button */}
+            <div className="col-12 col-md-6 d-flex justify-content-md-end mt-2 mt-md-0">
+              <button
+                className="btn btn-sm btn-primary"
+                onClick={() => setManageJob({ isOpen: true, jobId: null })}
+              >
+                <i className="bx bx-plus-circle bx-md me-2"></i>New Job
+              </button>
+            </div>
           </div>
+
+          {/* Job List */}
+          <JobList filterByProject={selectedProject} isArchive={showArchive} />
         </div>
+
       </JonContext.Provider>
     </>
   );

src/hooks/useServiceProject.jsx

@@ -154,16 +154,18 @@ export const useServiceProjectJobs = (
   pageSize,
   pageNumber,
   isActive = true,
-  project
+  project,
+  isArchive
 ) => {
   return useQuery({
-    queryKey: ["serviceProjectJobs", pageSize, pageNumber, isActive, project],
+    queryKey: ["serviceProjectJobs", pageSize, pageNumber, isActive, project, isArchive],
     queryFn: async () => {
       const resp = await ServiceProjectRepository.GetJobList(
         pageSize,
         pageNumber,
         isActive,
-        project
+        project,
+        isArchive
       );
       return resp.data;
     },

src/repositories/ServiceProjectRepository.jsx

@@ -24,9 +24,9 @@ export const ServiceProjectRepository = {
   //#region Job
 
   CreateJob: (data) => api.post(`/api/ServiceProject/job/create`, data),
-  GetJobList: (pageSize, pageNumber, isActive, projectId) =>
+  GetJobList: (pageSize, pageNumber, isActive, projectId,isArchive) =>
     api.get(
-      `/api/ServiceProject/job/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&projectId=${projectId}`
+      `/api/ServiceProject/job/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&projectId=${projectId}&isArchive=${isArchive}`
     ),
   GetJobDetails: (id) => api.get(`/api/ServiceProject/job/details/${id}`),
   AddComment: (data) => api.post("/api/ServiceProject/job/add/comment", data),