Merge conflicts remote-tracking branch 'origin/main' into ui

2025-03-27 16:16:31 +05:30
parent 49ea1b1ff2 c9d3287ad6
commit a906d9a60b
37 changed files with 1640 additions and 758 deletions
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -4,6 +4,7 @@ import {
  EyeIcon,
  LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
+import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
 import { AddIcon } from "../../icons/ExportCommonIcons";

 // Define the type for `Side`
@@ -16,6 +17,9 @@ interface ButtonsProps {
    activeSides: Side[];
    panelOrder: Side[];
    lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[];
    widgets: {
      id: string;
      type: string;
@@ -30,6 +34,9 @@ interface ButtonsProps {
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
      widgets: {
        id: string;
        type: string;
@@ -109,7 +116,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
        panelOrder: newActiveSides,
      };

-      // Update the selectedZone state
+      // Delete the selectedZone state
      console.log("updatedZone: ", updatedZone);
      setSelectedZone(updatedZone);
    } else {
@@ -121,6 +128,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
        activeSides: newActiveSides,
        panelOrder: newActiveSides,
      };
+      const email = localStorage.getItem("email");
+      const organization = email!.split("@")[1].split(".")[0];
+      // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
+      // console.log('response: ', response);

      // Update the selectedZone state
      console.log("updatedZone: ", updatedZone);
@@ -129,77 +140,80 @@ const AddButtons: React.FC<ButtonsProps> = ({
  };

  return (
-    <div>
-      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
-        <div key={side} className={`side-button-container ${side}`}>
-          <button
-            className={`side-button ${side}${
-              selectedZone.activeSides.includes(side) ? " active" : ""
-            }`}
-            onClick={() => handlePlusButtonClick(side)}
-            title={
-              selectedZone.activeSides.includes(side)
-                ? `Remove all items and close ${side} panel`
-                : `Activate ${side} panel`
-            }
-          >
-            <div className="add-icon">
-              <AddIcon />
-            </div>
-          </button>
-
-          {/* Extra Buttons */}
-          {selectedZone.activeSides.includes(side) && (
-            <div className="extra-Bs">
-              {/* Hide Panel */}
-              <div
-                className={`icon ${
-                  hiddenPanels.includes(side) ? "active" : ""
-                }`}
-                title={
-                  hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
-                }
-                onClick={() => toggleVisibility(side)}
-              >
-                <EyeIcon
-                  fill={hiddenPanels.includes(side) ? "white" : "#1D1E21"}
-                />
+    <>
+      <div>
+        {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+          <div key={side} className={`side-button-container ${side}`}>
+            {/* "+" Button */}
+            <button
+              className={`side-button ${side}${
+                selectedZone.activeSides.includes(side) ? " active" : ""
+              }`}
+              onClick={() => handlePlusButtonClick(side)}
+              title={
+                selectedZone.activeSides.includes(side)
+                  ? `Remove all items and close ${side} panel`
+                  : `Activate ${side} panel`
+              }
+            >
+              <div className="add-icon">
+                <AddIcon />
              </div>
+            </button>

-              {/* Clean Panel */}
-              <div
-                className="icon"
-                title="Clean Panel"
-                onClick={() => cleanPanel(side)}
-              >
-                <CleanPannel />
-              </div>
-
-              {/* Lock/Unlock Panel */}
-              <div
-                className={`icon ${
-                  selectedZone.lockedPanels.includes(side) ? "active" : ""
-                }`}
-                title={
-                  selectedZone.lockedPanels.includes(side)
-                    ? "Unlock Panel"
-                    : "Lock Panel"
-                }
-                onClick={() => toggleLockPanel(side)}
-              >
-                <LockIcon
-                  fill={
-                    selectedZone.lockedPanels.includes(side)
-                      ? "#ffffff"
-                      : "#1D1E21"
+            {/* Extra Buttons */}
+            {selectedZone.activeSides.includes(side) && (
+              <div className="extra-Bs">
+                {/* Hide Panel */}
+                <div
+                  className={`icon ${
+                    hiddenPanels.includes(side) ? "active" : ""
+                  }`}
+                  title={
+                    hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                  }
-                />
+                  onClick={() => toggleVisibility(side)}
+                >
+                  <EyeIcon
+                    fill={hiddenPanels.includes(side) ? "var(--primary-color)" : "var(--text-color)"}
+                  />
+                </div>
+
+                {/* Clean Panel */}
+                <div
+                  className="icon"
+                  title="Clean Panel"
+                  onClick={() => cleanPanel(side)}
+                >
+                  <CleanPannel />
+                </div>
+
+                {/* Lock/Unlock Panel */}
+                <div
+                  className={`icon ${
+                    selectedZone.lockedPanels.includes(side) ? "active" : ""
+                  }`}
+                  title={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "Unlock Panel"
+                      : "Lock Panel"
+                  }
+                  onClick={() => toggleLockPanel(side)}
+                >
+                  <LockIcon
+                    fill={
+                      selectedZone.lockedPanels.includes(side)
+                        ? "var(--primary-color)"
+                        : "var(--text-color)"
+                    }
+                  />
+                </div>
              </div>
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </>
  );
 };

--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -12,6 +12,9 @@ interface DisplayZoneProps {
      panelOrder: Side[];
      lockedPanels: Side[];
      widgets: Widget[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
    };
  };
  selectedZone: {
@@ -19,6 +22,9 @@ interface DisplayZoneProps {
    activeSides: Side[];
    panelOrder: Side[];
    lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[];
    widgets: {
      id: string;
      type: string;
@@ -33,6 +39,9 @@ interface DisplayZoneProps {
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
      widgets: {
        id: string;
        type: string;
@@ -66,10 +75,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      const canScrollRight =
        container.scrollLeft + container.clientWidth < container.scrollWidth;

-      console.log("isOverflowing:", isOverflowing);
-      console.log("canScrollLeft:", canScrollLeft);
-      console.log("canScrollRight:", canScrollRight);
-
      setShowLeftArrow(isOverflowing && canScrollLeft);
      setShowRightArrow(isOverflowing && canScrollRight);
    }
@@ -135,11 +140,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  };

  return (
-    <div
-      className={`zone-wrapper ${
-        selectedZone.activeSides.includes("bottom") && "bottom"
-      }`}
-    >
+    <div className="zone-wrapper">
      {/* Left Arrow */}
      {showLeftArrow && (
        <button className="arrow left-arrow" onClick={handleScrollLeft}>
@@ -148,12 +149,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      )}

      {/* Zones Wrapper */}
-      <div
-        ref={containerRef}
-        className={`zones-wrapper ${
-          selectedZone.activeSides.includes("bottom") && "bottom"
-        }`}
-      >
+      <div ref={containerRef} className="zones-wrapper">
        {Object.keys(zonesData).map((zoneName, index) => (
          <div
            key={index}
@@ -168,6 +164,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
                panelOrder: zonesData[zoneName].panelOrder || [],
                lockedPanels: zonesData[zoneName].lockedPanels || [],
                widgets: zonesData[zoneName].widgets || [],
+                zoneId: zonesData[zoneName]?.zoneId || "",
+                zoneViewPortTarget:
+                  zonesData[zoneName].zoneViewPortTarget || [],
+                zoneViewPortPosition:
+                  zonesData[zoneName].zoneViewPortPosition || [],
              });
            }}
          >
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -45,9 +45,19 @@ export const DraggableWidget = ({
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
-      widgets: Widget[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
+      widgets: {
+        id: string;
+        type: string;
+        title: string;
+        panel: Side;
+        data: any;
+      }[];
    }>
  >;
+
  widget: any;
  hiddenPanels: string[];
  index: number;
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -0,0 +1,89 @@
+// import { useState } from "react";
+// import { useThree } from "@react-three/fiber";
+// import * as THREE from "three";
+
+
+
+// const DroppedObjects = () => {
+//   const { camera } = useThree(); // Now inside Canvas ✅
+//   const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
+
+//   // Function to convert drop event into 3D position
+//   const handleDrop = (event: DragEvent) => {
+//     event.preventDefault();
+
+//     const data = event.dataTransfer?.getData("text/plain");
+//     if (!data) return;
+
+//     try {
+//       const cardData = JSON.parse(data);
+//       if (!cardData.className.includes("floating total-card")) {
+//         console.log("Drop rejected: Incorrect element.");
+//         return;
+//       }
+
+//       // Convert 2D drop position to 3D world coordinates
+//       const x = (event.clientX / window.innerWidth) * 2 - 1;
+//       const y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+//       // Raycasting to determine the drop position in 3D
+//       const raycaster = new THREE.Raycaster();
+//       const mouseVector = new THREE.Vector2(x, y);
+//       raycaster.setFromCamera(mouseVector, camera);
+
+//       // Intersect with a ground plane (assume y = 0)
+//       const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+//       const intersection = new THREE.Vector3();
+//       raycaster.ray.intersectPlane(groundPlane, intersection);
+
+//       console.log("Spawn Object at:", intersection);
+
+//       // Add the dropped object to the scene state
+//       setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+//     } catch (error) {
+//       console.error("Invalid data:", error);
+//     }
+//   };
+
+//   return (
+//     <group>
+//       {/* Render dropped objects as green boxes */}
+//       {objects.map((obj) => (
+//         <mesh key={obj.id} position={obj.position}>
+//           <boxGeometry args={[1, 1, 1]} />
+//           <meshStandardMaterial color="green" />
+//         </mesh>
+//       ))}
+//     </group>
+//   );
+// };
+
+import { Html } from "@react-three/drei";
+import { useDroppedObjectsStore } from "../../../store/store";
+
+
+const DroppedObjects: React.FC = () => {
+  const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
+  console.log('objects: ', objects);
+
+  return (
+    <>
+      {objects.map((obj, index) => (
+        <group key={index} position={[Math.random() * 5, Math.random() * 5, 0]}>
+          <Html wrapperClass={obj.className}>
+            <div style={{ padding: "10px", background: "#fff", borderRadius: "6px" }}>
+              <div className="header">{obj.header}</div>
+              <div className="data-values">
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+          </Html>
+        </group>
+      ))}
+    </>
+  );
+};
+
+export default DroppedObjects;
+
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -20,6 +20,9 @@ interface PanelProps {
    activeSides: Side[];
    panelOrder: Side[];
    lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
    widgets: Widget[];
  };
  setSelectedZone: React.Dispatch<
@@ -28,6 +31,9 @@ interface PanelProps {
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[]
      widgets: Widget[];
    }>
  >;
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -6,7 +6,9 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
-import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
+

 type Side = "top" | "bottom" | "left" | "right";

@@ -16,7 +18,9 @@ type FormattedZoneData = Record<
    activeSides: Side[];
    panelOrder: Side[];
    lockedPanels: Side[];
-    zoneCentrePoint: number[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
    widgets: Widget[];
  }
 >;
@@ -27,137 +31,39 @@ type Widget = {
  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 { isPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
-
-  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: [],
-    },
-    "Inventory 1": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 2": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 3": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 4": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 5": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 6": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 7": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-  });
+  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
+  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zones } = useZones()

  useEffect(() => {
-    async function GetZoneData() {
-      try {
-        const response: { data: Zone[] } | undefined = await getZonesApi(
-          "hexrfactory"
-        );
+    const data = Array.isArray(zones) ? zones : [];

-        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();
-  }, []);
+    const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
+      acc[zone.zoneName] = {
+        activeSides: [],
+        panelOrder: [],
+        lockedPanels: [],
+        zoneId: zone.zoneId,
+        zoneViewPortTarget: zone.viewPortCenter,
+        zoneViewPortPosition: zone.viewPortposition,
+        widgets: [],
+      };
+      return acc;
+    }, {});

-  useEffect(() => {}, [zonesData]);
+    setZonesData(formattedData);
+  }, [zones]);

  useEffect(() => {
    setZonesData((prev) => {
      if (!selectedZone) return prev;
-
      return {
        ...prev,
        [selectedZone.zoneName]: {
@@ -165,12 +71,46 @@ const RealTimeVisulization: React.FC = () => {
          activeSides: selectedZone.activeSides || [],
          panelOrder: selectedZone.panelOrder || [],
          lockedPanels: selectedZone.lockedPanels || [],
+          zoneId: selectedZone.zoneId || "",
+          zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
+          zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
          widgets: selectedZone.widgets || [],
        },
      };
    });
  }, [selectedZone]);

+  // const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+  //   console.log("Drop event fired! ✅");
+  //   event.preventDefault();
+
+  //   const data = event.dataTransfer.getData("text/plain");
+  //   if (!data) {
+  //     console.log("❌ No data received on drop!");
+  //     return;
+  //   }
+
+  //   try {
+  //     const droppedData = JSON.parse(data);
+  //     console.log("✅ Dropped Data:", droppedData);
+
+  //     console.log('droppedData: ', droppedData);
+  //     setDroppedObjects((prev) => [...prev, droppedData]); // ✅ Add to state
+  //     console.log(droppedObjects);
+  //   } catch (error) {
+  //     console.error("❌ Error parsing dropped data:", error);
+  //   }
+  // };
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
+
+    if (data) {
+      const droppedData = JSON.parse(data);
+      useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
+    }
+  };
+
  return (
    <div
      ref={containerRef}
@@ -190,7 +130,10 @@ const RealTimeVisulization: React.FC = () => {
          borderRadius:
            isPlaying || activeModule !== "visualization" ? "" : "6px",
        }}
+        onDrop={(event) => handleDrop(event)}
+        onDragOver={(event) => event.preventDefault()}
      >
+      
        <Scene />
      </div>
      {activeModule === "visualization" && (
@@ -201,7 +144,7 @@ const RealTimeVisulization: React.FC = () => {
            setSelectedZone={setSelectedZone}
          />

-          {!isPlaying && (
+          {!isPlaying && selectedZone?.zoneName !== "" && (
            <AddButtons
              hiddenPanels={hiddenPanels}
              setHiddenPanels={setHiddenPanels}
--- a/app/src/components/ui/componets/zoneCameraTarget.tsx
+++ b/app/src/components/ui/componets/zoneCameraTarget.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
+
+export default function ZoneCentreTarget() {
+    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
+    const sphereRef = useRef<THREE.Mesh>(null);
+    const { camera, controls }: any = useThree();
+    const { zonePosition, setZonePosition } = usezonePosition();
+    const { zoneTarget, setZoneTarget } = usezoneTarget();
+    const { Edit, setEdit } = useEditPosition();
+
+
+    useEffect(() => {
+        if (
+            selectedZone.zoneViewPortTarget &&
+            JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget)
+        ) {
+            setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
+        }
+    }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
+
+    const centrePoint = useMemo(() => {
+        if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+        return previousZoneCentre.map((value, index) =>
+            (value + selectedZone.zoneViewPortTarget[index]) / 2
+        );
+    }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+    useEffect(() => {
+        if (selectedZone.zoneName !== "") {
+            if (sphereRef.current) {
+                sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
+            }
+            if (centrePoint) {
+
+                if (centrePoint.length > 0) {
+
+                    let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+                    let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+                    const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+                    const worldUp = new THREE.Vector3(0, 0, 1);
+                    const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+                    const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+                    const offsetPosition = up.clone().multiplyScalar(20);
+
+                    camPosition.add(offsetPosition);
+
+
+                    const setCam = async () => {
+                        controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true);
+                        setTimeout(() => {
+                            controls?.setLookAt(
+                                ...camPosition.toArray(),
+                                selectedZone.zoneViewPortTarget[0],
+                                selectedZone.zoneViewPortTarget[1],
+                                selectedZone.zoneViewPortTarget[2],
+                                true
+                            );
+                        }, 400)
+                    };
+                    setCam();
+                } else {
+
+                    let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+                    let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+                    const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+                    const worldUp = new THREE.Vector3(0, 0, 1);
+                    const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+                    const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+                    const offsetPosition = up.clone().multiplyScalar(20);
+
+                    camPosition.add(offsetPosition);
+                    const setCam = async () => {
+                        controls?.setLookAt(
+                            ...camPosition.toArray(),
+                            selectedZone.zoneViewPortTarget[0],
+                            selectedZone.zoneViewPortTarget[1],
+                            selectedZone.zoneViewPortTarget[2],
+                            true
+                        );
+                    };
+                    setCam();
+                }
+            }
+        }
+    }, [selectedZone.zoneViewPortTarget]);
+
+    useFrame(() => {
+        if (Edit) {
+            setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
+            setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
+        }
+    })
+    return (
+        <> </>
+    );
+}
--- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx
+++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
@@ -1,99 +1,220 @@
+// import React, { useState, useRef, useEffect } from "react";
+
+// // Dropdown Item Component
+// const DropdownItem = ({
+//   label,
+//   href,
+//   onClick,
+// }: {
+//   label: string;
+//   href?: string;
+//   onClick?: () => void;
+// }) => (
+//   <a
+//     href={href || "#"}
+//     className="dropdown-item"
+//     onClick={(e) => {
+//       e.preventDefault();
+//       onClick?.();
+//     }}
+//   >
+//     {label}
+//   </a>
+// );
+
+// // Nested Dropdown Component
+// const NestedDropdown = ({
+//   label,
+//   children,
+//   onSelect,
+// }: {
+//   label: string;
+//   children: React.ReactNode;
+//   onSelect: (selectedLabel: string) => void;
+// }) => {
+//   const [open, setOpen] = useState(false);
+
+//   return (
+//     <div className="nested-dropdown">
+//       {/* Dropdown Trigger */}
+//       <div
+//         className={`dropdown-trigger ${open ? "open" : ""}`}
+//         onClick={() => setOpen(!open)} // Toggle submenu on click
+//       >
+//         {label} <span className="icon">{open ? "▼" : "▶"}</span>
+//       </div>
+
+//       {/* Submenu */}
+//       {open && (
+//         <div className="submenu">
+//           {React.Children.map(children, (child) => {
+//             if (React.isValidElement(child)) {
+//               // Clone the element and pass the `onSelect` prop only if it's expected
+//               return React.cloneElement(child as React.ReactElement<any>, { onSelect });
+//             }
+//             return child; // Return non-element children as-is
+//           })}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// // Recursive Function to Render Nested Data
+// const renderNestedData = (
+//   data: Record<string, any>,
+//   onSelect: (selectedLabel: string) => void
+// ) => {
+//   return Object.entries(data).map(([key, value]) => {
+//     if (typeof value === "object" && !Array.isArray(value)) {
+//       // If the value is an object, render it as a nested dropdown
+//       return (
+//         <NestedDropdown key={key} label={key} onSelect={onSelect}>
+//           {renderNestedData(value, onSelect)}
+//         </NestedDropdown>
+//       );
+//     } else if (Array.isArray(value)) {
+//       // If the value is an array, render each item as a dropdown item
+//       return value.map((item, index) => (
+//         <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
+//       ));
+//     } else {
+//       // If the value is a simple string, render it as a dropdown item
+//       return (
+//         <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
+//       );
+//     }
+//   });
+// };
+
+// // Main Multi-Level Dropdown Component
+// const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
+//   const [open, setOpen] = useState(false);
+//   const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
+//   const dropdownRef = useRef<HTMLDivElement>(null);
+
+//   // Handle outer click to close the dropdown
+//   useEffect(() => {
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (
+//         dropdownRef.current &&
+//         !dropdownRef.current.contains(event.target as Node)
+//       ) {
+//         setOpen(false);
+//       }
+//     };
+
+//     document.addEventListener("mousedown", handleClickOutside);
+//     return () => {
+//       document.removeEventListener("mousedown", handleClickOutside);
+//     };
+//   }, []);
+
+//   // Handle selection of an item
+//   const handleSelect = (selectedLabel: string) => {
+//     setSelectedLabel(selectedLabel); // Update the dropdown trigger text
+//     setOpen(false); // Close the dropdown
+//   };
+
+//   return (
+//     <div className="multi-level-dropdown" ref={dropdownRef}>
+//       {/* Dropdown Trigger Button */}
+//       <button
+//         className={`dropdown-button ${open ? "open" : ""}`}
+//         onClick={() => setOpen(!open)} // Toggle main menu on click
+//       >
+//         {selectedLabel} <span className="icon">▾</span>
+//       </button>
+
+//       {/* Dropdown Menu */}
+//       {open && (
+//         <div className="dropdown-menu">
+//           <div className="dropdown-content">
+//             {renderNestedData(data, handleSelect)}
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default MultiLevelDropdown;
+
 import React, { useState, useRef, useEffect } from "react";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";

 // Dropdown Item Component
 const DropdownItem = ({
  label,
-  href,
  onClick,
 }: {
  label: string;
-  href?: string;
-  onClick?: () => void;
+  onClick: () => void;
 }) => (
-  <a
-    href={href || "#"}
-    className="dropdown-item"
-    onClick={(e) => {
-      e.preventDefault();
-      onClick?.();
-    }}
-  >
+  <div className="dropdown-item" onClick={onClick}>
    {label}
-  </a>
+  </div>
 );

 // Nested Dropdown Component
 const NestedDropdown = ({
  label,
-  children,
+  fields,
  onSelect,
 }: {
  label: string;
-  children: React.ReactNode;
-  onSelect: (selectedLabel: string) => void;
+  fields: string[];
+  onSelect: (selectedData: { name: string; fields: string }) => void;
 }) => {
  const [open, setOpen] = useState(false);

  return (
    <div className="nested-dropdown">
-      {/* Dropdown Trigger */}
      <div
        className={`dropdown-trigger ${open ? "open" : ""}`}
-        onClick={() => setOpen(!open)} // Toggle submenu on click
+        onClick={() => setOpen(!open)}
      >
-        {label} <span className="icon">{open ? "▼" : "▶"}</span>
+        {label}
+        <div
+          className="arrow-container"
+          style={{ rotate: open ? "" : "-90deg" }}
+        >
+          <ArrowIcon />
+        </div>
      </div>
-
-      {/* Submenu */}
      {open && (
        <div className="submenu">
-          {React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-              // Clone the element and pass the `onSelect` prop only if it's expected
-              return React.cloneElement(child as React.ReactElement<any>, { onSelect });
-            }
-            return child; // Return non-element children as-is
-          })}
+          {fields.map((field) => (
+            <DropdownItem
+              key={field}
+              label={field}
+              onClick={() => onSelect({ name: label, fields: field })}
+            />
+          ))}
        </div>
      )}
    </div>
  );
 };

-// Recursive Function to Render Nested Data
-const renderNestedData = (
-  data: Record<string, any>,
-  onSelect: (selectedLabel: string) => void
-) => {
-  return Object.entries(data).map(([key, value]) => {
-    if (typeof value === "object" && !Array.isArray(value)) {
-      // If the value is an object, render it as a nested dropdown
-      return (
-        <NestedDropdown key={key} label={key} onSelect={onSelect}>
-          {renderNestedData(value, onSelect)}
-        </NestedDropdown>
-      );
-    } else if (Array.isArray(value)) {
-      // If the value is an array, render each item as a dropdown item
-      return value.map((item, index) => (
-        <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
-      ));
-    } else {
-      // If the value is a simple string, render it as a dropdown item
-      return (
-        <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
-      );
-    }
-  });
-};
+// Props type for MultiLevelDropdown
+interface MultiLevelDropdownProps {
+  data: Record<string, any>;
+  onSelect: (selectedData: { name: string; fields: string }) => void;
+  onUnselect: () => void;
+  selectedValue?: { name: string; fields: string };
+}

 // Main Multi-Level Dropdown Component
-const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
+const MultiLevelDropdown = ({
+  data,
+  onSelect,
+  onUnselect,
+  selectedValue,
+}: MultiLevelDropdownProps) => {
  const [open, setOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
  const dropdownRef = useRef<HTMLDivElement>(null);

-  // Handle outer click to close the dropdown
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
@@ -103,34 +224,51 @@ const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
        setOpen(false);
      }
    };
-
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

-  // Handle selection of an item
-  const handleSelect = (selectedLabel: string) => {
-    setSelectedLabel(selectedLabel); // Update the dropdown trigger text
-    setOpen(false); // Close the dropdown
+  // Handle item selection
+  const handleItemSelect = (selectedData: { name: string; fields: string }) => {
+    onSelect(selectedData);
+    setOpen(false);
  };

+  // Handle unselect
+  const handleItemUnselect = () => {
+    onUnselect();
+    setOpen(false);
+  };
+
+  // Determine the display label
+  const displayLabel = selectedValue
+    ? `${selectedValue.name} - ${selectedValue.fields}`
+    : "Dropdown trigger";
+
  return (
    <div className="multi-level-dropdown" ref={dropdownRef}>
-      {/* Dropdown Trigger Button */}
      <button
        className={`dropdown-button ${open ? "open" : ""}`}
-        onClick={() => setOpen(!open)} // Toggle main menu on click
+        onClick={() => setOpen(!open)}
      >
-        {selectedLabel} <span className="icon">▾</span>
+        {displayLabel} <span className="icon">▾</span>
      </button>
-
-      {/* Dropdown Menu */}
      {open && (
        <div className="dropdown-menu">
          <div className="dropdown-content">
-            {renderNestedData(data, handleSelect)}
+            {/* Unselect Option */}
+            <DropdownItem label="Unselect" onClick={handleItemUnselect} />
+            {/* Nested Dropdown Items */}
+            {Object.entries(data).map(([key, value]) => (
+              <NestedDropdown
+                key={key}
+                label={key}
+                fields={Object.keys(value)}
+                onSelect={handleItemSelect}
+              />
+            ))}
          </div>
        </div>
      )}
@@ -138,4 +276,4 @@ const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
  );
 };

-export default MultiLevelDropdown;
+export default MultiLevelDropdown;
--- a/app/src/components/ui/inputs/RenameInput.tsx
+++ b/app/src/components/ui/inputs/RenameInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";

 interface RenameInputProps {
  value: string;
@@ -9,6 +9,9 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState(value);
  const inputRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    setText(value); // Ensure state updates when parent value changes
+  }, [value]);

  const handleDoubleClick = () => {
    setIsEditing(true);
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -2,7 +2,8 @@ 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";
+import { useZones } from "../../../store/store";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";

 interface DropDownListProps {
  value?: string; // Value to display in the DropDownList
@@ -31,27 +32,23 @@ const DropDownList: React.FC<DropDownListProps> = ({
  listType = "default",
  remove,
 }) => {
+  
  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+  const { zones, setZones } = useZones()

  const handleToggle = () => {
    setIsOpen((prev) => !prev); // Toggle the state
  };
-  const [zoneDataList, setZoneDataList] = useState<
-    { id: string; name: string }[]
-  >([]);
+  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

  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();
-  }, []);
+    const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
+      id: val.zoneId,
+      name: val.zoneName
+    }));
+    setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
+  }, [zones]);

  return (
    <div className="dropdown-list-container">
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -1,6 +1,9 @@
 import React from "react";
 import RenameInput from "../inputs/RenameInput";
 import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useSubModuleStore } from "../../../store/useModuleStore";

 interface ListProps {
  items?: { id: string; name: string }[]; // Optional array of items to render
@@ -9,6 +12,27 @@ interface ListProps {
 }

 const List: React.FC<ListProps> = ({ items = [], remove }) => {
+  const { setSelectedZone } = useSelectedZoneStore();
+  const { setSubModule } = useSubModuleStore();
+
+  async function handleSelectZone(id: string) {
+    setSubModule("zoneProperties")
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+    let response = await getZoneData(id, organization)
+    setSelectedZone({
+      zoneName: response?.zoneName,
+      activeSides: response?.activeSides || [],
+      panelOrder: response?.panelOrder || [],
+      lockedPanels: response?.lockedPanels || [],
+      widgets: response?.widgets || [],
+      zoneId: response?.zoneId,
+      zoneViewPortTarget: response?.viewPortCenter || [],
+      zoneViewPortPosition:
+        response?.viewPortposition || [],
+    });
+
+  }
  return (
    <>
      {items.length > 0 ? (
@@ -16,7 +40,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
          {items.map((item, index) => (
            <li key={index} className="list-container">
              <div className="list-item">
-                <div className="value">
+                <div className="value" onClick={() => handleSelectZone(item.id)}>
                  <RenameInput value={item.name} />
                </div>
                <div className="options-container">
--- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
@@ -1,5 +1,107 @@
-import { useMemo } from "react";
-import { Line } from "react-chartjs-2";
+// import { useMemo } from "react";
+// import { Line } from "react-chartjs-2";
+
+// interface ChartComponentProps {
+//   type: any;
+//   title: string;
+//   fontFamily?: string;
+//   fontSize?: string;
+//   fontWeight?: "Light" | "Regular" | "Bold";
+//   data: any;
+// }
+
+// const LineGraphComponent = ({
+//   title,
+//   fontFamily,
+//   fontSize,
+//   fontWeight = "Regular",
+// }: ChartComponentProps) => {
+//   // Memoize Font Weight Mapping
+//   const chartFontWeightMap = useMemo(
+//     () => ({
+//       Light: "lighter" as const,
+//       Regular: "normal" as const,
+//       Bold: "bold" as const,
+//     }),
+//     []
+//   );
+
+//   // Parse and Memoize Font Size
+//   const fontSizeValue = useMemo(
+//     () => (fontSize ? parseInt(fontSize) : 12),
+//     [fontSize]
+//   );
+
+//   // Determine and Memoize Font Weight
+//   const fontWeightValue = useMemo(
+//     () => chartFontWeightMap[fontWeight],
+//     [fontWeight, chartFontWeightMap]
+//   );
+
+//   // Memoize Chart Font Style
+//   const chartFontStyle = useMemo(
+//     () => ({
+//       family: fontFamily || "Arial",
+//       size: fontSizeValue,
+//       weight: fontWeightValue,
+//     }),
+//     [fontFamily, fontSizeValue, fontWeightValue]
+//   );
+
+//   const options = useMemo(
+//     () => ({
+//       responsive: true,
+//       maintainAspectRatio: false,
+//       plugins: {
+//         title: {
+//           display: true,
+//           text: title,
+//           font: chartFontStyle,
+//         },
+//         legend: {
+//           display: false,
+//         },
+//       },
+//       scales: {
+//         x: {
+//           ticks: {
+//             display: true, // This hides the x-axis labels
+//           },
+//         },
+//       },
+//     }),
+//     [title, chartFontStyle]
+//   );
+
+//   const chartData = {
+//     labels: ["January", "February", "March", "April", "May", "June", "July"],
+//     datasets: [
+//       {
+//         label: "My First Dataset",
+//         data: [65, 59, 80, 81, 56, 55, 40],
+//         backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+//         borderColor: "#ffffff", // Keeping border color white
+//         borderWidth: 2,
+//         fill: false,
+//       },
+//     ],
+//   };
+
+//   return <Line data={chartData} options={options} />;
+// };
+
+// export default LineGraphComponent;
+
+
+import React, { useEffect, useRef, useMemo, useState } from "react";
+import { Chart } from "chart.js/auto";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import io from "socket.io-client";
+import { Line } from 'react-chartjs-2';
+import useChartStore from "../../../../store/useChartStore";
+
+// WebSocket Connection
+// const socket = io("http://localhost:5000"); // Adjust to your backend URL

 interface ChartComponentProps {
  type: any;
@@ -11,86 +113,153 @@ interface ChartComponentProps {
 }

 const LineGraphComponent = ({
+  type,
  title,
  fontFamily,
  fontSize,
  fontWeight = "Regular",
+  data,
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
-  const chartFontWeightMap = useMemo(
-    () => ({
-      Light: "lighter" as const,
-      Regular: "normal" as const,
-      Bold: "bold" as const,
-    }),
-    []
-  );
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { themeColor } = useThemeStore();
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    labels: [],
+    datasets: [],
+  });

-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
-
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
-  const chartFontStyle = useMemo(
-    () => ({
-      family: fontFamily || "Arial",
-      size: fontSizeValue,
-      weight: fontWeightValue,
-    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
-  );
-
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: true, // This hides the x-axis labels
+  // Memoize Theme Colors to Prevent Unnecessary Recalculations
+    const buttonActionColor = useMemo(
+      () => themeColor[0] || "#5c87df",
+      [themeColor]
+    );
+    const buttonAbortColor = useMemo(
+      () => themeColor[1] || "#ffffff",
+      [themeColor]
+    );
+  
+    // Memoize Font Weight Mapping
+    const chartFontWeightMap = useMemo(
+      () => ({
+        Light: "lighter" as const,
+        Regular: "normal" as const,
+        Bold: "bold" as const,
+      }),
+      []
+    );
+  
+    // Parse and Memoize Font Size
+    const fontSizeValue = useMemo(
+      () => (fontSize ? parseInt(fontSize) : 12),
+      [fontSize]
+    );
+  
+    // Determine and Memoize Font Weight
+    const fontWeightValue = useMemo(
+      () => chartFontWeightMap[fontWeight],
+      [fontWeight, chartFontWeightMap]
+    );
+  
+    // Memoize Chart Font Style
+    const chartFontStyle = useMemo(
+      () => ({
+        family: fontFamily || "Arial",
+        size: fontSizeValue,
+        weight: fontWeightValue,
+      }),
+      [fontFamily, fontSizeValue, fontWeightValue]
+    );
+  
+    // Memoize Chart Data
+    // const data = useMemo(() => propsData, [propsData]);
+  
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: title,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
          },
        },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+        scales: {
+          x: {
+            ticks: {
+              display: true, // This hides the x-axis labels
+            },
+          },
+        },
+      }),
+      [title, chartFontStyle]
+    );

-  const chartData = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
-        borderColor: "#ffffff", // Keeping border color white
+    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+  useEffect(() => {
+    if ( measurements.length > 0 ) {
+      const socket = io("http://192.168.0.192:5010");
+
+      var inputes = {
+        measurements: measurements,
+        duration: duration,
+        interval: 1000,
+      }
+
+      console.log('graphHHHHHHHHHHHHHHHHHHHHHHHHHHHHH',inputes);
+      
+
+    // Start stream
+    const startStream = () => {
+      socket.emit("lineInput", inputes);
+    }
+
+    socket.on('connect', startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responceData = response.data;
+      console.log("Received data:", responceData);
+
+      // Extract timestamps and values
+      const labels = responceData.time;
+      const datasets = data.measurements.map((measurement: any) => ({
+        label: `${measurement.name}.${measurement.fields}`,
+        data: responceData[`${measurement.name}.${measurement.fields}`]?.values || [],
+        backgroundColor: themeColor[0] || "#5c87df",
+        borderColor: themeColor[1] || "#ffffff",
        borderWidth: 2,
-        fill: false,
-      },
-    ],
-  };
+        // fill: false,
+      }));
+
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+    };
+    }
+  }, [measurements, duration]);
+
+  // useEffect(() => {
+  //   if (!canvasRef.current) return;
+  //   const ctx = canvasRef.current.getContext("2d");
+  //   if (!ctx) return;
+
+  //   const chart = new Chart(ctx, {
+  //     type,
+  //     data: chartData,
+  //     options: options,
+  //   });
+
+  //   return () => chart.destroy();
+  // }, [chartData, type, title]);

  return <Line data={chartData} options={options} />;
 };

-export default LineGraphComponent;
-
-
-// like this
+export default LineGraphComponent;
--- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
+++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
@@ -13,8 +13,22 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
  value,
  per,
 }) => {
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    const cardData = JSON.stringify({
+      header,
+      value,
+      per,
+      className: event.currentTarget.className, 
+    });
+  
+    console.log("Dragging Data:", cardData); // ✅ Debugging log
+  
+    event.dataTransfer.setData("text/plain", cardData);
+  };
+
  return (
-    <div className="floating total-card" draggable>
+    <div className="floating total-card" draggable onDragStart={handleDragStart}>
      <div className="header-wrapper">
        <div className="header">{header}</div>
        <div className="data-values">