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

Update package versions and refactor components for improved functionality and readability

Browse Source
This commit is contained in:
Vishnu
2025-12-09 10:41:30 +05:30
parent 5dd9a8a86d
commit 3f594482e9
8 changed files with 120 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@ import { Line } from "react-chartjs-2";
import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";
import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
@@ -28,7 +28,6 @@ const ThroughputSummary: React.FC = () => {
];
const { productionCapacityData } = useProductionCapacityData();
const { throughputData: data } = useThroughPutData();
const chartOptions = {
responsive: true,

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

@@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import {
CostBreakDownIcon,
LightBulpIcon,
ROISummaryIcon,
ROISummaryProductName,
SonarCrownIcon,

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

@@ -1,99 +1,111 @@
import { useEffect, useState } from "react";
import { useInputValues, useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import {
ThroughputSummaryIcon,
} from "../../icons/analysis";
useInputValues,
useMachineUptime,
useMaterialCycle,
useThroughPutData,
} from "../../../store/builder/store";
import { ThroughputSummaryIcon } from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";
const ProductionCapacity = ({
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => {
const { machineActiveTime } = useMachineUptime();
const { materialCycleTime } = useMaterialCycle();
const { throughputData } = useThroughPutData()
const { inputValues } = useInputValues();
const { machineActiveTime } = useMachineUptime();
const { materialCycleTime } = useMaterialCycle();
const { throughputData } = useThroughPutData();
const { inputValues } = useInputValues();
const progressPercent = machineActiveTime;
const progressPercent = machineActiveTime;
const shiftLength = parseFloat(inputValues["Shift length"]);
const shiftLength = parseFloat(inputValues["Shift length"]);
const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (throughputData > 0) {
setIsLoading(false);
} else {
setIsLoading(false);
}
}, [throughputData])
useEffect(() => {
if (throughputData > 0) {
setIsLoading(false);
} else {
setIsLoading(false);
}
}, [throughputData]);
const Units_per_hour = ((shiftLength * 60) / (materialCycleTime / 60) / shiftLength)
const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
return (
<>
{!isLoading && <div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Throughput Summary</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ThroughputSummaryIcon />
</div>
</div>
{!isLoading ? (
<>
<div className="process-container">
<div className="throughput-value">
<span className="value">{(Units_per_hour).toFixed(2) === "Infinity"? 0 : (Units_per_hour).toFixed(2) }</span> Units/hour
</div>
return (
<>
{!isLoading && (
<div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Throughput Summary</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ThroughputSummaryIcon />
</div>
</div>
{!isLoading ? (
<>
<div className="process-container">
<div className="throughput-value">
<span className="value">
{Units_per_hour.toFixed(2) === "Infinity"
? 0
: Units_per_hour.toFixed(2)}
</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}
{/* 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="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">
{materialCycleTime} secs/unit{" "}
</span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div>
))}
</div>
</div>
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">{materialCycleTime} secs/unit </span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div>
</div>}
</>
);
)}
</>
);
};
export default ProductionCapacity;