Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: improve Header navigation, enhance data handling in ThroughputSummary and ROISummary, and update styles for better UI responsiveness

This commit is contained in:
Nalvazhuthi 2025-06-10 09:07:32 +05:30
parent d893e695f1
commit cfa63ff6ed
7 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/layout/sidebarLeft/Header.tsx
View File

@ -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 (
<div className="header-container">
<div className="header-content">
<div className="logo-container">
<button className="logo-container" onClick={()=>navigate("/dashboard")}>
<LogoIcon />
</div>
</button>
<div className="header-title">
<FileMenu />
</div>

11
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

@ -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 (
<div className="production analysis-card">
<div className="production-wrapper analysis-card-wrapper">

8
app/src/components/ui/analysis/ROISummary.tsx
View File

@ -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
}

8
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@ -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])

2
app/src/styles/components/simulation/simulation.scss
View File

@ -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;

1
app/src/styles/layout/compareLayout.scss
View File

@ -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;

32
app/src/styles/layout/sidebar.scss
View File

@ -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;
}
}
}
}