A modern Fleet Management System built with React and Supabase to help organizations manage vehicles, drivers, trips, fuel usage, maintenance, HR, and compliance in one centralized platform.
The application provides role-based access control, secure authentication, and real-time database integration through Supabase.!
| Module | Features |
|---|---|
| 🚗 Vehicles | Full register, profiles, service schedule tracking |
| 👤 Drivers | Driver profiles, license tracking, expiry alerts |
| ⛽ Fuel | Fill-up logs, cost tracking, consumption per vehicle |
| 🔧 Maintenance | Schedule, track, and cost all repairs and services |
| 🗺️ Trips | Log trips, mileage, route and purpose tracking |
| 📋 Compliance | Insurance, road licenses, fitness — expiry alerts |
| Accident reports, damage costs, resolution tracking | |
| 📈 Reports | Fleet cost, fuel analysis, per-vehicle breakdown |
src/
│
├── components/
│ └── layout/
│ └── Layout.js
│
├── context/
│ ├── SupabaseContext.js
│ └── ToastContext.js
│
├── pages/
│ ├── LoginPage.js
│ ├── DashboardPage.js
│ ├── UsersPage.js
│
│ ├── vehicles/
│ │ └── VehiclesPage.js
│
│ ├── drivers/
│ │ └── DriversPage.js
│
│ ├── trips/
│ │ └── TripsPage.js
│
│ ├── fuel/
│ │ └── FuelPage.js
│
│ ├── maintenance/
│ │ └── MaintenancePage.js
│
│ ├── compliance/
│ │ └── CompliancePage.js
│
│ ├── incidents/
│ │ └── IncidentsPage.js
│
│ ├── reports/
│ │ └── ReportsPage.js
│
│ └── hr/
│ ├── EmployeesPage.js
│ ├── PayrollPage.js
│ └── ExpensesPage.js
│
└── App.js
cp .env.example .envEdit .env:
REACT_APP_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
REACT_APP_SUPABASE_ANON_KEY=eyJxxxxxx...
npm install
npm start- Register for an account from the Login Page.
- After registration, your account will show "Awaiting Approval".
- An Administrator must approve your account from the Admin Dashboard → Users page.
- Once approved, sign in again to access the system.
| Role | Access |
|---|---|
| admin | Full access — users, all records, delete |
| manager | All modules, cannot manage users |
| staff | View + create records (trips, fuel, incidents) |
| viewer | Read-only |
npm run buildDeploy build/ to Netlify, Vercel, or any static host. Set env vars in the hosting dashboard.