-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
-
-
+ {/* ── Sidebar ── */}
+ setIsSidebarOpen((prev) => !prev)}
+ activeCategory={activeCategory}
+ onCategoryChange={setActiveCategory}
+ />
+
+ {/* ── Main content ── */}
+
+ {/* ── Section heading + search bar ── */}
+
);
diff --git a/app/payment/page.tsx b/app/payment/page.tsx
new file mode 100644
index 0000000..5316216
--- /dev/null
+++ b/app/payment/page.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { useCart } from "@/lib/cart-context";
+import Link from "next/link";
+
+const formatPrice = (value: number) =>
+ value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });
+
+export default function PaymentPage() {
+ const {
+ items,
+ totalPrice,
+ increaseQty,
+ decreaseQty,
+ removeFromCart,
+ setQuantity,
+ } = useCart();
+
+ return (
+
+ {/* Title + count */}
+
+
+ {/* ── Mobile category menu — visible only on < md, below search, above products ── */}
+
+
+
+ {/* Search input */}
+ + {activeCategoryLabel} +
++ {filteredProducts.length} món +
+
+
+ setSearchQuery(e.target.value)}
+ placeholder="Tìm kiếm món..."
+ className="bg-card text-foreground border-border placeholder:text-muted-foreground focus:border-primary focus:ring-primary focus:ring-opacity-20 w-full rounded-xl border py-2 pr-9 pl-9 text-sm transition-all duration-150 outline-none focus:ring-2"
/>
- Deploy Now
-
-
- Documentation
-
+ {/* Clear button */}
+ {searchQuery && (
+
+ )}
+
+
+
+ {/* ── Product grid ── */}
+ {filteredProducts.length > 0 ? (
+
+ {MENU_CATEGORIES.map((cat) => {
+ const isActive = activeCategory === cat.id;
+ return (
+
+ );
+ })}
+
+
+ {filteredProducts.map((product) => (
+ addToCart(product)}
+ />
+ ))}
+
+ ) : (
+ /* Empty state */
+
+
+
+ )}
+ {searchQuery + ? `Không tìm thấy món nào cho "${searchQuery}"` + : "Chưa có món trong danh mục này"} +
+ {searchQuery && ( + + )} +
+
+ );
+}
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..e700781
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { AuthProvider } from "@/lib/auth-context";
+import { CartProvider } from "@/lib/cart-context";
+import { MenuProvider } from "@/lib/menu-context";
+
+/**
+ * Client-side providers wrapper.
+ * Placed here so the server-only app/layout.tsx can wrap its children
+ * with client context providers without becoming a client component itself.
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {items.length === 0 ? (
+ + Trang thanh toán +
+
+ Chưa có sản phẩm nào trong giỏ hàng.
+
+ ) : (
+
+
+
+
+
+ )}
+ | Tên sản phẩm | +Giá tiền | +Mô tả | +Số lượng | ++ Xóa + | +
|---|---|---|---|---|
| + {item.name} + | ++ {formatPrice(item.price)} + | +
+ {item.description} + |
+
+
+
+
+ setQuantity(item.id, Number(e.target.value))
+ }
+ className="h-8 w-16 rounded-lg border border-(--color-border) bg-transparent text-center"
+ title="Nhập số lượng"
+ />
+
+
+ |
+ + + | +
+ {/* Register Form Card */}
+
+ );
+}
diff --git a/components/COMPONENTS.md b/components/COMPONENTS.md
new file mode 100644
index 0000000..94cf6f9
--- /dev/null
+++ b/components/COMPONENTS.md
@@ -0,0 +1,163 @@
+# Components Documentation
+
+> Whenever you create a new component in the components/ directory,
+> automatically append a new section following the template below.
+
+---
+
+## CartProduct
+
+**File:** components/CartProduct.tsx **Description:** Product card component.
+Displays product image, name, description, formatted price, and a Buy button.
+Width is controlled by the parent grid (w-full), not the card itself.
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+| ----------- | ---------------- | -------- | ------------ | ----------------------------------------------------------- |
+| image | string | yes | - | URL/path to product image (Next.js Image) |
+| imageAlt | string | no | Anh san pham | Alt text for accessibility |
+| productName | string | yes | - | Product display name |
+| price | number or string | yes | - | If number: auto-formatted to VND. If string: rendered as-is |
+| description | string | yes | - | Short description, clamped to 2 lines |
+| onBuy | () => void | no | undefined | Callback when Buy button is clicked |
+
+### Internal Logic
+
+- formattedPrice: number -> toLocaleString(vi-VN, { style: currency, currency:
+ VND })
+- Image fallback: fa-solid fa-mug-hot icon shown behind image; if image fails
+ onError hides the img element
+
+### Styling (CSS variables)
+
+| Element | Key classes |
+| ------------ | ------------------------------------------------------------------ |
+| Card wrapper | flex flex-col w-full rounded-2xl, shadow uses --color-shadow-sm/md |
+| Image area | relative w-full h-36, bg --color-border-light |
+| Product name | font-bold text-sm, color --color-text-primary, line-clamp-1 |
+| Description | text-xs, color --color-text-muted, line-clamp-2 |
+| Price | text-sm font-bold, color --color-primary |
+| Buy button | bg --color-primary, hover --color-primary-dark, active:scale-95 |
+
+### Dependencies
+
+- next/image
+- Tailwind CSS + CSS custom properties from globals.css
+- FontAwesome (fa-solid fa-mug-hot fallback, fa-cart-plus button icon)
+
+### Notes
+
+- Card width is w-full - controlled by parent grid in page.tsx
+- available field on Product is checked in page.tsx before rendering
+- onBuy currently logs to console - TODO: implement cart logic
+
+---
+
+## Navbar
+
+**File:** components/Navbar.tsx **Description:** Left sidebar with collapsible
+category filter. Sticky below header, full viewport height minus header.
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+| ---------------- | -------------------- | -------- | --------- | ------------------------------------------------- |
+| isOpen | boolean | yes | - | true = expanded (240px), false = collapsed (64px) |
+| onToggle | () => void | yes | - | Toggle expand/collapse |
+| activeCategory | string | no | all | Currently selected category id |
+| onCategoryChange | (id: string) => void | no | undefined | Fired when user clicks a category |
+
+### Behavior
+
+- Collapsed: 64px wide, icon only (w-16)
+- Expanded: 240px wide, icon + label (w-60)
+- Width transition: transition-all duration-250ms
+- Active category: highlighted with --color-primary background
+- Footer shows SHOP_INFO.openHours (icon only when collapsed)
+
+### Styling
+
+| Element | Key classes |
+| ------------- | ----------------------------------------------------------- |
+| Aside | sticky, border-r --color-border, bg --color-bg-sidebar |
+| Toggle button | w-8 h-8 rounded-lg, hover bg --color-border-light |
+| Active item | bg --color-primary text-white shadow-sm |
+| Inactive item | hover bg --color-border-light, color --color-text-secondary |
+
+### Dependencies
+
+- next/link
+- lib/constants: MENU_CATEGORIES, SHOP_INFO
+- lib/types: MenuCategory
+- FontAwesome icons
+
+---
+
+## Header (layouts/header.tsx)
+
+**File:** layouts/header.tsx **Description:** Sticky top bar. 2-column layout:
+Brand (left) + Auth button (right). Auth cycles Guest -> Manager -> Staff ->
+Guest for UI demo.
+
+### Props
+
+None - reads SHOP_INFO and MOCK_USERS from lib/constants directly.
+
+### Internal State
+
+| State | Type | Description |
+| ----- | ------------ | ------------------------------- |
+| user | User or null | Current demo user. null = guest |
+
+### Auth States
+
+| State | Appearance |
+| ------------ | ------------------------------------- |
+| Guest (null) | Brown primary button, Dang nhap label |
+| Manager | Gold/caramel badge with user-tie icon |
+| Staff | Avatar circle + name, bordered button |
+
+### Responsive
+
+- Logo + shop name: always visible
+- Tagline: hidden < md, shown md+
+- Button label: hidden < sm, shown sm+
+
+### Dependencies
+
+- next/image, next/link
+- lib/constants: SHOP_INFO, MOCK_USERS
+- lib/types: User
+- FontAwesome icons
+
+---
+
+## Footer (layouts/footer.tsx)
+
+**File:** layouts/footer.tsx **Description:** Site footer with 12-column grid. 3
+sections: Brand info, Social links, WiFi card.
+
+### Props
+
+None - reads SHOP_INFO and SOCIAL_LINKS from lib/constants directly.
+
+### Layout
+
+| Section | Mobile | md | lg/xl |
+| ------------- | ----------- | ---------- | ------------ |
+| Brand info | col-span-12 | col-span-6 | col-span-8/6 |
+| Social + WiFi | col-span-12 | col-span-6 | col-span-4/6 |
+
+### Sections
+
+1. Brand: logo, name, tagline, address, phone, email, open hours
+2. Social: Facebook, TikTok, Website links
+3. WiFi: network name + password in monospace styled box
+4. Bottom bar: copyright + Made with heart in Vietnam
+
+### Dependencies
+
+- next/image, next/link
+- lib/constants: SHOP_INFO, SOCIAL_LINKS
+- FontAwesome icons
diff --git a/components/CartFab.tsx b/components/CartFab.tsx
new file mode 100644
index 0000000..1e488eb
--- /dev/null
+++ b/components/CartFab.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useCart } from "@/lib/cart-context";
+import Link from "next/link";
+
+export default function CartFab() {
+ const { totalItems } = useCart();
+
+ if (totalItems <= 0) return null;
+
+ return (
+
+
+
+ {totalItems}
+
+
+ );
+}
diff --git a/components/CartProduct.tsx b/components/CartProduct.tsx
new file mode 100644
index 0000000..4160133
--- /dev/null
+++ b/components/CartProduct.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Image from "next/image";
+
+interface CartProductProps {
+ image: string;
+ imageAlt?: string;
+ productName: string;
+ price: number | string;
+ description: string;
+ onBuy?: () => void;
+}
+
+/**
+ * Product card — fills the parent grid cell width (w-full).
+ *
+ * Layout (top → bottom):
+ * 1. Image area (fixed height h-36) with coffee-mug fallback icon
+ * 2. Name + description (flex-1, grows to fill space)
+ * 3. Price + Buy button row (pinned to bottom)
+ *
+ * Responsive: card width is controlled by the parent grid, not the card itself.
+ */
+export default function CartProduct({
+ image,
+ imageAlt = "Ảnh sản phẩm",
+ productName,
+ price,
+ description,
+ onBuy,
+}: CartProductProps) {
+ const formattedPrice =
+ typeof price === "number"
+ ? price.toLocaleString("vi-VN", { style: "currency", currency: "VND" })
+ : price;
+
+ return (
+
+ {/* Logo & Shop Name */}
+
+
+
+
+ {/* Step Indicator */}
+
+
+ + {SHOP_INFO.name} +
++ {step === "phone" + ? "Đăng ký tài khoản khách hàng" + : "Xác thực số điện thoại"} +
+
+
+
+ {/* Phone Step */}
+ {step === "phone" && (
+
+ )}
+
+ {/* OTP Step */}
+ {step === "otp" && (
+
+ )}
+
+ 1
+
+
+
+ 2
+
+
+ {/* ── Image area ── */}
+
+ );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..72f0a14
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { MENU_CATEGORIES, SHOP_INFO } from "@/lib/constants";
+import type { MenuCategory } from "@/lib/types";
+
+interface NavbarProps {
+ /** Whether the sidebar is expanded (true) or icon-only (false) */
+ isOpen: boolean;
+ /** Toggle expand / collapse */
+ onToggle: () => void;
+ /** Currently selected category id */
+ activeCategory?: string;
+ /** Fired when user clicks a category */
+ onCategoryChange?: (id: string) => void;
+}
+
+/**
+ * Left sidebar — always visible, collapsible on all screen sizes.
+ *
+ * Collapsed → 64 px wide, icon only
+ * Expanded → 240 px wide, icon + label
+ *
+ * Width transition is handled by Tailwind w-16 / w-60 + transition-all.
+ * Parent controls open/close state via isOpen + onToggle props.
+ */
+export default function Navbar({
+ isOpen,
+ onToggle,
+ activeCategory = "all",
+ onCategoryChange,
+}: NavbarProps) {
+ return (
+
+ );
+}
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..b3fc8f1
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,32 @@
+# --- Giai đoạn 1: Build ---
+FROM node:25-alpine AS builder
+
+# Cài đặt pnpm
+RUN npm install -g pnpm
+
+WORKDIR /app
+
+# Copy file định nghĩa package
+COPY package.json pnpm-lock.yaml ./
+
+# Cài đặt dependencies (sử dụng --frozen-lockfile để đảm bảo đúng phiên bản)
+RUN pnpm install --prod --frozen-lockfile
+
+# Copy toàn bộ code
+COPY . .
+
+# Build Next.js (Yêu cầu next.config.js có output: 'export')
+RUN pnpm run build
+
+# --- Giai đoạn 2: Run (Sản phẩm cuối) ---
+FROM nginx:alpine
+
+# Xóa file mặc định của nginx (tùy chọn nhưng nên làm)
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy folder out từ giai đoạn builder
+COPY --from=builder /app/out /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.ts
similarity index 100%
rename from eslint.config.mjs
rename to eslint.config.ts
index 05e726d..2b49675 100644
--- a/eslint.config.mjs
+++ b/eslint.config.ts
@@ -1,6 +1,6 @@
-import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
+import { defineConfig, globalIgnores } from "eslint/config";
const eslintConfig = defineConfig([
...nextVitals,
diff --git a/k8s.yaml b/k8s.yaml
new file mode 100644
index 0000000..e6b77f5
--- /dev/null
+++ b/k8s.yaml
@@ -0,0 +1,42 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+ name: drinkool_frontend
+ labels:
+ app: web
+spec:
+ replicas: 1
+ selector:
+ matchLabels:
+ app: web
+ template:
+ metadata:
+ labels:
+ app: web
+ spec:
+ containers:
+ - name: nginx-container
+ image: nginx:latest
+ ports:
+ - containerPort: 80
+ resources:
+ limits:
+ cpu: "50m"
+ memory: "32Mi"
+ requests:
+ cpu: "10m"
+ memory: "16Mi"
+---
+apiVersion: v1
+kind: Service
+metadata:
+ name: my-web-service
+spec:
+ type: NodePort
+ selector:
+ app: web
+ ports:
+ - protocol: TCP
+ port: 80
+ targetPort: 80
+ nodePort: 30080
\ No newline at end of file
diff --git a/layouts/footer.tsx b/layouts/footer.tsx
new file mode 100644
index 0000000..75d972d
--- /dev/null
+++ b/layouts/footer.tsx
@@ -0,0 +1,181 @@
+import { SHOP_INFO, SOCIAL_LINKS } from "@/lib/constants";
+import Image from "next/image";
+import Link from "next/link";
+
+/**
+ * Site Footer — 3-section 12-column grid.
+ *
+ * Sections:
+ * 1. Brand info (logo, name, tagline, address, phone, hours)
+ * 2. Social links (Facebook, TikTok, Website)
+ * 3. WiFi card (network name + password)
+ *
+ * Responsive:
+ * - Mobile : all sections stack full-width (col-span-12)
+ * - md : brand 6 cols | social 3 | wifi 3
+ * - lg : brand 5 cols | social 3 | wifi 4
+ */
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/layouts/header.tsx b/layouts/header.tsx
new file mode 100644
index 0000000..2333eb8
--- /dev/null
+++ b/layouts/header.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useAuth } from "@/lib/auth-context";
+import { SHOP_INFO } from "@/lib/constants";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+/**
+ * Site Header — sticky top bar, always visible on all screen sizes.
+ *
+ * 2-column layout:
+ * [LEFT: Brand (logo + name + tagline)] | [RIGHT: Auth button]
+ *
+ * Auth states:
+ * - Guest: Shows "Đăng nhập" button → navigates to /login
+ * - Manager: Shows "Quản lý" badge with logout on click
+ * - Staff: Shows staff name with logout on click
+ * - Customer: Shows "Khách hàng" with phone and logout on click
+ *
+ * Responsive:
+ * - Logo + shop name : always visible
+ * - Tagline : hidden on mobile (< md), shown on md+
+ * - Button label : hidden on xs (< sm), shown on sm+
+ */
+export default function Header() {
+ const router = useRouter();
+ const { user, logout } = useAuth();
+
+ const handleAuthClick = () => {
+ if (!user) {
+ router.push("/login");
+ } else {
+ logout();
+ }
+ };
+
+ return (
+
+ {/* Fallback icon (shown when image fails or is missing) */}
+ {
+ (e.currentTarget as HTMLImageElement).style.display = "none";
+ }}
+ />
+
+
+ {/* ── Name + description ── */}
+
+
+
+ {/* Product image */}
+
+
+
+ {/* ── Price + Buy button ── */}
+ + {productName} +
++ {description} +
+
+
+ {formattedPrice}
+
+
+
+
+ {/* ── LEFT: Brand ── */}
+
+ {/* Logo */}
+
+
+
+
+ {/* Name + tagline */}
+
+
+ {SHOP_INFO.name}
+
+
+ {SHOP_INFO.tagline}
+
+
+
+
+ {/* ── RIGHT: Auth ── */}
+
+ {!user ? (
+ /* Guest: sign-in button */
+
+ ) : user.role === "manager" ? (
+ /* Manager: gold badge */
+
+ ) : user.role === "staff" ? (
+ /* Staff: avatar + name */
+
+ ) : (
+ /* Customer: phone icon + label */
+
+ )}
+
+