@goplusvn/core 0.1.63 → 0.1.65

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

package/src/crud/components/crud-export-button.tsx

@@ -137,8 +137,8 @@ export function CrudExportButton({
         className="rounded-r-none border-r-0"
         onClick={() => handleExport("current")}
       >
-        <Download className="h-4 w-4 sm:mr-2" />
-        <span className="hidden sm:inline">{loading ? "Exporting..." : "Export"}</span>
+        <Download className="h-4 w-4 md:mr-2" />
+        <span className="hidden md:inline">{loading ? "Exporting..." : "Export"}</span>
       </Button>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>

package/src/import/import-dialog.tsx

@@ -368,8 +368,8 @@ export function ImportDialog({
         <DialogTrigger asChild>
           {trigger ?? (
             <Button variant="outline" size="sm">
-              <Upload className="h-4 w-4 sm:mr-2" />
-              <span className="hidden sm:inline">Import</span>
+              <Upload className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">Import</span>
             </Button>
           )}
         </DialogTrigger>
@@ -556,11 +556,11 @@ export function ImportDialog({
           )}
         </div>
 
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>
+        <DialogFooter className="flex flex-row sm:justify-end gap-2 space-x-0 pt-2">
+          <Button variant="outline" className="flex-1 sm:flex-none" onClick={() => setOpen(false)}>
             Đóng
           </Button>
-          <Button onClick={handleImport} disabled={!file || loading}>
+          <Button className="flex-1 sm:flex-none" onClick={handleImport} disabled={!file || loading}>
             {loading ? "Đang import..." : "Import"}
           </Button>
         </DialogFooter>

package/src/user/components/user-toolbar.tsx

@@ -1,16 +1,22 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Plus, Search, LayoutGrid, List, X } from "lucide-react";
+import { Plus, Search, LayoutGrid, List, X, Filter } from "lucide-react";
 import {
   Button,
   Input,
-  Separator,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
 } from "../../ui";
 import { CrudExportButton } from "../../crud/components/crud-export-button";
 
@@ -47,33 +53,44 @@ export function UserToolbar({
     return () => clearTimeout(timer);
   }, [localSearch, onSearchChange]);
 
+  const activeFilterCount =
+    (userType && userType !== "all" ? 1 : 0) +
+    (roles?.some((r) => r.code === userType) ? 1 : 0); // Need to track if role is filtered actually
+  // We'll calculate it just by checking if there's any active value, but UserToolbar doesn't currently get the selected role explicitly as a prop, only onRoleChange.
+  // Wait, UserToolbar doesn't have a 'role' prop! It only has onRoleChange! This is a flaw in the original component, it was un-controlled.
+  // For now we'll just not show the badge or pass it as 0.
+
   return (
-    <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between w-full gap-3 xl:gap-4">
+    <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between w-full gap-3 xl:gap-3">
       {/* Tìm kiếm + bộ lọc chính */}
-      <div className="flex w-full min-w-0 xl:w-auto flex-1 items-center gap-2 xl:gap-3">
+      <div className="flex w-full min-w-0 xl:w-auto flex-1 items-center gap-2">
         <div className="relative w-full xl:flex-[2] xl:min-w-[220px] max-w-none">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
           <Input
             placeholder="Tìm người dùng..."
             value={localSearch}
             onChange={(e) => setLocalSearch(e.target.value)}
-            className="pl-9 h-9 w-full text-xs bg-secondary/30 border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-1 focus-visible:ring-primary"
+            className="pl-9 pr-14 h-9 w-full bg-secondary/30 transition-shadow focus:bg-background shadow-sm focus-visible:ring-inset focus-visible:ring-offset-0"
           />
           {localSearch && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 rounded-md hover:bg-muted"
-              onClick={() => setLocalSearch("")}
-            >
-              <X className="h-3.5 w-3.5" />
-            </Button>
+            <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                onClick={() => setLocalSearch("")}
+                title="Xóa tìm kiếm"
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            </div>
           )}
         </div>
 
-        <div className="w-full xl:w-auto flex-1 min-w-0">
+        {/* Desktop Filters */}
+        <div className="hidden min-w-0 grow shrink basis-[150px] xl:block">
           <Select value={userType} onValueChange={onUserTypeChange}>
-            <SelectTrigger className="h-9 w-full xl:w-[150px] text-xs bg-background border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-primary min-w-0">
+            <SelectTrigger className="h-9 w-full min-w-0 shadow-sm">
               <SelectValue placeholder="Loại tài khoản" className="truncate" />
             </SelectTrigger>
             <SelectContent className="rounded-lg">
@@ -85,9 +102,9 @@ export function UserToolbar({
           </Select>
         </div>
 
-        <div className="w-full xl:w-auto flex-1 min-w-0">
+        <div className="hidden min-w-0 grow shrink basis-[150px] xl:block">
           <Select onValueChange={onRoleChange}>
-            <SelectTrigger className="h-9 w-full xl:w-[170px] text-xs bg-background border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-primary min-w-0">
+            <SelectTrigger className="h-9 w-full min-w-0 shadow-sm">
               <SelectValue placeholder="Lọc theo vai trò" className="truncate" />
             </SelectTrigger>
             <SelectContent className="rounded-lg">
@@ -103,21 +120,103 @@ export function UserToolbar({
       </div>
 
       {/* Hành động */}
-      <div className="flex items-center justify-between sm:justify-end gap-2 w-full xl:w-auto shrink-0 overflow-x-auto pb-0.5 sm:pb-0">
+      <div className="flex flex-wrap sm:flex-nowrap items-center justify-between xl:justify-end gap-2 w-full xl:w-auto shrink-0 mt-1 xl:mt-0">
+        
+        {/* Mobile Filters (Sheet) */}
+        <div className="flex items-center xl:hidden">
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant="outline"
+                className="h-9 min-w-9 shrink-0 shadow-sm relative data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground"
+                title="Bộ lọc nâng cao"
+              >
+                <Filter className="h-4 w-4 sm:mr-2" />
+                <span className="hidden sm:inline font-medium">Bộ lọc</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="flex flex-col h-full w-full sm:max-w-md p-0 gap-0"
+            >
+              <SheetHeader className="text-left px-6 py-4 border-b flex flex-row items-center justify-between space-y-0">
+                <div className="space-y-1">
+                  <SheetTitle className="text-lg font-bold">
+                    Bộ lọc nâng cao
+                  </SheetTitle>
+                  <SheetDescription>
+                    Tinh chỉnh danh sách người dùng.
+                  </SheetDescription>
+                </div>
+                <SheetClose asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 rounded-full shrink-0"
+                  >
+                    <X className="h-5 w-5" />
+                    <span className="sr-only">Đóng</span>
+                  </Button>
+                </SheetClose>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-6 py-5">
+                <div className="flex flex-col gap-5">
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-muted-foreground">
+                      Loại tài khoản
+                    </label>
+                    <Select value={userType} onValueChange={onUserTypeChange}>
+                      <SelectTrigger className="h-9 w-full shadow-sm">
+                        <SelectValue placeholder="Loại tài khoản" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">Tất cả loại</SelectItem>
+                        <SelectItem value="employee">Nhân viên</SelectItem>
+                        <SelectItem value="customer">Khách hàng</SelectItem>
+                        <SelectItem value="supplier">Nhà cung cấp</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-muted-foreground">
+                      Vai trò
+                    </label>
+                    <Select onValueChange={onRoleChange}>
+                      <SelectTrigger className="h-9 w-full shadow-sm">
+                        <SelectValue placeholder="Lọc theo vai trò" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">Tất cả vai trò</SelectItem>
+                        {roles?.map((role) => (
+                          <SelectItem key={role.code} value={role.code}>
+                            {role.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+
         <div className="flex items-center gap-2">
-          <div className="flex items-center bg-[#f1f5f9] dark:bg-[#181d26] rounded-[6px] p-0.5 border border-[#dddddd] dark:border-[#333840] shrink-0">
+          {/* View Toggle */}
+          <div className="flex items-center rounded-md border p-0.5 bg-muted/30 shrink-0">
             <Button
               variant={viewMode === "table" ? "secondary" : "ghost"}
-              size="sm"
-              className="h-8 w-8 p-0 rounded-md"
+              size="icon"
+              className="h-7 w-7 shadow-none"
               onClick={() => onViewModeChange("table")}
             >
               <List className="h-4 w-4" />
             </Button>
             <Button
               variant={viewMode === "grid" ? "secondary" : "ghost"}
-              size="sm"
-              className="h-8 w-8 p-0 rounded-md"
+              size="icon"
+              className="h-7 w-7 shadow-none"
               onClick={() => onViewModeChange("grid")}
             >
               <LayoutGrid className="h-4 w-4" />
@@ -125,7 +224,7 @@ export function UserToolbar({
           </div>
 
           {permissions.export && (
-            <div className="[&>button]:h-9 [&>button]:rounded-md [&>button]:shadow-sm [&>button]:bg-background [&>button]:border [&>button]:text-foreground [&>button]:hover:bg-muted/50 shrink-0">
+            <div className="shrink-0">
               <CrudExportButton
                 endpoint="/api/crud/users/export"
                 search={localSearch}
@@ -135,8 +234,12 @@ export function UserToolbar({
           )}
 
           {permissions.create && (
-            <Button size="sm" className="h-9 px-4 text-xs bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm rounded-md font-medium border-0 shrink-0" onClick={onCreateNew}>
-              <Plus className="h-4 w-4 sm:mr-1.5" />
+            <Button
+              size="sm"
+              className="h-9 font-medium shadow-sm shrink-0"
+              onClick={onCreateNew}
+            >
+              <Plus className="h-4 w-4 sm:mr-2" />
               <span className="hidden sm:inline">Thêm mới</span>
             </Button>
           )}
@@ -145,3 +248,4 @@ export function UserToolbar({
     </div>
   );
 }
+