updated simulation player

2025-04-29 17:54:36 +05:30
parent cc44826f66 dd853a66d4
commit 38161fb733
100 changed files with 5726 additions and 1665 deletions
--- a/app/src/styles/abstracts/placeholders.scss
+++ b/app/src/styles/abstracts/placeholders.scss
@@ -1,6 +0,0 @@
-// center a element
-%centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -1,123 +1,132 @@
-/* ========================================================================
-   Global SCSS Variables
-   ========================================================================
-   This file contains the global variables used across the project for
-   colors, typography, spacing, shadows, and other design tokens.
-   ======================================================================== */
-
@use "functions";

-// ========================================================================
-// Font Imports
-// ========================================================================
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

-// ========================================================================
-// Colors
-// ========================================================================
+// new variables

-// Text colors
-$text-color: #2b3344; // Primary text color
-$text-disabled: #b7b7c6; // Disabled text color
-$input-text-color: #595965; // Input field text color
+// text colors
+// ---------- light mode ----------
+$text-color: #2b3344;
+$text-disabled: #b7b7c6;
+$input-text-color: #595965;
+$highlight-text-color: #6f42c1;

-$text-color-dark: #f3f3fd; // Primary text color for dark mode
-$text-disabled-dark: #6f6f7a; // Disabled text color for dark mode
-$input-text-color-dark: #b5b5c8; // Input field text color for dark mode
+// ---------- dark mode ----------
+$text-color-dark: #f3f3fd;
+$text-disabled-dark: #6f6f7a;
+$input-text-color-dark: #b5b5c8;
+$highlight-text-color-dark: #B392F0;

-// Accent colors
-$accent-color: #6f42c1; // Primary accent color
-$accent-color-dark: #c4abf1; // Primary accent color for dark mode
-$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
-$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
+// background colors
+// ---------- light mode ----------
+$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
+$background-color-secondary: #FCFDFD4D;
+$background-color-accent: #6f42c1;
+$background-color-button: #6f42c1;
+$background-color-drop-down: #6F42C14D;
+$background-color-input: #FFFFFF4D;
+$background-color-input-focus: #F2F2F7;
+$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
+$background-color-selected: #E0DFFF;
+$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);

-// Background colors
-$background-color: #fcfdfd; // Main background color
-$background-color-dark: #19191d; // Main background color for dark mode
-$background-color-secondary: #e1e0ff80; // Secondary background color
-$background-color-secondary-dark: #39394f99; // Secondary background color for dark mode
-$background-color-gray: #f3f3f3; // Main background color
-$background-color-gray-dark: #232323; // Main background color for dark mode
+// ---------- dark mode ----------
+$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
+$background-color-secondary-dark: #19191D99;
+$background-color-accent-dark: #6f42c1;
+$background-color-button-dark: #6f42c1;
+$background-color-drop-down-dark: #50505080;
+$background-color-input-dark: #FFFFFF33;
+$background-color-input-focus-dark: #333333;
+$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
+$background-color-selected-dark: #403E66;
+$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);

-// Border colors
-$border-color: #e0dfff; // Default border color
-$border-color-dark: #403e6a; // Border color for dark mode
+// border colors
+// ---------- light mode ----------
+$border-color: #E0DFFF;
+$border-color-accent: #6F42C1;

-// Shadow color
-$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
-$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode
+// ---------- dark mode ----------
+$border-color-dark: #564B69;
+$border-color-accent-dark: #6F42C1;

