docs: update and create comprehensive markdown documentation

- Updated README.md with current features (Auth, Cart, Feed pages)
- Updated COMPONENTS.md with CartFab and all context providers (Auth, Cart, Menu)
- Created APP.md: detailed documentation of all routes and pages
- Created LIB.md: documentation of types, constants, and contexts
- Created LAYOUTS.md: header and footer component documentation
- Updated TODO.md: reflects completed implementations and future work

This provides agents with comprehensive documentation to understand the project structure and implementation details.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -8,17 +8,46 @@ Dự án Frontend cho hệ thống đặt món cà phê, xây dựng bằng Next
 
 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 - /)
-Dành cho khách hàng:
-- Duyệt thực đơn theo danh mục (sidebar collapsible)
-- Tìm kiếm món theo tên / mô tả
-- Xem card sản phẩm với giá và nút Mua
-- Lọc tự động theo trạng thái available
+### Tính Năng Hiện Tại
 
-### Trang Quản Lý (Manager Page - chưa triển khai)
-Dành cho chủ quán / nhân viên:
-- Quản lý thực đơn (thêm, sửa, xóa món)
-- Theo dõi và xử lý đơn hàng
+#### 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:
+- 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"
+- Lọc tự động theo trạng thái available
+- Mobile menu: scrollable category tabs (< md)
+
+#### 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
+
+#### 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
+
+#### 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
 
 ---
 
@@ -56,23 +85,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
@@ -100,9 +151,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