+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function App() {
+ return (
+
+
+ )}
+ {children}
+
+ {typeof title === 'string' ? (
+
+ {title}
+ ) : title} + {subtitle && ( + typeof subtitle === 'string' ? ( +{subtitle}
+ ) : subtitle + )} +
+
+
+
+
+ {pulse && }
+
+
+ {label}
+
+
+
+ {trend && (
+ {value}
+ {subValue && / {subValue}} +
+ {trend.isUp ? '↑' : '↓'} {trend.value} vs last hour
+
+ )}
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/components/MfaSettings.tsx b/src/components/MfaSettings.tsx
new file mode 100644
index 0000000..97a66d5
--- /dev/null
+++ b/src/components/MfaSettings.tsx
@@ -0,0 +1,308 @@
+import React, { useState, useEffect } from 'react';
+import { ShieldCheck, Smartphone, CheckCircle, AlertCircle, Loader2, Eye, EyeOff } from 'lucide-react';
+import { authApi } from '../api/auth';
+import type { MfaSetupResponse } from '../api/types';
+import { Card } from './Common';
+
+export const MfaSettings: React.FC = () => {
+ const [setupData, setSetupData] = useStateTerminal Error Detected
++ A critical failure occurred in the module hierarchy. The security perimeter remains intact, but the interface requires a full system reset. +
+ {this.state.error && ( +
+ {this.state.error.toString()}
+
+ )}
+
+
+ {status === 'idle' && (
+
+
+
+ )}
+
+ {status === 'setup' && setupData && (
+ + MFA adds an extra layer of protection to your account by requiring a code from your mobile device. +
+ +
+
+ )}
+
+ {status === 'enabled' && (
+
+ 
+
+
+
+
+
+ Scan with Google Authenticator or Authy
++ Secret: {setupData.secret} +
+
+
+ setTotpCode(e.target.value.replace(/\D/g, ''))}
+ maxLength={6}
+ style={{ textAlign: 'center', fontSize: '1.2rem', letterSpacing: '8px' }}
+ />
+
+
+
+
+
+ )}
+
+ {status === 'disable' && (
+
+
+
+ {backupCodes.length > 0 && (
+ MFA PROTECTION ACTIVE
++ Your node is now secured with quantum-ready TOTP. +
+
+
+ )}
+
+
+
+
+ + Save these codes in a secure location. You can use them if you lose access to your authenticator device. +
+
+ {backupCodes.map((code, index) => (
+
+
+
+ {code}
+
+ ))}
+
+
+ )}
+
+
+ {status === 'error' && (
+ DISABLE PROTECTION?
++ Removing MFA significantly increases the risk of unauthorized access. Please confirm your password to proceed. +
+ +
+
+
+
+
+ setPassword(e.target.value)}
+ style={{ paddingRight: '40px' }}
+ autoComplete="new-password"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+ )}
+ {message}
+ +
+
+ Perspective Switcher
+
+
+ setIsOpen(!isOpen)}
+ style={{
+ width: '100%',
+ padding: '10px 12px',
+ background: 'rgba(59, 130, 246, 0.05)',
+ border: '1px solid var(--card-border)',
+ borderRadius: '10px',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '10px',
+ cursor: 'pointer',
+ color: 'var(--text-primary)',
+ textAlign: 'left',
+ transition: 'border-color 0.2s',
+ outline: 'none',
+ }}
+ >
+
+
+
+ {isOpen && (
+
+ {Object.entries(groupedPerspectives).map(([group, items]) => (
+
+ )}
+
+
+ );
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..0e0ee57
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,233 @@
+import React, { useMemo } from 'react';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import {
+ LogOut,
+ Zap,
+ ChevronDown,
+ ChevronRight,
+ AlertCircle
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { PerspectiveSwitcher } from './PerspectiveSwitcher';
+import { NAVIGATION_CONFIG } from '../config/navigation';
+import type { NavItem } from '../config/navigation';
+import { logout } from '../utils/auth';
+
+export const Sidebar: React.FC = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // Safely parse user data
+ const user = useMemo(() => {
+ try {
+ const stored = localStorage.getItem('teleems_user');
+ if (!stored || stored === 'undefined' || stored === 'null') return { roles: [] };
+ const parsed = JSON.parse(stored);
+ if (parsed && typeof parsed === 'object') {
+ parsed.roles = Array.isArray(parsed.roles)
+ ? parsed.roles.map((r: any) => String(r).toUpperCase())
+ : [];
+ return parsed;
+ }
+ return { roles: [] };
+ } catch (err) {
+ console.error('Failed to parse user data from localStorage', err);
+ return { roles: [] };
+ }
+ }, []);
+
+ const handleLogout = () => {
+ logout();
+ };
+
+ const handleRoleSwitch = (role: string) => {
+ const updatedUser = { ...user, roles: [role.toUpperCase()] };
+ localStorage.setItem('teleems_user', JSON.stringify(updatedUser));
+ window.location.reload();
+ };
+
+ const currentRole = user.roles?.[0] || 'CURESELECT_ADMIN';
+ const displayName = String(user.username || (currentRole === 'CURESELECT_ADMIN' ? 'CureSelect Admin' : 'Admin User'));
+ const displayId = user.id ? `#${String(user.id).substring(0, 6)}` : '#789022';
+ const initials = currentRole === 'CURESELECT_ADMIN' ? 'CA' : (displayName.substring(0, 2).toUpperCase() || 'AU');
+
+ const filteredNavItems = useMemo(() => {
+ const userRoles = Array.isArray(user.roles) ? user.roles : [];
+ const adminRoles = ['CURESELECT_ADMIN', 'ADMIN', 'SUPER_ADMIN', 'SUPERADMIN'];
+ const hasAdminRole = userRoles.some(r => adminRoles.includes(r));
+
+ const filterItems = (items: NavItem[]): NavItem[] => {
+ return items.filter(item => {
+ const hasItemRole = item.roles.some(role => userRoles.includes(role.toUpperCase()));
+ return hasAdminRole || hasItemRole;
+ }).map(item => ({
+ ...item,
+ subItems: item.subItems ? filterItems(item.subItems) : undefined
+ }));
+ };
+
+ return filterItems(NAVIGATION_CONFIG);
+ }, [user.roles]);
+
+ const renderNavItem = (item: NavItem, isSubItem = false) => {
+ const Icon = item.icon || AlertCircle;
+ const isActive = location.pathname === item.path || (item.path.includes('?') && location.pathname + location.search === item.path);
+ const hasSubItems = item.subItems && item.subItems.length > 0;
+ const isParentActive = hasSubItems && (isActive || item.subItems?.some(sub => location.pathname === sub.path.split('?')[0]));
+
+ return (
+
+
+
+
+ {isOpen ?
+ {currentPerspective.label}
+
+
+
+ ))}
+
+
+ {group}
+
+ {items.map((p) => {
+ const ItemIcon = p.icon;
+ const isActive = p.id === currentRole;
+ return (
+
+ );
+ })}
+
+
+
+
+ ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ padding: isSubItem ? '8px 20px 8px 48px' : '10px 20px',
+ textDecoration: 'none',
+ color: (linkActive || isActive) ? 'var(--accent-cyan)' : 'var(--text-secondary)',
+ borderLeft: !isSubItem && (linkActive || isActive) ? '3px solid var(--accent-cyan)' : '3px solid transparent',
+ background: (linkActive || isActive) ? 'rgba(59, 130, 246, 0.08)' : 'transparent',
+ transition: 'all 0.25s ease',
+ textShadow: (linkActive || isActive) ? '0 0 10px rgba(59, 130, 246, 0.4)' : 'none',
+ minWidth: 0,
+ position: 'relative'
+ })}
+ >
+ {!isSubItem &&
+
+
+ {hasSubItems && isParentActive && (
+
+ {item.subItems?.map(sub => renderNavItem(sub, true))}
+
+ )}
+
+
+ );
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
new file mode 100644
index 0000000..8ec87fd
--- /dev/null
+++ b/src/components/TopBar.tsx
@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { Search, Bell, Clock, LogOut, Home, ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../utils/auth';
+
+export const TopBar: React.FC = () => {
+ const [time, setTime] = useState(new Date());
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const timer = setInterval(() => setTime(new Date()), 1000);
+ return () => clearInterval(timer);
+ }, []);
+
+ const handleLogout = () => {
+ logout();
+ };
+
+ const user = React.useMemo(() => {
+ try {
+ const stored = localStorage.getItem('teleems_user');
+ if (!stored || stored === 'undefined' || stored === 'null') return {};
+ const parsed = JSON.parse(stored);
+ return parsed && typeof parsed === 'object' ? parsed : {};
+ } catch {
+ return {};
+ }
+ }, []);
+
+ const displayName = String(user.username || 'Admin');
+ const rawRole = Array.isArray(user.roles) ? (user.roles[0] || 'Administrator') : 'Administrator';
+ // Shorten long role names for the header
+ const roleLabel = rawRole
+ .replace(/_/g, ' ')
+ .replace('CURESELECT ADMIN', 'CS ADMIN')
+ .replace('HOSPITAL ADMIN', 'H. ADMIN')
+ .replace('FLEET OPERATOR', 'FLEET OPS')
+ .replace('STATION INCHARGE', 'STATION IC');
+ const initials = displayName.substring(0, 2).toUpperCase() || 'AD';
+
+ const formattedTime = time.toLocaleTimeString('en-US', {
+ hour12: false,
+ timeZone: 'Asia/Kolkata',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ });
+ const tzLabel = 'IST';
+
+ return (
+
+ {/* Global Navigation Controls */}
+
+
+ {/* ── RIGHT: Clock + Bell + Profile ───────────────────────── */}
+
+ {/* Back Navigation Button */}
+
+
+ {/* Home Navigation Button */}
+
+
+
+ {/* Search bar */}
+
+
+
+ {/* Status pill — flexible, shrinks if needed */}
+
+
+
+ SYSTEM CONTROL PLANE HEALTHY
+
+
+
+ {/* Clock */}
+
+
+
+
+ {/* Bell */}
+
+
+
+ {/* Divider */}
+
+
+ {/* Profile */}
+
+ 3
+
+
+ {/* Avatar */}
+
+
+ {initials}
+
+
+ {/* Name + Role */}
+
+
+ {displayName}
+
+
+ {roleLabel} • Logout
+
+
+
+
+
+
+
+ {/* GLOBAL HUD STATS */}
+
+ {activeView === 'COMM_CENTER' && (
+
+
+ )}
+
+ {activeView === 'AGGREGATORS_FLEET' && (
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/src/pages/AuditCompliance.tsx b/src/pages/AuditCompliance.tsx
new file mode 100644
index 0000000..19d76d6
--- /dev/null
+++ b/src/pages/AuditCompliance.tsx
@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+ ShieldCheck,
+ Search,
+ Download,
+ History,
+ Lock,
+ AlertTriangle,
+ FileText,
+ Database,
+ ChevronRight,
+ User as UserIcon,
+ ExternalLink,
+ Eye,
+ CheckCircle2,
+ RefreshCw
+} from 'lucide-react';
+import { Card } from '../components/Common';
+import { motion } from 'framer-motion';
+import { authApi } from '../api/auth';
+
+export const AuditCompliance: React.FC = () => {
+ const [logs, setLogs] = useState
+
+
+ + Platform Intelligence +
++ Real-time KPIs, cross-entity performance metrics, and geographic incident heatmaps. +
+
+
+
+ {(['COMM_CENTER', 'AGGREGATORS_FLEET', 'HOSPITALS_CLINICAL', 'INVENTORY_RESOURCES'] as AnalyticsView[]).map(view => (
+
+ ))}
+
+
+
+ {[
+ { label: 'Total Incidents', value: '18,242', trend: '+5.2%', color: 'cyan' },
+ { label: 'Avg Dispatch Time', value: '1.42m', trend: '-22s', color: 'green' },
+ { label: 'Active ePCR Count', value: '4,102', trend: '+12%', color: 'amber' },
+ { label: 'Hospital Pre-Alerts', value: '892', trend: '+8%', color: 'cyan' },
+ { label: 'System Uptime', value: '99.99%', trend: 'Stable', color: 'green' },
+ ].map(stat => (
+
+
+ ))}
+
+
+ {stat.label}
+
+
+ {stat.value}
+ {stat.trend}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {triageDistribution.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+ {triageDistribution.map(td => (
+
+
+
+ {td.name}
+ {td.value}%
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Live Feed: Chennai Hub
+
+
+ {[
+ { shift: 'Morning (SH1)', aht: '1m 12s', target: '1m 30s', status: 'Optimal' },
+ { shift: 'Afternoon (SH2)', aht: '1m 28s', target: '1m 30s', status: 'Healthy' },
+ { shift: 'Night (SH3)', aht: '1m 45s', target: '1m 30s', status: 'Delayed' },
+ ].map((cce, i) => (
+
+
+
+ ))}
+
+
+ {cce.shift}
+ Log: {cce.aht} (Limit: {cce.target})
+ {cce.status}
+
+
+
+ ALS Availability
+ 88%
+
+
+
+
+
+ BLS Availability
+ 95%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/CallerPortal.tsx b/src/pages/CallerPortal.tsx
new file mode 100644
index 0000000..e52aef8
--- /dev/null
+++ b/src/pages/CallerPortal.tsx
@@ -0,0 +1,853 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { incidentsApi } from '../api/incidents';
+import type { Patient, Incident } from '../api/types';
+
+import {
+ Plus,
+ Search,
+ Filter,
+ Download,
+ MapPin,
+ Clock,
+ User,
+ Activity,
+ ChevronRight,
+ PhoneCall,
+ Truck,
+ Hospital,
+ UserCheck,
+ Navigation,
+ X,
+ AlertCircle,
+ ShieldAlert,
+ CheckCircle2,
+ Minus,
+ Info,
+ Heart,
+ ChevronLeft,
+ Zap,
+ LayoutDashboard,
+ Signal
+} from 'lucide-react';
+import { Card } from '../components/Common';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// --- Types & Constants ---
+type TriageCategory = 'RED' | 'ORANGE' | 'GREEN' | 'WHITE' | 'BLACK';
+
+interface BookingRecord {
+ id: string;
+ caller: string;
+ phone: string;
+ triage: TriageCategory;
+ pickupLocation: string;
+ patients: number;
+ symptoms: string[];
+ status: 'PENDING' | 'DISPATCHED' | 'EN_ROUTE' | 'ON_SITE' | 'COMPLETED' | 'CANCELLED';
+ timestamp: string;
+ eta?: string;
+ receivedBy: string;
+ fleetOperator: string;
+ assignedVehicle: string;
+ destinationHospital: string;
+}
+
+const CATEGORIES: { type: TriageCategory; label: string; description: string; color: string; icon: any }[] = [
+ { type: 'RED', label: 'Life Threatening', description: 'Cardiac arrest, severe injury, unconscious', color: '#ff4d4d', icon: ShieldAlert },
+ { type: 'ORANGE', label: 'Urgent', description: 'Fractures, moderate injuries, severe pain', color: '#ffa500', icon: AlertCircle },
+ { type: 'GREEN', label: 'Less Urgent', description: 'Minor injuries, non-critical', color: '#00e676', icon: Activity },
+ { type: 'WHITE', label: 'Non-Emergency', description: 'Scheduled transport, routine transfer', color: 'var(--text-secondary)', icon: User },
+ { type: 'BLACK', label: 'Dead', description: 'Deceased person, mortuary transport', color: '#9e9e9e', icon: Clock }
+];
+
+const COMMON_SYMPTOMS = ['Fainting', 'Bleeding', 'Choking', 'Fits', 'Burns', 'Breathing Difficulty', 'Chest Pain', 'Head Injury' ];
+
+const SEVERITY_LEVELS = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'];
+const INCIDENT_CATEGORIES = ['MEDICAL', 'FIRE', 'ACCIDENT', 'TRAUMA', 'CARDIAC'];
+const GENDERS = ['Male', 'Female', 'Other'];
+
+
+const MOCK_DATA: BookingRecord[] = [
+ {
+ id: 'BK-1001',
+ caller: 'John Doe',
+ phone: '+91 98765 43210',
+ triage: 'RED',
+ pickupLocation: '221B Baker Street, London',
+ patients: 1,
+ symptoms: ['Chest Pain', 'Breathing Difficulty'],
+ status: 'EN_ROUTE',
+ timestamp: '2026-04-18 08:45',
+ eta: '4 mins',
+ receivedBy: 'Admin Sarah',
+ fleetOperator: 'CureSelect North',
+ assignedVehicle: 'AMB-702 (Paramedic Rajesh)',
+ destinationHospital: 'City General Hospital'
+ },
+ {
+ id: 'BK-1002',
+ caller: 'Sarah Williams',
+ phone: '+91 98888 77777',
+ triage: 'ORANGE',
+ pickupLocation: 'Central Square Mall, Floor 2',
+ patients: 2,
+ symptoms: ['Bleeding', 'Fracture'],
+ status: 'DISPATCHED',
+ timestamp: '2026-04-18 09:02',
+ eta: '8 mins',
+ receivedBy: 'Admin Mike',
+ fleetOperator: 'Apollo Fleet',
+ assignedVehicle: 'V-881 (Nurse Anita)',
+ destinationHospital: 'Apollo Speciality Hub'
+ },
+ {
+ id: 'BK-1003',
+ caller: 'Unknown (Highway)',
+ phone: '+91 95555 44444',
+ triage: 'RED',
+ pickupLocation: 'NH-45, Milestone 12',
+ patients: 3,
+ symptoms: ['Head Injury', 'Unconscious'],
+ status: 'PENDING',
+ timestamp: '2026-04-18 09:12',
+ receivedBy: 'System Auto',
+ fleetOperator: 'Govt Dispatch',
+ assignedVehicle: 'PENDING',
+ destinationHospital: 'Trauma Hub'
+ }
+];
+
+const TRIAGE_COLORS = {
+ RED: { bg: 'rgba(255, 77, 77, 0.15)', text: '#ff4d4d', border: 'rgba(255, 77, 77, 0.3)', glow: '0 0 10px rgba(255, 77, 77, 0.1)' },
+ ORANGE: { bg: 'rgba(255, 165, 0, 0.15)', text: '#ffa500', border: 'rgba(255, 165, 0, 0.3)', glow: '0 0 10px rgba(255, 165, 0, 0.1)' },
+ GREEN: { bg: 'rgba(0, 230, 118, 0.15)', text: '#00e676', border: 'rgba(0, 230, 118, 0.3)', glow: '0 0 10px rgba(0, 230, 118, 0.1)' },
+ WHITE: { bg: 'rgba(0, 0, 0, 0.02)', text: 'var(--text-primary)', border: 'var(--card-border)', glow: 'none' },
+ BLACK: { bg: 'rgba(0, 0, 0, 0.05)', text: '#9e9e9e', border: 'var(--card-border)', glow: 'none' }
+};
+
+const STATUS_COLORS = {
+ PENDING: '#ffa500',
+ DISPATCHED: '#3B82F6',
+ EN_ROUTE: '#3B82F6',
+ ON_SITE: '#00e676',
+ COMPLETED: '#9e9e9e',
+ CANCELLED: '#ff4d4d'
+};
+
+export const CallerPortal: React.FC = () => {
+ const navigate = useNavigate();
+ const [searchTerm, setSearchTerm] = useState('');
+ const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
+ const [bookingStep, setBookingStep] = useState(1);
+ const [isLoading, setIsLoading] = useState(false);
+ const [successMessage, setSuccessMessage] = useState
+
+
+ + Audit & Compliance +
++ Immutable action logs, HIPAA breach detection, and automated compliance verification. +
+
+
+
+
+
+
+
+ {/* 5.9 Audit Trail */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Timestamp | +Actor | +Action Node | +Client Info | +Severity | +
|---|---|---|---|---|
| {new Date(log.createdAt).toLocaleString()} | +
+
+
+ {log.user?.email || 'INTERNAL'}
+ |
+ + {log.action} + | +
+ IP: {log.ipAddress}
+ {log.userAgent}
+ |
+
+
+
+ {severity.toUpperCase()}
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Anomalies Detected
+ All PHI access patterns match verified clinical roles.
+
+ Unauthorized Access Attempts
+ 0
+
+
+ Bulk Patient Exports
+ 1 (Admin Approved)
+
+
+
+
+
+
+ Database Integrity
+ 100%
+
+
+
+
+
+ Last Verified: 2026-04-15 04:00 AM (UTC)
+
+ Snapshot ID: snap-0a88b22-prod-db +
+
+ + Snapshot ID: snap-0a88b22-prod-db +
+
+ {successMessage}
+Transmitting coordinates to nearest tactical units...
+Severity Assessment
+
+ {CATEGORIES.map(cat => (
+ { setNewBooking({...newBooking, triage_level: cat.type}); }}
+ className="glass"
+ style={{
+ padding: '20px', borderRadius: '16px', textAlign: 'left', cursor: 'pointer',
+ border: `1px solid ${newBooking.triage_level === cat.type ? cat.color : 'var(--card-border)'}`,
+ background: newBooking.triage_level === cat.type ? `${cat.color}15` : 'rgba(0,0,0,0.02)',
+ display: 'flex', alignItems: 'center', gap: '18px',
+ transition: 'all 0.3s ease'
+ }}
+ >
+
+ ))}
+
+
+
+
+
+
+ {newBooking.triage_level === cat.type && {cat.label}
+ {cat.description}
+
+
+
+
+
+
+
+
+
+
+
+
+ Caller & Location
+
+
+
+
+
+
+
+
+
+