Merge pull request '3dWidget dnd and 2d widgets backend api updated' (#21) from rtViz into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/21
2025-03-28 13:57:58 +00:00
parent b10613f360 71310bdbdd
commit 01588cf6c1
27 changed files with 400 additions and 133 deletions
--- a/app/src/components/layout/3D-cards/CardsScene.tsx
+++ b/app/src/components/layout/3D-cards/CardsScene.tsx
@@ -11,10 +11,10 @@ const CardsScene = () => {
      <Canvas>
        {/* 3d-cards */}

-        <Throughput />
-        {/* <ReturnOfInvestment /> */}
        {/* <ProductionCapacity /> */}
+        {/* <ReturnOfInvestment /> */}
        {/* <StateWorking /> */}
+        {/* <Throughput /> */}

        <OrbitControls />
      </Canvas>
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -21,8 +21,11 @@ ChartJS.register(
  Tooltip,
  Legend
 );
+interface ProductionCapacityProps {
+  position: [number, number, number];
+}

-const ProductionCapacity = () => {
+const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
  // Chart data for a week
  const chartData = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -76,7 +79,10 @@ const ProductionCapacity = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+   <Html position={[position[0], position[1], position[2]]}
+        scale={[0.5, 0.5, 0.5]}
+        transform
+        sprite>
      <div className="productionCapacity-wrapper card">
        <div className="headeproductionCapacityr-wrapper">
          <div className="header">Production Capacity</div>
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -35,8 +35,10 @@ const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
 }) => {
  return <Line data={data} options={options} />;
 };
-
-const ReturnOfInvestment = () => {
+interface ReturnOfInvestmentProps {
+  position: [number, number, number];
+}
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) => {
  // Improved sample data for the smooth curve graph (single day)
  const graphData: ChartData<"line"> = {
    labels: [
@@ -106,7 +108,10 @@ const ReturnOfInvestment = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="returnOfInvestment card">
        <div className="header">Return of Investment</div>
        <div className="lineGraph charts">
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -1,6 +1,9 @@
 import { Html } from "@react-three/drei";
-import image from "../../../../assets/image/temp/image.png";
-const StateWorking = () => {
+// import image from "../../../../assets/image/temp/image.png";
+interface StateWorkingProps {
+  position: [number, number, number];
+}
+const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
  const datas = [
    { key: "Oil Tank:", value: "24/341" },
    { key: "Oil Refin:", value: 36.023 },
@@ -10,7 +13,10 @@ const StateWorking = () => {
    { key: "Time:", value: 13 - 9 - 2023 },
  ];
  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="stateWorking-wrapper card">
        <div className="header-wrapper">
          <div className="header">
@@ -20,7 +26,7 @@ const StateWorking = () => {
            </span>
          </div>
          <div className="img">
-            <img src={image} alt="" />
+            {/* <img src={image} alt="" /> */}
          </div>
        </div>
        {/* Data */}
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -37,7 +37,12 @@ const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
  return <Line data={data} options={options} />;
 };

-const Throughput = () => {
+interface ThroughputProps {
+  position: [number, number, number];
+}
+
+const Throughput: React.FC<ThroughputProps> = ({ position }) => {
+
  // Sample data for the line graph
  const graphData: ChartData<"line"> = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -86,7 +91,10 @@ const Throughput = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="throughput-wrapper">
        <div className="header">Throughput</div>
        <div className="display-value">
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { ChartType } from "chart.js/auto";
 import ChartComponent from "./ChartComponent";
 import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
+import { generateUniqueId } from "../../../../../functions/generateUniqueId";

 const chartTypes: ChartType[] = [
  "bar",
@@ -40,7 +41,8 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
      onDragStart={() => {
        setDraggedAsset({
          type,
-          id: `widget-${index + 1}`,
+          id: generateUniqueId(
+          ),
          title,
          panel: "top",
          data: sampleData,
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
@@ -2,6 +2,7 @@ import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
 import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
 import widget3 from "../../../../../assets/image/3D/StateWorking.png";
 import widget4 from "../../../../../assets/image/3D/Throughput.png";
+import { useAsset3dWidget } from "../../../../../store/store";
 const Widgets3D = () => {
  const widgets = [
    { name: "Widget 1", img: widget1 },
@@ -9,17 +10,38 @@ const Widgets3D = () => {
    { name: "Widget 3", img: widget3 },
    { name: "Widget 4", img: widget4 },
  ];
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+

  return (
    <div className="widgets-container widget3D">
      {widgets?.map((widget, index) => (
-        <div key={index} className="widget-item" draggable>
-          <div className="widget-name">{widget.name}</div>
+        <div
+          key={index}
+          className="widget-item"
+          draggable
+          onDragStart={(e) => {
+            let crt = e.target
+            if (crt instanceof HTMLElement) {
+              const widget = crt.cloneNode(true) as HTMLElement;
+              console.log('widget: ', widget);
+              e.dataTransfer.setDragImage(widget,0,0)
+              e.dataTransfer.effectAllowed="move"
+            }
+          }}
+          onPointerDown={() => {
+            setWidgetSelect("ui-" + widget.name);
+          }}
+          onPointerUp={() => {
+            setWidgetSelect(""); // Clearing selection correctly
+          }}
+        >
+          {/* <div className="widget-name">{widget.name}</div> */}
          <img
            className="widget-image"
            src={widget.img}
            alt={widget.name}
-            draggable={false}
+            // draggable={false}
          />
        </div>
      ))}
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -16,6 +16,7 @@ interface ButtonsProps {
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
+
    lockedPanels: Side[];
    zoneId: string;
    zoneViewPortTarget: number[];
@@ -33,6 +34,7 @@ interface ButtonsProps {
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
+  
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -120,23 +122,39 @@ const AddButtons: React.FC<ButtonsProps> = ({
      console.log("updatedZone: ", updatedZone);
      setSelectedZone(updatedZone);
    } else {
-      // If the panel is not active, activate it
-      const newActiveSides = [...selectedZone.activeSides, side];
+      const updatePanelData = async () => {
+        try {
+          // Get email and organization safely
+          const email = localStorage.getItem("email") || "";
+          const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; // Fallback value

-      const updatedZone = {
-        ...selectedZone,
-        activeSides: newActiveSides,
-        panelOrder: newActiveSides,
+          // Prevent duplicate side entries
+          const newActiveSides = selectedZone.activeSides.includes(side)
+            ? [...selectedZone.activeSides]
+            : [...selectedZone.activeSides, side];
+
+          const updatedZone = {
+            ...selectedZone,
+            activeSides: newActiveSides,
+            panelOrder: newActiveSides,
+          };
+
+          // API call
+          const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
+          console.log("response: ", response);
+
+          // Update state
+          console.log("updatedZone: ", updatedZone);
+          setSelectedZone(updatedZone);
+        } catch (error) {
+          console.error("Error updating panel data:", error);
+        }
      };
-      const email = localStorage.getItem("email");
-      const organization = email!.split("@")[1].split(".")[0];
-      // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
-      // console.log('response: ', response);

-      // Update the selectedZone state
-      console.log("updatedZone: ", updatedZone);
-      setSelectedZone(updatedZone);
+      updatePanelData(); // Call the async function
    }
+
+
  };

  return (
@@ -146,9 +164,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
          <div key={side} className={`side-button-container ${side}`}>
            {/* "+" Button */}
            <button
-              className={`side-button ${side}${
-                selectedZone.activeSides.includes(side) ? " active" : ""
-              }`}
+              className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
+                }`}
              onClick={() => handlePlusButtonClick(side)}
              title={
                selectedZone.activeSides.includes(side)
@@ -166,9 +183,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
              <div className="extra-Bs">
                {/* Hide Panel */}
                <div
-                  className={`icon ${
-                    hiddenPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
+                    }`}
                  title={
                    hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                  }
@@ -190,9 +206,8 @@ const AddButtons: React.FC<ButtonsProps> = ({

                {/* Lock/Unlock Panel */}
                <div
-                  className={`icon ${
-                    selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                    }`}
                  title={
                    selectedZone.lockedPanels.includes(side)
                      ? "Unlock Panel"
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -3,6 +3,7 @@ import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";

 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -12,6 +13,7 @@ interface DisplayZoneProps {
    [key: string]: {
      activeSides: Side[];
      panelOrder: Side[];
+
      lockedPanels: Side[];
      widgets: Widget[];
      zoneId: string;
@@ -23,6 +25,7 @@ interface DisplayZoneProps {
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
+
    lockedPanels: Side[];
    zoneId: string;
    zoneViewPortTarget: number[];
@@ -40,6 +43,7 @@ interface DisplayZoneProps {
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
+
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -60,6 +64,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  selectedZone,
  setSelectedZone,
 }) => {
+
  // Ref for the container element
  const containerRef = useRef<HTMLDivElement | null>(null);

@@ -141,11 +146,28 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
    }
  };

+  async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
+    let response = await getSelect2dZoneData(zoneId, organization)
+    setSelectedZone({
+      zoneName,
+      activeSides: response.activeSides,
+      panelOrder: response.panelOrder,
+      lockedPanels: response.lockedPanels,
+      widgets: response.widgets,
+      zoneId: zoneId,
+      zoneViewPortTarget:
+        response.viewPortCenter,
+      zoneViewPortPosition:
+        response.viewPortposition,
+    });
+  }
+
  return (
    <div
-      className={`zone-wrapper ${
-        selectedZone?.activeSides?.includes("bottom") && "bottom"
-      }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
+        }`}
    >
      {/* Left Arrow */}
      {showLeftArrow && (
@@ -160,23 +182,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
          {Object.keys(zonesData).map((zoneName, index) => (
            <div
              key={index}
-              className={`zone ${
-                selectedZone.zoneName === zoneName ? "active" : ""
-              }`}
+              className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
+                }`}
              onClick={() => {
                useDroppedObjectsStore.getState().setZone(zoneName, zonesData[zoneName]?.zoneId);
-                setSelectedZone({
-                  zoneName,
-                  activeSides: zonesData[zoneName].activeSides || [],
-                  panelOrder: zonesData[zoneName].panelOrder || [],
-                  lockedPanels: zonesData[zoneName].lockedPanels || [],
-                  widgets: zonesData[zoneName].widgets || [],
-                  zoneId: zonesData[zoneName]?.zoneId || "",
-                  zoneViewPortTarget:
-                    zonesData[zoneName].zoneViewPortTarget || [],
-                  zoneViewPortPosition:
-                    zonesData[zoneName].zoneViewPortPosition || [],
-                });
+                handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
              }}
            >
              {zoneName}
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -36,6 +36,7 @@ export const DraggableWidget = ({
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
+
    lockedPanels: Side[];
    widgets: Widget[];
  };
@@ -44,6 +45,7 @@ export const DraggableWidget = ({
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
+
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -78,9 +80,11 @@ export const DraggableWidget = ({
  const isPanelHidden = hiddenPanels.includes(widget.panel);

  const deleteSelectedChart = () => {
+    console.log('widget.id: ', widget.id);
    const updatedWidgets = selectedZone.widgets.filter(
      (w: Widget) => w.id !== widget.id
    );
+    console.log('updatedWidgets: ', updatedWidgets);

    setSelectedZone((prevZone: any) => ({
      ...prevZone,
@@ -122,7 +126,6 @@ export const DraggableWidget = ({
      ...widget,
      id: `${widget.id}-copy-${Date.now()}`,
    };
-
    setSelectedZone((prevZone: any) => ({
      ...prevZone,
      widgets: [...prevZone.widgets, duplicatedWidget],
@@ -130,7 +133,7 @@ export const DraggableWidget = ({

    setOpenKebabId(null);

-    console.log("Duplicated widget with ID:", duplicatedWidget.id);
+
  };

  const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -173,6 +176,7 @@ export const DraggableWidget = ({
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+
    event.preventDefault();
    const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
    const toIndex = index; // The index of the widget where the drop occurred
@@ -186,9 +190,8 @@ export const DraggableWidget = ({
      <div
        draggable
        key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && "activeChart"
-        }`}
+        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
+          }`}
        onPointerDown={handlePointerDown}
        onDragStart={handleDragStart}
        onDragEnter={handleDragEnter}
@@ -208,9 +211,8 @@ export const DraggableWidget = ({
        {openKebabId === widget.id && (
          <div className="kebab-options" ref={widgetRef}>
            <div
-              className={`edit btn ${
-                isPanelFull(widget.panel) ? "btn-blur" : ""
-              }`}
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
            >
              <div className="icon">
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -0,0 +1,79 @@
+
+import { useThree } from "@react-three/fiber";
+import React, { useState, useEffect } from "react";
+import { useAsset3dWidget } from "../../../store/store";
+import useModuleStore from "../../../store/useModuleStore";
+import { ThreeState } from "../../../types/world/worldTypes";
+import * as THREE from "three";
+import Throughput from "../../layout/3D-cards/cards/Throughput";
+import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
+import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
+import StateWorking from "../../layout/3D-cards/cards/StateWorking";
+
+export default function Dropped3dWidgets() {
+    const { widgetSelect } = useAsset3dWidget();
+    const { activeModule } = useModuleStore();
+    const { raycaster, gl, scene }: ThreeState = useThree();
+
+    // 🔥 Store multiple instances per widget type
+    const [widgetPositions, setWidgetPositions] = useState<Record<string, [number, number, number][]>>({});
+
+    useEffect(() => {
+        if (activeModule !== "visualization") return;
+        const canvasElement = gl.domElement;
+
+        const onDrop = (event: DragEvent) => {
+            event.preventDefault(); // Prevent default browser behavior
+
+            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(Assets);
+
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
+
+
+                // ✅ Allow multiple instances by storing positions in an array
+                setWidgetPositions((prev) => ({
+                    ...prev,
+                    [widgetSelect]: [...(prev[widgetSelect] || []), [x, y, z]],
+                }));
+            }
+        };
+
+        canvasElement.addEventListener("drop", onDrop);
+
+        return () => {
+            canvasElement.removeEventListener("drop", onDrop);
+        };
+    }, [widgetSelect, activeModule]);
+
+    return (
+        <>
+            {widgetPositions["ui-Widget 1"]?.map((pos, index) => (
+                <ProductionCapacity key={`Widget1-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 2"]?.map((pos, index) => (
+                <ReturnOfInvestment key={`Widget2-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 3"]?.map((pos, index) => (
+                <StateWorking key={`Widget3-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 4"]?.map((pos, index) => (
+                <Throughput key={`Widget4-${index}`} position={pos} />
+            ))}
+        </>
+    );
+}
+
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -8,7 +8,6 @@ import { useDroppedObjectsStore, Zones } from "../../../store/useDroppedObjectsS

 const DroppedObjects: React.FC = () => {
  const zones = useDroppedObjectsStore((state) => state.zones);
-  
  const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
  const [draggingIndex, setDraggingIndex] = useState<{ zone: string; index: number } | null>(null);
  const [offset, setOffset] = useState<[number, number] | null>(null);
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../store/useWidgetStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { DraggableWidget } from "./DraggableWidget";
 import { arrayMove } from "@dnd-kit/sortable";
+import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";

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

@@ -19,6 +20,7 @@ interface PanelProps {
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
+
    lockedPanels: Side[];
    zoneId: string;
    zoneViewPortTarget: number[];
@@ -30,6 +32,7 @@ interface PanelProps {
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
+
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -72,9 +75,8 @@ const Panel: React.FC<PanelProps> = ({
        case "top":
        case "bottom":
          return {
-            width: `calc(100% - ${
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-            }px)`,
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
            height: `${panelSize - 2}px`,
            left: leftActive ? `${panelSize}px` : "0",
            right: rightActive ? `${panelSize}px` : "0",
@@ -84,9 +86,8 @@ const Panel: React.FC<PanelProps> = ({
        case "right":
          return {
            width: `${panelSize - 2}px`,
-            height: `calc(100% - ${
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-            }px)`,
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
            top: topActive ? `${panelSize}px` : "0",
            bottom: bottomActive ? `${panelSize}px` : "0",
            [side]: "0",
@@ -99,6 +100,7 @@ const Panel: React.FC<PanelProps> = ({
  );

  const handleDrop = (e: React.DragEvent, panel: Side) => {
+
    e.preventDefault();
    const { draggedAsset } = useWidgetStore.getState();
    if (!draggedAsset) return;
@@ -109,8 +111,6 @@ const Panel: React.FC<PanelProps> = ({

    if (currentWidgetsCount >= maxCapacity) return;

-    console.log("draggedAsset: ", draggedAsset);
-    console.log("panel: ", panel);
    addWidgetToPanel(draggedAsset, panel);
  };

@@ -139,17 +139,27 @@ const Panel: React.FC<PanelProps> = ({
  };

  // while dublicate check this and add
-  const addWidgetToPanel = (asset: any, panel: Side) => {
+  const addWidgetToPanel = async (asset: any, panel: Side) => {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
    const newWidget = {
      ...asset,
      id: generateUniqueId(),
      panel,
    };
+    try {
+      let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
+      console.log("response: ", response);
+      if (response.message === "Widget created successfully") {
+        setSelectedZone((prev) => ({
+          ...prev,
+          widgets: [...prev.widgets, newWidget],
+        }));
+      }
+    } catch (error) {
+      console.error("Error adding widget:", error);
+    }

-    setSelectedZone((prev) => ({
-      ...prev,
-      widgets: [...prev.widgets, newWidget],
-    }));
  };

  useEffect(() => {
@@ -180,7 +190,7 @@ const Panel: React.FC<PanelProps> = ({

  const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
    if (!selectedZone) return; // Ensure selectedZone is not null
-    console.log("selectedZone: ", selectedZone);
+

    setSelectedZone((prev) => {
      if (!prev) return prev; // Ensure prev is not null
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -9,7 +9,9 @@ import useModuleStore from "../../../store/useModuleStore";

 import DroppedObjects from "./DroppedFloatingWidgets";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
-import { useZones } from "../../../store/store";
+import { useAsset3dWidget, useZones } from "../../../store/store";
+import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";


 type Side = "top" | "bottom" | "left" | "right";
@@ -19,6 +21,7 @@ type FormattedZoneData = Record<
  {
    activeSides: Side[];
    panelOrder: Side[];
+
    lockedPanels: Side[];
    zoneId: string;
    zoneViewPortTarget: number[];
@@ -43,25 +46,38 @@ const RealTimeVisulization: React.FC = () => {
  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zones } = useZones()
-
+  const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
  useEffect(() => {
-    const data = Array.isArray(zones) ? zones : [];
+    async function GetZoneData() {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      try {
+        const response = await getZone2dData(organization);
+        if (!Array.isArray(response)) {
+          return;
+        }
+        const formattedData = response.reduce<FormattedZoneData>((acc, zone) => {
+          acc[zone.zoneName] = {
+            activeSides: [],
+            panelOrder: [],
+            lockedPanels: [],
+            zoneId: zone.zoneId,
+            zoneViewPortTarget: zone.viewPortCenter,
+            zoneViewPortPosition: zone.viewPortposition,
+            widgets: [],
+          };
+          return acc;
+        }, {});
+        setZonesData(formattedData);
+      } catch (error) {
+        console.log('error: ', error);
+      }
+    }

-    const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
-      acc[zone.zoneName] = {
-        activeSides: [],
-        panelOrder: [],
-        lockedPanels: [],
-        zoneId: zone.zoneId,
-        zoneViewPortTarget: zone.viewPortCenter,
-        zoneViewPortPosition: zone.viewPortposition,
-        widgets: [],
-      };
-      return acc;
-    }, {});
+    GetZoneData();
+  }, []); // Removed `zones` from dependencies

-    setZonesData(formattedData);
-  }, [zones]);

  useEffect(() => {
    setZonesData((prev) => {
@@ -81,37 +97,47 @@ const RealTimeVisulization: React.FC = () => {
      };
    });
  }, [selectedZone]);
+  
+  useEffect(() => {
+
+  }, [floatingWidgets])

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
-    if (!data || !selectedZone.zoneName) return;
-  
+    if (widgetSelect !== "") return;
+    if (!data || selectedZone.zoneName === "") return;
+
    const droppedData = JSON.parse(data);
    const canvasElement = document.getElementById("real-time-vis-canvas");
    if (!canvasElement) return;
-  
+
    const canvasRect = canvasElement.getBoundingClientRect();
    const relativeX = event.clientX - canvasRect.left;
    const relativeY = event.clientY - canvasRect.top;
-  
+
    const newObject = {
      ...droppedData,
      position: [relativeY, relativeX], // Y first because of top/left style
    };
-  
-    console.log("newObject: ", newObject);
-  
    // Only set zone if it’s not already in the store (prevents overwriting objects)
    const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
    if (!existingZone) {
      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
    }
-  
    // Add the dropped object to the zone
    useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
+    setFloatingWidgets((prevWidgets) => ({
+      ...prevWidgets,
+      [selectedZone.zoneName]: {
+        ...prevWidgets[selectedZone.zoneName],
+        zoneName: selectedZone.zoneName,
+        zoneId: selectedZone.zoneId,
+        objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
+      },
+    }));
  };
-  
+

  return (
    <div
@@ -123,6 +149,7 @@ const RealTimeVisulization: React.FC = () => {
        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
      }}
+
    >
      <div
        className="scene-container"
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard.tsx
@@ -9,7 +9,7 @@ const ProgressCard = ({
 }) => (
  <div className="chart progressBar">
    <div className="header">{title}</div>
-    {data?.stocks.map((stock, index) => (
+    {data?.stocks?.map((stock, index) => (
      <div key={index} className="stock">
        <span className="stock-item">
          <span className="stockValues">