fix: connect services to backend (#37)

Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn> Reviewed-on: #37 Co-authored-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost> Co-committed-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>
2026-05-05 14:42:13 +00:00
parent 48fc033ffa
commit c2afb3d3b5
49 changed files with 1427 additions and 843 deletions
@@ -3,6 +3,7 @@
 import {
  CategoriesTab,
  CombosTab,
+  MenuItemsTab,
  ProductsTab,
 } from "@/components/organisms/manager";
 import { useAuth } from "@/lib/auth-context";
@@ -17,7 +18,7 @@ export default function ManagerPage() {
  const tabs = [
    {
      id: "products" as const,
-      label: "Thực đơn",
+      label: "Menu",
      icon: "fa-solid fa-utensils",
      count: products.length,
    },
@@ -29,10 +30,16 @@ export default function ManagerPage() {
    },
    {
      id: "categories" as const,
-      label: "Danh mục",
+      label: "Categories",
      icon: "fa-solid fa-tags",
      count: categories.length,
    },
+    {
+      id: "menu-items" as const,
+      label: "Menu",
+      icon: "fa-solid fa-bowl-food",
+      count: null,
+    },
  ];

  return (
@@ -51,7 +58,7 @@ export default function ManagerPage() {

        <nav className="flex-1 space-y-1 p-3">
          <p className="mb-2 px-3 text-[11px] font-semibold tracking-wider text-(--color-text-muted) uppercase">
-            Quản lý thực đơn
+            Menu Management
          </p>
          {tabs.map((tab) => (
            <button
@@ -65,29 +72,31 @@ export default function ManagerPage() {
            >
              <i className={`${tab.icon} w-4 text-center`}></i>
              <span className="flex-1 text-left">{tab.label}</span>
-              <span
-                className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
-                  activeTab === tab.id
-                    ? "bg-white/20 text-white"
-                    : "bg-(--color-border-light) text-(--color-text-muted)"
-                }`}
-              >
-                {tab.count}
-              </span>
+              {tab.count !== null && (
+                <span
+                  className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
+                    activeTab === tab.id
+                      ? "bg-white/20 text-white"
+                      : "bg-(--color-border-light) text-(--color-text-muted)"
+                  }`}
+                >
+                  {tab.count}
+                </span>
+              )}
            </button>
          ))}
          <div className="mt-3 border-t border-(--color-border-light) pt-3">
            <p className="mb-2 px-3 text-[11px] font-semibold tracking-wider text-(--color-text-muted) uppercase">
-              Phân tích
+              Analytics
            </p>
            <Link
              href="/manager/analytics"
              className="hover:bg-background flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-(--color-text-secondary) no-underline transition-all hover:text-(--color-primary-dark)"
            >
              <i className="fa-solid fa-chart-line w-4 text-center"></i>
-              <span className="flex-1 text-left">Tài chính</span>
+              <span className="flex-1 text-left">Finance</span>
              <span className="rounded-full bg-(--color-accent-light) px-2 py-0.5 text-xs font-semibold text-(--color-primary)">
-                Mới
+                New
              </span>
            </Link>
            <Link
@@ -95,9 +104,9 @@ export default function ManagerPage() {
              className="hover:bg-background flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-(--color-text-secondary) no-underline transition-all hover:text-(--color-primary-dark)"
            >
              <i className="fa-solid fa-calendar-days w-4 text-center"></i>
-              <span className="flex-1 text-left">Ca làm</span>
+              <span className="flex-1 text-left">Shifts</span>
              <span className="rounded-full bg-(--color-accent-light) px-2 py-0.5 text-xs font-semibold text-(--color-primary)">
-                Mới
+                New
              </span>
            </Link>
          </div>
@@ -110,9 +119,9 @@ export default function ManagerPage() {
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-foreground truncate text-sm font-semibold">
-                {user?.name ?? "Quản lý"}
+                {user?.name ?? "Manager"}
              </p>
-              <p className="text-xs text-(--color-text-muted)">Quản lý quán</p>
+              <p className="text-xs text-(--color-text-muted)">Store Manager</p>
            </div>
          </div>
          <div className="mt-1 flex gap-2 px-1">
@@ -121,14 +130,14 @@ export default function ManagerPage() {
              className="hover:bg-background flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-(--color-border-light) bg-transparent py-2 text-xs font-medium text-(--color-text-secondary) no-underline transition"
            >
              <i className="fa-solid fa-house"></i>
-              Trang chủ
+              Home
            </Link>
            <button
              onClick={logout}
              className="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl border-none bg-transparent py-2 text-xs font-medium text-red-500 transition hover:bg-red-50"
            >
              <i className="fa-solid fa-right-from-bracket"></i>
-              Đăng xuất
+              Logout
            </button>
          </div>
        </div>
@@ -139,16 +148,18 @@ export default function ManagerPage() {
        <header className="sticky top-0 z-40 flex items-center justify-between border-b border-(--color-border-light) bg-white px-5 py-4 shadow-sm">
          <div>
            <h1 className="text-foreground text-lg font-bold">
-              {tabs.find((t) => t.id === activeTab)?.label ?? "Quản lý"}
+              {tabs.find((t) => t.id === activeTab)?.label ?? "Manager"}
            </h1>
            <p className="text-xs text-(--color-text-muted)">
-              Quản lý{" "}
+              Manage{" "}
              {activeTab === "products"
-                ? "thực đơn"
+                ? "menu items"
                : activeTab === "combos"
-                  ? "combo"
-                  : "danh mục"}{" "}
-              của quán
+                  ? "combos"
+                  : activeTab === "categories"
+                    ? "categories"
+                    : "menu"}{" "}
+              for your store
            </p>
          </div>

@@ -173,7 +184,7 @@ export default function ManagerPage() {
              className="flex items-center gap-1.5 rounded-xl border-none bg-(--color-accent-light) px-3 py-2 text-xs font-medium text-(--color-primary) no-underline transition hover:bg-(--color-accent-light)/70"
            >
              <i className="fa-solid fa-chart-line"></i>
-              <span className="hidden sm:inline">Tài chính</span>
+              <span className="hidden sm:inline">Finance</span>
            </Link>
          </div>

@@ -184,14 +195,14 @@ export default function ManagerPage() {
              className="flex items-center gap-1.5 rounded-xl bg-(--color-accent-light) px-3 py-2 text-xs font-medium text-(--color-primary) no-underline transition hover:opacity-80"
            >
              <i className="fa-solid fa-chart-line"></i>
-              Thống kê tài chính
+              Financial Analytics
            </Link>
            <Link
              href="/"
              className="hover:bg-background flex items-center gap-1.5 rounded-xl border border-(--color-border-light) bg-transparent px-3 py-2 text-xs font-medium text-(--color-text-secondary) no-underline transition"
            >
              <i className="fa-solid fa-house"></i>
-              Trang chủ
+              Home
            </Link>
          </div>
        </header>
@@ -200,6 +211,7 @@ export default function ManagerPage() {
          {activeTab === "products" && <ProductsTab />}
          {activeTab === "combos" && <CombosTab />}
          {activeTab === "categories" && <CategoriesTab />}
+          {activeTab === "menu-items" && <MenuItemsTab />}
        </main>
      </div>
    </div>