PIT Frontend: React Dashboard for Equipment Repair & Tracking
What Is PIT Frontend?
pitfrontend is the client-side dashboard for the PIT Equipment Repair & Tracking System — a full-stack application that digitises the complete repair lifecycle for production equipment. It pairs with pitbackend, a Laravel 11 REST API.
The system is built for warehouse and production environments — tracking everything from intake and fault logging through diagnosis, parts management, and resolution.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | React 18+ (Vite) |
| Styling | Tailwind CSS |
| State Management | React Context API (AuthContext) — no Redux |
| HTTP Client | Axios |
| Icons | lucide-react |
| Deployment | Vercel (vercel.json) |
Role-Based UI
The frontend enforces access control using React ProtectedRoute components that wrap role-sensitive views. Each role sees a different slice of the application:
| Role | Accessible Routes |
|---|---|
admin | All routes (/*) |
electronics_head | /dashboard, /equipment, /tickets, /tickets/intake |
technician | /dashboard, /tickets (assigned tickets only) |
management | /dashboard, /equipment, /tickets (read-only) |
When the backend returns a 401 Unauthorized response, the frontend immediately clears the Sanctum token from localStorage and redirects to /login — no stale sessions persist.
Architecture
The React app compiles to static assets (/dist) which are served directly from the cPanel public_html directory alongside the Laravel backend. The README documents this deployment pattern explicitly:
public_html/
├── index.php ← Symlinked Laravel public entry
└── /dist ← Compiled React static assets
This co-location on shared cPanel hosting avoids the need for a separate frontend server or CDN, which is the practical reality for many production deployments in the East African market.
Auth Flow
- User submits credentials to
POST /api/login - Laravel Sanctum returns a token
- Token stored in
localStorage, attached to all subsequent requests via Axios interceptor AuthContextprovidesuser,token, andlogoutgloballyProtectedRoutechecks role before rendering any protected view
Vite Configuration
The vite.config.js is customised for the cPanel deployment — the build output targets public_html/dist and asset paths are configured to work correctly when served as a subdirectory alongside the Laravel entry point.