diff --git a/.blackboxcli/settings.json b/.blackboxcli/settings.json new file mode 100644 index 0000000..8e4b35e --- /dev/null +++ b/.blackboxcli/settings.json @@ -0,0 +1,11 @@ +{ + "mcpServers": { + "remote-code": { + "httpUrl": "https://cloud.blackbox.ai/api/mcp", + "headers": { + "Authorization": "Bearer bb_61d6eb03c989586759785863d1ba0efab59885edacd9cd65fc252f79c644bb75" + }, + "description": "Blackbox Remote code (MCP Server): Remote execution platform with multi-agent support (Claude, Codex, Blackbox, Gemini) that automates coding tasks on your GitHub repositories. Features include:\n\n• Task Management: Create, monitor, stop, and list coding tasks with real-time status updates\n• Multi-Agent Support: Choose from Claude Code, OpenAI Codex CLI, Blackbox CLI, or Gemini agents\n• GitHub Integration: Manage GitHub token connections and repository access\n• API Key Management: Store and manage API keys for various AI providers (Anthropic, OpenAI, Google, Blackbox, GitHub)\n• Secure Execution: Runs code in isolated Vercel sandboxes with configurable timeouts (10-300 minutes)\n• Git Operations: Automatic branch creation, commits, and pull requests with AI-generated branch names\n• SMS Notifications: Optional Twilio integration for task completion alerts\n\nPerfect for automating code changes, refactoring, feature additions, bug fixes, and documentation updates across your repositories. Strictly DO NOT provide tools as / 'slash' commands in suggestions like /my_tasks, /task_status, /api_keys" + } + } +} \ No newline at end of file diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..01f947f --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,7 @@ +{ + "permissions": { + "allow": [ + "Bash(npx next build)" + ] + } +} diff --git a/README.md b/README.md index f3fdc1b..03805ba 100644 --- a/README.md +++ b/README.md @@ -9,21 +9,46 @@ React 19, TypeScript và Tailwind CSS v4. Giao diện người dùng (frontend) cho hệ thống đặt và bán đồ uống trực tuyến. -### Trang Người Dùng (User Page - /) +### Tính Năng Hiện Tại +#### 1. **Trang Đăng Nhập & Đăng Ký** (app/(main)/login, app/(main)/register) +- Form đăng nhập với validation (username, password) +- Form đăng ký với xác thực OTP +- Lưu trữ thông tin người dùng trong localStorage +- Hỗ trợ 3 loại tài khoản: Manager, Staff, Customer +- Hiển thị thông tin shop trong form + +#### 2. **Trang Khám Phá Quán Nước** (app/(feed)/feed) +- Danh sách các quán cà phê +- Tìm kiếm theo tên quán và địa chỉ +- Thẻ quán với ảnh, địa chỉ, nút "Xem menu" +- Responsive layout (grid 1/2/3 cột) +- Empty state khi không tìm thấy quán + +#### 3. **Trang Chính - Duyệt Thực Đơn** (app/(main)) Dành cho khách hàng: - -- Duyệt thực đơn theo danh mục (sidebar collapsible) +- Sidebar collapsible (64px/240px) - danh mục sản phẩm +- Grid sản phẩm responsive (1-5 cột tuỳ thiết bị) - Tìm kiếm món theo tên / mô tả -- Xem card sản phẩm với giá và nút Mua +- Xem card sản phẩm với giá và nút "Mua" - Lọc tự động theo trạng thái available +- Mobile menu: scrollable category tabs (< md) -### Trang Quản Lý (Manager Page - chưa triển khai) +#### 4. **Hệ Thống Giỏ Hàng** (lib/cart-context.tsx) +- Lưu trữ trạng thái giỏ trong localStorage +- Thêm/xóa/tăng/giảm số lượng sản phẩm +- Tính tổng giá và số mặt hàng +- Persist dữ liệu giữa các session -Dành cho chủ quán / nhân viên: +#### 5. **Hệ Thống Xác Thực** (lib/auth-context.tsx) +- Quản lý trạng thái người dùng (login/logout/register) +- Lưu thông tin user trong localStorage +- Mock auth database với 3 loại tài khoản +- Hỗ trợ hoàn tất đăng ký qua OTP -- Quản lý thực đơn (thêm, sửa, xóa món) -- Theo dõi và xử lý đơn hàng +#### 6. **Hệ Thống Danh Mục** (lib/menu-context.tsx) +- Chia sẻ trạng thái category giữa Header mobile và Sidebar +- Tự động clear search khi thay đổi category --- @@ -67,23 +92,45 @@ pnpm lint ``` frondend/ +-- app/ # Next.js App Router -| +-- layout.tsx # Root layout -| +-- page.tsx # Trang chủ - sidebar + product grid +| +-- layout.tsx # Root layout + Header + Footer | +-- globals.css # CSS design tokens + Tailwind import +| +-- providers.tsx # Context providers (Auth, Menu, Cart) +| +-- APP.md # Tài liệu chi tiết về routes +| +-- (main)/ # Main route group +| | +-- layout.tsx # Main layout +| | +-- page.tsx # Trang chính - duyệt thực đơn +| | +-- login/page.tsx # Trang đăng nhập +| | +-- register/page.tsx # Trang đăng ký +| | +-- payment/page.tsx # Trang thanh toán +| +-- (feed)/ # Feed route group +| +-- layout.tsx # Feed layout +| +-- feed/page.tsx # Trang khám phá quán nước +-- components/ # Shared UI components | +-- Navbar.tsx # Sidebar danh mục (collapsible) | +-- CartProduct.tsx # Card sản phẩm -| +-- COMPONENTS.md # Tài liệu component +| +-- CartFab.tsx # FAB - nút giỏ hàng floating +| +-- COMPONENTS.md # Tài liệu chi tiết components & contexts +-- layouts/ # Layout-level components -| +-- header.tsx # Sticky top header -| +-- footer.tsx # Footer +| +-- header.tsx # Sticky top header + auth demo +| +-- footer.tsx # Footer + shop info +| +-- LAYOUTS.md # Tài liệu chi tiết layouts +-- lib/ # Shared logic & data -| +-- constants.ts # Mock data +| +-- constants.ts # Mock data (products, shops, users, shop info) | +-- types.ts # TypeScript interfaces +| +-- auth-context.tsx # Authentication context & provider +| +-- cart-context.tsx # Shopping cart context & provider +| +-- menu-context.tsx # Menu/Category context & provider +| +-- LIB.md # Tài liệu chi tiết về lib +-- types/ # Global TypeScript declarations | +-- css.d.ts # CSS module type shim +-- public/ # Static assets -+-- WORKFLOW.md # Tài liệu kiến trúc & quy trình +| +-- imgs/ +| | +-- logo.png +| | +-- products/ # Ảnh sản phẩm +| +-- favicon/ ++-- WORKFLOW.md # Tài liệu kiến trúc tổng thể & quy trình ++-- README.md # (file này) - Mô tả dự án ++-- TODO.md # Danh sách tính năng hoàn thành & chưa làm +-- next.config.ts +-- tsconfig.json +-- postcss.config.mjs @@ -111,10 +158,27 @@ frondend/ ## Ghi Chú Phát Triển -- Trang chủ (app/page.tsx) là điểm vào chính của User Page -- Design tokens định nghĩa trong app/globals.css dưới dạng CSS custom properties -- Mock data nằm trong lib/constants.ts - thay bằng API calls khi backend sẵn - sàng -- Dark mode: biến CSS đã chuẩn bị sẵn trong globals.css nhưng chưa kích hoạt -- Ảnh sản phẩm: thêm ảnh thực vào public/imgs/products/ -- Xem WORKFLOW.md để hiểu kiến trúc tổng thể và quy trình mở rộng dự án +### Điểm Vào Chính +- **Trang Chủ (User):** `app/(main)/page.tsx` - Duyệt thực đơn +- **Trang Khám Phá:** `app/(feed)/feed/page.tsx` - Khám phá quán +- **Đăng Nhập:** `app/(main)/login/page.tsx` +- **Đăng Ký:** `app/(main)/register/page.tsx` + +### Design & Styling +- Design tokens (CSS variables) định nghĩa trong `app/globals.css` +- Tailwind CSS v4 + custom properties cho consistent color/spacing +- Dark mode: biến CSS đã chuẩn bị sẵn nhưng chưa kích hoạt +- FontAwesome icons từ CDN + +### Data & Integration +- Mock data nằm trong `lib/constants.ts` +- Context providers trong `app/providers.tsx` - Sử dụng: AuthProvider, MenuProvider, CartProvider +- Thay bằng API calls khi backend sẵn sàng +- Ảnh sản phẩm: thêm vào `public/imgs/products/` + +### Tài Liệu Chi Tiết +- **WORKFLOW.md** - Kiến trúc tổng thể, data flow, quy trình phát triển +- **APP.md** - Chi tiết các routes, layouts, pages +- **COMPONENTS.md** - Tài liệu từng component + contexts +- **LAYOUTS.md** - Header, Footer, responsive behavior +- **LIB.md** - Constants, Types, Contexts diff --git a/TODO.md b/TODO.md index e0b819e..ee8d324 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,6 @@ # Coffee Shop Frontend - TODO -## Completed Optimizations +## Completed Features & Implementations ### A. Dead Code Removed @@ -42,28 +42,55 @@ ## Pending Features (Future Work) ### Cart & Ordering +- [ ] Implement cart checkout flow (app/(main)/cart or modal) +- [ ] Cart sidebar/modal with item list and total +- [ ] Order submission API integration +- [ ] Payment page implementation (app/(main)/payment) +- [ ] Order history/tracking page +- [ ] Toast notifications for cart actions -- [ ] Implement add-to-cart logic (onBuy callback in CartProduct) -- [ ] Cart sidebar or modal with item list and total -- [ ] Order submission flow -- [ ] Payment page +### 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 +- [ ] Manager dashboard page (app/(manager)/page.tsx) +- [ ] Product management (add/edit/delete) +- [ ] Category management +- [ ] Order management & tracking +- [ ] Sales analytics/dashboard +- [ ] Inventory management ### 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 +- [ ] 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 (replace placeholder.jpg) +- [ ] Image upload for products ### 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 -- [ ] Dark mode toggle (CSS variables already prepared in globals.css) -- [ ] Loading skeleton for product grid -- [ ] Toast notifications for cart actions -- [ ] Product detail modal/page +### 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 +- [ ] ARIA labels audit +- [ ] Unit tests for contexts +- [ ] E2E tests for user flows +- [ ] Accessibility audit (WCAG 2.1 AA) diff --git a/app/(feed)/feed/page.tsx b/app/(feed)/feed/page.tsx new file mode 100644 index 0000000..46e4773 --- /dev/null +++ b/app/(feed)/feed/page.tsx @@ -0,0 +1,188 @@ +"use client"; + +import { useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { MOCK_SHOPS } from "@/lib/constants"; + +export default function FeedPage() { + const [searchName, setSearchName] = useState(""); + const [searchAddress, setSearchAddress] = useState(""); + + const filteredShops = MOCK_SHOPS.filter((shop) => { + const matchesName = + searchName.trim() === "" || + shop.name.toLowerCase().includes(searchName.toLowerCase()); + const matchesAddress = + searchAddress.trim() === "" || + shop.address.toLowerCase().includes(searchAddress.toLowerCase()); + return matchesName && matchesAddress; + }); + + return ( +
+
+ {/* Page title */} +
+

