Update bottleneck table headers and add activity and 6M columns

ui/src/components/ChangeoverDetail.jsx

@@ -63,24 +63,12 @@ export default function ChangeoverDetail() {
   };
 
   const zoneData = useMemo(() => {
-    const data = {
+    // Illustrative data mapped to 6Ms based on requirements
-      CO: { name: 'CO', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
+    return [
-      Mill: { name: 'Mill', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
+      { name: 'Extruder Head', Man: 20 * 60, Machine: 10 * 60, Material: 5 * 60, Method: 5 * 60, 'Measurement & Info': 2 * 60, Morale: 0 },
-      Conveyor: { name: 'Conveyor', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 }
+      { name: 'Sheetout Mill', Man: 25 * 60, Machine: 8 * 60, Material: 2 * 60, Method: 5 * 60, 'Measurement & Info': 0, Morale: 0 },
-    };
+      { name: 'Stock Feeder', Man: 30 * 60, Machine: 5 * 60, Material: 5 * 60, Method: 10 * 60, 'Measurement & Info': 3 * 60, Morale: 0 }
-    events.forEach(ev => {
+    ];
-      const z = ev.camera_zone;
-      const s = ev.state?.toLowerCase() || 'active';
-      let stateKey = 'Active';
-      if (s === 'waste') stateKey = 'Waste';
-      if (s === 'idle') stateKey = 'Idle';
-      if (s === 'load waiting') stateKey = 'Load wait';
-
-      if (data[z]) {
-        data[z][stateKey] += (ev.state_duration_seconds || 0);
-      }
-    });
-    return Object.values(data);
   }, [events]);
 
   const bottleneckData = useMemo(() => {
@@ -232,7 +220,7 @@ export default function ChangeoverDetail() {
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
         <div className="glass-panel" style={{ overflow: 'hidden' }}>
-          <h2>Zone Efficiency Breakdown</h2>
+          <h2>Junction Wise Efficiency</h2>
           <div style={{ width: '100%', height: '350px' }}>
             <ResponsiveContainer width="100%" height="100%">
               <BarChart
@@ -244,10 +232,12 @@ export default function ChangeoverDetail() {
                 <YAxis stroke="var(--text-secondary)" tickFormatter={(val) => Math.floor(val/60) + 'm'} />
                 <RechartsTooltip content={<CustomTooltip />} />
                 <Legend wrapperStyle={{ paddingTop: '20px' }} />
-                <Bar dataKey="Active" stackId="a" fill="#2ecc71" />
+                <Bar dataKey="Man" stackId="a" fill="#3498db" />
-                <Bar dataKey="Idle" stackId="a" fill="#f1c40f" />
+                <Bar dataKey="Machine" stackId="a" fill="#e74c3c" />
-                <Bar dataKey="Waste" stackId="a" fill="#e74c3c" />
+                <Bar dataKey="Method" stackId="a" fill="#f1c40f" />
-                <Bar dataKey="Load wait" stackId="a" fill="#e67e22" />
+                <Bar dataKey="Material" stackId="a" fill="#9b59b6" />
+                <Bar dataKey="Measurement & Info" stackId="a" fill="#1abc9c" />
+                <Bar dataKey="Morale" stackId="a" fill="#34495e" />
               </BarChart>
             </ResponsiveContainer>
           </div>
@@ -287,24 +277,32 @@ export default function ChangeoverDetail() {
             <table>
               <thead>
                 <tr>
-                  <th>Fault / Event</th>
+                  <th>Elements / Events</th>
-                  <th>Zone</th>
+                  <th>Junctions</th>
                   <th>Lost Time</th>
                   <th>Occurrences</th>
+                  <th>Activity Classification</th>
+                  <th>6M Classifications</th>
                 </tr>
               </thead>
               <tbody>
-                {bottlenecks.map((b, idx) => (
+                {bottlenecks.map((b, idx) => {
+                  const activities = ['Removal of Outgoing Die', 'Stock Removal', 'Tool Change'];
+                  const sixMs = ['Man + Machine', 'Man', 'Man + Method'];
+                  return (
                     <tr key={idx}>
                       <td>{b.event_description}</td>
                       <td>{b.camera_zone}</td>
                       <td style={{ color: 'var(--danger)', fontWeight: 'bold' }}>{formatDuration(b.total_duration)}</td>
                       <td>{b.occurrences}</td>
+                      <td>{b.activity_classification || activities[idx % activities.length]}</td>
+                      <td>{b.six_m_classification || sixMs[idx % sixMs.length]}</td>
                     </tr>
-                ))}
+                  );
+                })}
                 {bottlenecks.length === 0 && (
                   <tr>
-                    <td colSpan="4" style={{ textAlign: 'center', opacity: 0.5 }}>No bottlenecks recorded.</td>
+                    <td colSpan="6" style={{ textAlign: 'center', opacity: 0.5 }}>No bottlenecks recorded.</td>
                   </tr>
                 )}
               </tbody>