frontend/TODO.md

Coffee Shop Frontend - TODO

Completed Optimizations

A. Dead Code Removed

• lib/constants.ts - Removed unused NAV_LINKS export
• lib/types.ts - Removed unused NavLink interface
• components/Navbar.tsx - Removed trivial handleClick wrapper; inlined onCategoryChange call
• components/Navbar.tsx - Removed unused Link import

B. Bugs / Inaccuracies Fixed

• layouts/header.tsx - Fixed JSDoc: 3-column -> 2-column layout (no center section exists)
• app/page.tsx - Added available !== false filter to product list
• app/page.tsx - Fixed setState-in-effect lint error: moved initial sidebar state to lazy useState initializer
• next.config.ts - Added explanatory JSDoc comment

C. Documentation Updated

• README.md - Fixed file structure tree, removed SCSS, fixed dark mode note, updated tech table
• components/COMPONENTS.md - Fixed CartProduct styling (was outdated w-64/text-red-500/bg-blue-600); added Navbar, Header, Footer sections

D. New Documentation Created

• WORKFLOW.md - Architecture, data flow, design token system, how-to guides, dev workflow

E. Mini-test Results

• npm run lint - PASSED (0 errors, 0 warnings)
• npm run build - PASSED (Compiled successfully, TypeScript clean, static pages generated)

---

Pending Features (Future Work)

Cart & Ordering

• Implement add-to-cart logic (onBuy callback in CartProduct)
• Cart sidebar or modal with item list and total
• Order submission flow
• Payment page

Backend Integration

• Replace MOCK_PRODUCTS with real API calls (lib/api.ts)
• Replace MOCK_USERS with real authentication
• Product images: replace placeholder with real images in public/imgs/products/

Manager Page

• Create app/manager/page.tsx
• Menu management (add/edit/delete products)
• Order tracking dashboard

UX Improvements

• Dark mode toggle (CSS variables already prepared in globals.css)
• Loading skeleton for product grid
• Toast notifications for cart actions
• Product detail modal/page