NADRA Smart Token & Queue Management System (MVP)

A complete, production-ready MVP for managing queue tokens, designed for NADRA service centers. Features real-time WebSockets, SMS reminders (mocked), and a bilingual mobile-first UI.

🚀 One-Command Start

1. Prerequisites: Node.js 18+, Docker (optional, for Postgres/Redis).
2. Install Dependencies:

   npm install
   cd server && npm install

3. Database Setup:
   • If you have Docker: docker-compose up -d
   • If not, update server/.env with your local Postgres credentials.
   • Run migrations: cd server && npx prisma migrate dev --name init && npx prisma db seed
4. Run System:
   • Backend: cd server && npm start (Runs on port 3001)
   • Frontend: npm start (Runs on port 3000/5173)

🏗 Project Structure

• src/: React Frontend (Citizen, Staff, Admin, Lobby interfaces).
• server/: Node.js Express Backend + Socket.IO + Prisma.
• server/prisma/: Database Schema and Seed data.

🧪 How to Test (Walkthrough)

1. Admin Setup:
   • Go to /admin (Login: admin / admin123).
   • Verify Branch "Islamabad G-10" and Services exist.
2. Citizen Flow:
   • Open / in a new window (Mobile view recommended).
   • Select Branch -> Service (e.g., "CNIC Renewal").
   • Enter Phone 03001234567.
   • Result: You get a Token (e.g., A-101) and QR Code.
3. Staff Action:
   • Open /staff (Login: staff / staff123).
   • Select Counter 1.
   • Click "Call Next".
4. Real-Time Update:
   • Observe the Citizen page: Status changes to "Now Serving" instantly.
   • Check Backend Console: See [MOCK SMS] Sending CALLED SMS...
5. Lobby Display:
   • Open /lobby/branch-1 to see the big screen display updating live.

🛠 Tech Stack & Design Choices

• Frontend: React 18 + TypeScript + Tailwind. Used a Single Page App (SPA) approach for faster local interaction and smoother transitions.
• Backend: Express + Socket.IO. Chosen for low overhead and excellent WebSocket support.
• Database: PostgreSQL + Prisma. Ensures type safety and relational integrity.
• Styling: Tailwind CSS with dir="rtl" support for native Urdu layout mirroring.
• Icons: Lucide-React for modern, accessible iconography.

📋 Acceptance Checklist

• FR1 Token Issuance: Unique token generation, QR code.
• FR2 ETA Calculation: Algorithm based on active counters & avg time.
• FR3 Live Queue: WebSockets push updates to Citizen and Lobby.
• FR4 Reminders: Mocked SMS sent at T-30, T-15, and Called.
• FR5 Staff Actions: Call Next, No-Show, Complete, Pause.
• FR6 Admin: Dashboard for stats and branch management.
• UI/UX: Bilingual (Urdu/Eng), Mobile-first, Accessible.

Note on Environment: The frontend is configured to look for the API at http://localhost:3001. Ensure the backend server is running.