@goplusvn/core 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.1.14 — Init-completion: server-CRUD engine, auth gate, schema-tolerant RBAC, shared UI
+
+Đúc kết từ việc dựng app mới (wu-vpbank): những thứ MỖI app phải tự viết lại nay
+đưa vào core (xem `docs/CORE-INIT-COMPLETION-PLAN.md`). Toàn bộ **additive, backward-
+compatible** — 4 app (vinhhoa/thingtodo/wu ^0.1.13, tanloc ^0.1.3) an toàn.
+
+- **Server-CRUD engine** (`@goerp/core/crud/server`): `createServerCrudService`
+  (Prisma-agnostic qua DI), `getModelName`, `createAuditUserNameResolver` (schema-
+  tolerant tên user), `createCrudCollectionHandlers`/`createCrudItemHandlers` (route
+  Next.js tự gác quyền). App bỏ ~350 LOC engine tự chế.
+- **Auth request-gate** (`@goerp/core/auth/proxy-gate`): `createAuthProxy` (default-
+  deny) + `unauthorizedResponse`. proxy.ts app còn ~10 LOC.
+- **RBAC schema-tolerant**: `getRolesData(db, params, schema?)` nhận field-map
+  (`userNameField`/`userActiveField`/`userImageField`/`roleTimestamps`) → app schema
+  khác (User.fullName/active, Role không timestamps) không còn crash/tự chế.
+- **Shared UI** (`@goerp/core/ui`): PageHeader, StatusIndicator + getStatusMeta,
+  SumFooterCell + sumBy, table-styles (mẫu bảng đơn bán hàng, subpath server-safe
+  `@goerp/core/ui/shared/table-styles`); export DynamicIcon.
+
+Verify: core tsc 0 lỗi; wu consume toàn bộ (tsc 0/0 + render/CRUD/auth chạy đúng);
+golden vinhhoa tsc 20=20 (0 regression).
+
 ## 0.1.13 — Customizer: make radius, density & inset/floating actually apply
 
 The Customizer exposed controls that stored a value but changed nothing on

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -36,6 +36,8 @@
     },
     "./assets/*": "./src/assets/*",
     "./styles/*": "./src/styles/*",
+    "./auth/proxy-gate": "./src/auth/proxy-gate.ts",
+    "./ui/shared/table-styles": "./src/ui/shared/table-styles.ts",
     "./errors/app-error": "./src/errors/app-error.ts",
     "./errors/error-handler": "./src/errors/error-handler.ts",
     "./errors/server-error": "./src/errors/server-error.ts",

package/src/auth/proxy-gate.ts

@@ -0,0 +1,80 @@
+// @goerp/core/auth/proxy-gate — server-only request-gate for the Next.js
+// proxy/middleware. Default-DENY authentication (authN); route-level authZ still
+// happens via getCrudPermissions/checkPermission. Isolated in its own subpath so
+// `next/server` + `next-auth/jwt` never leak into client bundles via the auth barrel.
+//
+// Usage (app side):
+//   // src/proxy.ts
+//   import { createAuthProxy } from "@goerp/core/auth/proxy-gate";
+//   export const proxy = createAuthProxy({ homePath: "/vi" });
+//   export default proxy;
+//   export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.[^/]+$).*)"] };
+
+import { NextResponse } from "next/server";
+import { getToken } from "next-auth/jwt";
+import type { NextRequest } from "next/server";
+
+export interface AuthProxyOptions {
+  /** API prefixes served without a session (NextAuth + public). Default: /api/auth, /api/public. */
+  publicApiPrefixes?: string[];
+  /** Pages reachable while logged out. Default: /sign-in. */
+  publicPages?: string[];
+  /** Where to send unauthenticated page requests. Default: /sign-in. */
+  signInPath?: string;
+  /** Where to send a logged-in user who hits a guest page. Default: "/". */
+  homePath?: string;
+  /** Override token reader (tests / custom JWT). Default: next-auth getToken. */
+  getToken?: (req: NextRequest) => Promise<unknown | null>;
+}
+
+const startsWithAny = (pathname: string, list: string[]) =>
+  list.some((p) => pathname === p || pathname.startsWith(`${p}/`));
+
+export function createAuthProxy(options: AuthProxyOptions = {}) {
+  const publicApiPrefixes = options.publicApiPrefixes ?? ["/api/auth", "/api/public"];
+  const publicPages = options.publicPages ?? ["/sign-in"];
+  const signInPath = options.signInPath ?? "/sign-in";
+  const homePath = options.homePath ?? "/";
+  const readToken = options.getToken ?? ((req: NextRequest) => getToken({ req }));
+
+  return async function proxy(request: NextRequest) {
+    const { pathname, search } = request.nextUrl;
+
+    // API routes that authenticate themselves (NextAuth) or are public → pass.
+    if (startsWithAny(pathname, publicApiPrefixes)) return NextResponse.next();
+
+    const token = await readToken(request);
+
+    // Guest pages (/sign-in): bounce an already-authed user to home.
+    if (startsWithAny(pathname, publicPages)) {
+      if (token) {
+        const url = request.nextUrl.clone();
+        url.pathname = homePath;
+        url.search = "";
+        return NextResponse.redirect(url);
+      }
+      return NextResponse.next();
+    }
+
+    // API: default-deny (each route still does its own authZ).
+    if (pathname.startsWith("/api")) {
+      if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+      return NextResponse.next();
+    }
+
+    // Pages: must be signed in; preserve callbackUrl.
+    if (!token) {
+      const url = request.nextUrl.clone();
+      url.pathname = signInPath;
+      url.search = "";
+      if (pathname !== "/") url.searchParams.set("callbackUrl", pathname + search);
+      return NextResponse.redirect(url);
+    }
+    return NextResponse.next();
+  };
+}
+
+/** 401 JSON for API route catch/guard blocks. */
+export function unauthorizedResponse() {
+  return Response.json({ error: "Unauthorized" }, { status: 401 });
+}

