Implement shopping cart with persistent storage and checkout integration

[Copilot]

Adds shopping cart functionality to enable product selection, quantity management, and order placement through a streamlined checkout flow.

Implementation

Cart State Management

• React Context + localStorage for client-side persistence
• Error handling for corrupted storage data with fallback to empty cart
• Auto-calculated totals with discount support

Components Added

• CartContext.tsx - Global cart state provider with add/update/remove/clear operations
• Cart.tsx - Cart page with quantity controls, line item management, and checkout
• Cart badge in navigation showing live item count

Integration Points

• Products page: "Add to Cart" integration with existing quantity controls
• Checkout: Creates orders via /api/orders and /api/order-details endpoints
• Post-checkout: Clears cart and redirects to products

Data Flow

// Cart persists across sessions via localStorage
const cartItem = {
  productId: number,
  name: string,
  price: number,
  quantity: number,
  discount?: number
}

// Checkout creates order + order details in sequence
Order { branchId: 1, status: 'pending' }
  → OrderDetail[] { orderId, productId, quantity, unitPrice }

UI

Products with Cart Badge

Cart with Checkout

Notes

• Demo limitation: All orders use branchId: 1 (extracted as DEFAULT_BRANCH_ID constant)
• Checkout success uses browser alert() - consider replacing with toast notification
• No server-side cart validation (client-side quantities trusted)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature] Shopping Cart Feature</issue_title>
<issue_description>## Summary
Implement a shopping cart feature allowing users to add products, manage quantities, and proceed to checkout for order placement.

Motivation

The supply chain management application needs a robust shopping cart to streamline the order creation process. This will enhance user experience by allowing temporary product selection, quantity management, and order review before final submission.

Proposed Solution

• Cart State Management: Track selected products with quantities in frontend state or session
• API Endpoints: Create cart operations (add, update quantity, remove items)
• UI Components: Shopping cart page with product list, quantity controls, and total calculation
• Checkout Flow: Integrate with existing order creation API
• Persistence: Option to save cart for later or proceed directly to order

Acceptance Criteria

• Cart state management implemented in frontend (context or local storage)
• Shopping cart page displays added products with quantities and prices
• Users can add/remove items and adjust quantities
• Cart calculates total price and item counts
• Checkout flow creates order from cart items
• Cart clears after successful order placement
• Cart persists across page navigation (session or local storage)
• UI is responsive and follows existing Tailwind design system

Alternatives Considered

• Direct order creation without cart: Less flexible, doesn't allow review/adjustment
• Backend session-based cart: More complex, requires server state management

Additional Context

• Related to existing order management system
• Should integrate with product and pricing data already in the system
• Consider mobile responsiveness for shopping flow

Subtasks

• Design cart data model and state structure
• Create API endpoints for cart operations
• Build cart page component
• Implement checkout flow integration
• Add tests for cart functionality
• Update API documentation</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Feature] Shopping Cart Feature #32

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.