turbo-mockups

Apply consistent color and theme alignment across all pages using primary blue #007BFF and green #28A745 for FMCG brand theme. Ensure Roboto and Open Sans fonts are applied globally, and white/light gray backgrounds are consistent across all components and layouts.

As a user, I want to be able to use the Login page to securely sign in based on my persona (Manufacturer HQ, Distributor, Salesman, or Retailer). Implement based on existing v2 JSX design. Include persona-based routing post-login and form validation.

As a Salesman user, I want to be able to use the Beat Plan page to view my daily/weekly beat schedules with assigned routes, retailer visit lists, and planned vs. actual visit tracking. Implement based on v2 JSX design with navigation to the Map page for GPS check-in.

As a Distributor user, I want to be able to use the Stock Dashboard page to view current stock levels, low-stock alerts, recent order summaries, and quick-access actions for inventory and order management. Implement based on v1 JSX design with proper navigation to Orders and Inventory pages.

As a Retailer user, I want to be able to use the Catalog page to browse and search 300+ SKUs with filters by category, brand, and price. Implement based on v2 JSX design. Include product cards with images, descriptions, pricing, and add-to-order actions. Navigation flows to Orders page.

As a Manufacturer HQ user, I want to be able to use the Dashboard page to view KPIs including MAO (Market Achieved Output), DSO (Days Sales Outstanding), and Fill Rate. Implement based on v2 JSX design. Include summary cards, trend indicators, and navigation to analytics and inventory. Fully functional click interactions and role-based navigation.

As a Manufacturer HQ user, I want to be able to use the Schemes page to create, view, and manage trade schemes, promotional offers, discount configurations, and credit limits applicable to distributors and retailers. Implement based on v2 JSX design with proper click interactions and navigation from Dashboard.

As a Salesman user, I want to be able to use the Map page to GPS check-in at retailer locations, view retailer positions on a map with route visualization and check-in status. Implement based on v2 JSX design. Accessible from Beat Plan page and leads to Visit page.

As a Manufacturer HQ or Distributor user, I want to be able to use the Inventory page to manage inventory levels with Safety Stock (SS), Reorder Point (ROP), and Economic Order Quantity (EOQ) calculations. Implement based on v2 JSX design. Support FIFO and FEFO views for distributor flows with smooth navigation.

As a Manufacturer HQ user, I want to be able to use the Analytics page to view interactive charts for sales performance, region-wise breakdown, and SKU-level reports. Implement based on v2 JSX design. Support filters by date range, region, and product category with smooth navigation from the Dashboard.

As a Retailer user, I want to be able to use backend API for browsing the SKU catalog supporting 300+ products. Build FastAPI endpoints for full-text search, category and brand filtering, SKU detail retrieval, pricing, and availability optimized for fast browse performance.

As a Distributor or Retailer user, I want to be able to use the Orders page to place primary orders (from manufacturer) and secondary orders (to retailer), and for retailers to place self-orders or repeat previous orders. Implement based on v2 JSX design with order history, status tracking, and order detail views. Includes proper navigation from Stock Dashboard.

As a Manufacturer HQ user, I want to be able to use backend API for Dashboard KPIs: MAO (Market Achieved Output), DSO (Days Sales Outstanding), and Fill Rate. Build FastAPI endpoints for analytics data aggregation and trend data feeding the dashboard and analytics pages.

As a Retailer user, I want to be able to use the Notifications page to view order updates, scheme alerts, and delivery notifications, and to share via WhatsApp for order confirmations and promotional messages. Implement based on v2 JSX design with proper navigation from Catalog page.

As a Manufacturer HQ user, I want to be able to use the Reports page to generate business reports with Tally sync capability. Implement based on v2 JSX design. Include filters for date range, report type, and export options for Tally-compatible formats. Accessible from Inventory page per user flow.

As a Distributor user, I want to be able to use the Billing page to generate GST-compliant invoices with applied scheme discounts and payment summaries. Implement based on v2 JSX design. Support invoice generation and billing history. Accessible after placing secondary orders per distributor user flow.

As a Manufacturer HQ user, I want to be able to use backend API for trade scheme configuration (creation, update, activation) and credit limit management per distributor and retailer. Build FastAPI endpoints for scheme eligibility evaluation and credit utilization tracking.

As a Retailer user, I want to be able to use backend API for new order placement and repeat order functionality. Build FastAPI endpoints for order history retrieval, repeat order pre-fill from previous orders, and order status tracking.

As a Manufacturer HQ or Distributor user, I want to be able to use backend API for inventory management covering Safety Stock (SS), Reorder Point (ROP), and Economic Order Quantity (EOQ) calculations. Build FastAPI endpoints for FIFO and FEFO inventory valuation and movement tracking.

As a Salesman user, I want to be able to use backend API for beat plan schedule management and GPS check-in data handling. Build FastAPI endpoints for beat plan CRUD, assigned retailer route retrieval, GPS coordinate validation for check-in, and visit schedule tracking.

As a Salesman user, I want to be able to use the Visit page to log customer visit details including interaction notes, product discussions, and outcome recording after GPS check-in. Implement based on v2 JSX design. Accessible from Map page and leads to Order Capture page.

As a Manufacturer HQ user, I want to be able to use backend API for sales analytics by region, SKU performance reports, and Tally sync integration. Build FastAPI endpoints for report generation, export in Tally-compatible format, and date-range filtered analytics queries.

As a Salesman user, I want to be able to use the Order Capture page to record orders on behalf of retailers with SKU selection, quantity input, and scheme application. Implement based on v1 JSX design. Support offline data capture with sync queue for limited connectivity field scenarios. Accessible from Visit page.

As a Retailer user, I want to be able to use backend API for push notification delivery and WhatsApp message integration. Build FastAPI endpoints for notification creation, delivery status tracking, and WhatsApp Business API integration for order confirmations and promotional sharing.

As a Distributor user, I want to be able to use backend API for primary order placement (distributor to manufacturer) and secondary order placement (distributor to retailer). Build FastAPI endpoints for order lifecycle management, status updates, and FIFO/FEFO inventory allocation on order fulfillment.

As a Salesman user, I want to be able to use backend API for order capture on behalf of retailers and offline sync support. Build FastAPI endpoints for order submission with conflict resolution, offline queue processing, sync status tracking, and visit log persistence.

As a Distributor user, I want to be able to use backend API for GST-compliant invoice generation, scheme discount application at billing time, and payment record management. Build FastAPI endpoints for invoice retrieval, billing history, and GST breakup calculations.