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/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -166,6 +166,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
        const response = await axios.get(
          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
        );
+   
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements);
          setDuration(response.data.Data.duration);
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -129,6 +129,7 @@ const Assets: React.FC = () => {
    } else {
      try {
        const res = await getCategoryAsset(asset);
+        console.log('res: ', res);
        setCategoryAssets(res);
        setFiltereredAssets(res);
      } catch (error) {}
@@ -191,7 +192,7 @@ const Assets: React.FC = () => {
                    onPointerDown={() =>
                      setSelectedItem({
                        name: asset.filename,
-                        id: asset.modelfileID,
+                        id: asset.AssetID,
                      })
                    }
                  />
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -88,22 +88,22 @@ const Templates = () => {
  return (
    <div className="template-list">
      {templates.map((template, index) => (
-        <div key={template.id} className="template-item">
+        <div
+          key={template.id}
+          className="template-item"
+          onClick={() => handleLoadTemplate(template)}
+        >
          {template?.snapshot && (
            <div className="template-image-container">
              <img
                src={template.snapshot}
                alt={`${template.name} preview`}
                className="template-image"
-                onClick={() => handleLoadTemplate(template)}
              />
            </div>
          )}
          <div className="template-details">
-            <div
-              onClick={() => handleLoadTemplate(template)}
-              className="template-name"
-            >
+            <div className="template-name">
              {/* {`Template ${index + 1}`} */}
              <RenameInput value={`Template ${index + 1}`} />
            </div>
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -104,7 +104,7 @@ const ProgressBarWidget = ({

 const Widgets2D = () => {
  return (
-    <div className="widget2D">
+    <div className="widget2D widgets-wrapper">
      <div className="chart-container">
        {chartTypes.map((type, index) => {
          const widgetTitle = `Widget ${index + 1}`;
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
@@ -12,22 +12,21 @@ const Widgets3D = () => {
  ];
  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();

-
  return (
-    <div className="widgets-container widget3D">
+    <div className="widgets-container widgets-wrapper widget3D">
      {widgets?.map((widget, index) => (
        <div
          key={index}
          className="widget-item"
          draggable
          onDragStart={(e) => {
-            let name = widget.name
-            let crt = e.target
+            let name = widget.name;
+            let crt = e.target;
            if (crt instanceof HTMLElement) {
              const widget = crt.cloneNode(true) as HTMLElement;
-              e.dataTransfer.setDragImage(widget, 0, 0)
-              e.dataTransfer.effectAllowed = "move"
-              e.dataTransfer.setData("text/plain", "ui-" + name)
+              e.dataTransfer.setDragImage(widget, 0, 0);
+              e.dataTransfer.effectAllowed = "move";
+              e.dataTransfer.setData("text/plain", "ui-" + name);
            }
          }}
          onPointerDown={() => {
@@ -42,7 +41,7 @@ const Widgets3D = () => {
            className="widget-image"
            src={widget.img}
            alt={widget.name}
-          draggable={false}
+            draggable={false}
          />
        </div>
      ))}
--- a/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx
@@ -1,32 +1,128 @@
 import React, { useRef, useMemo, useCallback, useState } from "react";
-import { InfoIcon } from "../../../icons/ExportCommonIcons";
+import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
-import {
-    useSelectedActionSphere,
-    useSimulationStates,
-    useSocketStore
-} from "../../../../store/store";
+import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
 import * as Types from '../../../../types/world/worldTypes';
-import LabeledButton from "../../../ui/inputs/LabledButton";
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import { handleResize } from "../../../../functions/handleResizePannel";
+
+interface ConnectedModel {
+    modelUUID: string;
+    modelName: string;
+    points: {
+        uuid: string;
+        position: [number, number, number];
+        index?: number;
+    }[];
+    triggers?: {
+        uuid: string;
+        name: string;
+        type: string;
+        isUsed: boolean;
+    }[];
+}

 const ArmBotMechanics: React.FC = () => {
    const { selectedActionSphere } = useSelectedActionSphere();
    const { simulationStates, setSimulationStates } = useSimulationStates();
    const { socket } = useSocketStore();
-    const [selectedTrigger, setSelectedTrigger] = useState<string | null>(null);
+    const [selectedProcessIndex, setSelectedProcessIndex] = useState<number | null>(null);
+    const actionsContainerRef = useRef<HTMLDivElement>(null);

-    const propertiesContainerRef = useRef<HTMLDivElement>(null);
-
-    // Get connected models for dropdowns
-    const connectedModels = useMemo(() => {
+    // Get connected models and their triggers
+    const connectedModels = useMemo<ConnectedModel[]>(() => {
        if (!selectedActionSphere?.points?.uuid) return [];

+        const armBotPaths = simulationStates.filter(
+            (path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
+        );
+
+        const currentPoint = armBotPaths.find(
+            (path) => path.points.uuid === selectedActionSphere.points.uuid
+        )?.points;
+
+        if (!currentPoint?.connections?.targets) return [];
+
+        return currentPoint.connections.targets.reduce<ConnectedModel[]>((acc, target) => {
+            const connectedModel = simulationStates.find(
+                (model) => model.modeluuid === target.modelUUID
+            );
+
+            if (!connectedModel) return acc;
+
+            let triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] = [];
+            let points: { uuid: string; position: [number, number, number] }[] = [];
+
+            if (connectedModel.type === "Conveyor") {
+                const conveyor = connectedModel as Types.ConveyorEventsSchema;
+
+                const connectedPointUUIDs = currentPoint?.connections?.targets
+                    .filter(t => t.modelUUID === connectedModel.modeluuid)
+                    .map(t => t.pointUUID) || [];
+
+                points = conveyor.points
+                    .map((point, idx) => ({
+                        uuid: point.uuid,
+                        position: point.position,
+                        index: idx
+                    }))
+                    .filter(point => connectedPointUUIDs.includes(point.uuid));
+
+
+                triggers = conveyor.points.flatMap(p => p.triggers?.filter(t => t.isUsed) || []);
+            }
+            else if (connectedModel.type === "StaticMachine") {
+                const staticMachine = connectedModel as Types.StaticMachineEventsSchema;
+
+                points = [{
+                    uuid: staticMachine.points.uuid,
+                    position: staticMachine.points.position
+                }];
+
+                triggers = staticMachine.points.triggers ?
+                    [{
+                        uuid: staticMachine.points.triggers.uuid,
+                        name: staticMachine.points.triggers.name,
+                        type: staticMachine.points.triggers.type,
+                        isUsed: true // StaticMachine triggers are always considered used
+                    }] : [];
+            }
+
+            if (!acc.some(m => m.modelUUID === connectedModel.modeluuid)) {
+                acc.push({
+                    modelUUID: connectedModel.modeluuid,
+                    modelName: connectedModel.modelName,
+                    points,
+                    triggers
+                });
+            }
+
+            return acc;
+        }, []);
    }, [selectedActionSphere, simulationStates]);

-    // Get triggers only from connected models
+    // Get triggers from connected models
    const connectedTriggers = useMemo(() => {
-    }, [connectedModels, simulationStates]);
+        return connectedModels.flatMap(model =>
+            (model.triggers || []).map(trigger => ({
+                ...trigger,
+                displayName: `${model.modelName} - ${trigger.name}`,
+                modelUUID: model.modelUUID
+            }))
+        );
+    }, [connectedModels]);
+
+    // Get all points from connected models
+    const connectedPoints = useMemo(() => {
+        return connectedModels.flatMap(model =>
+            model.points.map(point => ({
+                ...point,
+                displayName: `${model.modelName} - Point${typeof point.index === 'number' ? ` ${point.index}` : ''}`,
+                modelUUID: model.modelUUID
+            }))
+        );
+    }, [connectedModels]);
+

    const { selectedPoint } = useMemo(() => {
        if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null };
@@ -45,77 +141,148 @@ const ArmBotMechanics: React.FC = () => {
    }, [selectedActionSphere, simulationStates]);

    const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => {
-        // if (!updatedPath) return;
-        // const email = localStorage.getItem("email");
-        // const organization = email ? email.split("@")[1].split(".")[0] : "";
+        if (!updatedPath) return;
+        const email = localStorage.getItem("email");
+        const organization = email ? email.split("@")[1].split(".")[0] : "";

-        // const data = {
-        //     organization: organization,
-        //     modeluuid: updatedPath.modeluuid,
-        //     eventData: { type: "ArmBot", points: updatedPath.points }
-        // }
+        const data = {
+            organization: organization,
+            modeluuid: updatedPath.modeluuid,
+            eventData: { type: "ArmBot", points: updatedPath.points }
+        }
+        console.log('data: ', data);

-        // socket.emit('v2:model-asset:updateEventData', data);
+        socket.emit('v2:model-asset:updateEventData', data);
    }

-    // const handleActionUpdate = useCallback((updatedAction: Partial<Types.ArmBotEventsSchema['points']['actions']>) => {
-    //     if (!selectedActionSphere?.points?.uuid) return;
+    const handleActionUpdate = useCallback((updatedAction: Partial<Types.ArmBotEventsSchema['points']['actions']>) => {
+        if (!selectedActionSphere?.points?.uuid || !selectedPoint) return;

-    //     const updatedPaths = simulationStates.map((path) => {
-    //         return path;
-    //     });
+        const updatedPaths = simulationStates.map((path) => {
+            if (path.type === "ArmBot" && path.points.uuid === selectedActionSphere.points.uuid) {
+                return {
+                    ...path,
+                    points: {
+                        ...path.points,
+                        actions: {
+                            ...path.points.actions,
+                            ...updatedAction
+                        }
+                    }
+                };
+            }
+            return path;
+        });

-    //     const updatedPath = updatedPaths.find(
-    //         (path): path is Types.ArmBotEventsSchema =>
-    //             path.type === "ArmBot" &&
-    //             path.points.uuid === selectedActionSphere.points.uuid
-    //     );
-    //     updateBackend(updatedPath);
+        const updatedPath = updatedPaths.find(
+            (path): path is Types.ArmBotEventsSchema =>
+                path.type === "ArmBot" &&
+                path.points.uuid === selectedActionSphere.points.uuid
+        );
+        updateBackend(updatedPath);

-    //     setSimulationStates(updatedPaths);
-    // }, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);
+        setSimulationStates(updatedPaths);
+    }, [selectedActionSphere?.points?.uuid, selectedPoint, simulationStates, setSimulationStates]);

-    // const handleSpeedChange = useCallback((speed: number) => {
-    //     handleActionUpdate({ speed });
-    // }, [handleActionUpdate]);
+    const handleSpeedChange = useCallback((speed: number) => {
+        handleActionUpdate({ speed });
+    }, [handleActionUpdate]);

-    // const handleProcessChange = useCallback((processes: Types.ArmBotEventsSchema['points']['actions']['processes']) => {
-    //     handleActionUpdate({ processes });
-    // }, [handleActionUpdate]);
+    const handleProcessChange = useCallback((processes: Types.ArmBotEventsSchema['points']['actions']['processes']) => {
+        handleActionUpdate({ processes });
+    }, [handleActionUpdate]);

-    // const handleTriggerSelect = useCallback((displayName: string) => {
-    //     const selected = connectedTriggers.find(t => t.displayName === displayName);
-    //     setSelectedTrigger(selected?.uuid || null);
-    // }, [connectedTriggers]);
+    const handleAddProcess = useCallback(() => {
+        if (!selectedPoint) return;

-    // const handleStartPointSelect = useCallback((pointUUID: string) => {
-    //     if (!selectedTrigger || !selectedPoint) return;
+        const newProcess: any = {
+            triggerId: "",
+            startPoint: "",
+            endPoint: ""
+        };

-    //     const updatedProcesses = selectedPoint.actions.processes?.map(process =>
-    //         process.triggerId === selectedTrigger
-    //             ? { ...process, startPoint: pointUUID }
-    //             : process
-    //     ) || [];
+        const updatedProcesses = selectedPoint.actions.processes ? [...selectedPoint.actions.processes, newProcess] : [newProcess];

-    //     handleProcessChange(updatedProcesses);
-    // }, [selectedTrigger, selectedPoint, handleProcessChange]);
+        handleProcessChange(updatedProcesses);
+        setSelectedProcessIndex(updatedProcesses.length - 1);
+    }, [selectedPoint, handleProcessChange]);

-    // const handleEndPointSelect = useCallback((pointUUID: string) => {
-    //     if (!selectedTrigger || !selectedPoint) return;
+    const handleDeleteProcess = useCallback((index: number) => {
+        if (!selectedPoint?.actions.processes) return;

-    //     const updatedProcesses = selectedPoint.actions.processes?.map(process =>
-    //         process.triggerId === selectedTrigger
-    //             ? { ...process, endPoint: pointUUID }
-    //             : process
-    //     ) || [];
+        const updatedProcesses = [...selectedPoint.actions.processes];
+        updatedProcesses.splice(index, 1);

-    //     handleProcessChange(updatedProcesses);
-    // }, [selectedTrigger, selectedPoint, handleProcessChange]);
+        handleProcessChange(updatedProcesses);

-    // const getCurrentProcess = useCallback(() => {
-    //     if (!selectedTrigger || !selectedPoint) return null;
-    //     return selectedPoint.actions.processes?.find(p => p.triggerId === selectedTrigger);
-    // }, [selectedTrigger, selectedPoint]);
+        // Reset selection if deleting the currently selected process
+        if (selectedProcessIndex === index) {
+            setSelectedProcessIndex(null);
+        } else if (selectedProcessIndex !== null && selectedProcessIndex > index) {
+            // Adjust selection index if needed
+            setSelectedProcessIndex(selectedProcessIndex - 1);
+        }
+    }, [selectedPoint, selectedProcessIndex, handleProcessChange]);
+
+    const handleTriggerSelect = useCallback((displayName: string, index: number) => {
+        const selected = connectedTriggers.find(t => t.displayName === displayName);
+        if (!selected || !selectedPoint?.actions.processes) return;
+
+        const oldProcess = selectedPoint.actions.processes[index];
+
+        const updatedProcesses = [...selectedPoint.actions.processes];
+
+        // Only reset start/end if new trigger invalidates them (your logic can expand this)
+        updatedProcesses[index] = {
+            ...oldProcess,
+            triggerId: selected.uuid,
+            startPoint: oldProcess.startPoint || "", // preserve if exists
+            endPoint: oldProcess.endPoint || ""      // preserve if exists
+        };
+
+        handleProcessChange(updatedProcesses);
+    }, [connectedTriggers, selectedPoint, handleProcessChange]);
+
+    const handleStartPointSelect = useCallback((displayName: string, index: number) => {
+        if (!selectedPoint?.actions.processes) return;
+
+        const point = connectedPoints.find(p => p.displayName === displayName);
+        if (!point) return;
+
+        const updatedProcesses = [...selectedPoint.actions.processes];
+        updatedProcesses[index] = {
+            ...updatedProcesses[index],
+            startPoint: point.uuid
+        };
+
+        handleProcessChange(updatedProcesses);
+    }, [selectedPoint, connectedPoints, handleProcessChange]);
+
+    const handleEndPointSelect = useCallback((displayName: string, index: number) => {
+        if (!selectedPoint?.actions.processes) return;
+
+        const point = connectedPoints.find(p => p.displayName === displayName);
+        if (!point) return;
+
+        const updatedProcesses = [...selectedPoint.actions.processes];
+        updatedProcesses[index] = {
+            ...updatedProcesses[index],
+            endPoint: point.uuid
+        };
+
+        handleProcessChange(updatedProcesses);
+    }, [selectedPoint, connectedPoints, handleProcessChange]);
+
+    const getProcessByIndex = useCallback((index: number) => {
+        if (!selectedPoint?.actions.processes || index >= selectedPoint.actions.processes.length) return null;
+        return selectedPoint.actions.processes[index];
+    }, [selectedPoint]);
+
+    const getFilteredTriggerOptions = (currentIndex: number) => {
+        const usedTriggerUUIDs = selectedPoint?.actions.processes?.filter((_, i) => i !== currentIndex).map(p => p.triggerId).filter(Boolean) ?? [];
+
+        return connectedTriggers.filter(trigger => !usedTriggerUUIDs.includes(trigger.uuid)).map(trigger => trigger.displayName);
+    };

    return (
        <div className="machine-mechanics-container" key={selectedPoint?.uuid}>
@@ -124,10 +291,10 @@ const ArmBotMechanics: React.FC = () => {
            </div>

            <div className="machine-mechanics-content-container">
-                <div className="selected-properties-container" ref={propertiesContainerRef}>
+                <div className="selected-properties-container">
                    <div className="properties-header">ArmBot Properties</div>

-                    {/* {selectedPoint && (
+                    {selectedPoint && (
                        <>
                            <InputWithDropDown
                                key={`speed-${selectedPoint.uuid}`}
@@ -136,36 +303,90 @@ const ArmBotMechanics: React.FC = () => {
                                onChange={(value) => handleSpeedChange(parseInt(value))}
                            />

-                            <LabledDropdown
-                                key={`trigger-select-${selectedPoint.uuid}`}
-                                label="Select Trigger"
-                                defaultOption={connectedTriggers.find(t => t.uuid === selectedTrigger)?.displayName || ''}
-                                onSelect={handleTriggerSelect}
-                                options={connectedTriggers.map(trigger => trigger.displayName)}
-                            />
+                            <div className="actions">
+                                <div className="header">
+                                    <div className="header-value">Processes</div>
+                                    <div className="add-button" onClick={handleAddProcess}>
+                                        <AddIcon /> Add
+                                    </div>
+                                </div>
+                                <div
+                                    className="lists-main-container"
+                                    ref={actionsContainerRef}
+                                    style={{ height: "120px" }}
+                                >
+                                    <div className="list-container">
+                                        {selectedPoint.actions.processes?.map((process, index) => (
+                                            <div
+                                                key={`process-${index}`}
+                                                className={`list-item ${selectedProcessIndex === index ? "active" : ""}`}
+                                            >
+                                                <div
+                                                    className="value"
+                                                    onClick={() => setSelectedProcessIndex(index)}
+                                                >
+                                                    Process {index + 1}
+                                                </div>
+                                                <div
+                                                    className="remove-button"
+                                                    onClick={() => handleDeleteProcess(index)}
+                                                >
+                                                    <RemoveIcon />
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div
+                                        className="resize-icon"
+                                        id="action-resize"
+                                        onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+                                    >
+                                        <ResizeHeightIcon />
+                                    </div>
+                                </div>
+                            </div>

-                            {selectedTrigger && (
-                                <>
+                            {selectedProcessIndex !== null && (
+                                <div className="process-configuration">
                                    <LabledDropdown
-                                        key={`start-point-${selectedTrigger}`}
+                                        key={`trigger-select-${selectedProcessIndex}`}
+                                        label="Select Trigger"
+                                        defaultOption={
+                                            connectedTriggers.find(t =>
+                                                t.uuid === getProcessByIndex(selectedProcessIndex)?.triggerId
+                                            )?.displayName || 'Select a trigger'
+                                        }
+                                        onSelect={(value) => handleTriggerSelect(value, selectedProcessIndex)}
+                                        options={getFilteredTriggerOptions(selectedProcessIndex)}
+                                    />
+
+                                    <LabledDropdown
+                                        key={`start-point-${selectedProcessIndex}`}
                                        label="Start Point"
-                                        defaultOption={getCurrentProcess()?.startPoint || ''}
-                                        onSelect={handleStartPointSelect}
-                                        options={connectedModels.map((model, index) => `${model.modelName} [${index}]`)}
+                                        defaultOption={
+                                            connectedPoints.find(p =>
+                                                p.uuid === getProcessByIndex(selectedProcessIndex)?.startPoint
+                                            )?.displayName || 'Select start point'
+                                        }
+                                        onSelect={(value) => handleStartPointSelect(value, selectedProcessIndex)}
+                                        options={connectedPoints.map(point => point.displayName)}
                                    />

                                    <LabledDropdown
-                                        key={`end-point-${selectedTrigger}`}
+                                        key={`end-point-${selectedProcessIndex}`}
                                        label="End Point"
-                                        defaultOption={getCurrentProcess()?.endPoint || ''}
-                                        onSelect={handleEndPointSelect}
-                                        options={connectedModels.map((model, index) => `${model.modelName} [${index}]`)}
+                                        defaultOption={
+                                            connectedPoints.find(p =>
+                                                p.uuid === getProcessByIndex(selectedProcessIndex)?.endPoint
+                                            )?.displayName || 'Select end point'
+                                        }
+                                        onSelect={(value) => handleEndPointSelect(value, selectedProcessIndex)}
+                                        options={connectedPoints.map(point => point.displayName)}
                                    />
-
-                                </>
+                                </div>
                            )}
                        </>
-                    )} */}
+                    )}
                </div>

                <div className="footer">
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -647,7 +647,7 @@ const ConveyorMechanics: React.FC = () => {
                                                    setSelectedItem({ type: "action", item: action })
                                                }
                                            >
-                                                <input type="radio" name="action" id="action" defaultChecked={action.isUsed} />
+                                                <input type="radio" name="action" id="action" checked={action.isUsed} readOnly />
                                                <RenameInput value={action.name} />
                                            </div>
                                            <div
@@ -696,7 +696,7 @@ const ConveyorMechanics: React.FC = () => {
                                                    setSelectedItem({ type: "trigger", item: trigger })
                                                }
                                            >
-                                                <input type="radio" name="trigger" id="trigger" defaultChecked={trigger.isUsed} />
+                                                <input type="radio" name="trigger" id="trigger" checked={trigger.isUsed} readOnly />
                                                <RenameInput value={trigger.name} />
                                            </div>
                                            <div
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
-import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
+import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
 import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";

 const ZoneProperties: React.FC = () => {
@@ -10,6 +10,7 @@ const ZoneProperties: React.FC = () => {
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zonePosition, setZonePosition } = usezonePosition();
  const { zoneTarget, setZoneTarget } = usezoneTarget();
+  const { zones, setZones } = useZones();

  useEffect(() => {
    setZonePosition(selectedZone.zoneViewPortPosition)
@@ -31,11 +32,11 @@ const ZoneProperties: React.FC = () => {
      if (response.message === "updated successfully") {
        setEdit(false);
      } else {
-        console.log("Not updated Camera Position and Target");
+        console.log(response);
      }

    } catch (error) {
-      console.error("Error in handleSetView:", error);
+
    }
  }

@@ -43,17 +44,32 @@ const ZoneProperties: React.FC = () => {
    setEdit(!Edit);  // This will toggle the `Edit` state correctly
  }

-  function handleZoneNameChange(newName: string) {
-    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  async function handleZoneNameChange(newName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    const zonesdata = {
+      zoneId: selectedZone.zoneId,
+      zoneName: newName
+    };
+    // Call your API to update the zone
+    let response = await zoneCameraUpdate(zonesdata, organization);
+    console.log('response: ', response);
+    if (response.message === "updated successfully") {
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
+    }else{
+      console.log(response?.message);
+    }
  }
-
  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
  }

-  useEffect(() => {
-
-  }, [selectedZone]);

  return (
    <div className="zone-properties-container">
--- 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;