-// Gradients
-$acent-gradient-dark: linear-gradient(
-  90deg,
-  #b392f0 0%,
-  #a676ff 100%
-); // Dark mode accent gradient
-$acent-gradient: linear-gradient(
-  90deg,
-  #6f42c1 0%,
-  #925df3 100%
-); // Light mode accent gradient
+// highlight colors
+// ---------- light mode ----------
+$highlight-accent-color: #E0DFFF;
+$highlight-secondary-color: #6F42C1;
+
+// ---------- dark mode ----------
+$highlight-accent-color-dark: #403E6A;
+$highlight-secondary-color-dark: #C4ABF1;
+
+// colors
+$color1: #A392CD;
+$color2: #7b4cd3;
+$color3: #B186FF;
+$color4: #8752E8;
+$color5: #C7A8FF;
+
+
+// old variables
+$accent-color: #6f42c1;
+$accent-color-dark: #c4abf1;
+$highlight-accent-color: #e0dfff;
+$highlight-accent-color-dark: #403e6a;
+
+$background-color: #fcfdfd;
+$background-color-dark: #19191d;
+$background-color-secondary: #e1e0ff80;
+$background-color-secondary-dark: #39394f99;
+$background-color-gray: #f3f3f3;
+$background-color-gray-dark: #232323;
+
+$border-color: #e0dfff;
+$border-color-dark: #403e6a;
+
+$shadow-color: #3c3c431a;
+$shadow-color-dark: #8f8f8f1a;
+
+$acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
+$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);

 $faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
 $faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);

-// ========================================================================
-// Typography
-// ========================================================================
+$font-inter: "Inter", sans-serif;
+$font-josefin-sans: "Josefin Sans", sans-serif;
+$font-poppins: "Poppins", sans-serif;
+$font-roboto: "Roboto", sans-serif;

-// Font Family Variables
-$font-inter: "Inter", sans-serif; // Inter font
-$font-josefin-sans: "Josefin Sans", sans-serif; // Josefin Sans font
-$font-poppins: "Poppins", sans-serif; // Poppins font
-$font-roboto: "Roboto", sans-serif; // Roboto font
+$tiny: 0.625rem;
+$small: 0.75rem;
+$regular: 0.8rem;
+$large: 1rem;
+$xlarge: 1.125rem;
+$xxlarge: 1.5rem;
+$xxxlarge: 2rem;

-// Font sizes (converted to rem using a utility function)
-$tiny: 0.625rem; // Extra small text (10px)
-$small: 0.75rem; // Small text (12px)
-$regular: 0.8rem; // Default text size (14px)
-$large: 1rem; // Large text size (16px)
-$xlarge: 1.125rem; // Extra large text size (18px)
-$xxlarge: 1.5rem; // Double extra large text size (24px)
-$xxxlarge: 2rem; // Triple extra large text size (32px)
+$thin-weight: 300;
+$regular-weight: 400;
+$medium-weight: 500;
+$bold-weight: 600;

-// Font weights
-$thin-weight: 300; // Regular font weight
-$regular-weight: 400; // Regular font weight
-$medium-weight: 500; // Medium font weight
-$bold-weight: 600; // Bold font weight
+$z-index-drei-html: 1;
+$z-index-default: 1;
+$z-index-marketplace: 2;
+$z-index-tools: 3;
+$z-index-negative: -1;
+$z-index-ui-base: 10;
+$z-index-ui-overlay: 20;
+$z-index-ui-popup: 30;
+$z-index-ui-highest: 50;

-// ========================================================================
-// Z-Index Levels
-// ========================================================================
+$box-shadow-light: 0px 2px 4px $shadow-color;
+$box-shadow-medium: 0px 4px 8px $shadow-color;
+$box-shadow-heavy: 0px 8px 16px $shadow-color;

