Hidden panel zone based template Sc shot

app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -4,6 +4,7 @@ import useTemplateStore from "../../../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
 import { useSocketStore } from "../../../../store/store";
+import RenameInput from "../../../ui/inputs/RenameInput";
 
 const Templates = () => {
   const { templates, removeTemplate, setTemplates } = useTemplateStore();
@@ -34,7 +35,10 @@ const Templates = () => {
         templateID: id,
       };
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate);
+        visualizationSocket.emit(
+          "v2:viz-template:deleteTemplate",
+          deleteTemplate
+        );
       }
       removeTemplate(id);
     } catch (error) {
@@ -65,11 +69,15 @@ const Templates = () => {
         widgets: template.widgets,
       });
 
-      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+      useDroppedObjectsStore
+        .getState()
+        .setZone(selectedZone.zoneName, selectedZone.zoneId);
 
       if (Array.isArray(template.floatingWidget)) {
         template.floatingWidget.forEach((val: any) => {
-          useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
+          useDroppedObjectsStore
+            .getState()
+            .addObject(selectedZone.zoneName, val);
         });
       }
     } catch (error) {
@@ -79,7 +87,7 @@ const Templates = () => {
 
   return (
     <div className="template-list">
-      {templates.map((template) => (
+      {templates.map((template, index) => (
         <div key={template.id} className="template-item">
           {template?.snapshot && (
             <div className="template-image-container">
@@ -96,7 +104,8 @@ const Templates = () => {
               onClick={() => handleLoadTemplate(template)}
               className="template-name"
             >
-              {template.name}
+              {/* {`Template ${index + 1}`} */}
+              <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
               onClick={() => handleDeleteTemplate(template.id)}