copper-website

As an admin, I want to use the Orders page to view and manage all customer orders and update their fulfillment status so I can ensure timely delivery. Implement the Orders page based on the existing JSX design (v3) including: TopBar, Sidebar (Orders active), PageHeader, orders stats bar, orders table (order ID, customer name, products, total in INR, status badge, date, actions), status filter tabs (All, Pending, Processing, Shipped, Delivered, Cancelled), order detail drawer/modal with status update controls, and pagination. Also supports customer Order Tracking view. Links from: Dashboard, Checkout.

As an admin, I want to use the backend API for supplier management and inventory syncing so the product catalog stays automatically updated. Implement FastAPI endpoints: GET /suppliers, POST /suppliers, PUT /suppliers/{id}, DELETE /suppliers/{id}, POST /suppliers/{id}/sync (trigger sync), GET /suppliers/sync-status. Include supplier API key storage (encrypted), sync frequency scheduling, sync log tracking, and product stock update logic on successful sync. Use MySQL with Alembic migrations.

As a user, I want to use the Results page to view product search listings so I can find specific products by keyword. Implement the Results page based on the existing JSX design (v3) including: NavBar, search results header with query and count, filter sidebar (category, price range, stock status), product listing grid with product cards (image, name, price in INR, add to cart button), sort controls, and pagination. Links from: Home (search). Links to: Product page (product click), Cart (add to cart).

As a user, I want to use the Product detail page to view full product information so I can make an informed purchase decision. Implement the Product page based on the existing JSX design (v2) including: NavBar, product image gallery, product name, price in INR (₹), description, stock status badge, quantity selector, Add to Cart CTA button, supplier info, and related products section. Links from: Results, Home. Links to: Cart page.

As a user, I want to use the backend API for product listings so I can browse, search, and view product details. Implement FastAPI endpoints: GET /products (list with pagination, search by keyword, filter by category/stock), GET /products/{id} (product detail), POST /products (admin create), PUT /products/{id} (admin update), DELETE /products/{id} (admin delete). Include INR pricing, stock quantity, product images, category, and supplier fields. Use MySQL with Alembic migration for the products table.

As a user, I want to use the Cart page to review my selected products and order before proceeding to checkout. Implement the Cart page based on the existing JSX design (v3) including: NavBar, cart items list (product image, name, quantity stepper, price in INR, remove button), order summary panel (subtotal, shipping, taxes, total in INR), empty cart state with CTA back to Home, and Proceed to Checkout button. Links from: Product, Results. Links to: Checkout page.

As a user, I want to use the Checkout page to enter my delivery details and make a payment so I can complete my purchase. Implement the Checkout page based on the existing JSX design (v3) including: NavBar, multi-step checkout flow (Address → Payment → Confirmation), shipping address form (India-specific fields, pincode lookup), payment method selector (UPI, card, COD), order summary sidebar in INR, place order CTA, and post-order confirmation screen with order ID. Links from: Cart. Links to: Orders (track order).

As a user, I want to use the backend API for cart and orders so I can add products, place orders, and track their status. Implement FastAPI endpoints: POST /cart/add, GET /cart, DELETE /cart/{item_id}, POST /orders (place order), GET /orders (list user orders), GET /orders/{id} (order detail + tracking), PUT /orders/{id}/status (admin update status). Include INR amounts, IST timestamps, order item details, and shipping address (India-specific). Use MySQL with Alembic migrations.

As a user, I want to interact with an AI-powered customer support chatbot on the website so I can get instant help with product queries, order status, and general support. Integrate GPT 5.2 into the FastAPI backend as a customer support chatbot service: POST /chatbot/message endpoint accepting user messages and returning AI responses. Implement context-aware responses for product inquiries, order tracking, and FAQs. Add a chat widget UI component (floating button, chat window with message history) to the frontend that calls the chatbot API. Store conversation logs in the database.