update state for throughput analysis

app/src/components/ui/analysis/ProductionCapacity.tsx

@@ -9,6 +9,7 @@ import {
 } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
+import { useMachineUptime } from "../../../store/store";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
@@ -19,12 +20,9 @@ const ThroughputSummary = () => {
     endTime: "09:00 AM",
   };
 
-  const throughputData = {
+  const { machineActiveTime } = useMachineUptime();
-    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
+
-    data: [5, 10, 8, 10, 12, 10],
+
-    totalThroughput: 1240,
-    assetUsage: 85,
-  };
 
   const energyConsumption = {
     energyConsumed: 456,
@@ -38,19 +36,7 @@ const ThroughputSummary = () => {
     { shift: 3, percentage: 30, color: "#7981F5" },
   ];
 
-  // Chart data configuration
+
-  const chartData = {
-    labels: throughputData.labels,
-    datasets: [
-      {
-        label: "Units/hour",
-        data: throughputData.data,
-        borderColor: "#B392F0",
-        tension: 0.4,
-        pointRadius: 0, // Hide points
-      },
-    ],
-  };
 
   const chartOptions = {
     responsive: true,
@@ -73,6 +59,35 @@ const ThroughputSummary = () => {
     },
   };
 
+  const assetUsage = 85;
+
+  // machineActiveTime => Throughput 
+  // shiftUtilization.length => Shifts per day
+  // 8 => Shift length
+  // assetUsage => Yield rate
+
+  const throughtputMachineData = machineActiveTime * shiftUtilization.length * 8
+
+  const throughputData = {
+    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
+    data: [5, 10, 8, 10, 12, 10],
+    totalThroughput: (throughtputMachineData) * assetUsage / 100,
+    assetUsage: assetUsage,
+  };
+
+  // Chart data configuration
+  const chartData = {
+    labels: throughputData.labels,
+    datasets: [
+      {
+        label: "Units/hour",
+        data: throughputData.data,
+        borderColor: "#B392F0",
+        tension: 0.4,
+        pointRadius: 0, // Hide points
+      },
+    ],
+  };
   const isLoading = false;
 
   return (

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useMachineCount, useMachineUptime } from "../../../store/store";
+import { useMachineCount, useMachineUptime, useMaterialCycle } from "../../../store/store";
 import {
   ProductionCapacityIcon,
   ThroughputSummaryIcon,
@@ -7,26 +7,34 @@ import {
 import SkeletonUI from "../../templates/SkeletonUI";
 
 const ProductionCapacity = ({
-  progressPercent = 50,
   avgProcessTime = "28.4 Secs/unit",
   machineUtilization = "78%",
   throughputValue = 128,
   timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
 }) => {
+
+
+  const { machineCount } = useMachineCount();
+  const { machineActiveTime } = useMachineUptime();
+  const { materialCycleTime } = useMaterialCycle();
+
+  const progressPercent = machineActiveTime;
+
+
   const totalBars = 6;
   const barsToFill = Math.floor((progressPercent / 100) * totalBars);
   const partialFillPercent =
     ((progressPercent / 100) * totalBars - barsToFill) * 100;
 
   const [isLoading, setIsLoading] = useState(false);
-  const { machineCount, setMachineCount } = useMachineCount()
+  // const { machineCount, setMachineCount } = useMachineCount()
-  const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
+  // const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
   useEffect(() => {
     setIsLoading(true);
     machineUtilization = machineActiveTime
     console.log('machineActiveTime: ', machineActiveTime);
   }, [machineActiveTime])
-  
+
   return (
     <div className="throughtputSummary-container analysis-card">
       <div className="throughtputSummary-wrapper analysis-card-wrapper">
@@ -45,7 +53,7 @@ const ProductionCapacity = ({
           <>
             <div className="process-container">
               <div className="throughput-value">
-                <span className="value">{throughputValue}</span> Units/hour
+                <span className="value">{machineActiveTime}</span> Units/hour
               </div>
 
               {/* Dynamic Progress Bar */}
@@ -68,11 +76,12 @@ const ProductionCapacity = ({
             <div className="metrics-section">
               <div className="metric">
                 <span className="label">Avg. Process Time</span>
-                <span className="value">{avgProcessTime}</span>
+                <span className="value">{materialCycleTime} secs/unit </span>
               </div>
               <div className="metric">
                 <span className="label">Machine Utilization</span>
-                <span className="value">{machineActiveTime}</span>
+                <span className="value">1</span>
+                {/* <span className="value">{machineActiveTime}</span> */}
               </div>
             </div>
           </>

app/src/modules/simulation/analysis/throughPut/throughPut.tsx

@@ -41,7 +41,7 @@
 //                             armBots.filter(arm => arm.modelUuid === item.modelUuid)
 //                                 .forEach(arm => {
 //                                     if (arm.activeTime >= 0) {
-//                                         console.log('armBot activeTime:', arm.activeTime);
+//                                         
 //                                     }
 //                                 });
 //                         } else if (item.type === "vehicle") {
@@ -109,7 +109,7 @@
 //     useEffect(() => {
 //         if (totalActiveTime > 0 && materialCycleTime > 0) {
 //             const avgProcessTime = (totalActiveTime / materialCycleTime) * 100;
-//             console.log('Throughput (%):', avgProcessTime.toFixed(2));
+//             
 //         }
 //     }, [totalActiveTime, materialCycleTime]);
 
@@ -143,7 +143,8 @@ export default function ThroughPut() {
     const { materials } = useMaterialStore();
 
     const { setMachineCount } = useMachineCount();
-    const { setMachineActiveTime } = useMachineUptime();
+    const { machineActiveTime, setMachineActiveTime } = useMachineUptime();
+    console.log('machineActiveTime: ', machineActiveTime);
     const { setMaterialCycleTime } = useMaterialCycle();
 
     const [totalActiveTime, setTotalActiveTime] = useState(0);
@@ -178,9 +179,9 @@ export default function ThroughPut() {
     useEffect(() => {
         let sum = 0;
 
-        console.log('armBots: ', armBots);
+
         armBots.forEach(arm => {
-            console.log('arm.activeTime: ', arm.activeTime);
+
             if (arm.activeTime > 0) sum += arm.activeTime;
         });
 
@@ -200,27 +201,33 @@ export default function ThroughPut() {
             if (storage.activeTime > 0) sum += 8; // static
         });
 
-        console.log('sum: ', sum);
+
 
         const avgProcessTime = 100 - 50; // static 50
+
         const machineUptime = (sum / avgProcessTime) * 100;
-        console.log('machineUptime: ', machineUptime.toFixed(2));
+        console.log('machineUptime: ', machineUptime);
+
+
 
         const machineCount = 3; // static
         const throughput = (3600 / avgProcessTime) * machineCount * (machineUptime / 100); // **IMPORTANT divide by 100 for %**
-        console.log('throughPutData: ', throughput.toFixed(2));
+
+
 
         setTotalActiveTime(sum);
-        setMachineActiveTime(sum);
+        setMachineActiveTime(machineUptime)
+        setMaterialCycleTime(throughput)
+        // setMachineActiveTime(sum);
         setThroughputData(throughput); // Save it properly here
 
     }, [armBots, vehicles, machines, conveyors, storageUnits, setMachineActiveTime]);
 
     // Just display throughput when ready
     useEffect(() => {
-        console.log('throughputData: ', throughputData);
+
         if (throughputData > 0) {
-            console.log('Final Throughput (units/hour): ', throughputData.toFixed(2));
+
         }
     }, [throughputData]);
 

app/src/modules/visualization/widgets/3d/cards/Throughput.tsx

@@ -83,6 +83,8 @@ const Throughput: React.FC<ThroughputProps> = ({
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
 
+
+
   // Sample data for the line graph
   const graphData: ChartData<"line"> = {
     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -222,16 +224,15 @@ const Throughput: React.FC<ThroughputProps> = ({
       transform
       zIndexRange={[1, 0]}
       sprite={false}
-      // style={{
+    // style={{
-      //   transform: transformStyle.transform,
+    //   transform: transformStyle.transform,
-      //   transformStyle: "preserve-3d",
+    //   transformStyle: "preserve-3d",
-      //   transition: "transform 0.1s ease-out",
+    //   transition: "transform 0.1s ease-out",
-      // }}
+    // }}
     >
       <div
-        className={`throughput-wrapper card ${
+        className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
-          selectedChartId?.id === id ? "activeChart" : ""
+          }`}
-        }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
       >

app/src/store/store.ts

@@ -4,448 +4,447 @@ import { create } from "zustand";
 import { io } from "socket.io-client";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
-    socket: null,
+  socket: null,
-    initializeSocket: (email: string, organization: string) => {
+  initializeSocket: (email: string, organization: string) => {
-        const existingSocket = get().socket;
+    const existingSocket = get().socket;
-        if (existingSocket) {
+    if (existingSocket) {
-            return;
+      return;
-        }
+    }
 
-        const socket = io(
+    const socket = io(
-            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
-            {
+      {
-                reconnection: true,
+        reconnection: true,
-                auth: { email, organization },
+        auth: { email, organization },
-            }
+      }
-        );
+    );
 
-        const visualizationSocket = io(
+    const visualizationSocket = io(
-            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
-            {
+      {
-                reconnection: true,
+        reconnection: true,
-                auth: { email, organization },
+        auth: { email, organization },
-            }
+      }
-        );
+    );
 
-        set({ socket, visualizationSocket });
+    set({ socket, visualizationSocket });
-    },
+  },
-    disconnectSocket: () => {
+  disconnectSocket: () => {
-        set((state: any) => {
+    set((state: any) => {
-            state.socket?.disconnect();
+      state.socket?.disconnect();
-            state.visualizationSocket?.disconnect();
+      state.visualizationSocket?.disconnect();
-            return { socket: null };
+      return { socket: null };
-        });
+    });
-    },
+  },
 }));
 
 export const useLoadingProgress = create<{
-    loadingProgress: number;
+  loadingProgress: number;
-    setLoadingProgress: (x: number) => void;
+  setLoadingProgress: (x: number) => void;
 }>((set) => ({
-    loadingProgress: 1,
+  loadingProgress: 1,
-    setLoadingProgress: (x: number) => set({ loadingProgress: x }),
+  setLoadingProgress: (x: number) => set({ loadingProgress: x }),
 }));
 
 export const useOrganization = create<any>((set: any) => ({
-    organization: "",
+  organization: "",
-    setOrganization: (x: any) => set(() => ({ organization: x })),
+  setOrganization: (x: any) => set(() => ({ organization: x })),
 }));
 
 export const useToggleView = create<any>((set: any) => ({
-    toggleView: false,
+  toggleView: false,
-    setToggleView: (x: any) => set(() => ({ toggleView: x })),
+  setToggleView: (x: any) => set(() => ({ toggleView: x })),
 }));
 
 export const useUpdateScene = create<any>((set: any) => ({
-    updateScene: false,
+  updateScene: false,
-    setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
+  setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
 }));
 
 export const useWalls = create<any>((set: any) => ({
-    walls: [],
+  walls: [],
-    setWalls: (x: any) => set(() => ({ walls: x })),
+  setWalls: (x: any) => set(() => ({ walls: x })),
 }));
 
 export const useRoomsState = create<any>((set: any) => ({
-    roomsState: [],
+  roomsState: [],
-    setRoomsState: (x: any) => set(() => ({ walls: x })),
+  setRoomsState: (x: any) => set(() => ({ walls: x })),
 }));
 
 export const useZones = create<any>((set: any) => ({
-    zones: [],
+  zones: [],
-    setZones: (callback: any) =>
+  setZones: (callback: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            zones: typeof callback === "function" ? callback(state.zones) : callback,
+      zones: typeof callback === "function" ? callback(state.zones) : callback,
-        })),
+    })),
 }));
 
 interface ZonePointsState {
-    zonePoints: THREE.Vector3[];
+  zonePoints: THREE.Vector3[];
-    setZonePoints: (points: THREE.Vector3[]) => void;
+  setZonePoints: (points: THREE.Vector3[]) => void;
 }
 
 export const useZonePoints = create<ZonePointsState>((set) => ({
-    zonePoints: [],
+  zonePoints: [],
-    setZonePoints: (points) => set({ zonePoints: points }),
+  setZonePoints: (points) => set({ zonePoints: points }),
 }));
 
 export const useSelectedItem = create<any>((set: any) => ({
-    selectedItem: { name: "", id: "", type: undefined },
+  selectedItem: { name: "", id: "", type: undefined },
-    setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
+  setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
 export const useNavMesh = create<any>((set: any) => ({
-    navMesh: null,
+  navMesh: null,
-    setNavMesh: (x: any) => set({ navMesh: x }),
+  setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
 export const useSelectedAssets = create<any>((set: any) => ({
-    selectedAssets: [],
+  selectedAssets: [],
-    setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
+  setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
 }));
 
 export const useLayers = create<any>((set: any) => ({
-    Layers: 1,
+  Layers: 1,
-    setLayers: (x: any) => set(() => ({ Layers: x })),
+  setLayers: (x: any) => set(() => ({ Layers: x })),
 }));
 
 export const useCamPosition = create<any>((set: any) => ({
-    camPosition: { x: undefined, y: undefined, z: undefined },
+  camPosition: { x: undefined, y: undefined, z: undefined },
-    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
+  setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
 }));
 
 export const useMenuVisible = create<any>((set: any) => ({
-    menuVisible: false,
+  menuVisible: false,
-    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
+  setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
 }));
 
 export const useDeleteTool = create<any>((set: any) => ({
-    deleteTool: false,
+  deleteTool: false,
-    setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
+  setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
 }));
 
 export const useToolMode = create<any>((set: any) => ({
-    toolMode: null,
+  toolMode: null,
-    setToolMode: (x: any) => set(() => ({ toolMode: x })),
+  setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
 export const useNewLines = create<any>((set: any) => ({
-    newLines: [],
+  newLines: [],
-    setNewLines: (x: any) => set(() => ({ newLines: x })),
+  setNewLines: (x: any) => set(() => ({ newLines: x })),
 }));
 
 export const useDeletedLines = create<any>((set: any) => ({
-    deletedLines: [],
+  deletedLines: [],
-    setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
+  setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
 }));
 
 export const useMovePoint = create<any>((set: any) => ({
-    movePoint: false,
+  movePoint: false,
-    setMovePoint: (x: any) => set(() => ({ movePoint: x })),
+  setMovePoint: (x: any) => set(() => ({ movePoint: x })),
 }));
 
 export const useTransformMode = create<any>((set: any) => ({
-    transformMode: null,
+  transformMode: null,
-    setTransformMode: (x: any) => set(() => ({ transformMode: x })),
+  setTransformMode: (x: any) => set(() => ({ transformMode: x })),
 }));
 
 export const useDeletePointOrLine = create<any>((set: any) => ({
-    deletePointOrLine: false,
+  deletePointOrLine: false,
-    setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+  setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
 }));
 
 export const useFloorItems = create<any>((set: any) => ({
-    floorItems: null,
+  floorItems: null,
-    setFloorItems: (callback: any) =>
+  setFloorItems: (callback: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            floorItems:
+      floorItems:
-                typeof callback === "function" ? callback(state.floorItems) : callback,
+        typeof callback === "function" ? callback(state.floorItems) : callback,
-        })),
+    })),
 }));
 
 export const useWallItems = create<any>((set: any) => ({
-    wallItems: [],
+  wallItems: [],
-    setWallItems: (callback: any) =>
+  setWallItems: (callback: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            wallItems:
+      wallItems:
-                typeof callback === "function" ? callback(state.wallItems) : callback,
+        typeof callback === "function" ? callback(state.wallItems) : callback,
-        })),
+    })),
 }));
 
 export const useSelectedWallItem = create<any>((set: any) => ({
-    selectedWallItem: null,
+  selectedWallItem: null,
-    setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
+  setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
 }));
 
 export const useSelectedFloorItem = create<any>((set: any) => ({
-    selectedFloorItem: null,
+  selectedFloorItem: null,
-    setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
+  setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
 }));
 
 export const useDeletableFloorItem = create<any>((set: any) => ({
-    deletableFloorItem: null,
+  deletableFloorItem: null,
-    setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
+  setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
 }));
 
 export const useSetScale = create<any>((set: any) => ({
-    scale: null,
+  scale: null,
-    setScale: (x: any) => set(() => ({ scale: x })),
+  setScale: (x: any) => set(() => ({ scale: x })),
 }));
 
 export const useRoofVisibility = create<any>((set: any) => ({
-    roofVisibility: false,
+  roofVisibility: false,
-    setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
+  setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
 }));
 
 export const useWallVisibility = create<any>((set: any) => ({
-    wallVisibility: false,
+  wallVisibility: false,
-    setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
+  setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
 }));
 
 export const useShadows = create<any>((set: any) => ({
-    shadows: false,
+  shadows: false,
-    setShadows: (x: any) => set(() => ({ shadows: x })),
+  setShadows: (x: any) => set(() => ({ shadows: x })),
 }));
 
 export const useSunPosition = create<any>((set: any) => ({
-    sunPosition: { x: undefined, y: undefined, z: undefined },
+  sunPosition: { x: undefined, y: undefined, z: undefined },
-    setSunPosition: (newSuntPosition: any) =>
+  setSunPosition: (newSuntPosition: any) =>
-        set({ sunPosition: newSuntPosition }),
+    set({ sunPosition: newSuntPosition }),
 }));
 
 export const useRemoveLayer = create<any>((set: any) => ({
-    removeLayer: false,
+  removeLayer: false,
-    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
+  setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
 }));
 
 export const useRemovedLayer = create<any>((set: any) => ({
-    removedLayer: null,
+  removedLayer: null,
-    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
+  setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
 }));
 
 export const useActiveLayer = create<any>((set: any) => ({
-    activeLayer: 1,
+  activeLayer: 1,
-    setActiveLayer: (x: any) => set({ activeLayer: x }),
+  setActiveLayer: (x: any) => set({ activeLayer: x }),
 }));
 
 interface RefTextUpdateState {
-    refTextupdate: number;
+  refTextupdate: number;
-    setRefTextUpdate: (
+  setRefTextUpdate: (
-        callback: (currentValue: number) => number | number
+    callback: (currentValue: number) => number | number
-    ) => void;
+  ) => void;
 }
 
 export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
-    refTextupdate: -1000,
+  refTextupdate: -1000,
-    setRefTextUpdate: (callback) =>
+  setRefTextUpdate: (callback) =>
-        set((state) => ({
+    set((state) => ({
-            refTextupdate:
+      refTextupdate:
-                typeof callback === "function"
+        typeof callback === "function"
-                    ? callback(state.refTextupdate)
+          ? callback(state.refTextupdate)
-                    : callback,
+          : callback,
-        })),
+    })),
 }));
 
 export const useResetCamera = create<any>((set: any) => ({
-    resetCamera: false,
+  resetCamera: false,
-    setResetCamera: (x: any) => set({ resetCamera: x }),
+  setResetCamera: (x: any) => set({ resetCamera: x }),
 }));
 
 export const useAddAction = create<any>((set: any) => ({
-    addAction: null,
+  addAction: null,
-    setAddAction: (x: any) => set({ addAction: x }),
+  setAddAction: (x: any) => set({ addAction: x }),
 }));
 
 export const useActiveTool = create<any>((set: any) => ({
-    activeTool: "cursor",
+  activeTool: "cursor",
-    setActiveTool: (x: any) => set({ activeTool: x }),
+  setActiveTool: (x: any) => set({ activeTool: x }),
 }));
 
 export const useActiveSubTool = create<any>((set: any) => ({
-    activeSubTool: "cursor",
+  activeSubTool: "cursor",
-    setActiveSubTool: (x: any) => set({ activeSubTool: x }),
+  setActiveSubTool: (x: any) => set({ activeSubTool: x }),
 }));
 
 export const use2DUndoRedo = create<any>((set: any) => ({
-    is2DUndoRedo: null,
+  is2DUndoRedo: null,
-    set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
+  set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
 }));
 
 export const useElevation = create<any>((set: any) => ({
-    elevation: 45,
+  elevation: 45,
-    setElevation: (x: any) => set({ elevation: x }),
+  setElevation: (x: any) => set({ elevation: x }),
 }));
 
 export const useAzimuth = create<any>((set: any) => ({
-    azimuth: -160,
+  azimuth: -160,
-    setAzimuth: (x: any) => set({ azimuth: x }),
+  setAzimuth: (x: any) => set({ azimuth: x }),
 }));
 
 export const useRenderDistance = create<any>((set: any) => ({
-    renderDistance: 40,
+  renderDistance: 40,
-    setRenderDistance: (x: any) => set({ renderDistance: x }),
+  setRenderDistance: (x: any) => set({ renderDistance: x }),
 }));
 
 export const useCamMode = create<any>((set: any) => ({
-    camMode: "ThirdPerson",
+  camMode: "ThirdPerson",
-    setCamMode: (x: any) => set({ camMode: x }),
+  setCamMode: (x: any) => set({ camMode: x }),
 }));
 
 export const useUserName = create<any>((set: any) => ({
-    userName: "",
+  userName: "",
-    setUserName: (x: any) => set({ userName: x }),
+  setUserName: (x: any) => set({ userName: x }),
 }));
 
 export const useObjectPosition = create<any>((set: any) => ({
-    objectPosition: { x: undefined, y: undefined, z: undefined },
+  objectPosition: { x: undefined, y: undefined, z: undefined },
-    setObjectPosition: (newObjectPosition: any) =>
+  setObjectPosition: (newObjectPosition: any) =>
-        set({ objectPosition: newObjectPosition }),
+    set({ objectPosition: newObjectPosition }),
 }));
 
 export const useObjectScale = create<any>((set: any) => ({
-    objectScale: { x: undefined, y: undefined, z: undefined },
+  objectScale: { x: undefined, y: undefined, z: undefined },
-    setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
+  setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
 }));
 
 export const useObjectRotation = create<any>((set: any) => ({
-    objectRotation: { x: undefined, y: undefined, z: undefined },
+  objectRotation: { x: undefined, y: undefined, z: undefined },
-    setObjectRotation: (newObjectRotation: any) =>
+  setObjectRotation: (newObjectRotation: any) =>
-        set({ objectRotation: newObjectRotation }),
+    set({ objectRotation: newObjectRotation }),
 }));
 
 export const useDrieTemp = create<any>((set: any) => ({
-    drieTemp: undefined,
+  drieTemp: undefined,
-    setDrieTemp: (x: any) => set({ drieTemp: x }),
+  setDrieTemp: (x: any) => set({ drieTemp: x }),
 }));
 
 export const useActiveUsers = create<any>((set: any) => ({
-    activeUsers: [],
+  activeUsers: [],
-    setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
+  setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
-        set((state: { activeUsers: any[] }) => ({
+    set((state: { activeUsers: any[] }) => ({
-            activeUsers:
+      activeUsers:
-                typeof callback === "function" ? callback(state.activeUsers) : callback,
+        typeof callback === "function" ? callback(state.activeUsers) : callback,
-        })),
+    })),
 }));
 
 export const useDrieUIValue = create<any>((set: any) => ({
-    drieUIValue: { touch: null, temperature: null, humidity: null },
+  drieUIValue: { touch: null, temperature: null, humidity: null },
 
-    setDrieUIValue: (x: any) =>
+  setDrieUIValue: (x: any) =>
-        set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
 
-    setTouch: (value: any) =>
+  setTouch: (value: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            drieUIValue: { ...state.drieUIValue, touch: value },
+      drieUIValue: { ...state.drieUIValue, touch: value },
-        })),
+    })),
-    setTemperature: (value: any) =>
+  setTemperature: (value: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            drieUIValue: { ...state.drieUIValue, temperature: value },
+      drieUIValue: { ...state.drieUIValue, temperature: value },
-        })),
+    })),
-    setHumidity: (value: any) =>
+  setHumidity: (value: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            drieUIValue: { ...state.drieUIValue, humidity: value },
+      drieUIValue: { ...state.drieUIValue, humidity: value },
-        })),
+    })),
 }));
 
 export const useStartSimulation = create<any>((set: any) => ({
-    startSimulation: false,
+  startSimulation: false,
-    setStartSimulation: (x: any) => set({ startSimulation: x }),
+  setStartSimulation: (x: any) => set({ startSimulation: x }),
 }));
 
 export const useEyeDropMode = create<any>((set: any) => ({
-    eyeDropMode: false,
+  eyeDropMode: false,
-    setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
+  setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
 }));
 
 export const useEditingPoint = create<any>((set: any) => ({
-    editingPoint: false,
+  editingPoint: false,
-    setEditingPoint: (x: any) => set({ editingPoint: x }),
+  setEditingPoint: (x: any) => set({ editingPoint: x }),
 }));
 
 export const usezoneTarget = create<any>((set: any) => ({
-    zoneTarget: [],
+  zoneTarget: [],
-    setZoneTarget: (x: any) => set({ zoneTarget: x }),
+  setZoneTarget: (x: any) => set({ zoneTarget: x }),
 }));
 
 export const usezonePosition = create<any>((set: any) => ({
-    zonePosition: [],
+  zonePosition: [],
-    setZonePosition: (x: any) => set({ zonePosition: x }),
+  setZonePosition: (x: any) => set({ zonePosition: x }),
 }));
 
 interface EditPositionState {
-    Edit: boolean;
+  Edit: boolean;
-    setEdit: (value: boolean) => void;
+  setEdit: (value: boolean) => void;
 }
 
 export const useEditPosition = create<EditPositionState>((set) => ({
-    Edit: false,
+  Edit: false,
-    setEdit: (value) => set({ Edit: value }),
+  setEdit: (value) => set({ Edit: value }),
 }));
 
 export const useAsset3dWidget = create<any>((set: any) => ({
-    widgetSelect: "",
+  widgetSelect: "",
-    setWidgetSelect: (x: any) => set({ widgetSelect: x }),
+  setWidgetSelect: (x: any) => set({ widgetSelect: x }),
 }));
 
 export const useWidgetSubOption = create<any>((set: any) => ({
-    widgetSubOption: "2D",
+  widgetSubOption: "2D",
-    setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
+  setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
 }));
 export const useLimitDistance = create<any>((set: any) => ({
-    limitDistance: true,
+  limitDistance: true,
-    setLimitDistance: (x: any) => set({ limitDistance: x }),
+  setLimitDistance: (x: any) => set({ limitDistance: x }),
 }));
 
 export const useTileDistance = create<any>((set: any) => ({
-    gridValue: { size: 300, divisions: 75 },
+  gridValue: { size: 300, divisions: 75 },
-    planeValue: { height: 300, width: 300 },
+  planeValue: { height: 300, width: 300 },
 
-    setGridValue: (value: any) =>
+  setGridValue: (value: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            gridValue: { ...state.gridValue, ...value },
+      gridValue: { ...state.gridValue, ...value },
-        })),
+    })),
 
