modify Job view Ui

public/assets/css/core-extend.css

@@ -456,8 +456,3 @@ font-weight: normal;
   .fs-md-xlarge { font-size: 170% !important; }
   .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
 }
-
-.me-16 {
-  /* margin-inline-end:  -7.0625rem !important; */
-  margin-left: -7.0625rem !important;
-}

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -6,11 +6,9 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 const ProjectCompletionChart = () => {
 
   const [currentPage, setCurrentPage] = useState(1);
-  const { data: projects, isLoading: loading, isError, error } = useProjects(currentPage, ITEMS_PER_PAGE);
-
-  console.log("Kartik", projects)
+  const { data: projects, isLoading: loading, isError, error } = useProjects(ITEMS_PER_PAGE,currentPage);
   // Bar chart logic
-  const projectNames = projects?.map((p) => p.name) || [];
+  const projectNames = projects?.data.map((p) => p.name) || [];
   const projectProgress =
     projects?.map((p) => {
       const completed = p.completedWork || 0;

src/components/ServiceProject/ManageJobTicket.jsx

@@ -45,57 +45,56 @@ const ManageJobTicket = ({ Job }) => {
   return (
     <div className="row text-start">
       <div className="col-12">
-        <div className="d-flex justify-content-between align-items-center flex-wrap mb-2">
-          {/* Job Id on left */}
+           <h6 className="fs-5 fw-semibold">{data?.title}</h6>
+        <div className="d-flex justify-content-between align-items-end flex-wrap mb-2">
           <p className="mb-0">
             <span className="fw-medium me-1">Job Id :</span>
             {data?.jobTicketUId || "N/A"}
           </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=""
-            content={
-              <ChangeStatus
-                statusId={data?.status?.id}
-                projectId={projectId}
-                jobId={Job?.job}
-                popUpId="STATUS_CHANEG"
-              />
-            }
-          >
-            <i className="bx bx-edit bx-sm cursor-pointer"></i>
-          </HoverPopup>
-          </div>
-          {data?.dueDate &&
-            (() => {
-              const { days, color } = daysLeft(data?.startDate, data?.dueDate);
-              return (
-                <span style={{ fontSize: "12px" }}>
-                  <span className="fw-medium me-1">Days Left :</span>
-                  <span className={`badge bg-${color}`}>
-                    {days !== null ? `${days} days` : "N/A"}
+          <div className="d-flex flex-column align-items-end gap-3 mb-3">
+            {data?.dueDate &&
+              (() => {
+                const { days, color } = daysLeft(
+                  data?.startDate,
+                  data?.dueDate
+                );
+                return (
+                  <span>
+                    <span className="fw-medium me-1">Days Left:</span>
+                    <span className={`badge bg-${color}`}>
+                      {days !== null ? `${days} days` : "N/A"}
+                    </span>
                   </span>
-                </span>
-              );
-            })()}
+                );
+              })()}
+            <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=""
+                content={
+                  <ChangeStatus
+                    statusId={data?.status?.id}
+                    projectId={projectId}
+                    jobId={Job?.job}
+                    popUpId="STATUS_CHANEG"
+                  />
+                }
+              >
+                <i className="bx bx-edit bx-sm cursor-pointer"></i>
+              </HoverPopup>
+            </div>
+          </div>
         </div>
-        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
+
+     
 
         <div className="d-flex flex-wrap">
-          <p>
-            <span className="fw-medium me-1">Description :</span>
-            {data?.description || "N/A"}
-          </p>
+          <p>{data?.description || "N/A"}</p>
         </div>
 
         <div className="d-flex justify-content-between mb-4">
@@ -135,21 +134,26 @@ const ManageJobTicket = ({ Job }) => {
               </small>
             </div>
           </div>
-          <div className="d-flex align-items-center">
+          <div className="d-flex flex-wrap align-items-start align-items-md-center">
             <small className="fs-6 fw-medium me-3">Assigned By</small>
-            <div className="d-flex flex-row gap-3">
+            <div className="row g-3 mt-md-1">
               {data?.assignees?.map((emp) => (
-                <div className="d-flex flex-row ">
-                  <Avatar
-                    size="xs"
-                    firstName={emp.firstName}
-                    lastName={emp.lastName}
-                  />
-                  <div className="d-flex flex-row align-items-center">
-                    <p className="m-0">{`${emp.firstName} ${emp.lastName}`}</p>
-                    <small className="text-secondary ms-1">
-                      ({emp.jobRoleName})
-                    </small>
+                <div key={emp.id} className="col-6 col-sm-6 col-md-4 col-lg-4">
+                  <div className="d-flex align-items-center gap-2">
+                    <Avatar
+                      size="xs"
+                      firstName={emp.firstName}
+                      lastName={emp.lastName}
+                    />
+
+                    <div className="d-flex flex-column">
+                      <span className="fw-semibold">
+                        {emp.firstName} {emp.lastName}
+                      </span>
+                      <small className="text-secondary">
+                        {emp.jobRoleName}
+                      </small>
+                    </div>
                   </div>
                 </div>
               ))}

src/components/common/HoverPopup.jsx

@@ -11,7 +11,7 @@ const HoverPopup = ({
   title,
   content,
   children,
-  className,
+  className = "",
   Mode = "hover",
 }) => {
   const dispatch = useDispatch();
@@ -46,11 +46,33 @@ const HoverPopup = ({
         dispatch(closePopup(id));
       }
     };
-
     document.addEventListener("click", handleOutside);
     return () => document.removeEventListener("click", handleOutside);
   }, [visible, Mode, id]);
 
+  useEffect(() => {
+    if (!visible || !popupRef.current) return;
+
+    const popup = popupRef.current;
+    const rect = popup.getBoundingClientRect();
+
+    popup.style.left = "50%";
+    popup.style.right = "auto";
+    popup.style.transform = "translateX(-50%)";
+
+    if (rect.right > window.innerWidth) {
+      popup.style.left = "auto";
+      popup.style.right = "0";
+      popup.style.transform = "none";
+    }
+
+    if (rect.left < 0) {
+      popup.style.left = "0";
+      popup.style.right = "auto";
+      popup.style.transform = "none";
+    }
+  }, [visible]);
+
   return (
     <div className="d-inline-block position-relative">
       <div
@@ -66,8 +88,12 @@ const HoverPopup = ({
       {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 }}
+          className={`bg-white border rounded shadow-sm p-3 w-max position-absolute top-100 mt-2 ${className}`}
+          style={{
+            zIndex: 2000,
+            left: "50%",
+            transform: "translateX(-50%)",
+          }}
           onClick={(e) => e.stopPropagation()}
         >
           {title && <h6 className="fw-semibold mb-2">{title}</h6>}