mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
saridsa2
5f3b455edc
- PageHeader: renders NotificationBell when isAdmin — bell now appears on every page that uses PageHeader (leads, contacts, appointments, patients, call history, missed calls, call recordings, live monitor, team performance, settings) - app-shell: top bar row only renders for agents (network indicator + status toggle). Supervisors no longer see a wasted empty row. - Call Recordings: TopBar → PageHeader with badge + info icon - Live Monitor: TopBar → PageHeader with badge + info icon - Team Performance: TopBar → PageHeader with info icon - Settings: TopBar → PageHeader with info icon - Missed Calls: underline tabs → custom pills (consistent with all pages) - Desktop overlay app-shell synced with same changes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
389 lines
22 KiB
TypeScript
389 lines
22 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faHeadset, faPhoneVolume, faPause, faClock, faSparkles, faCalendarCheck, faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
|
|
import { PageHeader } from '@/components/layout/page-header';
|
|
import { Badge } from '@/components/base/badges/badges';
|
|
import { Table } from '@/components/application/table/table';
|
|
import { BargeControls } from '@/components/call-desk/barge-controls';
|
|
import { apiClient } from '@/lib/api-client';
|
|
import { useData } from '@/providers/data-provider';
|
|
import { formatShortDate } from '@/lib/format';
|
|
import { cx } from '@/utils/cx';
|
|
|
|
type ActiveCall = {
|
|
ucid: string;
|
|
agentId: string;
|
|
callerNumber: string;
|
|
callType: string;
|
|
startTime: string;
|
|
status: 'active' | 'on-hold';
|
|
};
|
|
|
|
type CallerContext = {
|
|
name: string;
|
|
phone: string;
|
|
source: string | null;
|
|
status: string | null;
|
|
interestedService: string | null;
|
|
aiSummary: string | null;
|
|
patientType: string | null;
|
|
leadId: string | null;
|
|
appointments: Array<{ id: string; scheduledAt: string; doctorName: string; department: string; status: string }>;
|
|
};
|
|
|
|
const formatDuration = (startTime: string): string => {
|
|
const seconds = Math.max(0, Math.floor((Date.now() - new Date(startTime).getTime()) / 1000));
|
|
const m = Math.floor(seconds / 60);
|
|
const s = seconds % 60;
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
const KpiCard = ({ value, label, icon }: { value: string | number; label: string; icon: any }) => (
|
|
<div className="flex flex-1 flex-col items-center justify-center rounded-xl border border-secondary bg-primary py-4">
|
|
<FontAwesomeIcon icon={icon} className="size-4 text-fg-quaternary mb-1" />
|
|
<p className="text-xl font-bold text-primary">{value}</p>
|
|
<p className="text-[11px] text-tertiary">{label}</p>
|
|
</div>
|
|
);
|
|
|
|
export const LiveMonitorPage = () => {
|
|
const [activeCalls, setActiveCalls] = useState<ActiveCall[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [tick, setTick] = useState(0);
|
|
const [selectedCall, setSelectedCall] = useState<ActiveCall | null>(null);
|
|
const [callerContext, setCallerContext] = useState<CallerContext | null>(null);
|
|
const [contextLoading, setContextLoading] = useState(false);
|
|
const { leads } = useData();
|
|
|
|
// Initial load + SSE stream for real-time active call updates
|
|
useEffect(() => {
|
|
// Initial snapshot
|
|
apiClient.get<ActiveCall[]>('/api/supervisor/active-calls', { silent: true })
|
|
.then(setActiveCalls)
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false));
|
|
|
|
// SSE stream — receives update/remove events in real-time
|
|
const apiUrl = import.meta.env.VITE_API_URL ?? '';
|
|
const es = new EventSource(`${apiUrl}/api/supervisor/active-calls/stream`);
|
|
es.onmessage = (msg) => {
|
|
try {
|
|
const event = JSON.parse(msg.data) as { type: 'update' | 'remove'; call?: ActiveCall; ucid: string };
|
|
setActiveCalls(prev => {
|
|
if (event.type === 'remove') {
|
|
return prev.filter(c => c.ucid !== event.ucid);
|
|
}
|
|
if (event.type === 'update' && event.call) {
|
|
const exists = prev.find(c => c.ucid === event.ucid);
|
|
if (exists) {
|
|
return prev.map(c => c.ucid === event.ucid ? event.call! : c);
|
|
}
|
|
return [...prev, event.call];
|
|
}
|
|
return prev;
|
|
});
|
|
} catch {}
|
|
};
|
|
es.onerror = () => {
|
|
// SSE reconnects automatically; no-op
|
|
};
|
|
return () => es.close();
|
|
}, []);
|
|
|
|
// Clear selection if the selected call ended
|
|
useEffect(() => {
|
|
if (selectedCall && !activeCalls.find(c => c.ucid === selectedCall.ucid)) {
|
|
setSelectedCall(null);
|
|
setCallerContext(null);
|
|
}
|
|
}, [activeCalls, selectedCall]);
|
|
|
|
// Tick every second for duration display
|
|
useEffect(() => {
|
|
const interval = setInterval(() => setTick(t => t + 1), 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const onHold = activeCalls.filter(c => c.status === 'on-hold').length;
|
|
const avgDuration = useMemo(() => {
|
|
if (activeCalls.length === 0) return '0:00';
|
|
const totalSec = activeCalls.reduce((sum, c) => {
|
|
return sum + Math.max(0, Math.floor((Date.now() - new Date(c.startTime).getTime()) / 1000));
|
|
}, 0);
|
|
const avg = Math.floor(totalSec / activeCalls.length);
|
|
return `${Math.floor(avg / 60)}:${(avg % 60).toString().padStart(2, '0')}`;
|
|
}, [activeCalls, tick]);
|
|
|
|
// Match caller to lead
|
|
const resolveCallerName = (phone: string): string | null => {
|
|
if (!phone) return null;
|
|
const clean = phone.replace(/\D/g, '');
|
|
const lead = leads.find(l => {
|
|
const lp = (l.contactPhone?.[0]?.number ?? '').replace(/\D/g, '');
|
|
return lp && (lp.endsWith(clean) || clean.endsWith(lp));
|
|
});
|
|
if (lead) {
|
|
return `${lead.contactName?.firstName ?? ''} ${lead.contactName?.lastName ?? ''}`.trim() || null;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Fetch caller context when a call is selected
|
|
const handleSelectCall = (call: ActiveCall) => {
|
|
setSelectedCall(call);
|
|
setContextLoading(true);
|
|
setCallerContext(null);
|
|
|
|
const phoneClean = call.callerNumber.replace(/\D/g, '');
|
|
|
|
// Search for lead by phone
|
|
apiClient.graphql<{ leads: { edges: Array<{ node: any }> } }>(
|
|
`{ leads(first: 5, filter: { contactPhone: { primaryPhoneNumber: { like: "%${phoneClean.slice(-10)}" } } }) { edges { node {
|
|
id contactName { firstName lastName } source status interestedService aiSummary patientId
|
|
} } } }`,
|
|
).then(async (data) => {
|
|
const lead = data.leads.edges[0]?.node;
|
|
const name = lead
|
|
? `${lead.contactName?.firstName ?? ''} ${lead.contactName?.lastName ?? ''}`.trim()
|
|
: resolveCallerName(call.callerNumber) ?? 'Unknown Caller';
|
|
|
|
let appointments: CallerContext['appointments'] = [];
|
|
if (lead?.patientId) {
|
|
try {
|
|
const apptData = await apiClient.graphql<{ appointments: { edges: Array<{ node: any }> } }>(
|
|
`{ appointments(first: 5, filter: { patientId: { eq: "${lead.patientId}" } }, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
|
|
id scheduledAt doctorName department status
|
|
} } } }`,
|
|
);
|
|
appointments = apptData.appointments.edges.map(e => e.node);
|
|
} catch { /* best effort */ }
|
|
}
|
|
|
|
setCallerContext({
|
|
name,
|
|
phone: call.callerNumber,
|
|
source: lead?.source ?? null,
|
|
status: lead?.status ?? null,
|
|
interestedService: lead?.interestedService ?? null,
|
|
aiSummary: lead?.aiSummary ?? null,
|
|
patientType: lead?.patientId ? 'RETURNING' : 'NEW',
|
|
leadId: lead?.id ?? null,
|
|
appointments,
|
|
});
|
|
}).catch(() => {
|
|
setCallerContext({
|
|
name: resolveCallerName(call.callerNumber) ?? 'Unknown Caller',
|
|
phone: call.callerNumber,
|
|
source: null, status: null, interestedService: null,
|
|
aiSummary: null, patientType: null, leadId: null, appointments: [],
|
|
});
|
|
}).finally(() => setContextLoading(false));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Live Call Monitor"
|
|
badge={activeCalls.length}
|
|
infoText="Monitor, whisper, or barge into active calls in real-time."
|
|
/>
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Left panel — KPIs + call list */}
|
|
<div className="flex flex-1 flex-col overflow-y-auto border-r border-secondary">
|
|
{/* KPI Cards */}
|
|
<div className="px-5 pt-4">
|
|
<div className="flex gap-3">
|
|
<KpiCard value={activeCalls.length} label="Active Calls" icon={faPhoneVolume} />
|
|
<KpiCard value={onHold} label="On Hold" icon={faPause} />
|
|
<KpiCard value={avgDuration} label="Avg Duration" icon={faClock} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Calls Table */}
|
|
<div className="px-5 pt-5 pb-4">
|
|
<h3 className="text-sm font-semibold text-secondary mb-3">Active Calls</h3>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<p className="text-sm text-tertiary">Loading...</p>
|
|
</div>
|
|
) : activeCalls.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center rounded-xl border border-secondary bg-primary">
|
|
<FontAwesomeIcon icon={faHeadset} className="size-12 text-fg-quaternary mb-4" />
|
|
<p className="text-sm font-medium text-secondary">No active calls</p>
|
|
<p className="text-xs text-tertiary mt-1">Active calls will appear here in real-time</p>
|
|
</div>
|
|
) : (
|
|
<Table size="sm">
|
|
<Table.Header>
|
|
<Table.Head label="Agent" isRowHeader />
|
|
<Table.Head label="Caller" />
|
|
<Table.Head label="Type" className="w-16" />
|
|
<Table.Head label="Duration" className="w-20" />
|
|
<Table.Head label="Status" className="w-24" />
|
|
</Table.Header>
|
|
<Table.Body items={activeCalls}>
|
|
{(call) => {
|
|
const callerName = resolveCallerName(call.callerNumber);
|
|
const typeLabel = call.callType === 'InBound' ? 'In' : 'Out';
|
|
const typeColor = call.callType === 'InBound' ? 'blue' : 'brand';
|
|
const isSelected = selectedCall?.ucid === call.ucid;
|
|
|
|
return (
|
|
<Table.Row
|
|
id={call.ucid}
|
|
className={cx(
|
|
'cursor-pointer transition duration-100 ease-linear',
|
|
isSelected ? 'bg-active' : 'hover:bg-primary_hover',
|
|
)}
|
|
onAction={() => handleSelectCall(call)}
|
|
>
|
|
<Table.Cell>
|
|
<span className="text-sm font-medium text-primary">{call.agentId}</span>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<div>
|
|
{callerName && <span className="text-sm font-medium text-primary block">{callerName}</span>}
|
|
<span className="text-xs text-tertiary">{call.callerNumber}</span>
|
|
</div>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Badge size="sm" color={typeColor} type="pill-color">{typeLabel}</Badge>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<span className="text-sm font-mono text-primary">{formatDuration(call.startTime)}</span>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Badge size="sm" color={call.status === 'on-hold' ? 'warning' : 'success'} type="pill-color">
|
|
{call.status}
|
|
</Badge>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
);
|
|
}}
|
|
</Table.Body>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right panel — context + barge controls */}
|
|
<div className="flex w-[380px] shrink-0 flex-col overflow-y-auto bg-primary">
|
|
{!selectedCall ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
|
|
<FontAwesomeIcon icon={faHeadset} className="size-10 text-fg-quaternary" />
|
|
<p className="text-sm font-medium text-secondary">Select a call to monitor</p>
|
|
<p className="text-xs text-tertiary">Click on any active call to see context and connect</p>
|
|
</div>
|
|
) : contextLoading ? (
|
|
<div className="flex flex-1 items-center justify-center">
|
|
<p className="text-sm text-tertiary">Loading caller context...</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-4 p-4">
|
|
{/* Caller header */}
|
|
<div className="rounded-xl border border-secondary bg-primary p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-brand-secondary text-sm font-bold text-fg-white">
|
|
{(callerContext?.name ?? '?')[0].toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold text-primary truncate">{callerContext?.name}</p>
|
|
<p className="text-xs text-tertiary">{callerContext?.phone}</p>
|
|
</div>
|
|
{callerContext?.patientType && (
|
|
<Badge size="sm" color={callerContext.patientType === 'RETURNING' ? 'brand' : 'gray'} type="pill-color">
|
|
{callerContext.patientType === 'RETURNING' ? 'Returning' : 'New'}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{/* Source + status */}
|
|
{(callerContext?.source || callerContext?.status) && (
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{callerContext.source && (
|
|
<Badge size="sm" color="gray" type="pill-color">{callerContext.source.replace(/_/g, ' ')}</Badge>
|
|
)}
|
|
{callerContext.status && (
|
|
<Badge size="sm" color="brand" type="pill-color">{callerContext.status.replace(/_/g, ' ')}</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{callerContext?.interestedService && (
|
|
<p className="mt-2 text-xs text-tertiary">Interested in: {callerContext.interestedService}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* AI Summary */}
|
|
{callerContext?.aiSummary && (
|
|
<div className="rounded-xl border border-secondary bg-secondary_alt p-3">
|
|
<div className="flex items-center gap-1 mb-1">
|
|
<FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
|
|
</div>
|
|
<p className="text-xs leading-relaxed text-primary">{callerContext.aiSummary}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Appointments */}
|
|
{callerContext?.appointments && callerContext.appointments.length > 0 && (
|
|
<div className="rounded-xl border border-secondary bg-primary p-3">
|
|
<div className="flex items-center gap-1 mb-2">
|
|
<FontAwesomeIcon icon={faCalendarCheck} className="size-3 text-fg-brand-primary" />
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-tertiary">Appointments</span>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{callerContext.appointments.map(appt => (
|
|
<div key={appt.id} className="flex items-center gap-2 rounded-lg bg-secondary px-2.5 py-2">
|
|
<div className="min-w-0 flex-1">
|
|
<span className="text-xs font-medium text-primary">{appt.doctorName ?? 'Appointment'}</span>
|
|
{appt.department && <span className="text-[11px] text-tertiary ml-1">{appt.department}</span>}
|
|
{appt.scheduledAt && (
|
|
<span className="text-[11px] text-tertiary ml-1">— {formatShortDate(appt.scheduledAt)}</span>
|
|
)}
|
|
</div>
|
|
<Badge size="sm" color={appt.status === 'COMPLETED' ? 'success' : appt.status === 'CANCELLED' ? 'error' : 'brand'} type="pill-color">
|
|
{(appt.status ?? 'Scheduled').replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Call info */}
|
|
<div className="rounded-xl border border-secondary bg-primary p-3">
|
|
<div className="flex items-center gap-1 mb-2">
|
|
<FontAwesomeIcon icon={faClockRotateLeft} className="size-3 text-fg-quaternary" />
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-tertiary">Current Call</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
<div><span className="text-tertiary">Agent:</span> <span className="font-medium text-primary">{selectedCall.agentId}</span></div>
|
|
<div><span className="text-tertiary">Type:</span> <span className="font-medium text-primary">{selectedCall.callType === 'InBound' ? 'Inbound' : 'Outbound'}</span></div>
|
|
<div><span className="text-tertiary">Duration:</span> <span className="font-mono font-medium text-primary">{formatDuration(selectedCall.startTime)}</span></div>
|
|
<div><span className="text-tertiary">Status:</span> <span className="font-medium text-primary">{selectedCall.status}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Barge Controls */}
|
|
<div className="rounded-xl border border-secondary bg-primary p-4">
|
|
<BargeControls
|
|
ucid={selectedCall.ucid}
|
|
agentId={selectedCall.agentId}
|
|
agentNumber={selectedCall.agentId}
|
|
agentName={selectedCall.agentId}
|
|
onDisconnected={() => {
|
|
// Keep selection visible but controls reset to idle/ended
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|