Replace SOP compliance checks with Suggested Decisions / Insights section

ui/src/components/ChangeoverDetail.jsx

@@ -202,36 +202,32 @@ export default function ChangeoverDetail() {
       </div>
 
       <div className="glass-panel" style={{ marginBottom: '2rem' }}>
-        <h2>SOP Compliance Checks</h2>
+        <h2 style={{ color: 'yellow', marginBottom: '1.5rem' }}>Suggested Decisions / Insights for the Changeover event (Illustrative)</h2>
-        <div className="data-table-container">
+        
-          <table>
+        <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
-            <thead>
+          <div style={{ color: 'var(--text-secondary)' }}>Date</div>
-              <tr>
+          <div>09-06-2025</div>
-                <th>Rule</th>
+          <div style={{ color: 'var(--text-secondary)' }}>Time</div>
-                <th>Status</th>
+          <div>13:00 Hrs</div>
-                <th>Details</th>
+          <div style={{ color: 'var(--text-secondary)' }}>Type</div>
-              </tr>
+          <div>Flowchannel Changeover</div>
-            </thead>
-            <tbody>
-              {compliance.map((c, idx) => (
-                <tr key={idx}>
-                  <td>{c.rule}</td>
-                  <td>
-                    <span className={`badge ${c.status.toLowerCase() === 'pass' ? 'active' : 'waste'}`}>
-                      {c.status}
-                    </span>
-                  </td>
-                  <td>{c.detail}</td>
-                </tr>
-              ))}
-              {compliance.length === 0 && (
-                <tr>
-                  <td colSpan="3" style={{ textAlign: 'center', opacity: 0.5 }}>No compliance checks available.</td>
-                </tr>
-              )}
-            </tbody>
-          </table>
         </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>
+
+        <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' }}>