🛒 Shopping Cart Feature Implementation

Overview

Implement a complete shopping cart system for the OctoCAT Supply Chain Management application, including cart page, navigation integration, and state management.

Requirements

Based on the provided cart page design mockup, we need to implement:

1. Cart Icon in Navigation Bar

• Add shopping cart icon to the navigation bar
• Display item count badge on cart icon
• Make cart icon clickable to navigate to cart page
• Add hover effects and animations

2. Cart State Management

• Create CartContext using React Context API
• Implement cart reducer with actions:
  • ADD_TO_CART
  • REMOVE_FROM_CART
  • UPDATE_QUANTITY
  • APPLY_COUPON
  • CLEAR_CART
  • SET_SHIPPING
• Add localStorage persistence for cart data
• Handle cart state across user sessions

3. Cart Page Components

• Create main Cart.tsx component with dark theme styling
• Implement cart items table with columns:
  • Serial Number
  • Product Image (thumbnail)
  • Product Name
  • Unit Price
  • Quantity controls (increment/decrement)
  • Total price
  • Remove item button
• Create order summary panel showing:
  • Subtotal
  • Discount (5% as shown in mockup)
  • Shipping cost
  • Grand total
• Implement coupon code input and validation
• Add "Update Cart" and "Proceed To Checkout" buttons

4. Product Integration

• Add "Add to Cart" functionality to existing Products page
• Implement quantity selectors for products
• Add cart feedback animations when items are added
• Handle product data flow to cart (images, names, prices)

5. Routing & Navigation

• Add /cart route to React Router configuration
• Implement proper navigation flow
• Add breadcrumb navigation for better UX

Technical Implementation Details

State Structure

interface CartItem {
  productId: number;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
  total: number;
}

interface CartState {
  items: CartItem[];
  subtotal: number;
  discount: number;
  shipping: number;
  grandTotal: number;
  itemCount: number;
  couponCode?: string;
}

Files to Create/Modify

• frontend/src/context/CartContext.tsx (new)
• frontend/src/components/Cart.tsx (new)
• frontend/src/components/CartItem.tsx (new)
• frontend/src/components/OrderSummary.tsx (new)
• frontend/src/components/Navigation.tsx (modify - add cart icon)
• frontend/src/components/entity/product/Products.tsx (modify - add cart functionality)
• frontend/src/App.tsx (modify - add cart route)

Design Requirements

• Follow existing dark theme as shown in mockup
• Use Tailwind CSS for consistent styling
• Implement responsive design for mobile/tablet
• Match the green accent colors used throughout the app
• Add smooth animations and transitions

Acceptance Criteria

• Cart icon appears in navigation with item count
• Users can add products to cart from Products page
• Cart page displays all items with proper formatting
• Users can modify quantities and remove items
• Coupon system works with discount calculation
• Order summary calculates totals correctly
• Cart state persists across browser sessions
• Responsive design works on all device sizes
• All interactions have appropriate loading/feedback states

Priority

High - Core e-commerce functionality

Notes

• Design mockup shows 3 solar panel products as example items
• Current discount shown is 5% ($13.35 on $267 subtotal)
• Shipping cost is $10 in the example
• Green "Proceed To Checkout" button should be prominent
• Dark theme with consistent styling to match existing app

Definition of Done

• All acceptance criteria met
• Code reviewed and approved
• Components tested (unit tests)
• User flow tested end-to-end
• Documentation updated
• Responsive design verified
• Accessibility requirements met