Merge pull request 'Correction in HoverPopup at Jobs View panel.' (#525) from Jobs_Side_Panel into Purchase_Invoice_Management

Reviewed-on: #525
Merged

src/components/DailyProgressRport/TaskReportList.jsx

@@ -205,7 +205,7 @@ const TaskReportList = () => {
                     id="total_pending_task"
                     title="Total Pending Task"
                     content={
-                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                      <div className="text-wrap" style={{ minWidth: "200px" }}>
                         This shows the total pending tasks for each activity on that date.
                       </div>
                     }

src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx

@@ -69,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
                   id="STATUS_CHANEG"
                   Mode="click"
                   className=""
-                  align="right"
+                  align="left"
                   content={
                     <ChangeStatus
                       statusId={data?.status?.id}
@@ -141,7 +141,7 @@ const ManageJobTicket = ({ Job }) => {
             })()}
         </div>
         {data?.projectBranch && (
-          <div className="d-flex gap-3 my-2 position-relative"  ref={drawerRef} >
+          <div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
             <span className="text-secondary">
               <i className="bx bx-buildings"></i> Branch Name:
             </span>
@@ -149,7 +149,8 @@ const ManageJobTicket = ({ Job }) => {
             <HoverPopup
               id="BRANCH_DETAILS"
               Mode="click"
-              align="auto"
+              align="right"
+              minWidth="340px"
               boundaryRef={drawerRef}
               content={<BranchDetails branch={data?.projectBranch?.id} />}
             >

src/components/common/HoverPopup.jsx

@@ -6,10 +6,6 @@ import {
   togglePopup,
 } from "../../slices/localVariablesSlice";
 
-/**
- * align: "auto" | "left" | "right"
- * boundaryRef: optional ref to the drawer/container element to use as boundary
- */
 const HoverPopup = ({
   id,
   title,
@@ -17,7 +13,9 @@ const HoverPopup = ({
   children,
   className = "",
   Mode = "hover",
-  align = "auto",
+  align = "auto", // <-- dynamic placement
+  minWidth = "250px",
+  maxWidth = "350px",
   boundaryRef = null,
 }) => {
   const dispatch = useDispatch();
@@ -26,20 +24,15 @@ const HoverPopup = ({
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
-    if (Mode === "hover") dispatch(openPopup(id));
+  const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
-  };
-  const handleMouseLeave = () => {
-    if (Mode === "hover") dispatch(closePopup(id));
-  };
   const handleClick = (e) => {
-    if (Mode === "click") {
+    if (Mode !== "click") return;
-      e.stopPropagation();
+    e.stopPropagation();
-      dispatch(togglePopup(id));
+    dispatch(togglePopup(id));
-    }
   };
 
-  // Close on outside click when using click mode
+  // Close popup when clicking outside (click mode)
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -56,40 +49,68 @@ const HoverPopup = ({
 
     document.addEventListener("click", handler);
     return () => document.removeEventListener("click", handler);
-  }, [Mode, visible, dispatch, id]);
+  }, [visible, Mode, id, dispatch]);
 
+  // ---------- DYNAMIC POSITIONING LOGIC ----------
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
     requestAnimationFrame(() => {
       const popup = popupRef.current;
-      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
+      const trigger = triggerRef.current;
-      if (!boundaryEl) return;
+
+      const boundaryEl =
+        (boundaryRef && boundaryRef.current) || popup.parentElement;
 
       const boundaryRect = boundaryEl.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const triggerRect = trigger.getBoundingClientRect();
-      popup.style.left = "";
-      popup.style.right = "";
-      popup.style.transform = "";
-      popup.style.top = "";
-
       const popupRect = popup.getBoundingClientRect();
-      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
-      let left = triggerCenterX - popupRect.width / 2;
 
-      // Clamp to boundaries
+      let left;
-      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
+
+      // AUTO ALIGN (smart)
+      if (align === "auto") {
+        const center =
+          triggerRect.left +
+          triggerRect.width / 2 -
+          boundaryRect.left -
+          popupRect.width / 2;
+
+        left = Math.max(
+          0,
+          Math.min(center, boundaryRect.width - popupRect.width)
+        );
+      }
+
+      // LEFT ALIGN
+      else if (align === "left") {
+        left = triggerRect.left - boundaryRect.left;
+        if (left + popupRect.width > boundaryRect.width) {
+          left = boundaryRect.width - popupRect.width; // clamp right
+        }
+      }
+
+      // RIGHT ALIGN
+      else if (align === "right") {
+        left =
+          triggerRect.left +
+          triggerRect.width -
+          boundaryRect.left -
+          popupRect.width;
+
+        if (left < 0) left = 0; // clamp left
+      }
+
       popup.style.left = `${left}px`;
+      popup.style.top = `100%`;
     });
   }, [visible, align, boundaryRef]);
 
-  return (
+  // ------------------------------------------------
-    <div
-      className="d-inline-block position-relative"   // <-- ADD THIS !!
-      style={{ overflow: "visible" }}
-    >
-      <div
 
+  return (
+    <div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
+      <div
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -103,22 +124,20 @@ const HoverPopup = ({
         <div
           ref={popupRef}
           className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
-         style={{
+          style={{
             zIndex: 2000,
-            top: "100%",
+            minWidth,
-            minWidth: "200px",
+            maxWidth,
-            maxWidth: "300px",
             wordWrap: "break-word",
           }}
           onClick={(e) => e.stopPropagation()}
         >
           {title && <h6 className="fw-semibold mb-2">{title}</h6>}
-          <div>{content}</div>
+          {content}
         </div>
       )}
     </div>
   );
-
 };
 
 export default HoverPopup;