Full Stack · Design
TAF BH Fuel Station Operations
Year
2026
Role
UI Designer & Developer
Category
Full Stack, Design
Stack
Next.js 16, React 19, TypeScript, MongoDB, Zod, Recharts
About the Project
A full-stack fuel station management system that digitizes the daily operations of a station with 4 tanks and 5 dispensers (10 nozzles), replacing a paper-based process. I designed and built it with Next.js 16, React 19, TypeScript and MongoDB.
Role-based access
A three-role access model (Sales, Authorizer, Manager) with JWT sessions, bcrypt password hashing and route protection in Next.js proxy.ts. Managers can create and manage staff accounts.
Approval workflow
A submit, approve or reject, then correct-and-resubmit workflow for meter readings and money receipts. Rejections must include a reason, and only approved data affects stock and revenue, which keeps the books auditable.
Data model
15 MongoDB collections covering tanks, dispensers, nozzle readings, fuel types, price tiers, transfers, purchases, withdrawals, deposits, loans, bank accounts and customer credit, with all inputs validated by Zod schemas.
Manager dashboards
Recharts dashboards for sales trends, live tank levels, profit breakdowns, a ledger and cash-vs-sales balance reconciliation, plus paginated, filterable history tables built with TanStack Table.
Operations tooling
Tiered fuel pricing, tank restocking and inter-tank transfers, customer credit sales with payment tracking, and a backfill tool for historical readings.
Data integrity
Database seed and migration scripts, and fixes for floating-point errors in litres-sold calculations.
