Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Service_Project_Managment

public/assets/css/core-extend.css

@@ -456,3 +456,8 @@ 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/Project/ManageProjectInfo.jsx

@@ -108,7 +108,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
   return (
     <div className="p-sm-2 p-2">
       <div className="text-center mb-2">
-        <h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
+        <h5 className="mb-2">{project ? "Edit Infra Project" : "Create Infra Project"}</h5>
       </div>
       <form
         className="row g-2 text-start"

src/components/ServiceProject/JobList.jsx

@@ -20,6 +20,12 @@ const JobList = () => {
   );
 
   const jobGrid = [
+    {
+      key: "jobTicketUId",
+      label: "Job Id",
+      getValue: (e) => e?.jobTicketUId || "N/A",
+      align: "text-start",
+    },
     {
       key: "title",
       label: "Title",
@@ -40,12 +46,7 @@ const JobList = () => {
       isAlwaysVisible: true,
       className: "text-start",
     },
-    {
+
-      key: "jobTicketUId",
-      label: "Job Id",
-      getValue: (e) => e?.jobTicketUId || "N/A",
-      align: "text-start",
-    },
     {
       key: "dueDate",
       label: "Due On",

src/components/ServiceProject/ManageJob.jsx

@@ -156,7 +156,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}

src/components/ServiceProject/ManageJobTicket.jsx

@@ -45,31 +45,37 @@ const ManageJobTicket = ({ Job }) => {
   return (
     <div className="row text-start">
       <div className="col-12">
-        <div className="d-flex flex-wrap">
+        <div className="d-flex justify-content-between align-items-center flex-wrap mb-2">
-          <p>
+          {/* Job Id on left */}
+          <p className="mb-0">
             <span className="fw-medium me-1">Job Id :</span>
             {data?.jobTicketUId || "N/A"}
           </p>
-        </div>
+
-        <div className="d-flex justify-content-between align-items-center mb-3">
+          {/* Edit icon on right */}
-          <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"
             content={
               <ChangeStatus
                 statusId={data?.status?.id}
                 projectId={projectId}
                 jobId={Job?.job}
-                  popUpId={"STATUS_CHANEG"}
+                popUpId="STATUS_CHANEG"
               />
             }
           >
-              <i className="bx bx-edit bx-sm"></i>
+            <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/ManageServiceProject.jsx

@@ -110,7 +110,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
     <FormProvider {...methods}>
       <form className="px-3 py-2" onSubmit={handleSubmit(onSubmit)}>
         <div className=" text-center">
-          <h5>{serviceProjectId ? "Update Project" : "Create Project"}</h5>
+          <h5>{serviceProjectId ? "Update Service Project" : "Create Service Project"}</h5>
         </div>
         <div className="row text-start">
           <div className="col-12 mb-2">

src/components/common/HoverPopup.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { closePopup, openPopup, togglePopup } from "../../slices/localVariablesSlice";
 
-const HoverPopup = ({ id, title, content, children, Mode = "hover" }) => {
+const HoverPopup = ({ id, title, content, children, className, Mode = "hover" }) => {
   const dispatch = useDispatch();
   const visible = useSelector((s) => s.localVariables.popups[id] || false);
 
@@ -60,7 +60,7 @@ const HoverPopup = ({ id, title, content, children, Mode = "hover" }) => {
       {visible && (
         <div
           ref={popupRef}
-          className="bg-white border rounded shadow-sm p-3 position-absolute top-100 start-0 mt-2"
+          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
         >

src/pages/project/ProjectPage.jsx

@@ -75,7 +75,7 @@ const ProjectPage = () => {
         />
 
         <div className="card cursor-pointer mb-5">
-          <div className="card-body p-2 pb-1">           
+          <div className="card-body py-3 px-6 pb-1">           
             <div className="d-flex flex-wrap justify-content-between align-items-start">
               {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
               <div className="mb-2">

src/services/signalRService.js

@@ -23,8 +23,11 @@ export function startSignalR(loggedUser) {
       transport: signalR.HttpTransportType.LongPolling,
       withCredentials: false,
     })
+    // .withKeepAliveInterval(30000)
+    // .withServerTimeout(30000)
     .withAutomaticReconnect()
     .build();
+  connection.serverTimeoutInMilliseconds = 30000; // 60 seconds
   const todayDate = new Date();
   const today = new Date(
     Date.UTC(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate())