@goplusvn/core 0.1.67 → 0.1.69

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

@@ -0,0 +1,189 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { KeyboardEvent } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "../primitives";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/client";
+
+/**
+ * Biến thể NÔNG của `UrlPagination` cho trang mà CLIENT làm chủ dữ liệu (SWR
+ * hoặc danh sách đã nạp đủ về client).
+ *
+ * `UrlPagination` dùng `router.push`, nên đổi trang là một lượt điều hướng RSC:
+ * chạy lại page.tsx, `loading.tsx` nháy skeleton TOÀN TRANG, rồi trả về đúng
+ * một trang danh sách mà client đã tự cắt/fetch được. Bản này ghi URL bằng
+ * `history.replaceState` (Next 14.1+ vẫn đồng bộ `useSearchParams`) nên chỉ
+ * client re-render — và đổi trang không tạo mục lịch sử mới, giống đổi bộ lọc.
+ *
+ * CHỈ dùng cho trang có client đọc `page`/`pageSize` từ `useSearchParams`.
+ * Trang SSR thuần vẫn phải dùng `UrlPagination` vì chúng cần lượt RSC mới có
+ * dữ liệu. Giao diện giữ giống `DataTablePagination` 1:1 để hai loại trang
+ * nhìn như nhau.
+ */
+export function ShallowPagination({
+  totalItems,
+  currentPage,
+  pageSize,
+  disabled,
+}: {
+  totalItems: number;
+  currentPage: number;
+  pageSize: number;
+  disabled?: boolean;
+}) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const pageCount = Math.ceil(totalItems / pageSize);
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  const applyParams = useCallback(
+    (params: Record<string, string | number | null>) => {
+      const next = new URLSearchParams(searchParams?.toString());
+      for (const [key, value] of Object.entries(params)) {
+        if (value === null) next.delete(key);
+        else next.set(key, String(value));
+      }
+      const qs = next.toString();
+      window.history.replaceState(
+        null,
+        "",
+        qs ? `${pathname}?${qs}` : pathname,
+      );
+    },
+    [pathname, searchParams],
+  );
+
+  const handlePageChange = (page: number) => {
+    if (page < 1 || page > Math.max(1, pageCount)) return;
+    applyParams({ page });
+  };
+
+  const handlePageSizeChange = (value: string) => {
+    // Đổi số dòng thì về trang 1, tránh rơi ra ngoài phạm vi
+    applyParams({ pageSize: Number(value), page: 1 });
+  };
+
+  const [inputPage, setInputPage] = useState(String(currentPage));
+
+  useEffect(() => {
+    setInputPage(String(currentPage));
+  }, [currentPage]);
+
+  const handlePageInputBlur = () => {
+    const pageNum = Number(inputPage);
+    if (isNaN(pageNum) || pageNum < 1 || pageNum > pageCount) {
+      setInputPage(String(currentPage));
+    } else if (pageNum !== currentPage) {
+      handlePageChange(pageNum);
+    }
+  };
+
+  const handlePageInputKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") handlePageInputBlur();
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-1 sm:gap-2 px-1 sm:px-2">
+      <div className="hidden sm:block flex-1 text-[11px] text-left text-muted-foreground w-full">
+        Hiển thị {totalItems > 0 ? startItem : 0} -{" "}
+        {totalItems > 0 ? endItem : 0} trong tổng số {totalItems} mục
+      </div>
+
+      <div className="flex items-center justify-center gap-2 w-full sm:w-auto overflow-x-auto">
+        <div className="flex items-center gap-1 px-1 border-r pr-1 sm:pr-1.5">
+          <p className="hidden sm:block text-[11px] font-medium whitespace-nowrap">
+            Số dòng
+          </p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={handlePageSizeChange}
+            disabled={disabled}
+          >
+            <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={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 50, 100, 500, 1000].map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-1 pl-1">
+          <Button
+            variant="outline"
+            className="hidden h-6 w-6 p-0 lg:flex"
+            onClick={() => handlePageChange(1)}
+            disabled={currentPage <= 1 || disabled || totalItems === 0}
+          >
+            <span className="sr-only">Trang đầu</span>
+            <ChevronsLeft className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-6 w-6 p-0"
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage <= 1 || disabled || totalItems === 0}
+          >
+            <span className="sr-only">Trang trước</span>
+            <ChevronLeft className="h-3 w-3" />
+          </Button>
+
+          <div className="flex items-center gap-1 sm:gap-2 px-1">
+            <span className="hidden sm:inline text-[11px] font-medium whitespace-nowrap">
+              Trang
+            </span>
+            <input
+              className="h-6 w-10 sm:w-12 rounded-md border border-input bg-background px-1 text-[11px] text-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+              value={inputPage}
+              onChange={(e) => setInputPage(e.target.value)}
+              onBlur={handlePageInputBlur}
+              onKeyDown={handlePageInputKeyDown}
+              disabled={disabled || totalItems === 0}
+            />
+            <span className="text-[11px] font-medium text-muted-foreground whitespace-nowrap">
+              / {Math.max(1, pageCount)}
+            </span>
+          </div>
+
+          <Button
+            variant="outline"
+            className="h-6 w-6 p-0"
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage >= pageCount || disabled || totalItems === 0}
+          >
+            <span className="sr-only">Trang sau</span>
+            <ChevronRight className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-6 w-6 p-0 lg:flex"
+            onClick={() => handlePageChange(pageCount)}
+            disabled={currentPage >= pageCount || disabled || totalItems === 0}
+          >
+            <span className="sr-only">Trang cuối</span>
+            <ChevronsRight className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/index.tsx

