Spaces:
Sleeping
Sleeping
| import React, { useState, useEffect } from 'react'; | |
| const IncidentQueue = ({ showToast }) => { | |
| const [incidents, setIncidents] = useState([]); | |
| const [currentTime, setCurrentTime] = useState(new Date()); | |
| const fetchIncidents = async () => { | |
| try { | |
| const res = await fetch(`/api/incidents`); | |
| const data = await res.json(); | |
| setIncidents(data); | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }; | |
| useEffect(() => { | |
| fetchIncidents(); | |
| const timer = setInterval(() => setCurrentTime(new Date()), 1000); | |
| return () => clearInterval(timer); | |
| }, []); | |
| const handleResolve = async (id) => { | |
| try { | |
| const res = await fetch(`/api/incidents/resolve`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ incident_id: id }) | |
| }); | |
| if (res.ok) { | |
| if (showToast) showToast(`Incident #${id} has been marked as Resolved.`, 'success'); | |
| fetchIncidents(); | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }; | |
| const handleEscalate = async (id) => { | |
| try { | |
| const res = await fetch(`/api/incidents/escalate`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ incident_id: id }) | |
| }); | |
| if (res.ok) { | |
| if (showToast) showToast(`🚨 Emergency Response Team (ERT) dispatched for Incident #${id}!`, 'danger'); | |
| fetchIncidents(); | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }; | |
| return ( | |
| <div className="glass-panel p-6 rounded-xl animate-slide-in"> | |
| <h2 className="text-xl font-bold text-white border-b border-white/10 pb-4 mb-6">Live Incident Management (SOS Alerts)</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"> | |
| {incidents.map(inc => { | |
| const slaTime = new Date(inc.sla_deadline); | |
| const diffMs = slaTime - currentTime; | |
| const isBreached = diffMs <= 0 && inc.status !== 'Resolved' && inc.status !== 'Escalated'; | |
| const minsLeft = Math.ceil(diffMs / 60000); | |
| let cardBgClass = "bg-surface-container/30 border-white/5"; | |
| let borderHighlightClass = "border"; | |
| if (inc.status === 'Escalated') { | |
| cardBgClass = "bg-error-red/5 border-error-red/20"; | |
| borderHighlightClass = "border-l-4 border-l-error-red border-t border-r border-b"; | |
| } else if (inc.status !== 'Resolved') { | |
| if (isBreached) { | |
| cardBgClass = "bg-error-red/5 border-error-red/20"; | |
| borderHighlightClass = "border-l-4 border-l-error-red border-t border-r border-b"; | |
| } else { | |
| cardBgClass = "bg-warning-orange/5 border-warning-orange/20"; | |
| borderHighlightClass = "border-l-4 border-l-warning-orange border-t border-r border-b"; | |
| } | |
| } | |
| return ( | |
| <div key={inc.id} className={`${cardBgClass} ${borderHighlightClass} rounded-xl p-5 flex flex-col gap-4 relative group hover:bg-glass-fill/85 transition-all duration-300`}> | |
| <div className="flex justify-between items-center"> | |
| <div className="font-bold text-white flex items-center gap-2"> | |
| {inc.type === 'SOS' && ( | |
| <span className="w-2.5 h-2.5 rounded-full bg-error-red inline-block animate-pulse shadow-[0_0_8px_rgba(229,57,53,0.8)]"></span> | |
| )} | |
| {inc.type} Alert | |
| </div> | |
| <div className={`text-xs px-2.5 py-1 rounded font-bold uppercase tracking-wider ${ | |
| inc.status === 'Resolved' ? 'bg-primary/20 text-primary border border-primary/30' : | |
| inc.status === 'Escalated' ? 'bg-error-red/20 text-error-red border border-error-red/30' : | |
| 'bg-warning-orange/20 text-warning-orange border border-warning-orange/30' | |
| }`}> | |
| {inc.status} | |
| </div> | |
| </div> | |
| <div className="text-sm text-on-surface-variant leading-relaxed"> | |
| <strong>Reported By:</strong> {inc.reporter_name} ({inc.reporter_role}) <br/> | |
| {inc.reporter_role === 'Pool Host' && <span><strong>Vehicle:</strong> {inc.vehicle_no} <br/></span>} | |
| <span className="text-xs text-on-surface-variant/75 mt-2 block">Triggered At: {new Date(inc.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span> | |
| </div> | |
| {inc.status === 'Open' && ( | |
| <div className={`text-center py-2 px-4 rounded-lg font-bold text-sm bg-surface-base/50 ${ | |
| isBreached ? 'text-error-red border border-error-red/20' : 'text-warning-orange border border-warning-orange/20' | |
| }`}> | |
| {isBreached ? 'SLA BREACHED' : `SLA: ${minsLeft} mins left`} | |
| </div> | |
| )} | |
| {inc.status === 'Escalated' && ( | |
| <div className="text-center py-2 px-4 rounded-lg font-bold text-sm bg-error-red/10 text-error-red border border-dashed border-error-red/30 uppercase tracking-wide"> | |
| ERT DISPATCHED & ACTIVE | |
| </div> | |
| )} | |
| {inc.status === 'Open' && ( | |
| <div className="flex gap-3 mt-2"> | |
| <button className="flex-1 py-2 rounded-lg bg-primary/20 hover:bg-primary text-primary hover:text-surface-deep border border-primary/30 font-bold text-xs transition-all duration-300" onClick={() => handleResolve(inc.id)}>Resolve</button> | |
| <button className="flex-1 py-2 rounded-lg border border-error-red/30 text-error-red hover:bg-error-red/10 font-bold text-xs transition-colors" onClick={() => handleEscalate(inc.id)}>Escalate ERT</button> | |
| </div> | |
| )} | |
| {inc.status === 'Escalated' && ( | |
| <button className="mt-2 w-full py-2.5 rounded-lg bg-primary/25 hover:bg-primary text-primary hover:text-surface-deep border border-primary/30 font-bold text-xs transition-all duration-300" onClick={() => handleResolve(inc.id)}>Mark Resolved</button> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| {incidents.length === 0 && ( | |
| <div className="col-span-full text-on-surface-variant italic text-center py-10"> | |
| No active incidents in queue. | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default IncidentQueue; | |