@goplusvn/core 0.1.20 → 0.1.22

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.22",
   "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/forms/date-picker.tsx

@@ -1,16 +1,18 @@
 "use client";
 
-import { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { addDays, format, isValid, parse } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 
 import type { ComponentProps } from "react";
 
 import { cn } from "../../utils";
 
-import { Button } from "../primitives";
+import { Button, Input } from "../primitives";
 import {
   Calendar,
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "../primitives/client";
@@ -24,11 +26,50 @@ type DatePickerProps = Omit<
   formatStr?: string;
   popoverContentClassName?: string;
   popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  /** Class cho ô input (giữ tên cũ để tương thích các consumer hiện có) */
   buttonClassName?: string;
   buttonOptions?: ComponentProps<typeof Button>;
   placeholder?: string;
 };
 
+/**
+ * Các định dạng chấp nhận khi người dùng GÕ ngày (ngoài formatStr hiển thị).
+ * Dạng yy đặt TRƯỚC yyyy-fallback để "09/07/26" ra 2026 (không phải năm 0026);
+ * dạng thiếu năm/tháng ("09/07", "9") hiểu theo hôm nay.
+ */
+const TYPING_FORMATS = [
+  "dd/MM/yyyy",
+  "d/M/yyyy",
+  "dd/MM/yy",
+  "d/M/yy",
+  "dd-MM-yyyy",
+  "yyyy-MM-dd",
+  "dd/MM",
+  "d/M",
+  "d",
+];
+
+/** Tự chèn dấu phân cách theo formatStr khi người dùng gõ toàn số. */
+function maskDigits(raw: string, formatStr: string): string {
+  const digits = raw.replace(/\D/g, "");
+  let out = "";
+  let di = 0;
+  for (let i = 0; i < formatStr.length && di < digits.length; i++) {
+    const ch = formatStr[i];
+    if (/[a-zA-Z]/.test(ch)) {
+      out += digits[di++];
+    } else {
+      out += ch;
+    }
+  }
+  return out;
+}
+
+/**
+ * DatePicker cho phép GÕ ngày trực tiếp (tự chèn dấu phân cách, chấp nhận
+ * dd/MM/yyyy, d/M, yy..., ↑/↓ để +/- 1 ngày) hoặc bấm icon lịch để chọn.
+ * Gõ sai → viền đỏ, blur trả về giá trị đang có.
+ */
 export function DatePicker({
   value,
   onValueChange,
@@ -37,25 +78,104 @@ export function DatePicker({
   popoverContentOptions,
   buttonClassName,
   buttonOptions,
-  placeholder = "Pick date",
+  placeholder = "Chọn ngày",
   ...props
 }: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState(value ? format(value, formatStr) : "");
+
+  // Đồng bộ khi giá trị đổi từ bên ngoài (chọn lịch, reset form...)
+  useEffect(() => {
+    setText(value ? format(value, formatStr) : "");
+  }, [value, formatStr]);
+
+  const parseTyped = (raw: string): Date | null => {
+    for (const fmt of [formatStr, ...TYPING_FORMATS]) {
+      const parsed = parse(raw, fmt, new Date());
+      // Chặn năm rác kiểu 0026 khi yyyy khớp nhầm chuỗi 2 chữ số
+      if (isValid(parsed) && parsed.getFullYear() >= 1000) return parsed;
+    }
+    return null;
+  };
+
+  const commitText = () => {
+    const raw = text.trim();
+    if (!raw) {
+      if (value) onValueChange?.(undefined);
+      return;
+    }
+    const parsed = parseTyped(raw);
+    if (parsed) {
+      onValueChange?.(parsed);
+      setText(format(parsed, formatStr));
+      return;
+    }
+    // Không parse được → trả về giá trị đang có
+    setText(value ? format(value, formatStr) : "");
+  };
+
+  // Báo đỏ khi đã gõ đủ độ dài mà vẫn không ra ngày hợp lệ
+  const slotCount = formatStr.replace(/[^a-zA-Z]/g, "").length;
+  const isComplete = text.replace(/\D/g, "").length >= slotCount;
+  const invalid = isComplete && !parseTyped(text.trim());
+
+  const stepDay = (delta: number) => {
+    onValueChange?.(addDays(value ?? new Date(), delta));
+  };
+
   return (
-    <Popover modal>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn("w-full px-3 text-start font-normal", buttonClassName)}
-          {...buttonOptions}
-        >
-          {value ? (
-            <span>{format(value, formatStr)}</span>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <CalendarIcon className="shrink-0 h-4 w-4 ms-auto text-muted-foreground" />
-        </Button>
-      </PopoverTrigger>
+    <Popover modal open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div className="relative w-full">
+          <Input
+            value={text}
+            onChange={(e) => {
+              const v = e.target.value;
+              // Chỉ mask khi đang gõ thêm (không phá thao tác xoá/sửa)
+              if (v.length > text.length && /^[\d/\-.]*$/.test(v)) {
+                setText(maskDigits(v, formatStr));
+              } else {
+                setText(v);
+              }
+            }}
+            onBlur={commitText}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                commitText();
+                (e.target as HTMLInputElement).blur();
+              } else if (e.key === "Escape") {
+                setOpen(false);
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                stepDay(1);
+              } else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                stepDay(-1);
+              }
+            }}
+            placeholder={placeholder}
+            inputMode="numeric"
+            aria-invalid={invalid || undefined}
+            className={cn(
+              "w-full pe-9",
+              invalid &&
+                "border-destructive focus-visible:ring-destructive/40",
+              buttonClassName,
+            )}
+          />
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              aria-label="Mở lịch"
+              className="absolute end-0 top-0 h-full w-9 p-0 text-muted-foreground hover:text-foreground"
+              {...buttonOptions}
+            >
+              <CalendarIcon className="h-4 w-4 shrink-0" />
+            </Button>
+          </PopoverTrigger>
+        </div>
+      </PopoverAnchor>
       <PopoverContent
         className={cn("w-auto p-0", popoverContentClassName)}
         align="start"
@@ -64,9 +184,37 @@ export function DatePicker({
         <Calendar
           mode="single"
           selected={value}
-          onSelect={onValueChange}
+          onSelect={(date) => {
+            onValueChange?.(date ?? undefined);
+            setOpen(false);
+          }}
+          defaultMonth={value}
           {...props}
         />
+        <div className="flex items-center justify-between border-t p-2">
+          <Button
+            type="button"
+            variant="ghost"
+            className="h-7 px-2 text-xs"
+            onClick={() => {
+              onValueChange?.(new Date());
+              setOpen(false);
+            }}
+          >
+            Hôm nay
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="h-7 px-2 text-xs text-muted-foreground"
+            onClick={() => {
+              onValueChange?.(undefined);
+              setOpen(false);
+            }}
+          >
+            Xoá
+          </Button>
+        </div>
       </PopoverContent>
     </Popover>
   );