From 7190a3c190fafb6e8326946a7c72226b830b1e81 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Fri, 14 Nov 2025 16:39:46 +0530
Subject: [PATCH] added offcanavs for create and update

---
 src/components/ServiceProject/JobComments.jsx |   1 -
 src/components/ServiceProject/JobList.jsx     |  17 +-
 src/components/ServiceProject/Jobs.jsx        |  26 ++-
 src/components/ServiceProject/ManageJob.jsx   | 212 ++++++++++--------
 .../ServiceProject/ServiceProjectNav.jsx      |  26 +--
 .../ServiceProject/ServiceProjectSchema.jsx   |  38 ++--
 src/hooks/useServiceProject.jsx               |  23 +-
 src/repositories/ServiceProjectRepository.jsx |   3 +-
 8 files changed, 202 insertions(+), 144 deletions(-)

diff --git a/src/components/ServiceProject/JobComments.jsx b/src/components/ServiceProject/JobComments.jsx
index 42c64d63..894c1b38 100644
--- a/src/components/ServiceProject/JobComments.jsx
+++ b/src/components/ServiceProject/JobComments.jsx
@@ -94,7 +94,6 @@ const JobComments = ({ data }) => {
     const newFiles = files.filter((_, i) => i !== index);
     setValue("attachments", newFiles, { shouldValidate: true });
   };
-  console.log(watch("attachments"))
   return (
     <div className="row">
       <div className="sticky-section bg-white p-3">
diff --git a/src/components/ServiceProject/JobList.jsx b/src/components/ServiceProject/JobList.jsx
index 425ffca4..a58fdd85 100644
--- a/src/components/ServiceProject/JobList.jsx
+++ b/src/components/ServiceProject/JobList.jsx
@@ -9,9 +9,8 @@ import { useParams } from "react-router-dom";
 import ProjectPage from "../../pages/project/ProjectPage";
 import { useServiceProjectJobContext } from "./Jobs";
 
-
 const JobList = ({ filterByProject }) => {
-  const {setSelectedJob} = useServiceProjectJobContext()
+  const { setSelectedJob, setManageJob } = useServiceProjectJobContext();
   const { id } = useParams();
   const { data, isLoading, isError, error } = useServiceProjectJobs(
     ITEMS_PER_PAGE,
@@ -112,12 +111,22 @@ const JobList = ({ filterByProject }) => {
                     </button>
                     <div className="dropdown-menu dropdown-menu-end">
                       {/* View always visible */}
-                      <button className="dropdown-item py-1" onClick={()=>setSelectedJob({showCanvas:true,job:row?.id})}>
+                      <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">
+                        <button
+                          className="dropdown-item py-1"
+                          onClick={() =>
+                            setManageJob({ isOpen: true, jobId: row?.id })
+                          }
+                        >
                           <i className="bx bx-edit bx-sm"></i> Edit
                         </button>
                       </>
diff --git a/src/components/ServiceProject/Jobs.jsx b/src/components/ServiceProject/Jobs.jsx
index f7ad0dda..6870c7d0 100644
--- a/src/components/ServiceProject/Jobs.jsx
+++ b/src/components/ServiceProject/Jobs.jsx
@@ -20,15 +20,21 @@ export const useServiceProjectJobContext = () => {
   return context;
 };
 const Jobs = () => {
+  const [manageJob, setManageJob] = useState({ isOpen: false, jobId: null });
   const [showCanvas, setShowCanvas] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
-  const [selectJob,setSelectedJob] = useState({showCanvas:false,job:null})
+  const [selectJob, setSelectedJob] = useState({
+    showCanvas: false,
+    job: null,
+  });
   const navigate = useNavigate();
   const { data } = useServiceProjects(ITEMS_PER_PAGE, 1);
 
   const contextProvider = {
-    setSelectedJob
-  }
+    setSelectedJob,
+    setSelectedProject,
+    setManageJob,
+  };
   return (
     <>
       <JonContext.Provider value={contextProvider}>
@@ -37,10 +43,19 @@ const Jobs = () => {
           title="Job"
           placement="end"
           show={selectJob.showCanvas}
-          onClose={() => setSelectedJob({showCanvas:false,job:null})}
+          onClose={() => setSelectedJob({ showCanvas: false, job: null })}
         >
           <ManageJobTicket Job={selectJob} />
         </OffcanvasComponent>
+        <OffcanvasComponent
+          id="customCanvas1"
+          title={`${manageJob.jobId ? "Update a Job" : "Create a new Job"} `}
+          placement="end"
+          show={manageJob.isOpen}
+          onClose={() => setManageJob({ isOpen: false, jobId: null })}
+        >
+          <ManageJob Job={manageJob.jobId} />
+        </OffcanvasComponent>
         <div className="card page-min-h my-2 px-4">
           <div className="row">
             <div className="col-12 py-2 d-flex justify-content-between ">
@@ -64,7 +79,7 @@ const Jobs = () => {
               <div className="px-2">
                 <button
                   className="btn btn-sm btn-primary"
-                  onClick={() => navigate("/service/job")}
+                  onClick={() => setManageJob({ isOpen: true, jobId: null })}
                 >
                   <i className="bx bx-plus-circle bx-md me-2"></i>New Job
                 </button>
@@ -74,7 +89,6 @@ const Jobs = () => {
             <JobList filterByProject={selectedProject} />
           </div>
         </div>
-
       </JonContext.Provider>
     </>
   );
diff --git a/src/components/ServiceProject/ManageJob.jsx b/src/components/ServiceProject/ManageJob.jsx
index 5232e3ca..95cab9ef 100644
--- a/src/components/ServiceProject/ManageJob.jsx
+++ b/src/components/ServiceProject/ManageJob.jsx
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Breadcrumb from "../common/Breadcrumb";
 import Label from "../common/Label";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultJobValue, jobSchema } from "./ServiceProjectSchema";
 import {
   useCreateServiceProjectJob,
+  useJobTags,
+  useServiceProjectJobDetails,
   useServiceProjects,
 } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
@@ -19,7 +21,7 @@ import {
   useAppForm,
 } from "../../hooks/appHooks/useAppForm";
 
-const ManageJob = () => {
+const ManageJob = ({ Job }) => {
   const methods = useAppForm({
     resolver: zodResolver(jobSchema),
     defaultValues: defaultJobValue,
@@ -40,10 +42,23 @@ const ManageJob = () => {
     isError: isProjectError,
     error,
   } = useServiceProjects(ITEMS_PER_PAGE, 1);
+  const {
+    data: JobTags,
+    isLoading: isTagLoading,
+    isError: isTagError,
+    error: tagError,
+  } = useJobTags();
+  const {
+    data: JobData,
+    isLoading: isJobLoading,
+    isError: isJobError,
+    error: jobError,
+  } = useServiceProjectJobDetails(Job);
 
   const { mutate: CreateJob, isPending } = useCreateServiceProjectJob(() => {
     reset();
   });
+
   const onSubmit = (formData) => {
     formData.assignees = formData.assignees.map((emp) => ({
       employeeId: emp,
@@ -52,104 +67,107 @@ const ManageJob = () => {
 
     formData.startDate = localToUtc(formData.startDate);
     formData.dueDate = localToUtc(formData.dueDate);
-    // CreateJob(formData);
-    console.log(formData);
+    CreateJob(formData)
   };
-  console.log(errors);
+
+  useEffect(() => {
+    if (!JobData || !Job) return;
+    const assignedEmployees = (JobData.assignees || []).map((e) => e.id);
+    reset({
+      title: JobData.title ?? "",
+      description: JobData.description ?? "",
+      projectId: JobData.project.id ?? "",
+      assignees: assignedEmployees,
+      startDate: JobData.startDate ?? null,
+      dueDate: JobData.dueDate ?? null,
+      tags: [],
+    });
+  }, [JobData]);
+
   return (
-    <div className="container-fluid">
-      <Breadcrumb
-        data={[
-          { label: "Home", link: "/dashboard" },
-          { label: "Sevice Projects", link: "/projects" },
-          { label: "" || "Jobs", link: null },
-        ]}
-      />
-      <div className="card m-auto page-min-h">
-        <div className="col-md-4 col-12 p-3"></div>
-        <div className="col-md-8 p-3">
-          <AppFormProvider {...methods}>
-            <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
-              <div>
-                <p className="fs-5 fw-medium">Create Job</p>
-              </div>
-              <div className="col-12 col-md-6 mb-2 ">
-                <Label required>Title</Label>
-                <input
-                  type="text"
-                  {...register("title")}
-                  className="form-control form-control"
+    <div className="container">
+      <AppFormProvider {...methods}>
+        <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
+          <div className="col-12 col-md-6 mb-2 ">
+            <Label required>Title</Label>
+            <input
+              type="text"
+              {...register("title")}
+              className="form-control form-control"
+            />
+          </div>
+          <div className="col-12 col-md-6 mb-2">
+            <AppFormController
+              name="projectId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Project"
+                  options={data?.data}
+                  placeholder="Choose a Project"
+                  required
+                  labelKeyKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={isProjectLoading}
                 />
-              </div>
-              <div className="col-12 col-md-6 mb-2">
-                <AppFormController
-                  name="projectId"
-                  control={control}
-                  render={({ field }) => (
-                    <SelectField
-                      label="Project"
-                      options={data?.data}
-                      placeholder="Choose a Project"
-                      required
-                      labelKeyKey="name"
-                      valueKeyKey="id"
-                      value={field.value}
-                      onChange={field.onChange}
-                      isLoading={isProjectLoading}
-                    />
-                  )}
-                />
-              </div>
-              <div className="col-12 col-md-6 mb-2 mb-md-4">
-                <Label required>Start Date</Label>
-                <DatePicker
-                  name="startDate"
-                  control={control}
-                  placeholder="DD-MM-YYYY"
-                  className="w-full form-control-md"
-                />
-              </div>
-              <div className="col-12 col-md-6 mb-2 mb-md-4">
-                <Label required>End Date</Label>
-                <DatePicker
-                  control={control}
-                  minDate={watch("startDate")}
-                  name="dueDate"
-                  className="w-full"
-                />
-              </div>
-              <div className="col-12 col-md-6 mb-2 mb-md-4">
-                <Label required>End Date</Label>
-                <PmsEmployeeInputTag
-                  control={control}
-                  name="assignees"
-                  placeholder="Enter employee"
-                />
-              </div>
-              <div className="col-12 col-md-6 mb-2 mb-md-4">
-                <TagInput name="tags" label="Tag" required />
-              </div>
-              <div className="col-12">
-                <Label required>Description</Label>
-                <textarea
-                  {...register("description")}
-                  className="form-control form-control-sm"
-                  rows={3}
-                />
-              </div>
-              <div className="d-flex flex-row-reverse my-2">
-                <button
-                  type="submit"
-                  className="btn btn-sm btn-primary"
-                  disabled={isPending}
-                >
-                  {isPending ? "Please wait..." : "Submit"}
-                </button>
-              </div>
-            </form>
-          </AppFormProvider>
-        </div>
-      </div>
+              )}
+            />
+          </div>
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
+            <Label required>Start Date</Label>
+            <DatePicker
+              name="startDate"
+              control={control}
+              placeholder="DD-MM-YYYY"
+              className="w-full form-control-md"
+            />
+          </div>
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
+            <Label required>End Date</Label>
+            <DatePicker
+              control={control}
+              minDate={watch("startDate")}
+              name="dueDate"
+              className="w-full"
+            />
+          </div>
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
+            <Label required>End Date</Label>
+            <PmsEmployeeInputTag
+              control={control}
+              name="assignees"
+              placeholder="Enter employee"
+            />
+          </div>
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
+            <TagInput
+              options={JobTags?.data}
+              name="tags"
+              label="Tag"
+              required
+            />
+          </div>
+          <div className="col-12">
+            <Label required>Description</Label>
+            <textarea
+              {...register("description")}
+              className="form-control form-control-sm"
+              rows={3}
+            />
+          </div>
+          <div className="d-flex flex-row-reverse my-4">
+            <button
+              type="submit"
+              className="btn btn-sm btn-primary"
+              disabled={isPending}
+            >
+              {isPending ? "Please wait..." : "Submit"}
+            </button>
+          </div>
+        </form>
+      </AppFormProvider>
     </div>
   );
 };
diff --git a/src/components/ServiceProject/ServiceProjectNav.jsx b/src/components/ServiceProject/ServiceProjectNav.jsx
index 116112e0..76c28b74 100644
--- a/src/components/ServiceProject/ServiceProjectNav.jsx
+++ b/src/components/ServiceProject/ServiceProjectNav.jsx
@@ -1,34 +1,32 @@
-import React from 'react'
+import React from "react";
 
 const ServiceProjectNav = ({ onPillClick, activePill }) => {
-    const ProjectTab = [
+  const ProjectTab = [
     { key: "profile", icon: "bx bx-user", label: "Profile" },
-     {
+    {
       key: "jobs",
       icon: "bx bx-briefcase-alt",
       label: "Jobs",
-      link:"/service/job",
+      link: "/service/job",
     },
     { key: "teams", icon: "bx bx-group", label: "Teams" },
- 
+
     {
       key: "directory",
       icon: "bx bxs-contact",
       label: "Directory",
     },
-    
-
   ];
   return (
-     <div className="table-responsive">
+    <div className="table-responsive">
       <div className="nav-align-top">
         <ul className="nav nav-tabs">
           {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
             <li key={tab.key} className="nav-item cursor-pointer">
               <a
-
-                className={`nav-link ${activePill === tab.key ? "active cursor-pointer" : ""
-                  } fs-6`}
+                className={`nav-link ${
+                  activePill === tab.key ? "active cursor-pointer" : ""
+                } fs-6`}
                 onClick={(e) => {
                   e.preventDefault();
                   onPillClick(tab.key);
@@ -42,7 +40,7 @@ const ServiceProjectNav = ({ onPillClick, activePill }) => {
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ServiceProjectNav
+export default ServiceProjectNav;
diff --git a/src/components/ServiceProject/ServiceProjectSchema.jsx b/src/components/ServiceProject/ServiceProjectSchema.jsx
index f2a865ad..f53b9957 100644
--- a/src/components/ServiceProject/ServiceProjectSchema.jsx
+++ b/src/components/ServiceProject/ServiceProjectSchema.jsx
@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+//#region  Service Project
 export const projectSchema = z.object({
   name: z.string().min(1, "Name is required"),
   shortName: z.string().min(1, "Short name is required"),
@@ -31,12 +32,15 @@ export const defaultProjectValues = {
   contactEmail: "",
 };
 
+//#endregion
+
 //#region JobSchema
 
 export const TagSchema = z.object({
   name: z.string().min(1, "Tag name is required"),
   isActive: z.boolean().default(true),
 });
+
 export const jobSchema = z.object({
   title: z.string().min(1, "Title is required"),
   description: z.string().min(1, "Description is required"),
@@ -57,27 +61,27 @@ const ALLOWED_TYPES = [
   "image/jpg",
   "image/jpeg",
 ];
+
 export const JobCommentSchema = z.object({
   comment: z.string().min(1, { message: "Please leave comment" }),
   attachments: z
-  .array(
-    z.object({
-      fileName: z.string().min(1),
-      base64Data: z.string().nullable(),
-      contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
-        message: "Only PDF, PNG, JPG, or JPEG files are allowed",
-      }),
-      documentId: z.string().optional(),
-      fileSize: z.number().max(MAX_FILE_SIZE),
-      description: z.string().optional(),
-      isActive: z.boolean().default(true),
-    })
-  )
-  .optional()
-  .default([]),
-
-  
+    .array(
+      z.object({
+        fileName: z.string().min(1),
+        base64Data: z.string().nullable(),
+        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+        }),
+        documentId: z.string().optional(),
+        fileSize: z.number().max(MAX_FILE_SIZE),
+        description: z.string().optional(),
+        isActive: z.boolean().default(true),
+      })
+    )
+    .optional()
+    .default([]),
 });
+
 export const defaultJobValue = {
   title: "",
   description: "",
diff --git a/src/hooks/useServiceProject.jsx b/src/hooks/useServiceProject.jsx
index 6ce93b8c..8cff3238 100644
--- a/src/hooks/useServiceProject.jsx
+++ b/src/hooks/useServiceProject.jsx
@@ -1,4 +1,9 @@
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { ServiceProjectRepository } from "../repositories/ServiceProjectRepository";
 import showToast from "../services/toastService";
 
@@ -121,13 +126,17 @@ export const useServiceProjectJobs = (
     },
   });
 };
-export const useJobComments = (jobId, pageSize, pageNumber ) => {
+export const useJobComments = (jobId, pageSize, pageNumber) => {
   return useInfiniteQuery({
     queryKey: ["jobComments", jobId, pageSize],
 
     queryFn: async ({ pageParam = pageNumber }) => {
-      const resp = await ServiceProjectRepository.GetJobComment(jobId, pageSize, pageParam);
-      return resp.data; 
+      const resp = await ServiceProjectRepository.GetJobComment(
+        jobId,
+        pageSize,
+        pageParam
+      );
+      return resp.data;
     },
 
     initialPageParam: pageNumber,
@@ -139,6 +148,12 @@ export const useJobComments = (jobId, pageSize, pageNumber ) => {
     },
   });
 };
+export const useJobTags = () => {
+  return useQuery({
+    queryKey: ["Job_Tags"],
+    queryFn: async () => await ServiceProjectRepository.GetJobTags(),
+  });
+};
 
 export const useServiceProjectJobDetails = (job) => {
   return useQuery({
diff --git a/src/repositories/ServiceProjectRepository.jsx b/src/repositories/ServiceProjectRepository.jsx
index c7b2812a..4632e86b 100644
--- a/src/repositories/ServiceProjectRepository.jsx
+++ b/src/repositories/ServiceProjectRepository.jsx
@@ -21,8 +21,9 @@ export const ServiceProjectRepository = {
     ),
   GetJobDetails: (id) => api.get(`/api/ServiceProject/job/details/${id}`),
   AddComment: (data) => api.post("/api/ServiceProject/job/add/comment", data),
-  GetJobComment: (jobTicketId,pageSize,pageNumber) =>
+  GetJobComment: (jobTicketId, pageSize, pageNumber) =>
     api.get(
       `/api/ServiceProject/job/comment/list?jobTicketId=${jobTicketId}&pageSize=${pageSize}&pageNumber=${pageNumber}`
     ),
+  GetJobTags: () => api.get(`/api/ServiceProject/job/tag/list`),
 };