fixed - useProject (infra) params

src/components/ServiceProject/JobList.jsx

@@ -36,9 +36,7 @@ const JobList = () => {
             maxWidth: "100%",
             width: "210px",
           }}
-          onClick={() =>
+          onClick={() => setSelectedJob({ showCanvas: true, job: e?.id })}
-            setSelectedJob({ showCanvas: true, job: e?.id })
-          }
         >
           {e?.title}
         </span>
@@ -69,7 +67,10 @@ const JobList = () => {
         const badgeColor = statusColorMap[statusName] || "label-secondary";
 
         return (
-          <span className={`badge bg-${badgeColor}`} style={{ fontSize: "12px" }}>
+          <span
+            className={`badge bg-${badgeColor}`}
+            style={{ fontSize: "12px" }}
+          >
             {statusName}
           </span>
         );
@@ -90,8 +91,8 @@ const JobList = () => {
         );
       },
       isAlwaysVisible: true,
-      className: "text-start d-none d-sm-table-cell"
+      className: "text-start d-none d-sm-table-cell",
-    }
+    },
   ];
 
   return (
@@ -105,7 +106,9 @@ const JobList = () => {
             {jobGrid.map((col) => (
               <th
                 key={col.key}
-                className={`${col.align || "text-center"} ${col.className || ""}`}
+                className={`${col.align || "text-center"} ${
+                  col.className || ""
+                }`}
                 scope="col"
               >
                 <div className={col.className}>{col.label}</div>
@@ -120,9 +123,15 @@ const JobList = () => {
         <tbody>
           {Array.isArray(data?.data) && data.data.length > 0 ? (
             data.data.map((row, i) => (
-              <tr key={i} className="text-start">
+              <tr
+                key={i}
+                className="text-start"
+                
+              >
                 {jobGrid.map((col) => (
-                  <td key={col.key} className={col.className}>
+                  <td key={col.key} className={col.className} onClick={() =>
+                  setSelectedJob({ showCanvas: true, job: row?.id })
+                }>
                     {col.getValue(row)}
                   </td>
                 ))}
@@ -135,7 +144,6 @@ const JobList = () => {
                       <i className="bx bx-dots-vertical-rounded bx-md"></i>
                     </button>
                     <div className="dropdown-menu dropdown-menu-end">
-                      {/* View always visible */}
                       <button
                         className="dropdown-item py-1"
                         onClick={() =>

src/components/ServiceProject/Jobs.jsx

@@ -57,7 +57,7 @@ const Jobs = () => {
         >
           <ManageJob Job={manageJob.jobId} />
         </OffcanvasComponent>
-        <div className="card page-min-h my-2 px-7">
+        <div className="card page-min-h my-2 px-7 pb-4">
           <div className="row">
             <div className="col-12 py-2 d-flex justify-content-end ">
               <div className="px-2">

src/components/ServiceProject/ManageJob.jsx

@@ -23,10 +23,13 @@ import {
 } from "../../hooks/appHooks/useAppForm";
 import { useParams } from "react-router-dom";
 import { useDispatch } from "react-redux";
+import { useJobStatus } from "../../hooks/masterHook/useMaster";
+import { useServiceProjectJobContext } from "./Jobs";
 
 const ManageJob = ({ Job }) => {
+  const { setManageJob, setSelectedJob } = useServiceProjectJobContext();
   const { projectId } = useParams();
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
   const methods = useAppForm({
     resolver: zodResolver(jobSchema),
     defaultValues: defaultJobValue,
@@ -52,11 +55,19 @@ const ManageJob = ({ Job }) => {
     isError: isJobError,
     error: jobError,
   } = useServiceProjectJobDetails(Job);
+
+  const { data, isLoading, isError, error } = useJobStatus(
+    JobData?.status?.id,
+    projectId
+  );
   const { mutate: CreateJob, isPending } = useCreateServiceProjectJob(() => {
     reset();
   });
   const { mutate: UpdateJob, isPending: Updating } = useUpdateServiceProjectJob(
-    () => { dispatch()}
+    () => {
+      setManageJob({ isOpen: false, jobId: null });
+      setSelectedJob({ showCanvas: true, job: Job });
+    }
   );
   const onSubmit = (formData) => {
     if (Job) {
@@ -120,7 +131,7 @@ const ManageJob = ({ Job }) => {
       formData.dueDate = localToUtc(formData.dueDate);
       formData.projectId = projectId;
 
-      // CreateJob(formData);
+      CreateJob(formData);
     }
   };
 
@@ -145,6 +156,7 @@ const ManageJob = ({ Job }) => {
       startDate: JobData.startDate ?? null,
       dueDate: JobData.dueDate ?? null,
       tags: JobData.tags ?? [],
+      statusId: JobData.status.id,
     });
   }, [JobData, Job, projectId]);
 
@@ -182,7 +194,7 @@ const ManageJob = ({ Job }) => {
               size="md"
             />
           </div>
-          <div className="col-12 col-md-12 mb-2 mb-md-4">
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
             <Label required>Select Employee</Label>
             <PmsEmployeeInputTag
               control={control}
@@ -190,6 +202,30 @@ const ManageJob = ({ Job }) => {
               placeholder="Select employee"
             />
           </div>
+          <div className="col-12 col-md-6 mb-2 mb-md-4">
+            <AppFormController
+              name="statusId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Status"
+                  options={data ?? []}
+                  placeholder="Choose a Status"
+                  required
+                  labelKeyKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={isLoading}
+                  className="m-0"
+                />
+              )}
+            />
+
+            {errors.statusId && (
+              <small className="danger-text">{errors.statusId.message}</small>
+            )}
+          </div>
           <div className="col-12 col-md-6 mb-2 mb-md-4">
             <TagInput
               options={JobTags?.data}

src/components/ServiceProject/ManageJobTicket.jsx

@@ -53,11 +53,17 @@ const ManageJobTicket = ({ Job }) => {
           </p>
 
           {/* Edit icon on right */}
+        
+        </div>
+
+        <div className="d-flex justify-content-between align-items-center mb-3">
+          <div className="d-flex flex-row gap-2">
+            <span className="badge bg-label-primary">{data?.status?.name}</span>
                   <HoverPopup
             id="STATUS_CHANEG"
             title="Change Status"
             Mode="click"
-            className="end-6 start-50 me-16"
+            className=""
             content={
               <ChangeStatus
                 statusId={data?.status?.id}
@@ -70,12 +76,6 @@ const ManageJobTicket = ({ Job }) => {
             <i className="bx bx-edit bx-sm cursor-pointer"></i>
           </HoverPopup>
           </div>
-
-        <div className="d-flex justify-content-between align-items-center mb-3">
-          <div className="d-flex flex-row gap-2">
-            <span className="badge bg-label-primary">{data?.status?.name}</span>
-
-          </div>
           {data?.dueDate &&
             (() => {
               const { days, color } = daysLeft(data?.startDate, data?.dueDate);

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -68,6 +68,8 @@ export const jobSchema = z.object({
   dueDate: z.string(),
 
   tags: z.array(TagSchema).optional().default([]),
+
+  statusId: z.string().optional(),
 });
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
@@ -103,6 +105,7 @@ export const defaultJobValue = {
   description: "",
   projectId: "",
   assignees: [],
+  statusId: null,
   startDate: null,
   dueDate: null,
   tags: [],

src/components/collections/Comment.jsx

@@ -27,7 +27,7 @@ const Comment = ({ invoice }) => {
     AddComment(payload);
   };
   return (
-    <div className="row pt-1 px-2">
+    <div className="row pt-1 px-2 pb-3">
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="col-12">
           <textarea

src/components/common/HoverPopup.jsx

@@ -1,15 +1,25 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { closePopup, openPopup, togglePopup } from "../../slices/localVariablesSlice";
+import {
+  closePopup,
+  openPopup,
+  togglePopup,
+} from "../../slices/localVariablesSlice";
 
-const HoverPopup = ({ id, title, content, children, className, Mode = "hover" }) => {
+const HoverPopup = ({
+  id,
+  title,
+  content,
+  children,
+  className,
+  Mode = "hover",
+}) => {
   const dispatch = useDispatch();
   const visible = useSelector((s) => s.localVariables.popups[id] || false);
 
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
 
-  // Hover mode
   const handleMouseEnter = () => {
     if (Mode === "hover") dispatch(openPopup(id));
   };
@@ -18,7 +28,6 @@ const HoverPopup = ({ id, title, content, children, className, Mode = "hover" })
     if (Mode === "hover") dispatch(closePopup(id));
   };
 
-  // Click mode
   const handleClick = (e) => {
     if (Mode === "click") {
       e.stopPropagation();
@@ -26,7 +35,6 @@ const HoverPopup = ({ id, title, content, children, className, Mode = "hover" })
     }
   };
 
-  // Outside click handling
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -45,7 +53,6 @@ const HoverPopup = ({ id, title, content, children, className, Mode = "hover" })
 
   return (
     <div className="d-inline-block position-relative">
-      {/* Trigger element */}
       <div
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
@@ -56,19 +63,16 @@ const HoverPopup = ({ id, title, content, children, className, Mode = "hover" })
         {children}
       </div>
 
-      {/* Popup */}
       {visible && (
         <div
           ref={popupRef}
-          className={`bg-white border rounded shadow-sm p-3 position-absolute top-100 mt-2 start-50 translate-middle-x ${className}`}
+          className={`bg-white border w-max rounded shadow-sm p-3 position-absolute top-100 mt-2 start-50 translate-middle-x ${className}`}
-          style={{ zIndex: 1000, width: "240px" }}
+          style={{ zIndex: 1000 }}
-          onClick={(e) => e.stopPropagation()} // prevents closing when clicking inside
+          onClick={(e) => e.stopPropagation()}
         >
           {title && <h6 className="fw-semibold mb-2">{title}</h6>}
 
           <div>{content}</div>
-
-
         </div>
       )}
     </div>

src/hooks/useProjects.js

@@ -20,13 +20,13 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageNumber,pageSize) => {
+export const useProjects = (pageSize,pageNumber) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList",pageNumber,pageSize],
+    queryKey: ["ProjectsList",pageSize,pageNumber],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageNumber,pageSize);
+      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
-      return response?.data?.data;
+      return response?.data;
     },
     enabled: !!loggedUser,
   });

src/hooks/useServiceProject.jsx

@@ -181,6 +181,7 @@ export const useJobComments = (jobId, pageSize, pageNumber) => {
       );
       return resp.data;
     },
+    enabled:!!jobId,
 
     initialPageParam: pageNumber,
 

src/repositories/ProjectRepository.jsx

@@ -1,7 +1,7 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: (pageNumber,pageSize) => api.get(`/api/project/list?&pageNumber=${pageNumber}&pageSize=${pageSize}`),
+  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),