frozen-application

As a service partner or admin, I want to view platform overview metrics on the Dashboard page. Implement Dashboard (v2) with DashboardTopBar, DashboardSidebar (collapsible on mobile), WelcomeBanner, StatsOverview KPI cards (count-up animations), AIInsightsPanel, VehicleGarageWidget, EarningsChart, QuickActionsBar, and DashboardFooter. Role-aware: shows different KPIs and quick actions for Admin vs Partner vs User.

As a user or partner, I want to view and download digital invoices from the Invoice page. Implement Invoice page (v2) with InvoiceHero (PAID badge), InvoiceSidebar (vehicle/partner/booking info), InvoiceHeader (GST details), ServiceLineItems table (HSN codes, GST%), CostSummary panel, PaymentDetails (transaction ID, copy), ServiceRating (star rating form), ActionBar (Download PDF, Share, Book Again), and Footer. Flows from History → Invoice in the User flow.

As a user, I want to use the Home page to browse AI-powered service recommendations and access the platform's main features. Implement the Home page based on the existing JSX design (v2). Includes NavBar, HeroBanner with animated 3D car, AIServiceFinder interactive section, ServiceCategories grid, HowItWorks stepper, RoadsideAssistanceBanner, WhyChooseUs, Testimonials carousel, AppDownloadCTA, and Footer. This is the landing page for all users.

As a user, I want to sign in or register via the Login and Onboarding pages. Implement Login page (v2) with email/phone/Google auth options, OTP verification flow, and the Onboarding page (v2) covering SignUpForm, OTPVerification, SocialAuthOptions, VehicleSetupStep, and OnboardingSuccess sections. Both pages use frosted glass card design, Electric Blue accents, and the shared dark navy background. Entry point for all personas (User, Partner, Admin).

As a user, I want to track my technician's live location and service progress from the Tracking page. Implement Tracking page (v2) with a live map view, technician ETA chip, step-by-step status progress bar (Confirmed → En Route → Arrived → In Service → Completed), technician profile card, and cancel/chat action buttons. Flows from Booking Confirmation → Tracking in the User flow.

As a user, I want to view my past service records from the History page. Implement History page (v2) with a timeline-style list of past bookings (service name, vehicle, partner, date, cost, status badge), filter by vehicle/service type/date range, quick re-book action per entry, and link to Invoice download. Flows from Tracking → History in the User flow.

As a user, I want to manage my vehicles from the Garage page. Implement Garage page (v2) with vehicle cards (type, brand, model, year, fuel, registration, last service, health indicator), add/edit/delete vehicle flow, vehicle type toggle (Car/Bike), and AI-recommended service alerts per vehicle. Flows from Home → Garage → Service Detail in the User flow.

As a user, I want to find the right vehicle service using the AI Finder page. Implement AI Finder page (v1) with vehicle type toggle (Car/Bike), brand and year dropdowns, animated AI analysis loader, and AI recommendation cards (service name, urgency badge, estimated cost, duration, Book Now button). Integrates the Signature Design Concept: 3D vehicle model highlighting problem areas with glowing pulse animations. Accessible from the Home page AIServiceFinder section.

As a service partner, I want to view my earnings and performance metrics on the Earnings page. Implement Earnings page (v2) with EarningsSummaryHero (KPI count-up cards), EarningsChartPanel (bar/line chart toggle), PayoutBreakdownTable (by service type), TransactionHistory (with filters), PayoutScheduleCard (next payout info), and EarningsTipsPanel (AI insights). Flows from Dashboard → Earnings in the Partner flow.

As an admin, I want to view platform-wide stats and metrics on the Overview page. Implement the Overview page (v2) showing total bookings, revenue, active partners, user growth, and AI-powered anomaly alerts. Includes charts, stat cards with trend indicators, and quick-access navigation to Users, Partners, Bookings, and Analytics pages.

As a user, I want to use backend APIs for authentication so that I can sign up, log in with phone OTP, email, or Google OAuth, and receive JWT tokens for session management. Implement FastAPI endpoints: POST /auth/register, POST /auth/login, POST /auth/otp/send, POST /auth/otp/verify, POST /auth/google, POST /auth/logout, GET /auth/me. Support roles: User, ServicePartner, Admin.

As an admin or partner, I want to monitor and manage all bookings from the Bookings page. Implement Bookings page (v2) with a filterable/sortable table showing booking ID, user, service, partner, date, status (Pending/In Progress/Completed/Cancelled), and revenue. Includes an inline expand panel for booking detail and status update actions. Shared by Admin (monitor) and Service Partner (manage requests/update status) flows.

As a user, I want to view service details and select a service from the Service Detail page. Implement Service Detail page (v2) with service hero banner, service description, pricing breakdown, estimated duration, available service partners list with ratings, service package options (Basic/Standard/Premium), reviews section, and a 'Book This Service' CTA. Flows from Garage → Service Detail → Booking in the User flow.

As an admin, I want to view detailed platform analytics from the Analytics page. Implement Analytics page (v2) with charts for daily bookings, revenue trends, most requested services, technician performance leaderboard, and user activity heatmap. Includes date range picker, export button, and AI-generated insights panel. Flows from Overview → Analytics in the Admin flow.

