@goplusvn/core 0.1.71 → 0.1.73

package/src/ui/data-display/__tests__/use-client-pagination.test.ts

@@ -0,0 +1,59 @@
+/**
+ * Hợp đồng useClientPagination: trang 1-BASED, đổi cỡ trang tự về trang 1,
+ * và page tự clamp khi items co lại (xoá/lọc) — không có render trung gian
+ * với trang rỗng.
+ */
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useClientPagination } from "../use-client-pagination";
+
+const items = (n: number) => Array.from({ length: n }, (_, i) => i + 1);
+
+describe("useClientPagination", () => {
+  it("khởi tạo: trang 1, cắt đúng lát đầu", () => {
+    const { result } = renderHook(() => useClientPagination(items(25), 10));
+    expect(result.current.page).toBe(1);
+    expect(result.current.pageSize).toBe(10);
+    expect(result.current.total).toBe(25);
+    expect(result.current.pageCount).toBe(3);
+    expect(result.current.pageItems).toEqual(items(10));
+  });
+
+  it("setPage cắt đúng lát (1-based), trang cuối là phần dư", () => {
+    const { result } = renderHook(() => useClientPagination(items(25), 10));
+    act(() => result.current.setPage(3));
+    expect(result.current.page).toBe(3);
+    expect(result.current.pageItems).toEqual([21, 22, 23, 24, 25]);
+  });
+
+  it("setPageSize tự về trang 1", () => {
+    const { result } = renderHook(() => useClientPagination(items(25), 10));
+    act(() => result.current.setPage(3));
+    act(() => result.current.setPageSize(5));
+    expect(result.current.page).toBe(1);
+    expect(result.current.pageSize).toBe(5);
+    expect(result.current.pageItems).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it("items co lại thì page clamp vào pageCount, không rơi ra trang rỗng", () => {
+    const { result, rerender } = renderHook(
+      ({ data }: { data: number[] }) => useClientPagination(data, 10),
+      { initialProps: { data: items(25) } },
+    );
+    act(() => result.current.setPage(3));
+    expect(result.current.page).toBe(3);
+
+    rerender({ data: items(12) }); // còn 2 trang
+    expect(result.current.page).toBe(2);
+    expect(result.current.pageItems).toEqual([11, 12]);
+  });
+
+  it("danh sách rỗng: total 0 nhưng pageCount tối thiểu 1, không chia cho 0", () => {
+    const { result } = renderHook(() => useClientPagination([] as number[], 10));
+    expect(result.current.total).toBe(0);
+    expect(result.current.pageCount).toBe(1);
+    expect(result.current.page).toBe(1);
+    expect(result.current.pageItems).toEqual([]);
+  });
+});

package/src/ui/data-display/data-table/__tests__/data-table-row-memo.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * Chốt hợp đồng memo từng hàng của DataTable:
+ * - mặc định memo theo identity `row.original` → cell đọc state NGOÀI row data
+ *   bị ĐƠ (baseline, đã cắn ở bảng ma trận tanloc-spartronics);
+ * - `rowMemo={false}` tắt memo; `rowMemo={(row) => key}` mở memo khi key đổi;
+ * - `cellClassName` đổi phải re-render (bug cũ: không nằm trong comparator).
+ */
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { DataTable } from "../data-table";
+import type { ColumnDef } from "../data-table";
+
+type RowData = { id: string; name: string };
+
+const DATA: RowData[] = [{ id: "1", name: "x" }];
+
+// Cột đọc state NGOÀI row data qua closure — đúng kịch bản Input controlled /
+// cờ busy per-cell. Identity mảng cột phải GIỮ NGUYÊN giữa các lần render.
+function makeColumns(getExternal: () => string): ColumnDef<RowData>[] {
+  return [
+    {
+      id: "name",
+      header: "Tên",
+      cell: ({ row }) => (
+        <span data-testid="cell">
+          {row.original.name}-{getExternal()}
+        </span>
+      ),
+    },
+  ];
+}
+
+describe("DataTable rowMemo", () => {
+  it("mặc định: memo theo identity row.original — state ngoài KHÔNG tới cell (baseline)", () => {
+    let external = "A";
+    const columns = makeColumns(() => external);
+    const { rerender, getByTestId } = render(
+      <DataTable data={DATA} columns={columns} />,
+    );
+    expect(getByTestId("cell").textContent).toBe("x-A");
+
+    external = "B";
+    rerender(<DataTable data={DATA} columns={columns} />);
+    // row.original không đổi identity → memo chặn, cell vẫn hiện giá trị cũ
+    expect(getByTestId("cell").textContent).toBe("x-A");
+  });
+
+  it("rowMemo={false}: tắt memo — hàng re-render theo cha, state ngoài tới cell", () => {
+    let external = "A";
+    const columns = makeColumns(() => external);
+    const { rerender, getByTestId } = render(
+      <DataTable data={DATA} columns={columns} rowMemo={false} />,
+    );
+    expect(getByTestId("cell").textContent).toBe("x-A");
+
+    external = "B";
+    rerender(<DataTable data={DATA} columns={columns} rowMemo={false} />);
+    expect(getByTestId("cell").textContent).toBe("x-B");
+  });
+
+  it("rowMemo={(row) => key}: key đổi thì re-render, key giữ nguyên thì vẫn chặn", () => {
+    let external = "A";
+    let version = 0;
+    const columns = makeColumns(() => external);
+    const rowMemo = () => version;
+    const { rerender, getByTestId } = render(
+      <DataTable data={DATA} columns={columns} rowMemo={rowMemo} />,
+    );
+    expect(getByTestId("cell").textContent).toBe("x-A");
+
+    // key đổi → comparator thấy khác → re-render
+    external = "B";
+    version = 1;
+    rerender(<DataTable data={DATA} columns={columns} rowMemo={rowMemo} />);
+    expect(getByTestId("cell").textContent).toBe("x-B");
+
+    // key GIỮ NGUYÊN → memo vẫn chặn dù closure đã đổi
+    external = "C";
+    rerender(<DataTable data={DATA} columns={columns} rowMemo={rowMemo} />);
+    expect(getByTestId("cell").textContent).toBe("x-B");
+  });
+
+  it("cellClassName đổi phải ăn xuống <td> (bug cũ: thiếu trong comparator)", () => {
+    const columns = makeColumns(() => "A");
+    const { rerender, container } = render(
+      <DataTable data={DATA} columns={columns} cellClassName="text-xs" />,
+    );
+    expect(container.querySelector("td")?.className).toContain("text-xs");
+
+    rerender(
+      <DataTable data={DATA} columns={columns} cellClassName="text-sm" />,
+    );
+    expect(container.querySelector("td")?.className).toContain("text-sm");
+  });
+});

package/src/ui/data-display/data-table/data-table-context.tsx

@@ -18,7 +18,12 @@ export interface ActiveFilter {
   operator: string;
 }
 
+/**
+ * Trạng thái phân trang của core: `page` là 1-BASED (trang đầu = 1),
+ * KHÁC `pageIndex` 0-BASED của tanstack. Convert tay: pageIndex = page - 1.
+ */
 export interface PaginationState {
+  /** Trang hiện tại, 1-based (tanstack pageIndex = page - 1). */
   page: number;
   pageSize: number;
 }

package/src/ui/data-display/data-table/data-table.tsx

@@ -35,6 +35,7 @@ import type { SortingState, PaginationState } from "./data-table-context";
 // ============================================================================
 
 export interface DataTablePaginationConfig {
+  /** Trang hiện tại, 1-BASED — KHÁC `pageIndex` 0-based của tanstack (pageIndex = page - 1). */
   page: number;
   pageSize: number;
   total: number;
@@ -155,6 +156,16 @@ export interface DataTableProps<TData> {
   headerCellClassName?: string;
   /** Cỡ chữ cho ô <td> (TableCell primitive vốn cứng "text-xs"). CRUD truyền "text-sm". */
   cellClassName?: string;
+
+  /**
+   * Escape hatch cho memo từng hàng. Mặc định hàng được memo theo identity
+   * `row.original` — cell đọc state NGOÀI row data (Input controlled, cờ busy
+   * per-cell, closure ngoài) sẽ ĐƠ vì identity không đổi. Khi đó:
+   * - `false`: tắt memo, hàng luôn re-render theo cha.
+   * - `(row) => key`: memo vẫn bật, comparator so sánh THÊM key trả về
+   *   (Object.is) — trả về version/chuỗi gộp các state ngoài mà cell phụ thuộc.
+   */
+  rowMemo?: false | ((row: TData) => unknown);
 }
 
 // ============================================================================
@@ -184,6 +195,7 @@ export function DataTable<TData extends Record<string, unknown>>({
   tableClassName,
   headerCellClassName,
   cellClassName,
+  rowMemo,
 }: DataTableProps<TData>) {
   // Build final columns with selection and row number if enabled
   const columns = useMemo<ColumnDef<TData>[]>(() => {
@@ -350,12 +362,18 @@ export function DataTable<TData extends Record<string, unknown>>({
     getFilteredRowModel: getFilteredRowModel(),
     state: {
       sorting: tanstackSorting,
-      pagination: pagination
+      // CHỈ đưa key `pagination` vào state khi controlled: `pagination: undefined`
+      // vẫn đè initialState của tanstack → getPaginationRowModel crash
+      // ("Cannot destructure 'pageSize'") và bảng uncontrolled render RỖNG im lặng.
+      ...(pagination
         ? {
-            pageIndex: pagination.page - 1,
-            pageSize: pagination.pageSize,
+            pagination: {
+              // page của core 1-based, pageIndex của tanstack 0-based
+              pageIndex: pagination.page - 1,
+              pageSize: pagination.pageSize,
+            },
           }
-        : undefined,
+        : {}),
     },
     onPaginationChange: handlePaginationChange,
     manualPagination: !!pagination,
@@ -442,16 +460,30 @@ export function DataTable<TData extends Record<string, unknown>>({
                 />
               </>
             ) : rows.length > 0 ? (
-              rows.map((row) => (
-                <MemoizedTableRow
-                  key={row.id}
-                  row={row}
-                  isSelected={row.getIsSelected()}
-                  visibleCellsCount={row.getVisibleCells().length}
-                  onRowClick={onRowClick}
-                  cellClassName={cellClassName}
-                />
-              ))
+              rows.map((row) =>
+                rowMemo === false ? (
+                  // rowMemo={false}: render thẳng, không memo — hàng theo kịp mọi
+                  // state ngoài row data (Input controlled, cờ busy per-cell).
+                  <DataTableRowInner
+                    key={row.id}
+                    row={row}
+                    isSelected={row.getIsSelected()}
+                    visibleCellsCount={row.getVisibleCells().length}
+                    onRowClick={onRowClick}
+                    cellClassName={cellClassName}
+                  />
+                ) : (
+                  <MemoizedTableRow
+                    key={row.id}
+                    row={row}
+                    isSelected={row.getIsSelected()}
+                    visibleCellsCount={row.getVisibleCells().length}
+                    onRowClick={onRowClick}
+                    cellClassName={cellClassName}
+                    memoKey={rowMemo ? rowMemo(row.original) : undefined}
+                  />
+                ),
+              )
             ) : null}
           </TableBody>
         </table>
@@ -504,14 +536,20 @@ interface MemoizedTableRowProps<TData> {
   visibleCellsCount: number;
   onRowClick?: (row: TData) => void;
   cellClassName?: string;
+  /** Key từ `rowMemo(row.original)` — comparator so bằng Object.is. */
+  memoKey?: unknown;
 }
 
-// Ensure TData is maintained by making it a generic memo component, or casting it
-const MemoizedTableRow = memo(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ({ row, isSelected, onRowClick, cellClassName }: MemoizedTableRowProps<any>) => {
-    return (
-      <TableRow
+// Thân hàng KHÔNG memo — dùng trực tiếp khi rowMemo={false}, và là inner của
+// MemoizedTableRow ở dưới.
+function DataTableRowInner<TData>({
+  row,
+  isSelected,
+  onRowClick,
+  cellClassName,
+}: MemoizedTableRowProps<TData>) {
+  return (
+    <TableRow
         data-state={isSelected && "selected"}
         className={`transition-colors duration-100 even:bg-muted/30 hover:bg-accent/50 dark:hover:bg-slate-800/40 data-[state=selected]:bg-primary/5 border-b border-border/40 dark:border-slate-800 relative hover:border-l-[3px] hover:border-l-primary ${
           onRowClick ? "cursor-pointer" : ""
@@ -549,8 +587,11 @@ const MemoizedTableRow = memo(
           </TableCell>
         ))}
       </TableRow>
-    );
-  },
+  );
+}
+
+const MemoizedTableRow = memo(
+  DataTableRowInner,
   (prevProps, nextProps) => {
     // Basic checks
     if (
@@ -558,7 +599,11 @@ const MemoizedTableRow = memo(
       prevProps.isSelected !== nextProps.isSelected ||
       prevProps.onRowClick !== nextProps.onRowClick ||
       prevProps.visibleCellsCount !== nextProps.visibleCellsCount ||
-      prevProps.row.original !== nextProps.row.original
+      prevProps.row.original !== nextProps.row.original ||
+      // cellClassName đổi phải re-render (trước đây bị bỏ sót — đổi class không ăn)
+      prevProps.cellClassName !== nextProps.cellClassName ||
+      // Key từ rowMemo(row.original): state ngoài row data mà cell phụ thuộc
+      !Object.is(prevProps.memoKey, nextProps.memoKey)
     ) {
       return false;
     }

package/src/ui/data-display/data-table-pagination.tsx

@@ -25,22 +25,34 @@ import {
 } from "../primitives/client";
 
 interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
+  /**
+   * Instance tanstack. BỎ TRỐNG khi dùng thuần state: truyền đủ
+   * totalItems/currentPage/pageSize + onPageChange/onPageSizeChange
+   * (ghép với hook `useClientPagination`).
+   */
+  table?: Table<TData>;
   totalItems?: number;
+  /** Trang hiện tại, 1-BASED (KHÁC pageIndex 0-based của tanstack). */
   currentPage?: number;
   pageSize?: number;
+  /** Nhận trang 1-based. Có mặt thì THẮNG table.setPageIndex. */
+  onPageChange?: (page: number) => void;
+  /** Có mặt thì THẮNG table.setPageSize. Reset về trang 1 là việc của caller (useClientPagination đã lo). */
+  onPageSizeChange?: (pageSize: number) => void;
 }
 
-export function DataTablePagination<TData>({
+export function DataTablePagination<TData = unknown>({
   table,
   totalItems,
   currentPage,
   pageSize,
+  onPageChange,
+  onPageSizeChange,
 }: DataTablePaginationProps<TData>) {
-  const state = table.getState().pagination;
-  const effPageSize = pageSize ?? state.pageSize;
-  const effCurrentPage = currentPage ?? state.pageIndex + 1;
-  const total = totalItems ?? table.getFilteredRowModel().rows.length;
+  const state = table?.getState().pagination;
+  const effPageSize = pageSize ?? state?.pageSize ?? 10;
+  const effCurrentPage = currentPage ?? (state ? state.pageIndex + 1 : 1);
+  const total = totalItems ?? table?.getFilteredRowModel().rows.length ?? 0;
   const pageCount = Math.max(1, Math.ceil(total / effPageSize));
   const startItem = total > 0 ? (effCurrentPage - 1) * effPageSize + 1 : 0;
   const endItem = total > 0 ? Math.min(effCurrentPage * effPageSize, total) : 0;
@@ -52,7 +64,8 @@ export function DataTablePagination<TData>({
 
   const goToPage = (page: number) => {
     if (page < 1 || page > pageCount) return;
-    table.setPageIndex(page - 1);
+    if (onPageChange) onPageChange(page);
+    else table?.setPageIndex(page - 1);
   };
 
   const handlePageInputBlur = () => {
@@ -77,7 +90,11 @@ export function DataTablePagination<TData>({
           </p>
           <Select
             value={`${effPageSize}`}
-            onValueChange={(value) => table.setPageSize(Number(value))}
+            onValueChange={(value) => {
+              const size = Number(value);
+              if (onPageSizeChange) onPageSizeChange(size);
+              else table?.setPageSize(size);
+            }}
           >
             <SelectTrigger className="!h-6 !min-h-0 py-0 w-[60px] sm:w-[65px] text-[11px] px-1.5 focus:ring-inset focus:ring-offset-0">
               <SelectValue placeholder={effPageSize} />

package/src/ui/data-display/index.tsx

@@ -14,6 +14,7 @@ export { DataTableViewOptions } from "./data-table-view-options";
 
 export * from "./formatted-number-input";
 export * from "./data-table-pagination";
+export * from "./use-client-pagination";
 export * from "./avatar";
 export * from "./kpi-card";
 export * from "./compact-stat-bar";

package/src/ui/data-display/use-client-pagination.ts

@@ -0,0 +1,48 @@
+// @goerp/core/ui/data-display
+// Hook phân trang CLIENT-STATE THUẦN cho bảng client-side (dialog/tab không
+// muốn gắn URL). Ghép với <DataTablePagination totalItems currentPage pageSize
+// onPageChange onPageSizeChange> (không cần table tanstack). Trang 1-based.
+// Cần gắn URL thì dùng UrlPagination/ShallowPagination, KHÔNG dùng hook này.
+
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+export interface ClientPagination<T> {
+  /** Trang hiện tại, 1-based — đã clamp vào [1, pageCount] khi items co lại. */
+  page: number;
+  setPage: (page: number) => void;
+  pageSize: number;
+  /** Đổi cỡ trang thì TỰ về trang 1 (tránh rơi ngoài phạm vi). */
+  setPageSize: (pageSize: number) => void;
+  /** Lát cắt items của trang hiện tại. */
+  pageItems: T[];
+  total: number;
+  pageCount: number;
+}
+
+export function useClientPagination<T>(
+  items: T[],
+  initialPageSize = 10,
+): ClientPagination<T> {
+  const [rawPage, setPage] = useState(1);
+  const [pageSize, setPageSizeState] = useState(initialPageSize);
+
+  const total = items.length;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  // Clamp thay vì setState trong effect: items co lại (xoá/lọc) không tạo
+  // render trung gian với trang rỗng.
+  const page = Math.min(Math.max(1, rawPage), pageCount);
+
+  const pageItems = useMemo(
+    () => items.slice((page - 1) * pageSize, page * pageSize),
+    [items, page, pageSize],
+  );
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setPage(1);
+  }, []);
+
+  return { page, setPage, pageSize, setPageSize, pageItems, total, pageCount };
+}

package/src/ui/errors/error-view.tsx

@@ -2,14 +2,10 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../index"
-import { AlertTriangle, Check, Copy, Home, RefreshCw } from "lucide-react"
+import { Button } from "../index"
+import { Check, Copy, Home, RefreshCw } from "lucide-react"
+
+import { StatusPage, STATUS_ILLUSTRATION } from "./status-page"
 
 
 interface ErrorViewProps {
@@ -39,12 +35,19 @@ interface ErrorViewProps {
  *    `error.message` bị Next thay bằng câu chung chung nên ghi thêm chỉ đẻ rác.
  *    Vì vậy chỉ POST khi KHÔNG có digest — đó mới là lỗi runtime trình duyệt,
  *    khoảng trống mà server không thấy.
+ *
+ * **Về hình thức**: dùng chung `StatusPage` với 404/403/400 — cùng bố cục của
+ * trang 404 trong bộ kit (hình minh hoạ + mã lỗi lớn + một câu + hàng nút).
+ * Trang lỗi là chỗ người dùng đang bực; hình vẽ nét mộc làm nó bớt lạnh, nhưng
+ * KHÔNG tô màu cảnh báo lòe loẹt và không có gì nhấp nháy: đây là lúc hỏng
+ * việc, không phải lúc đùa. Mã lỗi vẫn là chip mono chép được — phần duy nhất
+ * thật sự hữu ích ở màn này.
  */
 export function ErrorView({
   error,
   reset,
-  title = "Đã xảy ra lỗi",
-  description = "Hệ thống gặp sự cố khi hiển thị nội dung này. Đây là lỗi kỹ thuật tạm thời — dữ liệu và quyền truy cập của bạn không thay đổi. Vui lòng thử lại; nếu vẫn lỗi, gửi mã lỗi bên dưới cho quản trị viên.",
+  title = "Trang gặp sự cố",
+  description = "Lỗi kỹ thuật tạm thời, dữ liệu của bạn không mất. Bạn thử lại một lần xem sao; nếu vẫn vậy, gửi mã lỗi bên dưới cho quản trị viên.",
   showHome = true,
   fullScreen = false,
 }: ErrorViewProps) {
@@ -78,87 +81,77 @@ export function ErrorView({
     }
   }
 
-  const card = (
-    <Card className="w-full max-w-lg">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-destructive">
-          <AlertTriangle className="h-5 w-5 shrink-0" />
-          {title}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <p className="text-sm text-muted-foreground">{description}</p>
-
-        {error.digest ? (
-          <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2">
-            <span className="text-xs text-muted-foreground">Mã lỗi</span>
-            <code className="flex-1 truncate font-mono text-xs text-foreground">
-              {error.digest}
-            </code>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 shrink-0"
-              onClick={handleCopy}
-              title="Sao chép mã lỗi"
-            >
-              {copied ? (
-                <Check className="h-3.5 w-3.5 text-emerald-600" />
-              ) : (
-                <Copy className="h-3.5 w-3.5" />
-              )}
-            </Button>
-          </div>
-        ) : null}
-
-        {/* Chi tiết kỹ thuật chỉ mở ở máy dev. Trên production Next đã thay
-            `message` bằng câu chung chung nên hiện ra cũng không giúp gì, mà
-            còn dễ lộ đường dẫn nội bộ. */}
-        {process.env.NODE_ENV === "development" && error.stack ? (
-          <details className="rounded-md border border-border bg-muted/40 p-3">
-            <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
-              Chi tiết kỹ thuật (chỉ hiện khi chạy dev)
-            </summary>
-            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all text-[11px] leading-relaxed text-muted-foreground">
-              {error.stack}
-            </pre>
-          </details>
-        ) : null}
-
-        <div className="flex flex-wrap gap-2">
-          {reset ? (
-            <Button onClick={reset}>
-              <RefreshCw className="mr-2 h-4 w-4" />
-              Thử lại
-            </Button>
-          ) : null}
-          <Button variant="outline" onClick={() => window.location.reload()}>
-            Tải lại trang
+  const details = (
+    <>
+      {error.digest ? (
+        <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 py-1 pl-2.5 pr-1">
+          <span className="shrink-0 text-[11px] uppercase tracking-wide text-muted-foreground">
+            Mã lỗi
+          </span>
+          <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">
+            {error.digest}
+          </code>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="shrink-0 text-muted-foreground"
+            onClick={handleCopy}
+            title="Sao chép mã lỗi"
+          >
+            {copied ? (
+              <Check className="h-3.5 w-3.5 text-emerald-600" />
+            ) : (
+              <Copy className="h-3.5 w-3.5" />
+            )}
           </Button>
-          {showHome ? (
-            <Button variant="ghost" asChild>
-              <Link href="/">
-                <Home className="mr-2 h-4 w-4" />
-                Về trang chủ
-              </Link>
-            </Button>
-          ) : null}
         </div>
-      </CardContent>
-    </Card>
-  )
+      ) : null}
 
-  if (!fullScreen) {
-    return (
-      <div className="flex min-h-0 flex-1 items-center justify-center p-4">
-        {card}
-      </div>
-    )
-  }
+      {/* Chi tiết kỹ thuật chỉ mở ở máy dev. Trên production Next đã thay
+          `message` bằng câu chung chung nên hiện ra cũng không giúp gì, mà
+          còn dễ lộ đường dẫn nội bộ. */}
+      {process.env.NODE_ENV === "development" && error.stack ? (
+        <details className="group rounded-md border border-border bg-muted/40 px-2.5 py-1.5">
+          <summary className="cursor-pointer list-none text-[11px] font-medium text-muted-foreground select-none hover:text-foreground">
+            <span className="mr-1 inline-block transition-transform group-open:rotate-90">
+              ›
+            </span>
+            Chi tiết kỹ thuật (chỉ hiện khi chạy dev)
+          </summary>
+          <pre className="mt-2 max-h-56 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed text-muted-foreground">
+            {error.stack}
+          </pre>
+        </details>
+      ) : null}
+    </>
+  )
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-4">
-      {card}
-    </div>
+    <StatusPage
+      code="500"
+      title={title}
+      description={description}
+      illustration={STATUS_ILLUSTRATION.error}
+      fullScreen={fullScreen}
+      extra={error.digest || process.env.NODE_ENV === "development" ? details : null}
+    >
+      {reset ? (
+        <Button onClick={reset}>
+          <RefreshCw className="mr-1.5 h-4 w-4" />
+          Thử lại
+        </Button>
+      ) : null}
+      <Button variant="outline" onClick={() => window.location.reload()}>
+        Tải lại trang
+      </Button>
+      {showHome ? (
+        <Button variant="ghost" className="text-muted-foreground" asChild>
+          <Link href="/">
+            <Home className="mr-1.5 h-4 w-4" />
+            Về trang chủ
+          </Link>
+        </Button>
+      ) : null}
+    </StatusPage>
   )
 }

package/src/ui/errors/index.ts

@@ -1,2 +1,7 @@
-export { NotFoundView } from "./not-found-view";
+export { StatusPage, STATUS_ILLUSTRATION } from "./status-page";
+export {
+  NotFoundView,
+  ForbiddenView,
+  BadRequestView,
+} from "./not-found-view";
 export { ErrorView } from "./error-view";