src/components/DailyProgressRport/TaskReportFilterPanel.jsx

@@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
       dateTo: localToUtc(formData.dateTo),
     };
     handleFilter(filterPayload);
-    closePanel();
   };
 
   const onClear = () => {
     setResetKey((prev) => prev + 1);
     handleFilter(TaskReportDefaultValue);
     reset(TaskReportDefaultValue);
-    closePanel();
   };
   return (
     <FormProvider {...methods}>

src/components/DailyProgressRport/TaskReportList.jsx

@@ -204,24 +204,34 @@ const TaskReportList = () => {
                   <HoverPopup
                     id="total_pending_task"
                     title="Total Pending Task"
-                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the total pending tasks for each activity on that date.
+                      </div>
+                    }
                   >
                     <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                   </HoverPopup>
                 </span>
               </th>
+
               <th>
                 <span>
                   Reported/Planned{" "}
                   <HoverPopup
                     id="reportes_and_planned_task"
                     title="Reported and Planned Task"
-                    content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the reported versus planned tasks for each activity on that date.
+                      </div>
+                    }
                   >
                     <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                   </HoverPopup>
                 </span>
               </th>
+
               <th>Assign Date</th>
               <th>Team</th>
               <th className="text-center">Actions</th>

src/components/Dashboard/AttendanceOverview.jsx

