Bug Fixes:

- Zone Selection Panel moves to the bottom when the bottom panel is hidden. - Zone Selection Panel gets hidden by 3D widgets when switching zones. - Template image not rendering on the Template page despite being saved.
2025-04-10 18:13:41 +05:30
parent 5f0f5034de a30651b0d4
commit 2ce930a6f5
46 changed files with 945 additions and 465 deletions
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -6,6 +6,8 @@ import {
 } from "../../icons/RealTimeVisulationIcons";
 import { AddIcon } from "../../icons/ExportCommonIcons";
 import { useSocketStore } from "../../../store/store";
+import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
+import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";

 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -88,8 +90,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
  };

  // Function to toggle lock/unlock a panel
-  const toggleLockPanel = (side: Side) => {
-    console.log("side: ", side);
+  const toggleLockPanel = async (side: Side) => {
+    // console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
    //add api
    const newLockedPanels = selectedZone.lockedPanels.includes(side)
      ? selectedZone.lockedPanels.filter((panel) => panel !== side)
@@ -100,29 +104,70 @@ const AddButtons: React.FC<ButtonsProps> = ({
      lockedPanels: newLockedPanels,
    };

-    // Update the selectedZone state
+    let lockedPanel = {
+      organization: organization,
+      lockedPanel: newLockedPanels,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:locked", lockedPanel);
+    }
+
    setSelectedZone(updatedZone);
+    // let response = await lockPanel(selectedZone.zoneId, organization, newLockedPanels)
+    // console.log('response: ', response);
+    // if (response.message === 'locked panel updated successfully') {
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
  };

  // Function to clean all widgets from a panel
-  const cleanPanel = (side: Side) => {
+  const cleanPanel = async (side: Side) => {
    //add api
-    console.log("side: ", side);
+    // console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+
+    let clearPanel = {
+      organization: organization,
+      panelName: side,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:clear", clearPanel);
+    }
    const cleanedWidgets = selectedZone.widgets.filter(
      (widget) => widget.panel !== side
    );
-
    const updatedZone = {
      ...selectedZone,
      widgets: cleanedWidgets,
    };
    // Update the selectedZone state
+    // console.log('updatedZone: ', updatedZone);
    setSelectedZone(updatedZone);
+
+    // let response = await clearPanel(selectedZone.zoneId, organization, side)
+    // console.log('response: ', response);
+    // if (response.message === 'PanelWidgets cleared successfully') {
+
+    //   const cleanedWidgets = selectedZone.widgets.filter(
+    //     (widget) => widget.panel !== side
+    //   );
+    //   const updatedZone = {
+    //     ...selectedZone,
+    //     widgets: cleanedWidgets,
+    //   };
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
  };

  // Function to handle "+" button click
  const handlePlusButtonClick = async (side: Side) => {
    if (selectedZone.activeSides.includes(side)) {
+      console.log("open");
      // Panel already exists: Remove widgets from that side and update activeSides
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -13,6 +13,10 @@ import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zone
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";

+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 interface DisplayZoneProps {
  zonesData: {
    [key: string]: {
@@ -59,12 +63,15 @@ interface DisplayZoneProps {
      }[];
    }>
  >;
+  hiddenPanels: HiddenPanels; // Updated prop type
+  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
 }

 const DisplayZone: React.FC<DisplayZoneProps> = ({
  zonesData,
  selectedZone,
  setSelectedZone,
+  hiddenPanels,
 }) => {
  // Ref for the container element
  const containerRef = useRef<HTMLDivElement | null>(null);
@@ -73,9 +80,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  // State to track overflow visibility
  const [showLeftArrow, setShowLeftArrow] = useState(false);
  const [showRightArrow, setShowRightArrow] = useState(false);
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
-  
-  const{setSelectedChartId}=useWidgetStore()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
+
+  const { setSelectedChartId } = useWidgetStore();

  // Function to calculate overflow state
  const updateOverflowState = useCallback(() => {
@@ -152,7 +159,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      if (selectedZone?.zoneId === zoneId) {
        return;
      }
-      setSelectedChartId(null)
+      setSelectedChartId(null);
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
      let response = await getSelect2dZoneData(zoneId, organization);
@@ -167,7 +174,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
          useDroppedObjectsStore.getState().addObject(zoneName, val);
        });
      }
-      
+
      setSelectedZone({
        zoneName,
        activeSides: response.activeSides || [],
@@ -178,15 +185,18 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
        zoneViewPortTarget: response.viewPortCenter || {},
        zoneViewPortPosition: response.viewPortposition || {},
      });
-    } catch (error) {
-      
-    }
+    } catch (error) {}
  }

  return (
    <div
      ref={containerRef}
-      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") ? "bottom" : ""}`}
+      className={`zone-wrapper ${
+        selectedZone?.activeSides?.includes("bottom") &&
+        !hiddenPanels[selectedZone.zoneId]?.includes("bottom")
+          ? "bottom"
+          : ""
+      }`}
    >
      {/* Left Arrow */}
      {showLeftArrow && (
@@ -196,8 +206,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      )}

      {/* Scrollable Zones Container */}
-      <div 
-        ref={scrollContainerRef} 
+      <div
+        ref={scrollContainerRef}
        className="zones-wrapper"
        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
      >
@@ -206,8 +216,12 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
            {Object.keys(zonesData).map((zoneName, index) => (
              <div
                key={index}
-                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""}`}
-                onClick={() => handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)}
+                className={`zone ${
+                  selectedZone.zoneName === zoneName ? "active" : ""
+                }`}
+                onClick={() =>
+                  handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
+                }
              >
                {zoneName}
              </div>
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -49,7 +49,7 @@ const DroppedObjects: React.FC = () => {
  const { visualizationSocket } = useSocketStore();
  const { isPlaying } = usePlayButtonStore();
  const zones = useDroppedObjectsStore((state) => state.zones);
-  console.log('zones: ', zones);
+
  const [openKebabId, setOpenKebabId] = useState<string | null>(null);
  const updateObjectPosition = useDroppedObjectsStore(
    (state) => state.updateObjectPosition
@@ -568,6 +568,7 @@ const DroppedObjects: React.FC = () => {
              left: leftPosition,
              right: rightPosition,
              bottom: bottomPosition,
+              pointerEvents: isPlaying ? "none" : "auto",
            }}
            onPointerDown={(event) => {
              setSelectedChartId(obj);
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -7,7 +7,7 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";

-import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
 import {
  useAsset3dWidget,
  useSocketStore,
@@ -73,9 +73,8 @@ const RealTimeVisulization: React.FC = () => {
  const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
  const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);

-  const [floatingWidgets, setFloatingWidgets] = useState<
-    Record<string, { zoneName: string; zoneId: string; objects: any[] }>
-  >({});
+  // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
  const { visualizationSocket } = useSocketStore();
@@ -135,7 +134,6 @@ const RealTimeVisulization: React.FC = () => {

  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
-
    try {
      event.preventDefault();
      const email = localStorage.getItem("email") || "";
@@ -181,6 +179,25 @@ const RealTimeVisulization: React.FC = () => {
      if (visualizationSocket) {
        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
      }
+      useDroppedObjectsStore
+        .getState()
+        .addObject(selectedZone.zoneName, newObject);
+
+      //I need to console here objects based on selectedZone.zoneId
+      // Console the objects after adding
+      const droppedObjectsStore = useDroppedObjectsStore.getState();
+      const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+
+      if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+        console.log(
+          `Objects for Zone ID: ${selectedZone.zoneId}`,
+          currentZone.objects
+        );
+        setFloatingWidget(currentZone.objects)
+      } else {
+        console.warn("Zone not found or mismatched zoneId");
+      }
+
      // let response = await addingFloatingWidgets(
      //   selectedZone.zoneId,
      //   organization,
@@ -188,24 +205,12 @@ const RealTimeVisulization: React.FC = () => {
      // );
      // Add the dropped object to the zone if the API call is successful
      // if (response.message === "FloatWidget created successfully") {
-      useDroppedObjectsStore
-        .getState()
-        .addObject(selectedZone.zoneName, newObject);
      // }
+
      // Update floating widgets state
-      setFloatingWidgets((prevWidgets) => ({
-        ...prevWidgets,
-        [selectedZone.zoneName]: {
-          ...prevWidgets[selectedZone.zoneName],
-          zoneName: selectedZone.zoneName,
-          zoneId: selectedZone.zoneId,
-          objects: [
-            ...(prevWidgets[selectedZone.zoneName]?.objects || []),
-            newObject,
-          ],
-        },
-      }));
-    } catch (error) {}
+
+    } catch (error) { }
+
  };

  useEffect(() => {
@@ -289,6 +294,8 @@ const RealTimeVisulization: React.FC = () => {
                zonesData={zonesData}
                selectedZone={selectedZone}
                setSelectedZone={setSelectedZone}
+                hiddenPanels={hiddenPanels}
+                setHiddenPanels={setHiddenPanels}
              />

              {!isPlaying && selectedZone?.zoneName !== "" && (
--- a/app/src/components/ui/componets/zoneAssets.tsx
+++ b/app/src/components/ui/componets/zoneAssets.tsx
@@ -12,25 +12,66 @@ export default function ZoneAssets() {
        if (!zoneAssetId) return
        console.log('zoneAssetId: ', zoneAssetId);
        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-        if (!AssetMesh) return;
+        if (AssetMesh) {
+            const bbox = new THREE.Box3().setFromObject(AssetMesh);
+            const size = bbox.getSize(new THREE.Vector3());
+            const center = bbox.getCenter(new THREE.Vector3());

-        const bbox = new THREE.Box3().setFromObject(AssetMesh);
-        const size = bbox.getSize(new THREE.Vector3());
-        const center = bbox.getCenter(new THREE.Vector3());
+            const front = new THREE.Vector3(0, 0, 1);
+            AssetMesh.localToWorld(front);
+            front.sub(AssetMesh.position).normalize();

-        const front = new THREE.Vector3(0, 0, 1);
-        AssetMesh.localToWorld(front);
-        front.sub(AssetMesh.position).normalize();
+            const distance = Math.max(size.x, size.y, size.z) * 2;
+            const newPosition = center.clone().addScaledVector(front, distance);

-        const distance = Math.max(size.x, size.y, size.z) * 2;
-        const newPosition = center.clone().addScaledVector(front, distance);
+            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
+            controls.setTarget(center.x, center.y, center.z, true);
+            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });

-        controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-        controls.setTarget(center.x, center.y, center.z, true);
-        controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
+            setSelectedFloorItem(AssetMesh);
+        } else {
+            console.log('zoneAssetId: ', zoneAssetId)
+            if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
+                let selectedAssetPosition = [
+                    zoneAssetId.position[0],
+                    10,
+                    zoneAssetId.position[2]
+                ];
+                console.log('selectedAssetPosition: ', selectedAssetPosition);
+                let selectedAssetTarget = [
+                    zoneAssetId.position[0],
+                    zoneAssetId.position[1],
+                    zoneAssetId.position[2]
+                ];
+                console.log('selectedAssetTarget: ', selectedAssetTarget);
+                const setCam = async () => {
+                    await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
+                    setTimeout(() => {
+                        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
+                        if (AssetMesh) {
+                            const bbox = new THREE.Box3().setFromObject(AssetMesh);
+                            const size = bbox.getSize(new THREE.Vector3());
+                            const center = bbox.getCenter(new THREE.Vector3());

-        setSelectedFloorItem(AssetMesh);
+                            const front = new THREE.Vector3(0, 0, 1);
+                            AssetMesh.localToWorld(front);
+                            front.sub(AssetMesh.position).normalize();

+                            const distance = Math.max(size.x, size.y, size.z) * 2;
+                            const newPosition = center.clone().addScaledVector(front, distance);
+
+                            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
+                            controls.setTarget(center.x, center.y, center.z, true);
+                            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
+
+                            setSelectedFloorItem(AssetMesh);
+                        }
+                    }, 500)
+
+                };
+                setCam();
+            }
+        }
    }, [zoneAssetId, scene, controls])


--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -4,6 +4,7 @@ import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
 import { useFloorItems, useZones } from "../../../store/store";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";

 interface DropDownListProps {
  value?: string; // Value to display in the DropDownList
@@ -52,10 +53,10 @@ const DropDownList: React.FC<DropDownListProps> = ({
  interface ZoneData {
    id: string;
    name: string;
-    assets: { id: string; name: string; position?: [] ;rotation?:{}}[];
+    assets: { id: string; name: string; position?: []; rotation?: {} }[];
  }
  const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
-  const { floorItems, setFloorItems } = useFloorItems();
+  const { floorItems } = useFloorItems();

  const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
    let inside = false;
@@ -70,9 +71,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
    }
    return inside;
  };
-  useEffect(() => {

-    const updatedZoneList: ZoneData[] = zones.map((zone: Zone) => {
+  useEffect(() => {
+    const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
      const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];

      const assetsInZone = floorItems
@@ -84,7 +85,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
          id: item.modeluuid,
          name: item.modelname,
          position: item.position,
-          rotation:item.rotation
+          rotation: item.rotation
        }));

      return {
@@ -96,9 +97,6 @@ const DropDownList: React.FC<DropDownListProps> = ({
    setZoneDataList(updatedZoneList);
  }, [zones, floorItems]);

-
-
-
  return (
    <div className="dropdown-list-container">
      <div className="head">
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -13,7 +13,9 @@ import {
  RmoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
-import { useZoneAssetId } from "../../../store/store";
+import { useFloorItems, useZoneAssetId } from "../../../store/store";
+import { zoneCameraUpdate } from "../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
+import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";

 interface Asset {
  id: string;
@@ -38,11 +40,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { activeModule, setActiveModule } = useModuleStore();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+
  const { setSubModule } = useSubModuleStore();
  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
    {}
  );
-
+  const { floorItems, setFloorItems } = useFloorItems();

  useEffect(() => {
    useSelectedZoneStore.getState().setSelectedZone({
@@ -67,7 +70,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
  async function handleSelectZone(id: string) {
    try {
      if (selectedZone?.zoneId === id) {
-        console.log("Zone is already selected:", selectedZone.zoneName);
+
        return;
      }

@@ -89,19 +92,52 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
        zoneViewPortPosition: response?.viewPortposition || [],
      });

-      console.log("Zone selected:", response?.zoneName);
+
    } catch (error) {
-      console.error("Error selecting zone:", error);
+
    }
  }
  function handleAssetClick(asset: Asset) {
    setZoneAssetId(asset)
  }
+  async function handleZoneNameChange(newName: string) {
+    //zone apiiiiii
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    let zonesdata = {
+      zoneId: selectedZone.zoneId,
+      zoneName: newName
+    };
+    let response = await zoneCameraUpdate(zonesdata, organization);
+    if (response.message === "updated successfully") {
+      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+    }
+  }
+  async function handleZoneAssetName(newName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+
+    if (zoneAssetId?.id) {
+      let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
+      console.log('response: ', response);
+      setFloorItems((prevFloorItems: any[]) =>
+        prevFloorItems.map((floorItems) =>
+          floorItems.modeluuid === zoneAssetId.id
+            ? { ...floorItems, modelname: response.modelname }
+            : floorItems
+        )
+      );
+    }
+   
+    console.log('newName: ', newName);
+
+  }
+
  return (
    <>
-      {items.length > 0 ? (
+      {items?.length > 0 ? (
        <ul className="list-wrapper">
-          {items.map((item) => (
+          {items?.map((item) => (
            <React.Fragment key={`zone-${item.id}`}>
              <li className="list-container">
                <div className="list-item">
@@ -110,7 +146,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                      className="value"
                      onClick={() => handleSelectZone(item.id)}
                    >
-                      <RenameInput value={item.name} />
+                      <RenameInput value={item.name} onRename={handleZoneNameChange} />
                    </div>
                  </div>
                  <div className="options-container">
@@ -147,8 +183,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                        className="list-container asset-item"
                      >
                        <div className="list-item">
-                          <div className="value" onClick={() => handleAssetClick(asset)}>
-                            <RenameInput value={asset.name} />
+                          <div className="value" onClick={() => handleAssetClick(asset)} >
+                            <RenameInput value={asset.name} onRename={handleZoneAssetName} />
                          </div>
                          <div className="options-container">
                            <div className="lock option">
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -1,103 +1,96 @@
-import React, { useState, useEffect } from 'react'
-import { Line } from 'react-chartjs-2'
-import useChartStore from '../../../../store/useChartStore';
-import { useWidgetStore } from '../../../../store/useWidgetStore';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import { Line } from "react-chartjs-2";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
 import io from "socket.io-client";
-import { WalletIcon } from '../../../icons/3dChartIcons';
+import { WalletIcon } from "../../../icons/3dChartIcons";

+const TotalCardComponent = ({ object }: any) => {
+  const [progress, setProgress] = useState<any>(0);
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h");
+  const [name, setName] = useState(object.header ? object.header : "");
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0];
+  const { header, flotingDuration, flotingMeasurements } = useChartStore();
+  const { selectedChartId } = useWidgetStore();

-const TotalCardComponent = ({
-    object
-}: any) => {
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

-    const [ progress, setProgress ] = useState<any>(0)
-    const [measurements, setmeasurements] = useState<any>({});
-    const [duration, setDuration] = useState("1h")
-    const [name, setName] = useState(object.header ? object.header : '')
-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0]
-    const { header, flotingDuration, flotingMeasurements } = useChartStore();
-    const { selectedChartId } = useWidgetStore();
+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+      return;

-    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+    const socket = io(`http://${iotApiUrl}`);

-    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("lastInput", inputData);
-        };
-    
-        socket.on("connect", startStream);
-    
-        socket.on("lastOutput", (response) => {
-          const responseData = response.input1;
-          
-          if (typeof responseData === "number") {
-            setProgress(responseData);
-          }
-        });
-    
-        return () => {
-          socket.off("lastOutput");
-          socket.emit("stop_stream"); // Stop streaming when component unmounts
-          socket.disconnect();
-        };
-      }, [measurements, duration, iotApiUrl]);
-    
-      const fetchSavedInputes = async() => {
-        
-        if (object?.id !== "") {
-          try {
-            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
-            if (response.status === 200) {
-              setmeasurements(response.data.Data.measurements)
-              setDuration(response.data.Data.duration)
-              setName(response.data.header)
-            } else {
-              console.log("Unexpected response:", response);
-            }
-          } catch (error) {
-            console.error("There was an error!", error);
-          }
-        }
+    const inputData = {
+      measurements,
+      duration,
+      interval: 1000,
+    };
+
+    const startStream = () => {
+      socket.emit("lastInput", inputData);
+    };
+
+    socket.on("connect", startStream);
+
+    socket.on("lastOutput", (response) => {
+      const responseData = response.input1;
+
+      if (typeof responseData === "number") {
+        setProgress(responseData);
      }
-    
-      useEffect(() => {
-        fetchSavedInputes();
-      }, []);
-    
-      useEffect(() => {
-        if (selectedChartId?.id === object?.id) {
-          fetchSavedInputes();
+    });
+
+    return () => {
+      socket.off("lastOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.disconnect();
+    };
+  }, [measurements, duration, iotApiUrl]);
+
+  const fetchSavedInputes = async () => {
+    if (object?.id !== "") {
+      try {
+        const response = await axios.get(
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`
+        );
+        if (response.status === 200) {
+          setmeasurements(response.data.Data.measurements);
+          setDuration(response.data.Data.duration);
+          setName(response.data.header);
+        } else {
        }
-      }
-      ,[header, flotingDuration, flotingMeasurements])
+      } catch (error) {}
+    }
+  };

-    return (
-        <>
-            <div className="header-wrapper" >
-                <div className="header">{name}</div>
-                <div className="data-values">
-                    <div className="value">{progress}</div>
-                    <div className="per">{object.per}</div>
-                </div>
-            </div>
-            <div className="icon">
-                <WalletIcon />
-            </div>
-        </>
-    )
-}
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);

-export default TotalCardComponent
+  useEffect(() => {
+    if (selectedChartId?.id === object?.id) {
+      fetchSavedInputes();
+    }
+  }, [header, flotingDuration, flotingMeasurements]);
+
+  return (
+    <>
+      <div className="header-wrapper">
+        <div className="header">{name}</div>
+        <div className="data-values">
+          <div className="value">{progress}</div>
+          <div className="per">{object.per}</div>
+        </div>
+      </div>
+      <div className="icon">
+        <WalletIcon />
+      </div>
+    </>
+  );
+};
+
+export default TotalCardComponent;