src/components/ServiceProject/JobList.jsx

@@ -36,7 +36,9 @@ const JobList = () => {
             maxWidth: "100%",
             width: "210px",
           }}
-          onClick={() => setSelectedJob({ showCanvas: true, job: e?.id })}
+          onClick={() =>
+            setSelectedJob({ showCanvas: true, job: e?.id })
+          }
         >
           {e?.title}
         </span>
@@ -67,10 +69,7 @@ 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>
         );
@@ -91,8 +90,8 @@ const JobList = () => {
         );
       },
       isAlwaysVisible: true,
-      className: "text-start d-none d-sm-table-cell",
-    },
+      className: "text-start d-none d-sm-table-cell"
+    }
   ];
 
   return (
@@ -106,9 +105,7 @@ 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>
@@ -123,15 +120,9 @@ 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} onClick={() =>
-                  setSelectedJob({ showCanvas: true, job: row?.id })
-                }>
+                  <td key={col.key} className={col.className}>
                     {col.getValue(row)}
                   </td>
                 ))}
@@ -144,6 +135,7 @@ 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 pb-4">
+        <div className="card page-min-h my-2 px-7">
           <div className="row">
             <div className="col-12 py-2 d-flex justify-content-end ">
               <div className="px-2">

src/components/ServiceProject/ManageJob.jsx

@@ -23,13 +23,10 @@ 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,
@@ -55,19 +52,11 @@ 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(
-    () => {
-      setManageJob({ isOpen: false, jobId: null });
-      setSelectedJob({ showCanvas: true, job: Job });
-    }
+    () => { dispatch()}
   );
   const onSubmit = (formData) => {
     if (Job) {
@@ -131,7 +120,7 @@ const ManageJob = ({ Job }) => {
       formData.dueDate = localToUtc(formData.dueDate);
       formData.projectId = projectId;
 
-      CreateJob(formData);
+      // CreateJob(formData);
     }
   };
 
@@ -156,7 +145,6 @@ const ManageJob = ({ Job }) => {
       startDate: JobData.startDate ?? null,
       dueDate: JobData.dueDate ?? null,
       tags: JobData.tags ?? [],
-      statusId: JobData.status.id,
     });
   }, [JobData, Job, projectId]);
 
@@ -194,7 +182,7 @@ const ManageJob = ({ Job }) => {
               size="md"
             />
           </div>
-          <div className="col-12 col-md-6 mb-2 mb-md-4">
+          <div className="col-12 col-md-12 mb-2 mb-md-4">
             <Label required>Select Employee</Label>
             <PmsEmployeeInputTag
               control={control}
@@ -202,30 +190,6 @@ 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,17 +53,11 @@ 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=""
+            className="end-6 start-50 me-16"
             content={
               <ChangeStatus
                 statusId={data?.status?.id}
@@ -76,6 +70,12 @@ 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,8 +68,6 @@ 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
@@ -105,7 +103,6 @@ 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 pb-3">
+    <div className="row pt-1 px-2">
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="col-12">
           <textarea

src/components/common/HoverPopup.jsx

@@ -1,25 +1,15 @@
 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));
   };
@@ -28,6 +18,7 @@ const HoverPopup = ({
     if (Mode === "hover") dispatch(closePopup(id));
   };
 
+  // Click mode
   const handleClick = (e) => {
     if (Mode === "click") {
       e.stopPropagation();
@@ -35,6 +26,7 @@ const HoverPopup = ({
     }
   };
 
+  // Outside click handling
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -53,6 +45,7 @@ const HoverPopup = ({
 
   return (
     <div className="d-inline-block position-relative">
+      {/* Trigger element */}
       <div
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
@@ -63,16 +56,19 @@ const HoverPopup = ({
         {children}
       </div>
 
+      {/* Popup */}
       {visible && (
         <div
           ref={popupRef}
-          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 }}
-          onClick={(e) => e.stopPropagation()}
+          className={`bg-white border rounded shadow-sm p-3 position-absolute top-100 mt-2 start-50 translate-middle-x ${className}`}
+          style={{ zIndex: 1000, width: "240px" }}
+          onClick={(e) => e.stopPropagation()} // prevents closing when clicking inside
         >
           {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 = (pageSize,pageNumber) => {
+export const useProjects = (pageNumber,pageSize) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList",pageSize,pageNumber],
+    queryKey: ["ProjectsList",pageNumber,pageSize],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
-      return response?.data;
+      const response = await ProjectRepository.getProjectList(pageNumber,pageSize);
+      return response?.data?.data;
     },
     enabled: !!loggedUser,
   });

src/hooks/useServiceProject.jsx

@@ -181,7 +181,6 @@ 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: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageNumber,pageSize) => api.get(`/api/project/list?&pageNumber=${pageNumber}&pageSize=${pageSize}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),