Zinc-Overview: System Requirements Document

1. Introduction

The project "Zinc-Overview" is focused on developing "TokenBook," a mobile-first, India-centric B2B micro SaaS platform. This platform is designed to eliminate "no-show" appointments for local service businesses such as sports turfs, bridal makeup studios, tattoo artists, and private clinics.

2. System Overview

TokenBook aims to streamline the booking process by ensuring that no appointment slot is marked as "Confirmed" until the end customer pays a mandatory, non-refundable UPI Token Advance. This system will automatically mark the slot as booked and send WhatsApp confirmation notifications to both the business owner and the customer upon payment verification.

3. Functional Requirements as Story Points

• As an Admin, I should be able to onboard by setting my Business Name, Category, WhatsApp Phone Number, and Default Token Advance Amount.
• As an Admin, I should be able to view a dashboard with a "Copy My Booking Link" button and quick stats on total advance cash collected and no-shows prevented.
• As an Admin, I should be able to manage a calendar with interactive time slots showing confirmed, pending, and blocked slots.
• As an End Customer, I should be able to view a branded booking page with business details and a trust badge.
• As an End Customer, I should be able to select a date and time slot from a mobile-friendly grid.
• As an End Customer, I should be able to fill out a form with my full name, WhatsApp number, and an optional note.
• As an End Customer, I should be able to view an order summary with service fee details and a token advance payable.
• As an End Customer, I should be able to pay the token advance via a UPI payment gateway simulation.
• As a System, I should automatically update the slot status to 'CONFIRMED' upon successful payment.
• As a System, I should redirect the customer to a success screen with booking details after payment.
• As a System, I should trigger a webhook simulation to log and display a WhatsApp confirmation message.

4. User 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.

5. Core User Flows

Flow 1: Business Owner Setup & Dashboard (Admin)

1. Admin accesses the onboarding screen.
2. Admin enters business details and default token advance amount.
3. Admin views the dashboard with a "Copy My Booking Link" button and quick stats.
4. Admin manages the calendar with interactive time slots.

Flow 2: Customer Booking & UPI Checkout (Public View)

1. Customer visits the branded booking page.
2. Customer selects a date and time slot.
3. Customer fills out the intake form.
4. Customer views the order summary and initiates payment.
5. System processes the payment and updates the slot status.

Flow 3: Automated Confirmation & Webhook Simulation

1. System updates the database status to 'CONFIRMED' upon payment.
2. Customer is redirected to a success screen.
3. System triggers a webhook simulation for WhatsApp confirmation.

6. Visuals Colors and Theme

• primary: #50C878 (Emerald Green)
• primary_light: #7FE5A6
• secondary: #708090 (Slate Gray)
• accent: #50C878 (Emerald Green)
• highlight: #32CD32 (Lime Green)
• bg: #F8F8F8 (Light Gray)
• surface: #FFFFFF (White)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: #DDDDDD (Light Gray)

7. Signature Design Concept

Interactive Booking Experience

The homepage will feature an interactive booking experience where users can drag and drop available time slots into a calendar interface. This interaction will be enhanced with smooth animations using motion/react to provide a dynamic and engaging user experience. The interface will visually update in real-time, showing the status of each slot as it changes from pending to confirmed.

LANDING HERO MOTION BRIEF

The landing page will feature a continuous motion loop illustrating the journey of a booking. The animation will show a customer selecting a slot, making a payment, and receiving a confirmation. This will be achieved using motion/react to create a seamless and engaging narrative that highlights the ease and efficiency of the booking process.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, with spring physics on interactive elements to enhance user engagement.

9. Non-Functional Requirements

• The platform must be mobile-first, ensuring a seamless experience on smartphones and tablets.
• The system should handle a high volume of concurrent bookings without performance degradation.

10. Tech Stack

• Frontend: Next.js, Tailwind CSS, Lucide Icons
• Backend: Node.js + Express or FastAPI
• Database: MySQL or MariaDB
• Payment Gateway Simulation: Custom API route for UPI payment simulation

11. Assumptions and Constraints

• The platform will primarily target Indian service businesses and consumers.
• UPI payment integration is crucial for the booking confirmation process.
• The system must comply with local data protection regulations.

12. Glossary

• UPI: Unified Payments Interface, a real-time payment system in India.
• Token Advance: A non-refundable advance payment required to confirm a booking.
• Webhook: A method of augmenting or altering the behavior of a web page or web application with custom callbacks.