@goplusvn/core 0.1.63 → 0.1.66

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.1.66 — Cache: hết TTL vô hạn, hết nuốt lỗi RBAC
+
+Hai chế độ hỏng âm thầm, cùng một họ: hệ thống *tin* là nó có dữ liệu trong khi
+thực ra không.
+
+**`getUserPermissionsFromDB` NÉM thay vì trả `[]`.** Trước đây `catch → return []`.
+Trong hệ RBAC, "không có quyền nào" và "không hỏi được quyền" hiện ra y hệt nhau
+— menu rỗng, nút biến mất, API 403 — nên người dùng đọc thành "tôi bị thu hồi
+quyền". Tệ hơn: `getCachedUserPermissions` ghi kết quả vào cache 5 phút, nên một
+cú nghẽn DB chớp nhoáng bị ĐÓNG BĂNG thành mảng rỗng suốt 5 phút kể cả khi DB đã
+hồi ngay. Nay lỗi ném ra, `.catch` không ghi cache, lượt sau tự hỏi lại.
+
+⚠️ **BREAKING (hành vi).** App nào đang dựa vào `[]`-khi-lỗi phải tự bắt. Khuyến
+nghị: để lỗi nổi lên `error.tsx` — nhớ đặt boundary ở segment CHA của layout gọi
+nó, vì `error.tsx` không bọc `layout.tsx` cùng segment.
+
+**`SettingsService.getSettings` thêm `revalidate: 60`.** `unstable_cache` không
+khai `revalidate` là cache tới khi process chết. Mọi đường ghi thẳng
+`system_config` không qua `saveSettings` (route CRUD generic, script, migration)
+— hoặc ghi từ tiến trình khác nên không xoá được cache tiến trình này — đều làm
+setting cũ đóng băng VĨNH VIỄN. TTL là lưới an toàn; `saveSettings` vẫn xoá tag
+để đường ghi chuẩn hiện tức thì.
+
+**`revalidateTag` được bọc `try/catch`.** Next 16 throw "Invariant: static
+generation store missing" khi gọi ngoài request scope (cron, task nền). Lời gọi
+luôn nằm SAU lệnh ghi DB, nên không bọc là "lưu xong rồi vẫn báo lỗi". Chỉ an
+toàn nuốt vì cache đã có TTL hữu hạn. Tag xuất khẩu thành
+`SYSTEM_SETTINGS_CACHE_TAG`.
+
+Kèm 8 test ratchet (đã kiểm: cả 8 đỏ khi hoàn nguyên bản vá).
+
 ## 0.1.44 — UnifiedProfileDialog: chi nhánh mặc định + ngày sinh DatePicker + fix Select loại người dùng
 
 **Ngày sinh dùng `DatePicker` (thay `<input type="date">`):** ô ngày sinh cũ khó

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.66",
   "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/rbac/__tests__/permission-service.test.ts

