Smart Disaster Response MIS (SDR-MIS)

Course project: Smart Disaster Response Management Information System — a web frontend for coordinating emergency reports, rescue teams, resources, hospitals, finance, approvals, MIS reporting, and audit trails. The UI is structured so you can plug in a REST API, database, and transaction/RBAC logic on the server side.

Repository layout

Path	Description
frontend/	React (JavaScript) SPA — dashboards, forms, role-based navigation
Database Project.pdf	Full project specification
Project Rubric.pdf	Marking breakdown

Prerequisites

• Node.js 18+ (LTS recommended)
• npm (comes with Node)

Run the frontend locally

cd frontend
npm install
npm run dev

Open the URL shown in the terminal (usually http://localhost:5173).

Useful scripts

Command	Purpose
npm run dev	Development server with hot reload
npm run build	Production build into frontend/dist/
npm run preview	Serve the production build locally
npm run lint	ESLint

Configuration (environment variables)

Copy frontend/.env.example to frontend/.env and adjust:

Variable	Meaning
VITE_API_BASE_URL	Backend base URL without a trailing slash (e.g. http://localhost:4000/api). Leave empty to stay in mock/demo mode.
VITE_USE_MOCK_DATA	true uses built-in demo data and mock login; set false when your API is ready.

If VITE_API_BASE_URL is unset and mock mode is on, the app runs without a server so you can demo UI and roles.

Connecting your backend

1. Implement endpoints that match your stack (Express, FastAPI, ASP.NET, etc.).
2. Point VITE_API_BASE_URL at your API root.
3. Set VITE_USE_MOCK_DATA=false.
4. Extend or remap routes in frontend/src/services/api.js so paths match your server.

The HTTP client sends Authorization: Bearer <token> after login when a token is stored in session storage.

Suggested login response shape (adjust to taste):

{
  "token": "<jwt-or-session-token>",
  "user": {
    "id": "...",
    "name": "...",
    "email": "...",
    "roleId": "admin | operator | field | warehouse | finance"
  }
}

Role IDs must align with frontend/src/constants/roles.js for navigation and route guards.

Features (frontend coverage)

• Emergency reporting — intake form + incident list (filters/search UI).
• Rescue teams — team type, location, status workflow display.
• Resources — warehouse-oriented inventory + low-stock emphasis.
• Hospitals — capacity-oriented summary table.
• Finance — transactions + summary strip (donations / expenses / procurement categories).
• Approvals — pending / approved / rejected workflow (mock actions until wired).
• MIS reports — charts and filters (sample data; swap for API-driven analytics).
• Audit log — sample audit entries (backend should append real rows).
• RBAC — sidebar and routes filtered by role (Administrator, Emergency Operator, Field Officer, Warehouse Manager, Finance Officer).

Tech stack

• React + Vite
• React Router
• Recharts (dashboards)

Submission reminder

Follow your course instructions for ZIP naming, deadlines, and group membership as stated on Google Classroom and in Database Project.pdf.