From 9b15648fb5bf20187742db74977ebed127ff5681 Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@hexrfactory.com>
Date: Thu, 10 Apr 2025 10:17:54 +0530
Subject: [PATCH 1/9] data not connected border

---
 .../zoneData/addFloatingWidgets.ts                |  2 +-
 app/src/styles/pages/realTimeViz.scss             | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts
index 9b03dbe..beaa1b3 100644
--- a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts
+++ b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts
@@ -8,7 +8,7 @@ export const addingFloatingWidgets = async (
 ) => {
   
   
-  
+
   try {
     const response = await fetch(
       `${url_Backend_dwinzo}/api/v2/floatwidget/save`,
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 6909081..c9ea2d4 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -173,9 +173,11 @@
     overflow: auto;
     z-index: $z-index-tools;
     overflow: auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     .panel-content {
       position: relative;
       height: 100%;
@@ -265,9 +267,6 @@
         }
       }
 
-      .chart-container.notLinked {
-        border-color: red;
-      }
 
       .close-btn {
         position: absolute;
@@ -718,6 +717,13 @@
   z-index: 2 !important;
 }
 
+.chart-container.notLinked {
+
+  outline: 1px solid red;
+
+
+}
+
 .connectionSuccess {
   outline-color: #43C06D;
 }
@@ -739,7 +745,8 @@
   border-radius: 6px;
   overflow: hidden;
 
-min-width: 150px;
+  min-width: 150px;
+
   .option {
     padding: 8px 10px;
     color: var(--text-color);

From 1cf7703f07075d33a71f742ec90f450d38093e95 Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@hexrfactory.com>
Date: Thu, 10 Apr 2025 17:41:25 +0530
Subject: [PATCH 2/9] fixed bug and added functionality to duplicate with iot
 data selection

---
 app/.env                                      |  4 +-
 .../IotInputCards/BarChartInput.tsx           |  9 +++
 .../ui/componets/DraggableWidget.tsx          | 65 ++++++++++++-------
 app/src/components/ui/componets/Panel.tsx     | 18 +++--
 4 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/app/.env b/app/.env
index c50d174..47176f6 100644
--- a/app/.env
+++ b/app/.env
@@ -2,10 +2,10 @@
 PORT=8200 
 
 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
-REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
+REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.111:8000
 
 # Base URL for the server REST API, used for HTTP requests to the backend server.
-REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
+REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.111:5000
 
 # Base URL for the server marketplace, used for market place model blob.
 REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
index e5debde..7d55396 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@@ -61,11 +61,20 @@ const BarChartInput = (props: Props) => {
 
   }, [selectedChartId.id]);
 
+  useEffect(() => {
+    setMeasurements(selections);
+    updateDuration(duration);
+    updateName(widgetName);
+    console.log('Initial set state');
+  }, []);
+
   // Sync Zustand state when component mounts
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
     updateName(widgetName);
+    console.log('change set state');
+    
   }, [selections, duration, widgetName]);
 
 
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index fb20169..0ebc224 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -1,5 +1,6 @@
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import useChartStore from "../../../store/useChartStore";
 import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
 import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
 import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
@@ -80,6 +81,16 @@ export const DraggableWidget = ({
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
   }>({});
+  const { measurements, duration, name } = useChartStore();
+  const { isPlaying } = usePlayButtonStore();
+
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    console.log("changes loggggg", measurements, duration, name);
+  }, [measurements, duration, name])
   const handlePointerDown = () => {
     if (selectedChartId?.id !== widget.id) {
       setSelectedChartId(widget);
@@ -94,6 +105,9 @@ export const DraggableWidget = ({
       "floating",
       "sidebar-right-wrapper",
       "card",
+      "dropdown-menu",
+      "sidebar-right-content-container",
+      "dropdown-options"
     ],
     setMenuVisible: () => setSelectedChartId(null),
   });
@@ -137,40 +151,50 @@ export const DraggableWidget = ({
     }
   };
 
+  // Calculate panel size
+  const panelSize = Math.max(
+    Math.min(canvasDimensions.width * 0.25, canvasDimensions.height * 0.25),
+    170 // Min 170px
+  );
+
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
-
+  // Calculate panel capacity
+  
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 150;
-    const CHART_HEIGHT = 150;
-    const FALLBACK_HORIZONTAL_CAPACITY = 5;
-    const FALLBACK_VERTICAL_CAPACITY = 3;
+    const CHART_WIDTH = panelSize;
+    const CHART_HEIGHT = panelSize;
 
     const dimensions = panelDimensions[panel];
     if (!dimensions) {
-      return panel === "top" || panel === "bottom"
-        ? FALLBACK_HORIZONTAL_CAPACITY
-        : FALLBACK_VERTICAL_CAPACITY;
+      return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities
     }
 
     return panel === "top" || panel === "bottom"
-      ? Math.floor(dimensions.width / CHART_WIDTH)
-      : Math.floor(dimensions.height / CHART_HEIGHT);
+      ? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH))
+      : Math.max(1, Math.floor(dimensions.height / CHART_HEIGHT));
   };
 
   const isPanelFull = (panel: Side) => {
     const currentWidgetCount = getCurrentWidgetCount(panel);
     const panelCapacity = calculatePanelCapacity(panel);
-    return currentWidgetCount >= panelCapacity;
+
+    return currentWidgetCount >  panelCapacity;
   };
 
   const duplicateWidget = async () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      console.log("widget data sent", widget);
+
 
       const duplicatedWidget: Widget = {
         ...widget,
+        Data: {
+          duration: duration,
+          measurements: { ...measurements }
+        },
         id: `${widget.id}-copy-${Date.now()}`,
       };
 
