Danso-KT1/National-emergency-response-and-dispatch-coordination-platform.

This project is a distributed emergency response and dispatch coordination platform for Ghana that helps administrators log incidents, locate them on a map, assign the nearest available responder, and track the response in real time. It is designed as a microservices-based system with support for authentication, incident management,. # Ghana Emergency Response Platform Frontend A React + TypeScript frontend for the **CPEN 421 Final Course Project**. This UI is designed around the project brief, which requires a minimal web interface that lets administrators **log in, record incidents, view dispatch status, track responder vehicles on a map, and view analytics**. It also respects the wider workflow in the document where an operator receives a phone call, captures the emergency on a form, selects the location on **Google Maps**, and then the backend determines the **nearest available responder**. fileciteturn1file1 fileciteturn1file3 ## What this frontend covers from the brief - Secure staff login screen for system users supported by the authentication service. - Dashboard view for emergency operators. - Incident list and status progression. - Incident creation form with **Google Maps location picker** and latitude/longitude capture. - Live dispatch tracking map for vehicles. - Analytics dashboard for response times, incidents by region, and resource utilization. - Mock API mode for frontend-first development before backend microservices are ready. ## Tech stack - React - TypeScript - Vite - Material UI - React Router - TanStack Query - Axios - React Hook Form + Zod - Recharts - Google Maps via `@react-google-maps/api` - react-hot-toast - framer-motion ## Packages to install After placing the code in the project folder, run: ```bash npm install ``` These are the important packages already listed in `package.json`: ```text @emotion/react @emotion/styled @hookform/resolvers @mui/icons-material @mui/material @react-google-maps/api @tanstack/react-query axios dayjs framer-motion react react-dom react-hook-form react-hot-toast react-router-dom recharts zod typescript vite @vitejs/plugin-react ``` ## Folder structure ```text emergency-frontend/ ├── public/ ├── src/ │ ├── components/ │ │ ├── common/ │ │ ├── forms/ │ │ └── layout/ │ ├── features/ │ │ └── auth/ │ ├── …