feat: Manage & analytics pages (#28)

Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Reviewed-on: #28
Reviewed-by: TakahashiNguyen <takahashi.ng@icloud.com>
Co-authored-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>
Co-committed-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>

app/(manager)/layout.tsx

@@ -0,0 +1,9 @@
+import { ManagerLayout } from "@/components/templates/manager-layout";
+
+export default function RootManagerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ManagerLayout>{children}</ManagerLayout>;
+}

app/(manager)/manager/analytics/page.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ProductTable,
+  SummaryCard,
+} from "@/components/organisms/analytics";
+import type { PieSlice } from "@/components/organisms/analytics";
+import { calcChange, formatCurrency, formatCurrencyFull } from "@/lib/analytics-utils";
+import {
+  MENU_CATEGORIES,
+  MOCK_PRODUCT_SALES,
+  MOCK_REVENUE_DAILY,
+  MOCK_REVENUE_MONTHLY,
+  MOCK_REVENUE_WEEKLY,
+  MOCK_REVENUE_YEARLY,
+} from "@/lib/constants";
+import type { AnalyticsPeriod, RevenueDataPoint } from "@/lib/types";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const PERIOD_LABELS: Record<AnalyticsPeriod, string> = {
+  day: "Theo ngày",
+  week: "Theo tuần",
+  month: "Theo tháng",
+  year: "Theo năm",
+};
+
+const CATEGORY_COLORS = [
+  "#6F4E37", "#C8973A", "#A0785A", "#8B6914", "#D4A96A",
+  "#4A3728", "#F0D9A8", "#A08060", "#3D2B1F",
+];
+
+const REVENUE_MAP: Record<AnalyticsPeriod, RevenueDataPoint[]> = {
+  day: MOCK_REVENUE_DAILY,
+  week: MOCK_REVENUE_WEEKLY,
+  month: MOCK_REVENUE_MONTHLY,
+  year: MOCK_REVENUE_YEARLY,
+};
+
+const CHART_TYPES = ["line", "bar", "pie"] as const;
+type ChartType = (typeof CHART_TYPES)[number];
+
+const CHART_META: Record<ChartType, { icon: string; label: string }> = {
+  line: { icon: "fa-chart-line", label: "Line" },
+  bar:  { icon: "fa-chart-bar",  label: "Bar"  },
+  pie:  { icon: "fa-chart-pie",  label: "Pie"  },
+};
+
+// ─── Category filter select ───────────────────────────────────────────────────
+
+function CategorySelect({
+  value,
+  onChange,
+  label = "Danh mục:",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  label?: string;
+}) {
+  const categories = MENU_CATEGORIES.filter((c) => c.id !== "all");
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-xs text-(--color-text-muted)">{label}</label>
+      <select
+        title="Danh mục"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="bg-background text-foreground rounded-lg border border-(--color-border) px-2 py-1.5 text-xs"
+      >
+        <option value="all">Tất cả</option>
+        {categories.map((c) => (
+          <option key={c.id} value={c.id}>{c.name}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export default function AnalyticsPage() {
+  const [period, setPeriod] = useState<AnalyticsPeriod>("month");
+  const [activeChart, setActiveChart] = useState<ChartType>("line");
+  const [categoryFilter, setCategoryFilter] = useState("all");
+
+  // Revenue data for selected period
+  const revenueData = REVENUE_MAP[period];
+
+  // Split into halves for bar comparison
+  const half = Math.floor(revenueData.length / 2);
+  const barCurrent  = revenueData.slice(half);
+  const barPrevious = revenueData.slice(0, half).slice(0, barCurrent.length);
+
+  // Filtered product sales
+  const filteredSales = useMemo(
+    () => categoryFilter === "all"
+      ? MOCK_PRODUCT_SALES
+      : MOCK_PRODUCT_SALES.filter((p) => p.category === categoryFilter),
+    [categoryFilter],
+  );
+
+  // Summary stats
+  const totalRevenue = revenueData.reduce((s, d) => s + d.revenue, 0);
+  const totalOrders  = revenueData.reduce((s, d) => s + d.orders, 0);
+  const totalProfit  = filteredSales.reduce((s, d) => s + d.profit, 0);
+  const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
+
+  // Period-over-period comparisons
+  const curRevenue = barCurrent.reduce((s, d) => s + d.revenue, 0);
+  const prevRevenue = barPrevious.reduce((s, d) => s + d.revenue, 0);
+  const curOrders  = barCurrent.reduce((s, d) => s + d.orders, 0);
+  const prevOrders = barPrevious.reduce((s, d) => s + d.orders, 0);
+  const revComp = calcChange(curRevenue, prevRevenue);
+  const ordComp = calcChange(curOrders, prevOrders);
+  const proComp = calcChange(curRevenue * 0.65, prevRevenue * 0.65);
+
+  // Pie data: revenue by category
+  const pieData = useMemo((): PieSlice[] => {
+    const byCategory: Record<string, number> = {};
+    MOCK_PRODUCT_SALES.forEach((p) => {
+      byCategory[p.category] = (byCategory[p.category] ?? 0) + p.revenue;
+    });
+    return Object.entries(byCategory)
+      .map(([catId, rev], i) => ({
+        label: MENU_CATEGORIES.find((c) => c.id === catId)?.name ?? catId,
+        value: rev,
+        color: CATEGORY_COLORS[i % CATEGORY_COLORS.length],
+      }))
+      .sort((a, b) => b.value - a.value);
+  }, []);
+
+  // Top 5 products
+  const top5 = useMemo(
+    () => [...filteredSales].sort((a, b) => b.revenue - a.revenue).slice(0, 5),
+    [filteredSales],
+  );
+
+  // Totals for summary row
+  const filteredRevenue = filteredSales.reduce((s, d) => s + d.revenue, 0);
+  const filteredProfit  = filteredSales.reduce((s, d) => s + d.profit, 0);
+  const filteredUnits   = filteredSales.reduce((s, d) => s + d.unitsSold, 0);
+  const avgMargin = filteredSales.length > 0
+    ? filteredSales.reduce((s, d) => s + d.profitMargin, 0) / filteredSales.length
+    : 0;
+
+  return (
+    <div className="bg-background min-h-screen">
+      {/* ── Page Header ── */}
+      <header className="sticky top-0 z-30 border-b border-(--color-border-light) bg-(--color-bg-header) shadow-sm">
+        <div className="mx-auto flex max-w-screen-2xl items-center gap-4 px-4 py-3">
+          <Link
+            href="/manager"
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-(--color-text-muted) transition-colors hover:bg-(--color-accent-light) hover:text-(--color-primary)"
+          >
+            <i className="fa-solid fa-arrow-left"></i>
+          </Link>
+          <div className="flex items-center gap-3">
+            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-(--color-accent-light) text-(--color-primary)">
+              <i className="fa-solid fa-chart-line"></i>
+            </span>
+            <div>
+              <h1 className="text-foreground text-lg leading-tight font-bold">
+                Thống kê & Phân tích tài chính
+              </h1>
+              <p className="text-xs text-(--color-text-muted)">Financial Analytics Dashboard</p>
+            </div>
+          </div>
+
+          {/* Period selector */}
+          <div className="ml-auto flex items-center gap-2">
+            {(Object.keys(PERIOD_LABELS) as AnalyticsPeriod[]).map((p) => (
+              <button
+                key={p}
+                onClick={() => setPeriod(p)}
+                className={`hidden rounded-lg px-3 py-1.5 text-xs font-medium transition-colors sm:block ${
+                  period === p
+                    ? "bg-(--color-primary) text-white"
+                    : "bg-background text-(--color-text-muted) hover:bg-(--color-accent-light)"
+                }`}
+              >
+                {PERIOD_LABELS[p]}
+              </button>
+            ))}
+            <select
+              title="Chọn kỳ"
+              value={period}
+              onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
+              className="text-foreground block rounded-lg border border-(--color-border) bg-(--color-bg-card) px-2 py-1.5 text-xs sm:hidden"
+            >
+              {(Object.entries(PERIOD_LABELS) as [AnalyticsPeriod, string][]).map(([k, v]) => (
+                <option key={k} value={k}>{v}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-screen-2xl space-y-6 p-4 pb-10">
+        {/* ── Summary Cards ── */}
+        <section>
+          <h2 className="mb-3 text-sm font-semibold tracking-wider text-(--color-text-muted) uppercase">
+            Tổng quan
+          </h2>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            <SummaryCard icon="fa-solid fa-sack-dollar" title="Tổng doanh thu"
+              value={formatCurrency(totalRevenue)} subtitle={PERIOD_LABELS[period]}
+              change={revComp.change} changePercent={revComp.changePercent} isPositive={revComp.isPositive} />
+            <SummaryCard icon="fa-solid fa-receipt" title="Số đơn hàng"
+              value={totalOrders.toLocaleString()} subtitle="Tổng đơn trong kỳ"
+              change={ordComp.change} changePercent={ordComp.changePercent} isPositive={ordComp.isPositive} />
+            <SummaryCard icon="fa-solid fa-circle-dollar-to-slot" title="Tổng lợi nhuận"
+              value={formatCurrency(totalProfit)} subtitle="Ước tính từ dữ liệu bán hàng"
+              change={proComp.change} changePercent={proComp.changePercent} isPositive={proComp.isPositive} />
+            <SummaryCard icon="fa-solid fa-basket-shopping" title="Giá trị đơn TB"
+              value={formatCurrency(avgOrderValue)} subtitle="Doanh thu / số đơn hàng"
+              change={0} changePercent={0} isPositive={true} />
+          </div>
+        </section>
+
+        {/* ── Revenue Chart ── */}
+        <section className="bg-background rounded-2xl border border-(--color-border-light) p-5 shadow-sm">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <h2 className="text-foreground text-base font-semibold">
+              <i className="fa-solid fa-chart-area mr-2 text-(--color-primary)"></i>
+              Biểu đồ doanh thu
+            </h2>
+            <div className="flex gap-2">
+              {CHART_TYPES.map((t) => (
+                <button
+                  key={t}
+                  onClick={() => setActiveChart(t)}
+                  className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
+                    activeChart === t
+                      ? "bg-(--color-primary) text-white"
+                      : "bg-background text-(--color-text-muted) hover:bg-(--color-accent-light)"
+                  }`}
+                >
+                  <i className={`fa-solid text-xs ${CHART_META[t].icon}`}></i>
+                  <span className="hidden sm:inline">{CHART_META[t].label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {activeChart === "line" && (
+            <>
+              <p className="mb-3 text-xs text-(--color-text-muted)">Doanh thu theo thời gian — {PERIOD_LABELS[period]}</p>
+              <LineChart data={revenueData} height={220} />
+            </>
+          )}
+          {activeChart === "bar" && (
+            <>
+              <p className="mb-3 text-xs text-(--color-text-muted)">So sánh doanh thu nửa đầu và nửa sau kỳ hiện tại</p>
+              <BarChart current={barCurrent} previous={barPrevious} height={220} />
+            </>
+          )}
+          {activeChart === "pie" && (
+            <>
+              <p className="mb-3 text-xs text-(--color-text-muted)">Tỷ trọng doanh thu theo danh mục sản phẩm</p>
+              <PieChart data={pieData} />
+            </>
+          )}
+        </section>
+
+        {/* ── Top 5 Products ── */}
+        <section className="rounded-2xl border border-(--color-border-light) bg-(--color-bg-card) p-5 shadow-sm">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <h2 className="text-foreground text-base font-semibold">
+              <i className="fa-solid fa-fire mr-2 text-orange-500"></i>
+              Top sản phẩm bán chạy
+            </h2>
+            <CategorySelect value={categoryFilter} onChange={setCategoryFilter} />
+          </div>
+          <div className="space-y-3">
+            {top5.map((p, i) => {
+              const pct = (p.revenue / top5[0].revenue) * 100;
+              return (
+                <div key={p.productId}>
+                  <div className="mb-1 flex items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-(--color-accent-light) text-xs font-bold text-(--color-primary)">
+                        {i + 1}
+                      </span>
+                      <span className="text-foreground truncate text-sm font-medium">{p.name}</span>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-3 text-xs">
+                      <span className="text-(--color-text-muted) tabular-nums">{p.unitsSold} ly</span>
+                      <span className="font-semibold text-(--color-primary) tabular-nums">{formatCurrency(p.revenue)}</span>
+                    </div>
+                  </div>
+                  <div className="bg-background h-2 overflow-hidden rounded-full">
+                    <div className="h-full rounded-full bg-(--color-primary) transition-all duration-500" style={{ width: `${pct}%` }} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* ── Full Product Table ── */}
+        <section className="rounded-2xl border border-(--color-border-light) bg-(--color-bg-card) p-5 shadow-sm">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <h2 className="text-foreground text-base font-semibold">
+              <i className="fa-solid fa-table text-foreground mr-2"></i>
+              Phân tích chi tiết sản phẩm
+            </h2>
+            <CategorySelect value={categoryFilter} onChange={setCategoryFilter} label="Lọc danh mục:" />
+          </div>
+          <p className="mb-3 text-xs text-(--color-text-muted)">
+            Click vào tiêu đề cột để sắp xếp. Hiển thị {filteredSales.length} sản phẩm.
+          </p>
+          <ProductTable data={filteredSales} />
+
+          {/* Summary row */}
+          <div className="bg-background mt-4 flex flex-wrap gap-4 rounded-xl p-4 text-sm">
+            <div>
+              <span className="text-(--color-text-muted)">Tổng doanh thu: </span>
+              <span className="font-semibold text-(--color-primary)">{formatCurrencyFull(filteredRevenue)}</span>
+            </div>
+            <div>
+              <span className="text-(--color-text-muted)">Tổng lợi nhuận: </span>
+              <span className="font-semibold text-green-600">{formatCurrencyFull(filteredProfit)}</span>
+            </div>
+            <div>
+              <span className="text-(--color-text-muted)">Tổng sản lượng: </span>
+              <span className="text-foreground font-semibold">{filteredUnits.toLocaleString()} ly</span>
+            </div>
+            <div>
+              <span className="text-(--color-text-muted)">Biên LN trung bình: </span>
+              <span className="font-semibold text-yellow-700">{avgMargin.toFixed(1)}%</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

app/(manager)/manager/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+  CategoriesTab,
+  CombosTab,
+  ProductsTab,
+} from "@/components/organisms/manager";
+import { useAuth } from "@/lib/auth-context";
+import { useManager } from "@/lib/manager-context";
+import Link from "next/link";
+
+export default function ManagerPage() {
+  const { user, logout } = useAuth();
+  const { activeTab, setActiveTab, products, combos, categories } =
+    useManager();
+
+  const tabs = [
+    {
+      id: "products" as const,
+      label: "Thực đơn",
+      icon: "fa-solid fa-utensils",
+      count: products.length,
+    },
+    {
+      id: "combos" as const,
+      label: "Combo",
+      icon: "fa-solid fa-layer-group",
+      count: combos.length,
+    },
+    {
+      id: "categories" as const,
+      label: "Danh mục",
+      icon: "fa-solid fa-tags",
+      count: categories.length,
+    },
+  ];
+
+  return (
+    <div className="flex min-h-screen">
+      {/* ── Sidebar ── */}
+      <aside className="hidden w-64 shrink-0 flex-col border-r border-(--color-border-light) bg-white shadow-sm lg:flex">
+        <div className="flex items-center gap-3 border-b border-(--color-border-light) px-5 py-5">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-(--color-primary)">
+            <i className="fa-solid fa-store text-sm text-white"></i>
+          </div>
+          <div>
+            <p className="text-foreground text-sm font-bold">Manager</p>
+            <p className="text-xs text-(--color-text-muted)">Dashboard</p>
+          </div>
+        </div>
+
+        <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
+          </p>
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex w-full cursor-pointer items-center gap-3 rounded-xl border-none px-3 py-2.5 text-sm font-medium transition-all ${
+                activeTab === tab.id
+                  ? "bg-(--color-primary) text-white shadow-sm"
+                  : "hover:bg-background bg-transparent text-(--color-text-secondary) hover:text-(--color-primary-dark)"
+              }`}
+            >
+              <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>
+            </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
+            </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="rounded-full bg-(--color-accent-light) px-2 py-0.5 text-xs font-semibold text-(--color-primary)">
+                Mới
+              </span>
+            </Link>
+          </div>
+        </nav>
+
+        <div className="border-t border-(--color-border-light) p-3">
+          <div className="flex items-center gap-3 rounded-xl p-3">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-(--color-accent-light)">
+              <i className="fa-solid fa-user-tie text-sm text-(--color-primary)"></i>
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground truncate text-sm font-semibold">
+                {user?.name ?? "Quản lý"}
+              </p>
+              <p className="text-xs text-(--color-text-muted)">Quản lý quán</p>
+            </div>
+          </div>
+          <div className="mt-1 flex gap-2 px-1">
+            <Link
+              href="/"
+              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ủ
+            </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
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* ── Main content ── */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <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ý"}
+            </h1>
+            <p className="text-xs text-(--color-text-muted)">
+              Quản lý{" "}
+              {activeTab === "products"
+                ? "thực đơn"
+                : activeTab === "combos"
+                  ? "combo"
+                  : "danh mục"}{" "}
+              của quán
+            </p>
+          </div>
+
+          {/* Mobile tabs */}
+          <div className="flex items-center gap-1 lg:hidden">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex cursor-pointer items-center gap-1.5 rounded-xl border-none px-3 py-2 text-xs font-medium transition ${
+                  activeTab === tab.id
+                    ? "bg-(--color-primary) text-white"
+                    : "bg-background text-(--color-text-secondary) hover:text-(--color-primary)"
+                }`}
+              >
+                <i className={tab.icon}></i>
+                <span className="hidden sm:inline">{tab.label}</span>
+              </button>
+            ))}
+            <Link
+              href="/manager/analytics"
+              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>
+            </Link>
+          </div>
+
+          {/* Desktop actions */}
+          <div className="hidden items-center gap-2 lg:flex">
+            <Link
+              href="/manager/analytics"
+              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
+            </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ủ
+            </Link>
+          </div>
+        </header>
+
+        <main className="flex-1 p-5 md:p-8">
+          {activeTab === "products" && <ProductsTab />}
+          {activeTab === "combos" && <CombosTab />}
+          {activeTab === "categories" && <CategoriesTab />}
+        </main>
+      </div>
+    </div>
+  );
+}