As a user, I want to use backend APIs to add and manage my vehicles so that I can store vehicle details and retrieve AI service recommendations per vehicle. Implement FastAPI endpoints: POST /vehicles, GET /vehicles, GET /vehicles/{id}, PUT /vehicles/{id}, DELETE /vehicles/{id}. Fields: type, brand, model, year, fuel type, registration number, last service date.

As an admin, I want to manage all platform users from the Users page. Implement Users page (v2) with searchable/filterable user table, status badges (Active, Suspended, New), user profile drawer/modal showing vehicle count and booking history, bulk actions (suspend, verify), and pagination. Follows from the Overview page in the Admin flow.

As an admin, I want to verify and manage service partners from the Partners page. Implement Partners page (v2) with partner cards showing rating, jobs, earnings, verification status (Verified/Pending/Suspended), search/filter bar, KPI strip, and a verify modal with approve/reject actions. Partners flow from Overview → Partners in the admin user flow.

As a user, I want to use an AI backend API so that I can get personalized vehicle service recommendations based on vehicle age, mileage, and service history within 2 seconds. Implement POST /ai/recommendations (input: vehicle_id, returns: list of services with urgency, estimated cost, duration). Use LiteLLM with GPT-5.2 or Claude 4.5 for NLP reasoning. Also implement POST /ai/diagnose for natural language vehicle issue input.

As an admin, I want to create and manage discount coupons from the Coupons page. Implement Coupons page (v2) with a coupon list table (code, discount %, expiry, usage count, status), create/edit coupon modal with form fields, activate/deactivate toggle, and delete action. Coupons flow from Bookings → Coupons in the Admin flow.

As a user, I want to complete a service booking through the Booking page. Implement Booking page (v2) covering the multi-step booking flow: Step 1 (select slot via calendar), Step 2 (confirm vehicle and service), Step 3 (review summary), and Booking Confirmation screen with booking ID, partner details, and 'Track Now' CTA. Flows from Service Detail → Booking → Checkout in the User flow.

As a user, I want to use backend APIs to browse services and create bookings so that I can select a service, choose a slot, and confirm a booking. Implement: GET /services, GET /services/{id}, GET /services/categories, POST /bookings, GET /bookings, GET /bookings/{id}, PUT /bookings/{id}/status, DELETE /bookings/{id}. Support service partner availability and time slot logic.

As a user, I want to complete payment and apply coupons on the Checkout page. Implement Checkout page (v2) with order summary, coupon code input with validation, pricing breakdown (subtotal, GST, discount, total), payment method selector (UPI/Card/Wallet), UPI QR display, and 'Confirm & Pay' CTA. Flows from Booking → Checkout → Booking Confirmation in the User flow.

As a user, I want to use an AI chat assistant backend API so that I can describe vehicle issues in natural language and receive diagnostic suggestions, service recommendations, and booking help. Implement POST /ai/chat (streaming response), with context memory per session. Use LangChain with LiteLLM routing to GPT-5.2/Claude 4.5. Support intents: diagnosis, recommendation, booking_assist, FAQ.

As a user, I want to use a real-time backend API to track my technician's location and service status so that I can monitor ETA and progress live. Implement WebSocket endpoint /ws/tracking/{booking_id} broadcasting technician GPS coordinates and status updates. Support status transitions: Confirmed → En Route → Arrived → In Service → Completed. Use Redis pub/sub for real-time delivery.

As an admin and service partner, I want to use backend APIs to manage partners, users, earnings, and analytics so that I can operate the platform efficiently. Implement: GET/POST/PUT /partners, POST /partners/{id}/verify, GET /admin/users, PUT /admin/users/{id}/status, GET /admin/analytics (bookings/day, revenue, top services), GET /earnings (partner), GET /earnings/transactions, GET /earnings/payout-schedule.

As a user, I want to use backend APIs for payments and coupons so that I can pay via UPI/card/wallet and apply discount codes at checkout. Implement: POST /payments/initiate, POST /payments/verify, GET /payments/{id}, POST /coupons/validate, GET /coupons (admin), POST /coupons (admin), PUT /coupons/{id} (admin), DELETE /coupons/{id} (admin). Integrate Razorpay and generate GST-compliant invoice on payment success.

As a user, I want to use backend APIs to download invoices and view service history so that I can access past records and GST-compliant invoices. Implement: GET /invoices/{booking_id}, GET /invoices/{id}/download (PDF), GET /history (user service timeline). Invoice must include service details, parts, GST breakdown, and total. History supports filtering by vehicle/date.

As a user, I want to receive AI-generated maintenance alerts for upcoming service requirements so that I am notified before my vehicle needs service. Implement backend job (Celery/cron) that evaluates vehicle last service date and mileage, triggers notifications via push/email, and surfaces alerts in the dashboard AI insights panel. Implement GET /notifications and PATCH /notifications/{id}/read.

As a developer, I want to connect all frontend pages to their respective backend APIs so that the application is fully functional end-to-end. This includes: setting up Axios/fetch API client with JWT interceptors, integrating auth flow, vehicle CRUD, booking flow, payment checkout (Razorpay SDK), AI recommendations display, live tracking WebSocket, invoice download, and admin/partner dashboard data. Replace all mock data with real API responses.