updating UI

2025-05-03 10:03:39 +05:30
parent 52c6ab8a65
commit c187a07b22
10 changed files with 346 additions and 282 deletions
--- a/app/src/components/icons/analysis.tsx
+++ b/app/src/components/icons/analysis.tsx
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -1,21 +1,101 @@
-import React, { useState } from "react";
-import { ProductionCapacityIcon } from "../../icons/analysis";
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  LineElement,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+} from "chart.js";
+import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";

-const ProductionCapacity = ({
-  progressPercent = 50,
-  avgProcessTime = "28.4 Secs/unit",
-  machineUtilization = "78%",
-  throughputValue = 128,
-  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
-}) => {
-  const totalBars = 6;
-  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
-  const partialFillPercent =
-    ((progressPercent / 100) * totalBars - barsToFill) * 100;
+ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+
+// Helper function to generate random colors
+const getRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+const ThroughputSummary = () => {
+  // Define all data internally within the component
+  const timeRange = {
+    startTime: "08:00 AM",
+    endTime: "09:00 AM",
+  };
+
+  const throughputData = {
+    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+    data: [100, 120, 110, 130, 125, 128, 132],
+    totalThroughput: 1240,
+    assetUsage: 85,
+  };
+
+  const energyConsumption = {
+    energyConsumed: 456,
+    unit: "KWH",
+  };
+
+  // Dynamic shift data
+  const shiftUtilization = [
+    { shift: 1, percentage: 30, color: "#F3C64D" },
+    { shift: 2, percentage: 40, color: "#67B3F4" },
+    { shift: 3, percentage: 30, color: "#7981F5" },
+  ];
+
+  // Chart data configuration
+  const chartData = {
+    labels: throughputData.labels,
+    datasets: [
+      {
+        label: "Units/hour",
+        data: throughputData.data,
+        borderColor: "#B392F0",
+        tension: 0.4,
+        pointRadius: 0, // Hide points
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          display: false,
+          color: "#fff",
+        },
+      },
+      y: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          display: false,
+          color: "#fff",
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: true,
+      },
+    },
+  };

  return (
-    <div className="productionCapacity-container analysis-card">
-      <div className="productionCapacity-wrapper analysis-card-wrapper">
+    <div className="throughoutSummary analysis-card">
+      <div className="throughoutSummary-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Production Capacity</div>
@@ -30,34 +110,63 @@ const ProductionCapacity = ({

        <div className="process-container">
          <div className="throughput-value">
-            <span className="value">{throughputValue}</span> Units/hour
+            <span className="value">{throughputData.totalThroughput}</span>{" "}
+            Units/hour
          </div>
-
-          {/* Dynamic Progress Bar */}
-          <div className="progress-bar-wrapper">
-            {[...Array(totalBars)].map((_, i) => (
-              <div className="progress-bar" key={i}>
-                {i < barsToFill ? (
-                  <div className="bar-fill full" />
-                ) : i === barsToFill ? (
-                  <div
-                    className="bar-fill partial"
-                    style={{ width: `${partialFillPercent}%` }}
-                  />
-                ) : null}
-              </div>
-            ))}
+          <div className="lineChart">
+            <div className="assetUsage">
+              <div className="key">Asset usage</div>
+              <div className="value">{throughputData.assetUsage}%</div>
+            </div>
+            <Line data={chartData} options={chartOptions} />
          </div>
        </div>

-        <div className="metrics-section">
-          <div className="metric">
-            <span className="label">Avg. Process Time</span>
-            <span className="value">{avgProcessTime}</span>
+        <div className="footer">
+          <div className="energyConsumption footer-card">
+            <div className="header">Energy Consumption</div>
+            <div className="value-container">
+              <div className="energy-icon">
+                <PowerIcon />
+              </div>
+              <div className="value-wrapper">
+                <div className="value">{energyConsumption.energyConsumed}</div>
+                <div className="unit">{energyConsumption.unit}</div>
+              </div>
+            </div>
          </div>
-          <div className="metric">
-            <span className="label">Machine Utilization</span>
-            <span className="value">{machineUtilization}</span>
+          <div className="shiftUtilization footer-card">
+            <div className="header">Shift Utilization</div>
+            <div className="value-container">
+              <div className="value">{throughputData.assetUsage}%</div>
+
+              <div className="progress-wrapper">
+                {/* Dynamically create progress bars based on shiftUtilization array */}
+                {shiftUtilization.map((shift, index) => (
+                  <div
+                    key={shift.shift}
+                    className={`progress shift-${shift.shift}`}
+                    style={{
+                      width: `${shift.percentage}%`,
+                      backgroundColor: shift.color,
+                    }}
+                  ></div>
+                ))}
+              </div>
+
+              <div className="progress-indicator">
+                {/* Dynamically create shift indicators with random colors */}
+                {shiftUtilization.map((shift, index) => (
+                  <div className="shift-wrapper" key={shift.shift}>
+                    <span
+                      className={`indicator shift-${shift.shift}`}
+                      style={{ backgroundColor: shift.color }} // Random color for indicator
+                    ></span>
+                    <label>Shift {shift.shift}</label>
+                  </div>
+                ))}
+              </div>
+            </div>
          </div>
        </div>
      </div>
@@ -65,4 +174,4 @@ const ProductionCapacity = ({
  );
 };

-export default ProductionCapacity;
+export default ThroughputSummary;
--- a/app/src/components/ui/analysis/ROISummary.tsx
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -1,5 +1,11 @@
 import React, { useState } from "react";
-import { ROISummaryIcon } from "../../icons/analysis";
+import {
+  CostBreakDownIcon,
+  LightBulpIcon,
+  ROISummaryIcon,
+  ROISummaryProductName,
+  SonarCrownIcon,
+} from "../../icons/analysis";
 import SemiCircleProgress from "./SemiCircleProgress";

 const ROISummary = ({
@@ -76,10 +82,12 @@ const ROISummary = ({
          </div>
        </div>
        <div className="product-info">
+          <ROISummaryProductName />
          <div className="product-label">Product :</div>
          <div className="product-name">{roiSummaryData.productName}</div>
        </div>
        <div className="playBack">
+          <SonarCrownIcon />
          <div className="icon"></div>
          <div className="info">
            <span>+{roiSummaryData.roiPercentage}%</span> ROI with payback in
@@ -116,7 +124,7 @@ const ROISummary = ({
        <div className="cost-breakdown">
          <div className="breakdown-header" onClick={toggleTable}>
            <div className="section-wrapper">
-              <span className="section-number">①</span>
+              <CostBreakDownIcon />
              <span className="section-title">Cost Breakdown</span>
            </div>

@@ -168,13 +176,18 @@ const ROISummary = ({
        </div>
        <div className="tips-section">
          <div className="tip-header">
-            <span className="lightbulb-icon">💡</span>
+            <span className="lightbulb-icon">
+              <LightBulpIcon />
+            </span>
            <span className="tip-title">How to improve ROI?</span>
          </div>
          <div className="tip-description">
            Increase CNC utilization by <span className="highlight">10%</span>{" "}
            to shave <span className="highlight">0.5</span> months of payback
            period
+            <div className="placeHolder"></div>
+            <div className="placeHolder"></div>
+            <div className="placeHolder"></div>
          </div>
          <button className="get-tips-button">
            <div className="btn">Get ROI Boost Tips</div>
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -1,102 +1,21 @@
-import React from "react";
-import { Line } from "react-chartjs-2";
-import {
-  Chart as ChartJS,
-  LineElement,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-} from "chart.js";
-import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
-import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+import React, { useState } from "react";
+import { ThroughputSummaryIcon } from "../../icons/analysis";

-ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
-
-// Helper function to generate random colors
-const getRandomColor = () => {
-  const letters = "0123456789ABCDEF";
-  let color = "#";
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  return color;
-};
-
-const ThroughputSummary = () => {
-  // Define all data internally within the component
-  const timeRange = {
-    startTime: "08:00 AM",
-    endTime: "09:00 AM",
-  };
-
-  const throughputData = {
-    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
-    data: [100, 120, 110, 130, 125, 128, 132],
-    totalThroughput: 1240,
-    assetUsage: 85,
-  };
-
-  const energyConsumption = {
-    energyConsumed: 456,
-    unit: "KWH",
-  };
-
-  // Dynamic shift data
-  const shiftUtilization = [
-    { shift: 1, percentage: 30 },
-    { shift: 2, percentage: 40 },
-    { shift: 3, percentage: 30 },
-  ];
-
-  // Chart data configuration
-  const chartData = {
-    labels: throughputData.labels,
-    datasets: [
-      {
-        label: "Units/hour",
-        data: throughputData.data,
-        borderColor: "#B392F0",
-        tension: 0.4,
-        pointRadius: 0, // Hide points
-      },
-    ],
-  };
-
-  const chartOptions = {
-    responsive: true,
-    scales: {
-      x: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          color: "#fff",
-        },
-      },
-      y: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          color: "#fff",
-        },
-      },
-    },
-    plugins: {
-      legend: {
-        display: false,
-      },
-      tooltip: {
-        enabled: true,
-      },
-    },
-  };
+const ProductionCapacity = ({
+  progressPercent = 50,
+  avgProcessTime = "28.4 Secs/unit",
+  machineUtilization = "78%",
+  throughputValue = 128,
+  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
+}) => {
+  const totalBars = 6;
+  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
+  const partialFillPercent =
+    ((progressPercent / 100) * totalBars - barsToFill) * 100;

  return (
-    <div className="throughoutSummary analysis-card">
-      <div className="throughoutSummary-wrapper analysis-card-wrapper">
+    <div className="productionCapacity-container analysis-card">
+      <div className="productionCapacity-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Throughput Summary</div>
@@ -111,63 +30,34 @@ const ThroughputSummary = () => {

        <div className="process-container">
          <div className="throughput-value">
-            <span className="value">{throughputData.totalThroughput}</span>{" "}
-            Units/hour
+            <span className="value">{throughputValue}</span> Units/hour
          </div>
-          <div className="lineChart">
-            <div className="assetUsage">
-              <div className="key">Asset usage</div>
-              <div className="value">{throughputData.assetUsage}%</div>
-            </div>
-            <Line data={chartData} options={chartOptions} />
+
+          {/* Dynamic Progress Bar */}
+          <div className="progress-bar-wrapper">
+            {[...Array(totalBars)].map((_, i) => (
+              <div className="progress-bar" key={i}>
+                {i < barsToFill ? (
+                  <div className="bar-fill full" />
+                ) : i === barsToFill ? (
+                  <div
+                    className="bar-fill partial"
+                    style={{ width: `${partialFillPercent}%` }}
+                  />
+                ) : null}
+              </div>
+            ))}
          </div>
        </div>

-        <div className="footer">
-          <div className="energyConsumption footer-card">
-            <div className="header">Energy Consumption</div>
-            <div className="value-container">
-              <div className="energy-icon">
-                <PowerIcon />
-              </div>
-              <div className="value-wrapper">
-                <div className="value">{energyConsumption.energyConsumed}</div>
-                <div className="unit">{energyConsumption.unit}</div>
-              </div>
-            </div>
+        <div className="metrics-section">
+          <div className="metric">
+            <span className="label">Avg. Process Time</span>
+            <span className="value">{avgProcessTime}</span>
          </div>
-          <div className="shiftUtilization footer-card">
-            <div className="header">Shift Utilization</div>
-            <div className="value-container">
-              <div className="value">{throughputData.assetUsage}%</div>
-
-              <div className="progress-wrapper">
-                {/* Dynamically create progress bars based on shiftUtilization array */}
-                {shiftUtilization.map((shift, index) => (
-                  <div
-                    key={shift.shift}
-                    className={`progress shift-${shift.shift}`}
-                    style={{
-                      width: `${shift.percentage}%`,
-                      backgroundColor: getAvatarColor(index),
-                    }}
-                  ></div>
-                ))}
-              </div>
-
-              <div className="progress-indicator">
-                {/* Dynamically create shift indicators with random colors */}
-                {shiftUtilization.map((shift, index) => (
-                  <div className="shift-wrapper" key={shift.shift}>
-                    <span
-                      className={`indicator shift-${shift.shift}`}
-                      style={{ backgroundColor: getAvatarColor(index) }} // Random color for indicator
-                    ></span>
-                    <label>Shift {shift.shift}</label>
-                  </div>
-                ))}
-              </div>
-            </div>
+          <div className="metric">
+            <span className="label">Machine Utilization</span>
+            <span className="value">{machineUtilization}</span>
          </div>
        </div>
      </div>
@@ -175,4 +65,4 @@ const ThroughputSummary = () => {
  );
 };

-export default ThroughputSummary;
+export default ProductionCapacity;
--- a/app/src/components/ui/log/logger.ts
+++ b/app/src/components/ui/log/logger.ts
@@ -1,71 +0,0 @@
-type LogType = 'log' | 'info' | 'warning' | 'error';
-
-interface LogEntry {
-  type: LogType;
-  message: string;
-  timestamp: Date;
-  context?: string;
-}
-
-class Logger {
-  private static instance: Logger;
-  private logs: LogEntry[] = [];
-  private subscribers: Array<(log: LogEntry) => void> = [];
-
-  private constructor() {}
-
-  public static getInstance(): Logger {
-    if (!Logger.instance) {
-      Logger.instance = new Logger();
-    }
-    return Logger.instance;
-  }
-
-  private notifySubscribers(log: LogEntry) {
-    this.subscribers.forEach(callback => callback(log));
-  }
-
-  private addLog(type: LogType, message: string, context?: string) {
-    const log: LogEntry = { type, message, timestamp: new Date(), context };
-    this.logs.push(log);
-    this.notifySubscribers(log);
-
-    if (process.env.NODE_ENV === 'development') {
-      const logMessage = context ? `[${context}] ${message}` : message;
-      console[type === 'warning' ? 'warn' : type](logMessage);
-    }
-  }
-
-  public log(message: string, context?: string) {
-    this.addLog('log', message, context);
-  }
-
-  public info(message: string, context?: string) {
-    this.addLog('info', message, context);
-  }
-
-  public warning(message: string, context?: string) {
-    this.addLog('warning', message, context);
-  }
-
-  public error(message: string, context?: string) {
-    this.addLog('error', message, context);
-  }
-
-  public getLogs(): LogEntry[] {
-    return [...this.logs];
-  }
-
-  public clear() {
-    this.logs = [];
-  }
-
-  public subscribe(callback: (log: LogEntry) => void) {
-    this.subscribers.push(callback);
-    return () => {
-      this.subscribers = this.subscribers.filter(sub => sub !== callback);
-    };
-  }
-}
-
-export const logger = Logger.getInstance();
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -19,8 +19,8 @@ import {
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSubModuleStore } from "../../../store/useModuleStore";
-import ProductionCapacity from "../analysis/ProductionCapacity";
-import ThroughputSummary from "../analysis/ThroughputSummary";
+import ProductionCapacity from "../analysis/ThroughputSummary";
+import ThroughputSummary from "../analysis/ProductionCapacity";
 import ROISummary from "../analysis/ROISummary";

 const SimulationPlayer: React.FC = () => {
--- a/app/src/modules/builder/builder.tsx
+++ b/app/src/modules/builder/builder.tsx
@@ -56,7 +56,7 @@ import ZoneGroup from "./groups/zoneGroup";
 import useModuleStore from "../../store/useModuleStore";
 import MeasurementTool from "../scene/tools/measurementTool";
 import NavMesh from "../simulation/vehicle/navMesh/navMesh";
-import ProductionCapacity from "../../components/ui/analysis/ProductionCapacity";
+import ProductionCapacity from "../../components/ui/analysis/ThroughputSummary";

 export default function Builder() {
  const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -86,7 +86,7 @@ const Project: React.FC = () => {
      {!selectedUser && (
        <>
          <KeyPressListener />
-          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
+          {/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
          {!isPlaying && (
            <>
              {toggleThreeD && <ModuleToggle />}
@@ -122,7 +122,7 @@ const Project: React.FC = () => {
        }
        onDragOver={(event) => event.preventDefault()}
      >
-        <Scene />
+        {/* <Scene /> */}
      </div>
      {selectedUser && <FollowPerson />}
      {isLogListVisible && (
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@@ -16,6 +16,7 @@
    flex-direction: column;
    gap: 12px;
  }
+
  .analysis-card {
    min-width: 333px;
    background: var(--background-color);
@@ -42,9 +43,14 @@
        align-items: center;

        .main-header {
-          line-height: 20px;
+          color: var(--text-color);
          font-size: var(--font-size-regular);
        }
+
+        .sub-header {
+          color: var(--input-text-color);
+          font-size: var(--font-size-tiny);
+        }
      }

      .process-container {
@@ -114,6 +120,7 @@
        }
      }
    }
+
    .throughoutSummary-wrapper {
      .process-container {
        display: flex;
@@ -166,7 +173,7 @@
          padding: 8px;
          display: flex;
          flex-direction: column;
-          gap: 6px;
+          gap: 16px;

          &:first-child {
            width: 85%;
@@ -182,6 +189,21 @@
            align-items: center;
            justify-content: end;
            gap: 6px;
+
+            .progress-indicator {
+              padding-top: 10px;
+            }
+
+            .value-wrapper {
+              .value {
+                font-size: var(--font-size-xlarge);
+              }
+
+              .unit {
+                font-size: var(--font-size-small);
+
+              }
+            }
          }
        }

@@ -266,4 +288,4 @@
      }
    }
  }
-}
+}
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -67,8 +67,8 @@
    min-width: 150px;
    z-index: 3;
    transform: translate(-50%, -10%);
-    transition: transform 0.5s linear;
    pointer-events: all;
+    transition: all 0.3s linear;

    &::-webkit-scrollbar {
      display: none;
@@ -243,6 +243,7 @@
            &:hover {
              background: var(--highlight-accent-color);
              width: 100%;
+
              .label {
                color: var(--accent-color);
              }
@@ -619,6 +620,7 @@
        .label {
          color: var(--accent-color);
        }
+
        background: var(--highlight-accent-color);
        width: 100%;

@@ -933,4 +935,4 @@
    opacity: 0;
    transform: scaleY(0);
  }
-}
+}