-// Z-index variables for layering
-$z-index-drei-html: 1; // For drei's Html components
-$z-index-default: 1; // For drei's Html components
-$z-index-marketplace: 2; // For drei's Html components
-$z-index-tools: 3; // For drei's Html components
-$z-index-negative: -1; // For drei's Html components
-$z-index-ui-base: 10; // Base UI elements
-$z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
-$z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements
-$z-index-ui-highest: 50; // Highest priority elements (e.g., notifications, loading screens)
-
-// ========================================================================
-// Shadows
-// ========================================================================
-
-// Box shadow variables
-$box-shadow-light: 0px 2px 4px $shadow-color; // Light shadow
-$box-shadow-medium: 0px 4px 8px $shadow-color; // Medium shadow
-$box-shadow-heavy: 0px 8px 16px $shadow-color; // Heavy shadow
-
-// ========================================================================
-// Border Radius
-// ========================================================================
-
-// Border radius variables
-$border-radius-small: 4px; // Small rounded corners
-$border-radius-medium: 6px; // Medium rounded corners
-$border-radius-large: 12px; // Large rounded corners
-$border-radius-circle: 50%; // Fully circular
-$border-radius-extra-large: 20px; // Extra-large rounded corners
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-large: 12px;
+$border-radius-circle: 50%;
+$border-radius-extra-large: 20px;
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -0,0 +1,5 @@
+section, .section{
+    padding: 12px;
+    outline: 1px solid var(--border-color);
+    border-radius: 16px;
+}
--- a/app/src/styles/base/reset.scss
+++ b/app/src/styles/base/reset.scss
@@ -12,3 +12,10 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
 input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
  display: none;
 }
