changed marketplace assets

app/src/components/ui/FileMenu.tsx

@@ -1,12 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import RenameInput from "./inputs/RenameInput";
+import { ArrowIcon } from "../icons/ExportCommonIcons";
+import MenuBar from "./menu/menu";
 
 const FileMenu: React.FC = () => {
+  const [openMenu, setOpenMenu] = useState(false);
   return (
     <div className="project-dropdowm-container">
       <div className="project-name">
         <RenameInput value="untitled" />
       </div>
+      <div
+        className="more-options-button"
+        onClick={() => {
+          setOpenMenu(!openMenu);
+        }}
+      >
+        <ArrowIcon />
+        {openMenu && <MenuBar setOpenMenu={setOpenMenu} />}
+      </div>
     </div>
   );
 };

app/src/components/ui/Tools.tsx

@@ -14,7 +14,7 @@ import {
   ZoneIcon,
 } from "../icons/ExportToolsIcons";
 import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
-import useModuleStore from "../../store/useModuleStore";
+import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
 import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
@@ -32,12 +32,13 @@ import {
   useTransformMode,
 } from "../../store/store";
 import useToggleStore from "../../store/useUIToggleStore";
+import { use3DWidget, useFloatingWidget } from "../../store/useDroppedObjectsStore";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
   const [activeSubTool, setActiveSubTool] = useState("cursor");
-  const [toggleThreeD, setToggleThreeD] = useState(true);
-  const { toggleUI, setToggleUI } = useToggleStore();
+  const { toggleThreeD, setToggleThreeD } = useThreeDStore();
+  const { setToggleUI } = useToggleStore();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
@@ -46,6 +47,8 @@ const Tools: React.FC = () => {
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { addTemplate } = useTemplateStore();
   const { selectedZone } = useSelectedZoneStore();
+  const { floatingWidget } = useFloatingWidget()
+  const { widgets3D } = use3DWidget()
 
   // wall options
   const { toggleView, setToggleView } = useToggleView();
@@ -68,7 +71,7 @@ const Tools: React.FC = () => {
         : true
     );
   }, []);
-  useEffect(() => {}, [activeModule]);
+  useEffect(() => { }, [activeModule]);
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -210,9 +213,8 @@ const Tools: React.FC = () => {
               <div className="activeDropicon">
                 {activeSubTool == "cursor" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "cursor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("cursor");
                     }}
@@ -222,9 +224,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "free-hand" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "free-hand" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("free-hand");
                     }}
@@ -234,9 +235,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "delete" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "delete" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "delete" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("delete");
                     }}
@@ -308,9 +308,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-wall" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-wall");
                     }}
@@ -319,9 +318,8 @@ const Tools: React.FC = () => {
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-zone" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-zone");
                     }}
@@ -330,9 +328,8 @@ const Tools: React.FC = () => {
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-aisle" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-aisle");
                     }}
@@ -341,9 +338,8 @@ const Tools: React.FC = () => {
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-floor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-floor");
                     }}
@@ -359,9 +355,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "measure" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "measure" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("measure");
                     }}
@@ -377,9 +372,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "pen" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("pen");
                     }}
