@goplusvn/core 0.1.19 → 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.19",
+  "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/forms/multi-select.tsx

@@ -16,6 +16,8 @@ export interface MultiSelectOption {
   disabled?: boolean;
   /** Optional icon component to display alongside the option */
   icon?: React.ComponentType<{ className?: string }>;
+  /** Optional count to display on the right side of the option */
+  count?: number;
 }
 
 interface MultiSelectProps {
@@ -191,11 +193,20 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       if (!searchValue.trim()) {
         return options;
       }
-      const searchLower = searchValue.toLowerCase();
+      const removeAccents = (str: string) => {
+        return str ? str.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
+      };
+      
+      const searchLower = removeAccents(searchValue.toLowerCase());
+      
       return options.filter(
-        (option) =>
-          option.label.toLowerCase().includes(searchLower) ||
-          String(option.value).toLowerCase().includes(searchLower),
+        (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);
+        }
       );
     }, [options, searchValue]);
 
@@ -391,78 +402,44 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             setOpen(!open);
           }}
         >
-          <div className="flex flex-wrap gap-1">
-            {selectedOptions.length > 0 ? (
-              <>
-                {selectedOptions
-                  .slice(0, responsiveSettings.maxCount)
-                  .map((option, index) => (
-                    <Badge
-                      key={String(option.value)}
-                      className={cn(
-                        "mr-1 mb-1",
-                        getBadgeColor(index),
-                        responsiveSettings.compactMode &&
-                          "text-xs px-1.5 py-0.5",
-                      )}
-                      onClick={(e) => handleRemove(option.value, e)}
-                    >
-                      {option.icon && !responsiveSettings.compactMode && (
-                        <option.icon className="mr-2 h-4 w-4" />
-                      )}
-                      {option.label}
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            handleRemove(option.value, e as any);
-                          }
-                        }}
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }}
-                        onClick={(e) => handleRemove(option.value, e)}
-                      >
-                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
-                      </div>
-                    </Badge>
-                  ))}
-                {value.length > responsiveSettings.maxCount && (
-                  <Badge
-                    className={cn(
-                      "mr-1 mb-1 bg-muted text-muted-foreground hover:bg-muted",
-                      responsiveSettings.compactMode && "text-xs px-1.5 py-0.5",
-                    )}
-                  >
-                    +{value.length - responsiveSettings.maxCount} more
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        clearExtraOptions();
-                      }}
-                    >
-                      <X className="h-3 w-3" />
-                    </div>
-                  </Badge>
-                )}
-              </>
-            ) : (
+          <div className="flex flex-wrap gap-1 items-center">
+            {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
+              </Badge>
+            ) : (
+              <Badge className="mr-1 bg-primary text-primary-foreground hover:bg-primary font-medium">
+                {value.length} đã chọn
+              </Badge>
             )}
           </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <div className="flex items-center space-x-1 ml-2">
+            {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"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClearAll();
+                }}
+              >
+                <X className="h-3 w-3" />
+              </div>
+            )}
+            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          </div>
         </Button>
 
         {open && (
           <div
             ref={dropdownRef}
-            className="absolute z-[100] mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
+            className="absolute z-[100] mt-1 w-full rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
             style={{
               top: "100%",
               left: 0,
@@ -516,34 +493,48 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
               {/* Action Buttons */}
               <div className="flex items-center justify-between border-b p-1">
+                <div className="flex items-center">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSelectAll();
+                    }}
+                  >
+                    Select All
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleClearAll();
+                    }}
+                  >
+                    Clear All
+                  </Button>
+                </div>
                 <Button
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="h-8 px-2 text-xs"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleSelectAll();
-                  }}
-                >
-                  Select All
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 px-2 text-xs"
+                  className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleClearAll();
+                    setOpen(false);
                   }}
                 >
-                  Clear All
+                  Đóng
                 </Button>
               </div>
 
               {/* Options List */}