-    setPlaneValue: (value: any) =>
+  setPlaneValue: (value: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            planeValue: { ...state.planeValue, ...value },
+      planeValue: { ...state.planeValue, ...value },
-        })),
+    })),
 }));
 
 export const usePlayAgv = create<any>((set, get) => ({
-    PlayAgv: [],
+  PlayAgv: [],
-    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
+  setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
-        set({ PlayAgv: updateFn(get().PlayAgv) }),
+    set({ PlayAgv: updateFn(get().PlayAgv) }),
 }));
 // Define the Asset type
 type Asset = {
-    id: string;
+  id: string;
-    name: string;
+  name: string;
-    position?: [number, number, number]; // Optional: 3D position
+  position?: [number, number, number]; // Optional: 3D position
-    rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
+  rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
 };
 
 // Zustand store type
 type ZoneAssetState = {
-    zoneAssetId: Asset | null;
+  zoneAssetId: Asset | null;
-    setZoneAssetId: (asset: Asset | null) => void;
+  setZoneAssetId: (asset: Asset | null) => void;
 };
 
 // Zustand store
 export const useZoneAssetId = create<ZoneAssetState>((set) => ({
-    zoneAssetId: null,
+  zoneAssetId: null,
-    setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
+  setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));
 
-
 export const useMachineCount = create<any>((set: any) => ({
-    machineCount: 0,
+  machineCount: 0,
-    setMachineCount: (x: any) => set({ activeLayer: x }),
+  setMachineCount: (x: any) => set({ machineCount: x }),
 }));
 export const useMachineUptime = create<any>((set: any) => ({
-    machineActiveTime: 0,
+  machineActiveTime: 0,
-    setMachineActiveTime: (x: any) => set({ activeLayer: x }),
+  setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
 }));
 export const useMaterialCycle = create<any>((set: any) => ({
-    materialCycleTime: 0,
+  materialCycleTime: 0,
-    setMaterialCycleTime: (x: any) => set({ activeLayer: x }),
+  setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
-}));
+}));