refactor: Update icon imports and improve UI components; enhance styles for better layout and responsiveness; modify event properties and simulation player functionality

app/src/components/icons/ExportCommonIcons.tsx

@@ -458,7 +458,7 @@ export function InfoIcon() {
     >
       <path
         d="M5.46289 7.75441C5.46289 7.68342 5.47691 7.6131 5.50422 7.54758C5.53158 7.48201 5.57156 7.42254 5.62201 7.37257C5.67246 7.3226 5.73231 7.2831 5.79807 7.25636C5.86388 7.22963 5.93425 7.21619 6.00529 7.21681C6.11003 7.21873 6.21188 7.25142 6.29814 7.31089C6.38435 7.37036 6.45121 7.45398 6.49019 7.55118C6.52921 7.64843 6.53862 7.75499 6.5174 7.85757C6.49614 7.96014 6.44511 8.05417 6.37071 8.12795C6.29631 8.20168 6.20185 8.25184 6.09908 8.27219C5.99631 8.29254 5.8898 8.28212 5.79294 8.24224C5.69603 8.2024 5.61308 8.13486 5.55438 8.04808C5.49567 7.96134 5.46385 7.8592 5.46289 7.75441ZM5.63564 6.44401L5.56844 3.93842C5.56206 3.87819 5.56844 3.81729 5.58716 3.75968C5.60583 3.70207 5.63641 3.64902 5.67692 3.604C5.71743 3.55897 5.76697 3.52297 5.82227 3.49832C5.87761 3.47368 5.93751 3.46094 5.99804 3.46094C6.05862 3.46094 6.11852 3.47368 6.17387 3.49832C6.22916 3.52297 6.2787 3.55897 6.31921 3.604C6.35972 3.64902 6.3903 3.70207 6.40897 3.75968C6.42769 3.81729 6.43407 3.87819 6.42769 3.93842L6.36529 6.44401C6.36529 6.54073 6.32689 6.63356 6.25844 6.70196C6.19004 6.77036 6.09721 6.80881 6.00049 6.80881C5.90372 6.80881 5.81094 6.77036 5.74254 6.70196C5.67414 6.63356 5.63564 6.54073 5.63564 6.44401Z"
-        fill="var(--icon-default-color)"
+        fill="var(--text-color)"
       />
       <path
         d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
@@ -471,7 +471,7 @@ export function InfoIcon() {
   );
 }
 
