@goplusvn/core 0.1.12 → 0.1.14

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);
+}