From ea69adf09cb9b3bd0b1447e14c7df550f86faa2c Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Thu, 12 Jun 2025 09:20:52 +0530 Subject: [PATCH 1/4] refactor: update component headers to use

tags for consistency; enhance layout styles in simulation player --- app/src/components/ui/compareVersion/CompareLayOut.tsx | 4 ++-- .../components/ui/compareVersion/ComparisonResult.tsx | 6 +++--- .../compareVersion/result-card/PerformanceResult.tsx | 2 +- app/src/components/ui/simulation/simulationPlayer.tsx | 4 ++-- app/src/styles/layout/compareLayout.scss | 10 ++++++---- app/src/styles/scene/scene.scss | 7 ++++++- 6 files changed, 20 insertions(+), 13 deletions(-) diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx index 6cce453..ef49e8e 100644 --- a/app/src/components/ui/compareVersion/CompareLayOut.tsx +++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx @@ -129,7 +129,7 @@ const CompareLayOut = () => { ref={wrapperRef} style={{ width }} > - {loadingProgress == 0 && ( + {loadingProgress == 0 && comparisonProduct?.productUuid && ( - - ))} + ); + })} )} diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 62ce571..cf2fbdc 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1394,16 +1394,20 @@ } &.selected { - background: var(--background-color-accent); - color: var(--text-button-color); + background: var(--highlight-accent-color); + + .aisle-color { + // color: var(--text-button-color); + } &:hover { - background: var(--background-color-accent); + // background: var(--background-color-accent); } } &:hover { - background: var(--background-color-secondary); + background: var(--highlight-accent-color); + // background: var(--background-color-secondary); } } } @@ -1680,6 +1684,7 @@ padding: 0; margin: 0; max-height: 50vh; + overflow: hidden; .header-wrapper { display: flex; @@ -1737,7 +1742,6 @@ .preview { width: 90%; - // width: 100%; height: 111px; img { @@ -1749,9 +1753,10 @@ } .materials { - padding: 6px 12px; max-height: 250px; overflow: auto; + margin-bottom: 6px; + padding: 0 12px; .material-container { display: flex; @@ -1762,6 +1767,16 @@ display: flex; justify-content: space-between; align-items: center; + padding: 4px 6px; + border-radius: 12px; + + &:hover { + background: var(--highlight-accent-color); + } + + &.selectedMaterial { + background: var(--highlight-accent-color); + } .material-property { display: flex; @@ -1769,8 +1784,8 @@ gap: 6px; .material-image { - width: 30px; - height: 30px; + width: 34px; + height: 34px; border-radius: 6px; overflow: hidden; From f6530153458f62c87aa3ac485b1057bd7f48f714 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Fri, 13 Jun 2025 10:55:45 +0530 Subject: [PATCH 3/4] feat: add active time display to AssetDetailsCard and update related components --- .../ui/simulation/AssetDetailsCard.tsx | 7 ++- .../simulation/ui3d/MachineContentUi.tsx | 2 +- .../simulation/ui3d/RoboticArmContentUi.tsx | 2 +- .../simulation/ui3d/VehicleContentUi.tsx | 2 + .../components/simulation/simulation.scss | 48 +++++++++++++++---- 5 files changed, 49 insertions(+), 12 deletions(-) diff --git a/app/src/components/ui/simulation/AssetDetailsCard.tsx b/app/src/components/ui/simulation/AssetDetailsCard.tsx index 15c5574..34dfb6f 100644 --- a/app/src/components/ui/simulation/AssetDetailsCard.tsx +++ b/app/src/components/ui/simulation/AssetDetailsCard.tsx @@ -13,6 +13,7 @@ interface AssetDetailsCardInterface { enableStatue?: boolean; count?: number; totalCapacity?: number; + activeTime?: any; assetDetails?: { assetName: string; const: string; @@ -59,6 +60,7 @@ const AssetDetailsCard: React.FC = ({ status, count, totalCapacity, + activeTime, assetDetails, }) => { const [moreDetails, setMoreDetails] = useState(false); @@ -75,7 +77,10 @@ const AssetDetailsCard: React.FC = ({
{name}
{enableStatue && ( -
{GetStatus(status)}
+ <> +
Active Time : {activeTime}
+
{GetStatus(status)}
+ )} {!enableStatue && totalCapacity && (
Storage/Inventory
diff --git a/app/src/modules/simulation/ui3d/MachineContentUi.tsx b/app/src/modules/simulation/ui3d/MachineContentUi.tsx index bad89ed..587dfad 100644 --- a/app/src/modules/simulation/ui3d/MachineContentUi.tsx +++ b/app/src/modules/simulation/ui3d/MachineContentUi.tsx @@ -26,7 +26,7 @@ const MachineContentUi: React.FC = ({ machine }) => { center distanceFactor={20} > - + ); }; diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx index dbe32c6..f946721 100644 --- a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx +++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx @@ -26,7 +26,7 @@ const RoboticArmContentUi: React.FC = ({ roboticArm }) center distanceFactor={20} > - + ); }; diff --git a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx index 0173081..63aefc8 100644 --- a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx +++ b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx @@ -44,6 +44,8 @@ const VehicleContentUi: React.FC = ({ vehicle }) => { status={vehicle.state} count={vehicle.currentLoad} totalCapacity={vehicle.point.action.loadCapacity} + activeTime={vehicle.activeTime} + /> ); diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index 302ad7a..12d33e6 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -9,15 +9,16 @@ transform: translate(-50%, 0); width: 70vw; transition: all 0.3s; + &.hide { width: fit-content; - .simulation-player-container - .controls-container - .simulation-button-container { + + .simulation-player-container .controls-container .simulation-button-container { width: 32px; height: 24px; } } + .simulation-player-container { background: var(--background-color); padding: 7px; @@ -327,6 +328,7 @@ } .open { + .start-displayer, .end-displayer { display: none; @@ -423,13 +425,16 @@ cursor: pointer; transition: all 0.2s; outline: 1px solid transparent; + &:hover { outline: 1px solid var(--border-color); color: var(--accent-color); } + &.hide { width: 32px; } + .icon { width: 16px; height: 16px; @@ -496,6 +501,7 @@ .asset-details-card-wrapper { pointer-events: none; + .asset-details-card-container { position: relative; padding: 8px; @@ -527,6 +533,7 @@ .asset-details-header { @include flex-space-between; gap: 12px; + .content { .name { text-wrap: nowrap; @@ -536,20 +543,34 @@ margin-bottom: 4px; text-transform: capitalize; } + .status-container { .status { display: flex; align-items: center; gap: 6px; + padding-top: 4px; + .icon { @include flex-center; } } } + + .active-time { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + .value { + color: var(--highlight-text-color); + } + } + .storage-container { font-size: var(--font-size-tiny); color: var(--highlight-text-color); } + } } @@ -561,6 +582,7 @@ border-radius: #{$border-radius-small}; overflow: hidden; position: relative; + .process-running { height: 100%; width: 35%; @@ -584,6 +606,7 @@ top: -2px; padding: 4px; padding-right: 8px; + .count-ui-container { background: var(--background-color-solid); padding: 8px; @@ -593,19 +616,24 @@ max-width: 80px; position: absolute; left: 0; + .content { @include flex-center; gap: 2px; + .icon { @include flex-center; } + .display { font-size: var(--font-size-small); } } + .value-container { @include flex-center; gap: 4px; + .progress-bar { display: flex; align-items: center; @@ -621,13 +649,12 @@ background: var(--background-color); overflow: hidden; position: relative; + .fill { height: 100%; - background: linear-gradient( - to top, - var(--background-color-accent) var(--process-fill-percentage), - transparent var(--process-fill-percentage) - ); + background: linear-gradient(to top, + var(--background-color-accent) var(--process-fill-percentage), + transparent var(--process-fill-percentage)); } } @@ -645,6 +672,7 @@ from { transform: translateX(-100%); } + to { transform: translateX(300%); } @@ -654,10 +682,12 @@ 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } -} +} \ No newline at end of file From fe12ab2f4a1bf15c1479bacbb0586de6f3e2e100 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Fri, 13 Jun 2025 18:15:35 +0530 Subject: [PATCH 4/4] feat: Enhance MainScene with comparison product handling and update styles for layout components --- .../components/layout/scenes/MainScene.tsx | 6 +- app/src/styles/base/global.scss | 3 + app/src/styles/layout/compareLayout.scss | 1039 ++++++++--------- 3 files changed, 525 insertions(+), 523 deletions(-) diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index 67dc35a..4139b5a 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -52,7 +52,7 @@ function MainScene() { const { visualizationSocket } = useSocketStore(); const { selectedZone } = useSelectedZoneStore(); const { setFloatingWidget } = useFloatingWidget(); - const { clearComparisonProduct } = useComparisonProduct(); + const { comparisonProduct, clearComparisonProduct } = useComparisonProduct(); const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); const { setName } = useAssetsStore(); const { projectId } = useParams() @@ -120,7 +120,9 @@ function MainScene() { )}
* { - position: relative; - z-index: 1; - } - - &:nth-child(2) { - grid-column-start: 1; - grid-row-start: 2; - - .metric-label { - white-space: normal; - width: 50px; - left: 230%; - } - } - - &:nth-child(3) { - grid-row: span 2 / span 2; - grid-column-start: 2; - grid-row-start: 1; - margin-top: 40%; - left: -16px; - position: relative; - } - } - - .metric-label { - position: absolute; - top: 0px; - left: 0%; - white-space: nowrap; - - transform: translate(-50%, -50%); - - font-size: 10px; - z-index: 1; - } - - .metric { - width: 100%; - height: 100%; - position: relative; - display: flex; - justify-content: center; - align-items: center; - - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - background: var(--background-color, wheat); - clip-path: polygon( - 25% 0%, - 75% 0%, - 100% 50%, - 75% 100%, - 25% 100%, - 0% 50% - ); - filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); - - z-index: 0; - } - - // Content stays above the shape - > * { - position: relative; - z-index: 1; - } - } - } + .metric-value { + padding-top: 6px; + font-size: var(--font-size-xlarge); + color: var(--background-color-accent); + font-weight: 600; } + } - .simulation-tag { - background: var(--background-color-button); + .label { + padding-bottom: 68px; + } + } - color: var(--icon-default-color-active); + .metrics-right { + height: fit-content; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + + gap: 2px; + overflow: visible; + + margin: auto 0; + + .metric-wrapper { + position: relative; + width: 64px; + height: 50px; + overflow: visible; // allow content like labels to overflow + + &:nth-child(1) { + .metric-label { + top: -57%; + left: 220%; + } + + &::after { + content: ""; position: absolute; - bottom: 0; - right: 0; - padding: 10px 5px; - border-radius: 12px 0 0 0; + + top: -100%; + left: 50%; + width: 100%; // Required for visible shape + height: 40px; + background-color: #b7b7c6; + + // Custom polygon shape (adjust if needed) + clip-path: polygon( + 96% 52%, + 96% 54%, + 45% 53%, + 3% 100%, + 0 100%, + 42% 52% + ); + + z-index: 0; // Behind any inner content + } } + + // Optional: content above the shape + > * { + position: relative; + z-index: 1; + } + + &:nth-child(2) { + grid-column-start: 1; + grid-row-start: 2; + + .metric-label { + white-space: normal; + width: 50px; + left: 230%; + } + } + + &:nth-child(3) { + grid-row: span 2 / span 2; + grid-column-start: 2; + grid-row-start: 1; + margin-top: 40%; + left: -16px; + position: relative; + } + } + + .metric-label { + position: absolute; + top: 0px; + left: 0%; + white-space: nowrap; + + transform: translate(-50%, -50%); + + font-size: 10px; + z-index: 1; + } + + .metric { + width: 100%; + height: 100%; + position: relative; + display: flex; + justify-content: center; + align-items: center; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background: var(--background-color, wheat); + clip-path: polygon( + 25% 0%, + 75% 0%, + 100% 50%, + 75% 100%, + 25% 100%, + 0% 50% + ); + filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); + + z-index: 0; + } + + // Content stays above the shape + > * { + position: relative; + z-index: 1; + } + } } + } + + .simulation-tag { + background: var(--background-color-button); + + color: var(--icon-default-color-active); + position: absolute; + bottom: 0; + right: 0; + padding: 10px 5px; + border-radius: 12px 0 0 0; + } } + } } @keyframes slideInFromRight { - from { - transform: translateX(100%); - opacity: 0; - } + from { + transform: translateX(100%); + opacity: 0; + } - to { - transform: translateX(0); - opacity: 1; - } + to { + transform: translateX(0); + opacity: 1; + } } .energy-usage { - position: relative; + position: relative; - .energy-usage-wrapper { - - - .value { - padding-top: 25px; - font-size: var(--font-size-xxxlarge); - color: var(--background-color-accent); - } + .energy-usage-wrapper { + .value { + padding-top: 25px; + font-size: var(--font-size-xxxlarge); + color: var(--background-color-accent); } + } - .simulation-details { - position: absolute; - bottom: 12px; - right: 12px; + .simulation-details { + position: absolute; + bottom: 12px; + right: 12px; - .simulation-wrapper { - display: flex; - align-items: center; - gap: 6px; + .simulation-wrapper { + display: flex; + align-items: center; + gap: 6px; - .icon { - width: 20px; - height: 20px; - border-radius: 50%; - background-color: var(--background-color-accent); - } - } + .icon { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: var(--background-color-accent); + } } + } - .chart { - width: 90%; - position: absolute; - top: 10px; - left: 0; - } + .chart { + width: 90%; + position: absolute; + top: 10px; + left: 0; + } } .throughPutCard-container { - .layers-wrapper { - padding: 20px 10px; - height: 100%; - width: 100%; - display: flex; - justify-content: space-between; - position: relative; + .layers-wrapper { + padding: 20px 10px; + height: 100%; + width: 100%; + display: flex; + justify-content: space-between; + position: relative; - .layer-wrapper { - display: flex; - flex-direction: column; + .layer-wrapper { + display: flex; + flex-direction: column; - &:last-child { - justify-content: end; - } - } - - .chart { - width: 60%; - height: 70%; - position: absolute; - } + &:last-child { + justify-content: end; + } } .chart { - width: 80%; - height: 90%; - position: absolute; - bottom: 0; - left: 0; + width: 60%; + height: 70%; + position: absolute; } + } + + .chart { + width: 80%; + height: 90%; + position: absolute; + bottom: 0; + left: 0; + } } .cycle-time-container { - position: relative; + position: relative; - .cycle-main { + .cycle-main { + display: flex; + justify-content: space-between; + height: 100%; + + .layers-wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + + .layers { display: flex; - justify-content: space-between; - height: 100%; + flex-direction: column; + gap: 4px; - .layers-wrapper { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - - .layers { - display: flex; - flex-direction: column; - gap: 4px; - - .layer-name { - color: var(--background-color-accent); - } - - .layer-time { - font-size: var(--font-size-large); - } - - .layer-profit { - color: #14ca44; - text-align: end; - - span { - color: #14ca44; - } - } - } + .layer-name { + color: var(--background-color-accent); } - } - .chart { - position: absolute; - bottom: 0; - left: 10px; - width: 60%; - height: 80%; + .layer-time { + font-size: var(--font-size-large); + } + + .layer-profit { + color: #14ca44; + text-align: end; + + span { + color: #14ca44; + } + } + } } + } + + .chart { + position: absolute; + bottom: 0; + left: 10px; + width: 60%; + height: 80%; + } } .overallDowntime-container { - .totalDownTime-wrapper { + .totalDownTime-wrapper { + display: flex; + + .totalDownTime { + width: 70%; + background: var(--background-color-secondary); + backdrop-filter: blur(20px); + border-radius: 12px; + + display: flex; + justify-content: space-between; + align-items: center; + // gap: 20px; + padding: 8px 10px; + margin: 44px 0; + + .totalDownTime-right { display: flex; + flex-direction: column; + gap: 6px; + } - .totalDownTime { - width: 70%; - background: var(--background-color-secondary); - backdrop-filter: blur(20px); - border-radius: 12px; + .totalDownTime-left { + display: flex; + align-items: center; + gap: 6px; - display: flex; - justify-content: space-between; - align-items: center; - // gap: 20px; - padding: 8px 10px; - margin: 44px 0; - - .totalDownTime-right { - display: flex; - flex-direction: column; - gap: 6px; - } - - .totalDownTime-left { - display: flex; - align-items: center; - gap: 6px; - - .value { - font-size: var(--font-size-xlarge); - color: var(--background-color-button); - } - } - } - - .chart { - width: 30%; - position: relative; + .value { + font-size: var(--font-size-xlarge); + color: var(--background-color-button); } + } } + + .chart { + width: 30%; + position: relative; + } + } } .overallScrapRate { - .overallScrapRate-wrapper { - display: flex; + .overallScrapRate-wrapper { + display: flex; - .overallScrapRate-value { - width: 50%; - display: flex; - flex-direction: column; - gap: 6px; - margin: 40px 0; + .overallScrapRate-value { + width: 50%; + display: flex; + flex-direction: column; + gap: 6px; + margin: 40px 0; - .overallScrapRate-key { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .chart { - width: 50%; - position: relative; - } + .overallScrapRate-key { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } + + .chart { + width: 50%; + position: relative; + } + } }