Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

2025-04-29 18:37:18 +05:30
parent 949dbbca8d 38161fb733
commit 5460c23a46
15 changed files with 1385 additions and 155 deletions
--- a/app/src/styles/components/analysis/ROISummary.scss
+++ b/app/src/styles/components/analysis/ROISummary.scss
@@ -0,0 +1,318 @@
+.roiSummary-container {
+    .roiSummary-wrapper {
+        background-color: var(--background-color);
+
+        .product-info {
+            display: flex;
+        }
+
+        .playBack {
+            display: flex;
+            background-color: var(--background-color);
+            border-radius: 12px;
+            padding: 6px;
+
+            .info {
+                span {
+                    font-size: var(--font-size-xlarge);
+
+                    &:first-child {
+                        color: #31C756;
+                    }
+
+                    &:last-child {
+                        color: var(--text-color);
+                    }
+                }
+            }
+        }
+
+        .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: 100%;
+            }
+
+            .metrics {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                .metric-item {
+                    width: 100%;
+                    border-radius: 6px;
+                    border: 1px solid #00FF56;
+                    background: #436D51;
+                    display: flex;
+                    flex-direction: column;
+                    padding: 4px 6px;
+
+                    &:last-child {
+                        align-items: center;
+                    }
+
+                    .metric-label {
+                        font-size: 10px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+
+                    .metric-value {
+                        text-align: center;
+                        line-height: 20px;
+                    }
+                }
+
+                .metric-wrapper {
+                    display: flex;
+                    gap: 6px;
+
+                    .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);
+            border-radius: 8px;
+            padding: 16px;
+
+            .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;
+                }
+
+                .section-title {
+                    font-size: var(--font-size-regular);
+                    color: var(--text-color);
+                }
+
+                .expand-icon {
+                    font-size: 16px;
+                    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;
+                border-radius: 8px;
+
+                th,
+                td {
+                    padding: 8px;
+                    text-align: left;
+                    border-top: 1px solid var(--text-disabled);
+                    border-bottom: 1px solid var(--text-disabled);
+                }
+
+                th:first-child,
+                td:first-child {
+                    border-left: 1px solid var(--text-disabled);
+                }
+
+                th:last-child,
+                td:last-child {
+                    border-right: 1px solid var(--text-disabled);
+                }
+
+                th {
+                    background-color: var(--background-color);
+                    color: #333;
+                }
+
+                .total-row,
+                .net-profit-row {
+                    font-weight: bold;
+                    color: #333;
+                }
+            }
+        }
+
+        .tips-section {
+            background-color: var(--background-color);
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            padding: 12px;
+
+            .tip-header {
+                display: flex;
+                align-items: center;
+
+                .tip-title {
+                    color: var(--text-color);
+                    font-weight: 600;
+                }
+            }
+
+            .tip-description {
+                span {
+                    font-size: var(--font-size-xlarge);
+                    color: #34C759;
+
+                    &:first-child {
+                        color: #34C759;
+                    }
+
+                    &:nth-child(2) {
+                        color: #488EF6;
+                    }
+                }
+            }
+        }
+
+        .get-tips-button {
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-top: 8px;
+            display: inline-block;
+            display: flex;
+            justify-content: flex-end;
+            background: none;
+
+            .btn {
+                background-color: var(--accent-color);
+                color: var(--background-color);
+                padding: 4px 6px;
+                border-radius: 5px;
+                display: inline-block;
+                font-size: 14px;
+                text-align: center;
+            }
+        }
+    }
+
+    .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
+
+.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;
--- 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: var(--background-color);
        border-radius: #{$border-radius-small};
        cursor: pointer;
+
        &:hover {
          background: 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,207 @@
            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: var(--text-disabled);
+            background-color: var(--text-disabled);
            width: 2px;
            height: 12px;
            border-radius: 1px;
            top: 8px;
        }
-        .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
@@ -434,7 +434,7 @@
                button {
                  path {
                    stroke: var(--accent-color);
-                    stroke-width: 1.5px;
+                    strokeWidth: 1.5px;
                  }
                  color: var(--accent-color);
                  &:before {
@@ -713,7 +713,7 @@

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

        &:hover {
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -26,6 +26,7 @@
@use 'components/menu/menu';
@use 'components/confirmationPopUp';
@use 'components/analysis/analysis';
+@use 'components/analysis/ROISummary.scss';

 // layout
@use 'layout/loading';
--- 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);