Merge remote-tracking branch 'origin/ui' into simulation

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

@@ -3,13 +3,10 @@ import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore
 import useTemplateStore from "../../../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
-import { deleteTemplateApi } from "../../../../services/realTimeVisulization/zoneData/deleteTemplate";
-import { loadTempleteApi } from "../../../../services/realTimeVisulization/zoneData/loadTemplate";
 import { useSocketStore } from "../../../../store/store";
 
 const Templates = () => {
-  const { templates, removeTemplate } = useTemplateStore();
-  const { setTemplates } = useTemplateStore();
+  const { templates, removeTemplate, setTemplates } = useTemplateStore();
   const { setSelectedZone, selectedZone } = useSelectedZoneStore();
   const { visualizationSocket } = useSocketStore();
 
@@ -35,15 +32,11 @@ const Templates = () => {
       let deleteTemplate = {
         organization: organization,
         templateID: id,
-      }
+      };
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate)
+        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate);
       }
       removeTemplate(id);
-      // let response = await deleteTemplateApi(id, organization);
-
-      // if (response.message === "Template deleted successfully") {
-      // }
     } catch (error) {
       console.error("Error deleting template:", error);
     }
@@ -60,114 +53,54 @@ const Templates = () => {
         organization: organization,
         zoneId: selectedZone.zoneId,
         templateID: template.id,
-      }
-      console.log('template: ', template);
-      console.log('loadingTemplate: ', loadingTemplate);
+      };
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate)
+        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
       }
-      // let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);
 
-      // if (response.message === "Template placed in Zone") {
-        setSelectedZone({
-          panelOrder: template.panelOrder,
-          activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
-          widgets: template.widgets,
+      setSelectedZone({
+        panelOrder: template.panelOrder,
+        activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
+        widgets: template.widgets,
+      });
+
+      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().setZone(selectedZone.zoneName, selectedZone.zoneId);
-
-        if (Array.isArray(template.floatingWidget)) {
-          template.floatingWidget.forEach((val: any) => {
-            useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
-          });
-        }
-      // }
+      }
     } catch (error) {
       console.error("Error loading template:", error);
     }
   };
 
-
   return (
-    <div
-      className="template-list"
-      style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
-        gap: "1rem",
-        padding: "1rem",
-      }}
-    >
+    <div className="template-list">
       {templates.map((template) => (
-        <div
-          key={template.id}
-          className="template-item"
-          style={{
-            border: "1px solid #e0e0e0",
-            borderRadius: "8px",
-            padding: "1rem",
-            transition: "box-shadow 0.3s ease",
-          }}
-        >
+        <div key={template.id} className="template-item">
           {template?.snapshot && (
-            <div style={{ position: "relative", paddingBottom: "56.25%" }}>
-              {" "}
-              {/* 16:9 aspect ratio */}
+            <div className="template-image-container">
               <img
-                src={template.snapshot} // Corrected from template.image to template.snapshot
+                src={template.snapshot}
                 alt={`${template.name} preview`}
-                style={{
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "contain",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  transition: "transform 0.3s ease",
-                  // ':hover': {
-                  //   transform: 'scale(1.05)'
-                  // }
-                }}
+                className="template-image"
                 onClick={() => handleLoadTemplate(template)}
               />
             </div>
           )}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginTop: "0.5rem",
-            }}
-          >
+          <div className="template-details">
             <div
               onClick={() => handleLoadTemplate(template)}
-              style={{
-                cursor: "pointer",
-                fontWeight: "500",
-                // ':hover': {
-                //   textDecoration: 'underline'
-                // }
-              }}
+              className="template-name"
             >
               {template.name}
             </div>
             <button
               onClick={() => handleDeleteTemplate(template.id)}
-              style={{
-                padding: "0.25rem 0.5rem",
-                background: "#ff4444",
-                color: "white",
-                border: "none",
-                borderRadius: "4px",
-                cursor: "pointer",
-                transition: "opacity 0.3s ease",
-                // ':hover': {
-                //   opacity: 0.8
-                // }
-              }}
+              className="delete-button"
               aria-label="Delete template"
             >
               Delete
@@ -176,14 +109,7 @@ const Templates = () => {
         </div>
       ))}
       {templates.length === 0 && (
-        <div
-          style={{
-            textAlign: "center",
-            color: "#666",
-            padding: "2rem",
-            gridColumn: "1 / -1",
-          }}
-        >
+        <div className="no-templates">
           No saved templates yet. Create one in the visualization view!
         </div>
       )}
@@ -192,4 +118,3 @@ const Templates = () => {
 };
 
 export default Templates;
-

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -46,7 +46,7 @@ const WidgetsFloating = () => {
       ))} */}
       {/* Floating 1 */}
       <SimpleCard
-        header={"Today’s Money"}
+        header={"Today’s Earnings"}
         icon={WalletIcon}
         value={"$53,000"}
         per={"+55%"}