@@ -180,6 +204,8 @@ export const DraggableWidget = ({
         widget: duplicatedWidget,
       };
       if (visualizationSocket) {
+        console.log("duplecate widget", duplicateWidget);
+
         visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
       }
       setSelectedZone((prevZone: any) => ({
@@ -252,12 +278,7 @@ export const DraggableWidget = ({
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
-  const { isPlaying } = usePlayButtonStore();
 
-  const [canvasDimensions, setCanvasDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
   // Track canvas dimensions
 
   // Current: Two identical useEffect hooks for canvas dimensions
@@ -295,9 +316,8 @@ export const DraggableWidget = ({
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && !isPlaying && "activeChart"
-        }`}
+        className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
+          }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
@@ -323,10 +343,9 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${
-                isPanelFull(widget.panel) ? "btn-blur" : ""
-              }`}
-              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
+              onClick={duplicateWidget}
             >
               <div className="icon">
                 <DublicateIcon />
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index 30136e5..4d64405 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -106,9 +106,8 @@ const Panel: React.FC<PanelProps> = ({
         case "bottom":
           return {
             minWidth: "170px",
-            width: `calc(100% - ${
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-            }px)`,
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
             minHeight: "170px",
             height: `${panelSize}px`,
             left: leftActive ? `${panelSize}px` : "0",
@@ -121,9 +120,8 @@ const Panel: React.FC<PanelProps> = ({
             minWidth: "170px",
             width: `${panelSize}px`,
             minHeight: "170px",
-            height: `calc(100% - ${
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-            }px)`,
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -149,6 +147,7 @@ const Panel: React.FC<PanelProps> = ({
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
 
+
     if (currentWidgetsCount < maxCapacity) {
       addWidgetToPanel(draggedAsset, panel);
     }
@@ -282,9 +281,8 @@ const Panel: React.FC<PanelProps> = ({
         <div
           key={side}
           id="panel-wrapper"
-          className={`panel ${side}-panel absolute ${
-            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
-          }`}
+          className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
+            }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
@@ -301,7 +299,7 @@ const Panel: React.FC<PanelProps> = ({
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
-                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  hiddenPanels[selectedZone.zoneId]?.includes(side)
                   ? "none"
                   : "auto",
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",

From 87d73894fe4d2be3a5a447382cc26223d96f62bc Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Fri, 11 Apr 2025 11:24:23 +0530
Subject: [PATCH 3/9] template delete bug fix and floating display same icon
 for all floatin

---
 .../sidebarLeft/visualization/Templates.tsx   |  8 +++--
 .../visualization/widgets/WidgetsFloating.tsx |  6 +++-
 .../ui/componets/DraggableWidget.tsx          | 11 +------
 .../ui/componets/DroppedFloatingWidgets.tsx   |  7 ++--
 .../ui/componets/RealTimeVisulization.tsx     | 33 ++++++++++++++-----
 .../ui/realTimeVis/floating/SimpleCard.tsx    |  9 +++--
 .../floating/TotalCardComponent.tsx           | 25 +++++++++++---
 7 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
index efcbcaf..922def1 100644
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -26,8 +26,12 @@ const Templates = () => {
     templateData();
   }, []);
 
-  const handleDeleteTemplate = async (id: string) => {
+  const handleDeleteTemplate = async (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string
+  ) => {
     try {
+      e.stopPropagation();
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteTemplate = {
@@ -108,7 +112,7 @@ const Templates = () => {
               <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
-              onClick={() => handleDeleteTemplate(template.id)}
+              onClick={(e) => handleDeleteTemplate(e, template.id)}
               className="delete-button"
               aria-label="Delete template"
             >
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
index 09c481a..e7f97f2 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
   };
 
   return (
-    <div className="floatingWidgets-wrapper">
+    <div className="floatingWidgets-wrapper widgets-wrapper">
       {/* {widgets.map((widget) => (
         <div
           key={widget.id}
@@ -48,24 +48,28 @@ const WidgetsFloating = () => {
       <SimpleCard
         header={"Today’s Earnings"}
         icon={WalletIcon}
+        iconName={"WalletIcon"}
         value={"$53,000"}
         per={"+55%"}
       />
       <SimpleCard
         header={"Today’s Users"}
         icon={GlobeIcon}
+        iconName={"GlobeIcon"}
         value={"1,200"}
         per={"+30%"}
       />
       <SimpleCard
         header={"New Clients"}
         icon={DocumentIcon}
+        iconName={"DocumentIcon"}
         value={"250"}
         per={"+12%"}
       />
       <SimpleCard
         header={"Total Sales"}
         icon={CartIcon}
+        iconName={"CartIcon"}
         value={"$150,000"}
         per={"+20%"}
       />{" "}
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index e0c8773..2a9cd98 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -89,16 +89,7 @@ export const DraggableWidget = ({
 
   const chartWidget = useRef<HTMLDivElement>(null);
 
-  OuterClick({
-    contextClassName: [
-      "chart-container",
-      "floating",
-      "sidebar-right-wrapper",
-      "card",
-      "dropdown-menu",
-    ],
-    setMenuVisible: () => setSelectedChartId(null),
-  });
+
 
   const deleteSelectedChart = async () => {
     try {
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index eed76e5..f78bcc9 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -117,6 +117,7 @@ const DroppedObjects: React.FC = () => {
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
   const [zoneName, zone] = zoneEntries[0];
+  console.log('zone: ', zone);
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
@@ -560,7 +561,7 @@ const DroppedObjects: React.FC = () => {
             key={`${zoneName}-${index}`}
             className={`${obj.className} ${
               selectedChartId?.id === obj.id && "activeChart"
-            }`}
+            } `}
             ref={chartWidget}
             style={{
               position: "absolute",
@@ -569,7 +570,9 @@ const DroppedObjects: React.FC = () => {
               right: rightPosition,
               bottom: bottomPosition,
               pointerEvents: isPlaying ? "none" : "auto",
-              minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} `
+              minHeight: `${
+                obj.className === "warehouseThroughput" && "150px !important"
+              } `,
             }}
             onPointerDown={(event) => {
               setSelectedChartId(obj);
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index d70bfc3..d877f1a 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -7,7 +7,10 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
+import {
+  useDroppedObjectsStore,
+  useFloatingWidget,
+} from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
   useSocketStore,
@@ -29,6 +32,8 @@ import {
   useRightSelected,
 } from "../../../store/useZone3DWidgetStore";
 import Dropped3dWidgets from "./Dropped3dWidget";
+import OuterClick from "../../../utils/outerClick";
+import { useWidgetStore } from "../../../store/useWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
+  const { setSelectedChartId } = useWidgetStore();
+
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+      "dropdown-menu",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
 
   useEffect(() => {
     async function GetZoneData() {
@@ -85,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        console.log('response: ', response);
+        console.log("response: ", response);
 
         if (!Array.isArray(response)) {
           return;
@@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
-          points:selectedZone.points||[],
+          points: selectedZone.points || [],
           zoneId: selectedZone.zoneId || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -196,7 +213,7 @@ const RealTimeVisulization: React.FC = () => {
           `Objects for Zone ID: ${selectedZone.zoneId}`,
           currentZone.objects
         );
-        setFloatingWidget(currentZone.objects)
+        setFloatingWidget(currentZone.objects);
       } else {
         console.warn("Zone not found or mismatched zoneId");
       }
@@ -211,9 +228,7 @@ const RealTimeVisulization: React.FC = () => {
       // }
 
       // Update floating widgets state
-
-    } catch (error) { }
-
+    } catch (error) {}
   };
 
   useEffect(() => {
diff --git a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
index 7fafb79..efd6158 100644
--- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
+++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
@@ -2,7 +2,8 @@ import React from "react";
 
 interface SimpleCardProps {
   header: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
+  icon: React.ElementType; // React component for SVG icon
+  iconName?: string;
   value: string;
   per: string; // Percentage change
   position?: [number, number];
@@ -11,23 +12,25 @@ interface SimpleCardProps {
 const SimpleCard: React.FC<SimpleCardProps> = ({
   header,
   icon: Icon,
+  iconName,
   value,
   per,
   position = [0, 0],
 }) => {
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
     const rect = event.currentTarget.getBoundingClientRect(); // Get position
+
     const cardData = JSON.stringify({
       header,
       value,
       per,
-      icon: Icon,
-
+      iconName: iconName || "UnknownIcon", // Use the custom iconName
       className: event.currentTarget.className,
       position: [rect.top, rect.left], // ✅ Store position
     });
 
     event.dataTransfer.setData("text/plain", cardData);
+    console.log("cardData: ", cardData);
   };
 
   return (
diff --git a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
index 1dfab66..008fac8 100644
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -4,7 +4,12 @@ import useChartStore from "../../../../store/useChartStore";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import axios from "axios";
 import io from "socket.io-client";
-import { WalletIcon } from "../../../icons/3dChartIcons";
+import {
+  CartIcon,
+  DocumentIcon,
+  GlobeIcon,
+  WalletIcon,
+} from "../../../icons/3dChartIcons";
 
 const TotalCardComponent = ({ object }: any) => {
   const [progress, setProgress] = useState<any>(0);
@@ -77,6 +82,20 @@ const TotalCardComponent = ({ object }: any) => {
     }
   }, [header, flotingDuration, flotingMeasurements]);
 
+  const mapIcon = (iconName: string) => {
+    switch (iconName) {
+      case "WalletIcon":
+        return <WalletIcon />;
+      case "GlobeIcon":
+        return <GlobeIcon />;
+      case "DocumentIcon":
+        return <DocumentIcon />;
+      case "CartIcon":
+        return <CartIcon />;
+      default:
+        return <WalletIcon />;
+    }
+  };
   return (
     <>
       <div className="header-wrapper">
@@ -86,9 +105,7 @@ const TotalCardComponent = ({ object }: any) => {
           <div className="per">{object.per}</div>
         </div>
       </div>
-      <div className="icon">
-        <WalletIcon />
-      </div>
+      <div className="icon">{mapIcon(object.iconName)}</div>
     </>
   );
 };

From dd91620a5c85c6b4cde6a51772452766e08b4608 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 11 Apr 2025 11:27:51 +0530
Subject: [PATCH 4/9] Refactor template deletion and widget styling; enhance
 camera model visibility logic

---
 .../sidebarLeft/visualization/Templates.tsx   |  10 +-
 .../visualization/widgets/WidgetsFloating.tsx |   2 +-
 app/src/modules/collaboration/collabCams.tsx  | 357 ++++++++++--------
 3 files changed, 205 insertions(+), 164 deletions(-)

diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
index efcbcaf..4430bfc 100644
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -26,9 +26,14 @@ const Templates = () => {
     templateData();
   }, []);
 
-  const handleDeleteTemplate = async (id: string) => {
+  const handleDeleteTemplate = async (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string
+  ) => {
     try {
+      e.stopPropagation();
       const email = localStorage.getItem("email") || "";
+
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteTemplate = {
         organization: organization,
@@ -49,7 +54,6 @@ const Templates = () => {
   const handleLoadTemplate = async (template: any) => {
     try {
       if (selectedZone.zoneName === "") return;
-
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
@@ -108,7 +112,7 @@ const Templates = () => {
               <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
-              onClick={() => handleDeleteTemplate(template.id)}
+              onClick={(e) => handleDeleteTemplate(e, template.id)}
               className="delete-button"
               aria-label="Delete template"
             >
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
index 09c481a..abcf44d 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
   };
 
   return (
-    <div className="floatingWidgets-wrapper">
+    <div className="floatingWidgets-wrapper widgets-wrapper">
       {/* {widgets.map((widget) => (
         <div
           key={widget.id}
diff --git a/app/src/modules/collaboration/collabCams.tsx b/app/src/modules/collaboration/collabCams.tsx
index 95a9833..38ea548 100644
--- a/app/src/modules/collaboration/collabCams.tsx
+++ b/app/src/modules/collaboration/collabCams.tsx
@@ -10,190 +10,227 @@ import { useNavigate } from "react-router-dom";
 import { Html } from "@react-three/drei";
 import CollabUserIcon from "./collabUserIcon";
 import { getAvatarColor } from "./users/functions/getAvatarColor";
+import useModuleStore from "../../store/useModuleStore";
 
 const CamModelsGroup = () => {
-	const navigate = useNavigate();
-	const groupRef = useRef<THREE.Group>(null);
-	const email = localStorage.getItem("email");
-	const { activeUsers, setActiveUsers } = useActiveUsers();
-	const { socket } = useSocketStore();
+  const navigate = useNavigate();
+  const groupRef = useRef<THREE.Group>(null);
+  const email = localStorage.getItem("email");
+  const { setActiveUsers } = useActiveUsers();
+  const { socket } = useSocketStore();
+  const { activeModule } = useModuleStore();
 
-	const loader = new GLTFLoader();
-	const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
-	loader.setDRACOLoader(dracoLoader);
+  const loader = new GLTFLoader();
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
+  loader.setDRACOLoader(dracoLoader);
 
-	const [cams, setCams] = useState<any[]>([]);
-	const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
+  const [cams, setCams] = useState<any[]>([]);
+  const [models, setModels] = useState<
+    Record<
+      string,
+      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
+    >
+  >({});
 
-	const dedupeCams = (cams: any[]) => {
-		const seen = new Set();
-		return cams.filter((cam) => {
-			if (seen.has(cam.uuid)) return false;
-			seen.add(cam.uuid);
-			return true;
-		});
-	};
+  const dedupeCams = (cams: any[]) => {
+    const seen = new Set();
+    return cams.filter((cam) => {
+      if (seen.has(cam.uuid)) return false;
+      seen.add(cam.uuid);
+      return true;
+    });
+  };
 
-	const dedupeUsers = (users: any[]) => {
-		const seen = new Set();
-		return users.filter((user) => {
-			if (seen.has(user._id)) return false;
-			seen.add(user._id);
-			return true;
-		});
-	};
+  const dedupeUsers = (users: any[]) => {
+    const seen = new Set();
+    return users.filter((user) => {
+      if (seen.has(user._id)) return false;
+      seen.add(user._id);
+      return true;
+    });
+  };
 
-	useEffect(() => {
-		if (!email) navigate("/");
+  useEffect(() => {
+    if (!email) navigate("/");
 
-		if (!socket) return;
-		const organization = email!.split("@")[1].split(".")[0];
+    if (!socket) return;
+    const organization = email!.split("@")[1].split(".")[0];
 
-		socket.on("userConnectResponse", (data: any) => {
-			if (!groupRef.current) return;
-			if (data.data.userData.email === email) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+    socket.on("userConnectResponse", (data: any) => {
+      if (!groupRef.current) return;
+      if (data.data.userData.email === email) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-			const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id);
-			if (model) {
-				groupRef.current.remove(model);
-			}
+      const model = groupRef.current.getObjectByProperty(
+        "uuid",
+        data.data.userData._id
+      );
+      if (model) {
+        groupRef.current.remove(model);
+      }
 
-			loader.load(camModel, (gltf) => {
-				const newModel = gltf.scene.clone();
-				newModel.uuid = data.data.userData._id;
-				newModel.position.set(
-					data.data.position.x,
-					data.data.position.y,
-					data.data.position.z
-				);
-				newModel.rotation.set(
-					data.data.rotation.x,
-					data.data.rotation.y,
-					data.data.rotation.z
-				);
-				newModel.userData = data.data.userData;
+      loader.load(camModel, (gltf) => {
+        const newModel = gltf.scene.clone();
+        newModel.uuid = data.data.userData._id;
+        newModel.position.set(
+          data.data.position.x,
+          data.data.position.y,
+          data.data.position.z
+        );
+        newModel.rotation.set(
+          data.data.rotation.x,
+          data.data.rotation.y,
+          data.data.rotation.z
+        );
+        newModel.userData = data.data.userData;
 
-				setCams((prev) => dedupeCams([...prev, newModel]));
-				setActiveUsers((prev: any) =>
-					dedupeUsers([...prev, data.data.userData])
-				);
-			});
-		});
+        setCams((prev) => dedupeCams([...prev, newModel]));
+        setActiveUsers((prev: any) =>
+          dedupeUsers([...prev, data.data.userData])
+        );
+      });
+    });
 
-		socket.on("userDisConnectResponse", (data: any) => {
-			if (!groupRef.current) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+    socket.on("userDisConnectResponse", (data: any) => {
+      if (!groupRef.current) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-			setCams((prev) =>
-				prev.filter((cam) => cam.uuid !== data.data.userData._id)
-			);
-			setActiveUsers((prev: any) =>
-				prev.filter((user: any) => user._id !== data.data.userData._id)
-			);
-		});
+      setCams((prev) =>
+        prev.filter((cam) => cam.uuid !== data.data.userData._id)
+      );
+      setActiveUsers((prev: any) =>
+        prev.filter((user: any) => user._id !== data.data.userData._id)
+      );
+    });
 
-		socket.on("cameraUpdateResponse", (data: any) => {
-			if (
-				!groupRef.current ||
-				socket.id === data.socketId ||
-				organization !== data.organization
-			)
-				return;
+    socket.on("cameraUpdateResponse", (data: any) => {
+      if (
+        !groupRef.current ||
+        socket.id === data.socketId ||
+        organization !== data.organization
+      )
+        return;
 
-			setModels((prev) => ({
-				...prev,
-				[data.data.userId]: {
-					targetPosition: new THREE.Vector3(
-						data.data.position.x,
-						data.data.position.y,
-						data.data.position.z
-					),
-					targetRotation: new THREE.Euler(
-						data.data.rotation.x,
-						data.data.rotation.y,
-						data.data.rotation.z
-					),
-				},
-			}));
-		});
+      setModels((prev) => ({
+        ...prev,
+        [data.data.userId]: {
+          targetPosition: new THREE.Vector3(
+            data.data.position.x,
+            data.data.position.y,
+            data.data.position.z
+          ),
+          targetRotation: new THREE.Euler(
+            data.data.rotation.x,
+            data.data.rotation.y,
+            data.data.rotation.z
+          ),
+        },
+      }));
+    });
 
-		return () => {
-			socket.off("userConnectResponse");
-			socket.off("userDisConnectResponse");
-			socket.off("cameraUpdateResponse");
-		};
-	}, [socket]);
+    return () => {
+      socket.off("userConnectResponse");
+      socket.off("userDisConnectResponse");
+      socket.off("cameraUpdateResponse");
+    };
+  }, [socket]);
 
-	useFrame(() => {
-		if (!groupRef.current) return;
-		Object.keys(models).forEach((uuid) => {
-			const model = groupRef.current!.getObjectByProperty("uuid", uuid);
-			if (!model) return;
+  useFrame(() => {
+    if (!groupRef.current) return;
+    Object.keys(models).forEach((uuid) => {
+      const model = groupRef.current!.getObjectByProperty("uuid", uuid);
+      if (!model) return;
 
-			const { targetPosition, targetRotation } = models[uuid];
-			model.position.lerp(targetPosition, 0.1);
-			model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1);
-			model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1);
-			model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1);
-		});
-	});
+      const { targetPosition, targetRotation } = models[uuid];
+      model.position.lerp(targetPosition, 0.1);
+      model.rotation.x = THREE.MathUtils.lerp(
+        model.rotation.x,
+        targetRotation.x,
+        0.1
+      );
+      model.rotation.y = THREE.MathUtils.lerp(
+        model.rotation.y,
+        targetRotation.y,
+        0.1
+      );
+      model.rotation.z = THREE.MathUtils.lerp(
+        model.rotation.z,
+        targetRotation.z,
+        0.1
+      );
+    });
+  });
 
-	useEffect(() => {
-		if (!groupRef.current) return;
-		const organization = email!.split("@")[1].split(".")[0];
+  useEffect(() => {
+    if (!groupRef.current) return;
+    const organization = email!.split("@")[1].split(".")[0];
 
-		getActiveUsersData(organization).then((data) => {
-			const filteredData = data.cameraDatas.filter(
-				(camera: any) => camera.userData.email !== email
-			);
+    getActiveUsersData(organization).then((data) => {
+      const filteredData = data.cameraDatas.filter(
+        (camera: any) => camera.userData.email !== email
+      );
 
-			if (filteredData.length > 0) {
-				loader.load(camModel, (gltf) => {
-					const newCams = filteredData.map((cam: any) => {
-						const newModel = gltf.scene.clone();
-						newModel.uuid = cam.userData._id;
-						newModel.position.set(cam.position.x, cam.position.y, cam.position.z);
-						newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z);
-						newModel.userData = cam.userData;
-						return newModel;
-					});
+      if (filteredData.length > 0) {
+        loader.load(camModel, (gltf) => {
+          const newCams = filteredData.map((cam: any) => {
+            const newModel = gltf.scene.clone();
+            newModel.uuid = cam.userData._id;
+            newModel.position.set(
+              cam.position.x,
+              cam.position.y,
+              cam.position.z
+            );
+            newModel.rotation.set(
+              cam.rotation.x,
+              cam.rotation.y,
+              cam.rotation.z
+            );
+            newModel.userData = cam.userData;
+            return newModel;
+          });
 
-					const users = filteredData.map((cam: any) => cam.userData);
-					setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
-					setCams((prev) => dedupeCams([...prev, ...newCams]));
-				});
-			}
-		});
-	}, []);
+          const users = filteredData.map((cam: any) => cam.userData);
+          setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
+          setCams((prev) => dedupeCams([...prev, ...newCams]));
+        });
+      }
+    });
+  }, []);
 
-	return (
-		<group ref={groupRef} name="Cam-Model-Group">
-			{cams.map((cam, index) => (
-				<primitive key={cam.uuid} object={cam}>
-					<Html
-						as="div"
-						center
-						zIndexRange={[1, 0]}
-						sprite
-						style={{
-							color: "white",
-							textAlign: "center",
-							fontFamily: "Arial, sans-serif",
-						}}
-						position={[-0.015, 0, 0.7]}
-					>
-						<CollabUserIcon
-							userImage={cam.userData.userImage ||""}
-							userName={cam.userData.userName}
-							color={getAvatarColor(index, cam.userData.userName)}
-						/>
-					</Html>
-				</primitive>
-			))}
-		</group>
-	);
+  return (
+    <group
+      ref={groupRef}
+      name="Cam-Model-Group"
+      visible={activeModule !== "visualization" ? true : false}
+    >
+      {cams.map((cam, index) => (
+        <primitive key={cam.uuid} object={cam}>
+          <Html
+            as="div"
+            center
+            zIndexRange={[1, 0]}
+            sprite
+            style={{
+              color: "white",
+              textAlign: "center",
+              fontFamily: "Arial, sans-serif",
+              display: `${activeModule !== "visualization" ? "" : "none"}`,
+            }}
+            position={[-0.015, 0, 0.7]}
+          >
+            <CollabUserIcon
+              userImage={cam.userData.userImage || ""}
+              userName={cam.userData.userName}
+              color={getAvatarColor(index, cam.userData.userName)}
+            />
+          </Html>
+        </primitive>
+      ))}
+    </group>
+  );
 };
 
 export default CamModelsGroup;

From 492985a19c9f9310f5850b36f95dc85f55690273 Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Fri, 11 Apr 2025 17:26:03 +0530
Subject: [PATCH 5/9] vertical move updated

---
 app/package-lock.json                         |  60 +++-
 app/package.json                              |   1 +
 .../sidebarLeft/visualization/Templates.tsx   |   4 +-
 .../ui/componets/Dropped3dWidget.tsx          | 319 +++++++++++-------
 .../ui/componets/RealTimeVisulization.tsx     |   1 -
 5 files changed, 248 insertions(+), 137 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 8be748e..5d92f68 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -48,6 +48,7 @@
         "zustand": "^5.0.0-rc.2"
       },
       "devDependencies": {
+        "@types/html2canvas": "^1.0.0",
         "@types/node": "^22.9.1",
         "@types/three": "^0.169.0",
         "axios": "^1.8.4",
@@ -2020,7 +2021,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2032,7 +2033,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4135,6 +4136,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4246,25 +4267,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -6470,6 +6491,17 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
       "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
     },
+    "node_modules/@types/html2canvas": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/html2canvas/-/html2canvas-1.0.0.tgz",
+      "integrity": "sha512-BJpVf+FIN9UERmzhbtUgpXj6XBZpG67FMgBLLoj9HZKd9XifcCpSV+UnFcwTZfEyun4U/KmCrrVOG7829L589w==",
+      "deprecated": "This is a stub types definition. html2canvas provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "*"
+      }
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -9007,7 +9039,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9884,7 +9916,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15247,7 +15279,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20715,7 +20747,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20758,7 +20790,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20770,7 +20802,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21266,7 +21298,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22325,7 +22357,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/app/package.json b/app/package.json
index ce5c7d3..e555d5f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -70,6 +70,7 @@
     ]
   },
   "devDependencies": {
+    "@types/html2canvas": "^1.0.0",
     "@types/node": "^22.9.1",
     "@types/three": "^0.169.0",
     "axios": "^1.8.4",
diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
index efcbcaf..f8f91e4 100644
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -91,10 +91,10 @@ const Templates = () => {
         <div
           key={template.id}
           className="template-item"
-          onClick={() => handleLoadTemplate(template)}
+         
         >
           {template?.snapshot && (
-            <div className="template-image-container">
+            <div className="template-image-container"  onClick={() => handleLoadTemplate(template)}>
               <img
                 src={template.snapshot}
                 alt={`${template.name} preview`}
diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx
index 51ad60e..4403e68 100644
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -60,7 +60,9 @@ export default function Dropped3dWidgets() {
     let [floorPlanesVertical, setFloorPlanesVertical] = useState(
         new THREE.Plane(new THREE.Vector3(0, 1, 0))
     );
-
+    const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
+    const [horizontalX, setHorizontalX] = useState<number | undefined>();
+    const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
 
     const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
     useEffect(() => {
@@ -177,26 +179,30 @@ export default function Dropped3dWidgets() {
         };
 
         const onDrop = (event: any) => {
-            
             event.preventDefault();
             event.stopPropagation();
-
+        
             hasEntered.current = false;
-
+        
             const email = localStorage.getItem("email") || "";
             const organization = email?.split("@")[1]?.split(".")[0];
-
+        
             const newWidget = createdWidgetRef.current;
             if (!newWidget || !widgetSelect.startsWith("ui")) return;
-
+        
             // ✅ Extract 2D drop position
-            const [x, , z] = newWidget.position;
-
+            let [x, y, z] = newWidget.position;
+        
+            // ✅ Clamp Y to at least 0
+            y = Math.max(y, 0);
+            newWidget.position = [x, y, z];
+        
             // ✅ Prepare polygon from selectedZone.points
             const points3D = selectedZone.points as Array<[number, number, number]>;
             const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
-
+        
             const isInside = isPointInPolygon([x, z], zonePolygonXZ);
+        
             // ✅ Remove temp widget
             const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
             const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
@@ -206,26 +212,29 @@ export default function Dropped3dWidgets() {
                     [selectedZone.zoneId]: cleanedWidgets,
                 },
             }));
+        
+            // (Optional) Prevent adding if dropped outside zone
             // if (!isInside) {
-                
             //     createdWidgetRef.current = null;
-            //     return; // Stop here
+            //     return;
             // }
-            // ✅ Add widget if inside polygon
+        
+            // ✅ Add widget
             addWidget(selectedZone.zoneId, newWidget);
-
+        
             const add3dWidget = {
                 organization,
                 widget: newWidget,
                 zoneId: selectedZone.zoneId,
             };
-
+        
             if (visualizationSocket) {
                 visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
             }
-
+        
             createdWidgetRef.current = null;
         };
+        
 
 
         canvasElement.addEventListener("dragenter", handleDragEnter);
@@ -331,28 +340,40 @@ export default function Dropped3dWidgets() {
         return inside;
     }
     const [prevX, setPrevX] = useState(0);
- 
+
     useEffect(() => {
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
         const handleMouseDown = (event: MouseEvent) => {
             if (!rightClickSelected || !rightSelect) return;
+            const selectedZoneId = Object.keys(zoneWidgetData).find(
+                (zoneId: string) =>
+                    zoneWidgetData[zoneId].some(
+                        (widget: WidgetData) => widget.id === rightClickSelected
+                    )
+            );
+            if (!selectedZoneId) return;
+            const selectedWidget = zoneWidgetData[selectedZoneId].find(
+                (widget: WidgetData) => widget.id === rightClickSelected
+            );
+            if (!selectedWidget) return
+            // let points = [];
+            // points.push(new THREE.Vector3(0, 0, 0));
+            // points.push(new THREE.Vector3(0, selectedWidget.position[1], 0));
+            // const newgeometry = new THREE.BufferGeometry().setFromPoints(points);
+            // let vector = new THREE.Vector3();
+            // camera.getWorldDirection(vector);
+            // let cameraDirection = vector;
+            // let newPlane = new THREE.Plane(cameraDirection);
+            // floorPlanesVertical = newPlane;
+            // setFloorPlanesVertical(newPlane);
+            // const intersect1 = raycaster?.ray?.intersectPlane(
+            //     floorPlanesVertical,
+            //     planeIntersect.current
+            // );
+            
+            // setintersectcontextmenu(intersect1.y);
 
-            const cameraDirection = new THREE.Vector3();
-            camera.getWorldDirection(cameraDirection);
-        
-            // Plane normal should be perpendicular to screen (XZ move), so use screen right direction
-            const right = new THREE.Vector3();
-            camera.getWorldDirection(cameraDirection);
-            cameraDirection.y = 0;
-            cameraDirection.normalize();
-        
-            right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
-        
-            // Create a plane that allows vertical movement
-            const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
-        
-            setFloorPlanesVertical(verticalPlane);
             if (rightSelect === "RotateX" || rightSelect === "RotateY") {
                 mouseStartRef.current = { x: event.clientX, y: event.clientY };
 
@@ -370,6 +391,7 @@ export default function Dropped3dWidgets() {
                     rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
                 }
             }
+          
         };
 
         const handleMouseMove = (event: MouseEvent) => {
@@ -392,90 +414,110 @@ export default function Dropped3dWidgets() {
 
             raycaster.setFromCamera(mouse, camera);
 
-            if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
-                const points3D = selectedZone.points as Array<[number, number, number]>;
-                const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
-                const newPosition: [number, number, number] = [
-                    planeIntersect.current.x,
-                    selectedWidget.position[1],
-                    planeIntersect.current.z,
-                ];
-                const isInside = isPointInPolygon(
-                    [newPosition[0], newPosition[2]],
-                    zonePolygonXZ
-                );
-                // if (isInside) {
+            if (rightSelect === "Horizontal Move") {
+                const intersect = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
+                if (
+                    intersect &&
+                    typeof horizontalX === "number" &&
+                    typeof horizontalZ === "number"
+                ) {
+                    const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
+                        zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+                    );
+                    if (!selectedZoneId) return;
+
+                    const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === rightClickSelected);
+                    if (!selectedWidget) return;
+
+                    const newPosition: [number, number, number] = [
+                        intersect.x + horizontalX,
+                        selectedWidget.position[1],
+                        intersect.z + horizontalZ,
+                    ];
+
+                    
                     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
-                // }
+                }
             }
 
+
             if (rightSelect === "Vertical Move") {
-                if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
-                    const currentY = selectedWidget.position[1];
-                    const newY = planeIntersect.current.y;
-                    console.log('planeIntersect.current: ', planeIntersect.current);
-                
-                    const deltaY = newY - currentY;
-                
-                    // Reject if jump is too large (safety check)
-                    if (Math.abs(deltaY) > 200) return;
-                
-                    // Clamp jump or apply smoothing
-                    const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10);
-                
-                    if (clampedY > 0) {
-                        updateWidgetPosition(selectedZoneId, rightClickSelected, [
-                            selectedWidget.position[0],
-                            clampedY,
-                            selectedWidget.position[2],
-                        ]);
-                    }
+                const intersect = raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current);
+            
+                if (intersect && typeof intersectcontextmenu === "number") {
+                    const diff = intersect.y - intersectcontextmenu;
+                    const unclampedY = selectedWidget.position[1] + diff;
+                    const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
+                    
+                    setintersectcontextmenu(intersect.y);
+            
+                    const newPosition: [number, number, number] = [
+                        selectedWidget.position[0],
+                        newY,
+                        selectedWidget.position[2],
+                    ];
+            
+                    updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
                 }
             }
+            
+            if (rightSelect?.startsWith("Rotate")) {
+                const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
+                const currentX = event.pageX;
+                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+                setPrevX(currentX);
+                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+                    const index = axis === "x" ? 0 : axis === "y" ? 1 : 2;
+                    const currentRotation = selectedWidget.rotation as [number, number, number]; // assert type
+                    const newRotation: [number, number, number] = [...currentRotation];
+                    newRotation[index] += 0.05 * sign;
+                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+                }
+            }
+            // if (rightSelect === "RotateX") {
+            //     
+            //     const currentX = event.pageX;
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            //     
+            //     setPrevX(currentX);
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //         
+            //         const newRotation: [number, number, number] = [
+            //             selectedWidget.rotation[0] + 0.05 * sign,
+            //             selectedWidget.rotation[1],
+            //             selectedWidget.rotation[2],
+            //         ];
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+            //     }
+            // }
+            // if (rightSelect === "RotateY") {
+            //     const currentX = event.pageX;
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            //     setPrevX(currentX);
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //         const newRotation: [number, number, number] = [
+            //             selectedWidget.rotation[0],
+            //             selectedWidget.rotation[1] + 0.05 * sign,
+            //             selectedWidget.rotation[2],
+            //         ];
 
-            if (rightSelect === "RotateX") {
-                const currentX = event.pageX;
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
-                setPrevX(currentX);
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                    const newRotation: [number, number, number] = [
-                        selectedWidget.rotation[0] + 0.05 * sign,
-                        selectedWidget.rotation[1],
-                        selectedWidget.rotation[2],
-                    ];
-                    
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                }
-            }
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+            //     }
+            // }
+            // if (rightSelect === "RotateZ") {
+            //     const currentX = event.pageX;
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            //     setPrevX(currentX);
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //         const newRotation: [number, number, number] = [
+            //             selectedWidget.rotation[0],
+            //             selectedWidget.rotation[1],
+            //             selectedWidget.rotation[2] + 0.05 * sign,
+            //         ];
 
-            if (rightSelect === "RotateY") {
-                const currentX = event.pageX;
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
-                setPrevX(currentX);
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                    const newRotation: [number, number, number] = [
-                        selectedWidget.rotation[0] ,
-                        selectedWidget.rotation[1]+ 0.05 * sign,
-                        selectedWidget.rotation[2],
-                    ];
-                    
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                }
-            }
-            if (rightSelect === "RotateZ") {
-                const currentX = event.pageX;
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
-                setPrevX(currentX);
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                    const newRotation: [number, number, number] = [
-                        selectedWidget.rotation[0] ,
-                        selectedWidget.rotation[1],
-                        selectedWidget.rotation[2]+ 0.05 * sign,
-                    ];
-                    
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                }
-            }
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+            //     }
+            // }
         };
         const handleMouseUp = () => {
             if (!rightClickSelected || !rightSelect) return;
@@ -525,7 +567,7 @@ export default function Dropped3dWidgets() {
                 const rotation = selectedWidget.rotation || [0, 0, 0];
 
                 let lastRotation = formatValues(rotation) as [number, number, number];
-             
+
                 // (async () => {
                 //     let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
                 //
@@ -564,23 +606,60 @@ export default function Dropped3dWidgets() {
         };
     }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
 
+    const handleRightClick3d = (event: React.MouseEvent, id: string) => {
+        event.preventDefault();
+
+        const canvasElement = document.getElementById("real-time-vis-canvas");
+        if (!canvasElement) throw new Error("Canvas element not found");
+
+        const canvasRect = canvasElement.getBoundingClientRect();
+        const relativeX = event.clientX - canvasRect.left;
+        const relativeY = event.clientY - canvasRect.top;
+
+        setEditWidgetOptions(true);
+        setRightClickSelected(id);
+        setTop(relativeY);
+        setLeft(relativeX);
+
+        const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
+            zoneWidgetData[zoneId].some(widget => widget.id === id)
+        );
+        if (!selectedZoneId) return;
+
+        const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === id);
+        if (!selectedWidget) return;
+
+        const { top, left, width, height } = canvasElement.getBoundingClientRect();
+        mouse.x = ((event.clientX - left) / width) * 2 - 1;
+        mouse.y = -((event.clientY - top) / height) * 2 + 1;
+
+        raycaster.setFromCamera(mouse, camera);
+
+        const cameraDirection = new THREE.Vector3();
+        camera.getWorldDirection(cameraDirection);
+        const verticalPlane = new THREE.Plane(cameraDirection);
+        setFloorPlanesVertical(verticalPlane);
+
+        const intersectPoint = raycaster.ray.intersectPlane(verticalPlane, planeIntersect.current);
+        if (intersectPoint) {
+            setintersectcontextmenu(intersectPoint.y);
+        }
+        const intersect2 = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
+        if (intersect2) {
+            const xDiff = -intersect2.x + selectedWidget.position[0];
+            const zDiff = -intersect2.z + selectedWidget.position[2];
+            setHorizontalX(xDiff);
+            setHorizontalZ(zDiff);
+        }
+    };
+
+
     return (
         <>
             {activeZoneWidgets.map(
                 ({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
                     const handleRightClick = (event: React.MouseEvent, id: string) => {
-                        event.preventDefault();
-                        const canvasElement = document.getElementById(
-                            "real-time-vis-canvas"
-                        );
-                        if (!canvasElement) throw new Error("Canvas element not found");
-                        const canvasRect = canvasElement.getBoundingClientRect();
-                        const relativeX = event.clientX - canvasRect.left;
-                        const relativeY = event.clientY - canvasRect.top;
-                        setEditWidgetOptions(true);
-                        setRightClickSelected(id);
-                        setTop(relativeY);
-                        setLeft(relativeX);
+                        handleRightClick3d(event, id)
                     };
 
                     switch (type) {
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index d70bfc3..0950536 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -286,7 +286,6 @@ const RealTimeVisulization: React.FC = () => {
                   "Horizontal Move",
                   "RotateX",
                   "RotateY",
-                  "RotateZ",
                   "Delete",
                 ]}
               />

From 1256f333427ec48531906c706f9061aa4ddab9f5 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 11 Apr 2025 17:52:07 +0530
Subject: [PATCH 6/9] Debugged agv and conveyor interaction.

---
 app/package-lock.json                         |   48 +-
 .../properties/GlobalProperties.tsx           |    2 +-
 .../properties/ZoneProperties.tsx             |    4 +-
 .../ui/componets/RealTimeVisulization.tsx     |    2 +-
 .../floating/FleetEfficiencyComponent.tsx     |    2 +-
 app/src/modules/builder/agv/agv.tsx           |  170 ++-
 app/src/modules/builder/agv/pathNavigator.tsx |  345 +++---
 .../scene/IntialLoad/loadInitialFloorItems.ts |    1 -
 .../controls/selection/selectionControls.tsx  |    6 +-
 .../simulation/process/processAnimator.tsx    |  118 +-
 .../simulation/process/processCreator.tsx     |   36 +-
 app/src/modules/simulation/process/types.ts   |    2 +-
 .../process/useProcessAnimations.tsx          | 1027 +++++++++--------
 app/src/modules/simulation/simulation.tsx     |    1 -
 14 files changed, 906 insertions(+), 858 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 8be748e..2c1f714 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -2020,7 +2020,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2032,7 +2032,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4135,6 +4135,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4246,25 +4266,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9007,7 +9027,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9884,7 +9904,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15247,7 +15267,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20715,7 +20735,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20758,7 +20778,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20770,7 +20790,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21266,7 +21286,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22325,7 +22345,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
index 4ffea3b..568783c 100644
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -98,7 +98,7 @@ const GlobalProperties: React.FC = () => {
     // setPlaneValue({ height: value * 100, width: value * 100 });
   }
   function updatedGrid(value: number) {
-    console.log(" (value * 100) / 4 : ", (value * 100) / 4);
+    // console.log(" (value * 100) / 4 : ", (value * 100) / 4);
     setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
     setPlaneValue({ height: value * 100, width: value * 100 });
   }
diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index 6492252..c36b656 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -32,7 +32,7 @@ const ZoneProperties: React.FC = () => {
       if (response.message === "updated successfully") {
         setEdit(false);
       } else {
-        console.log(response);
+        // console.log(response);
       }
 
     } catch (error) {
@@ -63,7 +63,7 @@ const ZoneProperties: React.FC = () => {
         )
       );
     }else{
-      console.log(response?.message);
+      // console.log(response?.message);
     }
   }
   function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index d70bfc3..d8d721f 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -85,7 +85,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        console.log('response: ', response);
+        // console.log('response: ', response);
 
         if (!Array.isArray(response)) {
           return;
diff --git a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
index 2cf12e0..6751028 100644
--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
@@ -41,7 +41,7 @@ const FleetEfficiencyComponent = ({object}: any) => {
     
         socket.on("lastOutput", (response) => {
           const responseData = response.input1;
-          console.log(responseData);
+          // console.log(responseData);
           
           if (typeof responseData === "number") {
             console.log("It's a number!");
diff --git a/app/src/modules/builder/agv/agv.tsx b/app/src/modules/builder/agv/agv.tsx
index 5b8a2e4..60e76d8 100644
--- a/app/src/modules/builder/agv/agv.tsx
+++ b/app/src/modules/builder/agv/agv.tsx
@@ -1,111 +1,103 @@
 import { useEffect, useState } from "react";
 import { Line } from "@react-three/drei";
 import {
-  useNavMesh,
-  usePlayAgv,
-  useSimulationStates,
+	useNavMesh,
+	usePlayAgv,
+	useSimulationStates,
 } from "../../../store/store";
 import PathNavigator from "./pathNavigator";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
 
 type PathPoints = {
-  modelUuid: string;
-  modelSpeed: number;
-  bufferTime: number;
-  points: { x: number; y: number; z: number }[];
-  hitCount: number;
+	modelUuid: string;
+	modelSpeed: number;
+	bufferTime: number;
+	points: { x: number; y: number; z: number }[];
+	hitCount: number;
 };
 interface ProcessContainerProps {
-  processes: any[];
-  agvRef: any;
-  MaterialRef: any;
+	processes: any[];
+	agvRef: any;
+	MaterialRef: any;
 }
 
 const Agv: React.FC<ProcessContainerProps> = ({
-  processes,
-  agvRef,
-  MaterialRef,
+	processes,
+	agvRef,
+	MaterialRef,
 }) => {
-  const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
-  const { simulationStates } = useSimulationStates();
-  const { navMesh } = useNavMesh();
-  const { isPlaying } = usePlayButtonStore();
-  const { PlayAgv, setPlayAgv } = usePlayAgv();
+	const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
+	const { simulationStates } = useSimulationStates();
+	const { navMesh } = useNavMesh();
+	const { isPlaying } = usePlayButtonStore();
+	const { isReset, setReset } = useResetButtonStore();
 
+	useEffect(() => {
+		if (!isPlaying || isReset) {
+			agvRef.current = [];
+		}
+	}, [isPlaying, isReset])
 
+	useEffect(() => {
+		if (simulationStates.length > 0) {
+			const agvModels = simulationStates.filter(
+				(val) => val.modelName === "agv" && val.type === "Vehicle"
+			);
 
-  useEffect(() => {
-    if (simulationStates.length > 0) {
-      const agvModels = simulationStates.filter(
-        (val) => val.modelName === "agv" && val.type === "Vehicle"
-      );
+			const newPathPoints = agvModels
+				.filter(
+					(model: any) =>
+						model.points &&
+						model.points.actions &&
+						typeof model.points.actions.start === "object" &&
+						typeof model.points.actions.end === "object" &&
+						"x" in model.points.actions.start &&
+						"y" in model.points.actions.start &&
+						"x" in model.points.actions.end &&
+						"y" in model.points.actions.end
+				)
+				.map((model: any) => ({
+					modelUuid: model.modeluuid,
+					modelSpeed: model.points.speed,
+					bufferTime: model.points.actions.buffer,
+					hitCount: model.points.actions.hitCount,
+					points: [
+						{ x: model.position[0], y: model.position[1], z: model.position[2], },
+						{ x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y, },
+						{ x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y, },
+					],
+				}));
 
-      const newPathPoints = agvModels
-        .filter(
-          (model: any) =>
-            model.points &&
-            model.points.actions &&
-            typeof model.points.actions.start === "object" &&
-            typeof model.points.actions.end === "object" &&
-            "x" in model.points.actions.start &&
-            "y" in model.points.actions.start &&
-            "x" in model.points.actions.end &&
-            "y" in model.points.actions.end
-        )
-        .map((model: any) => ({
-          modelUuid: model.modeluuid,
-          modelSpeed: model.points.speed,
-          bufferTime: model.points.actions.buffer,
-          hitCount: model.points.actions.hitCount,
-          points: [
-            {
-              x: model.position[0],
-              y: model.position[1],
-              z: model.position[2],
-            },
-            {
-              x: model.points.actions.start.x,
-              y: 0,
-              z: model.points.actions.start.y,
-            },
-            {
-              x: model.points.actions.end.x,
-              y: 0,
-              z: model.points.actions.end.y,
-            },
-          ],
-        }));
+			setPathPoints(newPathPoints);
+		}
+	}, [simulationStates]);
 
-      setPathPoints(newPathPoints);
-    }
-  }, [simulationStates]);
+	return (
+		<>
+			{pathPoints.map((pair, i) => (
+				<group key={i} visible={!isPlaying}>
+					<PathNavigator
+						navMesh={navMesh}
+						pathPoints={pair.points}
+						id={pair.modelUuid}
+						speed={pair.modelSpeed}
+						bufferTime={pair.bufferTime}
+						hitCount={pair.hitCount}
+						processes={processes}
+						agvRef={agvRef}
+						MaterialRef={MaterialRef}
+					/>
 
-  return (
-    <>
-      {pathPoints.map((pair, i) => (
-        <group key={i} visible={!isPlaying}>
-          <PathNavigator
-            navMesh={navMesh}
-            pathPoints={pair.points}
-            id={pair.modelUuid}
-            speed={pair.modelSpeed}
-            bufferTime={pair.bufferTime}
-            hitCount={pair.hitCount}
-            processes={processes}
-            agvRef={agvRef}
-            MaterialRef={MaterialRef}
-          />
-
-          {pair.points.slice(1).map((point, idx) => (
-            <mesh position={[point.x, point.y, point.z]} key={idx}>
-              <sphereGeometry args={[0.3, 15, 15]} />
-              <meshStandardMaterial color="red" />
-            </mesh>
-          ))}
-        </group>
-      ))}
-    </>
-  );
+					{pair.points.slice(1).map((point, idx) => (
+						<mesh position={[point.x, point.y, point.z]} key={idx}>
+							<sphereGeometry args={[0.3, 15, 15]} />
+							<meshStandardMaterial color="red" />
+						</mesh>
+					))}
+				</group>
+			))}
+		</>
+	);
 };
 
 export default Agv;
diff --git a/app/src/modules/builder/agv/pathNavigator.tsx b/app/src/modules/builder/agv/pathNavigator.tsx
index d68da57..018cf4f 100644
--- a/app/src/modules/builder/agv/pathNavigator.tsx
+++ b/app/src/modules/builder/agv/pathNavigator.tsx
@@ -5,7 +5,6 @@ import { NavMeshQuery } from "@recast-navigation/core";
 import { Line } from "@react-three/drei";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { usePlayAgv } from "../../../store/store";
-import crate from "../../../assets/gltf-glb/crate_box.glb";
 
 interface PathNavigatorProps {
   navMesh: any;
@@ -38,30 +37,12 @@ export default function PathNavigator({
   MaterialRef,
 }: PathNavigatorProps) {
   const [currentPhase, setCurrentPhase] = useState<Phase>("initial");
-  //
-
   const [path, setPath] = useState<[number, number, number][]>([]);
-  const PickUpDrop = useRef([]);
-
-  // const [currentPhase, setCurrentPhase] = useState<"initial" | "loop">(
-  //   "initial"
-  // );
-  const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>(
-    []
-  );
-
-  const [pickupDropPath, setPickupDropPath] = useState<
-    [number, number, number][]
-  >([]);
-  const [dropPickupPath, setDropPickupPath] = useState<
-    [number, number, number][]
-  >([]);
-  const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(
-    null
-  );
-  const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(
-    null
-  );
+  const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>([]);
+  const [pickupDropPath, setPickupDropPath] = useState<[number, number, number][]>([]);
+  const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
+  const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
+  const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
   const [boxVisible, setBoxVisible] = useState(false);
 
   const distancesRef = useRef<number[]>([]);
@@ -70,11 +51,20 @@ export default function PathNavigator({
   const isWaiting = useRef(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const hasStarted = useRef(false);
+  const hasReachedPickup = useRef(false);
 
   const { scene } = useThree();
   const { isPlaying } = usePlayButtonStore();
   const { PlayAgv, setPlayAgv } = usePlayAgv();
 
+  const boxRef = useRef<THREE.Mesh | null>(null);
+
+  const baseMaterials = useMemo(() => ({
+    Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
+    Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+    Default: new THREE.MeshStandardMaterial({ color: 0xcccccc })
+  }), []);
+
   useEffect(() => {
     const object = scene.getObjectByProperty("uuid", id);
     if (object) {
@@ -105,12 +95,16 @@ export default function PathNavigator({
 
     setPath([]);
     setCurrentPhase("initial");
+    setToPickupPath([]);
     setPickupDropPath([]);
     setDropPickupPath([]);
+    setBoxVisible(false);
     distancesRef.current = [];
     totalDistanceRef.current = 0;
     progressRef.current = 0;
     isWaiting.current = false;
+    hasStarted.current = false;
+    hasReachedPickup.current = false;
 
     if (initialPosition && initialRotation) {
       const object = scene.getObjectByProperty("uuid", id);
@@ -130,27 +124,16 @@ export default function PathNavigator({
 
     const [pickup, drop] = pathPoints.slice(-2);
 
-    PickUpDrop.current = pathPoints.slice(-2);
-
     const object = scene.getObjectByProperty("uuid", id);
-
     if (!object) return;
 
-    const currentPosition = {
-      x: object.position.x,
-      y: object.position.y,
-      z: object.position.z,
-    };
+    const currentPosition = object.position;
 
     const toPickupPath = computePath(currentPosition, pickup);
     const pickupToDropPath = computePath(pickup, drop);
     const dropToPickupPath = computePath(drop, pickup);
 
-    if (
-      toPickupPath.length &&
-      pickupToDropPath.length &&
-      dropToPickupPath.length
-    ) {
+    if (toPickupPath.length && pickupToDropPath.length && dropToPickupPath.length) {
       setPickupDropPath(pickupToDropPath);
       setDropPickupPath(dropToPickupPath);
       setToPickupPath(toPickupPath);
@@ -177,25 +160,9 @@ export default function PathNavigator({
     isWaiting.current = false;
   }, [path]);
 
-  // Add these refs outside the useFrame if not already present:
-  const startPointReached = useRef(false);
-
-  const baseMaterials = useMemo(
-    () => ({
-      Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
-      Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      // Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      Default: new THREE.MeshStandardMaterial(),
-    }),
-    []
-  );
-
-  // Example usage:
-  const targetModelUUID = id; // Replace with your target ID
-  const matchedProcess = findProcessByTargetModelUUID(
-    processes,
-    targetModelUUID
-  );
+  function logAgvStatus(id: string, status: string) {
+    // console.log(`AGV ${id}: ${status}`);
+  }
 
   function findProcessByTargetModelUUID(processes: any, targetModelUUID: any) {
     for (const process of processes) {
@@ -206,75 +173,55 @@ export default function PathNavigator({
               (target: any) => target.modelUUID === targetModelUUID
             )
           ) {
-            //
-            return process.id; // Return the process if a match is found
+            return process.id;
           }
         }
       }
     }
-    return null; // Return null if no match is found
+    return null;
   }
 
-  useFrame((_, delta) => {});
-  const boxRef = useRef<THREE.Mesh | null>(null);
-
   useEffect(() => {
-    if (!scene || !boxRef || !processes) return;
+    if (!scene || !boxRef || !processes || !MaterialRef.current) return;
 
-    // 1. Find the existing object by UUID
     const existingObject = scene.getObjectByProperty("uuid", id);
     if (!existingObject) return;
 
-    // 2. Find the process that targets this object's modelUUID
+    if (boxRef.current?.parent) {
+      boxRef.current.parent.remove(boxRef.current);
+      boxRef.current = null;
+    }
+
     if (boxVisible) {
       const matchedProcess = findProcessByTargetModelUUID(processes, id);
-
-      // 3. Determine the material (from materialref) if a process is matched
-      let materialType = "Default";
+      let materialType: "Box" | "Crate" | "Default" = "Default";
 
       if (matchedProcess) {
         const materialEntry = MaterialRef.current.find((item: any) =>
           item.objects.some((obj: any) => obj.processId === matchedProcess)
         );
-        console.log("materialEntry: ", materialEntry);
         if (materialEntry) {
-          materialType = materialEntry.material; // "Box" or "Crate"
+          materialType = materialEntry.material;
         }
       }
 
-      // 4. Create the box mesh with the assigned material
       const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
-      const boxMaterial = baseMaterials[materialType as MaterialType];
-      const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
+      const boxMesh = new THREE.Mesh(boxGeometry, baseMaterials[materialType]);
       boxMesh.position.y = 1;
       boxMesh.name = `box-${id}`;
-
-      // 5. Add to scene and cleanup
       existingObject.add(boxMesh);
       boxRef.current = boxMesh;
     }
 
-    if (!startPointReached.current && boxVisible) {
-      setBoxVisible(false);
-    }
     return () => {
       if (boxRef.current?.parent) {
         boxRef.current.parent.remove(boxRef.current);
       }
-      boxRef.current = null;
     };
-  }, [
-    processes,
-    MaterialRef,
-    boxVisible,
-    findProcessByTargetModelUUID,
-    startPointReached,
-  ]);
+  }, [processes, MaterialRef, boxVisible, scene, id, baseMaterials]);
 
   useFrame((_, delta) => {
-    const currentAgv = (agvRef.current || []).find(
-      (agv: AGVData) => agv.vehicleId === id
-    );
+    const currentAgv = (agvRef.current || []).find((agv: AGVData) => agv.vehicleId === id);
 
     if (!scene || !id || !isPlaying) return;
 
@@ -283,7 +230,6 @@ export default function PathNavigator({
 
     if (isPlaying && !hasStarted.current) {
       hasStarted.current = false;
-      startPointReached.current = false;
       progressRef.current = 0;
       isWaiting.current = false;
       if (timeoutRef.current) {
@@ -295,10 +241,9 @@ export default function PathNavigator({
     const isAgvReady = () => {
       if (!agvRef.current || agvRef.current.length === 0) return false;
       if (!currentAgv) return false;
-      return hitCount === currentAgv.expectedHitCount;
+      return currentAgv.isActive && hitCount >= currentAgv.maxHitCount;
     };
 
-    // Step 1: Snap to start point on first play
     if (isPlaying && !hasStarted.current && toPickupPath.length > 0) {
       setBoxVisible(false);
       const startPoint = new THREE.Vector3(...toPickupPath[0]);
@@ -311,146 +256,132 @@ export default function PathNavigator({
       }
 
       hasStarted.current = true;
-      startPointReached.current = true;
       progressRef.current = 0;
-
+      hasReachedPickup.current = false;
       setToPickupPath(toPickupPath.slice(-1));
-
+      logAgvStatus(id, "Started from station, heading to pickup");
       return;
     }
 
-    // Step 2: Wait at start point for AGV readiness
-    if (isPlaying && startPointReached.current && path.length === 0) {
-      if (!isAgvReady()) {
-        return; // Prevent transitioning to the next phase if AGV is not ready
+    if (isPlaying && currentPhase === "initial" && !hasReachedPickup.current) {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+
+      if (reached) {
+        hasReachedPickup.current = true;
+        if (currentAgv) {
+          currentAgv.status = 'picking';
+        }
+        logAgvStatus(id, "Reached pickup point, Waiting for material");
       }
-
-      setBoxVisible(true);
-
-      setPath([...toPickupPath]); // Start path transition once the AGV is ready
-      setCurrentPhase("toDrop");
-      progressRef.current = 0;
-      console.log("startPointReached: ", startPointReached.current);
-      startPointReached.current = false;
-
       return;
     }
 
-    if (path.length < 2) return;
+    if (isPlaying && currentAgv?.isActive && currentPhase === "initial") {
+      if (!isAgvReady()) return;
+      setTimeout(() => {
+        setBoxVisible(true);
+        setPath([...pickupDropPath]);
+        setCurrentPhase("toDrop");
+        progressRef.current = 0;
+        logAgvStatus(id, "Started from pickup point, heading to drop point");
+        if (currentAgv) {
+          currentAgv.status = 'toDrop';
+        }
+      }, 0)
+      return;
+    }
+
+    if (isPlaying && currentPhase === "toDrop") {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+
+      if (reached && !isWaiting.current) {
+        isWaiting.current = true;
+        logAgvStatus(id, "Reached drop point");
+        if (currentAgv) {
+          currentAgv.status = 'droping';
+        }
+        timeoutRef.current = setTimeout(() => {
+          setPath([...dropPickupPath]);
+          setCurrentPhase("toPickup");
+          progressRef.current = 0;
+          isWaiting.current = false;
+          setBoxVisible(false);
+          if (currentAgv) {
+            currentAgv.status = 'toPickup';
+          }
+          logAgvStatus(id, "Started from droping point, heading to pickup point");
+        }, bufferTime * 1000);
+      }
+      return;
+    }
+
+    if (isPlaying && currentPhase === "toPickup") {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+
+      if (reached) {
+        if (currentAgv) {
+          currentAgv.isActive = false;
+        }
+        setCurrentPhase("initial");
+        if (currentAgv) {
+          currentAgv.status = 'picking';
+        }
+        logAgvStatus(id, "Reached pickup point again, cycle complete");
+      }
+      return;
+    }
+
+    moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+  });
+
+  function moveAlongPath(
+    object: THREE.Object3D,
+    path: [number, number, number][],
+    distances: number[],
+    speed: number,
+    delta: number,
+    progressRef: React.MutableRefObject<number>
+  ): boolean {
+    if (path.length < 2) return false;
 
     progressRef.current += delta * speed;
-
     let covered = progressRef.current;
     let accumulated = 0;
     let index = 0;
 
-    if (distancesRef.current.length !== path.length - 1) {
-      distancesRef.current = [];
-      totalDistanceRef.current = 0;
+    for (; index < distances.length; index++) {
+      const dist = distances[index];
+      if (accumulated + dist >= covered) break;
+      accumulated += dist;
+    }
 
-      for (let i = 0; i < path.length - 1; i++) {
-        const start = new THREE.Vector3(...path[i]);
-        const end = new THREE.Vector3(...path[i + 1]);
-        const distance = start.distanceTo(end);
-        distancesRef.current.push(distance);
-        totalDistanceRef.current += distance;
+    if (index >= path.length - 1) {
+      if (path.length > 1) {
+        const lastDirection = new THREE.Vector3(...path[path.length - 1])
+          .sub(new THREE.Vector3(...path[path.length - 2]))
+          .normalize();
+        object.rotation.y = Math.atan2(lastDirection.x, lastDirection.z);
       }
+      return true;
     }
 
-    while (
-      index < distancesRef.current.length &&
-      covered > accumulated + distancesRef.current[index]
-    ) {
-      accumulated += distancesRef.current[index];
-      index++;
-    }
-
-    // AGV has completed its path
-    if (index >= distancesRef.current.length) {
-      progressRef.current = totalDistanceRef.current;
-
-      timeoutRef.current = setTimeout(() => {
-        if (!isAgvReady()) {
-          isWaiting.current = false;
-          return;
-        }
-
-        let nextPath = [];
-        let nextPhase = currentPhase;
-
-        if (currentPhase === "toDrop") {
-          nextPath = dropPickupPath;
-          nextPhase = "toPickup";
-          setBoxVisible(false);
-        } else if (currentPhase === "toPickup") {
-          // When returning to start point (toPickup phase completed)
-          // Set position to toPickupPath[1] instead of [0]
-          if (toPickupPath.length > 1) {
-            object.position.copy(new THREE.Vector3(...toPickupPath[1]));
-            // Also set rotation towards the next point if available
-            if (toPickupPath.length > 2) {
-              const nextPoint = new THREE.Vector3(...toPickupPath[2]);
-              const direction = nextPoint
-                .clone()
-                .sub(object.position)
-                .normalize();
-              object.rotation.y = Math.atan2(direction.x, direction.z);
-            }
-          }
-
-          // Reset the path and mark start point as reached
-          setPath([]);
-          startPointReached.current = true;
-          progressRef.current = 0;
-          distancesRef.current = [];
-
-          // Stop the AGV by setting isplaying to false
-          if (currentAgv) {
-            currentAgv.isplaying = false;
-          }
-
-          // Clear timeout and return to prevent further movement
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-          }
-          return;
-        } else {
-          nextPath = pickupDropPath;
-          nextPhase = "toDrop";
-          setBoxVisible(true);
-        }
-
-        setPath([...nextPath]);
-        setCurrentPhase(nextPhase);
-        progressRef.current = 0;
-        isWaiting.current = false;
-        distancesRef.current = [];
-
-        // Reset hit count for the next cycle
-        if (agvRef.current) {
-          agvRef.current = agvRef.current.map((agv: AGVData) =>
-            agv.vehicleId === id ? { ...agv, hitCount: 0 } : agv
-          );
-        }
-      }, bufferTime * 1000);
-
-      return;
-    }
-
-    // Step 4: Interpolate position and rotation
     const start = new THREE.Vector3(...path[index]);
     const end = new THREE.Vector3(...path[index + 1]);
-    const dist = distancesRef.current[index];
-
-    if (!dist || dist === 0) return;
+    const dist = distances[index];
 
     const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
     object.position.copy(start.clone().lerp(end, t));
 
-    const direction = new THREE.Vector3().subVectors(end, start).normalize();
-    object.rotation.y = Math.atan2(direction.x, direction.z);
-  });
+    if (dist > 0.1) {
+      const targetDirection = end.clone().sub(start).normalize();
+      const targetRotationY = Math.atan2(targetDirection.x, targetDirection.z);
+
+      const rotationSpeed = Math.min(5 * delta, 1);
+      object.rotation.y = THREE.MathUtils.lerp(object.rotation.y, targetRotationY, rotationSpeed);
+    }
+
+    return false;
+  }
 
   useEffect(() => {
     return () => {
diff --git a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts
index c93b660..ea5ea74 100644
--- a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts
+++ b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts
@@ -20,7 +20,6 @@ async function loadInitialFloorItems(
     const organization = (email!.split("@")[1]).split(".")[0];
 
     const items = await getFloorAssets(organization);
-    console.log('items: ', items);
     localStorage.setItem("FloorItems", JSON.stringify(items));
     await initializeDB();
 
diff --git a/app/src/modules/scene/controls/selection/selectionControls.tsx b/app/src/modules/scene/controls/selection/selectionControls.tsx
index acaed3a..11c2dfb 100644
--- a/app/src/modules/scene/controls/selection/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selection/selectionControls.tsx
@@ -14,7 +14,6 @@ import CopyPasteControls from "./copyPasteControls";
 import MoveControls from "./moveControls";
 import RotateControls from "./rotateControls";
 import useModuleStore from "../../../../store/useModuleStore";
-import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 
 const SelectionControls: React.FC = () => {
     const { camera, controls, gl, scene, pointer } = useThree();
@@ -102,13 +101,12 @@ const SelectionControls: React.FC = () => {
         };
 
         const onKeyDown = (event: KeyboardEvent) => {
-            const keyCombination = detectModifierKeys(event);
             if (movedObjects.length > 0 || rotatedObjects.length > 0) return;
-            if (keyCombination === "ESCAPE") {
+            if (event.key.toLowerCase() === "escape") {
                 event.preventDefault();
                 clearSelection();
             }
-            if (keyCombination === "DELETE") {
+            if (event.key.toLowerCase() === "delete") {
                 event.preventDefault();
                 deleteSelection();
             }
diff --git a/app/src/modules/simulation/process/processAnimator.tsx b/app/src/modules/simulation/process/processAnimator.tsx
index 7b906d2..2ba5869 100644
--- a/app/src/modules/simulation/process/processAnimator.tsx
+++ b/app/src/modules/simulation/process/processAnimator.tsx
@@ -26,6 +26,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
 }) => {
   const gltf = useLoader(GLTFLoader, crate) as GLTF;
   const groupRef = useRef<THREE.Group>(null);
+  const tempStackedObjectsRef = useRef<Record<string, boolean>>({});
 
   const {
     animationStates,
@@ -43,27 +44,19 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
     checkAndCountTriggers,
   } = useProcessAnimation(processes, setProcesses, agvRef);
 
-  const baseMaterials = useMemo(
-    () => ({
-      Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
-      Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      // Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      Default: new THREE.MeshStandardMaterial(),
-    }),
-    []
-  );
+  const baseMaterials = useMemo(() => ({
+    Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
+    Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+    Default: new THREE.MeshStandardMaterial(),
+  }), []);
 
   useEffect(() => {
     // Update material references for all spawned objects
     Object.entries(animationStates).forEach(([processId, processState]) => {
       Object.keys(processState.spawnedObjects).forEach((objectId) => {
-        const entry = {
-          processId,
-          objectId,
-        };
+        const entry = { processId, objectId, };
 
-        const materialType =
-          processState.spawnedObjects[objectId]?.currentMaterialType;
+        const materialType = processState.spawnedObjects[objectId]?.currentMaterialType;
 
         if (!materialType) {
           return;
@@ -72,17 +65,13 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
         const matRefArray = MaterialRef.current;
 
         // Find existing material group
-        const existing = matRefArray.find(
-          (entryGroup: { material: string; objects: any[] }) =>
-            entryGroup.material === materialType
+        const existing = matRefArray.find((entryGroup: { material: string; objects: any[] }) =>
+          entryGroup.material === materialType
         );
 
         if (existing) {
           // Check if this processId + objectId already exists
-          const alreadyExists = existing.objects.some(
-            (o: any) =>
-              o.processId === entry.processId && o.objectId === entry.objectId
-          );
+          const alreadyExists = existing.objects.some((o: any) => o.processId === entry.processId && o.objectId === entry.objectId);
 
           if (!alreadyExists) {
             existing.objects.push(entry);
@@ -102,8 +91,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
 
   useFrame(() => {
     // Spawn logic frame
-    const currentTime =
-      clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
+    const currentTime = clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
 
     setAnimationStates((prev) => {
       const newStates = { ...prev };
@@ -131,10 +119,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
             : parseFloat(spawnAction.spawnInterval as string) || 0;
 
         // Check if this is a zero interval spawn and we already spawned an object
-        if (
-          spawnInterval === 0 &&
-          processState.hasSpawnedZeroIntervalObject === true
-        ) {
+        if (spawnInterval === 0 && processState.hasSpawnedZeroIntervalObject === true) {
           return; // Don't spawn more objects for zero interval
         }
 
@@ -312,28 +297,81 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
             //   }
             // }
 
+            // if (isLastPoint) {
+            //   if (currentPointData?.actions) {
+            //     const hasNonInherit = hasNonInheritActions(
+            //       currentPointData.actions
+            //     );
+            //     if (!hasNonInherit) {
+            //       // Remove the object if all actions are inherit
+            //       updatedObjects[objectId] = {
+            //         ...obj,
+            //         visible: false,
+            //         state: { ...stateRef, isAnimating: false },
+            //       };
+            //       return;
+            //     }
+            //   } else {
+            //     // No actions at last point - remove the object
+            //     updatedObjects[objectId] = {
+            //       ...obj,
+            //       visible: false,
+            //       state: { ...stateRef, isAnimating: false },
+            //     };
+            //     return;
+            //   }
+            // }
+
             if (isLastPoint) {
-              if (currentPointData?.actions) {
-                const hasNonInherit = hasNonInheritActions(
-                  currentPointData.actions
-                );
-                if (!hasNonInherit) {
-                  // Remove the object if all actions are inherit
+              const isAgvPicking = agvRef.current.some(
+                (agv: any) => agv.processId === process.id && agv.status === "picking"
+              );
+
+              const shouldHide = !currentPointData?.actions || !hasNonInheritActions(currentPointData.actions);
+
+              if (shouldHide) {
+                if (isAgvPicking) {
                   updatedObjects[objectId] = {
                     ...obj,
                     visible: false,
-                    state: { ...stateRef, isAnimating: false },
+                    state: {
+                      ...stateRef,
+                      isAnimating: false,
+                    },
+                  };
+                } else {
+                  tempStackedObjectsRef.current[objectId] = true;
+
+                  updatedObjects[objectId] = {
+                    ...obj,
+                    visible: true,
+                    state: {
+                      ...stateRef,
+                      isAnimating: true,
+                    },
                   };
-                  return;
                 }
-              } else {
-                // No actions at last point - remove the object
+
+                return;
+              }
+            }
+
+            if (tempStackedObjectsRef.current[objectId]) {
+              const isAgvPicking = agvRef.current.some(
+                (agv: any) => agv.processId === process.id && agv.status === "picking"
+              );
+
+              if (isAgvPicking) {
+                delete tempStackedObjectsRef.current[objectId];
+
                 updatedObjects[objectId] = {
                   ...obj,
                   visible: false,
-                  state: { ...stateRef, isAnimating: false },
+                  state: {
+                    ...stateRef,
+                    isAnimating: false,
+                  },
                 };
-                return;
               }
             }
 
diff --git a/app/src/modules/simulation/process/processCreator.tsx b/app/src/modules/simulation/process/processCreator.tsx
index cae152b..041b4ec 100644
--- a/app/src/modules/simulation/process/processCreator.tsx
+++ b/app/src/modules/simulation/process/processCreator.tsx
@@ -57,7 +57,7 @@
 //   pointActions: PointAction[][];
 //   pointTriggers: PointTrigger[][];
 //   speed: number;
-//   isplaying: boolean;
+//   isActive: boolean;
 // }
 
 // interface ProcessCreatorProps {
@@ -147,7 +147,7 @@
 //   pointActions: [],
 //   pointTriggers: [], // Added point triggers array
 //   speed: 1,
-//   isplaying: false,
+//   isActive: false,
 // });
 
 // // Enhanced connection checking function
@@ -283,7 +283,7 @@
 //         pointActions,
 //         pointTriggers,
 //         speed: processSpeed,
-//         isplaying: false,
+//         isActive: false,
 //       };
 //     },
 //     [scene]
@@ -410,7 +410,7 @@
 //             p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
 //           )
 //           .join(","),
-//         isplaying: false,
+//         isActive: false,
 //       }));
 //     }, [convertedPaths]);
 
@@ -459,6 +459,7 @@ import {
   ConveyorEventsSchema,
   VehicleEventsSchema,
 } from "../../../types/world/worldTypes";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 // Type definitions
 export interface PointAction {
@@ -495,7 +496,7 @@ export interface SimulationPath {
   points: PathPoint[];
   pathPosition: [number, number, number];
   speed?: number;
-  isplaying: boolean;
+  isActive: boolean;
 }
 
 export interface Process {
@@ -505,7 +506,7 @@ export interface Process {
   pointActions: PointAction[][];
   pointTriggers: PointTrigger[][];
   speed: number;
-  isplaying: boolean;
+  isActive: boolean;
 }
 
 interface ProcessCreatorProps {
@@ -538,13 +539,13 @@ function convertToSimulationPath(
         actions: Array.isArray(point.actions)
           ? point.actions.map(normalizeAction)
           : point.actions
-          ? [normalizeAction(point.actions)]
-          : [],
+            ? [normalizeAction(point.actions)]
+            : [],
         triggers: Array.isArray(point.triggers)
           ? point.triggers.map(normalizeTrigger)
           : point.triggers
-          ? [normalizeTrigger(point.triggers)]
-          : [],
+            ? [normalizeTrigger(point.triggers)]
+            : [],
         connections: {
           targets: point.connections.targets.map((target) => ({
             modelUUID: target.modelUUID,
@@ -556,7 +557,7 @@ function convertToSimulationPath(
         typeof path.speed === "string"
           ? parseFloat(path.speed) || 1
           : path.speed || 1,
-      isplaying: false, // Added missing property
+      isActive: false, // Added missing property
     };
   } else {
     // For vehicle paths, handle the case where triggers might not exist
@@ -570,8 +571,8 @@ function convertToSimulationPath(
           actions: Array.isArray(path.points.actions)
             ? path.points.actions.map(normalizeAction)
             : path.points.actions
-            ? [normalizeAction(path.points.actions)]
-            : [],
+              ? [normalizeAction(path.points.actions)]
+              : [],
           triggers: [],
           connections: {
             targets: path.points.connections.targets.map((target) => ({
@@ -582,7 +583,7 @@ function convertToSimulationPath(
       ],
       pathPosition: path.position,
       speed: path.points.speed || 1,
-      isplaying: false,
+      isActive: false,
     };
   }
 }
@@ -595,7 +596,7 @@ const createEmptyProcess = (): Process => ({
   pointActions: [],
   pointTriggers: [], // Added point triggers array
   speed: 1,
-  isplaying: false,
+  isActive: false,
 });
 
 // Enhanced connection checking function
@@ -731,7 +732,7 @@ export function useProcessCreation() {
         pointActions,
         pointTriggers,
         speed: processSpeed,
-        isplaying: false,
+        isActive: false,
       };
     },
     [scene]
@@ -824,6 +825,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
     const { createProcessesFromPaths } = useProcessCreation();
     const prevPathsRef = useRef<SimulationPath[]>([]);
     const prevProcessesRef = useRef<Process[]>([]);
+    const { isPlaying } = usePlayButtonStore();
 
     const convertedPaths = useMemo((): SimulationPath[] => {
       if (!simulationStates) return [];
@@ -858,7 +860,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
             p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
           )
           .join(","),
-        isplaying: false,
+        isActive: false,
       }));
     }, [convertedPaths]);
 
diff --git a/app/src/modules/simulation/process/types.ts b/app/src/modules/simulation/process/types.ts
index 086b620..6f935fc 100644
--- a/app/src/modules/simulation/process/types.ts
+++ b/app/src/modules/simulation/process/types.ts
@@ -39,7 +39,7 @@ export interface ProcessPath {
   pathRotation: number[];
   speed: number;
   type: "Conveyor" | "Vehicle";
-  isplaying: boolean
+  isActive: boolean
 }
 
 export interface ProcessData {
diff --git a/app/src/modules/simulation/process/useProcessAnimations.tsx b/app/src/modules/simulation/process/useProcessAnimations.tsx
index 7525c29..032d013 100644
--- a/app/src/modules/simulation/process/useProcessAnimations.tsx
+++ b/app/src/modules/simulation/process/useProcessAnimations.tsx
@@ -1,540 +1,609 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import {
-  ProcessData,
-  ProcessAnimationState,
-  SpawnedObject,
-  AnimationState,
-  ProcessPoint,
-  PointAction,
-  Trigger,
+    ProcessData,
+    ProcessAnimationState,
+    SpawnedObject,
+    AnimationState,
+    ProcessPoint,
+    PointAction,
+    Trigger,
 } from "./types";
 import {
-  useAnimationPlaySpeed,
-  usePauseButtonStore,
-  usePlayButtonStore,
-  useResetButtonStore,
+    useAnimationPlaySpeed,
+    usePauseButtonStore,
+    usePlayButtonStore,
+    useResetButtonStore,
 } from "../../../store/usePlayButtonStore";
 import { usePlayAgv } from "../../../store/store";
 
 // Enhanced ProcessAnimationState with trigger tracking
 interface EnhancedProcessAnimationState extends ProcessAnimationState {
-  triggerCounts: Record<string, number>;
-  triggerLogs: Array<{
-    timestamp: number;
-    pointId: string;
-    objectId: string;
-    triggerId: string;
-  }>;
+    triggerCounts: Record<string, number>;
+    triggerLogs: Array<{
+        timestamp: number;
+        pointId: string;
+        objectId: string;
+        triggerId: string;
+    }>;
 }
 
 interface ProcessContainerProps {
-  processes: ProcessData[];
-  setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
-  agvRef: any;
+    processes: ProcessData[];
+    setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
+    agvRef: any;
 }
 
 interface PlayAgvState {
-  playAgv: Record<string, any>;
-  setPlayAgv: (data: any) => void;
+    playAgv: Record<string, any>;
+    setPlayAgv: (data: any) => void;
 }
 
 export const useProcessAnimation = (
-  processes: ProcessData[],
-  setProcesses: React.Dispatch<React.SetStateAction<any[]>>,
-  agvRef: any
+    processes: ProcessData[],
+    setProcesses: React.Dispatch<React.SetStateAction<any[]>>,
+    agvRef: any
 ) => {
-  // State and refs initialization
-  const { isPlaying, setIsPlaying } = usePlayButtonStore();
-  const { isPaused, setIsPaused } = usePauseButtonStore();
-  const { isReset, setReset } = useResetButtonStore();
-  const debugRef = useRef<boolean>(false);
-  const clockRef = useRef<THREE.Clock>(new THREE.Clock());
-  const pauseTimeRef = useRef<number>(0);
-  const elapsedBeforePauseRef = useRef<number>(0);
-  const animationStatesRef = useRef<
-    Record<string, EnhancedProcessAnimationState>
-  >({});
-  const { speed } = useAnimationPlaySpeed();
-  const prevIsPlaying = useRef<boolean | null>(null);
-  const [internalResetFlag, setInternalResetFlag] = useState(false);
-  const [animationStates, setAnimationStates] = useState<
-    Record<string, EnhancedProcessAnimationState>
-  >({});
-  const speedRef = useRef<number>(speed);
-  const { PlayAgv, setPlayAgv } = usePlayAgv();
+    // State and refs initialization
+    const { isPlaying, setIsPlaying } = usePlayButtonStore();
+    const { isPaused, setIsPaused } = usePauseButtonStore();
+    const { isReset, setReset } = useResetButtonStore();
+    const debugRef = useRef<boolean>(false);
+    const clockRef = useRef<THREE.Clock>(new THREE.Clock());
+    const pauseTimeRef = useRef<number>(0);
+    const elapsedBeforePauseRef = useRef<number>(0);
+    const animationStatesRef = useRef<Record<string, EnhancedProcessAnimationState>>({});
+    const { speed } = useAnimationPlaySpeed();
+    const prevIsPlaying = useRef<boolean | null>(null);
+    const [internalResetFlag, setInternalResetFlag] = useState(false);
+    const [animationStates, setAnimationStates] = useState<Record<string, EnhancedProcessAnimationState>>({});
+    const speedRef = useRef<number>(speed);
+    const { PlayAgv, setPlayAgv } = usePlayAgv();
 
-  // Effect hooks
-  useEffect(() => {
-    speedRef.current = speed;
-  }, [speed]);
+    // Effect hooks
+    useEffect(() => {
+        speedRef.current = speed;
+    }, [speed]);
 
-  useEffect(() => {
-    if (prevIsPlaying.current !== null) {
-      setAnimationStates({});
-    }
-    prevIsPlaying.current = isPlaying;
-  }, [isPlaying]);
-
-  useEffect(() => {
-    animationStatesRef.current = animationStates;
-  }, [animationStates]);
-
-  // Reset handler
-  useEffect(() => {
-    if (isReset) {
-      setInternalResetFlag(true);
-      setIsPlaying(false);
-      setIsPaused(false);
-      setAnimationStates({});
-      animationStatesRef.current = {};
-      clockRef.current = new THREE.Clock();
-      elapsedBeforePauseRef.current = 0;
-      pauseTimeRef.current = 0;
-      setReset(false);
-      setTimeout(() => {
-        setInternalResetFlag(false);
-        setIsPlaying(true);
-      }, 0);
-    }
-  }, [isReset, setReset, setIsPlaying, setIsPaused]);
-
-  // Pause handler
-  useEffect(() => {
-    if (isPaused) {
-      pauseTimeRef.current = clockRef.current.getElapsedTime();
-    } else if (pauseTimeRef.current > 0) {
-      const pausedDuration =
-        clockRef.current.getElapsedTime() - pauseTimeRef.current;
-      elapsedBeforePauseRef.current += pausedDuration;
-    }
-  }, [isPaused]);
-
-  // Initialize animation states with trigger tracking
-  useEffect(() => {
-    if (isPlaying && !internalResetFlag) {
-      const newStates: Record<string, EnhancedProcessAnimationState> = {};
-
-      processes.forEach((process) => {
-        const triggerCounts: Record<string, number> = {};
-
-        // Initialize trigger counts for all On-Hit triggers
-        process.paths?.forEach((path) => {
-          path.points?.forEach((point) => {
-            point.triggers?.forEach((trigger: Trigger) => {
-              if (trigger.type === "On-Hit" && trigger.isUsed) {
-                triggerCounts[`${point.uuid}-${trigger.uuid}`] = 0;
-              }
-            });
-          });
-        });
-
-        newStates[process.id] = {
-          spawnedObjects: {},
-          nextSpawnTime: 0,
-          objectIdCounter: 0,
-          isProcessDelaying: false,
-          processDelayStartTime: 0,
-          processDelayDuration: 0,
-          triggerCounts,
-          triggerLogs: [],
-        };
-      });
-
-      setAnimationStates(newStates);
-      animationStatesRef.current = newStates;
-      clockRef.current.start();
-    }
-  }, [isPlaying, processes, internalResetFlag]);
-
-  // Helper functions
-  const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
-    for (const path of process.paths || []) {
-      for (const point of path.points || []) {
-        const spawnAction = point.actions?.find(
-          (a) => a.isUsed && a.type === "Spawn"
-        );
-        if (spawnAction) {
-          return point;
+    useEffect(() => {
+        if (prevIsPlaying.current !== null || !isPlaying) {
+            setAnimationStates({});
         }
-      }
-    }
-    return null;
-  };
+        prevIsPlaying.current = isPlaying;
+    }, [isPlaying]);
 
-  const findAnimationPathPoint = (
-    process: ProcessData,
-    spawnPoint: ProcessPoint
-  ): THREE.Vector3 => {
-    if (process.animationPath && process.animationPath.length > 0) {
-      let pointIndex = 0;
-      for (const path of process.paths || []) {
-        for (let i = 0; i < (path.points?.length || 0); i++) {
-          const point = path.points?.[i];
-          if (point && point.uuid === spawnPoint.uuid) {
-            if (process.animationPath[pointIndex]) {
-              const p = process.animationPath[pointIndex];
-              return new THREE.Vector3(p.x, p.y, p.z);
-            }
-          }
-          pointIndex++;
+    useEffect(() => {
+        animationStatesRef.current = animationStates;
+    }, [animationStates]);
+
+    // Reset handler
+    useEffect(() => {
+        if (isReset) {
+            setInternalResetFlag(true);
+            setIsPlaying(false);
+            setIsPaused(false);
+            setAnimationStates({});
+            animationStatesRef.current = {};
+            clockRef.current = new THREE.Clock();
+            elapsedBeforePauseRef.current = 0;
+            pauseTimeRef.current = 0;
+            setReset(false);
+            setTimeout(() => {
+                setInternalResetFlag(false);
+                setIsPlaying(true);
+            }, 0);
         }
-      }
-    }
-    return new THREE.Vector3(
-      spawnPoint.position[0],
-      spawnPoint.position[1],
-      spawnPoint.position[2]
-    );
-  };
+    }, [isReset, setReset, setIsPlaying, setIsPaused]);
 
-  // Optimized object creation
-  const createSpawnedObject = useCallback(
-    (
-      process: ProcessData,
-      currentTime: number,
-      materialType: string,
-      spawnPoint: ProcessPoint,
-      baseMaterials: Record<string, THREE.Material>
-    ): SpawnedObject => {
-      const processMaterials = {
-        ...baseMaterials,
-        ...(process.customMaterials || {}),
-      };
+    // Pause handler
+    useEffect(() => {
+        if (isPaused) {
+            pauseTimeRef.current = clockRef.current.getElapsedTime();
+        } else if (pauseTimeRef.current > 0) {
+            const pausedDuration = clockRef.current.getElapsedTime() - pauseTimeRef.current;
+            elapsedBeforePauseRef.current += pausedDuration;
+        }
+    }, [isPaused]);
 
-      const spawnPosition = findAnimationPathPoint(process, spawnPoint);
-      const material =
-        processMaterials[materialType as keyof typeof processMaterials] ||
-        baseMaterials.Default;
+    // Initialize animation states with trigger tracking
+    useEffect(() => {
+        if (isPlaying && !internalResetFlag) {
+            const newStates: Record<string, EnhancedProcessAnimationState> = {};
 
-      return {
-        ref: { current: null },
-        state: {
-          currentIndex: 0,
-          progress: 0,
-          isAnimating: true,
-          speed: process.speed || 1,
-          isDelaying: false,
-          delayStartTime: 0,
-          currentDelayDuration: 0,
-          delayComplete: false,
-          currentPathIndex: 0,
-        },
-        visible: true,
-        material: material,
-        currentMaterialType: materialType,
-        spawnTime: currentTime,
-        position: spawnPosition,
-      };
-    },
-    []
-  );
+            processes.forEach((process) => {
+                const triggerCounts: Record<string, number> = {};
 
-  // Material handling
-  const handleMaterialSwap = useCallback(
-    (
-      processId: string,
-      objectId: string,
-      materialType: string,
-      processes: ProcessData[],
-      baseMaterials: Record<string, THREE.Material>
-    ) => {
-      setAnimationStates((prev) => {
-        const processState = prev[processId];
-        if (!processState || !processState.spawnedObjects[objectId])
-          return prev;
+                // Initialize trigger counts for all On-Hit triggers
+                process.paths?.forEach((path) => {
+                    path.points?.forEach((point) => {
+                        point.triggers?.forEach((trigger: Trigger) => {
+                            if (trigger.type === "On-Hit" && trigger.isUsed) {
+                                triggerCounts[`${point.uuid}-${trigger.uuid}`] = 0;
+                            }
+                        });
+                    });
+                });
 
-        const process = processes.find((p) => p.id === processId);
-        if (!process) return prev;
-
-        const processMaterials = {
-          ...baseMaterials,
-          ...(process.customMaterials || {}),
-        };
-
-        const newMaterial =
-          processMaterials[materialType as keyof typeof processMaterials];
-        if (!newMaterial) return prev;
-
-        return {
-          ...prev,
-          [processId]: {
-            ...processState,
-            spawnedObjects: {
-              ...processState.spawnedObjects,
-              [objectId]: {
-                ...processState.spawnedObjects[objectId],
-                material: newMaterial,
-                currentMaterialType: materialType,
-              },
-            },
-          },
-        };
-      });
-    },
-    []
-  );
-
-  // Point action handler with trigger counting
-  const handlePointActions = useCallback(
-    (
-      processId: string,
-      objectId: string,
-      actions: PointAction[] = [],
-      currentTime: number,
-      processes: ProcessData[],
-      baseMaterials: Record<string, THREE.Material>
-    ): boolean => {
-      let shouldStopAnimation = false;
-
-      actions.forEach((action) => {
-        if (!action.isUsed) return;
-
-        switch (action.type) {
-          case "Delay":
-            setAnimationStates((prev) => {
-              const processState = prev[processId];
-              if (!processState || processState.isProcessDelaying) return prev;
-
-              const delayDuration =
-                typeof action.delay === "number"
-                  ? action.delay
-                  : parseFloat(action.delay as string) || 0;
-
-              if (delayDuration > 0) {
-                return {
-                  ...prev,
-                  [processId]: {
-                    ...processState,
-                    isProcessDelaying: true,
-                    processDelayStartTime: currentTime,
-                    processDelayDuration: delayDuration,
-                    spawnedObjects: {
-                      ...processState.spawnedObjects,
-                      [objectId]: {
-                        ...processState.spawnedObjects[objectId],
-                        state: {
-                          ...processState.spawnedObjects[objectId].state,
-                          isAnimating: false,
-                          isDelaying: true,
-                          delayStartTime: currentTime,
-                          currentDelayDuration: delayDuration,
-                          delayComplete: false,
-                        },
-                      },
-                    },
-                  },
+                newStates[process.id] = {
+                    spawnedObjects: {},
+                    nextSpawnTime: 0,
+                    objectIdCounter: 0,
+                    isProcessDelaying: false,
+                    processDelayStartTime: 0,
+                    processDelayDuration: 0,
+                    triggerCounts,
+                    triggerLogs: [],
                 };
-              }
-              return prev;
             });
-            shouldStopAnimation = true;
-            break;
 
-          case "Despawn":
-            setAnimationStates((prev) => {
-              const processState = prev[processId];
-              if (!processState) return prev;
-
-              const newSpawnedObjects = { ...processState.spawnedObjects };
-              delete newSpawnedObjects[objectId];
-
-              return {
-                ...prev,
-                [processId]: {
-                  ...processState,
-                  spawnedObjects: newSpawnedObjects,
-                },
-              };
-            });
-            shouldStopAnimation = true;
-            break;
-
-          case "Swap":
-            if (action.material) {
-              handleMaterialSwap(
-                processId,
-                objectId,
-                action.material,
-                processes,
-                baseMaterials
-              );
-            }
-            break;
-
-          default:
-            break;
+            setAnimationStates(newStates);
+            animationStatesRef.current = newStates;
+            clockRef.current.start();
         }
-      });
+    }, [isPlaying, processes, internalResetFlag]);
 
-      return shouldStopAnimation;
-    },
-    [handleMaterialSwap]
-  );
+    useEffect(() => {
+        if (isPlaying && !internalResetFlag) {
+            const newStates: Record<string, EnhancedProcessAnimationState> = {};
 
-  // Trigger counting system
-  const checkAndCountTriggers = useCallback(
-    (
-      processId: string,
-      objectId: string,
-      currentPointIndex: number,
-      processes: ProcessData[],
-      currentTime: number
-    ) => {
-      setAnimationStates((prev) => {
-        const processState = prev[processId];
-        if (!processState) return prev;
+            // Initialize AGVs for each process first
+            processes.forEach((process) => {
+                // Find all vehicle paths for this process
+                const vehiclePaths = process.paths?.filter(
+                    (path) => path.type === "Vehicle"
+                ) || [];
 
-        const process = processes.find((p) => p.id === processId);
-        if (!process) return prev;
+                // Initialize AGVs for each vehicle path
+                vehiclePaths.forEach((vehiclePath) => {
+                    if (vehiclePath.points?.length > 0) {
+                        const vehiclePoint = vehiclePath.points[0];
+                        const action = vehiclePoint.actions?.[0];
+                        const maxHitCount = action?.hitCount;
 
-        const point = getPointDataForAnimationIndex(process, currentPointIndex);
-        if (!point?.triggers) return prev;
+                        const vehicleId = vehiclePath.modeluuid;
+                        const processId = process.id;
 
-        const onHitTriggers = point.triggers.filter(
-          (t: Trigger) => t.type === "On-Hit" && t.isUsed
+                        // Check if this AGV already exists
+                        const existingAgv = agvRef.current.find(
+                            (v: any) => v.vehicleId === vehicleId && v.processId === processId
+                        );
+
+                        if (!existingAgv) {
+                            // Initialize the AGV in a stationed state
+                            agvRef.current.push({
+                                processId,
+                                vehicleId,
+                                maxHitCount: maxHitCount || 0,
+                                isActive: false,
+                                hitCount: 0,
+                                status: 'stationed',
+                                lastUpdated: 0
+                            });
+                        }
+                    }
+                });
+
+                // Then initialize trigger counts as before
+                const triggerCounts: Record<string, number> = {};
+                process.paths?.forEach((path) => {
+                    path.points?.forEach((point) => {
+                        point.triggers?.forEach((trigger: Trigger) => {
+                            if (trigger.type === "On-Hit" && trigger.isUsed) {
+                                triggerCounts[`${point.uuid}-${trigger.uuid}`] = 0;
+                            }
+                        });
+                    });
+                });
+
+                newStates[process.id] = {
+                    spawnedObjects: {},
+                    nextSpawnTime: 0,
+                    objectIdCounter: 0,
+                    isProcessDelaying: false,
+                    processDelayStartTime: 0,
+                    processDelayDuration: 0,
+                    triggerCounts,
+                    triggerLogs: [],
+                };
+            });
+
+            setAnimationStates(newStates);
+            animationStatesRef.current = newStates;
+            clockRef.current.start();
+        }
+    }, [isPlaying, processes, internalResetFlag]);
+
+    // Helper functions
+    const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
+        for (const path of process.paths || []) {
+            for (const point of path.points || []) {
+                const spawnAction = point.actions?.find(
+                    (a) => a.isUsed && a.type === "Spawn"
+                );
+                if (spawnAction) {
+                    return point;
+                }
+            }
+        }
+        return null;
+    };
+
+    const findAnimationPathPoint = (
+        process: ProcessData,
+        spawnPoint: ProcessPoint
+    ): THREE.Vector3 => {
+        if (process.animationPath && process.animationPath.length > 0) {
+            let pointIndex = 0;
+            for (const path of process.paths || []) {
+                for (let i = 0; i < (path.points?.length || 0); i++) {
+                    const point = path.points?.[i];
+                    if (point && point.uuid === spawnPoint.uuid) {
+                        if (process.animationPath[pointIndex]) {
+                            const p = process.animationPath[pointIndex];
+                            return new THREE.Vector3(p.x, p.y, p.z);
+                        }
+                    }
+                    pointIndex++;
+                }
+            }
+        }
+        return new THREE.Vector3(
+            spawnPoint.position[0],
+            spawnPoint.position[1],
+            spawnPoint.position[2]
         );
-        if (onHitTriggers.length === 0) return prev;
+    };
 
-        const newTriggerCounts = { ...processState.triggerCounts };
-        const newTriggerLogs = [...processState.triggerLogs];
-        let shouldLog = false;
+    // Optimized object creation
+    const createSpawnedObject = useCallback(
+        (
+            process: ProcessData,
+            currentTime: number,
+            materialType: string,
+            spawnPoint: ProcessPoint,
+            baseMaterials: Record<string, THREE.Material>
+        ): SpawnedObject => {
+            const processMaterials = {
+                ...baseMaterials,
+                ...(process.customMaterials || {}),
+            };
 
-        // Update counts for all valid triggers
-        onHitTriggers.forEach((trigger: Trigger) => {
-          const triggerKey = `${point.uuid}-${trigger.uuid}`;
-          newTriggerCounts[triggerKey] =
-            (newTriggerCounts[triggerKey] || 0) + 1;
-          shouldLog = true;
-          newTriggerLogs.push({
-            timestamp: currentTime,
-            pointId: point.uuid,
-            objectId,
-            triggerId: trigger.uuid,
-          });
-        });
+            const spawnPosition = findAnimationPathPoint(process, spawnPoint);
+            const material =
+                processMaterials[materialType as keyof typeof processMaterials] ||
+                baseMaterials.Default;
 
-        const processTotalHits = Object.values(newTriggerCounts).reduce(
-          (a, b) => a + b,
-          0
-        );
+            return {
+                ref: { current: null },
+                state: {
+                    currentIndex: 0,
+                    progress: 0,
+                    isAnimating: true,
+                    speed: process.speed || 1,
+                    isDelaying: false,
+                    delayStartTime: 0,
+                    currentDelayDuration: 0,
+                    delayComplete: false,
+                    currentPathIndex: 0,
+                },
+                visible: true,
+                material: material,
+                currentMaterialType: materialType,
+                spawnTime: currentTime,
+                position: spawnPosition,
+            };
+        },
+        []
+    );
 
-        if (shouldLog) {
-          const vehiclePaths = process.paths.filter(
-            (path) => path.type === "Vehicle"
-          );
+    // Material handling
+    const handleMaterialSwap = useCallback(
+        (
+            processId: string,
+            objectId: string,
+            materialType: string,
+            processes: ProcessData[],
+            baseMaterials: Record<string, THREE.Material>
+        ) => {
+            setAnimationStates((prev) => {
+                const processState = prev[processId];
+                if (!processState || !processState.spawnedObjects[objectId])
+                    return prev;
 
-          vehiclePaths.forEach((vehiclePath) => {
-            if (vehiclePath.points?.length > 0) {
-              const vehiclePoint = vehiclePath.points[0];
-              const action = vehiclePoint.actions?.[0];
-              let expectedHitCount = action?.hitCount;
+                const process = processes.find((p) => p.id === processId);
+                if (!process) return prev;
 
-              if (expectedHitCount !== undefined) {
-                const vehicleId = vehiclePath.modeluuid;
+                const processMaterials = {
+                    ...baseMaterials,
+                    ...(process.customMaterials || {}),
+                };
 
-                let vehicleEntry = agvRef.current.find(
-                  (v: any) =>
-                    v.vehicleId === vehicleId && v.processId === processId
+                const newMaterial =
+                    processMaterials[materialType as keyof typeof processMaterials];
+                if (!newMaterial) return prev;
+
+                return {
+                    ...prev,
+                    [processId]: {
+                        ...processState,
+                        spawnedObjects: {
+                            ...processState.spawnedObjects,
+                            [objectId]: {
+                                ...processState.spawnedObjects[objectId],
+                                material: newMaterial,
+                                currentMaterialType: materialType,
+                            },
+                        },
+                    },
+                };
+            });
+        },
+        []
+    );
+
+    // Point action handler with trigger counting
+    const handlePointActions = useCallback(
+        (
+            processId: string,
+            objectId: string,
+            actions: PointAction[] = [],
+            currentTime: number,
+            processes: ProcessData[],
+            baseMaterials: Record<string, THREE.Material>
+        ): boolean => {
+            let shouldStopAnimation = false;
+
+            actions.forEach((action) => {
+                if (!action.isUsed) return;
+
+                switch (action.type) {
+                    case "Delay":
+                        setAnimationStates((prev) => {
+                            const processState = prev[processId];
+                            if (!processState || processState.isProcessDelaying) return prev;
+
+                            const delayDuration =
+                                typeof action.delay === "number"
+                                    ? action.delay
+                                    : parseFloat(action.delay as string) || 0;
+
+                            if (delayDuration > 0) {
+                                return {
+                                    ...prev,
+                                    [processId]: {
+                                        ...processState,
+                                        isProcessDelaying: true,
+                                        processDelayStartTime: currentTime,
+                                        processDelayDuration: delayDuration,
+                                        spawnedObjects: {
+                                            ...processState.spawnedObjects,
+                                            [objectId]: {
+                                                ...processState.spawnedObjects[objectId],
+                                                state: {
+                                                    ...processState.spawnedObjects[objectId].state,
+                                                    isAnimating: false,
+                                                    isDelaying: true,
+                                                    delayStartTime: currentTime,
+                                                    currentDelayDuration: delayDuration,
+                                                    delayComplete: false,
+                                                },
+                                            },
+                                        },
+                                    },
+                                };
+                            }
+                            return prev;
+                        });
+                        shouldStopAnimation = true;
+                        break;
+
+                    case "Despawn":
+                        setAnimationStates((prev) => {
+                            const processState = prev[processId];
+                            if (!processState) return prev;
+
+                            const newSpawnedObjects = { ...processState.spawnedObjects };
+                            delete newSpawnedObjects[objectId];
+
+                            return {
+                                ...prev,
+                                [processId]: {
+                                    ...processState,
+                                    spawnedObjects: newSpawnedObjects,
+                                },
+                            };
+                        });
+                        shouldStopAnimation = true;
+                        break;
+
+                    case "Swap":
+                        if (action.material) {
+                            handleMaterialSwap(
+                                processId,
+                                objectId,
+                                action.material,
+                                processes,
+                                baseMaterials
+                            );
+                        }
+                        break;
+
+                    default:
+                        break;
+                }
+            });
+
+            return shouldStopAnimation;
+        },
+        [handleMaterialSwap]
+    );
+
+    // Trigger counting system
+    const checkAndCountTriggers = useCallback(
+        (
+            processId: string,
+            objectId: string,
+            currentPointIndex: number,
+            processes: ProcessData[],
+            currentTime: number
+        ) => {
+            setAnimationStates((prev) => {
+                const processState = prev[processId];
+                if (!processState) return prev;
+
+                const process = processes.find((p) => p.id === processId);
+                if (!process) return prev;
+
+                const point = getPointDataForAnimationIndex(process, currentPointIndex);
+                if (!point?.triggers) return prev;
+
+                const onHitTriggers = point.triggers.filter(
+                    (t: Trigger) => t.type === "On-Hit" && t.isUsed
+                );
+                if (onHitTriggers.length === 0) return prev;
+
+                let newTriggerCounts = { ...processState.triggerCounts };
+                const newTriggerLogs = [...processState.triggerLogs];
+                let shouldLog = false;
+
+                // Find all vehicle paths for this process
+                const vehiclePaths = process.paths.filter(
+                    (path) => path.type === "Vehicle"
                 );
 
-                if (!vehicleEntry) {
-                  vehicleEntry = {
-                    processId,
-                    vehicleId,
-                    expectedHitCount,
-                    isplaying: false,
-                    hitCount: 0, // Initialize hitCount
-                  };
-                  agvRef.current.push(vehicleEntry);
+                // Check if any vehicle is active for this process
+                const activeVehicles = vehiclePaths.filter(path => {
+                    const vehicleId = path.modeluuid;
+                    const vehicleEntry = agvRef.current.find(
+                        (v: any) => v.vehicleId === vehicleId && v.processId === processId
+                    );
+                    return vehicleEntry?.isActive;
+                });
+
+                // Only count triggers if no vehicles are active for this process
+                if (activeVehicles.length === 0) {
+                    onHitTriggers.forEach((trigger: Trigger) => {
+                        const triggerKey = `${point.uuid}-${trigger.uuid}`;
+                        newTriggerCounts[triggerKey] = (newTriggerCounts[triggerKey] || 0) + 1;
+                        shouldLog = true;
+                        newTriggerLogs.push({
+                            timestamp: currentTime,
+                            pointId: point.uuid,
+                            objectId,
+                            triggerId: trigger.uuid,
+                        });
+                    });
                 }
 
-                // Increment expectedHitCount if not playing
-                if (!vehicleEntry.isplaying) {
-                  vehicleEntry.expectedHitCount = processTotalHits;
+                let processTotalHits = Object.values(newTriggerCounts).reduce((a, b) => a + b, 0);
+
+                if (shouldLog) {
+                    vehiclePaths.forEach((vehiclePath) => {
+                        if (vehiclePath.points?.length > 0) {
+                            const vehiclePoint = vehiclePath.points[0];
+                            const action = vehiclePoint.actions?.[0];
+                            const maxHitCount = action?.hitCount;
+
+                            if (maxHitCount !== undefined) {
+                                const vehicleId = vehiclePath.modeluuid;
+                                let vehicleEntry = agvRef.current.find((v: any) => v.vehicleId === vehicleId && v.processId === processId);
+
+                                if (!vehicleEntry) {
+                                    vehicleEntry = {
+                                        processId,
+                                        vehicleId,
+                                        maxHitCount: maxHitCount,
+                                        isActive: false,
+                                        hitCount: 0,
+                                        status: 'stationed'
+                                    };
+                                    agvRef.current.push(vehicleEntry);
+                                }
+
+                                // if (!vehicleEntry.isActive && vehicleEntry.status === 'picking') {
+                                if (!vehicleEntry.isActive) {
+                                    vehicleEntry.hitCount = processTotalHits;
+                                    vehicleEntry.lastUpdated = currentTime;
+
+                                    if (vehicleEntry.hitCount >= vehicleEntry.maxHitCount) {
+                                        vehicleEntry.isActive = true;
+                                        newTriggerCounts = {};
+                                        processTotalHits = 0;
+                                    }
+                                }
+                            }
+                        }
+                    });
                 }
 
-                // Set vehicle's hitCount to the processTotalHits
-                vehicleEntry.hitCount = processTotalHits;
-                vehicleEntry.lastUpdated = currentTime;
+                return {
+                    ...prev,
+                    [processId]: {
+                        ...processState,
+                        triggerCounts: newTriggerCounts,
+                        triggerLogs: newTriggerLogs,
+                        totalHits: processTotalHits,
+                    },
+                };
+            });
+        },
+        []
+    );
 
-                // If hitCount matches expectedHitCount, set isplaying to true
-                if (vehicleEntry.hitCount >= vehicleEntry.expectedHitCount) {
-                  vehicleEntry.isplaying = true;
+    // Utility functions
+    const hasNonInheritActions = useCallback(
+        (actions: PointAction[] = []): boolean => {
+            return actions.some(
+                (action) => action.isUsed && action.type !== "Inherit"
+            );
+        },
+        []
+    );
+
+    const getPointDataForAnimationIndex = useCallback(
+        (process: ProcessData, index: number): ProcessPoint | null => {
+            if (!process.paths) return null;
+
+            let cumulativePoints = 0;
+            for (const path of process.paths) {
+                const pointCount = path.points?.length || 0;
+
+                if (index < cumulativePoints + pointCount) {
+                    const pointIndex = index - cumulativePoints;
+                    return path.points?.[pointIndex] || null;
                 }
-              }
+
+                cumulativePoints += pointCount;
             }
-          });
-        }
 
-        return {
-          ...prev,
-          [processId]: {
-            ...processState,
-            triggerCounts: newTriggerCounts,
-            triggerLogs: newTriggerLogs,
-            totalHits: processTotalHits,
-          },
-        };
-      });
-    },
-    []
-  );
+            return null;
+        },
+        []
+    );
 
-  // Utility functions
-  const hasNonInheritActions = useCallback(
-    (actions: PointAction[] = []): boolean => {
-      return actions.some(
-        (action) => action.isUsed && action.type !== "Inherit"
-      );
-    },
-    []
-  );
+    const getTriggerCounts = useCallback((processId: string) => {
+        return animationStatesRef.current[processId]?.triggerCounts || {};
+    }, []);
 
-  const getPointDataForAnimationIndex = useCallback(
-    (process: ProcessData, index: number): ProcessPoint | null => {
-      if (!process.paths) return null;
+    const getTriggerLogs = useCallback((processId: string) => {
+        return animationStatesRef.current[processId]?.triggerLogs || [];
+    }, []);
 
-      let cumulativePoints = 0;
-      for (const path of process.paths) {
-        const pointCount = path.points?.length || 0;
-
-        if (index < cumulativePoints + pointCount) {
-          const pointIndex = index - cumulativePoints;
-          return path.points?.[pointIndex] || null;
-        }
-
-        cumulativePoints += pointCount;
-      }
-
-      return null;
-    },
-    []
-  );
-
-  const getTriggerCounts = useCallback((processId: string) => {
-    return animationStatesRef.current[processId]?.triggerCounts || {};
-  }, []);
-
-  const getTriggerLogs = useCallback((processId: string) => {
-    return animationStatesRef.current[processId]?.triggerLogs || [];
-  }, []);
-
-  return {
-    animationStates,
-    setAnimationStates,
-    clockRef,
-    elapsedBeforePauseRef,
-    speedRef,
-    debugRef,
-    findSpawnPoint,
-    createSpawnedObject,
-    handlePointActions,
-    hasNonInheritActions,
-    getPointDataForAnimationIndex,
-    checkAndCountTriggers,
-    getTriggerCounts,
-    getTriggerLogs,
-    processes,
-  };
+    return {
+        animationStates,
+        setAnimationStates,
+        clockRef,
+        elapsedBeforePauseRef,
+        speedRef,
+        debugRef,
+        findSpawnPoint,
+        createSpawnedObject,
+        handlePointActions,
+        hasNonInheritActions,
+        getPointDataForAnimationIndex,
+        checkAndCountTriggers,
+        getTriggerCounts,
+        getTriggerLogs,
+        processes,
+    };
 };
diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx
index 5bcf7d1..0741b5f 100644
--- a/app/src/modules/simulation/simulation.tsx
+++ b/app/src/modules/simulation/simulation.tsx
@@ -15,7 +15,6 @@ import Agv from "../builder/agv/agv";
 function Simulation() {
   const { activeModule } = useModuleStore();
   const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
-  const { simulationStates, setSimulationStates } = useSimulationStates();
   const [processes, setProcesses] = useState<any[]>([]);
   const agvRef = useRef([]);
   const MaterialRef = useRef([]);

From 8f5837ec9fd13eff105d87e207b46022b2c384bf Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@hexrfactory.com>
Date: Fri, 11 Apr 2025 18:01:27 +0530
Subject: [PATCH 7/9] fixed floting and 3d widget buges

---
 app/.env                                      |  4 ++--
 .../3D-cards/cards/ProductionCapacity.tsx     |  6 ++++--
 .../3D-cards/cards/ReturnOfInvestment.tsx     |  6 ++++--
 .../layout/3D-cards/cards/StateWorking.tsx    |  6 ++++--
 .../layout/3D-cards/cards/Throughput.tsx      |  6 ++++--
 .../visualization/widgets/Widgets2D.tsx       |  5 ++++-
 .../IotInputCards/BarChartInput.tsx           |  9 ---------
 .../ui/componets/Dropped3dWidget.tsx          | 19 +++++++++++++++++--
 .../realTimeVis/charts/LineGraphComponent.tsx |  2 ++
 .../floating/TotalCardComponent.tsx           |  4 +++-
 app/src/store/useDroppedObjectsStore.ts       | 11 ++++++++++-
 app/src/store/useWidgetStore.ts               | 18 ++----------------
 12 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/app/.env b/app/.env
index 47176f6..c50d174 100644
--- a/app/.env
+++ b/app/.env
@@ -2,10 +2,10 @@
 PORT=8200 
 
 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
-REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.111:8000
+REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
 
 # Base URL for the server REST API, used for HTTP requests to the backend server.
-REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.111:5000
+REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
 
 # Base URL for the server marketplace, used for market place model blob.
 REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
index a6343ed..b56350a 100644
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -31,6 +31,7 @@ interface ProductionCapacityProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?: any,
   onContextMenu?: (event: React.MouseEvent) => void;
   // onPointerDown:any
 }
@@ -38,6 +39,7 @@ interface ProductionCapacityProps {
 const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -48,8 +50,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h");
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
index 3d5d291..86734f7 100644
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -44,11 +44,13 @@ interface ReturnOfInvestmentProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?: any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -59,8 +61,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h");
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
index 829d7bf..d6520ff 100644
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -11,11 +11,13 @@ interface StateWorkingProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?:any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 const StateWorking: React.FC<StateWorkingProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -26,8 +28,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h");
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [datas, setDatas] = useState<any>({});
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx
index a99d171..28437bf 100644
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -46,12 +46,14 @@ interface ThroughputProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?:any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 
 const Throughput: React.FC<ThroughputProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -62,8 +64,8 @@ const Throughput: React.FC<ThroughputProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h");
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
index c411ffd..9e6e65e 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -45,7 +45,10 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
           ),
           title,
           panel: "top",
-          data: sampleData,
+          Data: {
+            measurements:{},
+            duration:'1h'
+          },
         });
       }}
       onDragEnd={() => setDraggedAsset(null)}
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
index 7d55396..e5debde 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@@ -61,20 +61,11 @@ const BarChartInput = (props: Props) => {
 
   }, [selectedChartId.id]);
 
-  useEffect(() => {
-    setMeasurements(selections);
-    updateDuration(duration);
-    updateName(widgetName);
-    console.log('Initial set state');
-  }, []);
-
   // Sync Zustand state when component mounts
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
     updateName(widgetName);
-    console.log('change set state');
-    
   }, [selections, duration, widgetName]);
 
 
diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx
index 5dbdb5b..bba3013 100644
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -5,6 +5,7 @@ import {
     useSocketStore,
     useWidgetSubOption,
 } from "../../../store/store";
+import useChartStore from "../../../store/useChartStore";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
 import * as THREE from "three";
@@ -30,6 +31,7 @@ import {
     update3dWidget,
     update3dWidgetRotation,
 } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
+import { useWidgetStore } from "../../../store/useWidgetStore";
 type WidgetData = {
     id: string;
     type: string;
@@ -57,6 +59,8 @@ export default function Dropped3dWidgets() {
     const planeIntersect = useRef(new THREE.Vector3());
     const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
     const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+    const { setSelectedChartId } = useWidgetStore();
+    const { measurements, duration} = useChartStore();
 
     const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
     useEffect(() => {
@@ -240,8 +244,10 @@ export default function Dropped3dWidgets() {
                 const widgetToDuplicate = activeZoneWidgets.find(
                     (w: WidgetData) => w.id === rightClickSelected
                 );
+                console.log("3d widget to duplecate", widgetToDuplicate);
+
                 if (!widgetToDuplicate) return;
-                const newWidget: WidgetData = {
+                const newWidget: any = {
                     id: generateUniqueId(),
                     type: widgetToDuplicate.type,
                     position: [
@@ -250,6 +256,10 @@ export default function Dropped3dWidgets() {
                         widgetToDuplicate.position[2] + 0.5,
                     ],
                     rotation: widgetToDuplicate.rotation || [0, 0, 0],
+                    Data:{
+                        measurements: measurements,
+                        duration: duration
+                    },
                 };
                 const adding3dWidget = {
                     organization: organization,
@@ -497,8 +507,9 @@ export default function Dropped3dWidgets() {
     return (
         <>
             {activeZoneWidgets.map(
-                ({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
+                ({ id, type, position, Data, rotation = [0, 0, 0] }: any) => {
                     const handleRightClick = (event: React.MouseEvent, id: string) => {
+                        setSelectedChartId({ id: id, type: type })
                         event.preventDefault();
                         const canvasElement = document.getElementById(
                             "real-time-vis-canvas"
@@ -522,6 +533,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -533,6 +545,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -544,6 +557,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -555,6 +569,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
diff --git a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
index c7f7252..8d4d4e9 100644
--- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
@@ -160,6 +160,8 @@ const LineGraphComponent = ({
       try {
         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
         if (response.status === 200) {
+          console.log('line chart res',response);
+          
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
           setName(response.data.widgetName)
diff --git a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
index da03fce..56f70f4 100644
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -12,7 +12,7 @@ const TotalCardComponent = ({
 }: any) => {
 
     const [ progress, setProgress ] = useState<any>(0)
-    const [measurements, setmeasurements] = useState<any>({});
+    const [measurements, setmeasurements] = useState<any>(object?.Data?.measurements ? object.Data.measurements : {});
     const [duration, setDuration] = useState("1h")
     const [name, setName] = useState(object.header ? object.header : '')
     const email = localStorage.getItem("email") || "";
@@ -61,6 +61,8 @@ const TotalCardComponent = ({
           try {
             const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
             if (response.status === 200) {
+              console.log(response);
+              
               setmeasurements(response.data.Data.measurements)
               setDuration(response.data.Data.duration)
               setName(response.data.header)
diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts
index 8f0067e..ca39d9f 100644
--- a/app/src/store/useDroppedObjectsStore.ts
+++ b/app/src/store/useDroppedObjectsStore.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
 import { useSocketStore } from "./store";
+import useChartStore from "./useChartStore";
 
 type DroppedObject = {
   className: string;
@@ -96,7 +97,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
     const state = useDroppedObjectsStore.getState(); // Get the current state
     const zone = state.zones[zoneName];
     let socketState = useSocketStore.getState();
+    let iotData = useChartStore.getState();
     let visualizationSocket = socketState.visualizationSocket;
+    let iotMeasurements = iotData.flotingMeasurements;
+    let iotDuration = iotData.flotingDuration;
 
     if (!zone) return;
 
@@ -109,6 +113,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
     // Create a shallow copy of the object with a unique ID and slightly adjusted position
     const duplicatedObject: DroppedObject = {
       ...originalObject,
+      Data:{
+        measurements: iotMeasurements,
+        duration: iotDuration,
+      },
       id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
       position: {
         ...originalObject.position,
@@ -122,7 +130,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
             : originalObject.position.left,
       },
     };
-
+    console.log("duplicated object",duplicatedObject);
+    
     let duplicateFloatingWidget = {
       organization: organization,
       widget: duplicatedObject,
diff --git a/app/src/store/useWidgetStore.ts b/app/src/store/useWidgetStore.ts
index 047b57b..2d73c77 100644
--- a/app/src/store/useWidgetStore.ts
+++ b/app/src/store/useWidgetStore.ts
@@ -8,22 +8,8 @@ export interface Widget {
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
-  data: {
-    // Chart data
-    labels?: string[];
-    datasets?: Array<{
-      data: number[];
-      backgroundColor: string;
-      borderColor: string;
-      borderWidth: number;
-    }>;
-    // Progress card data
-    stocks?: Array<{
-      key: string;
-      value: number;
-      description: string;
-    }>;
-  };
+  data?: any;
+  Data?:any;
 }
 
 interface WidgetStore {

From 3eecf305416d472d173977c2aa70fda48cbb51a2 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 11 Apr 2025 18:08:53 +0530
Subject: [PATCH 8/9] added global speed for agv

---
 app/src/modules/builder/agv/agv.tsx                    | 9 +++++++--
 app/src/modules/builder/agv/pathNavigator.tsx          | 6 ++++--
 app/src/modules/simulation/process/processAnimator.tsx | 3 +--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/src/modules/builder/agv/agv.tsx b/app/src/modules/builder/agv/agv.tsx
index 60e76d8..c2e7783 100644
--- a/app/src/modules/builder/agv/agv.tsx
+++ b/app/src/modules/builder/agv/agv.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Line } from "@react-three/drei";
 import {
 	useNavMesh,
@@ -6,7 +6,7 @@ import {
 	useSimulationStates,
 } from "../../../store/store";
 import PathNavigator from "./pathNavigator";
-import { usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
 
 type PathPoints = {
 	modelUuid: string;
@@ -31,6 +31,10 @@ const Agv: React.FC<ProcessContainerProps> = ({
 	const { navMesh } = useNavMesh();
 	const { isPlaying } = usePlayButtonStore();
 	const { isReset, setReset } = useResetButtonStore();
+	const { speed } = useAnimationPlaySpeed();
+	const globalSpeed = useRef(1);
+
+	useEffect(() => { globalSpeed.current = speed }, [speed])
 
 	useEffect(() => {
 		if (!isPlaying || isReset) {
@@ -81,6 +85,7 @@ const Agv: React.FC<ProcessContainerProps> = ({
 						pathPoints={pair.points}
 						id={pair.modelUuid}
 						speed={pair.modelSpeed}
+						globalSpeed={globalSpeed.current}
 						bufferTime={pair.bufferTime}
 						hitCount={pair.hitCount}
 						processes={processes}
diff --git a/app/src/modules/builder/agv/pathNavigator.tsx b/app/src/modules/builder/agv/pathNavigator.tsx
index 018cf4f..9a6fae7 100644
--- a/app/src/modules/builder/agv/pathNavigator.tsx
+++ b/app/src/modules/builder/agv/pathNavigator.tsx
@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { NavMeshQuery } from "@recast-navigation/core";
 import { Line } from "@react-three/drei";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { usePlayAgv } from "../../../store/store";
 
 interface PathNavigatorProps {
@@ -11,6 +11,7 @@ interface PathNavigatorProps {
   pathPoints: any;
   id: string;
   speed: number;
+  globalSpeed: number,
   bufferTime: number;
   hitCount: number;
   processes: any[];
@@ -30,6 +31,7 @@ export default function PathNavigator({
   pathPoints,
   id,
   speed,
+  globalSpeed,
   bufferTime,
   hitCount,
   processes,
@@ -344,7 +346,7 @@ export default function PathNavigator({
   ): boolean {
     if (path.length < 2) return false;
 
-    progressRef.current += delta * speed;
+    progressRef.current += delta * (speed * globalSpeed);
     let covered = progressRef.current;
     let accumulated = 0;
     let index = 0;
diff --git a/app/src/modules/simulation/process/processAnimator.tsx b/app/src/modules/simulation/process/processAnimator.tsx
index 2ba5869..c1063c3 100644
--- a/app/src/modules/simulation/process/processAnimator.tsx
+++ b/app/src/modules/simulation/process/processAnimator.tsx
@@ -377,8 +377,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
 
             if (!isLastPoint) {
               const nextPoint = path[nextPointIdx];
-              const distance =
-                path[stateRef.currentIndex].distanceTo(nextPoint);
+              const distance = path[stateRef.currentIndex].distanceTo(nextPoint);
               const effectiveSpeed = stateRef.speed * speedRef.current;
               const movement = effectiveSpeed * delta;
 

From 4192cef089324f4a4549460893aa43ed855e782c Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@hexrfactory.com>
Date: Fri, 11 Apr 2025 18:11:20 +0530
Subject: [PATCH 9/9] resolved conflicts with bug fix

---
 app/package-lock.json | 48 ++++++++++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 8be748e..2c1f714 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -2020,7 +2020,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2032,7 +2032,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4135,6 +4135,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4246,25 +4266,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9007,7 +9027,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9884,7 +9904,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15247,7 +15267,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20715,7 +20735,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20758,7 +20778,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20770,7 +20790,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21266,7 +21286,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22325,7 +22345,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }