integrated job details api and optimized form

public/assets/css/core-extend.css

@@ -3,6 +3,11 @@
   --bs-nav-link-font-size: 0.7375rem;
   --bg-border-color :#f8f6f6
 }
+.offcanvas.offcanvas-wide {
+  width: 700px !important; /* adjust as needed */
+  max-width: 90vw; /* responsive fallback */
+}
+
 /* ===========================% Background_Colors %========================================================== */
 .bg-light-primary {
   background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);

src/components/ServiceProject/JobList.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { getNextBadgeColor } from "../../utils/appUtils";
 import { useServiceProjectJobs } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
@@ -6,8 +6,12 @@ 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";
+
 
 const JobList = ({ filterByProject }) => {
+  const {setSelectedJob} = useServiceProjectJobContext()
   const { id } = useParams();
   const { data, isLoading, isError, error } = useServiceProjectJobs(
     ITEMS_PER_PAGE,
@@ -55,7 +59,7 @@ const JobList = ({ filterByProject }) => {
       label: "Start Date",
       getValue: (e) => formatUTCToLocalTime(e.startDate),
       isAlwaysVisible: true,
-      className: "text-center ",
+      className: "text-center d-none d-sm-table-cell ",
     },
     {
       key: "dueDate",
@@ -108,7 +112,7 @@ const JobList = ({ filterByProject }) => {
                     </button>
                     <div className="dropdown-menu dropdown-menu-end">
                       {/* View always visible */}
-                      <button className="dropdown-item py-1">
+                      <button className="dropdown-item py-1" onClick={()=>setSelectedJob({showCanvas:true,job:row?.id})}>
                         <i className="bx bx-detail bx-sm"></i> View
                       </button>
 

src/components/ServiceProject/Jobs.jsx

@@ -1,48 +1,79 @@
-import React, { useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import JobList from "./JobList";
 import { useNavigate } from "react-router-dom";
 import { useServiceProjects } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import OffcanvasComponent from "../common/OffcanvasComponent";
+import showToast from "../../services/toastService";
+import ManageJob from "./ManageJob";
+import ManageJobTicket from "./ManageJobTicket";
 
+export const JonContext = createContext();
+export const useServiceProjectJobContext = () => {
+  const context = useContext(JonContext);
+  if (!context) {
+    showToast("Something went wrong", "warning");
+    window.location = "/dashboard";
+  }
+  return context;
+};
 const Jobs = () => {
+  const [showCanvas, setShowCanvas] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
+  const [selectJob,setSelectedJob] = useState({showCanvas:false,job:null})
   const navigate = useNavigate();
-
   const { data } = useServiceProjects(ITEMS_PER_PAGE, 1);
+
+  const contextProvider = {
+    setSelectedJob
+  }
   return (
-    <div className="card page-min-h my-2 px-4">
-      <div className="row">
-        <div className="col-12 py-2 d-flex justify-content-between ">
-          <div>
-            {" "}
-            <select
-              className="form-select form-select-sm"
-              value={selectedProject}
-              onChange={(e) => setSelectedProject(e.target.value)}
-            >
-              <option disabled selected>
-                Select Poject
-              </option>
-              {data?.data?.map((project) => (
-                <option key={project.id} value={project.id}>
-                  {project.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="px-2">
-            <button
-              className="btn btn-sm btn-primary"
-              onClick={() => navigate("/service/job")}
-            >
-              <i className="bx bx-plus-circle bx-md me-2"></i>New Job
-            </button>
+    <>
+      <JonContext.Provider value={contextProvider}>
+        <OffcanvasComponent
+          id="customCanvas"
+          title="Job"
+          placement="end"
+          show={selectJob.showCanvas}
+          onClose={() => setSelectedJob({showCanvas:false,job:null})}
+        >
+          <ManageJobTicket Job={selectJob} />
+        </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 ">
+              <div>
+                {" "}
+                <select
+                  className="form-select form-select-sm"
+                  value={selectedProject}
+                  onChange={(e) => setSelectedProject(e.target.value)}
+                >
+                  <option disabled selected>
+                    Select Poject
+                  </option>
+                  {data?.data?.map((project) => (
+                    <option key={project.id} value={project.id}>
+                      {project.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="px-2">
+                <button
+                  className="btn btn-sm btn-primary"
+                  onClick={() => navigate("/service/job")}
+                >
+                  <i className="bx bx-plus-circle bx-md me-2"></i>New Job
+                </button>
+              </div>
+            </div>
+
+            <JobList filterByProject={selectedProject} />
           </div>
         </div>
-
-        <JobList filterByProject={selectedProject} />
-      </div>
-    </div>
+      </JonContext.Provider>
+    </>
   );
 };
 

src/components/ServiceProject/ManageJob.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Breadcrumb from "../common/Breadcrumb";
 import Label from "../common/Label";
-import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultJobValue, jobSchema } from "./ServiceProjectSchema";
 import {
@@ -13,9 +12,15 @@ import DatePicker from "../common/DatePicker";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import TagInput from "../common/TagInput";
 import { localToUtc } from "../../utils/appUtils";
+import SelectField from "../common/Forms/SelectField";
+import {
+  AppFormController,
+  AppFormProvider,
+  useAppForm,
+} from "../../hooks/appHooks/useAppForm";
 
 const ManageJob = () => {
-  const methods = useForm({
+  const methods = useAppForm({
     resolver: zodResolver(jobSchema),
     defaultValues: defaultJobValue,
   });
@@ -40,21 +45,6 @@ const ManageJob = () => {
     reset();
   });
   const onSubmit = (formData) => {
-    //  if (serviceProjectId) {
-    // let existingServiceIds = projectdata?.services?.map((s) => s.id) || [];
-
-    //   const oldAssigneed = projectdata.services.map((service) => ({
-    //     serviceId: service.id,
-    //     isActive: formData.services.includes(service.id),
-    //   }));
-
-    //   const newAassigneed = formData.services
-    //     .filter((s) => !existingServiceIds.includes(s))
-    //     .map((service) => ({ serviceId: service, isActive: true }));
-
-    //   formData.assignees = [...oldServices, ...newServices];
-    // }
-
     formData.assignees = formData.assignees.map((emp) => ({
       employeeId: emp,
       isActive: true,
@@ -62,9 +52,10 @@ const ManageJob = () => {
 
     formData.startDate = localToUtc(formData.startDate);
     formData.dueDate = localToUtc(formData.dueDate);
-    CreateJob(formData);
+    // CreateJob(formData);
+    console.log(formData);
   };
-
+  console.log(errors);
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -75,48 +66,39 @@ const ManageJob = () => {
         ]}
       />
       <div className="card m-auto page-min-h">
-        <div className="col-4 p-3"></div>
+        <div className="col-md-4 col-12 p-3"></div>
         <div className="col-md-8 p-3">
-          <FormProvider {...methods}>
+          <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 mb-md-4">
+              <div className="col-12 col-md-6 mb-2 ">
                 <Label required>Title</Label>
                 <input
                   type="text"
                   {...register("title")}
-                  className="form-control form-control-sm"
+                  className="form-control form-control"
                 />
               </div>
-              <div className="col-12 col-md-6 mb-2 mb-md-4">
-                <Label required>Project</Label>
-                <select
-                  className="form-select form-select-sm"
-                  {...register("projectId")}
-                >
-                  {isProjectLoading ? (
-                    <option selected disabled>
-                      Loading....
-                    </option>
-                  ) : (
-                    <>
-                      <option selected disabled>
-                        Select Project
-                      </option>
-                      {data?.data?.map((project) => (
-                        <option
-                          key={project.id}
-                          value={project.id}
-                          className="selection-option"
-                        >
-                          {project.name}
-                        </option>
-                      ))}
-                    </>
+              <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}
+                    />
                   )}
-                </select>
+                />
               </div>
               <div className="col-12 col-md-6 mb-2 mb-md-4">
                 <Label required>Start Date</Label>
@@ -124,7 +106,7 @@ const ManageJob = () => {
                   name="startDate"
                   control={control}
                   placeholder="DD-MM-YYYY"
-                  className="w-full"
+                  className="w-full form-control-md"
                 />
               </div>
               <div className="col-12 col-md-6 mb-2 mb-md-4">
@@ -165,7 +147,7 @@ const ManageJob = () => {
                 </button>
               </div>
             </form>
-          </FormProvider>
+          </AppFormProvider>
         </div>
       </div>
     </div>

src/components/ServiceProject/ManageJobTicket.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useServiceProjectJobDetails } from "../../hooks/useServiceProject";
+import { SpinnerLoader } from "../common/Loader";
+import Error from "../common/Error";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Avatar from "../common/Avatar";
+import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
+
+const ManageJobTicket = ({ Job }) => {
+  const { data, isLoading, isError, error } = useServiceProjectJobDetails(
+    Job?.job
+  );
+  if (isLoading) return <SpinnerLoader />;
+  if (isError)
+    return (
+      <div>
+        <Error error={error} />
+      </div>
+    );
+  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">
+          <div className="d-flex flex-row gap-2">
+            <i className="bx bx-calendar"></i>{" "}
+            <span>{formatUTCToLocalTime(data?.createdAt, true)}</span>
+          </div>
+          <span className="badge bg-label-primary">{data?.status?.name}</span>
+        </div>
+        <div className="d-flex flex-wrap my-3">
+          <p>{data?.description}</p>
+        </div>
+        <div className="d-flex flex-row gap-3">
+          <span className="fw-medium">
+            Start Date : {formatUTCToLocalTime(data?.startDate)}
+          </span>{" "}
+          <i className="bx bx-right-arrow-alt"></i>{" "}
+          <span className="fw-medium">
+            Due To : {formatUTCToLocalTime(data?.startDate)}
+          </span>
+        </div>
+        <div className="d-flex justify-content-between">
+            <div className="d-flex align-items-center">
+          <small className="fs-6 text-secondary fs-italic me-3 mt-2">
+            <em>Created By</em>
+          </small>{" "}
+          <Avatar size="xs"
+            firstName={data?.createdBy?.firstName}
+            lastName={data?.createdBy?.lastName}
+          />{" "}
+          <span className="fw-medium">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</span>
+        </div>
+        <div className="d-flex align-items-center">
+             <small className="fs-6 text-secondary fs-italic me-3 mt-2">
+            <em>Created By</em>
+          </small><EmployeeAvatarGroup employees={data?.assignees}/>
+        </div>
+        </div>
+      </div>
+      <hr className="divider"/>
+      <div className="col-12">
+        <div className="">
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ManageJobTicket;

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -31,6 +31,7 @@ export const defaultProjectValues = {
 
 //#region JobSchema
 
+
 export const TagSchema = z.object({
   name: z.string().min(1, "Tag name is required"),
   isActive: z.boolean().default(true),

src/components/common/Forms/SelectField.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from "react";
+import Label from "../Label";
+
+const SelectField = ({
+  label = "Select",
+  options = [],
+  placeholder = "Select Option",
+  required = false,
+  value,
+  onChange,
+  valueKey = "id",
+  labelKey = "name",
+  isLoading = false,
+}) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((opt) => opt[valueKey] === value);
+
+  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
+
+  const handleSelect = (option) => {
+    onChange(option[valueKey]);
+    setOpen(false);
+  };
+
+  const toggleDropdown = () => setOpen((prev) => !prev);
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={toggleDropdown}
+        disabled={isLoading}
+      >
+        <span
+          className={`text-truncate ${!selectedOption ? "text-muted" : ""}`}
+        >
+          {isLoading ? "Loading..." : displayText}
+        </span>
+      </button>
+
+      {open && !isLoading && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          {options.map((option, i) => (
+            <li key={i}>
+              <button
+                type="button"
+                className={`dropdown-item ${
+                  option[valueKey] === value ? "active" : ""
+                }`}
+                onClick={() => handleSelect(option)}
+              >
+                {option[labelKey]}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SelectField;

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from "react";
+import Label from "../Label";
+import { useDebounce } from "../../../utils/appUtils";
+
+const SelectFieldServerSide = ({
+  label = "Select",
+  options = [],
+  placeholder = "Select Option",
+  required = false,
+  value,
+  onChange,
+  valueKey = "id",
+  labelKey = "name",
+  isLoading = false,
+}) => {
+  const [searchText,setSeachText] = useState("")
+  const debounce = useDebounce(searchText,300);
+//   const {} = use
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((opt) => opt[valueKey] === value);
+
+  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
+
+  const handleSelect = (option) => {
+    onChange(option[valueKey]);
+    setOpen(false);
+  };
+
+  const toggleDropdown = () => setOpen((prev) => !prev);
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={toggleDropdown}
+        disabled={isLoading}
+      >
+        <span
+          className={`text-truncate ${!selectedOption ? "text-muted" : ""}`}
+        >
+          {isLoading ? "Loading..." : displayText}
+        </span>
+      </button>
+
+      {open && !isLoading && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          {options.map((option, i) => (
+            <li key={i}>
+              <button
+                type="button"
+                className={`dropdown-item ${
+                  option[valueKey] === value ? "active" : ""
+                }`}
+                onClick={() => handleSelect(option)}
+              >
+                {option[labelKey]}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SelectFieldServerSide;

src/components/common/OffcanvasComponent.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from "react";
+
+const OffcanvasComponent = ({
+  id = "globalOffcanvas",
+  title = "Offcanvas Title",
+  placement = "start", // start | end | top | bottom
+  children,
+  show = false,
+  onClose = () => {},
+}) => {
+  const offcanvasRef = useRef(null);
+  const bsInstance = useRef(null);
+
+  useEffect(() => {
+    if (!offcanvasRef.current) return;
+
+    // initialize once
+    bsInstance.current = bootstrap.Offcanvas.getOrCreateInstance(offcanvasRef.current);
+
+    const el = offcanvasRef.current;
+    const handleHide = () => onClose();
+
+    el.addEventListener("hidden.bs.offcanvas", handleHide);
+
+    return () => {
+      el.removeEventListener("hidden.bs.offcanvas", handleHide);
+    };
+  }, [onClose]);
+
+  // react to `show` changes
+  useEffect(() => {
+    if (!bsInstance.current) return;
+
+    if (show) bsInstance.current.show();
+    else bsInstance.current.hide();
+  }, [show]);
+
+  return (
+    <div >
+      <div
+        ref={offcanvasRef}
+        id={id}
+        className={`offcanvas offcanvas  offcanvas-${placement} offcanvas-wide`}
+        tabIndex="-1"
+        aria-labelledby={`${id}-label`}
+      >
+        <div className="offcanvas-header">
+           <div className='d-flex flex-row gap-3'>
+           <i className='bx bx-lg bx-left-arrow-alt cursor-pointer' data-bs-dismiss="offcanvas"
+            aria-label="Close"></i> <i className='bx bx-briefcase text-primary'></i> <h5 className="offcanvas-title" id={`${id}-label`}>{title}</h5>
+      </div>
+        
+          <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div className="offcanvas-body">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default OffcanvasComponent;

src/hooks/appHooks/useAppForm.js

@@ -0,0 +1,6 @@
+import { useForm, Controller,FormProvider } from "react-hook-form";
+
+export const useAppForm = (config) => useForm(config);
+export const AppFormProvider = FormProvider;
+export const AppFormController = Controller;
+

src/hooks/useServiceProject.jsx

@@ -112,6 +112,16 @@ export const useServiceProjectJobs=(pageSize,pageNumber,isActive=true,project)=>
     }
   })
 }
+export const useServiceProjectJobDetails = (job)=>{
+  return useQuery({
+    queryKey:['service-job',job],
+    queryFn:async() =>{
+      const resp =  await ServiceProjectRepository.GetJobDetails(job);
+      return resp.data;
+    },
+    enabled:!!job
+  })
+}
 
 export const useCreateServiceProjectJob = (onSuccessCallback) => {
   const queryClient = useQueryClient();

src/repositories/ServiceProjectRepository.jsx

@@ -19,4 +19,5 @@ export const ServiceProjectRepository = {
     api.get(
       `/api/ServiceProject/job/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&projectId=${projectId}`
     ),
+    GetJobDetails:(id)=>api.get(`/api/ServiceProject/job/details/${id}`)
 };