Compare commits
1
Commits
dfb7707d56
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 mohanki
|
ea1acf2608 |
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect, useMemo } from 'react';
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||||
import { Activity, Clock, AlertTriangle, Monitor, ArrowLeft, Calendar } from 'lucide-react';
|
import { Activity, Clock, AlertTriangle, Monitor, ArrowLeft, Calendar, CheckCircle2, TrendingUp, TrendingDown, Lightbulb } from 'lucide-react';
|
||||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
||||||
|
|
||||||
export default function ChangeoverDetail() {
|
export default function ChangeoverDetail() {
|
||||||
@@ -108,7 +108,7 @@ export default function ChangeoverDetail() {
|
|||||||
<div className="container animate-fade-in">
|
<div className="container animate-fade-in">
|
||||||
<div className="header" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
|
<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' }}>
|
<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' }} />
|
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Mrf-logo.png" alt="MRF Logo" style={{ width: '60px' }} />
|
||||||
<span style={{ color: 'yellow', fontWeight: 'bold', marginTop: '5px', fontSize: '0.9rem', letterSpacing: '1px' }}>DCG</span>
|
<span style={{ color: 'yellow', fontWeight: 'bold', marginTop: '5px', fontSize: '0.9rem', letterSpacing: '1px' }}>DCG</span>
|
||||||
</div>
|
</div>
|
||||||
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-end' }}>
|
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-end' }}>
|
||||||
@@ -189,33 +189,77 @@ export default function ChangeoverDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="glass-panel" style={{ marginBottom: '2rem' }}>
|
<div className="glass-panel" style={{ marginBottom: '2rem', padding: '2rem', position: 'relative', overflow: 'hidden' }}>
|
||||||
<h2 style={{ color: 'yellow', marginBottom: '1.5rem' }}>Suggested Decisions / Insights for the Changeover event (Illustrative)</h2>
|
<div style={{ position: 'absolute', top: '-50px', right: '-50px', opacity: 0.05, pointerEvents: 'none' }}>
|
||||||
|
<Lightbulb size={200} />
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
|
|
||||||
<div style={{ color: 'var(--text-secondary)' }}>Date</div>
|
|
||||||
<div>09-06-2025</div>
|
|
||||||
<div style={{ color: 'var(--text-secondary)' }}>Time</div>
|
|
||||||
<div>13:00 Hrs</div>
|
|
||||||
<div style={{ color: 'var(--text-secondary)' }}>Type</div>
|
|
||||||
<div>Flowchannel Changeover</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 style={{ color: '#ff4444', marginBottom: '1rem', fontSize: '1.1rem' }}>Events for Attention and Improvement</h3>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
|
||||||
<ol style={{ paddingLeft: '1.5rem', marginBottom: '2rem', lineHeight: '1.8' }}>
|
<div style={{ padding: '0.75rem', background: 'rgba(255, 204, 0, 0.1)', borderRadius: '12px' }}>
|
||||||
<li>Idleness of 15 mins noticed during overall tool changeover operation. <span style={{ color: '#ff4444' }}>Operators to be trained accordingly.</span></li>
|
<Lightbulb color="#ffcc00" size={28} />
|
||||||
<li>Incoming material was not kept nearby to the stock feeder before line stop. <span style={{ color: '#ff4444' }}>6 mins delayed and Operators to be trained accordingly.</span></li>
|
</div>
|
||||||
<li>Extruder head not opened within the std time. <span style={{ color: '#ff4444' }}>Auto screw reverse rotation logic to be re-validated.</span></li>
|
<div>
|
||||||
<li>Operator found not in place at the right time during stock feeding operation. <span style={{ color: '#ff4444' }}>5 mins delayed feeding of upper and middle barrels.</span></li>
|
<h2 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 600, color: '#fff' }}>Suggested Decisions & Insights</h2>
|
||||||
</ol>
|
<p style={{ margin: '0.25rem 0 0 0', color: 'var(--text-secondary)', fontSize: '0.95rem' }}>AI-driven recommendations for process optimization (Illustrative)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3 style={{ color: '#00C851', marginBottom: '1rem', fontSize: '1.1rem' }}>Events that Turned-out to be Best</h3>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem', marginBottom: '2.5rem' }}>
|
||||||
<ol style={{ paddingLeft: '1.5rem', marginBottom: '1rem', lineHeight: '1.8' }}>
|
<div style={{ background: 'rgba(255,255,255,0.03)', padding: '1rem', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||||
<li>Sheetout of removed stock is carried out within 10 mins <span style={{ color: '#00C851' }}>- To be followed every time</span></li>
|
<div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Calendar size={14} /> Date</div>
|
||||||
<li>All operators were complied to their adherence to PPEs, SOPs and tooling arrangements <span style={{ color: '#00C851' }}>- To be followed every time</span></li>
|
<div style={{ fontSize: '1.1rem', fontWeight: 500, color: '#fff' }}>09-06-2025</div>
|
||||||
<li>Dual barrel cleanout carried out <span style={{ color: '#00C851' }}>- 12 mins saved</span></li>
|
</div>
|
||||||
<li>Incoming recipe was downloaded at the right time <span style={{ color: '#00C851' }}>- To be followed every time</span></li>
|
<div style={{ background: 'rgba(255,255,255,0.03)', padding: '1rem', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||||
</ol>
|
<div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Clock size={14} /> Time</div>
|
||||||
|
<div style={{ fontSize: '1.1rem', fontWeight: 500, color: '#fff' }}>13:00 Hrs</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ background: 'rgba(255,255,255,0.03)', padding: '1rem', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}>
|
||||||
|
<div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Activity size={14} /> Type</div>
|
||||||
|
<div style={{ fontSize: '1.1rem', fontWeight: 500, color: '#fff' }}>Flowchannel Changeover</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '2rem' }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1.5rem', paddingBottom: '0.5rem', borderBottom: '1px solid rgba(255, 68, 68, 0.2)' }}>
|
||||||
|
<TrendingDown color="#ff4444" size={24} />
|
||||||
|
<h3 style={{ margin: 0, color: '#ff4444', fontSize: '1.2rem', fontWeight: 600 }}>Areas for Attention</h3>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
{[
|
||||||
|
{ issue: "Idleness of 15 mins noticed during overall tool changeover operation.", action: "Operators to be trained accordingly." },
|
||||||
|
{ issue: "Incoming material was not kept nearby to the stock feeder before line stop.", action: "6 mins delayed - Operators to be trained." },
|
||||||
|
{ issue: "Extruder head not opened within the std time.", action: "Auto screw reverse rotation logic to be re-validated." },
|
||||||
|
{ issue: "Operator found not in place at the right time during stock feeding operation.", action: "5 mins delayed feeding of upper and middle barrels." }
|
||||||
|
].map((item, idx) => (
|
||||||
|
<div key={idx} style={{ background: 'rgba(255, 68, 68, 0.05)', padding: '1.25rem', borderRadius: '12px', borderLeft: '4px solid #ff4444' }}>
|
||||||
|
<div style={{ color: '#fff', fontSize: '0.95rem', marginBottom: '0.5rem', lineHeight: '1.5' }}>{item.issue}</div>
|
||||||
|
<div style={{ color: '#ff4444', fontSize: '0.9rem', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '0.5rem' }}><AlertTriangle size={14} /> Action: {item.action}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1.5rem', paddingBottom: '0.5rem', borderBottom: '1px solid rgba(0, 200, 81, 0.2)' }}>
|
||||||
|
<TrendingUp color="#00C851" size={24} />
|
||||||
|
<h3 style={{ margin: 0, color: '#00C851', fontSize: '1.2rem', fontWeight: 600 }}>Key Successes</h3>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
{[
|
||||||
|
{ achievement: "Sheetout of removed stock is carried out within 10 mins", metric: "To be followed every time" },
|
||||||
|
{ achievement: "All operators were complied to their adherence to PPEs, SOPs and tooling arrangements", metric: "To be followed every time" },
|
||||||
|
{ achievement: "Dual barrel cleanout carried out", metric: "12 mins saved" },
|
||||||
|
{ achievement: "Incoming recipe was downloaded at the right time", metric: "To be followed every time" }
|
||||||
|
].map((item, idx) => (
|
||||||
|
<div key={idx} style={{ background: 'rgba(0, 200, 81, 0.05)', padding: '1.25rem', borderRadius: '12px', borderLeft: '4px solid #00C851' }}>
|
||||||
|
<div style={{ color: '#fff', fontSize: '0.95rem', marginBottom: '0.5rem', lineHeight: '1.5' }}>{item.achievement}</div>
|
||||||
|
<div style={{ color: '#00C851', fontSize: '0.9rem', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '0.5rem' }}><CheckCircle2 size={14} /> {item.metric}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user