GMIU Vehicle Management System
QR-Based Access Control & Bulk Registration Dashboard
Project Overview
The GMIU Vehicle Management System is a full-stack, single-page admin dashboard built with React.js and Vite, designed to manage staff vehicle registrations and QR-based access control at an institutional level.
Overview
The GMIU Vehicle Management System is a full-stack, single-page admin dashboard built with React.js and Vite, designed to manage staff vehicle registrations and QR-based access control at an institutional level. The frontend is protected by a JWT/session-based authentication guard (RequireAuth) that intercepts all protected routes and redirects unauthenticated users.
QR Card Printing & Zip Downloads
The core data module allows administrators to add, edit, view, and toggle the status of vehicle records. Each staff member can own a primary vehicle and multiple extra vehicles (stored as a serialized JSON field), each of which automatically receives a unique QR code. The application renders live QR codes (with an embedded institution logo at their centre) directly on the client via react-qr-code, and the QR Checklist screen allows bulk selection, in-browser print of a styled QR card sheet, and batch download as a ZIP archive (generated with JSZip and html-to-image, with real-time progress tracking).
Bulk Excel Importing & Sanitization
The bulk import module accepts .xlsx, .xls, and .csv files, parses them client-side using SheetJS (xlsx), applies full field-level validation (including a conditional regex path for electric vehicles vs. standard licence plate formats), and submits only clean rows to the backend. Any records rejected locally or by the server are collected and automatically exported as a rejection report Excel file.
Performance Optimizations
Performance optimisations include widespread use of React.memo on row-level sub-components, useMemo for derived table data, and useCallback for all action handlers, preventing unnecessary re-renders in large data-table views. Form handling is managed by Formik with Yup schema validation, covering conditional rules (e.g., the vehicle-number field auto-populates and becomes read-only when the type is set to 'Electric Vehicle').
PHP REST Backend API
The PHP REST backend exposes endpoints for authentication (session-based login/logout), CRUD operations, bulk insert with duplicate-email skipping, and a dashboard stats aggregation query. Axios is used throughout the frontend with a shared instance configured against a .env-driven base URL.
Screenshots & Gallery