-export function AI_Icon() {
+export function AIIcon() {
   return (
     <svg
       width="20"

app/src/components/layout/sidebarLeft/Header.tsx

@@ -19,7 +19,7 @@ const Header: React.FC = () => {
           <FileMenu />
         </div>
       </div>
-      <div
+      <button
         className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
         onClick={() => {
           if (activeModule !== "market") {
@@ -29,7 +29,7 @@ const Header: React.FC = () => {
         }}
       >
         <ToggleSidebarIcon />
-      </div>
+      </button>
     </div>
   );
 };

app/src/components/layout/sidebarRight/analysis/Analysis.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import { AIIcon } from "../../../icons/ExportCommonIcons";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { AnalysisPresetsType } from "../../../../types/analysis";
 import RenderAnalysisInputs from "./RenderAnalysisInputs";
@@ -13,53 +13,24 @@ const Analysis: React.FC = () => {
 
   const AnalysisPresets: AnalysisPresetsType = {
     "Throughput time": [
-      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
-      {
-        type: "default",
-        inputs: { label: "Raw Material", activeOption: "mm" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Material flow", activeOption: "m/min" },
-      },
+      { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
+      { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
+      { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
     ],
     "Production capacity": [
-      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
-      {
-        type: "default",
-        inputs: { label: "Raw Material", activeOption: "mm" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Material flow", activeOption: "m/min" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Shift 1", activeOption: "hr(s)" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Shift 2", activeOption: "hr(s)" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Over time", activeOption: "hr(s)" },
-      },
+      { type: "default", inputs: { label: "Shift length", activeOption: "hr" } },
+      { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } },
+      { type: "default", inputs: { label: "Working days / year", activeOption: "days" } },
+      { type: "default", inputs: { label: "Yield rate", activeOption: "%" } },
     ],
     ROI: [
       {
         type: "default",
-        inputs: { label: "Equipment Cost", activeOption: "INR" },
+        inputs: { label: "Selling price", activeOption: "INR" },
       },
       {
         type: "default",
-        inputs: { label: "Employee Salary", activeOption: "INR" },
+        inputs: { label: "Material cost", activeOption: "INR" },
       },
       {
         type: "default",
@@ -67,7 +38,7 @@ const Analysis: React.FC = () => {
       },
       {
         type: "default",
-        inputs: { label: "Cost per unit", activeOption: "INR" },
+        inputs: { label: "Maintenance cost", activeOption: "INR" },
       },
       {
         type: "default",
@@ -75,20 +46,19 @@ const Analysis: React.FC = () => {
       },
       {
         type: "default",
-        inputs: { label: "Upkeep Cost", activeOption: "INR" },
+        inputs: { label: "Fixed costs", activeOption: "INR" },
       },
       {
         type: "default",
-        inputs: { label: "Working Hours", activeOption: "Hrs" },
+        inputs: { label: "Salvage value", activeOption: "Hrs" },
       },
       {
         type: "default",
-        inputs: { label: "Power Usage", activeOption: "KWH" },
+        inputs: { label: "Production period", activeOption: "yrs" },
       },
-      { type: "default", inputs: { label: "KWH", activeOption: "Mos" } },
       {
         type: "default",
-        inputs: { label: "Man Power", activeOption: "Person" },
+        inputs: { label: "Tax rate", activeOption: "%" },
       },
     ],
   };
@@ -98,7 +68,7 @@ const Analysis: React.FC = () => {
       <div className="analysis-main-container">
         <div className="header">Object</div>
         <div className="generate-report-button">
-          <AI_Icon /> Generate Report
+          <AIIcon /> Generate Report
         </div>
         <div className="analysis-content-container section">
           <div className="dropdown-header-container">
@@ -121,7 +91,7 @@ const Analysis: React.FC = () => {
           />
           <div className="buttons-container">
             <input type="button" value={"Clear"} className="cancel" />
-            <input type="button" value={"Calculate"} className="submit" />
+            <input type="button" value={"Update"} className="submit" />
           </div>
           <div className="create-custom-analysis-container">
             <div className="custom-analysis-header">Create Custom Analysis</div>

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
-import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import { AIIcon } from "../../../icons/ExportCommonIcons";
 import LabeledButton from "../../../ui/inputs/LabledButton";
 import {
   useAzimuth,
@@ -225,7 +225,7 @@ const GlobalProperties: React.FC = () => {
       <section>
         <div className="header">Environment</div>
         <div className="optimize-button" onClick={optimizeScene}>
-          <AI_Icon />
+          <AIIcon />
           Optimize
         </div>
 

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -18,7 +18,9 @@ const EventProperties: React.FC = () => {
   const { selectedEventData } = useSelectedEventData();
   const { getEventByModelUuid } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
-    const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
+    null
+  );
   const [assetType, setAssetType] = useState<string | null>(null);
   const { products, addEvent } = useProductStore();
   const { selectedEventSphere } = useSelectedEventSphere();
@@ -89,30 +91,32 @@ const EventProperties: React.FC = () => {
             <p>
               <strong>Here are some products you can add it to:</strong>
             </p>
-                        <ul>
+            <div className="product-item">
               {products.map((product) => (
-                                <li key={product.productId}>
                 <button
+                  key={product.productId}
                   onClick={() => {
                     if (selectedEventData) {
                       handleAddEventToProduct({
-                                                    event: useEventsStore.getState().getEventByModelUuid(selectedEventData?.data.modelUuid),
+                        event: useEventsStore
+                          .getState()
+                          .getEventByModelUuid(
+                            selectedEventData?.data.modelUuid
+                          ),
                         addEvent,
                         selectedProduct,
-                                                })
+                      });
                     }
                   }}
                 >
                   <AddIcon />
                   {product.productName}
                 </button>
-                                </li>
               ))}
-                        </ul>
             </div>
           </div>
-            )
-            }
+        </div>
+      )}
       {!selectedEventSphere && (
         <div className="no-event-selected">
           <p>

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -12,25 +12,28 @@ import {
   EndIcon,
   ExpandIcon,
   HourlySimulationIcon,
+  InfoIcon,
   MonthlyROI,
   SpeedIcon,
   StartIcon,
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+import { useSubModuleStore } from "../../../store/useModuleStore";
 
 const SimulationPlayer: React.FC = () => {
   const MAX_SPEED = 8; // Maximum speed
 
+  const isDragging = useRef(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
+  const [playSimulation, setPlaySimulation] = useState(false);
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
-  const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const isDragging = useRef(false);
   const { setActiveTool } = useActiveTool();
   const { isPaused, setIsPaused } = usePauseButtonStore();
   const { isReset, setReset } = useResetButtonStore();
+  const { subModule } = useSubModuleStore();
 
   // Button functions
   const handleReset = () => {
@@ -114,7 +117,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   // Store colors for each process item
-  const [processColors, setProcessColors] = useState<string[]>([]);
+  const [_, setProcessColors] = useState<string[]>([]);
 
   // Generate colors on mount or when process changes
   useEffect(() => {
@@ -162,6 +165,7 @@ const SimulationPlayer: React.FC = () => {
     <div className="simulation-player-wrapper">
       <div className={`simulation-player-container ${expand ? "open" : ""}`}>
         <div className="controls-container">
+          {subModule === "analysis" && (
             <div className="production-details">
               {/* hourlySimulation */}
               <div className="hourly-wrapper production-wrapper">
@@ -206,6 +210,15 @@ const SimulationPlayer: React.FC = () => {
                 </div>{" "}
               </div>
             </div>
+          )}
+          {subModule === "simulations" && (
+            <div className="header">
+              <InfoIcon />
+              {playSimulation
+                ? "Paused - system idle."
+                : "Running simulation..."}
+            </div>
+          )}
           <div className="controls-wrapper">
             <button
               className="simulation-button-container"
@@ -234,12 +247,14 @@ const SimulationPlayer: React.FC = () => {
               <ExitIcon />
               Exit
             </button>
+            {subModule === "analysis" && (
               <button
                 className="expand-icon-container"
                 onClick={() => setExpand(!expand)}
               >
                 <ExpandIcon isActive={!expand} />
               </button>
+            )}
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -330,6 +345,7 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
         </div>
+        {subModule === "analysis" && (
           <div className="processDisplayer">
             <div className="start-displayer timmer">00:00</div>
             <div className="end-displayer timmer">24:00</div>
@@ -361,6 +377,7 @@ const SimulationPlayer: React.FC = () => {
               </div>
             </div>
           </div>
+        )}
       </div>
     </div>
   );

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -76,8 +76,6 @@ const RealTimeVisulization: React.FC = () => {
   const { setSelectedChartId } = useWidgetStore();
   const [waitingPanels, setWaitingPanels] = useState(null);
 
-  console.log("waitingPanels: ", waitingPanels);
-
   OuterClick({
     contextClassName: [
       "chart-container",

app/src/styles/components/simulation/simulation.scss

@@ -32,10 +32,17 @@
     }
 
     .controls-container {
-      @include flex-center;
+      @include flex-space-between;
       gap: 12px;
       justify-content: space-between;
-
+      .header{
+        @include flex-center;
+        gap: 6px;
+        padding: 0 8px;
+        svg{
+          scale: 1.3;
+        }
+      }
       .production-details,
       .controls-wrapper {
         @include flex-center;
@@ -72,7 +79,7 @@
 
       .expand-icon-container {
         @include flex-center;
-        padding: 6px 8px;
+        padding: 0 8px;
         cursor: pointer;
       }
 

app/src/styles/components/tools.scss

@@ -124,6 +124,8 @@
     padding: 4px;
     border-radius: #{$border-radius-medium};
     background: var(--background-color);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
     gap: 5px;
     position: relative;
 

app/src/styles/layout/sidebar.scss

@@ -58,12 +58,8 @@
         fill: var(--icon-default-color-active);
       }
       &:hover {
-        rect {
-          stroke: var(--icon-default-color);
-        }
-        circle {
-          fill: var(--icon-default-color);
-        }
+        filter: saturate(0.8);
+        background: var(--background-color-accent);
       }
     }
   }
@@ -714,10 +710,10 @@
 
       .add-button {
         @include flex-center;
-        padding: 2px 4px;
+        padding: 4px 8px;
         background: var(--background-color-button);
         color: var(--text-button-color);
-        border-radius: #{$border-radius-small};
+        border-radius: #{$border-radius-large};
         cursor: pointer;
         outline: none;
         border: none;
@@ -832,10 +828,10 @@
           transform: translateX(4px);
 
           &:hover {
-            background: var(--accent-color);
+            background: var(--background-color-accent);
 
             path {
-              stroke: var(--primary-color);
+              stroke: var(--text-button-color);
             }
           }
         }
@@ -1003,10 +999,10 @@
         border-radius: 8px 0 0 8px;
 
         &:hover {
-          background: var(--accent-color);
+          background: var(--background-color-accent);
 
           path {
-            stroke: var(--primary-color);
+            stroke: var(--text-button-color);
           }
         }
       }
@@ -1067,7 +1063,13 @@
       .dropdown-content-container {
         padding: 6px 12px;
       }
-
+      .value-field-container {
+        padding: 6px;
+        .dropdown {
+          min-width: 44px;
+          text-align: center;
+        }
+      }
       .input-range-container {
         .input-container {
           width: 75%;