-              <ScrollArea className="max-h-[300px]">
+              <div className="max-h-[250px] overflow-y-auto overflow-x-hidden">
                 {filteredOptions.length === 0 ? (
                   <div className="py-6 text-center text-sm text-muted-foreground">
                     {emptyText}
@@ -560,13 +551,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                           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",
+                            "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 hover:text-accent-foreground",
+                              : "cursor-pointer hover:bg-accent/80 hover:text-accent-foreground",
                             isSelected &&
                               !isDisabled &&
-                              "bg-accent text-accent-foreground",
+                              "bg-accent/50 text-accent-foreground",
                           )}
                           onMouseDown={(e) => {
                             e.preventDefault();
@@ -582,13 +573,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         >
                           <div
                             className={cn(
-                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border transition-all duration-200",
                               isSelected
-                                ? "bg-primary text-primary-foreground"
-                                : "opacity-50 [&_svg]:invisible",
+                                ? "bg-primary border-primary text-primary-foreground"
+                                : "border-input opacity-50",
                             )}
                           >
-                            <Check className={cn("h-4 w-4")} />
+                            <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" />
@@ -596,28 +587,19 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                           <span className="flex-1 truncate">
                             {option.label}
                           </span>
+                          {option.count !== undefined && (
+                            <span className="ml-2 text-xs text-muted-foreground">
+                              {option.count}
+                            </span>
+                          )}
                         </div>
                       );
                     })}
                   </div>
                 )}
-              </ScrollArea>
-
-              {/* Close Button */}
-              <div className="border-t p-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="w-full h-8 text-xs"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setOpen(false);
-                  }}
-                >
-                  Close
-                </Button>
               </div>
+
+
             </div>
           </div>
         )}

package/src/ui/forms/update_multiselect.py

@@ -0,0 +1,125 @@
+import re
+
+filepath = "/Users/thongle/Downloads/REPO/goerp/goerp-core/packages/core/src/ui/forms/multi-select.tsx"
+
+with open(filepath, 'r', encoding='utf-8') as f:
+    content = f.read()
+
+# 1. Thay thế Action Buttons và thêm Close icon
+old_action_buttons = """              {/* Action Buttons */}
+              <div className="flex items-center justify-between border-b p-1">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSelectAll();
+                  }}
+                >
+                  Select All
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClearAll();
+                  }}
+                >
+                  Clear All
+                </Button>
+              </div>"""
+
+new_action_buttons = """              {/* Action Buttons */}
+              <div className="flex items-center justify-between border-b p-1">
+                <div className="flex items-center">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSelectAll();
+                    }}
+                  >
+                    Select All
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleClearAll();
+                    }}
+                  >
+                    Clear All
+                  </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>"""
+
+content = content.replace(old_action_buttons, new_action_buttons)
+
+# 2. Xóa Close button cũ dưới cùng
+old_close_btn = """              {/* Close Button */}
+              <div className="border-t p-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="w-full h-8 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setOpen(false);
+                  }}
+                >
+                  Close
+                </Button>
+              </div>"""
+
+content = content.replace(old_close_btn, "")
+
+# 3. Thay ScrollArea bằng native div cuộn
+old_scroll_start = """              {/* Options List */}
+              <ScrollArea className="max-h-[300px]">
+                {filteredOptions.length === 0 ? ("""
+
+new_scroll_start = """              {/* Options List */}
+              <div className="max-h-[250px] overflow-y-auto overflow-x-hidden">
+                {filteredOptions.length === 0 ? ("""
+
+content = content.replace(old_scroll_start, new_scroll_start)
+
+# The end tag for ScrollArea
+old_scroll_end = """                  </div>
+                )}
+              </ScrollArea>"""
+
+new_scroll_end = """                  </div>
+                )}
+              </div>"""
+
+content = content.replace(old_scroll_end, new_scroll_end)
+
+with open(filepath, 'w', encoding='utf-8') as f:
+    f.write(content)
+
+print("Updated multiselect component")

package/src/ui/forms/update_search.py

@@ -0,0 +1,48 @@
+import re
+
+filepath = "/Users/thongle/Downloads/REPO/goerp/goerp-core/packages/core/src/ui/forms/multi-select.tsx"
+
+with open(filepath, 'r', encoding='utf-8') as f:
+    content = f.read()
+
+old_search_logic = """    // Filter options based on search value
+    const filteredOptions = useMemo(() => {
+      if (!searchValue.trim()) {
+        return options;
+      }
+      const searchLower = searchValue.toLowerCase();
+      return options.filter(
+        (option) =>
+          option.label.toLowerCase().includes(searchLower) ||
+          String(option.value).toLowerCase().includes(searchLower),
+      );
+    }, [options, searchValue]);"""
+
+new_search_logic = """    // Filter options based on search value
+    const filteredOptions = useMemo(() => {
+      if (!searchValue.trim()) {
+        return options;
+      }
+      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);
+        }
+      );
+    }, [options, searchValue]);"""
+
+content = content.replace(old_search_logic, new_search_logic)
+
+with open(filepath, 'w', encoding='utf-8') as f:
+    f.write(content)
+
+print("Updated multiselect search logic")

