@goplusvn/core 0.1.13 → 0.1.15

package/src/ui/shared/list-toolbar.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Download, Filter, MoreHorizontal, Plus, Search, X } from "lucide-react"
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+} from "../primitives"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../feedback"
+
+/**
+ * Mô tả 1 hành động phụ trong menu "…" (data-driven để toolbar tự render đúng
+ * DropdownMenuItem — tránh lỗi Radix context khi truyền JSX từ nguồn khác).
+ */
+export interface ListToolbarAction {
+  key: string
+  label: string
+  icon?: ReactNode
+  onClick: () => void
+  disabled?: boolean
+  destructive?: boolean
+  /** Ẩn mục (vd thiếu quyền) — toolbar tự lọc, caller cứ truyền cả danh sách. */
+  hidden?: boolean
+}
+
+interface ListToolbarProps {
+  search: string
+  onSearchChange: (value: string) => void
+  searchPlaceholder?: string
+  /** Bộ lọc chính — render inline cạnh ô tìm kiếm (vừa đủ 1 dòng). */
+  children?: ReactNode
+  /** Bộ lọc nâng cao — render trong Sheet; badge = advancedCount. */
+  advanced?: ReactNode
+  advancedCount?: number
+  /** Xóa lọc (chỉ hiện khi đang lọc). */
+  isFiltered?: boolean
+  onReset?: () => void
+  /** Xuất Excel — nằm trong menu "Khác" (…). */
+  onExport?: () => void
+  canExport?: boolean
+  /** Tạo mới — luôn ở cuối toolbar. */
+  onCreate?: () => void
+  canCreate?: boolean
+  createLabel?: string
+  /** Nút điều khiển bảng (dropdown "Hiển thị cột") — xem useTableControls. */
+  tableControls?: ReactNode
+  /** Hành động phụ trong menu "…" (vd Cấu hình, In hàng loạt). Ít dùng. */
+  moreActions?: ListToolbarAction[]
+}
+
+/**
+ * Toolbar danh sách dùng chung — khớp phong cách trang đơn bán hàng:
+ * [tìm kiếm] [lọc chính 1 dòng] · [Bộ lọc nâng cao + badge] [Xóa lọc] [… Xuất] [+ Tạo mới].
+ * Toolbar trần (không khung card), bộ lọc tràn dòng → đưa vào slot `advanced` (Sheet).
+ */
+export function ListToolbar({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Tìm kiếm...",
+  children,
+  advanced,
+  advancedCount = 0,
+  isFiltered,
+  onReset,
+  onExport,
+  canExport = true,
+  onCreate,
+  canCreate = true,
+  createLabel = "Tạo mới",
+  tableControls,
+  moreActions,
+}: ListToolbarProps) {
+  const showExport = canExport && !!onExport
+  const actions = (moreActions ?? []).filter((a) => !a.hidden)
+  const showMoreMenu = showExport || actions.length > 0
+
+  return (
+    <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between w-full gap-3 xl:gap-4">
+      {/* Tìm kiếm + bộ lọc chính */}
+      <div className="flex w-full xl:w-auto flex-1 flex-wrap items-center gap-2 xl:gap-3">
+        <div className="relative w-full sm:flex-1 sm:min-w-[220px] xl:flex-[2] xl:min-w-[300px]">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 h-9 w-full bg-secondary/30 focus:bg-background shadow-sm focus-visible:ring-inset focus-visible:ring-offset-0"
+          />
+        </div>
+        {children}
+      </div>
+
+      {/* Hành động */}
+      <div className="flex flex-wrap sm:flex-nowrap items-center justify-between xl:justify-end gap-2 w-full xl:w-auto shrink-0">
+        {/* Bộ lọc nâng cao + Xóa lọc */}
+        <div className="flex items-center">
+          {advanced && (
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="h-9 min-w-9 shrink-0 shadow-sm relative"
+                  title="Bộ lọc nâng cao"
+                >
+                  <Filter className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline font-medium">Bộ lọc</span>
+                  {advancedCount > 0 && (
+                    <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground border-2 border-background">
+                      {advancedCount}
+                    </span>
+                  )}
+                </Button>
+              </SheetTrigger>
+              <SheetContent
+                side="right"
+                className="flex flex-col h-full w-full sm:max-w-md p-0 gap-0"
+              >
+                <SheetHeader className="text-left px-6 py-4 border-b flex flex-row items-center justify-between space-y-0">
+                  <div className="space-y-1">
+                    <SheetTitle className="text-lg font-bold">
+                      Bộ lọc nâng cao
+                    </SheetTitle>
+                    <SheetDescription>
+                      Tinh chỉnh danh sách theo các tiêu chí bên dưới.
+                    </SheetDescription>
+                  </div>
+                  <SheetClose asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 rounded-full shrink-0"
+                    >
+                      <X className="h-5 w-5" />
+                      <span className="sr-only">Đóng</span>
+                    </Button>
+                  </SheetClose>
+                </SheetHeader>
+                <div className="flex-1 overflow-y-auto px-6 py-5">
+                  <div className="flex flex-col gap-5">{advanced}</div>
+                </div>
+                <div className="border-t px-6 py-4 flex items-center gap-2">
+                  {onReset && (
+                    <Button
+                      variant="outline"
+                      onClick={onReset}
+                      className="flex-1 text-muted-foreground hover:text-destructive"
+                    >
+                      <X className="mr-1 h-4 w-4" /> Xóa lọc
+                    </Button>
+                  )}
+                  <SheetClose asChild>
+                    <Button className="flex-1">Xem kết quả</Button>
+                  </SheetClose>
+                </div>
+              </SheetContent>
+            </Sheet>
+          )}
+          {isFiltered && onReset && (
+            <Button
+              onClick={onReset}
+              variant="ghost"
+              size="sm"
+              className="h-9 ml-1 text-muted-foreground hover:text-destructive hidden sm:flex"
+              title="Xóa tất cả bộ lọc"
+            >
+              Xóa lọc
+            </Button>
+          )}
+        </div>
+
+        {/* Điều khiển cột + Khác (…) + Tạo mới */}
+        <div className="flex items-center gap-2">
+          {tableControls}
+          {showMoreMenu && (
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-9 w-9 p-0 shadow-sm"
+                  title="Khác"
+                >
+                  <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-[200px]">
+                <DropdownMenuLabel className="text-xs text-muted-foreground uppercase">
+                  Hành động
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {showExport && (
+                  <DropdownMenuItem
+                    onClick={onExport}
+                    className="gap-2 cursor-pointer"
+                  >
+                    <Download className="h-4 w-4" />
+                    Xuất danh sách (Excel)
+                  </DropdownMenuItem>
+                )}
+                {actions.map((action) => (
+                  <DropdownMenuItem
+                    key={action.key}
+                    onClick={action.onClick}
+                    disabled={action.disabled}
+                    className={`gap-2 cursor-pointer${action.destructive ? " text-destructive focus:text-destructive" : ""}`}
+                  >
+                    {action.icon}
+                    {action.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {canCreate && onCreate && (
+            <Button
+              size="sm"
+              onClick={onCreate}
+              className="h-9 font-medium shadow-sm"
+            >
+              <Plus className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">{createLabel}</span>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Ô lọc trong Sheet nâng cao: nhãn + control, xếp dọc.
+ */
+export function AdvancedField({
+  label,
+  children,
+}: {
+  label: string
+  children: ReactNode
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-xs font-medium text-muted-foreground">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}

package/src/ui/shared/page-header.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * PageHeader — standardized page header (title + description + icon + actions).
+ * Promoted from vinhhoa/wu; every app was copying this.
+ */
+
+import React, { memo } from "react";
+import { cn } from "../../utils";
+
+export interface PageHeaderProps {
+  /** Page title (required) */
+  title: string;
+  /** Optional subtitle/description */
+  description?: string;
+  /** Optional icon displayed before the title */
+  icon?: React.ReactNode;
+  /** Right-side actions (buttons, filters, etc.) */
+  actions?: React.ReactNode;
+  /** Breadcrumb node above the title */
+  breadcrumbs?: React.ReactNode;
+  /** Extra content below the title/actions row */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const PageHeader = memo(function PageHeader({
+  title,
+  description,
+  icon,
+  actions,
+  breadcrumbs,
+  children,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      {breadcrumbs && <div className="text-xs text-text-tertiary">{breadcrumbs}</div>}
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex min-w-0 items-center gap-3">
+          {icon && <div className="flex-shrink-0 text-text-secondary">{icon}</div>}
+          <div className="min-w-0">
+            <h1 className="truncate text-lg font-semibold text-text-primary">{title}</h1>
+            {description && (
+              <p className="mt-0.5 truncate text-sm text-text-secondary">{description}</p>
+            )}
+          </div>
+        </div>
+
+        {actions && <div className="flex flex-shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+
+      {children && <div className="mt-3">{children}</div>}
+    </div>
+  );
+});

package/src/ui/shared/stat-bar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+// StatBar — horizontal KPI strip (vinhhoa style). A thin wrapper over
+// CompactStatBar that lets SERVER pages pass plain data (iconName as a string)
+// without importing lucide components in the server component.
+import { CompactStatBar, type CompactStatItem } from "../data-display";
+import {
+  AlertTriangle, Ban, Boxes, Building2, CheckCircle2, Clock, FileCheck2, GitCompareArrows,
+  KeyRound, Landmark, ListChecks, MousePointerClick, PauseCircle, Percent, ShieldAlert, ShieldCheck,
+  Users, Wallet, XCircle, Zap, type LucideIcon,
+} from "lucide-react";
+
+const ICONS: Record<string, LucideIcon> = {
+  ListChecks, CheckCircle2, PauseCircle, Ban, Clock, XCircle, GitCompareArrows,
+  AlertTriangle, Percent, Landmark, Building2, Wallet, FileCheck2, ShieldAlert, Users,
+  ShieldCheck, KeyRound, Boxes, MousePointerClick, Zap,
+};
+
+export type StatItem = {
+  id: string;
+  label: string;
+  value: string | number;
+  iconName: keyof typeof ICONS | string;
+  colorTheme?: CompactStatItem["colorTheme"];
+  isHighlighted?: boolean;
+};
+
+export function StatBar({ items }: { items: StatItem[] }) {
+  const mapped: CompactStatItem[] = items.map((i) => ({
+    id: i.id,
+    label: i.label,
+    value: i.value,
+    icon: ICONS[i.iconName as string] ?? ListChecks,
+    colorTheme: i.colorTheme,
+    isHighlighted: i.isHighlighted,
+  }));
+  return <CompactStatBar items={mapped} />;
+}

package/src/ui/shared/status-indicator.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+/**
+ * StatusIndicator — Semantic status dot + text component
+ * Inspired by Plane's priority-icon pattern
+ *
+ * Maps ERP status strings to semantic colors automatically.
+ * Supports custom color overrides for non-standard statuses.
+ *
+ * @example
+ * <StatusIndicator status="active" />
+ * <StatusIndicator status="pending" />
+ * <StatusIndicator status="cancelled" label="Đã hủy" />
+ */
+
+import React, { memo, useMemo } from "react"
+import { cn } from "../../utils"
+
+// ── Status → Semantic Color Map ──────────────────────────────
+const STATUS_MAP: Record<string, { color: string; dotClass: string; label: string }> = {
+  // Active / Positive
+  active:       { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Hoạt động" },
+  completed:    { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Hoàn thành" },
+  delivered:    { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Đã giao" },
+  paid:         { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Đã thanh toán" },
+  approved:     { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Đã duyệt" },
+  director_approved: { color: "text-success-text", dotClass: "bg-success-semantic", label: "Giám đốc đã duyệt" },
+  confirmed:    { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Đã xác nhận" },
+  received:     { color: "text-success-text",  dotClass: "bg-success-semantic",    label: "Đã nhận" },
+  delivery_completed: { color: "text-success-text", dotClass: "bg-success-semantic", label: "Hoàn thành" },
+  supplier_confirmed: { color: "text-success-text", dotClass: "bg-success-semantic", label: "NCC xác nhận" },
+
+  // Pending / Warning
+  pending:      { color: "text-warning-text",  dotClass: "bg-warning",             label: "Chờ xử lý" },
+  processing:   { color: "text-warning-text",  dotClass: "bg-warning",             label: "Đang xử lý" },
+  partial:      { color: "text-warning-text",  dotClass: "bg-warning",             label: "Một phần" },
+  partially_paid:{ color: "text-warning-text",  dotClass: "bg-warning",             label: "TT một phần" },
+  waiting:      { color: "text-warning-text",  dotClass: "bg-warning",             label: "Đang chờ" },
+  sent:         { color: "text-warning-text",  dotClass: "bg-warning",             label: "Chờ duyệt" },
+  pending_l1:   { color: "text-warning-text",  dotClass: "bg-warning",             label: "Chờ duyệt L1" },
+  pending_l2:   { color: "text-warning-text",  dotClass: "bg-warning",             label: "Chờ duyệt L2" },
+  pending_l3:   { color: "text-warning-text",  dotClass: "bg-warning",             label: "Chờ duyệt L3" },
+  pending_control: { color: "text-warning-text", dotClass: "bg-warning",           label: "Chờ kiểm soát" },
+  accounting_pending: { color: "text-warning-text", dotClass: "bg-warning",        label: "Chờ KT duyệt" },
+  director_pending: { color: "text-warning-text", dotClass: "bg-warning",          label: "Chờ BGĐ duyệt" },
+  accounting_revision: { color: "text-warning-text", dotClass: "bg-warning",       label: "Chỉnh sửa" },
+  waiting_supplier:{ color: "text-warning-text", dotClass: "bg-warning",           label: "Chờ NCC" },
+  partially_received: { color: "text-warning-text", dotClass: "bg-warning",        label: "Nhận một phần" },
+  delivery_adjustment: { color: "text-warning-text", dotClass: "bg-warning",       label: "Điều chỉnh giao hàng" },
+
+  // Info / In-progress
+  ordered:      { color: "text-info-text",     dotClass: "bg-info",                label: "Đã đặt" },
+  shipping:     { color: "text-info-text",     dotClass: "bg-info",                label: "Đang giao" },
+  in_transit:   { color: "text-info-text",     dotClass: "bg-info",                label: "Đang vận chuyển" },
+  delivering:   { color: "text-info-text",     dotClass: "bg-info",                label: "Đang giao hàng" },
+  accounting_approved: { color: "text-info-text", dotClass: "bg-info",             label: "Kế toán đã duyệt" },
+
+  // Danger / Negative
+  cancelled:    { color: "text-danger-text",   dotClass: "bg-danger",              label: "Đã hủy" },
+  overdue:      { color: "text-danger-text",   dotClass: "bg-danger",              label: "Quá hạn" },
+  rejected:     { color: "text-danger-text",   dotClass: "bg-danger",              label: "Từ chối" },
+  failed:       { color: "text-danger-text",   dotClass: "bg-danger",              label: "Thất bại" },
+  inactive:     { color: "text-danger-text",   dotClass: "bg-danger",              label: "Ngừng hoạt động" },
+  unpaid:       { color: "text-danger-text",   dotClass: "bg-danger",              label: "Chưa thanh toán" },
+  refunded:     { color: "text-danger-text",   dotClass: "bg-danger",              label: "Đã hoàn tiền" },
+  returned:     { color: "text-danger-text",   dotClass: "bg-danger",              label: "Hoàn trả" },
+
+  // Neutral
+  draft:        { color: "text-text-tertiary", dotClass: "bg-text-tertiary",       label: "Nháp" },
+  archived:     { color: "text-text-disabled", dotClass: "bg-text-disabled",       label: "Lưu trữ" },
+  unknown:      { color: "text-text-tertiary", dotClass: "bg-text-tertiary",       label: "Không xác định" },
+}
+
+// ── Tone (text color) → Badge variant ───────────────────────
+// Lets callers render the SAME status taxonomy as a filled colored Badge
+// (bg + text) instead of a bare dot. Single source of truth = STATUS_MAP.
+const TONE_TO_BADGE_VARIANT: Record<
+  string,
+  "success" | "warning" | "danger" | "info" | "secondary"
+> = {
+  "text-success-text": "success",
+  "text-warning-text": "warning",
+  "text-danger-text": "danger",
+  "text-info-text": "info",
+  "text-text-tertiary": "secondary",
+  "text-text-disabled": "secondary",
+}
+
+// ── "Solid / Trầm sang" (direction D) chip styles ────────────
+// Deep step-700 fills + white text. The subtle Badge variants (green-3 etc.)
+// wash out on dark surfaces like the navy order header; these read crisply on
+// both white and navy. Keyed by Badge variant so it tracks the same taxonomy.
+const SOLID_STATUS_CLASS: Record<string, string> = {
+  success: "bg-emerald-700 text-white",
+  warning: "bg-amber-700 text-white",
+  danger: "bg-red-700 text-white",
+  info: "bg-blue-700 text-white",
+  secondary: "bg-slate-600 text-white",
+}
+
+/**
+ * Resolve a status string to its canonical label + colors + matching Badge
+ * variant. Use when you need a filled colored chip (e.g. the order header)
+ * rather than the dot-only `StatusIndicator`.
+ *
+ * - `badgeVariant`: the subtle semantic Badge variant (good on white surfaces).
+ * - `solidClass`: deep "Trầm sang" fill + white text (good on navy/dark bars).
+ */
+export function getStatusMeta(status: string, labelOverride?: string) {
+  const key = status?.toLowerCase().replace(/\s+/g, "_") ?? "unknown"
+  const resolved = STATUS_MAP[key] ?? STATUS_MAP.unknown
+  const badgeVariant = TONE_TO_BADGE_VARIANT[resolved.color] ?? "secondary"
+  return {
+    label: labelOverride ?? resolved.label,
+    color: resolved.color,
+    dotClass: resolved.dotClass,
+    badgeVariant,
+    solidClass: SOLID_STATUS_CLASS[badgeVariant] ?? SOLID_STATUS_CLASS.secondary,
+  }
+}
+
+export interface StatusIndicatorProps {
+  /** Status key (e.g., "active", "pending", "cancelled") */
+  status: string
+  /** Override the default Vietnamese label */
+  label?: string
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Show dot only (no text) */
+  dotOnly?: boolean
+  /** Custom dot color class override */
+  dotColor?: string
+  /** Additional CSS classes */
+  className?: string
+}
+
+export const StatusIndicator = memo(function StatusIndicator({
+  status,
+  label: labelOverride,
+  size = "md",
+  dotOnly = false,
+  dotColor,
+  className,
+}: StatusIndicatorProps) {
+  const resolved = useMemo(() => {
+    const key = status?.toLowerCase().replace(/\s+/g, "_") ?? "unknown"
+    return STATUS_MAP[key] ?? STATUS_MAP.unknown
+  }, [status])
+
+  const dotSizeClass = size === "sm" ? "size-1.5" : size === "lg" ? "size-3" : "size-2"
+  const textSizeClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs"
+  const displayLabel = labelOverride ?? resolved.label
+
+  if (dotOnly) {
+    return (
+      <span
+        className={cn("inline-block rounded-full", dotColor ?? resolved.dotClass, dotSizeClass, className)}
+        title={displayLabel}
+      />
+    )
+  }
+
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", className)}>
+      <span
+        className={cn("inline-block rounded-full flex-shrink-0", dotColor ?? resolved.dotClass, dotSizeClass)}
+      />
+      <span className={cn("font-medium", resolved.color, textSizeClass)}>
+        {displayLabel}
+      </span>
+    </span>
+  )
+})

package/src/ui/shared/table-styles.ts

@@ -0,0 +1,47 @@
+// Hợp đồng style bảng CHUẨN của app — trích từ bảng "Đơn bán hàng" của vinhhoa
+// để MỌI trang có bảng (trừ trang CRUD generic) dùng lại đồng nhất: header dính,
+// hàng zebra + viền trái primary khi hover, số tiền vàng, footer dính.
+//
+// Cách dùng: import các hằng này thay vì tự viết class rời rạc.
+//   <div className={tableShell}><div className={tableScroll}>
+//     <Table className={cn(tableBase, "min-w-[1200px]")}>
+//       <TableHeader className={theadSticky}><TableRow className={headerRow}>
+//         <TableHead className={thClass}>…</TableHead>
+//       …
+//       <TableRow className={bodyRow} onClick={…}>
+//         <TableCell className={sttCell}>{i+1}</TableCell>
+//         <TableCell className={moneyCell} style={{ color: MONEY_GOLD }}>…</TableCell>
+
+export const tableShell =
+  "flex h-full flex-col overflow-hidden rounded-md border border-border bg-card shadow-sm";
+
+export const tableScroll = "relative min-h-0 flex-1 overflow-auto show-scrollbar";
+
+// w-full ép bảng GIÃN HẾT chiều rộng khung (core mặc định w-max → co cụm theo nội
+// dung trên màn rộng; w-full đè lại). Kèm min-w-[Xpx] ở từng bảng để cuộn ngang
+// khi màn hẹp. border-separate để nền header/footer dính không bị viền cell xuyên qua.
+export const tableBase = "w-full border-separate border-spacing-0";
+
+export const theadSticky = "sticky top-0 z-20 bg-card";
+
+export const headerRow = "border-b-2 border-border hover:bg-transparent";
+
+export const thClass = "whitespace-nowrap bg-card py-2.5 text-xs font-semibold text-foreground";
+
+// Hàng dữ liệu: con trỏ tay, zebra, hover đổi nền + viền trái primary (không xê dịch).
+export const bodyRow =
+  "group relative cursor-pointer border-b border-l-[3px] border-border/40 border-l-transparent transition-colors even:bg-muted/30 hover:border-l-primary hover:bg-accent/50 dark:hover:bg-slate-800/40";
+
+// Hàng không bấm được (chỉ hiển thị) — bỏ con trỏ tay.
+export const bodyRowStatic =
+  "group relative border-b border-l-[3px] border-border/40 border-l-transparent transition-colors even:bg-muted/30 hover:bg-accent/40";
+
+export const sttCell = "text-center text-xs tabular-nums text-muted-foreground";
+
+export const moneyCell = "whitespace-nowrap text-right font-bold tabular-nums";
+
+// Vàng tiền tệ dùng thống nhất toàn app (giống ô "Tổng tiền" đơn bán hàng).
+export const MONEY_GOLD = "#c8860b";
+
+export const tfootSticky =
+  "sticky bottom-0 z-20 border-t-2 border-border bg-card [&>tr]:hover:bg-transparent";

package/src/ui/shared/table-sum-footer.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { TableCell } from "../primitives";
+
+import { cn } from "../../utils";
+
+/**
+ * Ô tổng dùng chung cho dòng <TableFooter> của các bảng danh sách — bám mẫu
+ * đơn bán hàng vinhhoa. `value` là tổng TOÀN BỘ kết quả sau lọc (mọi trang),
+ * không phải tổng của riêng trang hiển thị.
+ */
+export function SumFooterCell({
+  value,
+  note,
+  align = "right",
+  colSpan,
+  className,
+}: {
+  value: string;
+  note?: string;
+  align?: "left" | "center" | "right";
+  colSpan?: number;
+  className?: string;
+}) {
+  const alignText = align === "left" ? "text-left" : align === "center" ? "text-center" : "text-right";
+  const alignItems = align === "left" ? "items-start" : align === "center" ? "items-center" : "items-end";
+
+  return (
+    <TableCell colSpan={colSpan} className={cn("whitespace-nowrap bg-card py-2 tabular-nums", alignText, className)}>
+      <div className={cn("flex flex-col leading-tight", alignItems)}>
+        <span className="font-bold text-foreground">{value}</span>
+        {note != null && <span className="text-[10px] font-medium text-muted-foreground">{note}</span>}
+      </div>
+    </TableCell>
+  );
+}
+
+/** Cộng nhanh một trường số trên mảng dòng (tổng-trang phía client). */
+export function sumBy<T>(rows: T[], pick: (row: T) => number | null | undefined) {
+  return rows.reduce((acc, row) => acc + (Number(pick(row)) || 0), 0);
+}