@@ -395,13 +389,17 @@ const Tools: React.FC = () => {
                 <div className="draw-tools">
                   <div
                     className={`tool-button`}
-                    onClick={() =>
+                    onClick={() => {
+
                       handleSaveTemplate({
                         addTemplate,
+                        floatingWidget,
+                        widgets3D,
                         selectedZone,
                         templates,
                       })
                     }
+                    }
                   >
                     <SaveTemplateIcon isActive={false} />
                   </div>
@@ -411,9 +409,8 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${
-                  activeTool === "comment" ? "active" : ""
-                }`}
+                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                  }`}
                 onClick={() => {
                   setActiveTool("comment");
                 }}
@@ -422,9 +419,8 @@ const Tools: React.FC = () => {
               </div>
               {toggleThreeD && (
                 <div
-                  className={`tool-button ${
-                    activeTool === "play" ? "active" : ""
-                  }`}
+                  className={`tool-button ${activeTool === "play" ? "active" : ""
+                    }`}
                   onClick={() => {
                     setIsPlaying(!isPlaying);
                   }}
@@ -433,20 +429,23 @@ const Tools: React.FC = () => {
                 </div>
               )}
             </div>
-            <div className="split"></div>
-            <div
-              className={`toggle-threed-button${
-                toggleThreeD ? " toggled" : ""
-              }`}
-              onClick={toggleSwitch}
-            >
-              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-                2d
-              </div>
-              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-                3d
-              </div>
-            </div>
+            {activeModule === "builder" && (
+              <>
+                <div className="split"></div>
+                <div
+                  className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                    }`}
+                  onClick={toggleSwitch}
+                >
+                  <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                    2d
+                  </div>
+                  <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                    3d
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </>
       ) : (

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

@@ -119,7 +119,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Delete the selectedZone state
-      
       setSelectedZone(updatedZone);
     } else {
       const updatePanelData = async () => {

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

@@ -2,9 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
-import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
 import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
 import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
+import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -72,6 +73,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   // State to track overflow visibility
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -150,14 +152,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-        console.log("Zone is already selected:", zoneName);
+
         return;
       }
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       // Fetch data from backend
       let response = await getSelect2dZoneData(zoneId, organization);
+      console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
+      setFloatingWidget(res)
       // Set the selected zone in the store
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
       if (Array.isArray(res)) {
@@ -177,8 +181,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         zoneViewPortPosition: response.viewPortposition || {},
       });
     } catch (error) {
-      console.log('error: ', error);
-      
+
+
     }
   }
 
@@ -186,9 +190,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zone-wrapper ${
-        selectedZone?.activeSides?.includes("bottom") && "bottom"
-      }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
+        }`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (

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

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface DistanceLinesProps {
+  obj: {
+    position: {
+      top?: number | "auto";
+      left?: number | "auto";
+      right?: number | "auto";
+      bottom?: number | "auto";
+    };
+  };
+  activeEdges: {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null;
+}
+
+const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
+  if (!activeEdges) return null;
+
+  return (
+    <>
+      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
+        <div
+          className="distance-line top"
+          style={{
+            top: 0,
+            left:
+              activeEdges.horizontal === "left"
+                ? `${(obj.position.left as number) + 125}px`
+                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+            height: `${obj.position.top}px`,
+          }}
+        >
+          <span className="distance-label">{obj.position.top.toFixed()}px</span>
+        </div>
+      )}
+
+      {activeEdges.vertical === "bottom" &&
+        typeof obj.position.bottom === "number" && (
+          <div
+            className="distance-line bottom"
+            style={{
+              bottom: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.bottom}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.bottom.toFixed()}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "left" &&
+        typeof obj.position.left === "number" && (
+          <div
+            className="distance-line left"
+            style={{
+              left: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.left}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.left.toFixed()}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "right" &&
+        typeof obj.position.right === "number" && (
+          <div
+            className="distance-line right"
+            style={{
+              right: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.right}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.right.toFixed()}px</span>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default DistanceLines;

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

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface DistanceLinesProps {
+  obj: {
+    position: {
+      top?: number | "auto";
+      left?: number | "auto";
+      right?: number | "auto";
+      bottom?: number | "auto";
+    };
+  };
+  activeEdges: {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null;
+}
+
+const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
+  if (!activeEdges) return null;
+
+  return (
+    <>
+      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
+        <div
+          className="distance-line top"
+          style={{
+            top: 0,
+            left:
+              activeEdges.horizontal === "left"
+                ? `${(obj.position.left as number) + 125}px`
+                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+            height: `${obj.position.top}px`,
+          }}
+        >
+          <span className="distance-label">{obj.position.top}px</span>
+        </div>
+      )}
+
+      {activeEdges.vertical === "bottom" &&
+        typeof obj.position.bottom === "number" && (
+          <div
+            className="distance-line bottom"
+            style={{
+              bottom: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.bottom}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.bottom}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "left" &&
+        typeof obj.position.left === "number" && (
+          <div
+            className="distance-line left"
+            style={{
+              left: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.left}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.left}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "right" &&
+        typeof obj.position.right === "number" && (
+          <div
+            className="distance-line right"
+            style={{
+              right: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.right}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.right}px</span>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default DistanceLines;

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

@@ -306,34 +306,20 @@ export const DraggableWidget = ({
         )}
         {widget.type === "doughnut" && (
           <DoughnutGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-            data={{
-              measurements: [
-                { name: "testDevice", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
-              ],
-              interval: 1000,
-              duration: "1h",
-            }}
           />
         )}
         {widget.type === "polarArea" && (
           <PolarAreaGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-            data={{
-              measurements: [
-                { name: "testDevice", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
-              ],
-              interval: 1000,
-              duration: "1h",
-            }}
           />
         )}
       </div>

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

@@ -10,79 +10,138 @@ import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
 import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
 import StateWorking from "../../layout/3D-cards/cards/StateWorking";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
+import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
+import { use3DWidget } from "../../../store/useDroppedObjectsStore";
 
 export default function Dropped3dWidgets() {
-    const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+    const { widgetSelect } = useAsset3dWidget();
     const { activeModule } = useModuleStore();
     const { raycaster, gl, scene }: ThreeState = useThree();
-    const { selectedZone } = useSelectedZoneStore(); // Get currently selected zone
-    const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption()
-    // 🔥 Store widget positions per zone
-    const [zoneWidgets, setZoneWidgets] = useState<Record<
-        string, // Zone ID
-        Record<string, [number, number, number][]> // Widget type -> Positions array
-    >>({});
+    const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+    const { selectedZone } = useSelectedZoneStore(); // Get the currently active zone
+    // 🔥 Store widget data (id, type, position) based on the selected zone
+    const [zoneWidgetData, setZoneWidgetData] = useState<
+        Record<string, { id: string; type: string; position: [number, number, number] }[]>
+    >({});
+    const { setWidgets3D } = use3DWidget()
+    useEffect(() => {
+        if (activeModule !== "visualization") return
+        if (selectedZone.zoneName === "") return;
 
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        async function get3dWidgetData() {
+            let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
+            setWidgets3D(result)
+            // Ensure the extracted data has id, type, and position correctly mapped
+            const formattedWidgets = result.map((widget: any) => ({
+                id: widget.id,
+                type: widget.type,
+                position: widget.position,
+            }));
+
+            setZoneWidgetData((prev) => ({
+                ...prev,
+                [selectedZone.zoneId]: formattedWidgets,
+            }));
+        }
+
+        get3dWidgetData();
+
+    }, [selectedZone.zoneId,activeModule]);
+    // useEffect(() => {
+    //     // ✅ Set data only for the selected zone, keeping existing state structure
+    //     setZoneWidgetData((prev) => ({
+    //         ...prev,
+    //         [selectedZone.zoneId]: [
+    //             {
+    //                 "id": "1743322674626-50mucpb1c",
+    //                 "type": "ui-Widget 1",
+    //                 "position": [120.94655021768133, 4.142360029666558, 124.39283546121099]
+    //             },
+    //             {
+    //                 "id": "1743322682086-je2h9x33v",
+    //                 "type": "ui-Widget 2",
+    //                 "position": [131.28751045879255, 0.009999999999970264, 133.92059801984362]
+    //             }
+    //         ]
+    //     }));
+    // }, [selectedZone.zoneId]); // ✅ Only update when the zone changes
 
     useEffect(() => {
-        if (widgetSubOption === "Floating") return
-        // if (activeModule !== "visualization") return;
+        if (activeModule !== "visualization") return;
+        if (widgetSubOption === "Floating") return;
+        if (selectedZone.zoneName === "") return
         const canvasElement = gl.domElement;
-        const onDrop = (event: DragEvent) => {
+        const onDrop = async (event: DragEvent) => {
             event.preventDefault(); // Prevent default browser behavior
-            if (widgetSubOption === "3D") {
-                if (selectedZone.zoneName === "") return
-                if (!widgetSelect?.startsWith("ui")) return;
-                const group1 = scene.getObjectByName("itemsGroup");
-                if (!group1) return;
-                const Assets = group1.children
-                    .map((val) => scene.getObjectByProperty("uuid", val.uuid))
-                    .filter(Boolean) as THREE.Object3D[];
-                const intersects = raycaster.intersectObjects(scene.children, true).filter(
-                    (intersect) =>
-                        !intersect.object.name.includes("Roof") &&
-                        !intersect.object.name.includes("agv-collider") &&
-                        !intersect.object.name.includes("MeasurementReference") &&
-                        !intersect.object.userData.isPathObject &&
-                        !(intersect.object.type === "GridHelper")
-                );
-                if (intersects.length > 0) {
-                    const { x, y, z } = intersects[0].point;
+            const email = localStorage.getItem("email") || "";
+            const organization = email?.split("@")[1]?.split(".")[0];
+            if (!widgetSelect.startsWith("ui")) return;
+            const group1 = scene.getObjectByName("itemsGroup");
+            if (!group1) return;
+            const intersects = raycaster.intersectObjects(scene.children, true).filter(
+                (intersect) =>
+                    !intersect.object.name.includes("Roof") &&
+                    !intersect.object.name.includes("agv-collider") &&
+                    !intersect.object.name.includes("MeasurementReference") &&
+                    !intersect.object.userData.isPathObject &&
+                    !(intersect.object.type === "GridHelper")
+            );
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
 
-                    setZoneWidgets((prev) => ({
-                        ...prev,
-                        [selectedZone.zoneId]: {
-                            ...(prev[selectedZone.zoneId] || {}),
-                            [widgetSelect]: [...(prev[selectedZone.zoneId]?.[widgetSelect] || []), [x, y, z]],
-                        },
-                    }));
-                }
+                // ✅ Explicitly define position as a tuple
+                const newWidget: { id: string; type: string; position: [number, number, number] } = {
+                    id: generateUniqueId(),
+                    type: widgetSelect,
+                    position: [x, y, z], // Ensures TypeScript recognizes it as a tuple
+                };
+
+
+                let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
+
+
+                // ✅ Store widgets uniquely for each zone
+                setZoneWidgetData((prev) => ({
+                    ...prev,
+                    [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget],
+                }));
             }
         };
 
+
         canvasElement.addEventListener("drop", onDrop);
         return () => {
-            canvasElement.removeEventListener("drop", onDrop)
-            // setWidgetSelect()
+            canvasElement.removeEventListener("drop", onDrop);
         };
-    }, [widgetSelect, activeModule, widgetSubOption]);
+    }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
+
+    // Get widgets for the currently active zone
+    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
 
     return (
         <>
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 1"]?.map((pos, index) => (
-                <ProductionCapacity key={`Widget1-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 2"]?.map((pos, index) => (
-                <ReturnOfInvestment key={`Widget2-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 3"]?.map((pos, index) => (
-                <StateWorking key={`Widget3-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 4"]?.map((pos, index) => (
-                <Throughput key={`Widget4-${index}`} position={pos} />
-            ))}
+            {activeZoneWidgets.map(({ id, type, position }) => {
+                switch (type) {
+                    case "ui-Widget 1":
+                        return <ProductionCapacity key={id} position={position} />;
+                    case "ui-Widget 2":
+                        return <ReturnOfInvestment key={id} position={position} />;
+                    case "ui-Widget 3":
+                        return <StateWorking key={id} position={position} />;
+                    case "ui-Widget 4":
+                        return <Throughput key={id} position={position} />;
+                    default:
+                        return null;
+                }
+            })}
         </>
     );
 }
 
 
+

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

@@ -1,6 +1,6 @@
+
 import { WalletIcon } from "../../icons/3dChartIcons";
 import { useEffect, useRef, useState } from "react";
-import { Line } from "react-chartjs-2";
 import {
   useDroppedObjectsStore,
   Zones,
@@ -9,29 +9,102 @@ import useModuleStore from "../../../store/useModuleStore";
 import { determinePosition } from "./functions/determinePosition";
 import { getActiveProperties } from "./functions/getActiveProperties";
 import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import {
+  DublicateIcon,
+  KebabIcon,
+  DeleteIcon,
+} from "../../icons/ExportCommonIcons";
+import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
+import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
 
+import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
+import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
+import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+interface DraggingState {
+  zone: string;
+  index: number;
+  initialPosition: {
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  };
+}
+
+interface DraggingState {
+  zone: string;
+  index: number;
+  initialPosition: {
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  };
+}
 const DroppedObjects: React.FC = () => {
   const zones = useDroppedObjectsStore((state) => state.zones);
-
+  const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
     (state) => state.updateObjectPosition
   );
-  const [draggingIndex, setDraggingIndex] = useState<{
-    zone: string;
-    index: number;
-  } | null>(null);
+  const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
+
+  const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
+  const [draggingIndex, setDraggingIndex] = useState<DraggingState | null>(
+    null
+  );
   const [offset, setOffset] = useState<[number, number] | null>(null);
-  const positionRef = useRef<[number, number] | null>(null);
+  const { setSelectedChartId } = useWidgetStore();
+  const [activeEdges, setActiveEdges] = useState<{
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null>(null); // State to track active edges for distance lines
+  const [currentPosition, setCurrentPosition] = useState<{
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
   const { activeModule } = useModuleStore();
 
-  // Get the first zone and its objects
-  const zoneEntries = Object.entries(zones);
-  if (zoneEntries.length === 0) return null; // No zone, nothing to render
-  const [zoneName, zone] = zoneEntries[0]; // Only render the first zone
+  // Clean up animation frame on unmount
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
 
-  // Handle pointer down event
-  function handlePointerDown(event: React.PointerEvent, index: number) {
+  const zoneEntries = Object.entries(zones);
+  if (zoneEntries.length === 0) return null;
+  const [zoneName, zone] = zoneEntries[0];
+
+  function handleDuplicate(zoneName: string, index: number) {
+    setOpenKebabId(null)
+    duplicateObject(zoneName, index); // Call the duplicateObject method from the store
+  }
+
+  async function handleDelete(zoneName: string, id: string, index: number) {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+
+      let res = await deleteFloatingWidgetApi(id, organization);
+      console.log('res: ', res);
+
+      if (res.message === "FloatingWidget deleted successfully") {
+        deleteObject(zoneName, index); // Call the deleteObject method from the store
+      }
+    } catch (error) {
+      console.error("Error deleting floating widget:", error);
+    }
+  }
+
+
+  const handlePointerDown = (event: React.PointerEvent, index: number) => {
     const obj = zone.objects[index];
     const container = document.getElementById("real-time-vis-canvas");
     if (!container) return;
@@ -40,41 +113,41 @@ const DroppedObjects: React.FC = () => {
     const relativeX = event.clientX - rect.left;
     const relativeY = event.clientY - rect.top;
 
-    // Determine which properties are active for this object
+    // Determine active properties for the initial position
     const [activeProp1, activeProp2] = getActiveProperties(obj.position);
 
-    // Calculate the offset based on the active properties
+    // Set active edges for distance lines
+    const vertical = activeProp1 === "top" ? "top" : "bottom";
+    const horizontal = activeProp2 === "left" ? "left" : "right";
+    setActiveEdges({ vertical, horizontal });
+
+    // Store the initial position strategy and active edges
+    setDraggingIndex({
+      zone: zoneName,
+      index,
+      initialPosition: { ...obj.position },
+    });
+
+    // Calculate offset from mouse to object edges
     let offsetX = 0;
     let offsetY = 0;
 
     if (activeProp1 === "top") {
-      offsetY =
-        relativeY -
-        (typeof obj.position.top === "number" ? obj.position.top : 0);
-    } else if (activeProp1 === "bottom") {
-      offsetY =
-        rect.height -
-        relativeY -
-        (typeof obj.position.bottom === "number" ? obj.position.bottom : 0);
+      offsetY = relativeY - (obj.position.top as number);
+    } else {
+      offsetY = rect.height - relativeY - (obj.position.bottom as number);
     }
 
     if (activeProp2 === "left") {
-      offsetX =
-        relativeX -
-        (typeof obj.position.left === "number" ? obj.position.left : 0);
-    } else if (activeProp2 === "right") {
-      offsetX =
-        rect.width -
-        relativeX -
-        (typeof obj.position.right === "number" ? obj.position.right : 0);
+      offsetX = relativeX - (obj.position.left as number);
+    } else {
+      offsetX = rect.width - relativeX - (obj.position.right as number);
     }
 
-    setDraggingIndex({ zone: zoneName, index });
     setOffset([offsetY, offsetX]);
-  }
+  };
 
-  // Handle pointer move event
-  function handlePointerMove(event: React.PointerEvent) {
+  const handlePointerMove = (event: React.PointerEvent) => {
     if (!draggingIndex || !offset) return;
 
     const container = document.getElementById("real-time-vis-canvas");
@@ -84,91 +157,194 @@ const DroppedObjects: React.FC = () => {
     const relativeX = event.clientX - rect.left;
     const relativeY = event.clientY - rect.top;
 
-    // Determine which properties are active for the dragged object
-    const obj = zone.objects[draggingIndex.index];
-    const [activeProp1, activeProp2] = getActiveProperties(obj.position);
+    // Dynamically determine the current position strategy
+    const newPositionStrategy = determinePosition(rect, relativeX, relativeY);
+    const [activeProp1, activeProp2] = getActiveProperties(newPositionStrategy);
 
-    // Calculate the new position based on the active properties
-    let newX = 0;
+    // Update active edges for distance lines
+    const vertical = activeProp1 === "top" ? "top" : "bottom";
+    const horizontal = activeProp2 === "left" ? "left" : "right";
+    setActiveEdges({ vertical, horizontal });
+
+    // Calculate new position based on the active properties
     let newY = 0;
-
-    if (activeProp2 === "left") {
-      newX = relativeX - offset[1];
-    } else if (activeProp2 === "right") {
-      newX = rect.width - (relativeX + offset[1]);
-    }
+    let newX = 0;
 
     if (activeProp1 === "top") {
       newY = relativeY - offset[0];
-    } else if (activeProp1 === "bottom") {
+    } else {
       newY = rect.height - (relativeY + offset[0]);
     }
 
-    // Ensure the object stays within the canvas boundaries
+    if (activeProp2 === "left") {
+      newX = relativeX - offset[1];
+    } else {
+      newX = rect.width - (relativeX + offset[1]);
+    }
+
+    // Apply boundaries
     newX = Math.max(0, Math.min(rect.width - 50, newX));
     newY = Math.max(0, Math.min(rect.height - 50, newY));
 
-    // Update the position reference
-    positionRef.current = [newY, newX];
+    // Create new position object
+    const newPosition = {
+      ...newPositionStrategy,
+      [activeProp1]: newY,
+      [activeProp2]: newX,
+      // Clear opposite properties
+      [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+      [activeProp2 === "left" ? "right" : "left"]: "auto",
+    };
+
+    // Update the current position state for DistanceLines
+    setCurrentPosition(newPosition);
 
-    // Update the object's position using requestAnimationFrame for smoother animations
     if (!animationRef.current) {
       animationRef.current = requestAnimationFrame(() => {
-        if (positionRef.current) {
-          updateObjectPosition(zoneName, draggingIndex.index, {
-            ...obj.position,
-            [activeProp1]: positionRef.current[0],
-            [activeProp2]: positionRef.current[1],
-          });
-        }
+        updateObjectPosition(zoneName, draggingIndex.index, newPosition);
         animationRef.current = null;
       });
     }
-  }
+  };
 
-  // Handle pointer up event
-  async function handlePointerUp(event: React.MouseEvent<HTMLDivElement>) {
+  const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
     try {
       if (!draggingIndex || !offset) return;
 
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0];
       const container = document.getElementById("real-time-vis-canvas");
-      if (!container) throw new Error("Canvas container not found");
+      if (!container) return;
 
       const rect = container.getBoundingClientRect();
       const relativeX = event.clientX - rect.left;
       const relativeY = event.clientY - rect.top;
 
-      // Recalculate the position using determinePosition
-      const newPosition = determinePosition(rect, relativeX, relativeY);
+      // Only now determine the final position strategy
+      const finalPosition = determinePosition(rect, relativeX, relativeY);
+      const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
 
-      // Validate the dragging index and get the object
-      if (!zone.objects[draggingIndex.index]) {
-        throw new Error("Dragged object not found in the zone");
+      // Calculate final position using the new strategy
+      let finalY = 0;
+      let finalX = 0;
+
+      if (activeProp1 === "top") {
+        finalY = relativeY - offset[0];
+      } else {
+        finalY = rect.height - (relativeY + offset[0]);
       }
-      const obj = { ...zone.objects[draggingIndex.index], position: newPosition };
-      let response = await addingFloatingWidgets(zone.zoneId, organization, obj);
+
+      if (activeProp2 === "left") {
+        finalX = relativeX - offset[1];
+      } else {
+        finalX = rect.width - (relativeX + offset[1]);
+      }
+
+      // Apply boundaries
+      finalX = Math.max(0, Math.min(rect.width - 50, finalX));
+      finalY = Math.max(0, Math.min(rect.height - 50, finalY));
+
+      const boundedPosition = {
+        ...finalPosition,
+        [activeProp1]: finalY,
+        [activeProp2]: finalX,
+      };
+
+      // Save to backend
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      const response = await addingFloatingWidgets(zone.zoneId, organization, {
+        ...zone.objects[draggingIndex.index],
+        position: boundedPosition,
+      });
+
       if (response.message === "Widget updated successfully") {
-        updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+        updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
 
-      // Reset states
+      // Clean up
       setDraggingIndex(null);
       setOffset(null);
-
+      setActiveEdges(null); // Clear active edges
+      setCurrentPosition(null); // Reset current position
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
         animationRef.current = null;
       }
     } catch (error) {
-
+      console.error("Error in handlePointerUp:", error);
     }
-  }
+  };
 
+  const handleKebabClick = (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setOpenKebabId((prevId) => (prevId === id ? null : id));
+  };
+
+  const renderObjectContent = (obj: any) => {
+    switch (obj.className) {
+      case "floating total-card":
+        return (
+          <>
+            <div className="header-wrapper">
+              <div className="header">{obj.header}</div>
+              <div className="data-values">
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+            <div className="icon">
+              <WalletIcon />
+            </div>
+          </>
+        );
+      case "warehouseThroughput floating":
+        return (
+          <>
+            <div className="header">
+              <h2>Warehouse Throughput</h2>
+              <p>
+                <span>(+5) more</span> in 2025
+              </p>
+            </div>
+            <div className="lineGraph" style={{ height: "100%" }}>
+              {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
+            </div>
+          </>
+        );
+      case "fleetEfficiency floating":
+        return (
+          <>
+            <h2 className="header">Fleet Efficiency</h2>
+            <div className="progressContainer">
+              <div className="progress">
+                <div className="barOverflow">
+                  <div
+                    className="bar"
+                    style={{ transform: `rotate(${obj.value}deg)` }}
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div className="scaleLabels">
+              <span>0%</span>
+              <div className="centerText">
+                <div className="percentage">{obj.per}%</div>
+                <div className="status">Optimal</div>
+              </div>
+              <span>100%</span>
+            </div>
+          </>
+        );
+      default:
+        return null;
+    }
+  };
 
   return (
-    <div onPointerMove={handlePointerMove} onPointerUp={handlePointerUp}>
+    <div
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      className="floating-wrapper"
+    >
       {zone.objects.map((obj, index) => (
         <div
           key={`${zoneName}-${index}`}
@@ -176,77 +352,104 @@ const DroppedObjects: React.FC = () => {
           style={{
             position: "absolute",
             top:
-              typeof obj.position.top !== "string"
+              typeof obj.position.top === "number"
                 ? `${obj.position.top}px`
                 : "auto",
             left:
-              typeof obj.position.left !== "string"
+              typeof obj.position.left === "number"
                 ? `${obj.position.left}px`
                 : "auto",
             right:
-              typeof obj.position.right !== "string"
+              typeof obj.position.right === "number"
                 ? `${obj.position.right}px`
                 : "auto",
             bottom:
-              typeof obj.position.bottom !== "string"
+              typeof obj.position.bottom === "number"
                 ? `${obj.position.bottom}px`
                 : "auto",
-            // transition: draggingIndex?.index === index ? "none" : "transform 0.1s ease-out",
           }}
           onPointerDown={(event) => handlePointerDown(event, index)}
+          onClick={() => {
+            setSelectedChartId(obj)
+          }}
         >
           {obj.className === "floating total-card" ? (
             <>
-              <div className="header-wrapper">
-                <div className="header">{obj.header}</div>
-                <div className="data-values">
-                  <div className="value">{obj.value}</div>
-                  <div className="per">{obj.per}</div>
-                </div>
-              </div>
-              <div className="icon">
-                <WalletIcon />
-              </div>
+              <TotalCardComponent object={obj} />
             </>
           ) : obj.className === "warehouseThroughput floating" ? (
             <>
-              <div className="header">
-                <h2>Warehouse Throughput</h2>
-                <p>
-                  <span>(+5) more</span> in 2025
-                </p>
-              </div>
-              <div className="lineGraph" style={{ height: "100%" }}>
-                {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
-              </div>
+              <WarehouseThroughputComponent />
             </>
           ) : obj.className === "fleetEfficiency floating" ? (
             <>
-              <h2 className="header">Fleet Efficiency</h2>
-              <div className="progressContainer">
-                <div className="progress">
-                  <div className="barOverflow">
-                    <div
-                      className="bar"
-                      style={{ transform: `rotate(${obj.value}deg)` }}
-                    ></div>
-                  </div>
-                </div>
-              </div>
-              <div className="scaleLabels">
-                <span>0%</span>
-                <div className="centerText">
-                  <div className="percentage">{obj.per}%</div>
-                  <div className="status">Optimal</div>
-                </div>
-                <span>100%</span>
-              </div>
+              <FleetEfficiencyComponent object={obj} />
             </>
           ) : null}
+          {renderObjectContent(obj)}
+          <div
+            className="icon kebab"
+            onClick={(event) => handleKebabClick(obj.id, event)}
+          >
+            <KebabIcon />
+          </div>
+          {openKebabId === obj.id && (
+            <div className="kebab-options">
+              <div className="dublicate btn" onClick={(event) => {
+                event.stopPropagation();
+                handleDuplicate(zoneName, index); // Call the duplicate handler
+              }}>
+                <div className="icon">
+                  <DublicateIcon />
+                </div>
+                <div className="label">Duplicate</div>
+              </div>
+              <div className="edit btn" onClick={(event) => {
+                event.stopPropagation();
+                handleDelete(zoneName, obj.id, index); // Call the delete handler
+              }}>
+                <div className="icon">
+                  <DeleteIcon />
+                </div>
+                <div className="label">Delete</div>
+              </div>
+            </div>
+          )}
         </div>
       ))}
+
+      {/* Render DistanceLines component during drag */}
+      {draggingIndex !== null &&
+        activeEdges !== null &&
+        currentPosition !== null && (
+          <DistanceLines
+            obj={{
+              position: {
+                top:
+                  currentPosition.top !== "auto"
+                    ? currentPosition.top
+                    : undefined,
+                bottom:
+                  currentPosition.bottom !== "auto"
+                    ? currentPosition.bottom
+                    : undefined,
+                left:
+                  currentPosition.left !== "auto"
+                    ? currentPosition.left
+                    : undefined,
+                right:
+                  currentPosition.right !== "auto"
+                    ? currentPosition.right
+                    : undefined,
+              },
+            }}
+            activeEdges={activeEdges}
+          />
+        )}
     </div>
   );
 };
 
 export default DroppedObjects;
+
+

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

@@ -63,6 +63,8 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
+        console.log('response: ', response);
+
         if (!Array.isArray(response)) {
           return;
         }
@@ -83,7 +85,7 @@ const RealTimeVisulization: React.FC = () => {
         );
         setZonesData(formattedData);
       } catch (error) {
-        console.log("error: ", error);
+
       }
     }
 
@@ -109,7 +111,7 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  useEffect(() => {}, [floatingWidgets]);
+  // useEffect(() => {}, [floatingWidgets]);
 
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     try {
@@ -135,6 +137,7 @@ const RealTimeVisulization: React.FC = () => {
         id: generateUniqueId(),
         position: determinePosition(canvasRect, relativeX, relativeY),
       };
+      console.log('newObject: ', newObject);
 
       let response = await addingFloatingWidgets(
         selectedZone.zoneId,
@@ -171,7 +174,7 @@ const RealTimeVisulization: React.FC = () => {
           ],
         },
       }));
-    } catch (error) {}
+    } catch (error) { }
   };
 
   return (
@@ -198,7 +201,8 @@ const RealTimeVisulization: React.FC = () => {
       >
         <Scene />
       </div>
-      <DroppedObjects />
+      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+      {/* <DroppedObjects /> */}
       {activeModule === "visualization" && (
         <>
           <DisplayZone

app/src/components/ui/componets/functions/determinePosition.ts

@@ -1,3 +1,70 @@
+// export function determinePosition(
+//   canvasRect: DOMRect,
+//   relativeX: number,
+//   relativeY: number
+// ): {
+//   top: number | "auto";
+//   left: number | "auto";
+//   right: number | "auto";
+//   bottom: number | "auto";
+// } {
+//   // Calculate the midpoints of the canvas
+//   const centerX = canvasRect.width / 2;
+//   const centerY = canvasRect.height / 2;
+
+//   // Initialize position with default values
+//   let position: {
+//     top: number | "auto";
+//     left: number | "auto";
+//     right: number | "auto";
+//     bottom: number | "auto";
+//   };
+
+//   if (relativeY < centerY) {
+//     // Top half
+//     if (relativeX < centerX) {
+//       // Left side
+//       position = {
+//         top: relativeY,
+//         left: relativeX,
+//         right: "auto",
+//         bottom: "auto",
+//       };
+//     } else {
+//       // Right side
+//       position = {
+//         top: relativeY,
+//         right: canvasRect.width - relativeX,
+//         left: "auto",
+//         bottom: "auto",
+//       };
+//     }
+//   } else {
+//     // Bottom half
+//     if (relativeX < centerX) {
+//       // Left side
+//       position = {
+//         bottom: canvasRect.height - relativeY,
+//         left: relativeX,
+//         right: "auto",
+//         top: "auto",
+//       };
+//     } else {
+//       // Right side
+//       position = {
+//         bottom: canvasRect.height - relativeY,
+//         right: canvasRect.width - relativeX,
+//         left: "auto",
+//         top: "auto",
+//       };
+//     }
+//   }
+
+//   return position;
+// }
+
+
+
 export function determinePosition(
   canvasRect: DOMRect,
   relativeX: number,
@@ -8,11 +75,9 @@ export function determinePosition(
   right: number | "auto";
   bottom: number | "auto";
 } {
-  // Calculate the midpoints of the canvas
   const centerX = canvasRect.width / 2;
   const centerY = canvasRect.height / 2;
 
-  // Initialize position with default values
   let position: {
     top: number | "auto";
     left: number | "auto";
@@ -21,9 +86,8 @@ export function determinePosition(
   };
 
   if (relativeY < centerY) {
-    // Top half
     if (relativeX < centerX) {
-      // Left side
+      console.log("Top-left");
       position = {
         top: relativeY,
         left: relativeX,
@@ -31,7 +95,7 @@ export function determinePosition(
         bottom: "auto",
       };
     } else {
-      // Right side
+      console.log("Top-right");
       position = {
         top: relativeY,
         right: canvasRect.width - relativeX,
@@ -40,9 +104,8 @@ export function determinePosition(
       };
     }
   } else {
-    // Bottom half
     if (relativeX < centerX) {
-      // Left side
+      console.log("Bottom-left");
       position = {
         bottom: canvasRect.height - relativeY,
         left: relativeX,
@@ -50,7 +113,7 @@ export function determinePosition(
         top: "auto",
       };
     } else {
-      // Right side
+      console.log("Bottom-right");
       position = {
         bottom: canvasRect.height - relativeY,
         right: canvasRect.width - relativeX,
@@ -61,4 +124,4 @@ export function determinePosition(
   }
 
   return position;
-}
+}

app/src/components/ui/componets/functions/getActiveProperties.ts

@@ -1,17 +1,11 @@
-export const getActiveProperties = (position: {
-  top: number | "auto";
-  left: number | "auto";
-  right: number | "auto";
-  bottom: number | "auto";
-}) => {
-  let activeProps: ["top", "left"] | ["bottom", "right"] = ["top", "left"]; // Default to top-left
-
-  if (
-    typeof position.bottom !== "string" &&
-    typeof position.right !== "string"
-  ) {
-    activeProps = ["bottom", "right"];
+export function getActiveProperties(position: any): [string, string] {
+  if (position.top !== "auto" && position.left !== "auto") {
+    return ["top", "left"]; // Top-left
+  } else if (position.top !== "auto" && position.right !== "auto") {
+    return ["top", "right"]; // Top-right
+  } else if (position.bottom !== "auto" && position.left !== "auto") {
+    return ["bottom", "left"]; // Bottom-left
+  } else {
+    return ["bottom", "right"]; // Bottom-right
   }
-
-  return activeProps;
-};
+}

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

@@ -0,0 +1,29 @@
+// import { useSelectedZoneStore } from "../../../store/useZoneStore";
+
+
+// type HandleDropTemplateProps = {
+//   templateId: string;
+// };
+
+// export const handleDropTemplate = ({ templateId }: HandleDropTemplateProps): void => {
+//   const { getTemplate } = useTemplateStore.getState();
+//   const { setSelectedZone } = useSelectedZoneStore.getState();
+
+//   // Find the template by ID
+//   const template: Template | undefined = getTemplate(templateId);
+
+//   if (!template) {
+//     console.error("Template not found!");
+//     return;
+//   }
+
+//   // Update the selected zone with the template data
+//   setSelectedZone((prev) => ({
+//     ...prev,
+//     panelOrder: template.panelOrder,
+//     activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])),
+//     widgets: template.widgets, // Keep widget structure the same
+//   }));
+
+//   console.log("Dropped template applied:", template);
+// };

app/src/components/ui/menu/menu.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from "react";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import { toggleTheme } from "../../../utils/theme";
 
-const MenuBar = () => {
+interface MenuBarProps {
+  setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
+}
+
+const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
 
@@ -17,8 +23,20 @@ const MenuBar = () => {
     }));
   };
 
+  function handleThemeChange(){
+    toggleTheme();
+    window.location.reload();
+  }
+
+  const savedTheme: string | null = localStorage.getItem("theme") || "light";
+
   return (
-    <div className="menu-bar">
+    <div
+      className="menu-bar"
+      onPointerLeave={() => {
+        setOpenMenu(false);
+      }}
+    >
       {/* Top-level menu buttons */}
       <div className="menu-buttons">
         {/* File Menu */}
@@ -32,7 +50,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             File
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* File Dropdown */}
@@ -44,10 +64,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("New File")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["New File"] && "✓ "}
-                    New File
-                  </span>
+                  <span>New File</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + N</span>
                   </div>
@@ -60,10 +77,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Open Local File")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Open Local File"] && "✓ "}
-                    Open Local File
-                  </span>
+                  <span>Open Local File</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + O</span>
                   </div>
@@ -76,10 +90,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Save Version")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Save Version"] && "✓ "}
-                    Save Version
-                  </span>
+                  <span>Save Version</span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -90,10 +101,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Make a Copy")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Make a Copy"] && "✓ "}
-                    Make a Copy
-                  </span>
+                  <span>Make a Copy</span>
                 </div>
               </div>
 
@@ -103,10 +111,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Share")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Share"] && "✓ "}
-                    Share
-                  </span>
+                  <span>Share</span>
                 </div>
               </div>
 
@@ -116,10 +121,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Rename")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Rename"] && "✓ "}
-                    Rename
-                  </span>
+                  <span>Rename</span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -130,10 +132,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Import")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Import"] && "✓ "}
-                    Import
-                  </span>
+                  <span>Import</span>
                 </div>
               </div>
 
@@ -143,10 +142,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Close File")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Close File"] && "✓ "}
-                    Close File
-                  </span>
+                  <span>Close File</span>
                 </div>
               </div>
             </div>
@@ -164,7 +160,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Edit
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* Edit Dropdown */}
@@ -176,10 +174,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Undo")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Undo"] && "✓ "}
-                    Undo
-                  </span>
+                  <span>Undo</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Z</span>
                   </div>
@@ -192,10 +187,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Redo")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Redo"] && "✓ "}
-                    Redo
-                  </span>
+                  <span>Redo</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Shift + Z</span>
                   </div>
@@ -209,10 +201,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Undo History")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Undo History"] && "✓ "}
-                    Undo History
-                  </span>
+                  <span>Undo History</span>
                 </div>
               </div>
 
@@ -222,10 +211,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Redo History")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Redo History"] && "✓ "}
-                    Redo History
-                  </span>
+                  <span>Redo History</span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -236,10 +222,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Find")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Find"] && "✓ "}
-                    Find
-                  </span>
+                  <span>Find</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + F</span>
                   </div>
@@ -252,10 +235,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Delete")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Delete"] && "✓ "}
-                    Delete
-                  </span>
+                  <span>Delete</span>
                 </div>
               </div>
 
@@ -265,10 +245,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Select by...")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Select by..."] && "✓ "}
-                    Select by...
-                  </span>
+                  <span>Select by...</span>
                 </div>
               </div>
 
@@ -278,10 +255,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Keymap")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Keymap"] && "✓ "}
-                    Keymap
-                  </span>
+                  <span>Keymap</span>
                 </div>
               </div>
             </div>
@@ -299,7 +273,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             View
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* View Dropdown */}
@@ -311,10 +287,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Grid")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Grid"] && "✓ "}
-                    Grid
-                  </span>
+                  <span>Grid</span>
                 </div>
               </div>
 
@@ -325,11 +298,10 @@ const MenuBar = () => {
                 onMouseLeave={() => setActiveSubMenu(null)}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Gizmo"] && "✓ "}
-                    Gizmo
+                  <span>Gizmo</span>
+                  <span className="dropdown-icon">
+                    <ArrowIcon />
                   </span>
-                  <span className="icon">▾</span>
                 </div>
                 <div className="split"></div>
 
@@ -346,16 +318,14 @@ const MenuBar = () => {
                         Visibility
                       </span>
                     </div>
+                    <div className="split"></div>
 
                     {/* Cube view */}
                     <div
                       className="submenu-item"
                       onClick={() => toggleSelection("Cube view")}
                     >
-                      <span>
-                        {selectedItems["Cube view"] && "✓ "}
-                        Cube view
-                      </span>
+                      <span>Cube view</span>
                     </div>
 
                     {/* Sphere view */}
@@ -363,21 +333,7 @@ const MenuBar = () => {
                       className="submenu-item"
                       onClick={() => toggleSelection("Sphere view")}
                     >
-                      <span>
-                        {selectedItems["Sphere view"] && "✓ "}
-                        Sphere view
-                      </span>
-                    </div>
-
-                    {/* Custom settings */}
-                    <div
-                      className="submenu-item"
-                      onClick={() => toggleSelection("Custom settings")}
-                    >
-                      <span>
-                        {selectedItems["Custom settings"] && "✓ "}
-                        Custom settings
-                      </span>
+                      <span>Sphere view</span>
                     </div>
                   </div>
                 )}
@@ -389,10 +345,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Zoom")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Zoom"] && "✓ "}
-                    Zoom
-                  </span>
+                  <span>Zoom</span>
                 </div>
               </div>
 
@@ -402,10 +355,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Full Screen")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Full Screen"] && "✓ "}
-                    Full Screen
-                  </span>
+                  <span>Full Screen</span>
                   <div className="menu-item-right">
                     <span className="shortcut">F11</span>
                   </div>
@@ -424,11 +374,7 @@ const MenuBar = () => {
             setActiveSubMenu(null);
           }}
         >
-          <div className="menu-button">
-            Version history
-          </div>
-
-   
+          <div className="menu-button">Version history</div>
         </div>
 
         {/* Export As Menu */}
@@ -440,14 +386,27 @@ const MenuBar = () => {
             setActiveSubMenu(null);
           }}
         >
-          <div className="menu-button">
-            Export as...
-          </div>
+          <div className="menu-button">Export as...</div>
+        </div>
 
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("theme")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+          onClick={() => {
+            handleThemeChange();
+          }}
+        >
+          <div className="menu-button">
+            Theme <div className="value">{savedTheme}</div>
+          </div>
         </div>
 
         {/* Apps Menu */}
-        <div
+        {/* <div
           className="menu-button-container"
           onMouseEnter={() => setActiveMenu("Apps")}
           onMouseLeave={() => {
@@ -457,68 +416,64 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Apps
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
-          {/* Apps Dropdown */}
           {activeMenu === "Apps" && (
             <div className="dropdown-menu">
-              {/* New App */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("New App")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["New App"] && "✓ "}
+                    
                     New App
                   </span>
                 </div>
                 <div className="split"></div>
-
               </div>
 
-              {/* Work-flow Monitor */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("Work-flow Monitor")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["Work-flow Monitor"] && "✓ "}
+                    
                     Work-flow Monitor
                   </span>
                 </div>
               </div>
 
-              {/* Temperature Visualizer */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("Temperature Visualizer")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["Temperature Visualizer"] && "✓ "}
+                    
                     Temperature Visualizer
                   </span>
                 </div>
               </div>
 
-              {/* View all */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("View all")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["View all"] && "✓ "}
+                    
                     View all
                   </span>
                 </div>
               </div>
             </div>
           )}
-        </div>
+        </div> */}
 
         {/* Help Menu */}
         <div
@@ -531,7 +486,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Help
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* Help Dropdown */}
@@ -543,10 +500,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Shortcuts")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Shortcuts"] && "✓ "}
-                    Shortcuts
-                  </span>
+                  <span>Shortcuts</span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Shift + ?</span>
                   </div>
@@ -559,10 +513,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Manual")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Manual"] && "✓ "}
-                    Manual
-                  </span>
+                  <span>Manual</span>
                 </div>
               </div>
 
@@ -572,10 +523,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Video Tutorials")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Video Tutorials"] && "✓ "}
-                    Video Tutorials
-                  </span>
+                  <span>Video Tutorials</span>
                 </div>
               </div>
 
@@ -585,10 +533,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Report a bug")}
               >
                 <div className="menu-item">
-                  <span>
-                    {selectedItems["Report a bug"] && "✓ "}
-                    Report a bug
-                  </span>
+                  <span>Report a bug</span>
                 </div>
               </div>
             </div>
@@ -600,5 +545,3 @@ const MenuBar = () => {
 };
 
 export default MenuBar;
-
-

app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx

@@ -211,9 +211,10 @@ const BarGraphComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
     labels: [],
     datasets: [],
@@ -236,6 +237,10 @@ const BarGraphComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -270,7 +275,7 @@ const BarGraphComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -285,7 +290,7 @@ const BarGraphComponent = ({
           },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -304,15 +309,12 @@ const BarGraphComponent = ({
 
 
     const startStream = () => {  
-      console.log("inputtttttttttt",inputData);
       socket.emit("lineInput", inputData);
     };
 
     socket.on("connect", startStream);
 
     socket.on("lineOutput", (response) => {
-      console.log("responce dataaaaaaaaa",response.data);
-      
       const responseData = response.data;
 
       // Extract timestamps and values
@@ -347,6 +349,7 @@ const BarGraphComponent = ({
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
         } else {
           console.log("Unexpected response:", response);
         }
@@ -365,7 +368,7 @@ const BarGraphComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx

@@ -1,22 +1,64 @@
-import { useMemo } from "react";
-import { Doughnut, Line } from "react-chartjs-2";
+import React, { useEffect, useMemo, useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import io from "socket.io-client";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
 
 interface ChartComponentProps {
+  id: string;
   type: any;
   title: string;
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
 }
 
 const DoughnutGraphComponent = ({
+  id,
+  type,
   title,
   fontFamily,
   fontSize,
   fontWeight = "Regular",
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  const { themeColor } = useThemeStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    labels: [],
+    datasets: [],
+  });
+   const { selectedChartId } = useWidgetStore();
+
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
+  const defaultData = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "Dataset",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: ["#6f42c1"],
+        borderColor: "#b392f0",
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
+  // Memoize Theme Colors
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+
+  // Memoize Font Styling
   const chartFontWeightMap = useMemo(
     () => ({
       Light: "lighter" as const,
@@ -26,19 +68,9 @@ const DoughnutGraphComponent = ({
     []
   );
 
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
 
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
   const chartFontStyle = useMemo(
     () => ({
       family: fontFamily || "Arial",
@@ -48,46 +80,110 @@ const DoughnutGraphComponent = ({
     [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: false, // This hides the x-axis labels
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: name,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
           },
         },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+        scales: {
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
+        },
+      }),
+      [title, chartFontStyle, name]
+    );
 
-  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,
-      },
-    ],
-  };
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])
 
-  return <Doughnut data={chartData} options={options} />;
+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+
+    const socket = io(`http://${iotApiUrl}`);
+
+    const inputData = {
+      measurements,
+      duration,
+      interval: 1000,
+    };
+
+
+    const startStream = () => {  
+      socket.emit("lineInput", inputData);
+    };
+
+    socket.on("connect", startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responseData = response.data;
+
+      // Extract timestamps and values
+      const labels = responseData.time;
+      const datasets = Object.keys(measurements).map((key) => {
+        const measurement = measurements[key];
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        return {
+          label: datasetKey,
+          data: responseData[datasetKey]?.values ?? [],
+          backgroundColor: "#6f42c1",
+          borderColor: "#b392f0",
+          borderWidth: 1,
+        };
+      });
+
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.disconnect();
+    };
+  }, [measurements, duration, iotApiUrl]);
+
+  const fetchSavedInputes = async() => {
+    
+    if (id !== "") {
+      try {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        if (response.status === 200) {
+          setmeasurements(response.data.Data.measurements)
+          setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }
+  ,[chartMeasurements, chartDuration, widgetName])
+
+  return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default DoughnutGraphComponent;
+export default DoughnutGraphComponent;

app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx

@@ -24,9 +24,10 @@ const LineGraphComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
     labels: [],
     datasets: [],
@@ -49,6 +50,10 @@ const LineGraphComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -83,7 +88,7 @@ const LineGraphComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -98,7 +103,7 @@ const LineGraphComponent = ({
           },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -157,6 +162,7 @@ const LineGraphComponent = ({
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
         } else {
           console.log("Unexpected response:", response);
         }
@@ -175,7 +181,7 @@ const LineGraphComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx

@@ -210,9 +210,10 @@ const PieChartComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
     labels: [],
     datasets: [],
@@ -235,6 +236,10 @@ const PieChartComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -269,7 +274,7 @@ const PieChartComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -284,7 +289,7 @@ const PieChartComponent = ({
           // },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -343,6 +348,7 @@ const PieChartComponent = ({
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
         } else {
           console.log("Unexpected response:", response);
         }
@@ -361,7 +367,7 @@ const PieChartComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx

@@ -1,22 +1,64 @@
-import { useMemo } from "react";
-import { Line, PolarArea } from "react-chartjs-2";
+import React, { useEffect, useMemo, useState } from "react";
+import { PolarArea } from "react-chartjs-2";
+import io from "socket.io-client";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
 
 interface ChartComponentProps {
+  id: string;
   type: any;
   title: string;
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
 }
 
 const PolarAreaGraphComponent = ({
+  id,
+  type,
   title,
   fontFamily,
   fontSize,
   fontWeight = "Regular",
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  const { themeColor } = useThemeStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    labels: [],
+    datasets: [],
+  });
+   const { selectedChartId } = useWidgetStore();
+
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
+  const defaultData = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "Dataset",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: ["#6f42c1"],
+        borderColor: "#b392f0",
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
+  // Memoize Theme Colors
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+
+  // Memoize Font Styling
   const chartFontWeightMap = useMemo(
     () => ({
       Light: "lighter" as const,
@@ -26,19 +68,9 @@ const PolarAreaGraphComponent = ({
     []
   );
 
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
 
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
   const chartFontStyle = useMemo(
     () => ({
       family: fontFamily || "Arial",
@@ -48,46 +80,110 @@ const PolarAreaGraphComponent = ({
     [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: false, // This hides the x-axis labels
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: name,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
           },
         },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+        scales: {
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
+        },
+      }),
+      [title, chartFontStyle, name]
+    );
 
-  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,
-      },
-    ],
-  };
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])
 
-  return <PolarArea data={chartData} options={options} />;
+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+
+    const socket = io(`http://${iotApiUrl}`);
+
+    const inputData = {
+      measurements,
+      duration,
+      interval: 1000,
+    };
+
+
+    const startStream = () => {  
+      socket.emit("lineInput", inputData);
+    };
+
+    socket.on("connect", startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responseData = response.data;
+
+      // Extract timestamps and values
+      const labels = responseData.time;
+      const datasets = Object.keys(measurements).map((key) => {
+        const measurement = measurements[key];
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        return {
+          label: datasetKey,
+          data: responseData[datasetKey]?.values ?? [],
+          backgroundColor: "#6f42c1",
+          borderColor: "#b392f0",
+          borderWidth: 1,
+        };
+      });
+
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.disconnect();
+    };
+  }, [measurements, duration, iotApiUrl]);
+
+  const fetchSavedInputes = async() => {
+    
+    if (id !== "") {
+      try {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        if (response.status === 200) {
+          setmeasurements(response.data.Data.measurements)
+          setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }
+  ,[chartMeasurements, chartDuration, widgetName])
+
+  return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default PolarAreaGraphComponent;
+export default PolarAreaGraphComponent;

app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+type Props = {}
+
+const FleetEfficiencyComponent = ({
+    object
+}: any) => {
+    return (
+        <>
+            <h2 className="header">Fleet Efficiency</h2>
+            <div className="progressContainer">
+                <div className="progress">
+                    <div className="barOverflow">
+                        <div
+                            className="bar"
+                            style={{ transform: `rotate(${object.value}deg)` }}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+            <div className="scaleLabels">
+                <span>0%</span>
+                <div className="centerText">
+                    <div className="percentage">{object.per}%</div>
+                    <div className="status">Optimal</div>
+                </div>
+                <span>100%</span>
+            </div>
+        </>
+    )
+}
+
+export default FleetEfficiencyComponent

app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { WalletIcon } from '../../../icons/3dChartIcons'
+import { useWidgetStore } from '../../../../store/useWidgetStore';
+
+const TotalCardComponent = ({
+    object
+}: any) => {
+
+    const { setSelectedChartId } =
+        useWidgetStore();
+    return (
+        <>
+            <div className="header-wrapper" onClick={() => {
+                setSelectedChartId(object.id)
+            }}>
+                <div className="header">{object.header}</div>
+                <div className="data-values">
+                    <div className="value">{object.value}</div>
+                    <div className="per">{object.per}</div>
+                </div>
+            </div>
+            <div className="icon">
+                <WalletIcon />
+            </div>
+        </>
+    )
+}
+
+export default TotalCardComponent

app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { Line } from 'react-chartjs-2'
+import axios from 'axios';
+
+const WarehouseThroughputComponent = ({
+    object
+}: any) => {
+
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+
+    const lineGraphData = {
+        labels: [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ], // Months of the year
+        datasets: [
+          {
+            label: "Throughput (units/month)",
+            data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
+            borderColor: "#6f42c1", // Use the desired color for the line (purple)
+            backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
+            borderWidth: 2, // Line thickness
+            fill: true, // Enable fill for this dataset
+            pointRadius: 0, // Remove dots at each data point
+            tension: 0.5, // Smooth interpolation for the line
+          },
+        ],
+      };
+    
+      // Line graph options
+      const lineGraphOptions = {
+        responsive: true,
+        maintainAspectRatio: false, // Allow custom height/width adjustments
+        plugins: {
+          legend: {
+            display: false, // Hide legend
+          },
+          title: {
+            display: false, // No chart title needed
+          },
+          tooltip: {
+            callbacks: {
+              label: (context: any) => {
+                const value = context.parsed.y;
+                return `${value} units`; // Customize tooltip to display "units"
+              },
+            },
+          },
+        },
+        scales: {
+          x: {
+            grid: {
+              display: false, // Hide x-axis grid lines
+            },
+            ticks: {
+              maxRotation: 0, // Prevent label rotation
+              autoSkip: false, // Display all months
+              font: {
+                size: 8, // Adjust font size for readability
+                color: "#ffffff", // Light text color for labels
+              },
+            },
+          },
+          y: {
+            display: true, // Show y-axis
+            grid: {
+              drawBorder: false, // Remove border line
+              color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
+              borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
+            },
+            ticks: {
+              font: {
+                size: 8, // Adjust font size for readability
+                color: "#ffffff", // Light text color for ticks
+              },
+            },
+          },
+        },
+        elements: {
+          line: {
+            tension: 0.5, // Smooth interpolation for the line
+          },
+        },
+      };
+
+
+    //   const fetchSavedInputes = async() => {
+    
+    //     if (object.id !== "") {
+    //       try {
+    //         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+    //         if (response.status === 200) {
+    //           setmeasurements(response.data.Data.measurements)
+    //           setDuration(response.data.Data.duration)
+    //           setName(response.data.widgetName)
+    //         } else {
+    //           console.log("Unexpected response:", response);
+    //         }
+    //       } catch (error) {
+    //         console.error("There was an error!", error);
+    //       }
+    //     }
+    //   }
+
+      
+    return (
+        <>
+            <div className="header">
+                <h2>Warehouse Throughput</h2>
+                <p>
+                    <span>(+5) more</span> in 2025
+                </p>
+            </div>
+            <div className="lineGraph" style={{ height: "100%" }}>
+                <Line data={lineGraphData} options={lineGraphOptions} />
+            </div>
+        </>
+    )
+}
+
+export default WarehouseThroughputComponent