@goplusvn/core 0.1.21 → 0.1.23

package/src/rbac/pages/role-list-page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { useMemo, useCallback, useState } from "react";
-import { Loader2, UserCheck, UserX, KeyRound } from "lucide-react";
-import { 
-  Button, 
+import type { ReactNode } from "react";
+import { Loader2, UserX, KeyRound } from "lucide-react";
+import {
+  Button,
   Badge,
+  StatusIndicator,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -59,6 +61,8 @@ export interface RoleListPageProps {
     description: string | null;
     isDefault?: boolean;
   }>;
+  /** Nút Import app-specific (vd ImportDialog) — render trong toolbar khi có quyền import. */
+  importSlot?: ReactNode;
 }
 
 export function RoleListPage({
@@ -68,6 +72,7 @@ export function RoleListPage({
   initialData,
   resources,
   actions,
+  importSlot,
 }: RoleListPageProps) {
   const canCreate = permissions.create;
   const canUpdate = permissions.update;
@@ -199,7 +204,9 @@ export function RoleListPage({
 
   if (error) {
     return (
-      <div className="text-red-500">Không thể tải dữ liệu: {error.message}</div>
+      <div className="text-destructive">
+        Không thể tải dữ liệu: {error.message}
+      </div>
     );
   }
 
@@ -223,6 +230,7 @@ export function RoleListPage({
         canCreate={canCreate}
         canImport={canImport}
         canExport={canExport}
+        importSlot={importSlot}
       />
 
       {/* Roles Grid */}
@@ -342,15 +350,9 @@ export function RoleListPage({
                         </div>
                         <div className="flex items-center space-x-2">
                           {user.isActive ? (
-                            <Badge variant="default" className="text-xs">
-                              <UserCheck className="h-3 w-3 mr-1" />
-                              Active
-                            </Badge>
+                            <StatusIndicator status="active" />
                           ) : (
-                            <Badge variant="secondary" className="text-xs">
-                              <UserX className="h-3 w-3 mr-1" />
-                              Inactive
-                            </Badge>
+                            <StatusIndicator status="inactive" />
                           )}
                         </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>
   );