@goplusvn/core 0.1.21 → 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.21",
+  "version": "0.1.22",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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>
   );

package/src/ui/forms/multi-select.tsx

@@ -2,15 +2,16 @@
 
 import * as React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Check, ChevronsUpDown, Search, X } from "lucide-react";
+import { Check, ChevronsUpDown, Loader2, Search, X } from "lucide-react";
 
 import { cn } from "../../utils";
 
 import { Badge, Button, Input } from "../primitives";
-import { ScrollArea } from "../primitives/client";
+
+type OptionValue = string | number | boolean;
 
 export interface MultiSelectOption {
-  value: string | number | boolean;
+  value: OptionValue;
   label: string;
   /** Whether this option is disabled and cannot be selected */
   disabled?: boolean;
@@ -22,17 +23,17 @@ export interface MultiSelectOption {
 
 interface MultiSelectProps {
   options: MultiSelectOption[];
-  value?: (string | number | boolean)[];
-  onValueChange?: (value: (string | number | boolean)[]) => void;
+  value?: OptionValue[];
+  onValueChange?: (value: OptionValue[]) => void;
   /** Default value for uncontrolled mode */
-  defaultValue?: (string | number | boolean)[];
+  defaultValue?: OptionValue[];
   placeholder?: string;
   searchPlaceholder?: string;
   emptyText?: string;
   disabled?: boolean;
   /**
-   * Maximum number of items to display. Extra selected items will be summarized
-   * Optional, defaults to 3
+   * Maximum number of chips to display on the trigger. Extra selected items
+   * are summarized as "+N". Optional, defaults to 3.
    */
   maxCount?: number;
   /**
@@ -40,6 +41,19 @@ interface MultiSelectProps {
    * Can be boolean true for default responsive behavior or an object for custom configuration
    */
   responsive?: boolean | ResponsiveConfig;
+  /**
+   * Đưa các mục ĐANG CHỌN lên đầu danh sách mỗi lần mở dropdown
+   * (thứ tự đóng băng trong lúc mở — toggle không làm nhảy vị trí).
+   */
+  selectedFirst?: boolean;
+  /**
+   * Async mode: nạp options từ server theo từ khoá tìm kiếm (debounce 300ms).
+   * Khi truyền prop này, `options` chỉ dùng làm nguồn label ban đầu (có thể []),
+   * và bộ lọc client bị bỏ qua (server tự lọc).
+   */
+  loadOptions?: (search: string) => Promise<MultiSelectOption[]>;
+  /** Text hiển thị khi đang tải (async mode) */
+  loadingText?: string;
   className?: string;
   id?: string;
 }
@@ -67,21 +81,75 @@ interface ResponsiveConfig {
 
 /**
  * Imperative methods that will be exposed through ref
- * (Currently not implemented - will be added in later steps)
  */
 export interface MultiSelectRef {
   /** Reset to default value */
   reset: () => void;
   /** Get current selected values */
-  getSelectedValues: () => (string | number | boolean)[];
+  getSelectedValues: () => OptionValue[];
   /** Set selected values programmatically */
-  setSelectedValues: (values: (string | number | boolean)[]) => void;
+  setSelectedValues: (values: OptionValue[]) => void;
   /** Clear all selected values */
   clear: () => void;
   /** Focus the component */
   focus: () => void;
 }
 
+/** Bảng màu xoay vòng cho chip đã chọn trên trigger */
+const CHIP_COLORS = [
+  "border-transparent bg-blue-100 text-blue-700 hover:bg-blue-100 dark:bg-blue-500/20 dark:text-blue-300",
+  "border-transparent bg-emerald-100 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-500/20 dark:text-emerald-300",
+  "border-transparent bg-purple-100 text-purple-700 hover:bg-purple-100 dark:bg-purple-500/20 dark:text-purple-300",
+  "border-transparent bg-amber-100 text-amber-800 hover:bg-amber-100 dark:bg-amber-500/20 dark:text-amber-300",
+  "border-transparent bg-pink-100 text-pink-700 hover:bg-pink-100 dark:bg-pink-500/20 dark:text-pink-300",
+  "border-transparent bg-cyan-100 text-cyan-700 hover:bg-cyan-100 dark:bg-cyan-500/20 dark:text-cyan-300",
+];
+
+/** Ngưỡng bật windowing cho danh sách dài */
+const VIRTUALIZE_THRESHOLD = 200;
+const ITEM_HEIGHT = 32;
+const LIST_MAX_HEIGHT = 250;
+
+const stripAccents = (str: string) =>
+  str ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : "";
+
+/**
+ * Tìm vị trí khớp (không dấu, không phân biệt hoa thường) của query trong
+ * label GỐC — trả về [start, end) trên chuỗi gốc để highlight.
+ */
+function findMatchRange(
+  label: string,
+  query: string,
+): [number, number] | null {
+  const q = stripAccents(query.trim().toLowerCase());
+  if (!q || !label) return null;
+  let stripped = "";
+  const indexMap: number[] = [];
+  for (let i = 0; i < label.length; i++) {
+    const s = stripAccents(label[i].toLowerCase());
+    for (let j = 0; j < s.length; j++) {
+      stripped += s[j];
+      indexMap.push(i);
+    }
+  }
+  const idx = stripped.indexOf(q);
+  if (idx < 0) return null;
+  return [indexMap[idx], indexMap[idx + q.length - 1] + 1];
+}
+
+function HighlightLabel({ label, query }: { label: string; query: string }) {
+  const range = useMemo(() => findMatchRange(label, query), [label, query]);
+  if (!range) return <>{label}</>;
+  const [s, e] = range;
+  return (
+    <>
+      {label.slice(0, s)}
+      <span className="font-semibold text-primary">{label.slice(s, e)}</span>
+      {label.slice(e)}
+    </>
+  );
+}
+
 export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
   (
     {
@@ -89,12 +157,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       value: controlledValue,
       onValueChange,
       defaultValue = [],
-      placeholder = "Select options...",
-      searchPlaceholder = "Search...",
-      emptyText = "No option found.",
+      placeholder = "Chọn giá trị...",
+      searchPlaceholder = "Tìm kiếm...",
+      emptyText = "Không có kết quả.",
       maxCount = 3,
       disabled = false,
       responsive = false,
+      selectedFirst = false,
+      loadOptions,
+      loadingText = "Đang tải...",
       className,
       id,
     },
@@ -102,9 +173,27 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
   ) => {
     // State for uncontrolled mode
     const [internalValue, setInternalValue] =
-      useState<(string | number | boolean)[]>(defaultValue);
+      useState<OptionValue[]>(defaultValue);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    // Snapshot selection tại thời điểm MỞ dropdown (cho selectedFirst)
+    const [openSnapshot, setOpenSnapshot] = useState<OptionValue[]>([]);
+
+    // Async mode state
+    const hasAsync = !!loadOptions;
+    const [remoteOptions, setRemoteOptions] = useState<
+      MultiSelectOption[] | null
+    >(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const loadOptionsRef = useRef(loadOptions);
+    const loadSeqRef = useRef(0);
+    /** Cache mọi option đã thấy — để render label các mục đã chọn khi remote list đổi */
+    const seenOptionsRef = useRef(new Map<OptionValue, MultiSelectOption>());
+
+    useEffect(() => {
+      loadOptionsRef.current = loadOptions;
+    });
 
     // Determine if we're in controlled or uncontrolled mode
     const isControlled = controlledValue !== undefined;
@@ -114,6 +203,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const containerRef = useRef<HTMLDivElement>(null);
     const searchInputRef = useRef<HTMLInputElement>(null);
     const dropdownRef = useRef<HTMLDivElement>(null);
+    const listRef = useRef<HTMLDivElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     // Accessibility - Live regions for screen reader announcements
@@ -188,35 +278,122 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     const responsiveSettings = getResponsiveSettings();
 
-    // Filter options based on search value
+    // ===== Async loading (debounce 300ms khi gõ) =====
+    useEffect(() => {
+      if (!hasAsync || !open) return;
+      const seq = ++loadSeqRef.current;
+      setIsLoading(true);
+      const timer = setTimeout(
+        () => {
+          loadOptionsRef
+            .current!(searchValue)
+            .then((opts) => {
+              if (seq !== loadSeqRef.current) return;
+              setRemoteOptions(opts);
+              opts.forEach((o) => seenOptionsRef.current.set(o.value, o));
+            })
+            .catch(() => {
+              if (seq === loadSeqRef.current) setRemoteOptions([]);
+            })
+            .finally(() => {
+              if (seq === loadSeqRef.current) setIsLoading(false);
+            });
+        },
+        searchValue ? 300 : 0,
+      );
+      return () => clearTimeout(timer);
+    }, [hasAsync, open, searchValue]);
+
+    // Nguồn label cho các mục đã chọn (async: gộp cache đã thấy)
+    const knownOptions = useMemo(() => {
+      const map = new Map<OptionValue, MultiSelectOption>();
+      if (hasAsync) {
+        seenOptionsRef.current.forEach((o, v) => map.set(v, o));
+        (remoteOptions ?? []).forEach((o) => map.set(o.value, o));
+      }
+      options.forEach((o) => map.set(o.value, o));
+      return map;
+    }, [options, remoteOptions, hasAsync]);
+
+    // Nguồn danh sách hiển thị (selectedFirst: đóng băng thứ tự theo snapshot lúc mở)
+    const sourceOptions = useMemo(() => {
+      if (hasAsync) return remoteOptions ?? [];
+      if (!selectedFirst) return options;
+      const snap = new Set(openSnapshot);
+      const sel: MultiSelectOption[] = [];
+      const unsel: MultiSelectOption[] = [];
+      for (const o of options) (snap.has(o.value) ? sel : unsel).push(o);
+      return [...sel, ...unsel];
+    }, [options, hasAsync, remoteOptions, selectedFirst, openSnapshot]);
+
+    // Filter options based on search value (async: server đã lọc)
     const filteredOptions = useMemo(() => {
+      if (hasAsync) return sourceOptions;
       if (!searchValue.trim()) {
-        return options;
+        return sourceOptions;
       }
-      const removeAccents = (str: string) => {
-        return str ? str.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
-      };
-      
-      const searchLower = removeAccents(searchValue.toLowerCase());
-      
-      return options.filter(
-        (option) => {
-          const labelLower = option.label ? removeAccents(option.label.toLowerCase()) : '';
-          const valueLower = option.value !== undefined && option.value !== null 
-            ? removeAccents(String(option.value).toLowerCase()) 
-            : '';
-          return labelLower.includes(searchLower) || valueLower.includes(searchLower);
-        }
+      const searchLower = stripAccents(searchValue.toLowerCase());
+
+      return sourceOptions.filter((option) => {
+        const labelLower = option.label
+          ? stripAccents(option.label.toLowerCase())
+          : "";
+        const valueLower =
+          option.value !== undefined && option.value !== null
+            ? stripAccents(String(option.value).toLowerCase())
+            : "";
+        return (
+          labelLower.includes(searchLower) || valueLower.includes(searchLower)
+        );
+      });
+    }, [sourceOptions, searchValue, hasAsync]);
+
+    // ===== Windowing cho danh sách dài =====
+    const isVirtual = filteredOptions.length > VIRTUALIZE_THRESHOLD;
+    const [scrollTop, setScrollTop] = useState(0);
+
+    const virtualRange = useMemo(() => {
+      if (!isVirtual) return { start: 0, end: filteredOptions.length };
+      const start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - 10);
+      const end = Math.min(
+        filteredOptions.length,
+        Math.ceil((scrollTop + LIST_MAX_HEIGHT) / ITEM_HEIGHT) + 10,
       );
-    }, [options, searchValue]);
+      return { start, end };
+    }, [isVirtual, scrollTop, filteredOptions.length]);
 
     // Reset search when dropdown closes
     useEffect(() => {
       if (!open) {
         setSearchValue("");
+        setScrollTop(0);
       }
     }, [open]);
 
+    // Reset highlight khi mở/lọc thay đổi
+    useEffect(() => {
+      setHighlightedIndex(filteredOptions.length > 0 ? 0 : -1);
+    }, [open, searchValue, filteredOptions.length]);
+
+    // Cuộn mục highlight vào tầm nhìn (windowing: tự tính scrollTop)
+    useEffect(() => {
+      if (highlightedIndex < 0 || !open) return;
+      const el = listRef.current;
+      if (!el) return;
+      if (isVirtual) {
+        const top = highlightedIndex * ITEM_HEIGHT;
+        if (top < el.scrollTop) {
+          el.scrollTop = top;
+        } else if (top + ITEM_HEIGHT > el.scrollTop + el.clientHeight) {
+          el.scrollTop = top + ITEM_HEIGHT - el.clientHeight;
+        }
+      } else {
+        el.querySelector(
+          `[data-option-index="${highlightedIndex}"]`,
+        )?.scrollIntoView({ block: "nearest" });
+      }
+    }, [highlightedIndex, isVirtual, open]);
+
     // Focus search input when dropdown opens
     useEffect(() => {
       if (open && searchInputRef.current) {
@@ -268,23 +445,22 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     useEffect(() => {
       const selectedCount = value.length;
       const totalOptions = options.filter((opt) => !opt.disabled).length;
+      const totalText = !hasAsync && totalOptions > 0 ? `/${totalOptions}` : "";
 
       if (selectedCount !== prevSelectedCount.current) {
         const diff = selectedCount - prevSelectedCount.current;
         if (diff > 0) {
-          announce(`${selectedCount} of ${totalOptions} options selected.`);
+          announce(`Đã chọn ${selectedCount}${totalText} lựa chọn.`);
         } else if (diff < 0) {
-          announce(
-            `Option removed. ${selectedCount} of ${totalOptions} options selected.`,
-          );
+          announce(`Đã bỏ chọn. Còn ${selectedCount}${totalText} lựa chọn.`);
         }
         prevSelectedCount.current = selectedCount;
       }
-    }, [value, announce, options]);
+    }, [value, announce, options, hasAsync]);
 
     // Helper to update value (works for both controlled and uncontrolled)
     const updateValue = useCallback(
-      (newValue: (string | number | boolean)[]) => {
+      (newValue: OptionValue[]) => {
         if (!isControlled) {
           setInternalValue(newValue);
         }
@@ -294,9 +470,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     );
 
     const handleSelect = useCallback(
-      (optionValue: string | number | boolean) => {
+      (optionValue: OptionValue) => {
         // Check if option is disabled
-        const option = options.find((opt) => opt.value === optionValue);
+        const option = filteredOptions.find(
+          (opt) => opt.value === optionValue,
+        );
         if (option?.disabled) {
           return; // Don't allow selecting disabled options
         }
@@ -306,31 +484,56 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           : [...value, optionValue];
         updateValue(newValue);
       },
-      [value, options, updateValue],
+      [value, filteredOptions, updateValue],
+    );
+
+    const moveHighlight = useCallback(
+      (delta: number) => {
+        if (filteredOptions.length === 0) return;
+        let next = highlightedIndex;
+        for (let i = 0; i < filteredOptions.length; i++) {
+          next =
+            (next + delta + filteredOptions.length) % filteredOptions.length;
+          if (!filteredOptions[next]?.disabled) break;
+        }
+        setHighlightedIndex(next);
+      },
+      [filteredOptions, highlightedIndex],
     );
 
     const handleSelectAll = useCallback(() => {
-      updateValue(
-        filteredOptions.filter((opt) => !opt.disabled).map((opt) => opt.value),
-      );
-    }, [updateValue, filteredOptions]);
+      // Gộp với selection hiện có — không làm mất các mục đã chọn ngoài kết quả lọc
+      const filteredValues = filteredOptions
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value);
+      updateValue(Array.from(new Set([...value, ...filteredValues])));
+    }, [updateValue, filteredOptions, value]);
 
     const handleClearAll = useCallback(() => {
+      // Đang search → chỉ bỏ chọn các mục trong kết quả lọc
+      if (searchValue.trim()) {
+        const filteredValues = new Set(filteredOptions.map((opt) => opt.value));
+        updateValue(value.filter((v) => !filteredValues.has(v)));
+        return;
+      }
       updateValue([]);
-    }, [updateValue]);
+    }, [updateValue, value, filteredOptions, searchValue]);
 
     const handleRemove = useCallback(
-      (optionValue: string | number | boolean, e: React.MouseEvent) => {
+      (optionValue: OptionValue, e: React.MouseEvent) => {
         e.stopPropagation();
         updateValue(value.filter((v) => v !== optionValue));
       },
       [updateValue, value],
     );
 
-    const clearExtraOptions = useCallback(() => {
-      const newSelectedValues = value.slice(0, responsiveSettings.maxCount);
-      updateValue(newSelectedValues);
-    }, [value, responsiveSettings.maxCount, updateValue]);
+    const clearExtraOptions = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        updateValue(value.slice(0, responsiveSettings.maxCount));
+      },
+      [value, responsiveSettings.maxCount, updateValue],
+    );
 
     // Imperative API via ref
     React.useImperativeHandle(
@@ -342,7 +545,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           setSearchValue("");
         },
         getSelectedValues: () => value,
-        setSelectedValues: (values: (string | number | boolean)[]) => {
+        setSelectedValues: (values: OptionValue[]) => {
           updateValue(values);
         },
         clear: () => {
@@ -355,22 +558,24 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       [value, defaultValue, updateValue],
     );
 
-    const selectedOptions = options.filter((option) =>
-      value.includes(option.value),
+    // Các mục đã chọn kèm label (fallback String(value) nếu chưa biết label)
+    const selectedOptions = useMemo(
+      () =>
+        value.map(
+          (v) => knownOptions.get(v) ?? { value: v, label: String(v) },
+        ),
+      [value, knownOptions],
     );
 
-    // Get badge color based on index for variety
-    const getBadgeColor = (index: number) => {
-      const colors = [
-        "bg-blue-100 text-blue-700 hover:bg-blue-200",
-        "bg-green-100 text-green-700 hover:bg-green-200",
-        "bg-purple-100 text-purple-700 hover:bg-purple-200",
-        "bg-orange-100 text-orange-700 hover:bg-orange-200",
-        "bg-pink-100 text-pink-700 hover:bg-pink-200",
-        "bg-cyan-100 text-cyan-700 hover:bg-cyan-200",
-      ];
-      return colors[index % colors.length];
-    };
+    const isAllSelected =
+      !hasAsync && options.length > 1 && value.length === options.length;
+    const visibleChips = selectedOptions.slice(0, responsiveSettings.maxCount);
+    const extraCount = value.length - visibleChips.length;
+
+    const visibleOptions = filteredOptions.slice(
+      virtualRange.start,
+      virtualRange.end,
+    );
 
     return (
       <div ref={containerRef} className="relative w-full">
@@ -392,41 +597,78 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           aria-expanded={open}
           disabled={disabled}
           className={cn(
-            "w-full justify-between h-auto min-h-10 px-3 py-2",
+            "w-full justify-between h-auto min-h-9 px-3 py-1.5",
             responsiveSettings.compactMode && "min-h-8 text-sm",
             className,
           )}
           id={id}
           onClick={(e) => {
             e.stopPropagation();
+            if (!open && selectedFirst) setOpenSnapshot([...value]);
             setOpen(!open);
           }}
         >
-          <div className="flex flex-wrap gap-1 items-center">
+          <div className="flex min-w-0 flex-nowrap items-center gap-1 overflow-hidden">
             {value.length === 0 ? (
               <span className="text-muted-foreground">{placeholder}</span>
-            ) : value.length === 1 ? (
-              <Badge variant="secondary" className="mr-1 bg-secondary hover:bg-secondary border-transparent font-normal truncate max-w-[150px]">
-                {options.find((o) => o.value === value[0])?.label}
-              </Badge>
-            ) : value.length === options.length ? (
-              <Badge variant="secondary" className="mr-1 bg-secondary hover:bg-secondary border-transparent font-normal">
-                Tất cả lựa chọn
+            ) : isAllSelected ? (
+              <Badge
+                variant="secondary"
+                className="mr-1 min-w-0 shrink border-transparent bg-secondary font-normal hover:bg-secondary"
+              >
+                <span className="truncate">Tất cả lựa chọn ({options.length})</span>
               </Badge>
             ) : (
-              <Badge className="mr-1 bg-primary text-primary-foreground hover:bg-primary font-medium">
-                {value.length} đã chọn
-              </Badge>
+              <>
+                {visibleChips.map((opt, chipIndex) => (
+                  <Badge
+                    key={String(opt.value)}
+                    variant="secondary"
+                    className={cn(
+                      "min-w-0 max-w-[150px] shrink gap-1 pr-1 font-normal",
+                      CHIP_COLORS[chipIndex % CHIP_COLORS.length],
+                    )}
+                  >
+                    <span className="truncate">{opt.label}</span>
+                    <span
+                      role="button"
+                      aria-label={`Bỏ chọn ${opt.label}`}
+                      className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
+                      onClick={(e) => handleRemove(opt.value, e)}
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
+                  </Badge>
+                ))}
+                {extraCount > 0 && (
+                  <Badge
+                    variant="secondary"
+                    className="shrink-0 gap-1 border-transparent bg-secondary pr-1 font-normal hover:bg-secondary"
+                  >
+                    +{extraCount}
+                    <span
+                      role="button"
+                      aria-label="Bỏ các mục vượt quá"
+                      title="Bỏ các mục vượt quá"
+                      className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+                      onClick={clearExtraOptions}
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
+                  </Badge>
+                )}
+              </>
             )}
           </div>
-          <div className="flex items-center space-x-1 ml-2">
+          <div className="ml-2 flex items-center space-x-1">
             {value.length > 0 && (
               <div
                 role="button"
-                className="h-5 w-5 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                aria-label="Bỏ chọn tất cả"
+                className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleClearAll();
+                  updateValue([]);
                 }}
               >
                 <X className="h-3 w-3" />
@@ -447,8 +689,12 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           >
             <div className="flex flex-col">
               {/* Search Input */}
-              <div className="flex items-center border-b px-3 py-2">
-                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+              <div className="flex items-center border-b px-2.5 py-1">
+                {isLoading ? (
+                  <Loader2 className="mr-2 h-3.5 w-3.5 shrink-0 animate-spin opacity-50" />
+                ) : (
+                  <Search className="mr-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+                )}
                 <Input
                   ref={searchInputRef}
                   placeholder={searchPlaceholder}
@@ -460,10 +706,19 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   onKeyDown={(e) => {
                     // Prevent Dialog from intercepting keyboard events
                     e.stopPropagation();
-                    // Close dropdown on Escape
                     if (e.key === "Escape") {
                       e.preventDefault();
                       setOpen(false);
+                    } else if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      moveHighlight(1);
+                    } else if (e.key === "ArrowUp") {
+                      e.preventDefault();
+                      moveHighlight(-1);
+                    } else if (e.key === "Enter") {
+                      e.preventDefault();
+                      const opt = filteredOptions[highlightedIndex];
+                      if (opt && !opt.disabled) handleSelect(opt.value);
                     }
                   }}
                   onClick={(e) => {
@@ -472,7 +727,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   onFocus={(e) => {
                     e.stopPropagation();
                   }}
-                  className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0"
+                  className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-7 bg-transparent px-0 text-sm shadow-none"
                 />
                 {searchValue && (
                   <Button
@@ -504,7 +759,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       handleSelectAll();
                     }}
                   >
-                    Select All
+                    Chọn tất cả
                   </Button>
                   <Button
                     type="button"
@@ -516,90 +771,157 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       handleClearAll();
                     }}
                   >
-                    Clear All
+                    Bỏ chọn
+                  </Button>
+                </div>
+                <div className="flex items-center">
+                  <span
+                    className="whitespace-nowrap px-1 text-[11px] tabular-nums text-muted-foreground"
+                    title={`Đã chọn ${value.length} / ${
+                      hasAsync ? filteredOptions.length : options.length
+                    } kết quả`}
+                  >
+                    {value.length}/
+                    {hasAsync ? filteredOptions.length : options.length}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Đóng"
+                    title="Đóng"
+                    className="h-8 w-8 shrink-0 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setOpen(false);
+                    }}
+                  >
+                    <X className="h-4 w-4" />
                   </Button>
                 </div>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                  }}
-                >
-                  Đóng
-                </Button>
               </div>
 
               {/* Options List */}
-              <div className="max-h-[250px] overflow-y-auto overflow-x-hidden">
+              <div
+                ref={listRef}
+                className="max-h-[250px] overflow-y-auto overflow-x-hidden"
+                onScroll={(e) => {
+                  if (isVirtual) setScrollTop(e.currentTarget.scrollTop);
+                }}
+              >
                 {filteredOptions.length === 0 ? (
-                  <div className="py-6 text-center text-sm text-muted-foreground">
-                    {emptyText}
+                  <div className="flex items-center justify-center gap-2 py-6 text-center text-sm text-muted-foreground">
+                    {isLoading ? (
+                      <>
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        {loadingText}
+                      </>
+                    ) : (
+                      emptyText
+                    )}
                   </div>
                 ) : (
-                  <div className="p-1">
-                    {filteredOptions.map((option) => {
-                      const isSelected = value.includes(option.value);
-                      const isDisabled = option.disabled || false;
-                      return (
-                        <div
-                          key={String(option.value)}
-                          role="option"
-                          aria-selected={isSelected}
-                          aria-disabled={isDisabled}
-                          className={cn(
-                            "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-150",
-                            isDisabled
-                              ? "cursor-not-allowed opacity-50"
-                              : "cursor-pointer hover:bg-accent/80 hover:text-accent-foreground",
-                            isSelected &&
-                              !isDisabled &&
-                              "bg-accent/50 text-accent-foreground",
-                          )}
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                          }}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            if (!isDisabled) {
-                              handleSelect(option.value);
+                  <div
+                    className="p-1"
+                    style={
+                      isVirtual
+                        ? {
+                            height: filteredOptions.length * ITEM_HEIGHT + 8,
+                            position: "relative",
+                          }
+                        : undefined
+                    }
+                  >
+                    <div
+                      style={
+                        isVirtual
+                          ? {
+                              transform: `translateY(${
+                                virtualRange.start * ITEM_HEIGHT
+                              }px)`,
                             }
-                          }}
-                        >
+                          : undefined
+                      }
+                    >
+                      {visibleOptions.map((option, i) => {
+                        const optionIndex = virtualRange.start + i;
+                        const isSelected = value.includes(option.value);
+                        const isDisabled = option.disabled || false;
+                        const isHighlighted =
+                          optionIndex === highlightedIndex;
+                        return (
                           <div
+                            key={String(option.value)}
+                            role="option"
+                            data-option-index={optionIndex}
+                            aria-selected={isSelected}
+                            aria-disabled={isDisabled}
+                            style={
+                              isVirtual ? { height: ITEM_HEIGHT } : undefined
+                            }
                             className={cn(
-                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border transition-all duration-200",
-                              isSelected
-                                ? "bg-primary border-primary text-primary-foreground"
-                                : "border-input opacity-50",
+                              "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-150",
+                              isDisabled
+                                ? "cursor-not-allowed opacity-50"
+                                : "cursor-pointer hover:bg-accent/80 hover:text-accent-foreground",
+                              isSelected &&
+                                !isDisabled &&
+                                "bg-accent/50 text-accent-foreground",
+                              isHighlighted &&
+                                !isDisabled &&
+                                "bg-accent text-accent-foreground",
                             )}
+                            onMouseEnter={() =>
+                              setHighlightedIndex(optionIndex)
+                            }
+                            onMouseDown={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            }}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (!isDisabled) {
+                                handleSelect(option.value);
+                              }
+                            }}
                           >
-                            <Check className={cn("h-3 w-3 transition-opacity", isSelected ? "opacity-100" : "opacity-0")} />
-                          </div>
-                          {option.icon && (
-                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                          )}
-                          <span className="flex-1 truncate">
-                            {option.label}
-                          </span>
-                          {option.count !== undefined && (
-                            <span className="ml-2 text-xs text-muted-foreground">
-                              {option.count}
+                            <div
+                              className={cn(
+                                "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border transition-all duration-200",
+                                isSelected
+                                  ? "bg-primary border-primary text-primary-foreground"
+                                  : "border-input opacity-50",
+                              )}
+                            >
+                              <Check
+                                className={cn(
+                                  "h-3 w-3 transition-opacity",
+                                  isSelected ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                            </div>
+                            {option.icon && (
+                              <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                            )}
+                            <span className="flex-1 truncate">
+                              <HighlightLabel
+                                label={option.label}
+                                query={searchValue}
+                              />
                             </span>
-                          )}
-                        </div>
-                      );
-                    })}
+                            {option.count !== undefined && (
+                              <span className="ml-2 text-xs text-muted-foreground">
+                                {option.count}
+                              </span>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
                   </div>
                 )}
               </div>
-
-
             </div>
           </div>
         )}