@goplusvn/core 0.1.19 → 0.1.20

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

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/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}