import { ReactNode } from 'react'; import { Head } from '@inertiajs/react'; import { useQuery } from '@tanstack/react-query'; import AdminLayout from '@/layouts/AdminLayout'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Video, Users, CheckCircle, Clock, ExternalLink, Phone, Pencil, Camera } from 'lucide-react'; import { format } from 'date-fns'; const statusBadge = (status: string) => { const map: Record = { requested: { label: 'Requested', className: 'bg-amber-500/10 text-amber-700 border-amber-500/30 border' }, active: { label: 'Active', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-500/30 border' }, completed: { label: 'Completed', className: 'bg-blue-500/10 text-blue-700 border-blue-500/30 border' }, cancelled: { label: 'Cancelled', className: 'bg-destructive/10 text-destructive border-destructive/30 border' }, }; const s = map[status] || { label: status, className: '' }; return {s.label}; }; const fmtDuration = (seconds: number | null) => { if (!seconds) return '—'; const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}m ${secs}s`; }; const ARAssistPage = () => { const { data: sessions, isLoading } = useQuery({ queryKey: ['ar-assist-sessions'], queryFn: async () => { const res = await fetch('/api/admin/ar-assist-sessions'); if (!res.ok) return []; return res.json(); }, }); const activeSessions = sessions?.filter((s: any) => s.status === 'active').length || 0; const totalSessions = sessions?.length || 0; const completedSessions = sessions?.filter((s: any) => s.status === 'completed').length || 0; const avgDuration = (() => { const completed = sessions?.filter((s: any) => s.status === 'completed' && s.duration_seconds) || []; if (completed.length === 0) return '—'; const avg = completed.reduce((sum: number, s: any) => sum + (s.duration_seconds || 0), 0) / completed.length; return `${Math.round(avg / 60)}m`; })(); const kpis = [ { label: 'Active Sessions', value: activeSessions, icon: Video, color: 'text-emerald-600' }, { label: 'Total Sessions', value: totalSessions, icon: Users, color: 'text-primary' }, { label: 'Completed', value: completedSessions, icon: CheckCircle, color: 'text-blue-600' }, { label: 'Avg Duration', value: avgDuration, icon: Clock, color: 'text-amber-600' }, ]; const howItWorks = [ { icon: Phone, title: 'Engineer Requests Help', description: "From the mobile job card, the engineer taps 'Request AR Assist' to initiate a live support session.", }, { icon: Camera, title: 'Live Video + AR Overlay', description: "The mentor sees the engineer's camera feed in real-time and can draw annotations, arrows, and measurements directly on the live view.", }, { icon: Pencil, title: 'Auto-Documentation', description: 'Sessions are automatically recorded and linked to the job card for compliance audit trails and future reference.', }, ]; return ( <>

AR Remote Assist

Live video support sessions between field engineers and remote mentors

{/* KPI Cards */}
{kpis.map((kpi) => (

{kpi.value}

{kpi.label}

 ))}
{/* Session History */} Session History {isLoading ? (

Loading sessions...

) : !sessions?.length ? (

No AR assist sessions yet. Sessions will appear here when engineers request remote support.

) : (
Date Engineer Job Ref Status Duration Mentor Recording {sessions.map((session: any) => ( {format(new Date(session.created_at), 'dd MMM yyyy HH:mm')} {session.engineer_name || '—'} {session.job_reference || '—'} {statusBadge(session.status)} {fmtDuration(session.duration_seconds)} {session.mentor_name || '—'} {session.recording_url ? ( ) : ( — )} ))}
)} {/* How It Works */}

How It Works

{howItWorks.map((step, i) => (

{i + 1}. {step.title}

{step.description}

 ))}
{/* Implementation Note */}

Note: This is a UI-ready scaffold. The WebRTC video streaming, canvas annotation layer, and media recording pipeline require a signalling server (via backend functions + Realtime channels) for production deployment.

); }; ARAssistPage.layout = (page: ReactNode) => {page}; export default ARAssistPage;