IkeMoyo/zrp-forensics-frontend

React frontend for the Zimbabwe Republic Police Forensic Cyber Lab system # ZRP ForensicAI — Frontend React frontend for the Zimbabwe Republic Police Forensic Cyber Lab system. Provides a dashboard for case management, AI-powered image forensic analysis, and criminal database search with biometric matching. --- ## Tech Stack - React 18 - Vite 5 - Tailwind CSS 3 --- ## Project Structure ``` zrp-forensics-frontend/ ├── src/ │ ├── components/ │ │ ├── Sidebar.jsx │ │ └── ui/ │ │ ├── Bar.jsx # Progress bar metric component │ │ ├── Card.jsx # Dark card container │ │ ├── Chip.jsx # Status badge (FORGERY / AUTHENTIC) │ │ ├── DropZone.jsx # Drag-and-drop image uploader │ │ ├── Err.jsx # Error message banner │ │ └── Spinner.jsx # Loading spinner │ ├── hooks/ │ │ └── useCriminals.js # Criminal CRUD — fetches from Django API │ ├── pages/ │ │ ├── Dashboard.jsx # KPI stats, recent cases, criminal summary │ │ ├── Cases.jsx # Case list and creation │ │ ├── Analyzer.jsx # AI forensic image analysis │ │ ├── Criminal.jsx # Criminal registry + biometric search │ │ └── Reports.jsx # Case reports overview │ ├── utils/ │ │ ├── api.js # apiFetch helper │ │ ├── b64.js # File → base64 converter │ │ └── constants.js # API base URL, status/risk CSS classes │ ├── App.jsx # Root component, routing, state │ ├── main.jsx # React entry point │ └── index.css # Tailwind directives ├── .env # Environment variables ├── vite.config.js ├── tailwind.config.js └── package.json ``` --- ## Setup ### 1. Install dependencies ```bash git clone github.com cd zrp-forensics-frontend npm install npm install -D tailwindcss@3 postcss autoprefixer npx tailwindcss init -p ``` ### 2. Configure Ta …