Added drag and drop widgets, and zone datas

app/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/package-lock.json
 /.pnp
 .pnp.js
 

app/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dnd-kit/sortable": "^10.0.0",
     "@react-three/csg": "^3.2.0",
     "@react-three/drei": "^9.113.0",
     "@react-three/fiber": "^8.17.7",

app/src/components/ui/componets/AddButtons.tsx

@@ -109,6 +109,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
+      console.log('updatedZone: ', updatedZone);
       setSelectedZone(updatedZone);
     } else {
       // If the panel is not active, activate it
@@ -121,6 +122,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
+      console.log('updatedZone: ', updatedZone);
       setSelectedZone(updatedZone);
     }
   };
@@ -147,9 +149,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
             <div className="extra-Bs">
               {/* Hide Panel */}
               <div
-                className={`icon ${
+                className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                  hiddenPanels.includes(side) ? "active" : ""
+                  }`}
-                }`}
                 title={
                   hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                 }
@@ -175,9 +176,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
               {/* Lock/Unlock Panel */}
               <div
-                className={`icon ${
+                className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                  }`}
-                }`}
                 title={
                   selectedZone.lockedPanels.includes(side)
                     ? "Unlock Panel"
@@ -185,7 +185,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 }
                 onClick={() => toggleLockPanel(side)}
               >
-                <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff":"#1D1E21"}/>
+                <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
               </div>
             </div>
           )}

app/src/components/ui/componets/DisplayZone.tsx

