grand-uniforms

As a user, I want to use the frontend Login page so that I can sign in to my account and access the platform. Implement the Login page based on the existing JSX design (v2). Include the login form (email + password), social login options, forgot password link, and redirect logic to the Home page (Employee) or Dashboard (Admin) post-login. Replace any existing scaffold login page with this design.

As a user, I want to use a backend API for managing my cart and placing orders so that I can add items, apply customizations, and proceed to checkout. Implement FastAPI endpoints: POST /api/cart/add, GET /api/cart, PUT /api/cart/{item_id}, DELETE /api/cart/{item_id}, POST /api/orders (place order), GET /api/orders (user's orders list), GET /api/orders/{id} (order detail + tracking status). Include customization fields (name tag, embroidery), INR pricing with GST (18%), and delivery fee logic.

As a user, I want to use the frontend Home page so that I can browse the interactive uniform showcase and navigate to the catalog. Implement the Home page based on the existing JSX design (v2) including: NavBar (sticky, logo + nav links + cart icon + Shop Now CTA), Hero section (full-viewport deep blue gradient, animated particle overlay, headline 'Your Uniform. Your Identity.', dual CTAs), CompanyLogosStrip (auto-scrolling marquee of 6 company logos), UniformShowcase (interactive 3D carousel with customization panel), FeatureHighlights (3-column grid), HowItWorks (4-step process), CategoryBrowser (company filter tabs + product grid), Testimonials, TrustBadges, CallToAction banner, and Footer (4-column dark navy). Design is ready — implement pixel-perfect from v2 JSX.

As a user, I want to use the frontend Catalog page so that I can filter and browse uniforms by company, role, size, color, and price. Implement the Catalog page based on the existing JSX design (v2) including: NavBar, CatalogHero (compact 220px banner with company quick-filter pills), ActiveFiltersBar (removable filter pills + result count), FilterSidebar (collapsible accordion groups: Company, Role, Size, Color, Price Range, Customization), SortToolbar (result count + sort dropdown + grid/list toggle), ProductGrid (responsive 3/2/1 column grid of product cards with hover effects and skeleton loading), Pagination (smart ellipsis page buttons + items-per-page selector), and Footer. FilterSidebar becomes a bottom-sheet drawer on mobile.

As an admin, I want to use a backend API for managing the product catalog so that I can add, update, and remove uniform products. Implement FastAPI admin-protected endpoints: POST /api/admin/products, PUT /api/admin/products/{id}, DELETE /api/admin/products/{id}, POST /api/admin/products/{id}/images (image upload). Include role-based access control to restrict these endpoints to Admin users only. Support product fields: name, company, role/category, sizes, colors, base price (INR), customization options, stock status.

As an admin, I want to use a backend API for managing all customer orders so that I can view, filter, and update order statuses. Implement FastAPI admin-protected endpoints: GET /api/admin/orders (with filters: status, company, date range, search), GET /api/admin/orders/{id}, PUT /api/admin/orders/{id}/status (update to Processing/Shipped/Delivered/Cancelled), GET /api/admin/orders/export (CSV export). Include pagination and sorting.

As an admin, I want to use the frontend Dashboard page so that I can view key analytics, revenue KPIs, recent orders, and navigate to catalog/orders/reports management. Implement the Dashboard page based on the existing JSX design (v2) including: TopBar (admin nav with breadcrumb + avatar + notification bell), Sidebar (nav links: Dashboard, Orders, Catalog, Reports, Settings), KPI cards (Total Revenue, Total Orders, Avg Order Value, Pending Orders), RevenueChart (line/area chart), OrdersBreakdown (donut chart by status), TopProductsTable, CompanyWiseReport (grouped bar chart), and footer. Replace existing scaffold dashboard/overview page with this design.

As a user, I want to use a backend API for secure payment processing so that I can pay using UPI, credit/debit cards, or net banking. Integrate a payment gateway (e.g., Razorpay) into FastAPI: POST /api/payments/initiate (creates payment order), POST /api/payments/verify (validates webhook signature and marks order as paid). Support UPI, cards, and net banking. Handle INR currency, payment success/failure states, and COD order flow. Ensure compliance with Indian data protection laws.

As a user, I want to use the frontend Product Detail page so that I can view uniform details, select size, and customize it with name tags or logo embroidery before adding to cart. Implement the Product page based on the existing JSX design (v2) including: product image gallery with zoom, company logo badge, role tag, size selector (S/M/L/XL/XXL), customization panel (name tag toggle, embroidery toggle, real-time price update), quantity selector, 'Add to Cart' CTA in orange, and related products section. Page is reached from Catalog → Product.

As an admin, I want to use the frontend Reports page so that I can view sales analytics, revenue trends, and export reports. Implement the Reports page based on the existing JSX design (v2) including: TopBar, Sidebar, ReportFilters (date range picker, company dropdown, Apply/Reset buttons with collapsible mobile accordion), KPISummaryCards, RevenueChart (area chart with Daily/Weekly/Monthly toggle), OrdersBreakdown (donut chart), TopProductsTable (sortable with rank badges), CompanyWiseReport (grouped horizontal bar chart), ExportPanel (PDF/CSV/Email export buttons), and Footer. Page is reached from Dashboard → Reports.

As an admin, I want to use the frontend Catalog Management page so that I can add, edit, and remove uniform products from the catalog. Implement the Catalog management page including: product list table with search/filter, 'Add Product' button, inline edit and delete actions, product form modal (name, company, role, sizes, price, images, customization options). Page is reached from Dashboard → Catalog. Design from v2 Catalog page admin variant should be referenced.

As a user, I want to use the frontend Cart page so that I can review my selected uniforms, update quantities, remove items, and proceed to checkout. Implement the Cart page based on the existing JSX design (v2) including: cart item list (thumbnail, name, company badge, size, customization details, quantity stepper, remove button), order summary panel (subtotal, GST, delivery fee, coupon code input), 'Proceed to Checkout' CTA, and an empty cart state. Page is reached from Product → Cart and links to Checkout.

As an admin, I want to use a backend API for sales analytics so that I can view revenue trends, order breakdowns, and company-wise performance reports. Implement FastAPI admin-protected endpoints: GET /api/admin/reports/kpi (total revenue, total orders, avg order value, pending count), GET /api/admin/reports/revenue (time-series data, grouped by Daily/Weekly/Monthly), GET /api/admin/reports/orders-by-status, GET /api/admin/reports/top-products, GET /api/admin/reports/company-wise, GET /api/admin/reports/export (PDF/CSV). Support date range and company filters.

As a user, I want to use an AI-powered customization assistant in the product panel so that I can get intelligent suggestions for uniform customizations (name tags, embroidery, size recommendations) via natural language. Integrate GPT API into the FastAPI backend: POST /api/ai/customize (accepts user context: company, role, size, preferences; returns customization suggestions). Connect the AI responses to the Product page customization panel on the frontend. Ensure responses are available in both English and Hindi.

As an admin, I want to use the frontend Orders Management page so that I can view all customer orders, update order statuses, and manage fulfillment. Implement the Orders management page based on the existing JSX design (v2) including: orders data table (order ID, customer name, company, items, total INR, status, date), status filter tabs, search bar, order detail side-panel/drawer, status update dropdown, and bulk action controls. Page is reached from Dashboard → Orders.

As a user, I want to use the frontend Checkout page so that I can enter delivery details, select a payment method, and place my order securely. Implement the Checkout page based on the existing JSX design (v2) including: CheckoutNav (simplified sticky nav with padlock + 'Secure Checkout'), ProgressStepper (3-step: Delivery Details → Payment → Review & Place Order), DeliveryForm (name, employee ID, mobile, email, pincode with auto-detect, address fields, GPS button, saved addresses), PaymentMethod (UPI / Card / Net Banking / COD tiles, coupon input, SSL badge), ReviewOrder (read-only summary + 'Place Order' CTA with pulse animation), OrderSummaryPanel (sticky right card with price breakdown), TrustBar, and CheckoutFooter. Mobile: form + summary stack vertically.

As a user, I want to use the frontend Orders page so that I can view my order history and track the real-time status of each order post-purchase. Implement the Orders page based on the existing JSX design (v2) including: order list with status badges (Delivered, Processing, Shipped, Cancelled, Pending), order detail expand/collapse, shipment tracking timeline, estimated delivery dates, and reorder functionality. Page is reached from Checkout → Orders (Track Order) and also accessible from NavBar.

As a developer, I want to wire all frontend pages to their corresponding backend APIs so that the application is fully functional end-to-end. Set up Axios/fetch API client with base URL configuration, auth token interceptors, and error handling. Connect: Home → /api/products (featured), Catalog → /api/products (filtered/paginated), Product → /api/products/{id}, Cart → /api/cart, Checkout → /api/payments, Orders → /api/orders, Admin Dashboard → /api/admin/reports/kpi, Admin Catalog → /api/admin/products, Admin Orders → /api/admin/orders, Admin Reports → /api/admin/reports/*. Handle loading states, error boundaries, and empty states across all pages.