refactor: improve Header navigation, enhance data handling in ThroughputSummary and ROISummary, and update styles for better UI responsiveness

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

@@ -2,19 +2,21 @@ import React from "react";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import { LogoIcon } from "../../icons/Logo";
 import FileMenu from "../../ui/FileMenu";
-import {useToggleStore} from "../../../store/useUIToggleStore";
+import { useToggleStore } from "../../../store/useUIToggleStore";
 import useModuleStore from "../../../store/useModuleStore";
+import { useNavigate } from "react-router-dom";
 
 const Header: React.FC = () => {
   const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
   const { activeModule } = useModuleStore();
+  const navigate = useNavigate();
 
   return (
     <div className="header-container">
       <div className="header-content">
-        <div className="logo-container">
+        <button className="logo-container" onClick={()=>navigate("/dashboard")}>
           <LogoIcon />
-        </div>
+        </button>
         <div className="header-title">
           <FileMenu />
         </div>

app/src/components/ui/analysis/ProductionCapacity.tsx

@@ -9,7 +9,7 @@ import {
 } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
-import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
+import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
@@ -34,6 +34,7 @@ const ThroughputSummary: React.FC = () => {
   ];
 
   const { productionCapacityData } = useProductionCapacityData()
+  const { throughputData: data } = useThroughPutData()
 
 
   const chartOptions = {
@@ -91,14 +92,16 @@ const ThroughputSummary: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (productionCapacityData >= 0) {
+    if (productionCapacityData > 0 && data > 0) {
+      setTimeout(() => {
         setIsLoading(false);
-      console.log("productionCapacityData: ", productionCapacityData);
+      }, 5000);
     } else {
       setIsLoading(true);
     }
   }, [productionCapacityData]);
 
+
   return (
     <div className="production analysis-card">
       <div className="production-wrapper analysis-card-wrapper">

app/src/components/ui/analysis/ROISummary.tsx

@@ -84,8 +84,12 @@ const ROISummary = ({
   const { roiSummary } = useROISummaryData();
 
   useEffect(() => {
-    if (roiSummary && typeof roiSummary === "object") {
+    console.log('roiSummary: ', roiSummary);
-      setIsLoading(false); // Data loaded
+    if (roiSummary && typeof roiSummary === "object" && roiSummary.productName !== "") {
+      // setIsLoading(false); // Data loaded
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 5000);
     } else {
       setIsLoading(true); // Show skeleton while loading
     }

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -17,7 +17,6 @@ const ProductionCapacity = ({
   const { machineActiveTime } = useMachineUptime();
   const { materialCycleTime } = useMaterialCycle();
   const { throughputData } = useThroughPutData()
-  const { productionCapacityData } = useProductionCapacityData()
 
   const progressPercent = machineActiveTime;
 
@@ -30,12 +29,15 @@ const ProductionCapacity = ({
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (throughputData >= 0) {
+    if (throughputData > 0) {
       // console.log('machineActiveTime: ', machineActiveTime);
       // console.log('materialCycleTime: ', materialCycleTime);
       // console.log('throughputData: ', throughputData);
       // console.log('productionCapacityData: ', productionCapacityData);
-      setIsLoading(true);
+      // setIsLoading(true);
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 5000);
     }
 
   }, [throughputData])

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

@@ -373,7 +373,7 @@
   left: 50%;
   transform: translate(-50%, 0);
   color: var(--accent-color);
-  z-index: 100;
+  z-index: 2;
   isolation: isolate;
   font-weight: 700;
   padding: 8px;

app/src/styles/layout/compareLayout.scss

@@ -36,6 +36,7 @@
     align-items: center;
     animation: slideInFromRight 0.4s ease-out forwards;
     user-select: none;
+    border-left: 2px solid var(--border-color);
 
     .resizer {
         width: 32px;

app/src/styles/layout/sidebar.scss

@@ -73,6 +73,7 @@
 
       .logo-container {
         @include flex-center;
+        cursor: pointer;
       }
 
       .header-title {
@@ -221,7 +222,7 @@
                 padding: 13px 5px;
                 background: var(--background-color-secondary);
                 border-radius: #{$border-radius-medium};
-                box-shadow:var(--box-shadow-light);
+                box-shadow: var(--box-shadow-light);
                 display: flex;
                 justify-content: space-between;
 
@@ -1360,9 +1361,11 @@
   .aisle-properties-container {
     max-height: 65vh;
     overflow: auto;
+
     .aisle-texture-container {
       max-height: 40vh;
       overflow: auto;
+
       .aisle-list {
         width: calc(100% - 8px);
         text-align: start;
@@ -1372,6 +1375,7 @@
         gap: 6px;
         border-radius: #{$border-radius-large};
         margin: 2px 6px;
+
         .texture-display {
           height: 34px;
           width: 34px;
@@ -1380,63 +1384,78 @@
           margin-right: 4px;
           overflow: hidden;
         }
+
         .aisle-color {
           text-transform: capitalize;
         }
+
         .aisle-brief {
           font-size: var(--font-size-small);
           color: var(--input-text-color);
         }
+
         &.selected {
           background: var(--background-color-accent);
           color: var(--text-button-color);
+
           &:hover {
             background: var(--background-color-accent);
           }
         }
+
         &:hover {
           background: var(--background-color-secondary);
         }
       }
     }
+
     .value-field-container {
       margin: 0;
     }
+
     .presets-list-container {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       padding: 6px;
       padding-left: 7px;
+
       .preset-list {
         background: #444;
         height: 90px;
         width: 90px;
         border-radius: #{$border-radius-large};
         overflow: hidden;
+
         .thumbnail {
           height: 100%;
           width: 100%;
           border-radius: #{$border-radius-large};
           outline-offset: -1px;
+
           img {
             height: 100%;
             width: 100%;
             object-fit: cover;
             transition: all 0.2s;
           }
+
           &.selected {
             outline: 2px solid var(--border-color-accent);
             outline-offset: -2px;
+
             &:hover {
               outline: 2px solid var(--border-color-accent);
+
               img {
                 transform: scale(1);
               }
             }
           }
+
           &:hover {
             outline: 1px solid var(--border-color);
+
             img {
               transform: scale(1.1);
             }
@@ -1456,6 +1475,7 @@
       padding: 10px 12px;
       color: var(--text-color);
       width: 100%;
+
       .input-value {
         color: inherit;
       }
@@ -1837,11 +1857,9 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(
+          background: linear-gradient(0deg,
-            0deg,
               rgba(37, 24, 51, 0) 0%,
-            rgba(52, 41, 61, 0.5) 100%
+              rgba(52, 41, 61, 0.5) 100%);
-          );
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;