@goplusvn/core 0.1.20 → 0.1.21

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.20",
+  "version": "0.1.21",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -480,7 +480,7 @@ export function DataTable<TData extends Record<string, unknown>>({
 
       {/* Pagination Section */}
       {pagination && (
-        <div className="border-t border-border dark:border-slate-800 bg-card px-4 sm:px-6 py-2 shrink-0">
+        <div className="border-t border-border dark:border-slate-800 bg-card px-2 sm:px-4 py-1 shrink-0">
           <MemoizedPagination
             table={table}
             currentPage={pagination.page}

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

@@ -65,21 +65,21 @@ export function DataTablePagination<TData>({
   };
 
   return (
-    <div className="flex flex-col sm:flex-row items-center justify-between gap-1 sm:gap-2 py-0.5 px-1 sm:px-2">
-      <div className="hidden sm:block flex-1 text-xs text-left text-muted-foreground w-full">
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-1 px-1 sm:px-2">
+      <div className="hidden sm:block flex-1 text-[11px] text-left text-muted-foreground w-full">
         Hiển thị {startItem} - {endItem} trong tổng số {total} mục
       </div>
 
-      <div className="flex items-center justify-center gap-2 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0">
-        <div className="flex items-center gap-1 sm:gap-2 px-1 sm:px-2 border-r pr-1 sm:pr-2">
-          <p className="hidden sm:block text-xs font-medium whitespace-nowrap">
+      <div className="flex items-center justify-center gap-2 w-full sm:w-auto overflow-x-auto">
+        <div className="flex items-center gap-1 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={`${effPageSize}`}
             onValueChange={(value) => table.setPageSize(Number(value))}
           >
-            <SelectTrigger className="h-6 w-[65px] sm:w-[75px] text-xs focus:ring-inset focus:ring-offset-0">
+            <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} />
             </SelectTrigger>
             <SelectContent side="top">
@@ -113,11 +113,11 @@ export function DataTablePagination<TData>({
           </Button>
 
           <div className="flex items-center gap-1 sm:gap-2 px-1">
-            <span className="hidden sm:inline text-xs font-medium whitespace-nowrap">
+            <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-xs text-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+              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}
@@ -126,7 +126,7 @@ export function DataTablePagination<TData>({
               }}
               disabled={total === 0}
             />
-            <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">
+            <span className="text-[11px] font-medium text-muted-foreground whitespace-nowrap">
               / {pageCount}
             </span>
           </div>

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

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
+
+interface PaginationProps {
+  totalItems: number
+  currentPage: number
+  pageSize: number
+  disabled?: boolean
+}
+
+export function UrlPagination({
+  totalItems,
+  currentPage,
+  pageSize,
+  disabled,
+}: PaginationProps) {
+  const router = useRouter()
+  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)
+
+  // Create a new URLSearchParams instance to update params
+  const createQueryString = React.useCallback(
+    (params: Record<string, string | number | null>) => {
+      const newSearchParams = new URLSearchParams(searchParams?.toString())
+
+      for (const [key, value] of Object.entries(params)) {
+        if (value === null) {
+          newSearchParams.delete(key)
+        } else {
+          newSearchParams.set(key, String(value))
+        }
+      }
+
+      return newSearchParams.toString()
+    },
+    [searchParams]
+  )
+
+  const handlePageChange = (page: number) => {
+    if (page < 1 || page > Math.max(1, pageCount)) return
+    router.push(`${pathname}?${createQueryString({ page })}`)
+  }
+
+  const handlePageSizeChange = (value: string) => {
+    const newPageSize = Number(value)
+    // When changing page size, reset to page 1 to avoid out of bounds
+    router.push(
+      `${pathname}?${createQueryString({ pageSize: newPageSize, page: 1 })}`
+    )
+  }
+
+  const [inputPage, setInputPage] = React.useState(String(currentPage))
+
+  React.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: React.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">
+      {/* Ẩn text "Hiển thị" trên mobile, chỉ hiện trên màn hình sm trở lên */}
+      <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 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 sm:h-3 sm: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 sm:h-3 sm: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-sm 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 sm:h-3 sm: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 sm:h-3 sm:w-3" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/index.tsx

@@ -16,3 +16,5 @@ export * from "./auth";
 export * from "./management";
 export * from "./pages/not-found";
 export * from "./shared";
+
+export { UrlPagination } from "./data-display/url-pagination";