From 8390302c5fd22ae3f922c61530af8af2428ffbe1 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Thu, 5 Jun 2025 14:38:51 +0530 Subject: [PATCH 1/6] refactor: improve imports and add InputToggle for view labels in SimulationPlayer component --- .../ui/simulation/simulationPlayer.tsx | 35 ++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index e2f1c9d..eee2253 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -1,6 +1,10 @@ import React, { useState, useRef, useEffect } from "react"; import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons"; -import { useActiveTool, useProcessBar } from "../../../store/builder/store"; +import { + useActiveTool, + useProcessBar, + useViewSceneStore, +} from "../../../store/builder/store"; import { useAnimationPlaySpeed, usePauseButtonStore, @@ -19,12 +23,15 @@ import { StartIcon, } from "../../icons/ExportCommonIcons"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; -import { useSubModuleStore } from "../../../store/useModuleStore"; +import useModuleStore, { + useSubModuleStore, +} from "../../../store/useModuleStore"; import ProductionCapacity from "../analysis/ThroughputSummary"; import ThroughputSummary from "../analysis/ProductionCapacity"; import ROISummary from "../analysis/ROISummary"; import { usePlayerStore } from "../../../store/useUIToggleStore"; import { useComparisonProduct } from "../../../store/simulation/useSimulationStore"; +import InputToggle from "../inputs/InputToggle"; const SimulationPlayer: React.FC = () => { const MAX_SPEED = 4; // Maximum speed @@ -41,7 +48,10 @@ const SimulationPlayer: React.FC = () => { const { isReset, setReset } = useResetButtonStore(); const { subModule } = useSubModuleStore(); const { clearComparisonProduct } = useComparisonProduct(); + const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore(); + const { isPlaying } = usePlayButtonStore(); + const { activeModule } = useModuleStore(); useEffect(() => { if (isReset) { setTimeout(() => { @@ -113,8 +123,7 @@ const SimulationPlayer: React.FC = () => { const monthlyROI = 50; const { processBar } = useProcessBar(); - useEffect(() => { - }, [processBar]) + useEffect(() => { }, [processBar]); const intervals = [50, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; @@ -154,6 +163,16 @@ const SimulationPlayer: React.FC = () => { return ( <> + {isPlaying && activeModule === "simulation" && ( +
+ setViewSceneLabels(!viewSceneLabels)} + /> +
+ )}
@@ -209,9 +228,7 @@ const SimulationPlayer: React.FC = () => { {!hidePlayer && subModule !== "analysis" && (
- {isPaused - ? "Paused - system idle." - : "Running simulation..."} + {isPaused ? "Paused - system idle." : "Running simulation..."}
)}
@@ -298,8 +315,8 @@ const SimulationPlayer: React.FC = () => { {index < intervals.length - 1 && (
= ((index + 1) / totalSegments) * 100 - ? "filled" - : "" + ? "filled" + : "" }`} >
)} From cfa63ff6eda559ce3458060c306d768cc8dc50d1 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 10 Jun 2025 09:07:32 +0530 Subject: [PATCH 2/6] refactor: improve Header navigation, enhance data handling in ThroughputSummary and ROISummary, and update styles for better UI responsiveness --- .../components/layout/sidebarLeft/Header.tsx | 8 +++-- .../ui/analysis/ProductionCapacity.tsx | 11 ++++--- app/src/components/ui/analysis/ROISummary.tsx | 8 +++-- .../ui/analysis/ThroughputSummary.tsx | 8 +++-- .../components/simulation/simulation.scss | 2 +- app/src/styles/layout/compareLayout.scss | 1 + app/src/styles/layout/sidebar.scss | 32 +++++++++++++++---- 7 files changed, 50 insertions(+), 20 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index c2c1bff..8d7ccee 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -2,19 +2,21 @@ import React from "react"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; import FileMenu from "../../ui/FileMenu"; -import {useToggleStore} from "../../../store/useUIToggleStore"; +import { useToggleStore } from "../../../store/useUIToggleStore"; import useModuleStore from "../../../store/useModuleStore"; +import { useNavigate } from "react-router-dom"; const Header: React.FC = () => { const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); const { activeModule } = useModuleStore(); + const navigate = useNavigate(); return (
-
+
+
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 0bc8b91..47ad0ca 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -9,7 +9,7 @@ import { } from "chart.js"; import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis"; import SkeletonUI from "../../templates/SkeletonUI"; -import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store"; +import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); @@ -34,6 +34,7 @@ const ThroughputSummary: React.FC = () => { ]; const { productionCapacityData } = useProductionCapacityData() + const { throughputData: data } = useThroughPutData() const chartOptions = { @@ -91,14 +92,16 @@ const ThroughputSummary: React.FC = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { - if (productionCapacityData >= 0) { - setIsLoading(false); - console.log("productionCapacityData: ", productionCapacityData); + if (productionCapacityData > 0 && data > 0) { + setTimeout(() => { + setIsLoading(false); + }, 5000); } else { setIsLoading(true); } }, [productionCapacityData]); + return (
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index dc33663..0f643b1 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -84,8 +84,12 @@ const ROISummary = ({ const { roiSummary } = useROISummaryData(); useEffect(() => { - if (roiSummary && typeof roiSummary === "object") { - setIsLoading(false); // Data loaded + console.log('roiSummary: ', roiSummary); + if (roiSummary && typeof roiSummary === "object" && roiSummary.productName !== "") { + // setIsLoading(false); // Data loaded + setTimeout(() => { + setIsLoading(false); + }, 5000); } else { setIsLoading(true); // Show skeleton while loading } diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index bf570f9..9970e27 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -17,7 +17,6 @@ const ProductionCapacity = ({ const { machineActiveTime } = useMachineUptime(); const { materialCycleTime } = useMaterialCycle(); const { throughputData } = useThroughPutData() - const { productionCapacityData } = useProductionCapacityData() const progressPercent = machineActiveTime; @@ -30,12 +29,15 @@ const ProductionCapacity = ({ const [isLoading, setIsLoading] = useState(false); useEffect(() => { - if (throughputData >= 0) { + if (throughputData > 0) { // console.log('machineActiveTime: ', machineActiveTime); // console.log('materialCycleTime: ', materialCycleTime); // console.log('throughputData: ', throughputData); // console.log('productionCapacityData: ', productionCapacityData); - setIsLoading(true); + // setIsLoading(true); + setTimeout(() => { + setIsLoading(false); + }, 5000); } }, [throughputData]) diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index db7b580..403d7ee 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -373,7 +373,7 @@ left: 50%; transform: translate(-50%, 0); color: var(--accent-color); - z-index: 100; + z-index: 2; isolation: isolate; font-weight: 700; padding: 8px; diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index c338f7c..cd0d1e3 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -36,6 +36,7 @@ align-items: center; animation: slideInFromRight 0.4s ease-out forwards; user-select: none; + border-left: 2px solid var(--border-color); .resizer { width: 32px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 80125e3..dd7336f 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -73,6 +73,7 @@ .logo-container { @include flex-center; + cursor: pointer; } .header-title { @@ -221,7 +222,7 @@ padding: 13px 5px; background: var(--background-color-secondary); border-radius: #{$border-radius-medium}; - box-shadow:var(--box-shadow-light); + box-shadow: var(--box-shadow-light); display: flex; justify-content: space-between; @@ -1360,9 +1361,11 @@ .aisle-properties-container { max-height: 65vh; overflow: auto; + .aisle-texture-container { max-height: 40vh; overflow: auto; + .aisle-list { width: calc(100% - 8px); text-align: start; @@ -1372,6 +1375,7 @@ gap: 6px; border-radius: #{$border-radius-large}; margin: 2px 6px; + .texture-display { height: 34px; width: 34px; @@ -1380,63 +1384,78 @@ margin-right: 4px; overflow: hidden; } + .aisle-color { text-transform: capitalize; } + .aisle-brief { font-size: var(--font-size-small); color: var(--input-text-color); } + &.selected { background: var(--background-color-accent); color: var(--text-button-color); + &:hover { background: var(--background-color-accent); } } + &:hover { background: var(--background-color-secondary); } } } + .value-field-container { margin: 0; } + .presets-list-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; padding-left: 7px; + .preset-list { background: #444; height: 90px; width: 90px; border-radius: #{$border-radius-large}; overflow: hidden; + .thumbnail { height: 100%; width: 100%; border-radius: #{$border-radius-large}; outline-offset: -1px; + img { height: 100%; width: 100%; object-fit: cover; transition: all 0.2s; } + &.selected { outline: 2px solid var(--border-color-accent); outline-offset: -2px; + &:hover { outline: 2px solid var(--border-color-accent); + img { transform: scale(1); } } } + &:hover { outline: 1px solid var(--border-color); + img { transform: scale(1.1); } @@ -1456,6 +1475,7 @@ padding: 10px 12px; color: var(--text-color); width: 100%; + .input-value { color: inherit; } @@ -1837,11 +1857,9 @@ width: 100%; height: 100%; font-size: var(--font-size-regular); - background: linear-gradient( - 0deg, - rgba(37, 24, 51, 0) 0%, - rgba(52, 41, 61, 0.5) 100% - ); + background: linear-gradient(0deg, + rgba(37, 24, 51, 0) 0%, + rgba(52, 41, 61, 0.5) 100%); pointer-events: none; backdrop-filter: blur(8px); opacity: 0; @@ -2099,4 +2117,4 @@ text-transform: capitalize; } } -} +} \ No newline at end of file From e5a9d650cfc13af177e5f17c144a5f81a068785f Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 10 Jun 2025 11:03:39 +0530 Subject: [PATCH 3/6] refactor: enhance DashboardCard interaction and update SimulationPlayer ROI calculation, improve dashboard styles for better layout and responsiveness --- .../components/Dashboard/DashboardCard.tsx | 1 + .../ui/simulation/simulationPlayer.tsx | 8 ++++---- app/src/styles/pages/dashboard.scss | 20 ++++++++++++++++--- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx index fabf224..2142aa7 100644 --- a/app/src/components/Dashboard/DashboardCard.tsx +++ b/app/src/components/Dashboard/DashboardCard.tsx @@ -182,6 +182,7 @@ const DashboardCard: React.FC = ({ className="dashboard-card-container" onClick={navigateToProject} title={projectName} + onMouseLeave={() => setIsKebabOpen(false)} >
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index eee2253..92b72f9 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => { // UI-Part const hourlySimulation = 25; const dailyProduction = 75; - const monthlyROI = 50; + const monthlyROI = 10; const { processBar } = useProcessBar(); useEffect(() => { }, [processBar]); @@ -219,7 +219,7 @@ const SimulationPlayer: React.FC = () => {
{" "}
@@ -315,8 +315,8 @@ const SimulationPlayer: React.FC = () => { {index < intervals.length - 1 && (
= ((index + 1) / totalSegments) * 100 - ? "filled" - : "" + ? "filled" + : "" }`} >
)} diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss index b0e3eea..dd99666 100644 --- a/app/src/styles/pages/dashboard.scss +++ b/app/src/styles/pages/dashboard.scss @@ -85,6 +85,12 @@ font-weight: var(--font-weight-medium); background: var(--background-color-button); + svg { + path { + stroke: var(--background-color-selected); + } + } + &:hover { background: var(--background-color-button); } @@ -206,6 +212,10 @@ transition: transform 0.25s linear; .project-details { + display: flex; + flex-direction: column; + align-items: flex-start; + .project-name { margin-bottom: 7px; } @@ -226,7 +236,8 @@ line-height: 26px; text-align: center; background: var(--accent-color); - color: var(--primary-color); + // color: var(--primary-color); + color: var(--text-color); border-radius: #{$border-radius-circle}; } @@ -247,6 +258,7 @@ border-radius: 8px; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); display: flex; flex-direction: column; transform: translate(100%, 100%); @@ -265,16 +277,18 @@ text-transform: capitalize; &:hover { - background-color: var(--background-color-secondary); + background-color: var(--background-color-selected); } } } &:hover { overflow: visible; + .kebab-options-wrapper { display: flex; } + .project-details-container { transform: translateY(0); } @@ -334,4 +348,4 @@ font-family: #{$font-roboto}; cursor: pointer; } -} +} \ No newline at end of file From 717c17a8603aa947841e7ed10aaef147794afe43 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 10 Jun 2025 11:46:58 +0530 Subject: [PATCH 4/6] refactor: update Analysis component input types, adjust SelectFloorPlan layout, and enhance dashboard and scene styles for improved UI --- app/package-lock.json | 47 +++------- .../layout/sidebarRight/analysis/Analysis.tsx | 2 +- .../analysis/RenderAnalysisInputs.tsx | 2 +- .../components/temporary/SelectFloorPlan.tsx | 88 +++++++++++-------- app/src/styles/pages/dashboard.scss | 9 +- app/src/styles/scene/scene.scss | 22 +++-- 6 files changed, 81 insertions(+), 89 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index ed85f25..d63595f 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2026,7 +2026,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2038,7 +2038,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4180,25 +4180,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4310,25 +4291,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -9082,7 +9063,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9959,7 +9940,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15343,7 +15324,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20820,7 +20801,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20863,7 +20844,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20875,7 +20856,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21371,7 +21352,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22430,7 +22411,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx index 0e88e18..eeaf2f2 100644 --- a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx +++ b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx @@ -19,7 +19,7 @@ const Analysis: React.FC = () => { { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } }, ], "Production capacity": [ - { type: "default", inputs: { label: "Shift length", activeOption: "hr" } }, + { type: "range", inputs: { label: "Shift length", activeOption: "hr" } }, { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } }, { type: "default", inputs: { label: "Working days / year", activeOption: "days" } }, { type: "default", inputs: { label: "Yield rate", activeOption: "%" } }, diff --git a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx index 0204582..6f52438 100644 --- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx +++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx @@ -31,7 +31,7 @@ const RenderAnalysisInputs: React.FC = ({ keyName, presets,i key={index} label={preset.inputs.label} min={0} - max={0} + max={8} value={5} /> ); diff --git a/app/src/components/temporary/SelectFloorPlan.tsx b/app/src/components/temporary/SelectFloorPlan.tsx index 6c45f08..310b2b0 100644 --- a/app/src/components/temporary/SelectFloorPlan.tsx +++ b/app/src/components/temporary/SelectFloorPlan.tsx @@ -4,12 +4,14 @@ import { useDfxUpload } from "../../store/builder/store"; import DxfParser from "dxf-parser"; import { getWallPointsFromBlueprint } from "../../modules/builder/dfx/functions/getWallPointsFromBlueprint"; import { convertDXFToThree } from "../../modules/builder/dfx/functions/convertDxfToThree"; -type DXFData = any +import { AIIcon } from "../icons/ExportCommonIcons"; +type DXFData = any; const SelectFloorPlan: React.FC = () => { // Access layout state and state setters const { currentLayout, setLayout } = useLayoutStore(); // Access DXF-related states and setters - const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } = useDfxUpload(); + const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } = + useDfxUpload(); // Local state to store the parsed DXF file const [parsedFile, setParsedFile] = useState(undefined); @@ -18,7 +20,9 @@ const SelectFloorPlan: React.FC = () => { const [generate, setGenerate] = useState(false); // Handles file upload and DXF parsing - const handleFileUpload = async (event: React.ChangeEvent) => { + const handleFileUpload = async ( + event: React.ChangeEvent + ) => { setLayout(null); // Reset current layout setParsedFile(undefined); // Clear any previously parsed file const file = event.target.files?.[0]; @@ -52,15 +56,54 @@ const SelectFloorPlan: React.FC = () => { // Trigger wall point generation when `generate` flag changes useEffect(() => { if (parsedFile !== undefined) { - getWallPointsFromBlueprint({ parsedData: parsedFile, setDfxGenerate, objValue }); + getWallPointsFromBlueprint({ + parsedData: parsedFile, + setDfxGenerate, + objValue, + }); } }, [generate]); - return (
- Preset Layouts + Upload Layouts +
+ + + + {parsedFile && ( + + )} +
+ or
- - - - - -
); }; -export default SelectFloorPlan; \ No newline at end of file +export default SelectFloorPlan; diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss index b0e3eea..eba133d 100644 --- a/app/src/styles/pages/dashboard.scss +++ b/app/src/styles/pages/dashboard.scss @@ -14,7 +14,6 @@ display: flex; flex-direction: column; gap: 16px; - // border-right: 1px solid var(--border-color); background: var(--background-color); backdrop-filter: blur(20px); border-radius: 30px; @@ -33,8 +32,8 @@ line-height: 32px; text-align: center; font-weight: var(--font-weight-medium); - background: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-accent); + color: var(--text-button-color); border-radius: #{$border-radius-circle}; } @@ -165,10 +164,8 @@ position: relative; border: 1px solid var(--border-color); border-radius: #{$border-radius-extra-large}; - overflow: hidden; cursor: pointer; overflow: visible; - position: relative; .dashboard-card-wrapper { width: 100%; @@ -199,7 +196,6 @@ width: 100%; padding: 13px 16px; background: var(--background-color); - // backdrop-filter: blur(18px); border-radius: #{$border-radius-xlarge}; // transform: translateY(100%);///////hovered @@ -247,7 +243,6 @@ border-radius: 8px; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - display: flex; flex-direction: column; transform: translate(100%, 100%); overflow: hidden; diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index 2ac8f98..3823ac4 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -66,7 +66,7 @@ .presets-container { @include flex-center; - gap: 4px; + gap: 6px; .preset { background: var(--background-color); @@ -74,7 +74,17 @@ border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); } - + .upload-btn{ + padding: 4px 16px !important; + } + .generate-walls-btn{ + padding: 4px 16px; + @include flex-center; + gap: 4px; + color: var(--text-button-color); + background: var(--background-color-button); + border-radius: #{$border-radius-extra-large}; + } .active { background: var(--background-color-accent); color: var(--text-button-color); @@ -82,17 +92,11 @@ } } - - .label-toogler { position: fixed; bottom: 4%; right: 1.5%; z-index: 10; - - // background: var(--background-color); - // backdrop-filter: blur(10px); - // outline: 1px solid var(--border-color); border-radius: 8px; .input-toggle-container { @@ -113,4 +117,4 @@ } } } -} \ No newline at end of file +} From 2aad22dfe795360741ced6a6e920d26fc70e7a62 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 10 Jun 2025 11:49:30 +0530 Subject: [PATCH 5/6] refactor: improve layout handling in MainScene, SideBarLeft, and SideBarRight; enhance ComparisonResult charts and styles for better visualization --- .../components/layout/scenes/MainScene.tsx | 14 +- .../layout/sidebarLeft/SideBarLeft.tsx | 8 +- .../layout/sidebarRight/SideBarRight.tsx | 2 +- .../ui/compareVersion/ComparisonResult.tsx | 121 +++++++++++------- app/src/styles/layout/compareLayout.scss | 1 + 5 files changed, 92 insertions(+), 54 deletions(-) diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index 10894eb..d299dc9 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -48,12 +48,12 @@ function MainScene() { const { setFloatingWidget } = useFloatingWidget(); const { comparisonProduct } = useComparisonProduct(); - const handleSelectLayout = (option: string) => { - const product = products.find((product) => product.productName === option); - if (product) { - setMainProduct(product.productUuid, product.productName); - } - }; + const handleSelectLayout = (option: string) => { + const product = products.find((product) => product.productName === option); + if (product) { + setMainProduct(product.productUuid, product.productName); + } + }; return ( <> @@ -108,7 +108,7 @@ function MainScene() {
- {selectedProduct && isVersionSaved && !isPlaying && ( + {selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && (
{ console.log(value); }; + console.log('isVersionSaved: ', isVersionSaved); + console.log('toggleUILeft: ', toggleUILeft); + return (
{toggleUILeft && ( diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 44199bc..7000adc 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -65,7 +65,7 @@ const SideBarRight: React.FC = () => { return (
diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx index 85d1c6c..0f91a36 100644 --- a/app/src/components/ui/compareVersion/ComparisonResult.tsx +++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx @@ -1,57 +1,89 @@ import React, { useMemo } from "react"; import PerformanceResult from "./result-card/PerformanceResult"; import EnergyUsage from "./result-card/EnergyUsage"; -import { Bar } from "react-chartjs-2"; +import { Bar, Line } from "react-chartjs-2"; const ComparisonResult = () => { - const defaultData = { - labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], - datasets: [ - { - label: "Dataset", - data: [12, 19, 3, 5, 2, 3], - backgroundColor: ["#6f42c1"], - borderColor: "#b392f0", - borderWidth: 1, - }, - ], - }; - - // Memoize Chart Options const options = useMemo( () => ({ responsive: true, maintainAspectRatio: false, plugins: { - title: { - display: true, - }, - legend: { - display: false, - }, + title: { display: false }, + legend: { display: false }, }, scales: { - x: { - display: false, // Hide x-axis - grid: { - display: false, - }, - }, - y: { - display: false, // Hide y-axis - grid: { - display: false, - }, - }, + x: { display: false, grid: { display: false } }, + y: { display: false, grid: { display: false } }, }, }), [] ); + + // Color palette + const purpleDark = "#6a0dad"; + const purpleLight = "#b19cd9"; + + const throughputData = { + labels: ["Layout 1", "Layout 2"], + datasets: [ + { + label: "Throughput (units/hr)", + data: [500, 550], + backgroundColor: [purpleDark, purpleLight], + borderColor: [purpleDark, purpleLight], + borderWidth: 1, + }, + ], + }; + + const cycleTimeData = { + labels: ["Layout 1", "Layout 2"], + datasets: [ + { + label: "Cycle Time (sec)", + data: [110, 110], + backgroundColor: [purpleLight], + borderColor: purpleDark, + borderWidth: 2, + tension: 0.4, + fill: false, + }, + ], + }; + + const downtimeData = { + labels: ["Layout 1", "Layout 2"], + datasets: [ + { + label: "Downtime (mins)", + data: [17, 12], + backgroundColor: [purpleDark, purpleLight], + borderColor: [purpleDark, purpleLight], + borderWidth: 1, + }, + ], + }; + + const scrapRateData = { + labels: ["Layout 1", "Layout 2"], + datasets: [ + { + label: "Scrap Rate (tons)", + data: [2.7, 1.9], + backgroundColor: [purpleDark, purpleLight], + borderColor: [purpleDark, purpleLight], + borderWidth: 1, + }, + ], + }; + return (
Performance Comparison
+

Throughput (units/hr)

@@ -64,8 +96,11 @@ const ComparisonResult = () => {
550/ hr
-
+
+ +
+
Cycle Time
@@ -81,12 +116,16 @@ const ComparisonResult = () => {
Layout 2
110 Sec
- ↑19.6%1.6% + ↑1.6%
+
+ +
+
Overall Downtime
@@ -101,10 +140,7 @@ const ComparisonResult = () => {
-
-
-
-
+
@@ -114,16 +150,15 @@ const ComparisonResult = () => {
Layout 1
-
- Total scrap produced by -
+
Total scrap produced by
2.7 ton
- +
+
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index cd0d1e3..07b5ad2 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -475,6 +475,7 @@ } .chart { + width: 80%; height: 90%; position: absolute; bottom: 0; From d80d5ae16159cfe27df6762cfb5e8fbf26344ec3 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 10 Jun 2025 14:55:23 +0530 Subject: [PATCH 6/6] refactor: Update response message checks and improve zone name duplication logic across components --- app/src/components/layout/sidebarLeft/SideBarLeft.tsx | 3 --- .../layout/sidebarRight/properties/ZoneProperties.tsx | 9 ++++----- app/src/components/ui/list/List.tsx | 7 +++---- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index 30f4778..8fd5bea 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -33,9 +33,6 @@ const SideBarLeft: React.FC = () => { console.log(value); }; - console.log('isVersionSaved: ', isVersionSaved); - console.log('toggleUILeft: ', toggleUILeft); - return (
{ let response = await zoneCameraUpdate(zonesdata, organization,projectId); console.log('response: ', response); - if (response.message === "updated successfully") { + if (response.message === "zone updated") { setEdit(false); } else { // console.log(response); @@ -60,9 +60,8 @@ const ZoneProperties: React.FC = () => { }; // Call your API to update the zone let response = await zoneCameraUpdate(zonesdata, organization,projectId); - console.log('response: ', response); - // console.log("response: ", response); - if (response.message === "updated successfully") { + setSelectedZone((prev) => ({ ...prev, zoneName: newName })); + if (response.message === "zone updated") { setZones((prevZones: any[]) => prevZones.map((zone) => zone.zoneUuid === selectedZone.zoneUuid @@ -83,7 +82,7 @@ const ZoneProperties: React.FC = () => { const checkZoneNameDuplicate = (name: string) => { return zones.some( (zone: any) => - zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() && + zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() && zone.zoneUuid !== selectedZone.zoneUuid ); }; diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 8136a18..09087cd 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -18,7 +18,6 @@ import { } from "../../../store/builder/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; -import OuterClick from "../../../utils/outerClick"; import { useParams } from "react-router-dom"; import { useAssetsStore } from "../../../store/builder/useAssetStore"; @@ -111,7 +110,7 @@ const List: React.FC = ({ items = [], remove }) => { const isDuplicate = zones.some( (zone: any) => - zone.zoneName.trim().toLowerCase() === newName.trim().toLowerCase() && + zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() && zone.zoneUuid !== selectedZone.zoneUuid ); @@ -127,7 +126,7 @@ const List: React.FC = ({ items = [], remove }) => { const response = await zoneCameraUpdate(zonesdata, organization,projectId); console.log('response: ', response); - if (response.message === "updated successfully") { + if (response.message === "zone updated") { setSelectedZone((prev) => ({ ...prev, zoneName: newName })); setZones((prevZones: any[]) => @@ -158,7 +157,7 @@ const List: React.FC = ({ items = [], remove }) => { const checkZoneNameDuplicate = (name: string) => { return zones.some( (zone: any) => - zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() && + zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() && zone.zoneUuid !== selectedZone.zoneUuid ); };