From 945fc0396f24f04cad024ee8d7de8f388e42397c Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Mon, 31 Mar 2025 19:54:21 +0530
Subject: [PATCH] No code changes detected; skipping commit.

---
 .../ui/componets/DroppedFloatingWidgets.tsx   | 694 +++++++++---------
 1 file changed, 339 insertions(+), 355 deletions(-)

diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index 4f2deb5..d7a6960 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -56,113 +56,159 @@ const DroppedObjects: React.FC = () => {
   );
   const [offset, setOffset] = useState<[number, number] | null>(null);
   const { setSelectedChartId } = useWidgetStore();
-  const positionRef = useRef<[number, number] | null>(null);
+  const [activeEdges, setActiveEdges] = useState<{
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null>(null); // State to track active edges for distance lines
+  const [currentPosition, setCurrentPosition] = useState<{
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
   const { activeModule } = useModuleStore();
 
-  // Get the first zone and its objects
+  // Clean up animation frame on unmount
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+
   const zoneEntries = Object.entries(zones);
-  if (zoneEntries.length === 0) return null; // No zone, nothing to render
-  const [zoneName, zone] = zoneEntries[0]; // Only render the first zone
-  console.log("zone", zone);
+  if (zoneEntries.length === 0) return null;
+  const [zoneName, zone] = zoneEntries[0];
+
+  function handleDuplicate(zoneName: string, index: number) {
+    setOpenKebabId(null)
+    duplicateObject(zoneName, index); // Call the duplicateObject method from the store
+  }
+
+  async function handleDelete(zoneName: string, id: string, index: number) {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+
+      let res = await deleteFloatingWidgetApi(id, organization);
+      console.log('res: ', res);
+
+      if (res.message === "FloatingWidget deleted successfully") {
+        deleteObject(zoneName, index); // Call the deleteObject method from the store
+      }
+    } catch (error) {
+      console.error("Error deleting floating widget:", error);
+    }
+  }
 
 
+  const handlePointerDown = (event: React.PointerEvent, index: number) => {
+    const obj = zone.objects[index];
+    const container = document.getElementById("real-time-vis-canvas");
+    if (!container) return;
 
-  // Handle pointer down event
-  function handlePointerDown(event: React.PointerEvent, index: number) {
+    const rect = container.getBoundingClientRect();
+    const relativeX = event.clientX - rect.left;
+    const relativeY = event.clientY - rect.top;
 
-    const [activeEdges, setActiveEdges] = useState<{
-      vertical: "top" | "bottom";
-      horizontal: "left" | "right";
-    } | null>(null); // State to track active edges for distance lines
-    const [currentPosition, setCurrentPosition] = useState<{
-      top: number | "auto";
-      left: number | "auto";
-      right: number | "auto";
-      bottom: number | "auto";
-    } | null>(null); // State to track the current position during drag
-    const animationRef = useRef<number | null>(null);
-    const { activeModule } = useModuleStore();
+    // Determine active properties for the initial position
+    const [activeProp1, activeProp2] = getActiveProperties(obj.position);
 
-    // Clean up animation frame on unmount
-    useEffect(() => {
-      return () => {
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-        }
-      };
-    }, []);
+    // Set active edges for distance lines
+    const vertical = activeProp1 === "top" ? "top" : "bottom";
+    const horizontal = activeProp2 === "left" ? "left" : "right";
+    setActiveEdges({ vertical, horizontal });
 
-    const zoneEntries = Object.entries(zones);
-    if (zoneEntries.length === 0) return null;
-    const [zoneName, zone] = zoneEntries[0];
+    // Store the initial position strategy and active edges
+    setDraggingIndex({
+      zone: zoneName,
+      index,
+      initialPosition: { ...obj.position },
+    });
 
-    function handleDuplicate(zoneName: string, index: number) {
-      setOpenKebabId(null)
-      duplicateObject(zoneName, index); // Call the duplicateObject method from the store
+    // Calculate offset from mouse to object edges
+    let offsetX = 0;
+    let offsetY = 0;
+
+    if (activeProp1 === "top") {
+      offsetY = relativeY - (obj.position.top as number);
+    } else {
+      offsetY = rect.height - relativeY - (obj.position.bottom as number);
     }
 
-    async function handleDelete(zoneName: string, id: string, index: number) {
-      try {
-        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0];
-
-        let res = await deleteFloatingWidgetApi(id, organization);
-        console.log('res: ', res);
-
-        if (res.message === "FloatingWidget deleted successfully") {
-          deleteObject(zoneName, index); // Call the deleteObject method from the store
-        }
-      } catch (error) {
-        console.error("Error deleting floating widget:", error);
-      }
+    if (activeProp2 === "left") {
+      offsetX = relativeX - (obj.position.left as number);
+    } else {
+      offsetX = rect.width - relativeX - (obj.position.right as number);
     }
 
+    setOffset([offsetY, offsetX]);
+  };
 
-    const handlePointerDown = (event: React.PointerEvent, index: number) => {
-      const obj = zone.objects[index];
-      const container = document.getElementById("real-time-vis-canvas");
-      if (!container) return;
+  const handlePointerMove = (event: React.PointerEvent) => {
+    if (!draggingIndex || !offset) return;
 
-      const rect = container.getBoundingClientRect();
-      const relativeX = event.clientX - rect.left;
-      const relativeY = event.clientY - rect.top;
+    const container = document.getElementById("real-time-vis-canvas");
+    if (!container) return;
 
-      // Determine active properties for the initial position
-      const [activeProp1, activeProp2] = getActiveProperties(obj.position);
+    const rect = container.getBoundingClientRect();
+    const relativeX = event.clientX - rect.left;
+    const relativeY = event.clientY - rect.top;
 
-      // Set active edges for distance lines
-      const vertical = activeProp1 === "top" ? "top" : "bottom";
-      const horizontal = activeProp2 === "left" ? "left" : "right";
-      setActiveEdges({ vertical, horizontal });
+    // Dynamically determine the current position strategy
+    const newPositionStrategy = determinePosition(rect, relativeX, relativeY);
+    const [activeProp1, activeProp2] = getActiveProperties(newPositionStrategy);
 
-      // Store the initial position strategy and active edges
-      setDraggingIndex({
-        zone: zoneName,
-        index,
-        initialPosition: { ...obj.position },
-      });
+    // Update active edges for distance lines
+    const vertical = activeProp1 === "top" ? "top" : "bottom";
+    const horizontal = activeProp2 === "left" ? "left" : "right";
+    setActiveEdges({ vertical, horizontal });
 
-      // Calculate offset from mouse to object edges
-      let offsetX = 0;
-      let offsetY = 0;
+    // Calculate new position based on the active properties
+    let newY = 0;
+    let newX = 0;
 
-      if (activeProp1 === "top") {
-        offsetY = relativeY - (obj.position.top as number);
-      } else {
-        offsetY = rect.height - relativeY - (obj.position.bottom as number);
-      }
+    if (activeProp1 === "top") {
+      newY = relativeY - offset[0];
+    } else {
+      newY = rect.height - (relativeY + offset[0]);
+    }
 
-      if (activeProp2 === "left") {
-        offsetX = relativeX - (obj.position.left as number);
-      } else {
-        offsetX = rect.width - relativeX - (obj.position.right as number);
-      }
+    if (activeProp2 === "left") {
+      newX = relativeX - offset[1];
+    } else {
+      newX = rect.width - (relativeX + offset[1]);
+    }
 
-      setOffset([offsetY, offsetX]);
+    // Apply boundaries
+    newX = Math.max(0, Math.min(rect.width - 50, newX));
+    newY = Math.max(0, Math.min(rect.height - 50, newY));
+
+    // Create new position object
+    const newPosition = {
+      ...newPositionStrategy,
+      [activeProp1]: newY,
+      [activeProp2]: newX,
+      // Clear opposite properties
+      [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+      [activeProp2 === "left" ? "right" : "left"]: "auto",
     };
 
-    const handlePointerMove = (event: React.PointerEvent) => {
+    // Update the current position state for DistanceLines
+    setCurrentPosition(newPosition);
+
+    if (!animationRef.current) {
+      animationRef.current = requestAnimationFrame(() => {
+        updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+        animationRef.current = null;
+      });
+    }
+  };
+
+  const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
+    try {
       if (!draggingIndex || !offset) return;
 
       const container = document.getElementById("real-time-vis-canvas");
@@ -172,299 +218,237 @@ const DroppedObjects: React.FC = () => {
       const relativeX = event.clientX - rect.left;
       const relativeY = event.clientY - rect.top;
 
-      // Dynamically determine the current position strategy
-      const newPositionStrategy = determinePosition(rect, relativeX, relativeY);
-      const [activeProp1, activeProp2] = getActiveProperties(newPositionStrategy);
+      // Only now determine the final position strategy
+      const finalPosition = determinePosition(rect, relativeX, relativeY);
+      const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
 
-      // Update active edges for distance lines
-      const vertical = activeProp1 === "top" ? "top" : "bottom";
-      const horizontal = activeProp2 === "left" ? "left" : "right";
-      setActiveEdges({ vertical, horizontal });
-
-      // Calculate new position based on the active properties
-      let newY = 0;
-      let newX = 0;
+      // Calculate final position using the new strategy
+      let finalY = 0;
+      let finalX = 0;
 
       if (activeProp1 === "top") {
-        newY = relativeY - offset[0];
+        finalY = relativeY - offset[0];
       } else {
-        newY = rect.height - (relativeY + offset[0]);
+        finalY = rect.height - (relativeY + offset[0]);
       }
 
       if (activeProp2 === "left") {
-        newX = relativeX - offset[1];
+        finalX = relativeX - offset[1];
       } else {
-        newX = rect.width - (relativeX + offset[1]);
+        finalX = rect.width - (relativeX + offset[1]);
       }
 
       // Apply boundaries
-      newX = Math.max(0, Math.min(rect.width - 50, newX));
-      newY = Math.max(0, Math.min(rect.height - 50, newY));
+      finalX = Math.max(0, Math.min(rect.width - 50, finalX));
+      finalY = Math.max(0, Math.min(rect.height - 50, finalY));
 
-      // Create new position object
-      const newPosition = {
-        ...newPositionStrategy,
-        [activeProp1]: newY,
-        [activeProp2]: newX,
-        // Clear opposite properties
-        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
-        [activeProp2 === "left" ? "right" : "left"]: "auto",
+      const boundedPosition = {
+        ...finalPosition,
+        [activeProp1]: finalY,
+        [activeProp2]: finalX,
       };
 
-      // Update the current position state for DistanceLines
-      setCurrentPosition(newPosition);
+      // Save to backend
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      const response = await addingFloatingWidgets(zone.zoneId, organization, {
+        ...zone.objects[draggingIndex.index],
+        position: boundedPosition,
+      });
 
-      if (!animationRef.current) {
-        animationRef.current = requestAnimationFrame(() => {
-          updateObjectPosition(zoneName, draggingIndex.index, newPosition);
-          animationRef.current = null;
-        });
+      if (response.message === "Widget updated successfully") {
+        updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
-    };
 
-    const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
-      try {
-        if (!draggingIndex || !offset) return;
-
-        const container = document.getElementById("real-time-vis-canvas");
-        if (!container) return;
-
-        const rect = container.getBoundingClientRect();
-        const relativeX = event.clientX - rect.left;
-        const relativeY = event.clientY - rect.top;
-
-        // Only now determine the final position strategy
-        const finalPosition = determinePosition(rect, relativeX, relativeY);
-        const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
-
-        // Calculate final position using the new strategy
-        let finalY = 0;
-        let finalX = 0;
-
-        if (activeProp1 === "top") {
-          finalY = relativeY - offset[0];
-        } else {
-          finalY = rect.height - (relativeY + offset[0]);
-        }
-
-        if (activeProp2 === "left") {
-          finalX = relativeX - offset[1];
-        } else {
-          finalX = rect.width - (relativeX + offset[1]);
-        }
-
-        // Apply boundaries
-        finalX = Math.max(0, Math.min(rect.width - 50, finalX));
-        finalY = Math.max(0, Math.min(rect.height - 50, finalY));
-
-        const boundedPosition = {
-          ...finalPosition,
-          [activeProp1]: finalY,
-          [activeProp2]: finalX,
-        };
-
-        // Save to backend
-        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0];
-        const response = await addingFloatingWidgets(zone.zoneId, organization, {
-          ...zone.objects[draggingIndex.index],
-          position: boundedPosition,
-        });
-
-        if (response.message === "Widget updated successfully") {
-          updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
-        }
-
-        // Clean up
-        setDraggingIndex(null);
-        setOffset(null);
-        setActiveEdges(null); // Clear active edges
-        setCurrentPosition(null); // Reset current position
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-          animationRef.current = null;
-        }
-      } catch (error) {
-        console.error("Error in handlePointerUp:", error);
+      // Clean up
+      setDraggingIndex(null);
+      setOffset(null);
+      setActiveEdges(null); // Clear active edges
+      setCurrentPosition(null); // Reset current position
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
       }
-    };
-
-    const handleKebabClick = (id: string, event: React.MouseEvent) => {
-      event.stopPropagation();
-      setOpenKebabId((prevId) => (prevId === id ? null : id));
-    };
-
-    const renderObjectContent = (obj: any) => {
-      switch (obj.className) {
-        case "floating total-card":
-          return (
-            <>
-              <div className="header-wrapper">
-                <div className="header">{obj.header}</div>
-                <div className="data-values">
-                  <div className="value">{obj.value}</div>
-                  <div className="per">{obj.per}</div>
-                </div>
-              </div>
-              <div className="icon">
-                <WalletIcon />
-              </div>
-            </>
-          );
-        case "warehouseThroughput floating":
-          return (
-            <>
-              <div className="header">
-                <h2>Warehouse Throughput</h2>
-                <p>
-                  <span>(+5) more</span> in 2025
-                </p>
-              </div>
-              <div className="lineGraph" style={{ height: "100%" }}>
-                {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
-              </div>
-            </>
-          );
-        case "fleetEfficiency floating":
-          return (
-            <>
-              <h2 className="header">Fleet Efficiency</h2>
-              <div className="progressContainer">
-                <div className="progress">
-                  <div className="barOverflow">
-                    <div
-                      className="bar"
-                      style={{ transform: `rotate(${obj.value}deg)` }}
-                    ></div>
-                  </div>
-                </div>
-              </div>
-              <div className="scaleLabels">
-                <span>0%</span>
-                <div className="centerText">
-                  <div className="percentage">{obj.per}%</div>
-                  <div className="status">Optimal</div>
-                </div>
-                <span>100%</span>
-              </div>
-            </>
-          );
-        default:
-          return null;
-      }
-    };
-
-    return (
-      <div
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        className="floating-wrapper"
-      >
-        {zone.objects.map((obj, index) => (
-          <div
-            key={`${zoneName}-${index}`}
-            className={obj.className}
-            style={{
-              position: "absolute",
-              top:
-                typeof obj.position.top === "number"
-                  ? `${obj.position.top}px`
-                  : "auto",
-              left:
-                typeof obj.position.left === "number"
-                  ? `${obj.position.left}px`
-                  : "auto",
-              right:
-                typeof obj.position.right === "number"
-                  ? `${obj.position.right}px`
-                  : "auto",
-              bottom:
-                typeof obj.position.bottom === "number"
-                  ? `${obj.position.bottom}px`
-                  : "auto",
-            }}
-            onPointerDown={(event) => handlePointerDown(event, index)}
-            onClick={() => {
-              setSelectedChartId(obj)
-            }}
-          >
-            {obj.className === "floating total-card" ? (
-              <>
-                <TotalCardComponent object={obj} />
-              </>
-            ) : obj.className === "warehouseThroughput floating" ? (
-              <>
-                <WarehouseThroughputComponent />
-              </>
-            ) : obj.className === "fleetEfficiency floating" ? (
-              <>
-                <FleetEfficiencyComponent object={obj} />
-              </>
-            ) : null}
-            {renderObjectContent(obj)}
-            <div
-              className="icon kebab"
-              onClick={(event) => handleKebabClick(obj.id, event)}
-            >
-              <KebabIcon />
-            </div>
-            {openKebabId === obj.id && (
-              <div className="kebab-options">
-                <div className="dublicate btn" onClick={(event) => {
-                  event.stopPropagation();
-                  handleDuplicate(zoneName, index); // Call the duplicate handler
-                }}>
-                  <div className="icon">
-                    <DublicateIcon />
-                  </div>
-                  <div className="label">Duplicate</div>
-                </div>
-                <div className="edit btn" onClick={(event) => {
-                  event.stopPropagation();
-                  handleDelete(zoneName, obj.id, index); // Call the delete handler
-                }}>
-                  <div className="icon">
-                    <DeleteIcon />
-                  </div>
-                  <div className="label">Delete</div>
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-
-        {/* Render DistanceLines component during drag */}
-        {draggingIndex !== null &&
-          activeEdges !== null &&
-          currentPosition !== null && (
-            <DistanceLines
-              obj={{
-                position: {
-                  top:
-                    currentPosition.top !== "auto"
-                      ? currentPosition.top
-                      : undefined,
-                  bottom:
-                    currentPosition.bottom !== "auto"
-                      ? currentPosition.bottom
-                      : undefined,
-                  left:
-                    currentPosition.left !== "auto"
-                      ? currentPosition.left
-                      : undefined,
-                  right:
-                    currentPosition.right !== "auto"
-                      ? currentPosition.right
-                      : undefined,
-                },
-              }}
-              activeEdges={activeEdges}
-            />
-          )}
-      </div>
-    );
+    } catch (error) {
+      console.error("Error in handlePointerUp:", error);
+    }
   };
-}
+
+  const handleKebabClick = (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setOpenKebabId((prevId) => (prevId === id ? null : id));
+  };
+
+  const renderObjectContent = (obj: any) => {
+    switch (obj.className) {
+      case "floating total-card":
+        return (
+          <>
+            <div className="header-wrapper">
+              <div className="header">{obj.header}</div>
+              <div className="data-values">
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+            <div className="icon">
+              <WalletIcon />
+            </div>
+          </>
+        );
+      case "warehouseThroughput floating":
+        return (
+          <>
+            <div className="header">
+              <h2>Warehouse Throughput</h2>
+              <p>
+                <span>(+5) more</span> in 2025
+              </p>
+            </div>
+            <div className="lineGraph" style={{ height: "100%" }}>
+              {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
+            </div>
+          </>
+        );
+      case "fleetEfficiency floating":
+        return (
+          <>
+            <h2 className="header">Fleet Efficiency</h2>
+            <div className="progressContainer">
+              <div className="progress">
+                <div className="barOverflow">
+                  <div
+                    className="bar"
+                    style={{ transform: `rotate(${obj.value}deg)` }}
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div className="scaleLabels">
+              <span>0%</span>
+              <div className="centerText">
+                <div className="percentage">{obj.per}%</div>
+                <div className="status">Optimal</div>
+              </div>
+              <span>100%</span>
+            </div>
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      className="floating-wrapper"
+    >
+      {zone.objects.map((obj, index) => (
+        <div
+          key={`${zoneName}-${index}`}
+          className={obj.className}
+          style={{
+            position: "absolute",
+            top:
+              typeof obj.position.top === "number"
+                ? `${obj.position.top}px`
+                : "auto",
+            left:
+              typeof obj.position.left === "number"
+                ? `${obj.position.left}px`
+                : "auto",
+            right:
+              typeof obj.position.right === "number"
+                ? `${obj.position.right}px`
+                : "auto",
+            bottom:
+              typeof obj.position.bottom === "number"
+                ? `${obj.position.bottom}px`
+                : "auto",
+          }}
+          onPointerDown={(event) => handlePointerDown(event, index)}
+          onClick={() => {
+            setSelectedChartId(obj)
+          }}
+        >
+          {obj.className === "floating total-card" ? (
+            <>
+              <TotalCardComponent object={obj} />
+            </>
+          ) : obj.className === "warehouseThroughput floating" ? (
+            <>
+              <WarehouseThroughputComponent />
+            </>
+          ) : obj.className === "fleetEfficiency floating" ? (
+            <>
+              <FleetEfficiencyComponent object={obj} />
+            </>
+          ) : null}
+          {renderObjectContent(obj)}
+          <div
+            className="icon kebab"
+            onClick={(event) => handleKebabClick(obj.id, event)}
+          >
+            <KebabIcon />
+          </div>
+          {openKebabId === obj.id && (
+            <div className="kebab-options">
+              <div className="dublicate btn" onClick={(event) => {
+                event.stopPropagation();
+                handleDuplicate(zoneName, index); // Call the duplicate handler
+              }}>
+                <div className="icon">
+                  <DublicateIcon />
+                </div>
+                <div className="label">Duplicate</div>
+              </div>
+              <div className="edit btn" onClick={(event) => {
+                event.stopPropagation();
+                handleDelete(zoneName, obj.id, index); // Call the delete handler
+              }}>
+                <div className="icon">
+                  <DeleteIcon />
+                </div>
+                <div className="label">Delete</div>
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+
+      {/* Render DistanceLines component during drag */}
+      {draggingIndex !== null &&
+        activeEdges !== null &&
+        currentPosition !== null && (
+          <DistanceLines
+            obj={{
+              position: {
+                top:
+                  currentPosition.top !== "auto"
+                    ? currentPosition.top
+                    : undefined,
+                bottom:
+                  currentPosition.bottom !== "auto"
+                    ? currentPosition.bottom
+                    : undefined,
+                left:
+                  currentPosition.left !== "auto"
+                    ? currentPosition.left
+                    : undefined,
+                right:
+                  currentPosition.right !== "auto"
+                    ? currentPosition.right
+                    : undefined,
+              },
+            }}
+            activeEdges={activeEdges}
+          />
+        )}
+    </div>
+  );
+};
 
 export default DroppedObjects;