feat: add pages (#33)

Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Co-authored-by: Thanh Quy- wolf <524H0124@student.tdtu.edu.vn>
Reviewed-on: #33
Co-authored-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>
Co-committed-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>

app/(main)/login/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import LoginForm from "@/components/organisms/forms/LoginForm";
 import { SHOP_INFO } from "@/lib/constants";
+import LoginForm from "@/components/organisms/forms/LoginForm";
 import Image from "next/image";
 
 export default function LoginPage() {
@@ -28,7 +28,7 @@ export default function LoginPage() {
             Đăng nhập vào hệ thống
           </p>
         </div>
-
+        
         {/* Login Form */}
         <LoginForm />
 

app/(main)/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { SearchBar } from "@/components/molecules/search-bar";
 import { CategorySidebar } from "@/components/organisms/navigation";
 import { ProductGrid } from "@/components/organisms/product-grid";
-import { MENU_CATEGORIES } from "@/lib/constants";
+import { SearchBar } from "@/components/molecules/search-bar";
 import { useMenu } from "@/lib/menu-context";
+import { MENU_CATEGORIES } from "@/lib/constants";
 import { useEffect, useState } from "react";
 
 /**
@@ -56,15 +56,18 @@ export default function Home() {
         <div className="mb-5 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
           {/* Title + count */}
           <div className="shrink-0">
-            <h2 className="text-foreground text-xl font-bold">
+            <h1 className="text-foreground text-xl font-bold">
               {activeCategoryLabel}
-            </h2>
+            </h1>
           </div>
 
           {/* Search bar */}
           <SearchBar
             value={searchQuery}
-            onChange={setSearchQuery}
+            onChange={(q) => {
+              if (q && activeCategory !== "all") setActiveCategory("all");
+              setSearchQuery(q);
+            }}
             onClear={() => setSearchQuery("")}
             placeholder="Tìm kiếm món..."
             className="sm:max-w-xs"
@@ -72,7 +75,10 @@ export default function Home() {
         </div>
 
         {/* ── Product grid (organism handles mobile category menu + grid) ── */}
-        <ProductGrid searchQuery={searchQuery} isSidebarOpen={isSidebarOpen} />
+        <ProductGrid
+          searchQuery={searchQuery}
+          isSidebarOpen={isSidebarOpen}
+        />
       </main>
     </div>
   );

app/(main)/payment/page.tsx

@@ -45,13 +45,13 @@ export default function PaymentPage() {
                   <table className="w-full min-w-190 text-sm">
                     <thead>
                       <tr className="bg-(--color-border-light)/40 text-left">
-                        <th className="px-4 py-3 font-semibold">
+                        <th scope="col" 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 text-right font-semibold">
+                        <th scope="col" className="px-4 py-3 font-semibold">Giá tiền</th>
+                        <th scope="col" className="px-4 py-3 font-semibold">Mô tả</th>
+                        <th scope="col" className="px-4 py-3 font-semibold">Số lượng</th>
+                        <th scope="col" className="px-4 py-3 text-right font-semibold">
                           Xóa
                         </th>
                       </tr>
@@ -75,7 +75,7 @@ export default function PaymentPage() {
                             <div className="flex items-center gap-2">
                               <button
                                 onClick={() => decreaseQty(item.id)}
-                                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Giảm số lượng ${item.name}`}
                               >
                                 -
@@ -92,7 +92,7 @@ export default function PaymentPage() {
                               />
                               <button
                                 onClick={() => increaseQty(item.id)}
-                                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Tăng số lượng ${item.name}`}
                               >
                                 +
@@ -105,6 +105,7 @@ export default function PaymentPage() {
                               variant="danger"
                               size="md"
                               style="payment"
+                              aria-label={`Xóa ${item.name} khỏi giỏ hàng`}
                             >
                               Xóa sản phẩm
                             </Button>