Implement shopping cart functionality from cart.png

[yortch]

Summary

Implement shopping cart functionality in the frontend based on the design in docs/design/cart.png.

This phase is explicitly local-state only and should not introduce backend cart APIs.

Scope

• Add localStorage-backed cart state and actions (add/update/remove/clear/apply coupon).
• Integrate Add to Cart in Products page.
• Add Cart route and Checkout placeholder route.
• Build full cart UI from mockup with:
  • item list (image, product name, unit price, quantity, line total, remove)
  • coupon input + apply action
  • update cart action
  • order summary panel
• Add cart item count badge in top navigation.
• Keep dark/light mode support and responsive behavior.

Decisions

• Cart persistence: local-only (localStorage).
• Checkout behavior: navigate to placeholder page only.
• Pricing rules: fixed 5% discount and fixed $10 shipping.
• Backend checkout/order submission: out of scope for this issue.

Implementation Tasks

1. Add shared types:

• frontend/src/types/product.ts
• frontend/src/types/cart.ts

2. Add cart pricing helpers:

• frontend/src/utils/cartPricing.ts

3. Add cart context:

• frontend/src/context/CartContext.tsx

4. Wire app providers/routes:

• update frontend/src/App.tsx with CartProvider
• add routes /cart and /checkout

5. Integrate product add-to-cart:

• update frontend/src/components/entity/product/Products.tsx
• replace TODO alert flow with cart context actions

6. Add cart and checkout components:

• frontend/src/components/entity/cart/Cart.tsx
• frontend/src/components/entity/cart/CheckoutPlaceholder.tsx

7. Update navigation:

• update frontend/src/components/Navigation.tsx
• add cart link and live item count badge

Acceptance Criteria

• Adding quantity on Products and clicking Add to Cart persists items to cart.
• Cart page displays all selected items with editable quantities and remove action.
• Coupon apply and update cart actions work without errors.
• Summary calculations use:
  • Discount = subtotal * 0.05
  • Shipping = $10
  • Total = subtotal - discount + shipping
• Proceed To Checkout navigates to /checkout placeholder.
• Empty cart shows clear empty-state CTA back to products.
• Works on desktop + mobile and in dark/light themes.

Validation

• npm run build --workspace=frontend
• npm run lint
• Manual sanity checks:
  • Products search and quantity controls still work.
  • Login/admin navigation behavior remains unaffected.