feat: Implement Shopping Cart with Item Management and Coupon Support

[yortch]

Overview

This PR implements a complete shopping cart experience for the OctoCAT Supply demo application, including cart state management, a cart page with full item management, and navigation integration.

Features Implemented

🛒 Cart State Management (CartContext.tsx)

• Global cart state provider with React Context
• Methods: addToCart, removeFromCart, updateQuantity, clearCart
• Computed values: totalItems, subtotal (with product discount support)
• Persistent cart state across navigation

📄 Cart Page (Cart.tsx)

• Item Table: Displays S.No, product image, name, unit price, quantity, total, and remove button
• Quantity Management: Direct inline editing with number input
• Discount Display: Shows original price with strikethrough when discounts apply
• Coupon System:
  • OCTOCAT10 - 10% off
  • MEOW20 - 20% off
  • COPILOT5 - 5% off
• Order Summary: Subtotal, discount amount, $10 flat shipping, grand total
• Empty State: Friendly message with link back to products
• Dark/Light Mode: Full theme support throughout

🧭 Navigation Integration (Navigation.tsx)

• Shopping cart icon in header
• Badge showing total item count (hidden when 0)
• Links to /cart page

🛍️ Products Integration (Products.tsx)

• Replaced alert() stub with real cart functionality
• Adds items to cart with proper product details
• Resets quantity counter after adding to cart

📚 Documentation (.github/copilot-instructions.md)

• Comprehensive codebase guide for AI agents
• Architecture overview, critical patterns, conventions
• Integration points and common development tasks

Technical Details

• TypeScript with strict typing throughout
• React Context for state management (no external dependencies)
• Tailwind CSS for responsive, theme-aware styling
• react-router-dom for cart page routing
• Follows existing patterns from ThemeContext and AuthContext

Testing

• ✅ Frontend builds successfully with no TypeScript errors
• ✅ Dark/light mode works throughout cart experience
• ✅ Cart badge updates correctly
• ✅ Discount calculations apply properly
• ✅ Coupon codes validate and calculate correctly

Screenshots

The implementation matches the design provided in the mockup with:

• Clean table layout for cart items
• Order summary sidebar
• Coupon input and validation
• Responsive design for mobile/tablet/desktop

---

Demo scenario ready: This implementation supports the Copilot demo scenario of building a cart page from an image mockup with natural language prompts.