zinc-overview

byLokesh Yadav.6

# PROJECT OVERVIEW: TokenBook (Advance Token Booking SaaS) Build "TokenBook," a mobile-first, India-centric B2B micro SaaS platform designed to eliminate "no-show" appointments for local service businesses (sports turfs, bridal makeup studios, tattoo artists, and private clinics). # CORE BUSINESS RULE (THE ENFORCEMENT GATE) No appointment slot is ever marked as "Confirmed" until the end customer pays a mandatory, non-refundable UPI Token Advance (e.g., ₹500). Once the advance is verified, the system automatically marks the slot as booked and triggers WhatsApp confirmation notifications to both the business owner and the customer. # TARGET PERSONAS 1. Admin (Business Owner): Busy, value-conscious Indian service operators accessing the platform primarily via smartphone or tablet to manage daily bookings and share their booking link. 2. End Customer: Everyday Indian consumers booking slots via mobile web, paying instantly via UPI apps (Google Pay, PhonePe, Paytm), and receiving updates on WhatsApp. # REQUIRED SCREEN-BY-SCREEN USER FLOWS ## Flow 1: Business Owner Setup & Dashboard (Admin) - Onboarding Screen: Simple form where the owner sets: Business Name, Category (Turf, Makeup, Clinic, Other), WhatsApp Phone Number, and Default Token Advance Amount (in ₹ INR). - Dashboard Home: A clean mobile-first interface featuring: - A prominent "Copy My Booking Link" button (generates a shareable URL like `tokenbook.app/book/[business-slug]`). - Quick Stats Cards: "Total Advance Cash Collected This Month (₹)" and "No-Shows Prevented." - Calendar / Slot Manager: A visual daily/weekly calendar showing interactive time slots: - Confirmed Slots (Green badge: Advance Paid, displays Customer Name & WhatsApp number). - Pending Slots (Yellow badge: Awaiting payment). - Blocked Slots (Gray badge: Manually disabled by owner). ## Flow 2: Customer Booking & UPI Checkout (Public View) - Branded Booking Page: Clean header displaying the Business Name, Logo, and a trust badge: "Verified UPI Booking Partner." - Slot Selection: Customer selects an available Date and Time Slot from a mobile-friendly grid. - Customer Intake Form: Simple form capturing Full Name, WhatsApp Number, and an optional special note/question. - The Token Checkout Gate: A clean order summary showing: - Total Service Fee (e.g., ₹2,000) - Token Advance Payable Now (e.g., ₹500) - Remaining Balance to pay at venue (e.g., ₹1,500) - Payment Action: A high-contrast CTA button: "Pay ₹500 via UPI to Confirm Slot." Clicking this triggers our UPI payment gateway simulation. ## Flow 3: Automated Confirmation & Webhook Simulation - Upon successful completion of the UPI payment: 1. Automatically update the database status of the slot from 'PENDING' to 'CONFIRMED'. 2. Redirect the customer to a Success Screen with a green animated checkmark, Booking Reference ID, and venue summary. 3. Trigger an automated webhook simulation that logs a formatted WhatsApp confirmation message in the system backend and displays a visual UI Toast notification representing the WhatsApp alert: "✅ BOOKING CONFIRMED! [Business Name] for [Date/Time]. Token Advance Paid: ₹500. Balance Due at Venue: ₹1,500. See you soon!" # TECHNICAL & ARCHITECTURAL PREFERENCES FOR 8080.AI AGENTS - Frontend Architecture: Next.js with Tailwind CSS and Lucide Icons. Mobile-first responsive design is mandatory; touch targets must be thumb-friendly for Indian mobile users. - UI Tone & Palette: Clean, trustworthy, and modern. Use Emerald Green as the primary accent (representing UPI/financial trust) with clean Slate Gray backgrounds. - Backend & Database Schema: Create structured database tables for `Organizations` (Admins), `Services`, `TimeSlots`, and `Bookings`. The `Bookings` table must include fields for `total_amount`, `token_amount`, `payment_status` (PENDING, CONFIRMED, CANCELLED), and `customer_whatsapp`. - Gateway & Webhook Simulation: For MVP testing in the live Kubernetes staging environment, build a clean API route `/api/mock-upi-checkout` that simulates a 2-second payment processing delay, updates the database status to CONFIRMED, and fires the mock WhatsApp notification route.