A modern, AI-powered 911 dispatcher dashboard providing real-time call prioritization, intelligent triage, and streamlined emergency response coordination.
- 🚨 Real-Time Call Queue - Auto-prioritized incoming calls with live updates
- 🤖 AI-Powered Triage - Intelligent distress detection and pattern matching
- 📝 Live Transcription - Real-time call transcription with speaker differentiation
- 🗺️ Location Intelligence - Address verification with confidence scoring
- 📊 Multi-Service Dispatch - One-click dispatch for EMS, Police, and Fire
- 🎯 Smart Routing - AI-driven category detection and service routing
- 📈 Status Tracking - Full call lifecycle management
- 🎨 Modern UI - Responsive interface with light/dark mode support
- Node.js 18+
- pnpm (recommended)
# Clone the repository
git clone https://github.com/oseni99/dispatch-AI-UI.git
cd dispatch-AI-UI
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Open http://localhost:3000pnpm build
pnpm startFramework: Next.js 16.0 (React 19.2) • Language: TypeScript 5
Styling: Tailwind CSS 4.1 • UI: Radix UI • Animations: Framer Motion
Forms: React Hook Form + Zod • Charts: Recharts • Icons: Lucide React
Left Panel - Prioritized Call Queue
- Live updates with elapsed time tracking
- Color-coded priority indicators (Critical, Severe, Low)
- Animated pulse effects for critical calls
Center Panel - Active Call Details
- AI-powered analysis and real-time categorization tags
- Live transcript display with speaker differentiation
- Caller reliability scoring and emotion detection
- One-click dispatch controls (EMS/Police/Fire)
Right Panel - Location & Status
- Interactive map with confidence scoring
- System status monitoring (units available)
- Manual override controls
- Address verification badges
The dashboard requires a backend API following the OpenAPI specification in openapi.yaml. See APP_SPECS.md for detailed implementation requirements.
| Endpoint | Method | Purpose |
|---|---|---|
/api/queue |
GET | Fetch prioritized call queue |
/api/call/{id} |
GET | Get call details and transcript |
/api/queue/{id}/status |
PATCH | Update call status |
Real-Time Updates: Polling-based with 5s interval
Mock Data: Available for development/testing
911-dispatcher-dashboard/
├── app/ # Next.js app directory
│ ├── api/ # API route handlers
│ ├── dashboard/ # Dashboard page
│ ├── layout.tsx # Root layout with theme
│ └── page.tsx # Landing page
├── components/
│ ├── dispatcher-dashboard.tsx # Main dashboard
│ ├── ui/ # Reusable UI components
│ └── theme-*.tsx # Theme support
├── types/
│ └── dispatcher.ts # TypeScript definitions
├── lib/
│ └── utils.ts # Utilities
├── APP_SPECS.md # API specifications
└── openapi.yaml # OpenAPI schema
Automatic ranking based on:
- Distress Score (0-100) from AI analysis
- Call Age and elapsed time
- Emergency Category (Medical/Police/Fire)
- Caller Emotion and urgency indicators
- Pattern matching for emergency types
- Real-time distress detection
- Background audio analysis
- Automatic tagging (TRAUMA, VIOLENCE, etc.)
- Confidence scoring for routing decisions
OPEN → IN_PROGRESS → DISPATCHED → RESOLVED / CANCELLED
pnpm dev # Start development server (localhost:3000)
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLintAll data structures are defined in types/dispatcher.ts:
QueueCall- Call queue itemsActiveCall- Detailed call informationTranscriptEntry- Call transcript entries
- Define types in types/dispatcher.ts
- Create UI components in components/ui/
- Implement logic in components/dispatcher-dashboard.tsx
- Update API routes in app/api/ as needed
This project is private and proprietary.
Contact: Oluwatosin Oseni at kingosenitosin@gmail.com
When reporting issues, include:
- Subject line:
[DispatchAI] Your Issue - Steps to reproduce
- Environment details (Node.js/pnpm versions)
- Relevant logs or screenshots
Response time: 48-72 hours