package/src/crud/crud-route-handlers.ts

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Next.js route-handler factories for the generic CRUD engine. Wires session +
+// RBAC permission gate + entity config + {@link ServerCrudService} so an app's
+// route file is one line:
+//
+//   // src/app/api/crud/[entity]/route.ts
+//   import { createCrudCollectionHandlers } from "@goerp/core/crud/server";
+//   import { getSession } from "@/lib/auth";
+//   import { getEntityConfig } from "@/configs/entities";
+//   import { crudService } from "@/lib/crud";
+//   export const { GET, POST } = createCrudCollectionHandlers({ getSession, getEntityConfig, service: crudService });
+//
+//   // src/app/api/crud/[entity]/[id]/route.ts
+//   export const { GET, PUT, PATCH, DELETE } = createCrudItemHandlers({ getSession, getEntityConfig, service: crudService });
+
+import type { EntityConfig } from "../types";
+import { getCrudPermissions } from "./lib/permissions";
+import type { ServerCrudService } from "./server-service";
+
+type MaybePromise<T> = T | Promise<T>;
+
+export interface CrudHandlerDeps {
+  getSession: () => MaybePromise<any | null>;
+  getEntityConfig: (entity: string) => EntityConfig | undefined;
+  service: ServerCrudService;
+  /** Optional error mapper (e.g. app's serverError). Defaults to a 500 JSON. */
+  onError?: (error: unknown, req: Request) => Response | Promise<Response>;
+}
+
+const json = (data: unknown, status = 200) =>
+  new Response(JSON.stringify(data), { status, headers: { "content-type": "application/json" } });
+
+const unauthorized = () => json({ error: "Unauthorized" }, 401);
+const forbidden = () => json({ error: "Forbidden" }, 403);
+const unknownEntity = () => json({ error: "Unknown entity" }, 404);
+
+async function resolvePerms(session: any, config: EntityConfig, entity: string) {
+  return getCrudPermissions(session, config.permissionResource ?? entity);
+}
+
+// GET/POST for the collection route `/api/crud/[entity]`.
+export function createCrudCollectionHandlers(deps: CrudHandlerDeps) {
+  const { getSession, getEntityConfig, service, onError } = deps;
+  const fail = (e: unknown, req: Request) =>
+    onError ? onError(e, req) : json({ error: "Internal error" }, 500);
+
+  async function GET(req: Request, ctx: { params: Promise<{ entity: string }> }) {
+    const { entity } = await ctx.params;
+    try {
+      const session = await getSession();
+      if (!session) return unauthorized();
+      const config = getEntityConfig(entity);
+      if (!config) return unknownEntity();
+      const perms = await resolvePerms(session, config, entity);
+      if (!perms.read) return forbidden();
+
+      const sp = new URL(req.url).searchParams;
+      const params = {
+        page: parseInt(sp.get("page") || "1", 10),
+        pageSize: parseInt(sp.get("pageSize") || "10", 10),
+        search: sp.get("search") || undefined,
+        sort: sp.get("sortField")
+          ? { field: sp.get("sortField")!, direction: (sp.get("sortDirection") as "asc" | "desc") || "asc" }
+          : undefined,
+        filters: sp.get("filters") ? JSON.parse(sp.get("filters")!) : undefined,
+      };
+      const data = await service.list(entity, config, params as any);
+      return json(data);
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  async function POST(req: Request, ctx: { params: Promise<{ entity: string }> }) {
+    const { entity } = await ctx.params;
+    try {
+      const session = await getSession();
+      if (!session) return unauthorized();
+      const config = getEntityConfig(entity);
+      if (!config) return unknownEntity();
+      const perms = await resolvePerms(session, config, entity);
+      if (!perms.create) return forbidden();
+
+      const body = await req.json();
+      if (Array.isArray(body)) {
+        const results = [];
+        for (const item of body) results.push(await service.create(entity, item, config));
+        return json(results);
+      }
+      return json(await service.create(entity, body, config));
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  return { GET, POST };
+}
+
+// GET/PUT/PATCH/DELETE for the item route `/api/crud/[entity]/[id]`.
+export function createCrudItemHandlers(deps: CrudHandlerDeps) {
+  const { getSession, getEntityConfig, service, onError } = deps;
+  const fail = (e: unknown, req: Request) =>
+    onError ? onError(e, req) : json({ error: "Internal error" }, 500);
+
+  type Ctx = { params: Promise<{ entity: string; id: string }> };
+
+  async function GET(req: Request, ctx: Ctx) {
+    const { entity, id } = await ctx.params;
+    try {
+      const session = await getSession();
+      if (!session) return unauthorized();
+      const config = getEntityConfig(entity);
+      if (!config) return unknownEntity();
+      const perms = await resolvePerms(session, config, entity);
+      if (!perms.read) return forbidden();
+      const item = await service.getById(entity, id);
+      if (!item) return json({ error: "Not found" }, 404);
+      return json(item);
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  async function PUT(req: Request, ctx: Ctx) {
+    const { entity, id } = await ctx.params;
+    try {
+      const session = await getSession();
+      if (!session) return unauthorized();
+      const config = getEntityConfig(entity);
+      if (!config) return unknownEntity();
+      const perms = await resolvePerms(session, config, entity);
+      if (!perms.update) return forbidden();
+      const body = await req.json();
+      return json(await service.update(entity, id, body, config));
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  async function DELETE(req: Request, ctx: Ctx) {
+    const { entity, id } = await ctx.params;
+    try {
+      const session = await getSession();
+      if (!session) return unauthorized();
+      const config = getEntityConfig(entity);
+      if (!config) return unknownEntity();
+      const perms = await resolvePerms(session, config, entity);
+      if (!perms.delete) return forbidden();
+      await service.delete(entity, id);
+      return new Response(null, { status: 204 });
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  return { GET, PUT, PATCH: PUT, DELETE };
+}

package/src/crud/server-service.ts

@@ -0,0 +1,312 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Generic server-side CRUD engine (Prisma-backed) for @goerp/core.
+//
+// Core is schema-agnostic, so this is a FACTORY: the consuming app injects its
+// own Prisma client + entity→model resolver. The engine itself (query building,
+// filter/sort/search allowlist, relation connect/disconnect, Decimal serialize)
+// lives here so every app stops re-implementing it.
+//
+// Usage (app side):
+//   import { createServerCrudService, getModelName } from "@goerp/core/crud/server";
+//   import { prisma } from "@/lib/prisma";
+//   const MODEL_MAP = { customers: "customer", "fee-schedules": "feeSchedule" };
+//   export const crudService = createServerCrudService({
+//     prisma,
+//     getModelName: (e) => getModelName(e, MODEL_MAP),
+//   });
+
+import type { CrudQueryParams, CrudResponse, EntityConfig } from "../types";
+import { serializeDecimalFields } from "../utils/serialize";
+
+type PrismaLike = Record<string, any>;
+
+export interface ServerCrudService {
+  list(entity: string, config: EntityConfig, params: CrudQueryParams): Promise<CrudResponse>;
+  getById(entity: string, id: string): Promise<any>;
+  create(entity: string, data: any, config?: EntityConfig): Promise<any>;
+  update(entity: string, id: string, data: any, config?: EntityConfig): Promise<any>;
+  delete(entity: string, id: string): Promise<any>;
+  deleteMany(entity: string, ids: string[]): Promise<any>;
+}
+
+export interface ServerCrudLogger {
+  warn(message: string, ...rest: unknown[]): void;
+  error(message: string, ...rest: unknown[]): void;
+}
+
+export interface ServerCrudDeps {
+  /** The app's PrismaClient instance. */
+  prisma: PrismaLike;
+  /** Resolve a plural entity key → Prisma model name. Defaults to {@link getModelName}. */
+  getModelName?: (entity: string) => string;
+  /** Optional: enrich rows with createdByName/updatedByName. Schema-tolerant — inject
+   *  {@link createAuditUserNameResolver} if your User model exposes a name field. */
+  resolveAuditNames?: (records: any[]) => Promise<any[]>;
+  logger?: ServerCrudLogger;
+}
+
+const MAX_PAGE_SIZE = 200;
+
+// Default plural→model resolver: strip trailing "s", camelCase kebab. Apps with
+// irregular names pass a map: getModelName(entity, { "fee-schedules": "feeSchedule" }).
+export function getModelName(entity: string, map?: Record<string, string>): string {
+  if (map && map[entity]) return map[entity];
+  return entity.replace(/s$/, "").replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+// Opt-in audit-name resolver. Overwrites createdByName/updatedByName from a User
+// model. `nameField` handles schema drift (vinhhoa: "name", wu: "fullName").
+export function createAuditUserNameResolver(opts: {
+  prisma: PrismaLike;
+  userModel?: string;
+  nameField?: string;
+}): (records: any[]) => Promise<any[]> {
+  const { prisma, userModel = "user", nameField = "name" } = opts;
+  return async (records: any[]) => {
+    if (!records.length) return records;
+    const ids = new Set<string>();
+    for (const r of records) {
+      if (r?.createdBy) ids.add(r.createdBy);
+      if (r?.updatedBy) ids.add(r.updatedBy);
+    }
+    if (!ids.size) return records;
+    try {
+      const users = await prisma[userModel].findMany({
+        where: { id: { in: Array.from(ids) } },
+        select: { id: true, [nameField]: true },
+      });
+      const nameOf = new Map<string, string>(users.map((u: any) => [u.id, u[nameField] || u.id]));
+      return records.map((r) => ({
+        ...r,
+        createdByName: r.createdBy ? nameOf.get(r.createdBy) ?? r.createdBy : null,
+        updatedByName: r.updatedBy ? nameOf.get(r.updatedBy) ?? r.updatedBy : null,
+      }));
+    } catch {
+      return records;
+    }
+  };
+}
+
+export function createServerCrudService(deps: ServerCrudDeps): ServerCrudService {
+  const prisma = deps.prisma;
+  const resolveModel = deps.getModelName ?? ((e: string) => getModelName(e));
+  const resolveAuditNames = deps.resolveAuditNames ?? (async (r: any[]) => r);
+  const log: ServerCrudLogger = deps.logger ?? {
+    warn: (m, ...r) => console.warn(m, ...r),
+    error: (m, ...r) => console.error(m, ...r),
+  };
+
+  const model = (entity: string) => {
+    const name = resolveModel(entity);
+    const m = prisma[name];
+    if (!m) throw new Error(`Prisma model not found for entity: ${entity} (${name})`);
+    return m;
+  };
+
+  const filterValidFields = (data: any, config: EntityConfig) => {
+    const valid = new Set(config.fields.filter((f) => !(f as any).isDisplayOnly).map((f) => f.name));
+    valid.add("id");
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(data)) {
+      if (valid.has(k)) out[k] = v;
+      else log.warn(`Filtering out invalid field "${k}" for entity "${config.name}"`);
+    }
+    return out;
+  };
+
+  const castFieldValues = (data: any, config: EntityConfig) => {
+    const out = { ...data };
+    for (const field of config.fields) {
+      const value = out[field.name];
+      if (value === undefined || value === null) continue;
+      if (field.type === "boolean" || field.type === "switch") {
+        let isTrue: boolean;
+        if (typeof value === "string") {
+          const lv = value.toLowerCase();
+          isTrue = lv === "true" || lv === "active" || value === "1" || value === "on";
+        } else isTrue = Boolean(value);
+        if (field.type === "switch" && field.options && field.options.length >= 2) {
+          out[field.name] = isTrue ? (field.options[0] as any).value : (field.options[1] as any).value;
+        } else out[field.name] = isTrue;
+      } else if (field.type === "number" || (field.type as string) === "integer") {
+        if (typeof value === "string") {
+          if (value.trim() === "") out[field.name] = null;
+          else {
+            const num = Number(value);
+            if (!isNaN(num)) out[field.name] = num;
+          }
+        }
+      }
+    }
+    return out;
+  };
+
+  const transformRelationFields = (data: any, mode: "create" | "update") => {
+    const out = { ...data };
+    const skip = new Set(["id", "createdBy", "updatedBy", "citizenId", "targetId"]);
+    for (const key of Object.keys(out)) {
+      if (skip.has(key)) continue;
+      if (key.endsWith("Id") && key.length > 2) {
+        const rel = key.slice(0, -2);
+        const value = out[key];
+        if (value && typeof value === "string" && value.trim() !== "") {
+          out[rel] = { connect: { id: value } };
+          delete out[key];
+        } else if (value === null || value === undefined || value === "") {
+          if (mode === "update") out[rel] = { disconnect: true };
+          delete out[key];
+        }
+      }
+    }
+    return out;
+  };
+
+  return {
+    async list(entity, config, params) {
+      const prismaModel = model(entity);
+      const { page = 1, pageSize = 10, search, sort, filters } = params;
+      const safePage = Math.max(1, Number(page) || 1);
+      const safePageSize = Math.min(Math.max(1, Number(pageSize) || 10), MAX_PAGE_SIZE);
+      const skip = (safePage - 1) * safePageSize;
+      const take = safePageSize;
+
+      const allowedFields = new Set<string>([
+        ...config.fields.map((f) => f.name),
+        "id", "createdAt", "updatedAt", "createdBy", "updatedBy", config.idField || "id",
+      ]);
+      const allowedRelations = new Set<string>(config.include || []);
+      const isAllowed = (name: string) => {
+        if (!name) return false;
+        if (name.includes(".")) return allowedRelations.has(name.split(".")[0]);
+        return allowedFields.has(name);
+      };
+
+      const where: any = {};
+      if (search && search.trim()) {
+        const term = search.trim();
+        const searchFields = config.fields.filter((f) => f.filterable && f.type === "text").map((f) => f.name);
+        if (searchFields.length) where.OR = searchFields.map((f) => ({ [f]: { contains: term, mode: "insensitive" } }));
+      }
+      if (filters && filters.length) {
+        for (const filter of filters) {
+          const { name, value, operator } = filter as any;
+          if (value === undefined || value === null || (Array.isArray(value) && value.length === 0)) continue;
+          if (!isAllowed(name)) {
+            log.warn(`Ignoring filter on disallowed field "${name}" for entity "${entity}"`);
+            continue;
+          }
+          let target = where;
+          let key = name;
+          if (name.includes(".")) {
+            const parts = name.split(".");
+            key = parts.pop()!;
+            for (const p of parts) { if (!target[p]) target[p] = {}; target = target[p]; }
+          }
+          const op = operator as string;
+          if (op === "contains") target[key] = { contains: value, mode: "insensitive" };
+          else if (op === "in") target[key] = { in: value };
+          else if (op === "notIn") target[key] = { notIn: value };
+          else if (op === "eq") target[key] = value;
+          else if (op === "ne") target[key] = { not: value };
+          else if (op === "gt") target[key] = { gt: value };
+          else if (op === "gte") target[key] = { gte: value };
+          else if (op === "lt") target[key] = { lt: value };
+          else if (op === "lte") target[key] = { lte: value };
+          else if (op === "startsWith") target[key] = { startsWith: value, mode: "insensitive" };
+          else if (op === "endsWith") target[key] = { endsWith: value, mode: "insensitive" };
+          else if (op === "isNull") target[key] = null;
+          else if (op === "isNotNull") target[key] = { not: null };
+          else target[key] = value;
+        }
+      }
+
+      const orderBy: any = {};
+      const applySort = (field: string, direction: any) => {
+        if (field.includes(".")) {
+          const parts = field.split(".");
+          const leaf = parts.pop()!;
+          let t = orderBy;
+          for (const p of parts) { t[p] = t[p] || {}; t = t[p]; }
+          t[leaf] = direction;
+        } else orderBy[field] = direction;
+      };
+      if (sort && isAllowed(sort.field)) applySort(sort.field, sort.direction);
+      else if (config.defaultSort) applySort(config.defaultSort.field, config.defaultSort.direction);
+      else if (config.fields.some((f) => f.name === "createdAt")) orderBy.createdAt = "desc";
+      else orderBy[config.idField || "id"] = "desc";
+
+      const include: any = {};
+      if (config.include?.length) config.include.forEach((inc) => (include[inc] = true));
+      const includeOption = Object.keys(include).length ? { include } : {};
+
+      try {
+        const [total, data] = await Promise.all([
+          prismaModel.count({ where }),
+          prismaModel.findMany({ where, orderBy, skip, take, ...includeOption }),
+        ]);
+        const serialized = serializeDecimalFields(data);
+        const resolved = await resolveAuditNames(serialized as any[]);
+        return { data: resolved, total, page: safePage, pageSize: safePageSize } as CrudResponse;
+      } catch (error) {
+        log.error(`Error listing ${entity}:`, error);
+        throw error;
+      }
+    },
+
+    async getById(entity, id) {
+      const prismaModel = model(entity);
+      const result = await prismaModel.findUnique({ where: { id } });
+      if (!result) return null;
+      const serialized = serializeDecimalFields(result);
+      const [resolved] = await resolveAuditNames([serialized]);
+      return resolved;
+    },
+
+    async create(entity, data, config) {
+      const prismaModel = model(entity);
+      try {
+        let filtered = config ? filterValidFields(data, config) : data;
+        if (config) filtered = castFieldValues(filtered, config);
+        if (!filtered.id) filtered.id = crypto.randomUUID();
+        const prismaData = transformRelationFields(filtered, "create");
+        return serializeDecimalFields(await prismaModel.create({ data: prismaData }));
+      } catch (error) {
+        log.error(`Error creating ${entity}:`, error);
+        throw error;
+      }
+    },
+
+    async update(entity, id, data, config) {
+      const prismaModel = model(entity);
+      try {
+        let filtered = config ? filterValidFields(data, config) : data;
+        if (config) filtered = castFieldValues(filtered, config);
+        const prismaData = transformRelationFields(filtered, "update");
+        return serializeDecimalFields(await prismaModel.update({ where: { id }, data: prismaData }));
+      } catch (error) {
+        log.error(`Error updating ${entity}:`, error);
+        throw error;
+      }
+    },
+
+    async delete(entity, id) {
+      const prismaModel = model(entity);
+      try {
+        return await prismaModel.delete({ where: { id } });
+      } catch (error) {
+        log.error(`Error deleting ${entity}:`, error);
+        throw error;
+      }
+    },
+
+    async deleteMany(entity, ids) {
+      const prismaModel = model(entity);
+      try {
+        return await prismaModel.deleteMany({ where: { id: { in: ids } } });
+      } catch (error) {
+        log.error(`Error deleting many ${entity}:`, error);
+        throw error;
+      }
+    },
+  };
+}

package/src/crud/server.ts

@@ -6,3 +6,21 @@ export {
   getCrudPermissions,
   mergePermissions,
 } from './lib/permissions'
+
+// Generic Prisma-backed CRUD engine + Next.js route-handler factories.
+// Apps inject their PrismaClient + entity→model map; the engine lives in core.
+export {
+  createServerCrudService,
+  getModelName,
+  createAuditUserNameResolver,
+} from './server-service'
+export type {
+  ServerCrudService,
+  ServerCrudDeps,
+  ServerCrudLogger,
+} from './server-service'
+export {
+  createCrudCollectionHandlers,
+  createCrudItemHandlers,
+} from './crud-route-handlers'
+export type { CrudHandlerDeps } from './crud-route-handlers'

package/src/rbac/role-service.ts

@@ -18,6 +18,23 @@ export type RoleFilters = {
   status?: string;
 };
 
+// Schema-tolerance seam: apps whose User/Role tables diverge from the default
+// (name/email/image/isActive + Role.createdAt/updatedAt) pass field overrides so
+// getRolesData works without forking. E.g. wu-vpbank:
+//   { userNameField: "fullName", userActiveField: "active", userImageField: null, roleTimestamps: false }
+export type RoleServiceSchema = {
+  /** User display-name column. Default "name". */
+  userNameField?: string;
+  /** User email column. Default "email". */
+  userEmailField?: string;
+  /** User avatar column, or null if the table has none. Default "image". */
+  userImageField?: string | null;
+  /** User active-flag column. Default "isActive". */
+  userActiveField?: string;
+  /** Whether Role has createdAt/updatedAt. Default true; false → order by name, blank timestamps. */
+  roleTimestamps?: boolean;
+};
+
 export type RoleData = {
   id: string;
   name: string;
@@ -68,6 +85,7 @@ export interface RolePrismaClient {
 export async function getRolesData(
   db: RolePrismaClient,
   params: RoleFilters = {},
+  schema: RoleServiceSchema = {},
 ): Promise<{
   total: number;
   page: number;
@@ -76,6 +94,13 @@ export async function getRolesData(
 }> {
   const { page = 1, pageSize = 10, search, status } = params;
 
+  // Schema knobs (default to the canonical name/email/image/isActive + timestamps).
+  const nameField = schema.userNameField ?? "name";
+  const emailField = schema.userEmailField ?? "email";
+  const imageField = schema.userImageField === undefined ? "image" : schema.userImageField;
+  const activeField = schema.userActiveField ?? "isActive";
+  const hasTimestamps = schema.roleTimestamps ?? true;
+
   const whereConditions: any[] = [];
 
   if (search) {
@@ -94,42 +119,24 @@ export async function getRolesData(
 
   const where: any = whereConditions.length > 0 ? { AND: whereConditions } : {};
 
+  // Build the user select from the (possibly overridden) field names.
+  const userSelect: Record<string, boolean> = { id: true, [nameField]: true, [emailField]: true };
+  if (imageField) userSelect[imageField] = true;
+  if (activeField) userSelect[activeField] = true;
+
   const [total, items] = await Promise.all([
     db.role.count({ where }),
     db.role.findMany({
       where,
-      orderBy: { createdAt: "desc" },
+      orderBy: hasTimestamps ? { createdAt: "desc" } : { name: "asc" },
       skip: (page - 1) * pageSize,
       take: pageSize,
       include: {
-        userRoles: {
-          include: {
-            user: {
-              select: {
-                id: true,
-                name: true,
-                email: true,
-                image: true,
-                isActive: true,
-              },
-            },
-          },
-        },
+        userRoles: { include: { user: { select: userSelect } } },
         rolePermissions: {
           include: {
-            resource: {
-              select: {
-                code: true,
-                name: true,
-                icon: true,
-              },
-            },
-            action: {
-              select: {
-                code: true,
-                name: true,
-              },
-            },
+            resource: { select: { code: true, name: true, icon: true } },
+            action: { select: { code: true, name: true } },
           },
         },
       },
@@ -150,13 +157,13 @@ export async function getRolesData(
     usersCount: role.userRoles.length,
     users: role.userRoles.map((ur: any) => ({
       id: ur.user.id,
-      name: ur.user.name,
-      email: ur.user.email,
-      image: ur.user.image,
-      isActive: ur.user.isActive,
+      name: ur.user[nameField] ?? null,
+      email: ur.user[emailField] ?? null,
+      image: imageField ? ur.user[imageField] ?? null : null,
+      isActive: activeField ? Boolean(ur.user[activeField]) : true,
     })),
-    createdAt: role.createdAt.toISOString(),
-    updatedAt: role.updatedAt.toISOString(),
+    createdAt: hasTimestamps && role.createdAt ? role.createdAt.toISOString() : "",
+    updatedAt: hasTimestamps && role.updatedAt ? role.updatedAt.toISOString() : "",
     createdBy: role.createdBy || undefined,
     updatedBy: role.updatedBy || undefined,
   }));

package/src/ui/index.tsx

@@ -15,3 +15,4 @@ export * from "./auth";
 // export * from "./crud"
 export * from "./management";
 export * from "./pages/not-found";
+export * from "./shared";

package/src/ui/layout/page-tabs.tsx

@@ -85,44 +85,10 @@ export function PageTabs({
     currentTabIndex >= 0 && currentTabIndex < sortedTabs.length - 1;
   const hasOtherTabs = sortedTabs.length > 1;
 
-  // Generate unique gradient background for each tab based on path
-  const getTabBackgroundColor = (path: string, isActive: boolean) => {
-    if (isActive) return "bg-background";
-
-    // Generate consistent hash from path
-    const normalizedPath = path.replace(/^\/[a-z]{2}(\/|$)/, "/");
-    const hash = normalizedPath.split("").reduce((acc, char) => {
-      return (acc << 5) - acc + char.charCodeAt(0);
-    }, 0);
-
-    // Refined gradient palette - darker and more visible (using dark theme colors for both modes)
-    const gradients = [
-      "bg-gradient-to-r from-slate-700 to-slate-600",
-      "bg-gradient-to-r from-zinc-700 to-zinc-600",
-      "bg-gradient-to-r from-stone-700 to-stone-600",
-      "bg-gradient-to-r from-neutral-700 to-neutral-600",
-      "bg-gradient-to-r from-blue-700 to-blue-600",
-      "bg-gradient-to-r from-indigo-700 to-indigo-600",
-      "bg-gradient-to-r from-purple-700 to-purple-600",
-      "bg-gradient-to-r from-violet-700 to-violet-600",
-      "bg-gradient-to-r from-fuchsia-700 to-fuchsia-600",
-      "bg-gradient-to-r from-pink-700 to-pink-600",
-      "bg-gradient-to-r from-rose-700 to-rose-600",
-      "bg-gradient-to-r from-red-700 to-red-600",
-      "bg-gradient-to-r from-orange-700 to-orange-600",
-      "bg-gradient-to-r from-amber-700 to-amber-600",
-      "bg-gradient-to-r from-yellow-700 to-yellow-600",
-      "bg-gradient-to-r from-lime-700 to-lime-600",
-      "bg-gradient-to-r from-green-700 to-green-600",
-      "bg-gradient-to-r from-emerald-700 to-emerald-600",
-      "bg-gradient-to-r from-teal-700 to-teal-600",
-      "bg-gradient-to-r from-cyan-700 to-cyan-600",
-      "bg-gradient-to-r from-sky-700 to-sky-600",
-    ];
-
-    // Select gradient based on hash to ensure consistency
-    const gradientIndex = Math.abs(hash) % gradients.length;
-    return gradients[gradientIndex];
+  // Neutral, single-style tab background (was a per-path rainbow gradient).
+  // Active tabs sit on the page surface; inactive tabs are a muted chip.
+  const getTabBackgroundColor = (_path: string, isActive: boolean) => {
+    return isActive ? "bg-background" : "bg-muted/60";
   };
 
   return (
@@ -163,21 +129,21 @@ export function PageTabs({
                     className={cn(
                       "group relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-200",
                       "border border-transparent",
-                      "hover:brightness-105 cursor-pointer",
+                      "cursor-pointer",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                       getTabBackgroundColor(tab.path, isActive),
                       variant === "default" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x border-b-0 rounded-t-md -mb-px z-10"
-                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
                       variant === "header" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x rounded-t-md z-10"
-                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
                       !isLast &&
                         !isActive &&
                         variant === "default" &&
-                        "border-r border-white/10",
+                        "border-r border-border",
                     )}
                   >
                     {/* Tab number indicator (for keyboard shortcuts) */}

package/src/ui/primitives/index.tsx

@@ -132,3 +132,4 @@ export * from "./toggle";
 export * from "./toggle-group";
 export * from "./combobox";
 export * from "./label";
+export * from "./dynamic-icon";

package/src/ui/shared/index.ts

@@ -0,0 +1,6 @@
+// @goerp/core/ui shared app-level components (promoted from vinhhoa/wu so apps
+// stop copying them). Re-exported through the ui barrel.
+export * from "./page-header";
+export * from "./status-indicator";
+export * from "./table-sum-footer";
+export * from "./table-styles";

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