Merge remote-tracking branch 'origin/simulation-armbot-v2' into v2
This commit is contained in:
62
app/src/components/ui/analysis/ProductionCapacity.tsx
Normal file
62
app/src/components/ui/analysis/ProductionCapacity.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import { ProductionCapacityIcon } from "../../icons/analysis";
|
||||
|
||||
const ProductionCapacity = () => {
|
||||
const totalBars = 6;
|
||||
const progressPercent = 50;
|
||||
|
||||
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
|
||||
const partialFillPercent =
|
||||
((progressPercent / 100) * totalBars - barsToFill) * 100;
|
||||
|
||||
return (
|
||||
<div className="productionCapacity-container analysis-card">
|
||||
<div className="productionCapacity-wrapper analysis-card-wrapper">
|
||||
<div className="card-header">
|
||||
<div className="header">
|
||||
<div className="main-header">Throughput Summary</div>
|
||||
<div className="sub-header">08:00 - 09:00 AM</div>
|
||||
</div>
|
||||
<div className="icon-wrapper">
|
||||
<ProductionCapacityIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="process-container">
|
||||
<div className="throughput-value">
|
||||
<span className="value">128</span> Units/hour
|
||||
</div>
|
||||
|
||||
{/* 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">28.4 Secs/unit</span>
|
||||
</div>
|
||||
<div className="metric">
|
||||
<span className="label">Machine Utilization</span>
|
||||
<span className="value">78%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionCapacity;
|
||||
22
app/src/components/ui/analysis/ROISummary.tsx
Normal file
22
app/src/components/ui/analysis/ROISummary.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import { ROISummaryIcon } from "../../icons/analysis";
|
||||
|
||||
const ROISummary = () => {
|
||||
return (
|
||||
<div className="analysis-card">
|
||||
<div className="throughoutSummary-wrapper analysis-card-wrapper">
|
||||
<div className="card-header">
|
||||
<div className="header">
|
||||
<div className="main-header">ROI Summary</div>
|
||||
<div className="sub-header">From 24 November, 2025</div>
|
||||
</div>
|
||||
<div className="icon-wrapper">
|
||||
<ROISummaryIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ROISummary;
|
||||
146
app/src/components/ui/analysis/ThroughputSummary.tsx
Normal file
146
app/src/components/ui/analysis/ThroughputSummary.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
LineElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
} from "chart.js";
|
||||
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
|
||||
|
||||
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
const ThroughputSummary = () => {
|
||||
const data = {
|
||||
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Units/hour",
|
||||
data: [100, 120, 110, 130, 125, 128, 132],
|
||||
borderColor: "#B392F0",
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // hide points
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const shiftUtilization = {
|
||||
"shift 1": 25,
|
||||
"shift 2": 45,
|
||||
"shift 3": 15,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="throughoutSummary analysis-card">
|
||||
<div className="throughoutSummary-wrapper analysis-card-wrapper">
|
||||
<div className="card-header">
|
||||
<div className="header">
|
||||
<div className="main-header">Throughput Summary</div>
|
||||
<div className="sub-header">08:00 - 09:00 AM</div>
|
||||
</div>
|
||||
<div className="icon-wrapper">
|
||||
<ThroughputSummaryIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="process-container">
|
||||
<div className="throughput-value">
|
||||
<span className="value">1240</span> Units/hour
|
||||
</div>
|
||||
<div className="lineChart">
|
||||
<div className="assetUsage">
|
||||
<div className="key">Asset usage</div>
|
||||
<div className="value">85%</div>
|
||||
</div>
|
||||
<Line data={data} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer">
|
||||
<div className="energyConsumption footer-card">
|
||||
<div className="header">Energy Consumption</div>
|
||||
<div className="value-container">
|
||||
<div className="energy-icon">
|
||||
<PowerIcon />
|
||||
</div>
|
||||
<div className="value-wrapper">
|
||||
<div className="value">456</div>
|
||||
<div className="unit">KWH</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shiftUtilization footer-card">
|
||||
<div className="header">Shift Utilization</div>
|
||||
<div className="value-container">
|
||||
<div className="value">85%</div>
|
||||
|
||||
<div className="progress-wrapper">
|
||||
<div
|
||||
className="progress shift-1"
|
||||
style={{ width: "30%" }}
|
||||
></div>
|
||||
<div
|
||||
className="progress shift-2"
|
||||
style={{ width: "40%" }}
|
||||
></div>
|
||||
<div
|
||||
className="progress shift-3"
|
||||
style={{ width: "30%" }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="progress-indicator">
|
||||
<div className="shift-wrapper">
|
||||
<span className="indicator shift-1"></span>
|
||||
<label>Shift 1</label>
|
||||
</div>
|
||||
<div className="shift-wrapper">
|
||||
<span className="indicator shift-2"></span>
|
||||
<label>Shift 2</label>
|
||||
</div>
|
||||
<div className="shift-wrapper">
|
||||
<span className="indicator shift-3"></span>
|
||||
<label>Shift 3</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThroughputSummary;
|
||||
Reference in New Issue
Block a user