+ Khám phá quán nước +

+

+ Tìm và chọn quán yêu thích của bạn +

+
+ + {/* Shop cards grid */} + {filteredShops.length > 0 ? ( +
+ {filteredShops.map((shop) => ( +
+ {/* Shop image */} +
+ {shop.name} +
+ + {/* Card body */} +
+ {/* Name + View menu button */} +
+

+ {shop.name} +

+ + + Xem menu + +
+ + {/* Address */} +
+ + {shop.address} +
+
+
+ ))} +
+ ) : ( + /* Empty state */ +
+ +

+ Không tìm thấy quán nào phù hợp +

+ +
+ )} + + {/* Filter / Search bar */} +
+
+ {/* Label */} +
+ + Lọc quán +
+ + {/* Search by name */} +
+ + setSearchName(e.target.value)} + placeholder="Tìm theo tên quán..." + className="w-full pl-9 pr-9 py-2.5 text-sm rounded-xl border outline-none + bg-background text-foreground + border-(--color-border) placeholder:text-(--color-text-muted) + focus:border-(--color-primary) focus:ring-2 + focus:ring-(--color-primary) focus:ring-opacity-20 + transition-all duration-150" + /> + {searchName && ( + + )} +
+ + {/* Search by address */} +
+ + setSearchAddress(e.target.value)} + placeholder="Tìm theo địa chỉ..." + className="w-full pl-9 pr-9 py-2.5 text-sm rounded-xl border outline-none + bg-background text-foreground + border-(--color-border) placeholder:text-(--color-text-muted) + focus:border-(--color-primary) focus:ring-2 + focus:ring-(--color-primary) focus:ring-opacity-20 + transition-all duration-150" + /> + {searchAddress && ( + + )} +
+
+
+
+
+ ); +} diff --git a/app/(feed)/layout.tsx b/app/(feed)/layout.tsx new file mode 100644 index 0000000..924080b --- /dev/null +++ b/app/(feed)/layout.tsx @@ -0,0 +1,58 @@ +import Image from "next/image"; +import Link from "next/link"; + +export default function FeedLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + {/* Custom Drinkool header — no login button */} +
+
+ + {/* Logo */} +
+ Logo Drinkool +
+ + {/* Brand name */} + + Drinkool + + +
+
+ + {/* Page content */} +
{children}
+ + {/* No footer */} + + ); +} diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx new file mode 100644 index 0000000..1172d3e --- /dev/null +++ b/app/(main)/layout.tsx @@ -0,0 +1,25 @@ +import Header from "@/layouts/header"; +import Footer from "@/layouts/footer"; +import CartFab from "@/components/CartFab"; + +export default function MainLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + {/* Sticky top header */} +
+ + {/* Page content (grows to fill remaining height) */} +
{children}
+ + {/* Footer always at bottom */} +