@@ -19,3 +19,4 @@ export * from "./pages/not-found";
 export * from "./shared";
 
 export { UrlPagination } from "./data-display/url-pagination";
+export { ShallowPagination } from "./data-display/shallow-pagination";

package/src/user/components/index.ts

@@ -1,4 +1,5 @@
 export { UserStats } from "./user-stats";
 export { UserToolbar } from "./user-toolbar";
 export { UsersCardView } from "./users-card-view";
+export { UsersTable } from "./users-table";
 export { UnifiedProfileDialog } from "./unified-profile-dialog";

package/src/user/components/user-toolbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Plus, Search, LayoutGrid, List, X, Filter } from "lucide-react";
 import {
   Button,
@@ -45,9 +45,15 @@ export function UserToolbar({
 }: UserToolbarProps) {
   const [localSearch, setLocalSearch] = useState("");
 
-  // Debounce search
+  // Debounce search. CHỈ phát khi giá trị thật sự đổi so với lần phát trước:
+  // effect này còn chạy lại khi identity `onSearchChange` đổi (client page tạo
+  // lại callback lúc URL đổi), mà phát lại "" lúc đó là một cú router.push xoá
+  // sạch query — từng nuốt mất ?page khi bấm phân trang.
+  const lastEmittedSearch = useRef(localSearch);
   useEffect(() => {
+    if (localSearch === lastEmittedSearch.current) return;
     const timer = setTimeout(() => {
+      lastEmittedSearch.current = localSearch;
       onSearchChange(localSearch);
     }, 300);
     return () => clearTimeout(timer);

package/src/user/components/user-visuals.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Badge } from "../../ui";
+
+// Palette avatar dùng chung cho card view + table view — đổi một chỗ đổi cả hai.
+export const AVATAR_PALETTE = [
+  { bg: "bg-blue-600", text: "text-white" },
+  { bg: "bg-emerald-600", text: "text-white" },
+  { bg: "bg-orange-600", text: "text-white" },
+  { bg: "bg-violet-600", text: "text-white" },
+  { bg: "bg-cyan-600", text: "text-white" },
+  { bg: "bg-rose-600", text: "text-white" },
+];
+
+export const getAvatarColor = (name: string | null) => {
+  if (!name) return AVATAR_PALETTE[0];
+  const charCode = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
+  return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
+};
+
+export const getInitials = (name: string | null) => {
+  if (!name) return "U";
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+};
+
+const BADGE_BASE =
+  "text-[9px] h-4 px-1.5 font-bold border-transparent uppercase tracking-widest shrink-0 rounded-full";
+
+export function UserStatusBadge({ active }: { active: boolean }) {
+  return active ? (
+    <Badge
+      className={`${BADGE_BASE} bg-emerald-100 text-emerald-700 hover:bg-emerald-200`}
+    >
+      <div className="w-1.5 h-1.5 rounded-full bg-emerald-600 mr-1.5" />
+      Hoạt động
+    </Badge>
+  ) : (
+    <Badge
+      className={`${BADGE_BASE} bg-slate-100 text-slate-600 hover:bg-slate-200`}
+    >
+      <div className="w-1.5 h-1.5 rounded-full bg-slate-400 mr-1.5" />
+      Đã khóa
+    </Badge>
+  );
+}
+
+export function UserTypeBadge({
+  userType,
+  short,
+}: {
+  userType?: string | null;
+  short?: boolean;
+}) {
+  if (userType === "customer") {
+    return (
+      <Badge
+        className={`${BADGE_BASE} bg-emerald-100 text-emerald-700 hover:bg-emerald-200`}
+      >
+        {short ? "Khách" : "Khách hàng"}
+      </Badge>
+    );
+  }
+  if (userType === "supplier") {
+    return (
+      <Badge
+        className={`${BADGE_BASE} bg-orange-100 text-orange-700 hover:bg-orange-200`}
+      >
+        {short ? "NCC" : "Nhà cung cấp"}
+      </Badge>
+    );
+  }
+  return (
+    <Badge
+      className={`${BADGE_BASE} bg-indigo-100 text-indigo-700 hover:bg-indigo-200`}
+    >
+      {short ? "NV" : "Nhân viên"}
+    </Badge>
+  );
+}

package/src/user/components/users-card-view.tsx

@@ -16,6 +16,7 @@ import {
 import { cn } from "../../utils";
 import { Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Building2, KeyRound, Mail, ShieldCheck, Copy } from "lucide-react";
 import { toast } from "sonner";
+import { getAvatarColor, getInitials } from "./user-visuals";
 
 interface UsersCardViewProps {
   data: any[];
@@ -24,22 +25,6 @@ interface UsersCardViewProps {
   onViewPermissions?: (user: any) => void;
 }
 
-// Professional Corporate Palette for Avatars
-const AVATAR_PALETTE = [
-  { bg: "bg-blue-600", text: "text-white" },
-  { bg: "bg-emerald-600", text: "text-white" },
-  { bg: "bg-orange-600", text: "text-white" },
-  { bg: "bg-violet-600", text: "text-white" },
-  { bg: "bg-cyan-600", text: "text-white" },
-  { bg: "bg-rose-600", text: "text-white" },
-];
-
-const getAvatarColor = (name: string | null) => {
-  if (!name) return AVATAR_PALETTE[0];
-  const charCode = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
-  return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
-};
-
 export function UsersCardView({
   data,
   onSelect,
@@ -61,16 +46,6 @@ export function UsersCardView({
     );
   }
 
-  const getInitials = (name: string | null) => {
-    if (!name) return "U";
-    return name
-      .split(" ")
-      .map((n) => n[0])
-      .join("")
-      .toUpperCase()
-      .slice(0, 2);
-  };
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 pb-4 mt-2">
       {data.map((user) => {

package/src/user/components/users-table.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useMemo } from "react";
+import { Briefcase, Building2, Edit2, Phone } from "lucide-react";
+
+import type { ColumnDef } from "@tanstack/react-table";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  DataTable,
+} from "../../ui";
+import { cn } from "../../utils";
+import {
+  UserStatusBadge,
+  UserTypeBadge,
+  getAvatarColor,
+  getInitials,
+} from "./user-visuals";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type UserRow = Record<string, any>;
+
+interface UsersTableProps {
+  data: UserRow[];
+  /** Phân trang server-style qua URL — client page cắt trang và cầm URL. */
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number, pageSize: number) => void;
+  onRowClick?: (user: UserRow) => void;
+  onEdit?: (user: UserRow) => void;
+}
+
+/**
+ * Bảng danh sách người dùng theo chuẩn chung (DataTable tanstack + thanh phân
+ * trang "Hiển thị x - y trong tổng số n mục"). Thay cho BasicUserTable cũ vốn
+ * tự chế phân trang bằng state cục bộ — số trang không vào URL, không đồng bộ
+ * với card view.
+ */
+export function UsersTable({
+  data,
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onRowClick,
+  onEdit,
+}: UsersTableProps) {
+  const columns = useMemo<ColumnDef<UserRow>[]>(
+    () => [
+      {
+        id: "user",
+        header: "Người dùng",
+        size: 300,
+        minSize: 260,
+        cell: ({ row }) => {
+          const user = row.original;
+          const isActive = user.isActive || user.status === "active";
+          const avatarColors = getAvatarColor(user.name);
+          return (
+            <div className="flex items-start gap-3 py-1">
+              <Avatar className="h-9 w-9 shrink-0 rounded-full border shadow-sm">
+                <AvatarImage
+                  src={user.image || user.avatar || ""}
+                  alt={user.name || ""}
+                  className="object-cover rounded-full"
+                />
+                <AvatarFallback
+                  className={cn(
+                    "text-xs font-bold rounded-full",
+                    avatarColors.bg,
+                    avatarColors.text,
+                  )}
+                >
+                  {getInitials(user.name || user.email)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col min-w-0">
+                <div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
+                  <span className="font-semibold text-sm text-foreground truncate mr-1">
+                    {user.name || "Chưa đặt tên"}
+                  </span>
+                  <UserStatusBadge active={isActive} />
+                  <UserTypeBadge userType={user.userType} />
+                </div>
+                <span className="text-xs text-muted-foreground truncate">
+                  {user.email || "—"}
+                </span>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "contact",
+        header: "Liên hệ",
+        size: 150,
+        minSize: 130,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1.5">
+            <Phone className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            <span className="text-sm text-foreground/80">
+              {row.original.profiles?.phone || row.original.phone || "—"}
+            </span>
+          </div>
+        ),
+      },
+      {
+        id: "department",
+        header: "Phòng ban / Chi nhánh",
+        size: 200,
+        minSize: 170,
+        cell: ({ row }) => {
+          const user = row.original;
+          const branches =
+            user.branchNames && user.branchNames.length > 0
+              ? user.branchNames.join(", ")
+              : user.branchName || user.branch?.name || "—";
+          return (
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-1.5">
+                <Briefcase className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                <span
+                  className="text-sm font-medium text-foreground/80 truncate max-w-[200px]"
+                  title={user.departmentName}
+                >
+                  {user.departmentName || "—"}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Building2 className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                <span
+                  className="text-xs text-muted-foreground truncate max-w-[200px]"
+                  title={branches}
+                >
+                  {branches}
+                </span>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "roles",
+        header: "Vai trò",
+        size: 240,
+        minSize: 180,
+        cell: ({ row }) => {
+          const roleNames: string[] = row.original.roleNames || [];
+          return (
+            <div className="flex flex-wrap gap-1">
+              {roleNames.length > 0 ? (
+                roleNames.map((r, i) => (
+                  <Badge
+                    key={i}
+                    variant="secondary"
+                    className="text-[10px] px-2 py-0.5 font-medium truncate max-w-[140px]"
+                    title={r}
+                  >
+                    {r}
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-xs text-muted-foreground italic">—</span>
+              )}
+            </div>
+          );
+        },
+      },
+      ...(onEdit
+        ? [
+            {
+              id: "actions",
+              header: "",
+              size: 60,
+              maxSize: 60,
+              cell: ({ row }: { row: { original: UserRow } }) => (
+                <div className="text-right">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEdit(row.original);
+                    }}
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ),
+            } satisfies ColumnDef<UserRow>,
+          ]
+        : []),
+    ],
+    [onEdit],
+  );
+
+  return (
+    <DataTable<UserRow>
+      data={data}
+      columns={columns}
+      enableRowNumber
+      pagination={{ page, pageSize, total }}
+      onPaginationChange={(p) => onPageChange(p.page, p.pageSize)}
+      onRowClick={onRowClick}
+      tableClassName="text-sm"
+      cellClassName="py-2"
+    />
+  );
+}