Thanh Quy - wolf
dae381d182
- Updated ATOMS.md to include new LoginInput and ErrorMessageLogin components with detailed usage examples and props descriptions. - Adjusted the status and created date in ATOMS.md. - Refined the layout and styling descriptions in LAYOUTS.md for Header and Footer components, including responsive behavior and accessibility improvements. - Added new sections for WiFi card and social links in the Footer documentation. - Improved code formatting and consistency across various components in the codebase.
5.5 KiB
5.5 KiB
Coffee Shop Frontend - TODO
Last Updated: 2026-04-18
Completed Features & Implementations
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)
F. Cart & Payment (Completed)
- Cart checkout flow — cart context with addToCart, removeFromCart, setQuantity, clearCart
- Payment page implementation (
app/(main)/payment) - CashPaymentModal: cash input, change calculation, insufficient cash error
- QRPaymentModal: QR code generation via qrcode.react, 5-second countdown auto-confirm
- PaymentSuccessModal: success confirmation, auto-clears cart
G. Manager Dashboard — ~70% Complete (In Progress)
- Manager Dashboard page (
app/(manager)/manager/page.tsx) with auth guard - Products tab with CRUD (ProductModal)
- Image upload in ProductModal: file input, preview, "Đổi ảnh" button, remove button, dashed border drop zone
- Combos tab with CRUD (ComboModal)
- Categories tab with CRUD (CategoryModal)
- Delete confirmation dialogs for all entities
- Status toggle buttons (available/unavailable)
- Sidebar navigation with link to Analytics
H. Financial Analytics Dashboard (Completed)
- Analytics page (
app/(manager)/manager/analytics) - Summary cards: Revenue, Orders, Profit, Average Order Value (with period comparison)
- Period selector: Day / Week / Month / Year
- SVG charts: LineChart, BarChart, PieChart with hover tooltips
- Top 5 products table and sortable detail table
- Category filter
I. Staff Shift Schedule (Completed)
- Staff schedule module (
app/(staff)/staff/schedule) - Weekly calendar view
- Monthly calendar view
- Mobile shift view (list per day)
- ShiftCreateModal: create new shifts
- ShiftDetailModal: view shift details
- Department/role filtering
- Auth guard for staff/manager only
J. Accessibility Improvements (Completed)
- title attributes on icon buttons (tooltips for screen readers)
- ARIA roles on modals: role="dialog", aria-modal, aria-labelledby
- Semantic HTML: form labels with correct htmlFor
- Image alt text for product images
Pending Features (Future Work)
Cart & Ordering
- Cart sidebar/modal with item list and total (quick-access without going to payment page)
- Order submission API integration
- Order history/tracking page for customers
- Toast notifications for cart actions
Authentication & User Management
- Real backend authentication (replace MOCK_AUTH_DB)
- Real OTP delivery service (SMS integration)
- User profile page with edit capability
- Password reset/recovery flow
- Session management and token refresh
Manager Features (Remaining ~30%)
- Order management & tracking for manager
- Inventory management beyond available toggle (stock counts, low-stock alerts)
- Staff management tab in Manager Dashboard
- Shift approval workflow (manager approves staff shift requests)
Backend Integration
- Replace MOCK_PRODUCTS with API calls (GET /api/products)
- Replace MOCK_SHOPS with API calls (GET /api/shops)
- Replace MOCK_USERS with real authentication (POST /api/auth/login)
- Real product images hosted on server/CDN (replace public/imgs/products/)
- Real analytics data from backend (GET /api/analytics)
- Real shift/schedule data from backend
UX Improvements
- Dark mode toggle (CSS variables prepared, toggle UI needed)
- Loading skeletons for product grid
- Product detail modal/page with full description
- Wishlist/favorites feature
- Sort products (price, rating, etc.)
- Filter by price range
- Quantity selector in product card
- Related products suggestions
- Push notifications for order status updates
Performance & SEO
- Dynamic route generation for products (
app/(main)/product/[id]/page.tsx) - Dynamic route generation for shops (
app/(feed)/shop/[id]/page.tsx) - Meta tags and Open Graph for SEO
- Image optimization and lazy loading
- Code splitting and dynamic imports
Accessibility & Testing
- Keyboard navigation testing
- Full ARIA labels audit (WCAG 2.1 AA)
- Unit tests for contexts (auth, cart, menu, manager)
- E2E tests for user flows (checkout, login, manager CRUD)
- Accessibility audit tool (axe, Lighthouse)