+
+button{
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
--- a/app/src/styles/components/analysis/ROISummary.scss
+++ b/app/src/styles/components/analysis/ROISummary.scss
@@ -1,7 +1,6 @@
 .roiSummary-container {
-
    .roiSummary-wrapper {
-        background-color: #F2F2F7;
+        background-color: var(--background-color);

        .product-info {
            display: flex;
@@ -22,7 +21,7 @@
                    }

                    &:last-child {
-                        color: #2B3344;
+                        color: var(--text-color);
                    }
                }
            }
@@ -30,9 +29,30 @@

        .roi-details {
            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .progress-wrapper {
+                width: 250px;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                .content {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 3px;
+                    align-items: center;
+
+                    .key {
+                        font-size: var(--font-size-xlarge);
+                        color: var(--accent-color);
+                    }
+                }
+            }

            .roi-progress {
-                width: 60%;
+                width: 100%;
            }

            .metrics {
@@ -43,8 +63,8 @@
                .metric-item {
                    width: 100%;
                    border-radius: 6px;
-                    border: 1px solid var(--axis-colors-green, #43C06D);
-                    background: var(--axis-colors-green-lite, #BEEECF);
+                    border: 1px solid #00FF56;
+                    background: #436D51;
                    display: flex;
                    flex-direction: column;
                    padding: 4px 6px;
@@ -58,7 +78,6 @@
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
-
                    }

                    .metric-value {
@@ -74,13 +93,11 @@
                    .metric-item {
                        background-color: var(--background-color);
                        border: 1px solid var(--Grays-Gray-6, #F2F2F7);
-
                    }
                }
            }
        }

-
        .cost-breakdown {
            background-color: var(--background-color);
            border: 1px solid var(--text-disabled);
@@ -90,9 +107,16 @@
            .breakdown-header {
                display: flex;
                align-items: center;
+                justify-content: space-between;
                gap: 8px;
                margin-bottom: 16px;

+                .section-wrapper {
+                    display: flex;
+                    gap: 4px;
+                    align-items: center;
+                }
+
                .section-number {
                    font-size: 20px;
                    color: #00aaff;
@@ -100,18 +124,23 @@

                .section-title {
                    font-size: var(--font-size-regular);
-                    color: #333;
+                    color: var(--text-color);
                }

                .expand-icon {
                    font-size: 16px;
-                    color: #666;
+                    color: var(--text-color);
                    cursor: pointer;
+                    transform: rotate(90deg);
+                    transition: transform 0.2s linear;
+                }
+
+                .expand-icon.open {
+                    transform: rotate(0deg);
+
                }
            }

-
-
            .breakdown-table {
                width: 100%;
                border-collapse: collapse;
@@ -125,28 +154,18 @@
                    border-bottom: 1px solid var(--text-disabled);
                }

-                /* Apply left border to first child */
-                th:first-child {
-                    border-left: 1px solid var(--text-disabled);
-                }
-
-                /* Apply right border to last child */
-                th:last-child {
-                    border-right: 1px solid var(--text-disabled);
-                }
-
+                th:first-child,
                td:first-child {
                    border-left: 1px solid var(--text-disabled);
                }

-                /* Apply right border to last child */
+                th:last-child,
                td:last-child {
                    border-right: 1px solid var(--text-disabled);
                }

                th {
                    background-color: var(--background-color);
-
                    color: #333;
                }

@@ -156,12 +175,8 @@
                    color: #333;
                }
            }
-
-
-
        }

-
        .tips-section {
            background-color: var(--background-color);
            border-radius: 8px;
@@ -182,17 +197,15 @@

            .tip-description {
                span {
+                    font-size: var(--font-size-xlarge);
                    color: #34C759;
-                    /* Default color for the first span */

                    &:first-child {
                        color: #34C759;
-                        /* Color for the first span */
                    }

                    &:nth-child(2) {
                        color: #488EF6;
-                        /* Color for the second span */
                    }
                }
            }
@@ -200,13 +213,10 @@

        .get-tips-button {
            border: none;
-
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 8px;
-
-            /* Make the button content-width dependent */
            display: inline-block;
            display: flex;
            justify-content: flex-end;
@@ -216,54 +226,93 @@
                background-color: var(--accent-color);
                color: var(--background-color);
                padding: 4px 6px;
-                /* Add padding to ensure it has space around the text */
                border-radius: 5px;
                display: inline-block;
-                /* Ensure button width adjusts to its content */
                font-size: 14px;
                text-align: center;
-                /* Ensure text is centered */
            }
        }
+    }

+    .semi-circle-wrapper {
+        width: 100%;
+        height: 125px;
+        overflow-y: hidden;
+        position: relative;
+    }

+    .semi-circle {
+        width: 100%;
+        height: 250px;
+        border-radius: 50%;
+        position: relative;
+        transition: background 0.5s ease;
+    }

+    .progress-cover {
+        position: absolute;
+        width: 75%;
+        height: 75%;
+        top: 12.5%;
+        left: 12.5%;
+        background-color: var(--background-color);
+        border-radius: 50%;
+    }
+
+    .label-wrapper {
+        .label {
+            font-size: var(--font-size-xxxlarge);
+        }
+
+        position: absolute;
+        bottom: 0%;
+        left: 50%;
+        transform: translate(-50%, 0%);
+        font-weight: bold;
+        font-size: 1.2rem;
+        color: #333;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
    }
 }

+// Breakdown Table Open/Close Logic

-.semi-circle-wrapper {
-    width: 250px;
-    height: 125px;
-    overflow: hidden;
-    position: relative;
-  }
-  
-  .semi-circle {
-    width: 250px;
-    height: 250px;
-    border-radius: 50%;
-    position: relative;
-    transition: background 0.5s ease;
-    transform: rotate(180deg); /* rotate so 0% is at left */
-  }
-  
-  .progress-cover {
-    position: absolute;
-    width: 75%;
-    height: 75%;
-    top: 12.5%;
-    left: 12.5%;
-    background-color: white;
-    border-radius: 50%;
-  }
-  
-  .label {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: bold;
-    font-size: 1.2rem;
-  }
-  
+.breakdown-table-wrapper {
+    &.closed {
+        max-height: 0;
+        padding: 0;
+    }
+
+    &.open {
+        max-height: 500px;
+    }
+
+
+
+
+
+    .breakdown-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th,
+        td {
+            padding: 10px;
+            border: 1px solid #ddd;
+            text-align: left;
+        }
+
+        .total-row {
+            background-color: #f4f4f4;
+            font-weight: bold;
+        }
+
+        .net-profit-row {
+            background-color: #dff0d8;
+            font-weight: bold;
+        }
+    }
+}
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@@ -1,18 +1,25 @@
 .analysis {
-    position: absolute;
+    position: fixed;
    top: 0;
    left: 0;
    display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
+    align-items: start;
    width: 100%;
    height: 100vh;
-    z-index: 100000000000000000000000000000;
+    // pointer-events: none;k
+    z-index: 10000;
+
+    .analysis-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
 }

 .analysis-card {
    min-width: 333px;
-    // background: var(--primary-color);
+    background: var(--background-color);
    border-radius: 20px;

    padding: 8px;
@@ -109,6 +116,7 @@


 .throughoutSummary {
+
    .throughoutSummary-wrapper {
        .process-container {
            display: flex;
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -3,15 +3,75 @@

 .simulation-player-wrapper {
  position: fixed;
-  bottom: 32px;
+  bottom: 50px;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, 0);
+  width: 70%;
+
  .simulation-player-container {
+    background-color: var(--background-color);
+    padding: 7px;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .progresser-wrapper {
+      background-color: var(--highlight-accent-color);
+      padding: 4px 5px;
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding-top: 30px;
+      transition: height 0.2s linear;
+    }
+
+
+
+
    .controls-container {
      @include flex-center;
      gap: 12px;
-      margin-bottom: 4px;
+      justify-content: space-between;
+
+      .production-details,
+      .controls-wrapper {
+        display: flex;
+        gap: 6px;
+      }
+
+      .production-details {
+        .production-wrapper {
+
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 6px;
+
+          .header {
+            display: flex;
+            flex-direction: row;
+            gap: 6px
+          }
+
+          .progress-wrapper {
+            width: 164px;
+            height: 8px;
+            border-radius: 5px;
+            // overflow: hidden;
+            background-color: var(--highlight-accent-color);
+
+            .progress {
+              border-radius: 5px;
+              height: 100%;
+              background-color: var(--accent-color);
+            }
+          }
+        }
+      }
+
      .simulation-button-container {
        @include flex-center;
        gap: 2px;
@@ -20,38 +80,74 @@
        background-color: var(--background-color);
        border-radius: #{$border-radius-small};
        cursor: pointer;
+
        &:hover {
          background-color: var(--highlight-accent-color);
          color: var(--accent-color);
+
          path {
            stroke: var(--accent-color);
          }
        }
      }
    }
+
    .speed-control-container {
      @include flex-center;
      gap: 18px;
      padding: 5px 16px;
-      background: var(--background-color);
+      // background: var(--background-color);
      border-radius: #{$border-radius-medium};
      box-sizing: #{$box-shadow-medium};
+      border-radius: 20px;
+      position: relative;
+
      .min-value,
      .max-value {
+        display: flex;
+        align-items: center;
        font-weight: var(--font-weight-bold);
      }
+
      .slider-container {
-        width: 580px;
+        width: 100%;
        max-width: 80vw;
        height: 28px;
-        background: var(--background-color-gray);
+        // background: var(--background-color-gray);
        border-radius: #{$border-radius-small};
        position: relative;
-        padding: 4px 26px;
+        // padding: 4px 26px;
+
+
+        .speed-label {
+          font-size: var(--font-size-tiny);
+          position: absolute;
+          bottom: -4px;
+
+          &:first-child {
+            left: 0;
+          }
+
+          &:last-child {
+            right: 0;
+          }
+        }
+
+        &::after {
+          content: "";
+          background-color: #E5E5EA;
+          position: absolute;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 100%;
+          height: 3px;
+        }
+
        .custom-slider {
          height: 100%;
          width: 100%;
          position: relative;
+
          .slider-input {
            position: absolute;
            width: 100%;
@@ -60,55 +156,209 @@
            z-index: 3;
            cursor: pointer;
          }
+
          .slider-handle {
            position: absolute;
+            top: 50%;
            width: 42px;
            line-height: 20px;
            text-align: center;
            background: var(--accent-color);
            color: var(--primary-color);
            border-radius: #{$border-radius-small};
-            transform: translateX(-50%);
+            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 2;
          }
        }
-        .marker{
-            position: absolute;
-            background-color: var(--text-disabled);
-            width: 2px;
-            height: 12px;
-            border-radius: 1px;
-            top: 8px;
+
+        .marker {
+          position: absolute;
+          background-color: var(--text-disabled);
+          width: 2px;
+          height: 12px;
+          border-radius: 1px;
+          top: 8px;
+          z-index: 1;
        }
-        .marker.marker-10{
-            left: 10%;
+
+        .marker.marker-10 {
+          left: 10%;
        }
-        .marker.marker-20{
-            left: 20%;
+
+        .marker.marker-20 {
+          left: 20%;
        }
-        .marker.marker-30{
-            left: 30%;
+
+        .marker.marker-30 {
+          left: 30%;
        }
-        .marker.marker-40{
-            left: 40%;
+
+        .marker.marker-40 {
+          left: 40%;
        }
-        .marker.marker-50{
-            left: 50%;
+
+        .marker.marker-50 {
+          left: 50%;
        }
-        .marker.marker-60{
-            left: 60%;
+
+        .marker.marker-60 {
+          left: 60%;
        }
-        .marker.marker-70{
-            left: 70%;
+
+        .marker.marker-70 {
+          left: 70%;
        }
-        .marker.marker-80{
-            left: 80%;
+
+        .marker.marker-80 {
+          left: 80%;
        }
-        .marker.marker-90{
-            left: 90%;
+
+        .marker.marker-90 {
+          left: 90%;
        }
      }
    }
+
+    .time-displayer {
+      display: flex;
+      justify-content: space-between;
+      height: auto;
+      opacity: 1;
+      // overflow: hidden;
+
+      transition: all 0.5s ease;
+
+      .start-time-wrappper,
+      .end-time-wrappper {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .time-progresser {
+        width: 70%;
+
+        .timeline {
+          padding: 16px;
+          // background: #f5f3fa;
+          background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
+
+          border-radius: 30px;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          height: 33px;
+
+          .label-dot-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
+            position: relative;
+
+            .label {
+              position: absolute;
+              top: -200%;
+              transform: translate(0, -0);
+              font-size: 12px;
+              color: #666;
+              white-space: nowrap;
+            }
+
+            .dot {
+              width: 14px;
+              height: 14px;
+              border-radius: 50%;
+              background-color: #d3d3e2;
+
+              &.filled {
+                background-color: #8f5cf2;
+
+                border: 4px solid var(--accent-color);
+              }
+            }
+          }
+
+          .line {
+            flex-grow: 1;
+            height: 4px;
+            background-color: #d3d3e2;
+            margin: 0 4px;
+
+            &.filled {
+              background-color: #8f5cf2;
+            }
+          }
+        }
+      }
+    }
+
+
+
  }
+
+
 }
+
+.processDisplayer {
+  border-radius: 5px;
+  // overflow: hidden;
+  background-color: var(--highlight-accent-color);
+  padding: 14px 6px;
+  position: relative;
+
+  .process-player {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 3.946108102798462px;
+    height: 26px;
+    left: 86.81px;
+    border-radius: 14px;
+    border-width: 1px;
+    background: var(--accent-color, #6F42C1);
+
+  }
+
+  .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;
+    }
+  }
+
+}
+
+
+.simulation-player-container.open {
+
+  .progresser-wrapper {
+    padding-top: 4px;
+  }
+
+  .time-displayer {
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+  }
+
+  .processDisplayer {
+    padding: 0;
+    background: transparent;
+
+    .process-player {
+      width: 0;
+      display: none !important;
+    }
+  }
+
+}
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -366,15 +366,66 @@
    min-height: 50vh;
    padding-bottom: 12px;
    position: relative;
-    display: flex;
-    flex-direction: column;
+    overflow: auto;

    .sidebar-right-content-container {
      border-bottom: 1px solid var(--border-color);
-      // flex: 1;
      height: calc(100% - 36px);
      position: relative;
-      overflow: auto;
+      width: 320px;
+      .no-event-selected {
+        color: #666;
+        padding: 1.8rem 1rem;
+        grid-column: 1 / -1;
+        .products-list {
+          padding-top: 1rem;
+          .products-list-title {
+            text-align: start;
+            color: var(--accent-color);
+            font-size: var(--font-size-regular);
+          }
+          ul {
+            li {
+              text-align: start;
+              margin: 8px 0;
+              padding: 2px 0;
+              text-decoration: none;
+              &::marker {
+                content: "";
+              }
+              button {
+                width: fit-content;
+                position: relative;
+                transition: all 0.2s ease;
+                @include flex-center;
+                gap: 4px;
+                &:before {
+                  content: "";
+                  position: absolute;
+                  left: 0;
+                  bottom: -4px;
+                  background: var(--accent-color);
+                  height: 1px;
+                  width: 0%;
+                  transition: all 0.3s ease;
+                }
+              }
+              &:hover {
+                button {
+                  path {
+                    stroke: var(--accent-color);
+                    strokeWidth: 1.5px;
+                  }
+                  color: var(--accent-color);
+                  &:before {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
    }
  }

@@ -642,7 +693,7 @@

        path {
          stroke: var(--accent-color);
-          stroke-width: 1.5px;
+          strokeWidth: 1.5px;
        }

        &:hover {
@@ -675,10 +726,14 @@
        color: var(--primary-color);
        border-radius: #{$border-radius-small};
        cursor: pointer;
-
+        outline: none;
+        border: none;
        path {
          stroke: var(--primary-color);
        }
+        &:disabled {
+          background-color: var(--text-disabled);
+        }
      }
    }

@@ -706,7 +761,7 @@
      }
      .selected-actions-list {
        margin-bottom: 8px;
-        .eye-dropper-input-container{
+        .eye-dropper-input-container {
          padding: 6px 12px;
          .regularDropdown-container {
            padding: 5px 8px;
@@ -747,19 +802,21 @@
          width: 100%;
          margin: 2px 0;
          border-radius: #{$border-radius-small};
-        }
+          .value {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            min-width: 80%;
+            gap: 6px;
+            .input-value {
+              text-align: start;
+            }

-        .value {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          min-width: 80%;
-          gap: 6px;
-
-          input {
-            width: fit-content;
-            outline: none;
-            accent-color: var(--accent-color);
+            input {
+              width: fit-content;
+              outline: none;
+              accent-color: var(--accent-color);
+            }
          }
        }

@@ -797,6 +854,7 @@
        @include flex-center;
        padding: 4px;
        cursor: grab;
+        width: 100%;

        &:active {
          cursor: grabbing;
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -1,12 +1,12 @@
 // abstracts
@use 'abstracts/variables';
@use 'abstracts/mixins';
-@use 'abstracts/placeholders';
@use 'abstracts/functions';

 // base
@use 'base/reset';
@use 'base/typography';
+@use 'base/global';
@use 'base/base';

 // components
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -662,6 +662,7 @@
 }

 .distance-line {
+ 
  position: absolute;
  border-style: dashed;
  border-color: var(--accent-color);
@@ -776,13 +777,13 @@
  border-radius: 6px;
  overflow: hidden;
  padding: 4px;
-
  min-width: 150px;

  .option {
    padding: 4px 10px;
    border-radius: #{$border-radius-small};
    color: var(--text-color);
+    text-wrap: nowrap;
    cursor: pointer;

    &:hover {
@@ -794,8 +795,8 @@
      color: #f65648;

      &:hover {
-        background-color: #f65648;
-        color: white;
+        background-color: #f657484d;
+        color: #f65648;
      }
    }
  }