added logs list-v2

app/src/components/icons/ExportCommonIcons.tsx

@@ -655,8 +655,8 @@ export const MonthlyROI = () => {
   );
 };
 
-export const ExpandIcon = () => {
-  return (
+export const ExpandIcon = ({ isActive }: { isActive: boolean }) => {
+  return isActive ? (
     <svg
       width="20"
       height="20"
@@ -677,6 +677,36 @@ export const ExpandIcon = () => {
         fill="var(--text-color)"
       />
     </svg>
+  ) : (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 5.6875H15.5"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 8.60156H15.5"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 10.6484L10.25 14.7318L15.5 10.6484"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
   );
 };
 

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

@@ -19,6 +19,10 @@ import {
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const SimulationPlayer: React.FC = () => {
+  const MAX_SPEED = 8; // Maximum speed
+
+  const [expand, setExpand] = useState(true);
+
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
@@ -30,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
 
   // Button functions
   const handleReset = () => {
-    setReset(true);
-    // setReset(!isReset);
+    setReset(!isReset);
     setSpeed(1);
   };
   const handlePlayStop = () => {
@@ -50,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   const calculateHandlePosition = () => {
-    return ((speed - 0.5) / (8 - 0.5)) * 100;
+    return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
   };
 
   const handleMouseDown = () => {
@@ -100,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
     { name: "process 9", completed: 90 }, // 90% completed
     { name: "process 10", completed: 30 }, // 30% completed
   ];
-  const [expand, setExpand] = useState(false);
   // Move getRandomColor out of render
   const getRandomColor = () => {
     const letters = "0123456789ABCDEF";
@@ -117,7 +119,7 @@ const SimulationPlayer: React.FC = () => {
 
   const processPlayerRef = useRef<HTMLDivElement>(null);
   const processWrapperRef = useRef<HTMLDivElement>(null);
-  const [playerPosition, setPlayerPosition] = useState(0);
+  const [playerPosition, setPlayerPosition] = useState(20); // initial position
 
   const handleProcessMouseDown = (e: React.MouseEvent) => {
     if (!processWrapperRef.current) return;
@@ -196,7 +198,7 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
           <div className="controls-wrapper">
-            <div
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleReset();
@@ -204,8 +206,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <ResetIcon />
               Reset
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handlePlayStop();
@@ -213,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <PlayStopIcon />
               {playSimulation ? "Play" : "Stop"}
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleExit();
@@ -222,13 +224,13 @@ const SimulationPlayer: React.FC = () => {
             >
               <ExitIcon />
               Exit
-            </div>
-            <div
-              className="simulation-button-container"
+            </button>
+            <button
+              className="expand-icon-container"
               onClick={() => setExpand(!expand)}
             >
-              <ExpandIcon />
-            </div>
+              <ExpandIcon isActive={!expand} />
+            </button>
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -298,24 +300,24 @@ const SimulationPlayer: React.FC = () => {
               <div className="marker marker-80"></div>
               <div className="marker marker-90"></div>
               <div className="custom-slider">
-                <div
+                <button
                   className={`slider-handle ${isDragging ? "dragging" : ""}`}
                   style={{ left: `${calculateHandlePosition()}%` }}
                   onMouseDown={handleMouseDown}
                 >
                   {speed.toFixed(1)}x
-                </div>
+                </button>
                 <input
                   type="range"
                   min="0.5"
-                  max="8"
+                  max={MAX_SPEED}
                   step="0.1"
                   value={speed}
                   onChange={handleSpeedChange}
                   className="slider-input"
                 />
               </div>
-              <div className="speed-label max-value">8x</div>
+              <div className="speed-label max-value">4x</div>
             </div>
           </div>
         </div>
@@ -328,25 +330,31 @@ const SimulationPlayer: React.FC = () => {
           ></div>
           <div
             className="process-wrapper"
-            ref={processWrapperRef}
-            onMouseDown={handleProcessMouseDown}
+            style={{ padding: expand ? "0px" : "5px 35px" }}
           >
-            {process.map((item, index) => (
-              <div
-                key={index}
-                className="process"
-                style={{
-                  width: `${item.completed}%`,
-                  backgroundColor: getAvatarColor(index),
-                }}
-              ></div>
-            ))}
+            <div
+              className="process-container"
+              ref={processWrapperRef}
+              onMouseDown={handleProcessMouseDown}
+            >
+              {process.map((item, index) => (
+                <div
+                  key={index}
+                  className="process"
+                  style={{
+                    width: `${item.completed}%`,
+                    backgroundColor: getAvatarColor(index),
+                  }}
+                >
+                  <div
+                    className="process-player"
+                    ref={processPlayerRef}
+                    style={{ left: playerPosition, position: "absolute" }}
+                  ></div>
+                </div>
+              ))}
+            </div>
           </div>
-          <div
-            className="process-player"
-            ref={processPlayerRef}
-            style={{ left: playerPosition, position: "absolute" }}
-          ></div>
         </div>
       </div>
     </div>

app/src/pages/Project.tsx

@@ -74,7 +74,7 @@ const Project: React.FC = () => {
         <ROISummary />
       </div> */}
       <KeyPressListener />
-      {/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
+      {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
       {!isPlaying && (
         <>
           {toggleThreeD && <ModuleToggle />}

app/src/styles/components/footer/footer.scss

@@ -6,6 +6,7 @@
     z-index: 1;
     display: flex;
     justify-content: space-between;
+    padding: 6px;
 
     .selection-wrapper {
         display: flex;
@@ -16,7 +17,7 @@
             gap: 6px;
             align-items: center;
             background: var(--background-color);
-            padding: 4px 6px;
+            padding: 3px 6px;
             border-radius: 12px;
             color: var(--text-color);
 
@@ -35,7 +36,7 @@
         .version {
             border-radius: 12px;
             background: var(--background-color);
-            padding: 4px 6px;
+            padding: 3px 6px;
             color: var(--text-button-color);
             font-weight: 200;
             display: flex;
@@ -43,7 +44,7 @@
         }
 
         .logs-detail {
-            background-color: #fff;
+            // background-color: #fff;
             cursor: pointer;
         }
 

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

@@ -3,11 +3,11 @@
 
 .simulation-player-wrapper {
   position: fixed;
-  bottom: 50px;
+  bottom: 12px;
   left: 50%;
   z-index: 2;
   transform: translate(-50%, 0);
-  width: 70%;
+  width: 70vw;
 
   .simulation-player-container {
     background: var(--background-color);
@@ -16,24 +16,21 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
+    backdrop-filter: blur(10px);
+    outline: 1px solid var(--border-color);
 
     .progresser-wrapper {
-
       outline: 1px solid var(--border-color);
       background: var(--background-color);
-      // background-color: var(--highlight-accent-color);
-      padding: 4px 5px;
       border-radius: 12px;
       display: flex;
       flex-direction: column;
       gap: 12px;
-      padding-top: 30px;
+      padding: 12px 5px;
+      padding-top: 38px;
       transition: height 0.2s linear;
     }
 
-
-
-
     .controls-container {
       @include flex-center;
       gap: 12px;
@@ -41,13 +38,12 @@
 
       .production-details,
       .controls-wrapper {
-        display: flex;
+        @include flex-center;
         gap: 6px;
       }
 
       .production-details {
         .production-wrapper {
-
           display: flex;
           align-items: center;
           flex-direction: column;
@@ -56,33 +52,38 @@
           .header {
             display: flex;
             flex-direction: row;
-            gap: 6px
+            gap: 6px;
           }
 
           .progress-wrapper {
             width: 164px;
             height: 8px;
             border-radius: 5px;
-            // overflow: hidden;
-            outline: 1px solid var(--border-color);
-            background: var(--background-color);
+            background: var(--background-color-solid);
 
             .progress {
               border-radius: 5px;
               height: 100%;
-              background-color: var(--accent-color);
+              background-color: var(--background-color-accent);
             }
           }
         }
       }
 
+      .expand-icon-container {
+        @include flex-center;
+        padding: 6px 8px;
+        cursor: pointer;
+      }
+
       .simulation-button-container {
         @include flex-center;
         gap: 2px;
-        padding: 6px 8px;
+        padding: 4px 8px;
         min-width: 64px;
         background: var(--background-color);
-        border-radius: #{$border-radius-small};
+        border-radius: #{$border-radius-extra-large};
+        height: fit-content;
         cursor: pointer;
 
         &:hover {
@@ -101,10 +102,8 @@
       @include flex-center;
       gap: 32px;
       padding: 5px 16px;
-      // background: var(--background-color);
       border-radius: #{$border-radius-medium};
       box-sizing: #{$box-shadow-medium};
-      border-radius: 20px;
       position: relative;
 
       .min-value,
@@ -118,11 +117,8 @@
         width: 100%;
         max-width: 80vw;
         height: 28px;
-        // background: var(--background-color-gray);
         border-radius: #{$border-radius-small};
         position: relative;
-        // padding: 4px 26px;
-
 
         .speed-label {
           font-size: var(--font-size-tiny);
@@ -135,13 +131,13 @@
           }
 
           &:last-child {
-            right: 0;
+            right: -10px;
           }
         }
 
         &::after {
           content: "";
-          background-color: #E5E5EA;
+          background-color: #e5e5ea;
           position: absolute;
           top: 50%;
           transform: translate(0, -50%);
@@ -166,13 +162,15 @@
           .slider-handle {
             position: absolute;
             top: 50%;
-            width: 42px;
+            min-width: 44px;
+            padding: 0 8px;
             line-height: 20px;
             text-align: center;
-            background: var(--accent-color);
-            color: var(--primary-color);
-            border-radius: #{$border-radius-small};
+            background: var(--background-color-button);
+            color: var(--text-button-color);
+            border-radius: #{$border-radius-large};
             transform: translate(-50%, -50%);
+            font-size: var(--font-size-small);
             cursor: pointer;
             z-index: 2;
           }
@@ -226,23 +224,23 @@
     }
 
     .time-displayer {
-      display: flex;
-      justify-content: space-between;
+      @include flex-space-between;
+      gap: 24px;
       height: auto;
       opacity: 1;
-      // overflow: hidden;
-
       transition: all 0.5s ease;
 
       .start-time-wrappper,
       .end-time-wrappper {
-        display: flex;
-        align-items: center;
-        gap: 12px;
+        @include flex-center;
+        gap: 4px;
+        .icon {
+          @include flex-center;
+        }
       }
 
       .time-progresser {
-        width: 70%;
+        flex: 1;
 
         .timeline {
           padding: 16px;
@@ -255,18 +253,15 @@
           height: 33px;
 
           .label-dot-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 6px;
+            @include flex-center;
             position: relative;
 
             .label {
               position: absolute;
-              top: -200%;
+              top: -36px;
               transform: translate(0, -0);
               font-size: 12px;
-              color: #666;
+              color: var(--text-color);
               white-space: nowrap;
             }
 
@@ -296,21 +291,21 @@
         }
       }
     }
-
-
-
   }
-
-
 }
 
 .processDisplayer {
-  border-radius: 5px;
-  // overflow: hidden;
+  border-radius: #{$border-radius-large};
   outline: 1px solid var(--border-color);
   background: var(--background-color);
-  padding: 14px 6px;
+  padding: 20px 6px;
   position: relative;
+  .timmer {
+    width: auto;
+    position: absolute;
+    bottom: 0;
+    font-size: var(--font-size-tiny);
+  }
 
   .timmer {
     width: auto;
@@ -328,6 +323,16 @@
     right: 8px;
   }
 
+  .start-displayer {
+    bottom: 4px;
+    left: 16px;
+  }
+
+  .end-displayer {
+    bottom: 4px;
+    width: auto;
+    right: 16px;
+  }
   .process-player {
     position: absolute;
     top: 50%;
@@ -337,27 +342,26 @@
     left: 86.81px;
     border-radius: 14px;
     border-width: 1px;
-    background: var(--accent-color, #6F42C1);
-
+    background: var(--background-color-accent, #6f42c1);
   }
+  .process-wrapper{
+    .process-container {
+      position: relative;
+      display: flex;
+      width: 100%;
       
-  .process-wrapper {
-    display: flex;
-    // padding: 0px 16px;
-
-    .process {
-      height: 5px;
-      background-color: #4caf50;
-      color: white;
-      text-align: center;
-      line-height: 30px;
-      transition: width 0.3s ease;
+      .process {
+        height: 5px;
+        border-radius: 4px;
+        color: white;
+        text-align: center;
+        line-height: 30px;
+        transition: width 0.3s ease;
+      }
     }
   }
-
 }
 
-
 .simulation-player-container.open {
 
   .start-displayer,
@@ -365,6 +369,9 @@
     display: none;
   }
 
+  .timmer {
+    display: none;
+  }
   .progresser-wrapper {
     padding-top: 4px;
   }
@@ -377,7 +384,7 @@
   }
 
   .processDisplayer {
-    padding: 0;
+    padding: 0 8px;
     background: transparent;
 
     .process-player {
@@ -385,5 +392,4 @@
       display: none !important;
     }
   }
-
 }

app/src/styles/components/tools.scss

@@ -83,6 +83,8 @@
         border-radius: #{$border-radius-medium};
         background: var(--background-color);
         backdrop-filter: blur(8px);
+        contain: layout paint;
+        will-change: backdrop-filter;
 
         .option-list {
           display: flex;

app/src/styles/components/visualization/floating/common.scss

@@ -121,10 +121,8 @@
     flex-direction: column;
     gap: 6px;
     border-radius: 5.2px;
-
     width: 100%;
     height: 150px;
-    display: flex;
     justify-content: center;
     align-items: center;
 
@@ -254,7 +252,8 @@
     gap: 5px;
 
     .header {
-      color: #a0aec0;
+      color: var(--text-color);
+      opacity: 0.8;
     }
 
     .data-values {
@@ -413,7 +412,6 @@
 
 /* FleetEfficiency.module.css */
 .fleetEfficiency {
-  width: 100%;
   min-height: 240px !important;
   padding: 20px;
   background: var(--background-color);

app/src/styles/components/visualization/floating/energyConsumed.scss

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding-top: 12px;
   padding: 6px;
+  padding-top: 12px;
 
   .floating {
     min-height: 170px;
@@ -28,13 +28,6 @@
   }
 }
 
-
-
-.floatingWidgets-wrapper {
-  font-family: Arial, sans-serif;
-  color: #333;
-}
-
 .floating.working-state {
   width: 100%;
   height: 283px;
@@ -51,7 +44,6 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
-  // flex-direction: column;
 }
 
 .state {

app/src/styles/pages/realTimeViz.scss

@@ -177,8 +177,6 @@
 
   .panel {
     position: absolute;
-    // background: var(--background-color);
-    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
     overflow: auto;
@@ -415,8 +413,8 @@
     }
 
     path {
-      stroke: var(--text-color);
-      strokeWidth: 2;
+      stroke: var(--text-button-color);
+      stroke-width: 2;
     }
   }
 
@@ -920,8 +918,6 @@
 
 // Add button
 
-.extra-Bs {}
-
 .extra-Bs-addopening {
   animation: slideDown 0.3s ease forwards;
 }

app/src/styles/scene/scene.scss

@@ -15,7 +15,7 @@
     font-size: var(--font-size-large);
     padding: 2px 8px;
     background: var(--background-color-accent);
-    color: var(--text-color);
+    color: var(--text-button-color);
     border-radius: #{$border-radius-medium};
     box-shadow: var(--box-shadow-light);
   }