Hugging Face's logo

Abhisingh-18
/
Labour-Connect

Model card Files
xet
 Community
Labour-Connect / admin /README.md
Abhisingh-18's picture
Abhisingh-18
Mirror of github.com/Abhisingh18/Labour-Connect
b24b684 verified
preview code
|
Raw
History Blame Contribute Delete
2.87 kB

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 

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.