# Phase 6: Products (Display & List)

**Status:** ⏳ Todo
**Progress:** 0/10 tasks (0%)
**Started:** -
**Completed:** -
**Assigned to:** -

---

## Overview

Implement product display functionality: API endpoints for fetching products, product list/detail pages, and UI components for displaying Makerspace annual passes.

**Goal:** Users can browse and view Makerspace-Jahreskarten products.

---

## Dependencies

- ✅ Phase 1: Foundation must be completed
- ✅ Phase 2: Database must be completed (products table needed)
- ⚠️ **Optional:** Phase 3: Authentication (for future protected features)

---

## Tasks

### API Endpoints

- [ ] Create /api/products/index.get.ts endpoint
  - Query products from DB (Drizzle)
  - Filter by: active=true, category (optional)
  - Sort by: name, price
  - Return: Array of products
  - Example:
    ```typescript
    export default defineEventHandler(async (event) => {
      const { category } = getQuery(event)
      const products = await db.query.products.findMany({
        where: and(
          eq(products.active, true),
          category ? eq(products.category, category) : undefined
        ),
        orderBy: products.name,
      })
      return products
    })
    ```

- [ ] Create /api/products/[id].get.ts endpoint
  - Validate ID (Zod: UUID)
  - Query product by ID
  - Return 404 if not found
  - Return: Product object
  - See: [CLAUDE.md: API Route Example](../CLAUDE.md#api-route-example)

### UI Components

- [ ] Create ProductCard component
  - File: `components/Product/ProductCard.vue`
  - Props: product (object)
  - Display: Image, name, price, short description
  - Button: "In den Warenkorb" (Add to Cart)
  - Styling: shadcn-nuxt Card component + Tailwind
  - Mobile-first design

- [ ] Create ProductList component
  - File: `components/Product/ProductList.vue`
  - Props: products (array)
  - Grid layout: 1 col (mobile), 2 cols (tablet), 3 cols (desktop)
  - Uses: ProductCard for each product
  - Empty state: "Keine Produkte verfügbar"

- [ ] Create ProductDetail component
  - File: `components/Product/ProductDetail.vue`
  - Props: product (object)
  - Display: Large image, full description, price, stock status
  - Button: "In den Warenkorb"
  - Breadcrumb: Home > Produkte > [Product Name]

### Pages

- [ ] Create products index page
  - File: `pages/produkte/index.vue` (German route)
  - Fetches products from API
  - Uses: ProductList component
  - Title: "Makerspace-Jahreskarten"
  - SEO meta tags

- [ ] Create ProductDetail page
  - File: `pages/produkte/[id].vue`
  - Fetches product by ID from API
  - Uses: ProductDetail component
  - 404 page if product not found
  - SEO meta tags with product data

### Asset Handling

- [ ] Add product images handling
  - Create `/public/images/products/` folder
  - Add placeholder image for products without image
  - Document image requirements (size, format)
  - Optimize images (use Nuxt Image module if needed)

### Testing

- [ ] Test product display
  - Seed database with sample products (manual or seed script)
  - Visit /produkte page
  - Verify products display correctly
  - Verify responsive design (mobile, tablet, desktop)
  - Click product to view detail page
  - Verify product detail displays correctly

- [ ] Optimize product queries
  - Add indexes to products table if needed (active, category)
  - Test query performance with 100+ products
  - Add pagination if needed (future enhancement)

- [ ] Document product schema
  - Document product data structure in code comments
  - Document how images are stored/referenced
  - Document category values (e.g., "makerspace-jahreskarte")

---

## Acceptance Criteria

- [x] /api/products endpoint returns all active products
- [x] /api/products/[id] endpoint returns product by ID
- [x] ProductCard component displays product correctly
- [x] ProductList component shows products in grid layout
- [x] ProductDetail component shows full product info
- [x] /produkte page lists all products
- [x] /produkte/[id] page shows product detail
- [x] Images display correctly (or placeholder if missing)
- [x] Responsive design works on mobile/tablet/desktop
- [x] Product data structure is documented

---

## Notes

- **MVP Scope:** Only Makerspace-Jahreskarten products for now
- **Images:** Can use placeholders initially, real images added later
- **Pagination:** Not needed for MVP (< 10 products expected)
- **Filters:** Category filter can be added later if needed

---

## Blockers

- None currently (can use mock products if NAV ERP sync not ready)

---

## Related Documentation

- [docs/PRD.md: F-004](../docs/PRD.md#f-004-produktanzeige)
- [docs/ARCHITECTURE.md: Products Table](../docs/ARCHITECTURE.md#products)
- [CLAUDE.md: API Route Example](../CLAUDE.md#api-route-example)