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,283 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+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() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [idleTimes, setIdleTimes] = useState({ CO: 0, Mill: 0, Conveyor: 0 });
+  const [events, setEvents] = useState([]);
+  const [bottlenecks, setBottlenecks] = useState([]);
+  const [compliance, setCompliance] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  // We assume the API runs on the same host but port 3000 during dev, or proxied via nginx
+  // Using relative path for Nginx reverse proxy compatibility
+  const API_BASE = '/api';
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const query = id ? `?changeover_id=${id}` : '';
+        const [idleRes, eventsRes, bottleRes, compRes] = await Promise.all([
+          fetch(`${API_BASE}/analytics/idle-time${query}`),
+          fetch(`${API_BASE}/events${query}`),
+          fetch(`${API_BASE}/analytics/bottlenecks${query}`),
+          fetch(`${API_BASE}/analytics/sop-compliance${query}`)
+        ]);
+
+        if (idleRes.ok) setIdleTimes(await idleRes.json());
+        if (eventsRes.ok) setEvents(await eventsRes.json());
+        if (bottleRes.ok) setBottlenecks(await bottleRes.json());
+        if (compRes.ok) setCompliance(await compRes.json());
+      } catch (err) {
+        console.error("Error fetching data", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  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 zoneData = useMemo(() => {
+    const data = {
+      CO: { name: 'CO', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
+      Mill: { name: 'Mill', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
+      Conveyor: { name: 'Conveyor', Active: 0, Idle: 0, Waste: 0, 'Load wait': 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(() => {
+    return bottlenecks.map(b => ({
+      name: b.event_description.length > 25 ? b.event_description.substring(0, 25) + '...' : b.event_description,
+      value: parseInt(b.total_duration || 0)
+    }));
+  }, [bottlenecks]);
+
+  const COLORS = ['#e74c3c', '#f39c12', '#3498db', '#9b59b6', '#1abc9c', '#34495e'];
+
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="glass-panel" style={{ padding: '0.5rem 1rem', border: '1px solid rgba(255,255,255,0.1)' }}>
+          <p style={{ margin: '0 0 0.5rem 0', fontWeight: 'bold' }}>{label || payload[0].name}</p>
+          {payload.map((entry, index) => (
+            <p key={index} style={{ color: entry.color, margin: 0 }}>
+              {entry.name}: {formatDuration(entry.value)}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  if (loading) {
+    return (
+      <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <h2>Loading Analytics...</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container animate-fade-in">
+      <div className="header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
+            <ArrowLeft size={16} /> Back to Home
+          </Link>
+          <h1>Changeover Session: {id}</h1>
+          <p>Detailed Analytics and SOP Monitoring</p>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '1rem' }}>
+          <Activity size={32} color="var(--accent)" />
+          <button 
+            className="glass-panel" 
+            style={{ padding: '0.75rem 1.5rem', cursor: 'pointer', background: 'var(--accent)', color: '#fff', border: 'none', fontWeight: 'bold' }}
+            onClick={() => navigate(`/changeover/${id}/timeline`)}
+          >
+            <Calendar size={16} style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }}/>
+            View Event Timeline
+          </button>
+        </div>
+      </div>
+
+      <div className="kpi-grid">
+        <div className="glass-panel kpi-card">
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span className="kpi-title">CO Idle / Waste</span>
+            <Clock size={20} color="var(--text-secondary)" />
+          </div>
+          <span className="kpi-value warning">{formatDuration(idleTimes.CO)}</span>
+        </div>
+        <div className="glass-panel kpi-card">
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span className="kpi-title">Mill Gaps / Idle</span>
+            <AlertTriangle size={20} color="var(--text-secondary)" />
+          </div>
+          <span className="kpi-value danger">{formatDuration(idleTimes.Mill)}</span>
+        </div>
+        <div className="glass-panel kpi-card">
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span className="kpi-title">Conveyor Transport Delay</span>
+            <Monitor size={20} color="var(--text-secondary)" />
+          </div>
+          <span className="kpi-value accent">{formatDuration(idleTimes.Conveyor)}</span>
+        </div>
+      </div>
+
+      <div className="glass-panel" style={{ marginBottom: '2rem' }}>
+        <h2>SOP Compliance Checks</h2>
+        <div className="data-table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Rule</th>
+                <th>Status</th>
+                <th>Details</th>
+              </tr>
+            </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>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          <h2>Zone Efficiency Breakdown</h2>
+          <div style={{ width: '100%', height: '350px' }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={zoneData}
+                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
+                <XAxis dataKey="name" stroke="var(--text-secondary)" />
+                <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="Idle" stackId="a" fill="#f1c40f" />
+                <Bar dataKey="Waste" stackId="a" fill="#e74c3c" />
+                <Bar dataKey="Load wait" stackId="a" fill="#e67e22" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          <h2>Bottleneck Impact Distribution</h2>
+          <div style={{ width: '100%', height: '350px' }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={bottleneckData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={80}
+                  outerRadius={120}
+                  paddingAngle={5}
+                  dataKey="value"
+                  stroke="none"
+                >
+                  {bottleneckData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <RechartsTooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ fontSize: '0.8rem' }} />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '2rem', marginBottom: '2rem' }}>
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          <h2>Top Bottlenecks</h2>
+          <div className="data-table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th>Fault / Event</th>
+                  <th>Zone</th>
+                  <th>Lost Time</th>
+                  <th>Occurrences</th>
+                </tr>
+              </thead>
+              <tbody>
+                {bottlenecks.map((b, idx) => (
+                  <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>
+                  </tr>
+                ))}
+                {bottlenecks.length === 0 && (
+                  <tr>
+                    <td colSpan="4" style={{ textAlign: 'center', opacity: 0.5 }}>No bottlenecks recorded.</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Activity, Calendar, Play } from 'lucide-react';
+
+export default function ConsolidatedHome() {
+  const [changeovers, setChangeovers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  const API_BASE = '/api';
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const res = await fetch(`${API_BASE}/changeovers`);
+        if (res.ok) {
+          setChangeovers(await res.json());
+        }
+      } catch (err) {
+        console.error("Error fetching changeovers", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <h2>Loading Changeover Sessions...</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container animate-fade-in">
+      <div className="header">
+        <div>
+          <h1>SOP Monitoring Analytics</h1>
+          <p>Consolidated Factory Changeover History</p>
+        </div>
+        <Activity size={32} color="var(--accent)" />
+      </div>
+
+      <div className="glass-panel" style={{ marginBottom: '2rem' }}>
+        <h2>Recorded Changeover Sessions</h2>
+        <div className="data-table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Session ID</th>
+                <th>Date</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {changeovers.map((co) => (
+                <tr key={co.changeover_id}>
+                  <td style={{ fontWeight: 'bold' }}>{co.changeover_id}</td>
+                  <td>{new Date(co.changeover_date).toLocaleDateString()}</td>
+                  <td>
+                    <button 
+                      className="glass-panel" 
+                      style={{ padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}
+                      onClick={() => navigate(`/changeover/${co.changeover_id}`)}
+                    >
+                      <Play size={16} /> View Analytics
+                    </button>
+                  </td>
+                </tr>
+              ))}
+              {changeovers.length === 0 && (
+                <tr>
+                  <td colSpan="3" style={{ textAlign: 'center', opacity: 0.5 }}>No changeover sessions found.</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}