@@ -100,7 +100,7 @@ const AttendanceOverview = () => {
   };
 
   return (
-    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
       {/* Header */}
       <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">

src/components/Dashboard/Dashboard.jsx

@@ -17,12 +17,19 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 import ProjectStatistics from "../Project/ProjectStatistics";
+import ServiceJobs from "./ServiceJobs";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
 
 const Dashboard = () => {
 
     // Get the selected project ID from Redux store
     const projectId = useSelector((store) => store.localVariables.projectId);
     const isAllProjectsSelected = projectId === null;
+    const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+    const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+    const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+
 
     return (
         <div className="container-fluid mt-5">
@@ -49,7 +56,7 @@ const Dashboard = () => {
                 <div className="col-xxl-6 col-lg-6">
                     <ProjectProgressChart />
                 </div>
-                {!isAllProjectsSelected && (
+                {!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
                     <div className="col-12 col-md-6 mb-sm-0 mb-4">
                         <AttendanceOverview />
                     </div>
@@ -57,8 +64,10 @@ const Dashboard = () => {
 
                 {!isAllProjectsSelected && (
                     <div className="col-xxl-4 col-lg-4">
+                        <div className="card h-100">
                             <ProjectStatistics />
                         </div>
+                    </div>
                 )}
                 <div className="col-12 col-xl-4 col-md-6">
                     <div className="card ">
@@ -74,6 +83,9 @@ const Dashboard = () => {
                 <div className="col-12 col-md-6">
                     <ExpenseByProject />
                 </div>
+                {/* <div className="col-12 col-md-12">
+                    <ServiceJobs />
+                </div> */}
             </div>
         </div>
     );

src/components/Dashboard/ServiceJobs.jsx

@@ -0,0 +1,237 @@
+import React from "react";
+
+const ServiceJobs = () => {
+  return (
+    <div className="col-xxl-4 col-lg-6">
+      <div className="card h-100">
+        <div className="card-header d-flex justify-content-between">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Service Jobs</h5>
+            <p className="card-subtitle">All Projects</p>
+          </div>
+        </div>
+
+        <div className="card-body p-0">
+          <div className="nav-align-top">
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+              <li className="nav-item">
+                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
+                  My Jobs
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
+                  Assigned
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
+                  In Progress
+                </button>
+              </li>
+            </ul>
+
+            {/* Tab Content */}
+            <div className="tab-content border-0 mx-1 text-start">
+
+              {/* ---------------------- NEW TAB ---------------------- */}
+              <div className="tab-pane fade show active" id="tab-new">
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Myrtle Ullrich</h6>
+                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Barry Schowalter</h6>
+                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Veronica Herman</h6>
+                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Helen Jacobs</h6>
+                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- PREPARING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-preparing">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Oliver Grant</h6>
+                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Samantha Lee</h6>
+                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Marcus Howard</h6>
+                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Daniel Foster</h6>
+                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- SHIPPING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-shipping">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">James Carter</h6>
+                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Linda Moore</h6>
+                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Sarah Bennett</h6>
+                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">George Simmons</h6>
+                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default ServiceJobs;

src/components/Project/ProjectStatistics.jsx

@@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card h-100">
+    <>
       <div className="card-header text-start">
         <h5 className="card-action-title mb-0">
           {" "}
@@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
           </li>
         </ul>
       </div>
+    </>
 
-    </div>
   );
 };
 

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <HoverPopup
                 title="Payment Type"
                 id="payment_type"
+
                 content={
-                  <div className=" w-50">
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
-                    <p>
                     Choose whether the payment amount varies or remains fixed
                     each cycle.
                     <br />
                     <strong>Is Variable:</strong> Amount changes per cycle.
                     <br />
                     <strong>Fixed:</strong> Amount stays constant.
-                    </p>
                   </div>
                 }
               >
@@ -476,10 +475,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 title="Payment Buffer Days"
                 id="payment_buffer_days"
                 content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                     Number of extra days allowed after the due date before
                     payment is considered late.
-                  </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@@ -511,10 +510,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <HoverPopup
                 title="End Date"
                 id="end_date"
+
                 content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                     The date when the last payment in the recurrence occurs.
-                  </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>

src/components/common/HoverPopup.jsx

@@ -58,117 +58,43 @@ const HoverPopup = ({
     return () => document.removeEventListener("click", handler);
   }, [Mode, visible, dispatch, id]);
 
-  // Positioning effect: respects align prop and stays inside boundary (drawer)
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
-    // run in next frame so DOM/layout settles
     requestAnimationFrame(() => {
       const popup = popupRef.current;
-
+      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
-      // choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
-      const boundaryEl =
-        (boundaryRef && boundaryRef.current) || popup.parentElement;
       if (!boundaryEl) return;
 
       const boundaryRect = boundaryEl.getBoundingClientRect();
       const triggerRect = triggerRef.current.getBoundingClientRect();
-
-      // reset styles first
       popup.style.left = "";
       popup.style.right = "";
       popup.style.transform = "";
       popup.style.top = "";
 
       const popupRect = popup.getBoundingClientRect();
-      const parentRect = boundaryRect; // alias
+      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
+      let left = triggerCenterX - popupRect.width / 2;
 
-      // Convert trigger center to parent coordinates
+      // Clamp to boundaries
-      const triggerCenterX =
+      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
-        triggerRect.left + triggerRect.width / 2 - parentRect.left;
+      popup.style.left = `${left}px`;
-
-      // preferred left so popup center aligns to trigger center:
-      const preferredLeft = triggerCenterX - popupRect.width / 2;
-
-      // Helpers to set styles in parent's coordinate system:
-      const setLeft = (leftPx) => {
-        popup.style.left = `${leftPx}px`;
-        popup.style.right = "auto";
-        popup.style.transform = "none";
-      };
-      const setRight = (rightPx) => {
-        popup.style.left = "auto";
-        popup.style.right = `${rightPx}px`;
-        popup.style.transform = "none";
-      };
-
-      // If user forced align:
-      if (align === "left") {
-        // align popup's left to parent's left (0)
-        setLeft(0);
-        return;
-      }
-      if (align === "right") {
-        // align popup's right to parent's right (0)
-        setRight(0);
-        return;
-      }
-      if (align === "center") {
-        popup.style.left = "50%";
-        popup.style.right = "auto";
-        popup.style.transform = "translateX(-50%)";
-        return;
-      }
-
-      // align === "auto": try preferred centered position, but flip fully if overflow
-      // clamp preferredLeft to boundaries so it doesn't render partially outside
-      const leftIfCentered = Math.max(
-        0,
-        Math.min(preferredLeft, parentRect.width - popupRect.width)
-      );
-
-      // if centered fits, use it
-      if (leftIfCentered === preferredLeft) {
-        setLeft(leftIfCentered);
-        return;
-      }
-
-      // if centering would overflow right -> stick popup fully to left (left=0)
-      if (preferredLeft > parentRect.width - popupRect.width) {
-        // place popup so its right aligns to parent's right
-        // i.e., left = parent width - popup width
-        setLeft(parentRect.width - popupRect.width);
-        return;
-      }
-
-      // if centering would overflow left -> stick popup fully to left=0
-      if (preferredLeft < 0) {
-        setLeft(0);
-        return;
-      }
-
-      // fallback center
-      setLeft(leftIfCentered);
     });
   }, [visible, align, boundaryRef]);
 
   return (
     <div
       className="d-inline-block position-relative"   // <-- ADD THIS !!
-    style={{
+      style={{ overflow: "visible" }}
-      maxWidth: "calc(700px - 100px)",
-      width: "100%",
-      wordWrap: "break-word",
-      overflow: "visible",   // also make sure popup isn't clipped
-    }}
     >
       <div
-      className="d-inline-block"
+
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onClick={handleClick}
-      style={{ cursor: "pointer" }}
+        style={{ cursor: "pointer", display: "inline-block" }}
       >
         {children}
       </div>
@@ -180,8 +106,9 @@ const HoverPopup = ({
          style={{
             zIndex: 2000,
             top: "100%",
-          width: "max-content",
+            minWidth: "200px",
-          minWidth: "120px",
+            maxWidth: "300px",
+            wordWrap: "break-word",
           }}
           onClick={(e) => e.stopPropagation()}
         >

src/pages/project/ProjectDetails.jsx

@@ -24,6 +24,9 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
 
 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
+import ProjectStatistics from "../../components/Project/ProjectStatistics";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
 
 const ProjectDetails = () => {
   const projectId = useSelectedProject();
@@ -34,6 +37,10 @@ const ProjectDetails = () => {
     useProjectDetails(projectId);
 
   const { canView, loading: permsLoading } = useProjectAccess(projectId);
+  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+
 
   useEffect(() => {
     if (!projectId && projectNames.length > 0) {
@@ -82,13 +89,16 @@ const ProjectDetails = () => {
           <div className="row">
             <div className="col-lg-4 col-md-5 mt-2">
               <AboutProject />
-              <ProjectOverview project={projectId} />
+              <div className="card"><ProjectStatistics project={projectId} /></div>
             </div>
+
             <div className="col-lg-8 col-md-7 mt-2">
               <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
+              {(canRegularize || canTeamAttendance || canSelfAttendance) && (
                 <div className="mt-5">
                   <AttendanceOverview />
                 </div>
+              )}
             </div>
           </div>
         );