@goplusvn/core 0.1.70 → 0.1.72

package/src/ui/auth/sign-in-form.tsx

@@ -8,12 +8,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useAuthBridge } from "./auth-bridge";
 import { useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
-import type { z } from "zod"; // Add this import
 
 import type { LocaleType } from "../../types";
 import { toast } from "sonner";
+import { z } from "zod";
 import { ensureLocalizedPathname, ensureRedirectPathname } from "../../utils";
-import { SignInSchema } from "../../schemas";
 import { useTabContentCache } from "../layout/tab-content-cache";
 import { useTabNavigation } from "../layout/tab-navigation-provider";
 
@@ -34,9 +33,64 @@ import {
 } from "../index";
 import { OAuthLinks } from "./oauth-links";
 
-type SignInFormType = z.infer<typeof SignInSchema>;
+/**
+ * Ô định danh nhận gì:
+ *  - "email" (mặc định, giữ hành vi cũ): validate + input type email.
+ *  - "username": tên đăng nhập/mã nhân viên — text tự do.
+ *  - "both": một ô cho cả hai; bridge của app tự phân loại (thường theo "@").
+ *
+ * Mật khẩu ở form ĐĂNG NHẬP chỉ đòi khác rỗng — luật độ phức tạp là chuyện lúc
+ * ĐẶT mật khẩu; siết ở đây sẽ chặn nhầm mật khẩu cũ hợp lệ import từ hệ khác.
+ */
+export interface SignInFormProps {
+  identifier?: "email" | "username" | "both";
+  /** Ghi đè nhãn ô định danh (vd "Email hoặc mã nhân viên"). */
+  identifierLabel?: string;
+  identifierPlaceholder?: string;
+}
+
+const IDENTIFIER_PRESETS = {
+  email: {
+    label: "Email",
+    placeholder: "name@example.com",
+    inputType: "email" as const,
+    schema: z.string().trim().toLowerCase().email({ message: "Email không hợp lệ" }),
+  },
+  username: {
+    label: "Tên đăng nhập",
+    placeholder: "ten-dang-nhap",
+    inputType: "text" as const,
+    schema: z.string().trim().min(1, { message: "Nhập tên đăng nhập" }),
+  },
+  both: {
+    label: "Email hoặc tên đăng nhập",
+    placeholder: "name@example.com",
+    inputType: "text" as const,
+    schema: z.string().trim().min(1, { message: "Nhập email hoặc tên đăng nhập" }),
+  },
+};
 
-export function SignInForm() {
+type SignInFormType = {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+export function SignInForm({
+  identifier = "email",
+  identifierLabel,
+  identifierPlaceholder,
+}: SignInFormProps = {}) {
+  const preset = IDENTIFIER_PRESETS[identifier];
+  const schema = React.useMemo(
+    () =>
+      z.object({
+        email: preset.schema,
+        password: z.string().min(1, { message: "Nhập mật khẩu" }),
+        rememberMe: z.boolean().optional(),
+      }),
+    [preset],
+  );
   const { signInWithCredentials } = useAuthBridge();
   const params = useParams();
   const searchParams = useSearchParams();
@@ -50,7 +104,7 @@ export function SignInForm() {
     "/";
 
   const form = useForm<SignInFormType>({
-    resolver: zodResolver(SignInSchema),
+    resolver: zodResolver(schema),
     defaultValues: {
       email: "",
       password: "",
@@ -125,11 +179,12 @@ export function SignInForm() {
             name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Email</FormLabel>
+                <FormLabel>{identifierLabel ?? preset.label}</FormLabel>
                 <FormControl>
                   <Input
-                    type="email"
-                    placeholder="name@example.com"
+                    type={preset.inputType}
+                    autoComplete={identifier === "email" ? "email" : "username"}
+                    placeholder={identifierPlaceholder ?? preset.placeholder}
                     {...field}
                   />
                 </FormControl>
@@ -210,7 +265,7 @@ export function SignInForm() {
         </div>
 
         <ButtonLoading isLoading={isSubmitting} disabled={isDisabled}>
-          Đăng nhập với Email
+          Đăng nhập
         </ButtonLoading>
         <div className="-mt-4 text-center text-sm">
           Chưa có tài khoản?{" "}

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