Initial commit of SOP Monitoring Dashboard

2026-07-28 12:50:28 +05:30
commit 0894a9c21e
40 changed files with 5676 additions and 0 deletions
@@ -0,0 +1,133 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Video } from 'lucide-react';
+
+export default function EventTimeline() {
+  const { id } = useParams();
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const API_BASE = '/api';
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const query = id ? `?changeover_id=${id}` : '';
+        const res = await fetch(`${API_BASE}/events${query}`);
+        if (res.ok) {
+          setEvents(await res.json());
+        }
+      } catch (err) {
+        console.error("Error fetching events", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [id]);
+
+  const formatDuration = (seconds) => {
+    if (!seconds) return '0s';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    let res = [];
+    if (h > 0) res.push(`${h}h`);
+    if (m > 0) res.push(`${m}m`);
+    if (s > 0) res.push(`${s}s`);
+    return res.join(' ') || '0s';
+  };
+
+  const getStateBadge = (state) => {
+    const s = state?.toLowerCase() || '';
+    if (s === 'active') return <span className="badge active">Active</span>;
+    if (s === 'waste') return <span className="badge waste">Waste</span>;
+    if (s === 'idle') return <span className="badge idle">Idle</span>;
+    if (s === 'load waiting') return <span className="badge load">Load Wait</span>;
+    return <span className="badge">{state}</span>;
+  };
+
+  const groupedEvents = useMemo(() => {
+    return {
+      CO: events.filter(e => e.camera_zone === 'CO'),
+      Mill: events.filter(e => e.camera_zone === 'Mill'),
+      Conveyor: events.filter(e => e.camera_zone === 'Conveyor')
+    };
+  }, [events]);
+
+  const renderTimeline = (zone, zoneEvents) => (
+    <div className="glass-panel" style={{ flex: 1, overflowY: 'auto', maxHeight: '70vh' }}>
+      <h2 style={{ position: 'sticky', top: 0, background: 'var(--bg)', paddingBottom: '1rem', borderBottom: '1px solid rgba(255,255,255,0.1)', zIndex: 10 }}>
+        {zone} Timeline
+      </h2>
+      <div style={{ marginTop: '1rem' }}>
+        {zoneEvents.length === 0 ? (
+          <p style={{ opacity: 0.5, textAlign: 'center' }}>No events recorded.</p>
+        ) : (
+          zoneEvents.map((ev, i) => (
+            <div key={ev.id} style={{ display: 'flex', flexDirection: 'column', padding: '1rem 0', borderBottom: i < zoneEvents.length -1 ? '1px dashed rgba(255,255,255,0.1)' : 'none' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                  {ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}
+                </span>
+                {getStateBadge(ev.state)}
+              </div>
+              <p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
+                <button 
+                  disabled
+                  style={{ 
+                    display: 'flex', alignItems: 'center', gap: '0.25rem', 
+                    padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
+                    background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
+                    cursor: 'not-allowed', fontSize: '0.75rem'
+                  }}
+                  title="Video review is currently disabled"
+                >
+                  <Video size={12} /> View Video
+                </button>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
+                <div>
+                  <span style={{ opacity: 0.7 }}>Std Cycle: </span>
+                  <span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
+                </div>
+                <div>
+                  <span style={{ opacity: 0.7 }}>Manpower: </span>
+                  <span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+
+  if (loading) {
+    return (
+      <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <h2>Loading Timeline...</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container animate-fade-in" style={{ maxWidth: '100%' }}>
+      <div className="header" style={{ marginBottom: '1rem' }}>
+        <Link to={`/changeover/${id}`} style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
+          <ArrowLeft size={16} /> Back to Changeover Analytics
+        </Link>
+        <h1>Event Timeline: {id}</h1>
+        <p>Location-wise sequential breakdown of events</p>
+      </div>
+
+      <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+        {renderTimeline('CO', groupedEvents.CO)}
+        {renderTimeline('Mill', groupedEvents.Mill)}
+        {renderTimeline('Conveyor', groupedEvents.Conveyor)}
+      </div>
+    </div>
+  );
+}