Update bottleneck table headers and add activity and 6M columns

ui/src/components/ChangeoverDetail.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Activity, Clock, AlertTriangle, Monitor, ArrowLeft, Calendar, CheckCircle2, TrendingUp, TrendingDown, Lightbulb } from 'lucide-react';
+import { Activity, Clock, AlertTriangle, Monitor, ArrowLeft, Calendar } from 'lucide-react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 
 export default function ChangeoverDetail() {
@@ -108,7 +108,7 @@ export default function ChangeoverDetail() {
     <div className="container animate-fade-in">
       <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/d/d1/Mrf-logo.png" alt="MRF Logo" style={{ width: '60px' }} />
+          <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' }}>
@@ -189,77 +189,33 @@ export default function ChangeoverDetail() {
         </div>
       </div>
 
-      <div className="glass-panel" style={{ marginBottom: '2rem', padding: '2rem', position: 'relative', overflow: 'hidden' }}>
-        <div style={{ position: 'absolute', top: '-50px', right: '-50px', opacity: 0.05, pointerEvents: 'none' }}>
-          <Lightbulb size={200} />
-        </div>
+      <div className="glass-panel" style={{ marginBottom: '2rem' }}>
+        <h2 style={{ color: 'yellow', marginBottom: '1.5rem' }}>Suggested Decisions / Insights for the Changeover event (Illustrative)</h2>
         
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
-          <div style={{ padding: '0.75rem', background: 'rgba(255, 204, 0, 0.1)', borderRadius: '12px' }}>
-            <Lightbulb color="#ffcc00" size={28} />
-          </div>
-          <div>
-            <h2 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 600, color: '#fff' }}>Suggested Decisions & Insights</h2>
-            <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>
-        
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem', marginBottom: '2.5rem' }}>
-          <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' }}><Calendar size={14} /> Date</div>
-            <div style={{ fontSize: '1.1rem', fontWeight: 500, color: '#fff' }}>09-06-2025</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' }}><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 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 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>
+        <h3 style={{ color: '#ff4444', marginBottom: '1rem', fontSize: '1.1rem' }}>Events for Attention and Improvement</h3>
+        <ol style={{ paddingLeft: '1.5rem', marginBottom: '2rem', lineHeight: '1.8' }}>
+          <li>Idleness of 15 mins noticed during overall tool changeover operation. <span style={{ color: '#ff4444' }}>Operators to be trained accordingly.</span></li>
+          <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>
+          <li>Extruder head not opened within the std time. <span style={{ color: '#ff4444' }}>Auto screw reverse rotation logic to be re-validated.</span></li>
+          <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>
+        </ol>
 
-          <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>
+        <h3 style={{ color: '#00C851', marginBottom: '1rem', fontSize: '1.1rem' }}>Events that Turned-out to be Best</h3>
+        <ol style={{ paddingLeft: '1.5rem', marginBottom: '1rem', lineHeight: '1.8' }}>
+          <li>Sheetout of removed stock is carried out within 10 mins <span style={{ color: '#00C851' }}>- To be followed every time</span></li>
+          <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>
+          <li>Dual barrel cleanout carried out <span style={{ color: '#00C851' }}>- 12 mins saved</span></li>
+          <li>Incoming recipe was downloaded at the right time <span style={{ color: '#00C851' }}>- To be followed every time</span></li>
+        </ol>
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>