mohanki/MRF-AI-SOP-Monitoring-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI with MRF logo and Lean Manufacturing KPI headers

Browse Source
This commit is contained in:
mohanki
2026-08-15 23:10:20 +05:30
parent 5b8a35f46c
commit 15af3bc4ee
5 changed files with 136 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/ChangeoverDetail.jsx
+30 -5
View File
@@ -118,8 +118,12 @@ export default function ChangeoverDetail() {
return (
<div className="container animate-fade-in">
<div className="header" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-start' }}>
<div className="header" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
<div style={{ position: 'absolute', top: 0, left: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#ed1c24', padding: '10px', borderRadius: '4px' }}>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Madras_Rubber_Factory_Logo.svg" alt="MRF Logo" style={{ width: '60px' }} />
<span style={{ color: 'yellow', fontWeight: 'bold', marginTop: '5px', fontSize: '0.9rem', letterSpacing: '1px' }}>DCG</span>
</div>
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-end' }}>
<ArrowLeft size={16} /> Back to Home
</Link>
<Activity size={48} color="var(--accent)" style={{ marginBottom: '1rem' }} />
@@ -155,25 +159,46 @@ export default function ChangeoverDetail() {
<div className="kpi-grid">
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">CO Idle / Waste</span>
<span className="kpi-title">MAN</span>
<Clock size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value warning">{formatDuration(idleTimes.CO)}</span>
</div>
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">Mill Gaps / Idle</span>
<span className="kpi-title">MACHINE</span>
<AlertTriangle size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value danger">{formatDuration(idleTimes.Mill)}</span>
</div>
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">Conveyor Transport Delay</span>
<span className="kpi-title">METHOD</span>
<Monitor size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value accent">{formatDuration(idleTimes.Conveyor)}</span>
</div>
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">MATERIAL</span>
<Activity size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value">0s</span>
</div>
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">MEASUREMENT & INFORMATION</span>
<Monitor size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value">0s</span>
</div>
<div className="glass-panel kpi-card">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span className="kpi-title">MORALE</span>
<Clock size={20} color="var(--text-secondary)" />
</div>
<span className="kpi-value">0s</span>
</div>
</div>
<div className="glass-panel" style={{ marginBottom: '2rem' }}>