package/src/ui/forms/upgrade_multiselect.py

@@ -0,0 +1,119 @@
+import re
+
+filepath = "/Users/thongle/Downloads/REPO/goerp/goerp-core/packages/core/src/ui/forms/multi-select.tsx"
+
+with open(filepath, 'r', encoding='utf-8') as f:
+    content = f.read()
+
+# 1. Update MultiSelectOption interface
+old_interface = """  /** Optional icon component to display alongside the option */
+  icon?: React.ComponentType<{ className?: string }>;
+}"""
+
+new_interface = """  /** Optional icon component to display alongside the option */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Optional count to display on the right side of the option */
+  count?: number;
+}"""
+
+content = content.replace(old_interface, new_interface)
+
+# 2. Update trigger button (Compact Badge & Clear Icon)
+# We need to replace the content of `<div className="flex flex-wrap gap-1">`
+# and the ChevronsUpDown area.
+old_trigger_area = r'<div className="flex flex-wrap gap-1">[\s\S]*?<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />'
+
+new_trigger_area = """<div className="flex flex-wrap gap-1 items-center">
+            {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
+              </Badge>
+            ) : (
+              <Badge className="mr-1 bg-primary text-primary-foreground hover:bg-primary font-medium">
+                {value.length} đã chọn
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center space-x-1 ml-2">
+            {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"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClearAll();
+                }}
+              >
+                <X className="h-3 w-3" />
+              </div>
+            )}
+            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          </div>"""
+
+content = re.sub(old_trigger_area, new_trigger_area, content)
+
+
+# 3. Update Popover Container for glassmorphism and animation
+old_popover = """className="absolute z-[100] mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md\""""
+new_popover = """className="absolute z-[100] mt-1 w-full rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1\""""
+content = content.replace(old_popover, new_popover)
+
+
+# 4. Update Option Checkbox and Count
+old_option_render = r"""<div\s+className=\{cn\(\s*"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",\s*isSelected\s*\?\s*"bg-primary text-primary-foreground"\s*:\s*"opacity-50 \[\&_svg\]:invisible",\s*\)\}\s*>\s*<Check className=\{cn\("h-4 w-4"\)\} />\s*</div>\s*\{option\.icon && \(\s*<option\.icon className="mr-2 h-4 w-4 text-muted-foreground" />\s*\)\}\s*<span className="flex-1 truncate">\s*\{option\.label\}\s*</span>"""
+
+new_option_render = """<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">
+                            {option.label}
+                          </span>
+                          {option.count !== undefined && (
+                            <span className="ml-2 text-xs text-muted-foreground">
+                              {option.count}
+                            </span>
+                          )}"""
+
+content = re.sub(old_option_render, new_option_render, content)
+
+# 5. Option Hover Animation
+old_option_wrapper = """className={cn(
+                            "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                            isDisabled
+                              ? "cursor-not-allowed opacity-50"
+                              : "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+                            isSelected &&
+                              !isDisabled &&
+                              "bg-accent text-accent-foreground",
+                          )}"""
+new_option_wrapper = """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",
+                          )}"""
+content = content.replace(old_option_wrapper, new_option_wrapper)
+
+with open(filepath, 'w', encoding='utf-8') as f:
+    f.write(content)
+
+print("UI Upgrade Successful")

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

package/src/ui/primitives/combobox.tsx

@@ -144,14 +144,14 @@ export function Combobox({
         role="combobox"
         aria-expanded={open}
         disabled={disabled}
-        className={cn("w-full justify-between", className)}
+        className={cn("w-full justify-between h-auto min-h-9 text-left whitespace-normal gap-2", className)}
         id={id}
         onClick={(e) => {
           e.stopPropagation();
           setOpen(!open);
         }}
       >
-        <span className="truncate">
+        <span className="break-words min-w-0">
           {selectedOption ? selectedOption.label : placeholder}
         </span>
         <div className="ml-2 flex items-center gap-1 shrink-0">

package/src/ui/primitives/select.tsx

@@ -37,7 +37,7 @@ export function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       className={cn(
-        "cursor-pointer flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "cursor-pointer flex min-h-9 h-auto w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm text-left ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_span]:line-clamp-none [&_span]:whitespace-normal [&_span]:break-words [&_span]:min-w-0",
         className,
       )}
       {...props}