| # Labour Connect — Admin Panel (React) | |
| Web admin dashboard for the Labour Connect marketplace. Built with | |
| **React + TypeScript + Vite + Material UI**, talking to the FastAPI backend. | |
| ## Features | |
| - **Secure admin login** (email/password → JWT, persisted, auto session restore, 401 → re-login) | |
| - **Dashboard** — customers, workers, bookings, revenue stats + bar/pie charts (Recharts) | |
| - **Workers** — filter by KYC status, **approve / reject KYC**, suspend / reinstate | |
| - **Customers** — block / unblock / delete | |
| - **Categories** — full CRUD with active toggle + icon picker (matches the app icons) | |
| - **Bookings** — filter by status, cancel, reassign to a verified worker | |
| - **Reviews** — hide / restore inappropriate reviews (recomputes worker ratings) | |
| - Polished UX: responsive sidebar layout, confirm dialogs, toasts, loading/empty/error states | |
| ## Stack | |
| React 18 · TypeScript · Vite 5 · MUI 5 · TanStack Query 5 · React Router 6 · Axios · Recharts | |
| ## Prerequisites | |
| - Node 18+ | |
| - Backend running (see `../backend/README.md`) with an admin seeded | |
| ## Setup & run | |
| ```bash | |
| cd admin | |
| cp .env.example .env # set VITE_API_BASE_URL if backend isn't on localhost:8000 | |
| npm install | |
| npm run dev # http://localhost:5173 | |
| ``` | |
| `.env`: | |
| ``` | |
| VITE_API_BASE_URL=http://localhost:8000/api/v1 | |
| ``` | |
| ## Login | |
| Use the seeded admin (from the backend `.env`): | |
| ``` | |
| admin@labourconnect.in / Admin@123 | |
| ``` | |
| ## Scripts | |
| | Command | Description | | |
| |---------|-------------| | |
| | `npm run dev` | Start dev server (HMR) | | |
| | `npm run build` | Type-check (`tsc`) + production build to `dist/` | | |
| | `npm run preview` | Preview the production build | | |
| | `npm run typecheck` | Type-check only | | |
| ## Typical workflow | |
| 1. A worker signs up in the mobile app and submits KYC. | |
| 2. Here under **Workers → Pending KYC**, review and **Approve** them. | |
| 3. The worker can now go **Online** in the app and receive bookings. | |
| 4. Monitor everything from **Dashboard** / **Bookings**; moderate **Reviews** as needed. | |
| ## Project structure | |
| ``` | |
| src/ | |
| api/ axios client, typed services, shared types | |
| auth/ AuthContext + ProtectedRoute | |
| components/ Layout (sidebar/topbar), StatCard, StatusChip, dialogs, toasts, feedback | |
| hooks/ TanStack Query hooks for every endpoint | |
| pages/ Login, Dashboard, Workers, Customers, Categories, Bookings, Reviews | |
| theme.ts MUI theme (brand colors + typography) | |
| main.tsx providers (Theme, Query, Router, Auth, Toast) | |
| ``` | |
| ## Notes | |
| - The build emits a single ~1 MB JS chunk (MUI + Recharts). Fine for an internal | |
| panel; add `manualChunks` / dynamic imports if you want to trim it. | |
| - CORS: the backend already allows `http://localhost:5173` by default | |
| (`BACKEND_CORS_ORIGINS`). Add your deployed admin URL there for production. | |