@@ -0,0 +1,113 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { clearAllPermissionsCache } from "../index";
+import {
+  getCachedUserPermissions,
+  getUserPermissionsFromDB,
+} from "../permission-service";
+
+import type { RBACPrismaClient } from "../permission-service";
+
+/** DB giả: mỗi lượt gọi lấy kịch bản kế tiếp trong hàng đợi. */
+function makeDb(outcomes: Array<{ rows?: unknown[]; fail?: Error }>): {
+  db: RBACPrismaClient;
+  calls: () => number;
+} {
+  let calls = 0;
+  const db = {
+    userRole: {
+      findMany: async () => {
+        const outcome = outcomes[Math.min(calls, outcomes.length - 1)];
+        calls += 1;
+        if (outcome.fail) throw outcome.fail;
+        return outcome.rows as never;
+      },
+    },
+  } as unknown as RBACPrismaClient;
+  return { db, calls: () => calls };
+}
+
+const ROW_WITH_VIEW = {
+  roleCode: "accountant",
+  role: { rolePermissions: [{ resourceCode: "receipt", actionCode: "view" }] },
+};
+
+describe("getUserPermissionsFromDB", () => {
+  beforeEach(async () => {
+    await clearAllPermissionsCache();
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  it("dedupe quyền trùng giữa các vai trò", async () => {
+    const { db } = makeDb([
+      {
+        rows: [
+          ROW_WITH_VIEW,
+          {
+            roleCode: "cashier",
+            role: {
+              rolePermissions: [
+                { resourceCode: "receipt", actionCode: "view" },
+                { resourceCode: "receipt", actionCode: "create" },
+              ],
+            },
+          },
+        ],
+      },
+    ]);
+
+    expect(await getUserPermissionsFromDB(db, "u1")).toEqual([
+      { resourceCode: "receipt", actionCode: "view" },
+      { resourceCode: "receipt", actionCode: "create" },
+    ]);
+  });
+
+  it("user KHÔNG có vai trò nào → mảng rỗng (đây là câu trả lời hợp lệ)", async () => {
+    const { db } = makeDb([{ rows: [] }]);
+    expect(await getUserPermissionsFromDB(db, "u1")).toEqual([]);
+  });
+
+  it("query hỏng → NÉM, không được nuốt thành mảng rỗng", async () => {
+    const { db } = makeDb([{ fail: new Error("P1017 ConnectionClosed") }]);
+
+    // Trả `[]` ở đây là biến sự cố hạ tầng thành "user không có quyền nào" —
+    // menu rỗng, nút biến mất, mà không ai biết là DB hỏng.
+    await expect(getUserPermissionsFromDB(db, "u1")).rejects.toThrow(
+      "P1017 ConnectionClosed",
+    );
+  });
+});
+
+describe("getCachedUserPermissions", () => {
+  beforeEach(async () => {
+    await clearAllPermissionsCache();
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  it("lỗi DB KHÔNG bị đóng băng vào cache 5 phút", async () => {
+    // Lượt 1 hỏng, lượt 2 trở đi thành công.
+    const { db } = makeDb([
+      { fail: new Error("nghẽn DB") },
+      { rows: [ROW_WITH_VIEW] },
+    ]);
+
+    await expect(getCachedUserPermissions(db, "u1")).rejects.toThrow(
+      "nghẽn DB",
+    );
+
+    // Nếu lỗi bị nuốt thành `[]`, `[]` đã được setToCache và user mất sạch
+    // quyền suốt 5 phút kể cả khi DB hồi ngay lập tức.
+    expect(await getCachedUserPermissions(db, "u1")).toEqual([
+      { resourceCode: "receipt", actionCode: "view" },
+    ]);
+  });
+
+  it("lượt thành công thì có cache — không hỏi DB lần hai", async () => {
+    const { db, calls } = makeDb([{ rows: [ROW_WITH_VIEW] }]);
+
+    await getCachedUserPermissions(db, "u1");
+    await getCachedUserPermissions(db, "u1");
+
+    expect(calls()).toBe(1);
+  });
+});

package/src/rbac/permission-service.ts

@@ -41,6 +41,20 @@ export interface RBACPrismaClient {
  * Fetch user permissions from database based on roles.
  * Deduplicates permissions by resourceCode:actionCode.
  *
+ * NÉM LỖI khi query hỏng — KHÔNG trả `[]`.
+ *
+ * Trước 2026-08 hàm này `catch → logger.error → return []`. Trong một hệ RBAC,
+ * "không có quyền nào" và "không hỏi được quyền" là hai chuyện khác hẳn nhau,
+ * nhưng cả hai đều hiện ra y như nhau: menu rỗng, nút biến mất, API trả 403.
+ * Người dùng đọc thành "tôi bị thu hồi quyền" và đi báo sai chỗ.
+ *
+ * Tệ hơn: `getCachedUserPermissions` bên dưới ghi kết quả vào cache 5 phút.
+ * Một cú nghẽn DB chớp nhoáng vì thế bị ĐÓNG BĂNG thành mảng rỗng suốt 5 phút
+ * kể cả khi DB đã hồi ngay sau đó. Ném lỗi thì `.catch` ở đó không ghi cache,
+ * lượt sau tự hỏi lại DB.
+ *
+ * Nơi gọi phải tự quyết: hiện error boundary, hay hạ cấp có chủ đích.
+ *
  * @param db - The tenant-specific Prisma Client instance
  * @param userId - The user ID to fetch permissions for
  */
@@ -94,7 +108,7 @@ export async function getUserPermissionsFromDB(
     return uniquePermissions;
   } catch (error) {
     logger.error("Error fetching user permissions from DB", error);
-    return [];
+    throw error;
   }
 }
 

package/src/system/services/__tests__/settings-service.test.ts

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const unstableCacheMock = vi.fn(
+  (
+    fn: (...args: unknown[]) => unknown,
+    _keyParts?: string[],
+    _options?: unknown,
+  ) =>
+    (...args: unknown[]) =>
+      fn(...args),
+);
+const revalidateTagMock = vi.fn();
+
+vi.mock("next/cache", () => ({
+  unstable_cache: (
+    fn: (...args: unknown[]) => unknown,
+    keyParts?: string[],
+    options?: unknown,
+  ) => unstableCacheMock(fn, keyParts, options),
+  revalidateTag: (...args: unknown[]) => revalidateTagMock(...args),
+}));
+
+const { SettingsService, configureSettingsService, SYSTEM_SETTINGS_CACHE_TAG } =
+  await import("../settings-service");
+
+function fakeDb(value: string | null) {
+  return {
+    systemConfig: {
+      findUnique: vi.fn(async () => (value === null ? null : { value })),
+      upsert: vi.fn(async () => ({})),
+    },
+  };
+}
+
+describe("SettingsService cache options", () => {
+  beforeEach(() => {
+    unstableCacheMock.mockClear();
+    revalidateTagMock.mockClear();
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  it("LUÔN khai `revalidate` hữu hạn — thiếu nó là cache vĩnh viễn", async () => {
+    configureSettingsService(fakeDb(JSON.stringify({ a: 1 })));
+
+    await SettingsService.getSettings("demo", { a: 0 });
+
+    const options = unstableCacheMock.mock.calls[0][2] as {
+      tags: string[];
+      revalidate?: number;
+    };
+    // Bỏ `revalidate` là entry sống tới khi process chết: mọi đường ghi thẳng
+    // `system_config` mà quên xoá tag sẽ đóng băng setting cũ VĨNH VIỄN.
+    expect(options.revalidate).toBeTypeOf("number");
+    expect(options.revalidate).toBeGreaterThan(0);
+    expect(options.tags).toContain(SYSTEM_SETTINGS_CACHE_TAG);
+  });
+
+  it("saveSettings xoá tag sau khi ghi", async () => {
+    const db = fakeDb(null);
+    configureSettingsService(db);
+
+    await SettingsService.saveSettings("demo", { a: 1 });
+
+    expect(db.systemConfig.upsert).toHaveBeenCalledOnce();
+    expect(revalidateTagMock).toHaveBeenCalledWith(
+      SYSTEM_SETTINGS_CACHE_TAG,
+      "max",
+    );
+  });
+
+  it("revalidateTag ném ngoài request scope KHÔNG được kéo đổ lệnh ghi", async () => {
+    const db = fakeDb(null);
+    configureSettingsService(db);
+    revalidateTagMock.mockImplementation(() => {
+      throw new Error("Invariant: static generation store missing");
+    });
+
+    // Cron/task nền chạy ngoài request scope. Lời gọi nằm SAU lệnh ghi DB nên
+    // để lỗi thoát ra là "lưu xong rồi vẫn báo lỗi" cho người dùng.
+    await expect(
+      SettingsService.saveSettings("demo", { a: 1 }),
+    ).resolves.toBeUndefined();
+    expect(db.systemConfig.upsert).toHaveBeenCalledOnce();
+  });
+});

package/src/system/services/settings-service.ts

@@ -1,6 +1,45 @@
-import { cache } from "react";
 import { revalidateTag, unstable_cache } from "next/cache";
 
+import { logger } from "../../utils";
+
+/** Tag dùng chung cho mọi entry cache của SettingsService. */
+export const SYSTEM_SETTINGS_CACHE_TAG = "system-settings";
+
+/**
+ * TTL của cache setting — LƯỚI AN TOÀN, không phải cơ chế chính.
+ *
+ * `saveSettings` xoá tag ngay nên đường ghi chuẩn vẫn hiện tức thì. TTL này
+ * chặn kịch bản kẹt vĩnh viễn: `unstable_cache` KHÔNG khai `revalidate` là
+ * cache tới khi process chết. Mọi đường ghi thẳng bảng `system_config` không
+ * qua `saveSettings` (route CRUD generic của app, script, migration) — hoặc ghi
+ * từ tiến trình khác nên không xoá được cache của tiến trình này — đều làm
+ * setting cũ đóng băng luôn.
+ *
+ * 60s: đủ ngắn để sai sót tự lành, đủ dài để không thành một vòng DB mỗi lượt
+ * đọc setting.
+ */
+const SETTINGS_TTL_SECONDS = 60;
+
+/**
+ * `revalidateTag` NÉM khi không có request scope — Next 16 throw
+ * "Invariant: static generation store missing" nếu `workAsyncStorage` rỗng.
+ * Cron và task nền là chạy ngoài scope, mà lời gọi luôn nằm SAU lệnh ghi DB:
+ * không bọc thì dữ liệu đã lưu xong vẫn báo lỗi ngược cho người gọi.
+ *
+ * Nuốt lỗi ở đây CÓ CHỦ ĐÍCH và chỉ an toàn vì cache đã có TTL hữu hạn — tệ
+ * nhất là chậm đúng một nhịp TTL. Vẫn log để lộ chỗ gọi sai ngữ cảnh.
+ */
+function safeRevalidateSettingsTag(): void {
+  try {
+    revalidateTag(SYSTEM_SETTINGS_CACHE_TAG, "max");
+  } catch (error) {
+    logger.warn(
+      `revalidateTag("${SYSTEM_SETTINGS_CACHE_TAG}") bỏ qua — gọi ngoài request scope`,
+      { error: error instanceof Error ? error.message : String(error) },
+    );
+  }
+}
+
 /**
  * DB được INJECT từ app (core không import prisma client cụ thể). Trước
  * 2026-07 chỗ này là `const db: any = {...} // Mocked for build` — mọi
@@ -115,7 +154,10 @@ export class SettingsService {
         }
       },
       [`system-settings-${key}`],
-      { tags: ["system-settings"] },
+      {
+        tags: [SYSTEM_SETTINGS_CACHE_TAG],
+        revalidate: SETTINGS_TTL_SECONDS,
+      },
     )();
   }
 
@@ -155,7 +197,7 @@ export class SettingsService {
       },
     });
 
-    revalidateTag("system-settings", "max");
+    safeRevalidateSettingsTag();
   }
 
   static async saveAuditSettings(settings: AuditSettings): Promise<void> {

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