@@ -152,21 +152,29 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zoon-wrapper ${
+      className={`zoon-wrapper ${selectedZone.activeSides.includes("bottom") && "bottom"
-        selectedZone.activeSides.includes("bottom") && "bottom"
+        }`}
-      }`}
     >
       {Object.keys(zonesData).map((zoneName, index) => (
         <div
           key={index}
-          className={`zone ${
+          className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-            selectedZone.zoneName === zoneName ? "active" : ""
           }`}
           onClick={() => {
+            console.log('zoneName: ', zoneName);
+
             setSelectedZone({
               zoneName,
-              ...zonesData[zoneName],
+              activeSides: zonesData[zoneName].activeSides || [],
-            });
+              panelOrder: zonesData[zoneName].panelOrder || [],
+              lockedPanels: zonesData[zoneName].lockedPanels || [],
+              widgets: zonesData[zoneName].widgets || [],
+            })
+            // setSelectedZone({
+            //   zoneName,
+            //   ...zonesData[zoneName],
+            // });
+            console.log(selectedZone);
           }}
         >
           {zoneName}

app/src/components/ui/componets/DraggableWidget.tsx

@@ -10,11 +10,13 @@ import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphCompone
 export const DraggableWidget = ({
   widget,
   hiddenPanels, // Add this prop to track hidden panels
+  index, onReorder
 }: {
   widget: any;
   hiddenPanels: string[]; // Array of hidden panel names
+  index: number; onReorder: (fromIndex: number, toIndex: number) => void
 }) => {
-  console.log("widget: ", widget.type);
+
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
 
   const handlePointerDown = () => {
@@ -26,14 +28,39 @@ export const DraggableWidget = ({
   // Determine if the widget's panel is hidden
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
+  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
+    const toIndex = index; // The index of the widget where the drop occurred
+    if (fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+    }
+  };
+
+
   return (
     <>
       <div
+        draggable
         key={widget.id}
-        className={`chart-container ${
+        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
-          selectedChartId?.id === widget.id && "activeChart"
+          }`}
-        }`}
         onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
         style={{
           opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
           pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden

app/src/components/ui/componets/Panel.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { DraggableWidget } from "./DraggableWidget";
+import { arrayMove } from "@dnd-kit/sortable";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,9 +61,8 @@ const Panel: React.FC<PanelProps> = ({
         case "top":
         case "bottom":
           return {
-            width: `calc(100% - ${
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             height: `${panelSize - 5}px`,
             left: leftActive ? `${panelSize}px` : "0",
             right: rightActive ? `${panelSize}px` : "0",
@@ -72,9 +72,8 @@ const Panel: React.FC<PanelProps> = ({
         case "right":
           return {
             width: `${panelSize - 5}px`,
-            height: `calc(100% - ${
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -97,6 +96,8 @@ const Panel: React.FC<PanelProps> = ({
 
     if (currentWidgetsCount >= maxCapacity) return;
 
+    console.log('draggedAsset: ', draggedAsset);
+    console.log('panel: ', panel);
     addWidgetToPanel(draggedAsset, panel);
   };
 
@@ -163,6 +164,32 @@ const Panel: React.FC<PanelProps> = ({
     };
   }, [selectedZone.activeSides]);
 
+  const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
+    if (!selectedZone) return; // Ensure selectedZone is not null
+    console.log('selectedZone: ', selectedZone);
+
+    setSelectedZone((prev) => {
+      if (!prev) return prev; // Ensure prev is not null
+
+      // Filter widgets for the specified panel
+      const widgetsInPanel = prev.widgets.filter((w) => w.panel === panel);
+
+      // Reorder widgets within the same panel
+      const reorderedWidgets = arrayMove(widgetsInPanel, fromIndex, toIndex);
+
+      // Merge the reordered widgets back into the full list while preserving the order
+      const updatedWidgets = prev.widgets
+        .filter((widget) => widget.panel !== panel) // Keep widgets from other panels
+        .concat(reorderedWidgets); // Add the reordered widgets for the specified panel
+
+      return {
+        ...prev,
+        widgets: updatedWidgets,
+      };
+    });
+  };
+
+
   const { isPlaying } = usePlayButtonStore();
 
   return (
@@ -193,11 +220,15 @@ const Panel: React.FC<PanelProps> = ({
           >
             {selectedZone.widgets
               .filter((w) => w.panel === side)
-              .map((widget) => (
+              .map((widget, index) => (
                 <DraggableWidget
                   hiddenPanels={hiddenPanels}
                   widget={widget}
                   key={widget.id}
+                  index={index}
+                  onReorder={(fromIndex, toIndex) =>
+                    handleReorder(fromIndex, toIndex, side)
+                  }
                 />
               ))}
           </div>
@@ -208,3 +239,5 @@ const Panel: React.FC<PanelProps> = ({
 };
 
 export default Panel;
+
+

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -5,68 +5,91 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+
 
 type Side = "top" | "bottom" | "left" | "right";
 
-interface Widget {
+type FormattedZoneData = Record<
+  string,
+  {
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    zoneCentrePoint: number[];
+    widgets: Widget[];
+  }
+>;
+type Widget = {
   id: string;
   type: string;
   title: string;
   panel: Side;
   data: any;
-}
+};
+type Zone = {
+  zoneId: string;
+  zoneName: string;
+  points: number[][];
+  layer: number;
+};
 
 const RealTimeVisulization: React.FC = () => {
   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [zonesData, setZonesData] = useState<{
-    [key: string]: {
-      activeSides: Side[];
-      panelOrder: Side[];
-      lockedPanels: Side[];
-      widgets: Widget[];
-    };
-  }>({
-    "Manufacturing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Assembly unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Packing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Warehouse: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Inventory: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-  });
-
   const { isPlaying } = usePlayButtonStore();
-
+  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+
   useEffect(() => {
-    setZonesData((prev) => ({
+    async function GetZoneData() {
-      ...prev,
+      try {
-      [selectedZone.zoneName]: selectedZone,
+        const response: { data: Zone[] } | undefined = await getZonesApi(
-    }));
+          "hexrfactory"
+        );
+
+        if (!response || !response.data) {
+          return;
+        }
+        const formattedData = response?.data?.reduce<FormattedZoneData>(
+          (acc, zone) => {
+            acc[zone.zoneName] = {
+              activeSides: [],
+              panelOrder: [],
+              lockedPanels: [],
+              zoneCentrePoint: [],
+              widgets: [],
+            };
+            return acc;
+          },
+          {}
+        );
+        setZonesData(formattedData);
+      } catch (error) { }
+    }
+    GetZoneData();
+  }, []);
+
+  useEffect(() => {
+
+    console.log('zonesData: ', zonesData);
+  }, [zonesData]);
+
+  useEffect(() => {
+    setZonesData((prev) => {
+      if (!selectedZone) return prev;
+
+      return {
+        ...prev,
+        [selectedZone.zoneName]: {
+          ...prev[selectedZone.zoneName], // Keep existing properties
+          activeSides: selectedZone.activeSides || [],
+          panelOrder: selectedZone.panelOrder || [],
+          lockedPanels: selectedZone.lockedPanels || [],
+          widgets: selectedZone.widgets || [],
+        },
+      };
+    });
   }, [selectedZone]);
 
   return (

app/src/components/ui/list/DropDownList.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import List from "./List";
 import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
+import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -33,6 +34,19 @@ const DropDownList: React.FC<DropDownListProps> = ({
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
+  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+
+  useEffect(() => {
+    async function GetZoneData() {
+      const response = await getZonesApi("hexrfactory")
+      console.log('response: ', response.data);
+      setZoneDataList([{ id: "1", name: "zone1" },
+      { id: "2", name: "Zone 2" },])
+    }
+
+    GetZoneData()
+
+  }, [])
 
   return (
     <div className="dropdown-list-container">
@@ -79,7 +93,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
                 value="Zones"
                 showKebabMenu={false}
                 showAddIcon={false}
-                items={[]}
+                items={zoneDataList}
               />
             </>
           )}

app/src/components/ui/list/List.tsx

@@ -8,6 +8,7 @@ interface ListProps {
 }
 
 const List: React.FC<ListProps> = ({ items = [] }) => {
+  console.log('items: ', items);
   return (
     <>
       {items.length > 0 ? (

app/src/services/realTimeVisulization/zoneData/getZones.ts

@@ -0,0 +1,25 @@
+let url_Backend_dwinzo = `http://185.100.212.76:5000`;
+
+export const getZonesApi = async (organization: string) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/v2/findZones/${organization}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        // if (!response.ok) {
+        //     throw new Error("Failed to get Zones");
+        // }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new Error(error.message);
+        } else {
+            throw new Error("An unknown error occurred");
+        }
+    }
+};

app/src/store/useZoneStore.ts

@@ -25,7 +25,7 @@ interface SelectedZoneStore {
 
 export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
   selectedZone: {
-    zoneName: "Manufacturing unit",
+    zoneName: "",
     activeSides: [],
     panelOrder: [],
     lockedPanels: [],