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

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

This commit is contained in:
Vishnu 2025-06-10 11:55:51 +05:30
parent 4b42692ae7 2aad22dfe7
commit 2edbc487ed
11 changed files with 116 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/Dashboard/DashboardCard.tsx
View File

@ -183,6 +183,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
className="dashboard-card-container"
onClick={navigateToProject}
title={projectName}
onMouseLeave={() => setIsKebabOpen(false)}
>
<div className="dashboard-card-wrapper">
<div className="preview-container">

14
app/src/components/layout/scenes/MainScene.tsx
View File

@ -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() {
<Scene layout="Main Layout" />
</div>
{selectedProduct && isVersionSaved && !isPlaying && (
{selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && (
<div className="selectLayout-wrapper">
<RegularDropDown
header={selectedProduct.productName}

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

@ -14,7 +14,7 @@ const Header: React.FC = () => {
return (
<div className="header-container">
<div className="header-content">
<button className="logo-container" onClick={()=>navigate("/dashboard")}>
<button className="logo-container" onClick={()=>navigate("/Dashboard")}>
<LogoIcon />
</button>
<div className="header-title">

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

@ -33,11 +33,13 @@ const SideBarLeft: React.FC = () => {
console.log(value);
};
console.log('isVersionSaved: ', isVersionSaved);
console.log('toggleUILeft: ', toggleUILeft);
return (
<div
className={`sidebar-left-wrapper ${
toggleUILeft && !isVersionSaved ? "open" : "closed"
}`}
className={`sidebar-left-wrapper ${toggleUILeft && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
}`}
>
<Header />
{toggleUILeft && (

2
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@ -66,7 +66,7 @@ const SideBarRight: React.FC = () => {
return (
<div
className={`sidebar-right-wrapper ${toggleUIRight && !isVersionSaved ? "open" : "closed"
className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
}`}
>
<Header />

121
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@ -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 (
<div className="compare-result-container">
<div className="header">Performance Comparison</div>
<div className="compare-result-wrapper">
<EnergyUsage />
<div className="throughPutCard-container comparisionCard">
<h4>Throughput (units/hr)</h4>
<div className="layers-wrapper">
@ -64,8 +96,11 @@ const ComparisonResult = () => {
<div className="value">550/ hr</div>
</div>
</div>
<div className="chart"></div>
<div className="chart">
<Bar data={throughputData} options={options} />
</div>
</div>
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<div className="cycle-header">Cycle Time</div>
@ -81,12 +116,16 @@ const ComparisonResult = () => {
<div className="layer-name">Layout 2</div>
<div className="layer-time">110 Sec</div>
<div className="layer-profit">
<span>↑</span>19.6%1.6%
<span>↑</span>1.6%
</div>
</div>
</div>
</div>
<div className="chart">
<Line data={cycleTimeData} options={options} />
</div>
</div>
<div className="overallDowntime-container comparisionCard">
<div className="overallDowntime-header">Overall Downtime</div>
<div className="totalDownTime-wrapper">
@ -101,10 +140,7 @@ const ComparisonResult = () => {
</div>
</div>
<div className="chart">
<div className="vertical-chart">
<div className="layout1"></div>
<div className="layout2"></div>
</div>
<Bar data={downtimeData} options={options} />
</div>
</div>
</div>
@ -114,16 +150,15 @@ const ComparisonResult = () => {
<div className="overallScrapRate-wrapper">
<div className="overallScrapRate-value">
<div className="overallScrapRate-label">Layout 1</div>
<div className="overallScrapRate-key">
Total scrap produced by
</div>
<div className="overallScrapRate-key">Total scrap produced by</div>
<div className="overallScrapRateKey-value">2.7 ton</div>
</div>
<div className="chart">
<Bar data={defaultData} options={options} />
<Bar data={scrapRateData} options={options} />
</div>
</div>
</div>
<PerformanceResult />
</div>
</div>

8
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@ -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 = () => {
<div className="progress-wrapper">
<div
className="progress"
style={{ width: monthlyROI }}
style={{ width: `${monthlyROI}%` }}
></div>
</div>{" "}
</div>
@ -315,8 +315,8 @@ const SimulationPlayer: React.FC = () => {
{index < intervals.length - 1 && (
<div
className={`line ${progress >= ((index + 1) / totalSegments) * 100
? "filled"
: ""
? "filled"
: ""
}`}
></div>
)}

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

@ -475,6 +475,7 @@
}
.chart {
width: 80%;
height: 90%;
position: absolute;
bottom: 0;

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

@ -874,8 +874,6 @@
.input-range-container {
width: 100%;
padding: 0;
.input-container {}
}
}
@ -1529,7 +1527,6 @@
.header {
@include flex-space-between;
border: none;
.eyedrop-button {
@include flex-center;
}
@ -1537,9 +1534,8 @@
.inputs-container {
@include flex-space-between;
.input-container {
padding: 0 12px;
padding: 0 4px;
gap: 6px;
}
}

17
app/src/styles/pages/dashboard.scss
View File

@ -84,6 +84,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);
}
@ -202,6 +208,10 @@
transition: transform 0.25s linear;
.project-details {
display: flex;
flex-direction: column;
align-items: flex-start;
.project-name {
margin-bottom: 7px;
}
@ -222,7 +232,7 @@
line-height: 26px;
text-align: center;
background: var(--accent-color);
color: var(--primary-color);
color: var(--text-color);
border-radius: #{$border-radius-circle};
}
@ -243,6 +253,7 @@
border-radius: 8px;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
flex-direction: column;
transform: translate(100%, 100%);
overflow: hidden;
@ -260,16 +271,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);
}

2
app/src/types/analysis.d.ts vendored
View File

@ -3,6 +3,8 @@ type Preset = {
inputs: {
label: string;
activeOption: string;
min?: number;
max?: number;
};
};