From 9c5b586030c10cf84fda590b8e0643b5efa607a3 Mon Sep 17 00:00:00 2001
From: Blackbox Agent <agent@blackbox.ai>
Date: Mon, 23 Mar 2026 03:12:19 +0000
Subject: [PATCH] feat(payment): add cart FAB, payment page, qty updates,
 invoice sidebar

---
 app/layout.tsx         |   4 ++
 app/page.tsx           |   7 +--
 app/payment/page.tsx   | 127 +++++++++++++++++++++++++++++++++++++
 app/providers.tsx      |   7 ++-
 components/CartFab.tsx |  32 ++++++++++
 lib/cart-context.tsx   | 139 +++++++++++++++++++++++++++++++++++++++++
 6 files changed, 311 insertions(+), 5 deletions(-)
 create mode 100644 app/payment/page.tsx
 create mode 100644 components/CartFab.tsx
 create mode 100644 lib/cart-context.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 8d6fa24..2bbd2a1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "@/layouts/header";
 import Footer from "@/layouts/footer";
+import CartFab from "@/components/CartFab";
 import { Providers } from "./providers";
 
 const geistSans = Geist({
@@ -55,6 +56,9 @@ export default function RootLayout({
 
           {/* Footer always at bottom */}
           <Footer />
+
+          {/* Global floating cart button */}
+          <CartFab />
         </Providers>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 1e8e641..a51eb9d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import Navbar from "@/components/Navbar";
 import CartProduct from "@/components/CartProduct";
 import { MENU_CATEGORIES, MOCK_PRODUCTS } from "@/lib/constants";
 import { useMenu } from "@/lib/menu-context";
+import { useCart } from "@/lib/cart-context";
 
 /**
  * Main page — sidebar + product grid layout.
@@ -24,6 +25,7 @@ export default function Home() {
   /* Shared category state comes from MenuContext so the header mobile menu
    * and this sidebar always reflect the same selection. */
   const { activeCategory, setActiveCategory } = useMenu();
+  const { addToCart } = useCart();
 
   /* Start collapsed (false) so SSR and client initial render match.
    * useEffect sets the correct value after hydration completes. */
@@ -181,10 +183,7 @@ export default function Home() {
                 productName={product.name}
                 price={product.price}
                 description={product.description}
-                onBuy={() => {
-                  /* TODO: add to cart logic */
-                  console.log("Thêm vào giỏ:", product.name);
-                }}
+                onBuy={() => addToCart(product)}
               />
             ))}
           </div>
diff --git a/app/payment/page.tsx b/app/payment/page.tsx
new file mode 100644
index 0000000..09d4233
--- /dev/null
+++ b/app/payment/page.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useCart } from "@/lib/cart-context";
+
+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 (
+    <div className="max-w-screen-2xl mx-auto w-full px-4 md:px-6 lg:px-8 py-6 md:py-8">
+      <div className="flex flex-col xl:flex-row gap-6">
+        <section className="flex-1 min-w-0">
+          <div className="rounded-2xl border border-(--color-border-light) bg-card overflow-hidden">
+            <div className="px-4 py-3 border-b border-(--color-border-light)">
+              <h1 className="text-lg md:text-xl font-bold text-foreground">Trang thanh toán</h1>
+            </div>
+
+            {items.length === 0 ? (
+              <div className="px-4 py-10 text-center text-(--color-text-muted)">
+                Chưa có sản phẩm nào trong giỏ hàng.
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full min-w-[760px] text-sm">
+                  <thead>
+                    <tr className="bg-(--color-border-light)/40 text-left">
+                      <th className="px-4 py-3 font-semibold">Tên sản phẩm</th>
+                      <th className="px-4 py-3 font-semibold">Giá tiền</th>
+                      <th className="px-4 py-3 font-semibold">Mô tả</th>
+                      <th className="px-4 py-3 font-semibold">Số lượng</th>
+                      <th className="px-4 py-3 font-semibold text-right">Xóa</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {items.map((item) => (
+                      <tr key={item.id} className="border-t border-(--color-border-light)">
+                        <td className="px-4 py-3 font-medium text-foreground">{item.name}</td>
+                        <td className="px-4 py-3 text-(--color-primary) font-semibold">
+                          {formatPrice(item.price)}
+                        </td>
+                        <td className="px-4 py-3 text-(--color-text-muted) max-w-[280px]">
+                          <p className="line-clamp-2">{item.description}</p>
+                        </td>
+                        <td className="px-4 py-3">
+                          <div className="flex items-center gap-2">
+                            <button
+                              onClick={() => decreaseQty(item.id)}
+                              className="w-8 h-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                              aria-label={`Giảm số lượng ${item.name}`}
+                            >
+                              -
+                            </button>
+                            <input
+                              type="number"
+                              min={1}
+                              value={item.quantity}
+                              onChange={(e) => setQuantity(item.id, Number(e.target.value))}
+                              className="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent"
+                            />
+                            <button
+                              onClick={() => increaseQty(item.id)}
+                              className="w-8 h-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                              aria-label={`Tăng số lượng ${item.name}`}
+                            >
+                              +
+                            </button>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-right">
+                          <button
+                            onClick={() => removeFromCart(item.id)}
+                            className="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors"
+                          >
+                            <i className="fa-solid fa-trash"></i>
+                            <span className="hidden lg:inline">Xóa sản phẩm</span>
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </section>
+
+        <aside className="xl:w-[340px] shrink-0">
+          <div className="sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) bg-card p-4 md:p-5">
+            <h2 className="text-lg font-bold mb-4">Hóa đơn</h2>
+
+            <div className="flex items-center justify-between pb-4 border-b border-(--color-border-light)">
+              <span className="text-(--color-text-muted)">Tổng cộng</span>
+              <span className="text-xl font-bold text-(--color-primary)">{formatPrice(totalPrice)}</span>
+            </div>
+
+            <div className="mt-4 grid grid-cols-2 gap-3">
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors"
+                type="button"
+              >
+                <i className="fa-solid fa-money-bill-wave"></i>
+                <span className="hidden lg:inline">Tiền mặt</span>
+              </button>
+
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors"
+                type="button"
+              >
+                <i className="fa-solid fa-qrcode"></i>
+                <span className="hidden lg:inline">QR Code</span>
+              </button>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/app/providers.tsx b/app/providers.tsx
index 6e35041..53443d4 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { MenuProvider } from "@/lib/menu-context";
+import { CartProvider } from "@/lib/cart-context";
 
 /**
  * Client-side providers wrapper.
@@ -8,5 +9,9 @@ import { MenuProvider } from "@/lib/menu-context";
  * with client context providers without becoming a client component itself.
  */
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <MenuProvider>{children}</MenuProvider>;
+  return (
+    <MenuProvider>
+      <CartProvider>{children}</CartProvider>
+    </MenuProvider>
+  );
 }
diff --git a/components/CartFab.tsx b/components/CartFab.tsx
new file mode 100644
index 0000000..dd6fe95
--- /dev/null
+++ b/components/CartFab.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useCart } from "@/lib/cart-context";
+
+export default function CartFab() {
+  const { totalItems } = useCart();
+
+  if (totalItems <= 0) return null;
+
+  return (
+    <Link
+      href="/payment"
+      aria-label="Đi đến trang thanh toán"
+      className="fixed right-5 bottom-6 z-[70] w-14 h-14 rounded-full
+                 bg-(--color-primary) text-white shadow-xl
+                 flex items-center justify-center
+                 hover:bg-(--color-primary-dark)
+                 active:scale-95 transition-all duration-150"
+    >
+      <i className="fa-solid fa-cart-shopping text-lg"></i>
+      <span
+        className="absolute -top-1.5 -right-1.5 min-w-6 h-6 px-1.5
+                   rounded-full bg-(--color-accent) text-(--color-primary-dark)
+                   text-xs font-bold flex items-center justify-center
+                   border-2 border-white"
+      >
+        {totalItems}
+      </span>
+    </Link>
+  );
+}
diff --git a/lib/cart-context.tsx b/lib/cart-context.tsx
new file mode 100644
index 0000000..53f5b3c
--- /dev/null
+++ b/lib/cart-context.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import type { Product } from "@/lib/types";
+
+export interface CartItem {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  quantity: number;
+}
+
+interface CartContextValue {
+  items: CartItem[];
+  totalItems: number;
+  totalPrice: number;
+  addToCart: (product: Product) => void;
+  increaseQty: (id: number) => void;
+  decreaseQty: (id: number) => void;
+  removeFromCart: (id: number) => void;
+  setQuantity: (id: number, quantity: number) => void;
+}
+
+const STORAGE_KEY = "coffee-shop-cart";
+const CartContext = createContext<CartContextValue | null>(null);
+
+export function CartProvider({ children }: { children: React.ReactNode }) {
+  const [items, setItems] = useState<CartItem[]>([]);
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw) as CartItem[];
+      if (Array.isArray(parsed)) {
+        setItems(parsed.filter((i) => i && i.id && i.quantity > 0));
+      }
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+  }, [items]);
+
+  const addToCart = (product: Product) => {
+    setItems((prev) => {
+      const index = prev.findIndex((i) => i.id === product.id);
+      if (index === -1) {
+        return [
+          ...prev,
+          {
+            id: product.id,
+            name: product.name,
+            description: product.description,
+            price: product.price,
+            quantity: 1,
+          },
+        ];
+      }
+
+      const next = [...prev];
+      next[index] = { ...next[index], quantity: next[index].quantity + 1 };
+      return next;
+    });
+  };
+
+  const increaseQty = (id: number) => {
+    setItems((prev) =>
+      prev.map((item) =>
+        item.id === id ? { ...item, quantity: item.quantity + 1 } : item
+      )
+    );
+  };
+
+  const decreaseQty = (id: number) => {
+    setItems((prev) =>
+      prev
+        .map((item) =>
+          item.id === id
+            ? { ...item, quantity: Math.max(0, item.quantity - 1) }
+            : item
+        )
+        .filter((item) => item.quantity > 0)
+    );
+  };
+
+  const removeFromCart = (id: number) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const setQuantity = (id: number, quantity: number) => {
+    const safeQty = Number.isFinite(quantity) ? Math.max(0, Math.floor(quantity)) : 0;
+    if (safeQty === 0) {
+      removeFromCart(id);
+      return;
+    }
+
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, quantity: safeQty } : item))
+    );
+  };
+
+  const totalItems = useMemo(
+    () => items.reduce((sum, item) => sum + item.quantity, 0),
+    [items]
+  );
+
+  const totalPrice = useMemo(
+    () => items.reduce((sum, item) => sum + item.price * item.quantity, 0),
+    [items]
+  );
+
+  const value = useMemo(
+    () => ({
+      items,
+      totalItems,
+      totalPrice,
+      addToCart,
+      increaseQty,
+      decreaseQty,
+      removeFromCart,
+      setQuantity,
+    }),
+    [items, totalItems, totalPrice]
+  );
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error("useCart must be used within CartProvider");
+  }
+  return context;
+}