[CLAUDE] FE-Admin: PermissionsPage improved (search + stats + column bulk toggle + empty state)

fe-admin/src/pages/system/PermissionsPage.tsx

@@ -1,23 +1,27 @@
 import { useMemo, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
+import { Search, Shield, Check } from 'lucide-react'
 import { PageHeader } from '@/components/PageHeader'
+import { EmptyState } from '@/components/EmptyState'
+import { Input } from '@/components/ui/Input'
 import { Select } from '@/components/ui/Select'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
 import type { MenuItem, Permission, Role } from '@/types/menu'
 
 type CrudKey = 'canRead' | 'canCreate' | 'canUpdate' | 'canDelete'
-const CRUD_COLS: { key: CrudKey; label: string }[] = [
-  { key: 'canRead', label: 'Xem' },
-  { key: 'canCreate', label: 'Tạo' },
-  { key: 'canUpdate', label: 'Sửa' },
-  { key: 'canDelete', label: 'Xóa' },
+const CRUD_COLS: { key: CrudKey; label: string; short: string }[] = [
+  { key: 'canRead', label: 'Xem', short: 'R' },
+  { key: 'canCreate', label: 'Tạo', short: 'C' },
+  { key: 'canUpdate', label: 'Sửa', short: 'U' },
+  { key: 'canDelete', label: 'Xóa', short: 'D' },
 ]
 
 export function PermissionsPage() {
   const qc = useQueryClient()
   const [roleId, setRoleId] = useState<string>('')
+  const [search, setSearch] = useState('')
 
   const roles = useQuery({
     queryKey: ['roles'],
@@ -51,6 +55,27 @@ export function PermissionsPage() {
     return map
   }, [perms.data])
 
+  const filteredMenus = useMemo(() => {
+    const all = menus.data ?? []
+    if (!search.trim()) return all
+    const q = search.toLowerCase()
+    return all.filter(m => m.label.toLowerCase().includes(q) || m.key.toLowerCase().includes(q))
+  }, [menus.data, search])
+
+  const stats = useMemo(() => {
+    const total = (menus.data?.length ?? 0) * 4
+    let granted = 0
+    for (const m of menus.data ?? []) {
+      const p = permMap.get(m.key)
+      if (!p) continue
+      if (p.canRead) granted++
+      if (p.canCreate) granted++
+      if (p.canUpdate) granted++
+      if (p.canDelete) granted++
+    }
+    return { granted, total }
+  }, [menus.data, permMap])
+
   function currentFlags(menuKey: string) {
     const p = permMap.get(menuKey)
     return {
@@ -67,41 +92,123 @@ export function PermissionsPage() {
     upsert.mutate({ menuKey, ...next })
   }
 
+  function columnAllChecked(field: CrudKey) {
+    return filteredMenus.length > 0 && filteredMenus.every(m => currentFlags(m.key)[field])
+  }
+
+  function toggleColumn(field: CrudKey) {
+    const allChecked = columnAllChecked(field)
+    const nextVal = !allChecked
+    for (const m of filteredMenus) {
+      const flags = currentFlags(m.key)
+      if (flags[field] !== nextVal) {
+        upsert.mutate({ menuKey: m.key, ...flags, [field]: nextVal })
+      }
+    }
+  }
+
+  const selectedRole = roles.data?.find(r => r.id === roleId)
+
   return (
     <div className="p-6">
       <PageHeader
         title="Ma trận phân quyền"
-        description="Tick để gán quyền Xem / Tạo / Sửa / Xóa cho từng menu theo vai trò. Thay đổi lưu tự động."
+        description="Tick để gán quyền Xem / Tạo / Sửa / Xóa theo vai trò. Thay đổi lưu tự động."
       />
 
-      <div className="mb-4 max-w-sm">
-        <Select value={roleId} onChange={e => setRoleId(e.target.value)}>
-          <option value="">-- Chọn vai trò --</option>
-          {roles.data?.map(r => (
-            <option key={r.id} value={r.id}>
-              {r.name}
-            </option>
-          ))}
-        </Select>
+      <div className="mb-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+        <div>
+          <label className="mb-1 block text-xs font-medium text-slate-600">Vai trò</label>
+          <Select value={roleId} onChange={e => setRoleId(e.target.value)}>
+            <option value="">-- Chọn vai trò --</option>
+            {roles.data?.map(r => (
+              <option key={r.id} value={r.id}>
+                {r.name}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-medium text-slate-600">Tìm menu</label>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <Input
+              placeholder="Tên hoặc key menu…"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="pl-8"
+              disabled={!roleId}
+            />
+          </div>
+        </div>
+        {roleId && (
+          <div className="flex items-end">
+            <div className="rounded-md border border-slate-200 bg-white px-4 py-2 text-xs">
+              <div className="flex items-center gap-1.5 text-slate-500">
+                <Shield className="h-3.5 w-3.5" />
+                {selectedRole?.name}
+              </div>
+              <div className="mt-0.5 font-mono text-slate-900">
+                {stats.granted}
+                <span className="text-slate-400"> / {stats.total} quyền</span>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
-      {roleId && (
+      {!roleId ? (
+        <EmptyState
+          icon={Shield}
+          title="Chọn một vai trò để bắt đầu"
+          description="Ma trận phân quyền sẽ hiện theo vai trò đã chọn."
+        />
+      ) : (
         <div className="overflow-auto rounded-md border border-slate-200 bg-white">
           <table className="w-full text-sm">
             <thead className="bg-slate-50 text-slate-700">
               <tr>
-                <th className="px-3 py-2 text-left font-medium">Menu</th>
-                {CRUD_COLS.map(c => (
-                  <th key={c.key} className="px-3 py-2 text-center font-medium w-20">{c.label}</th>
-                ))}
+                <th className="px-3 py-2 text-left font-medium">
+                  Menu
+                  {search && (
+                    <span className="ml-2 text-xs font-normal text-slate-400">
+                      ({filteredMenus.length} kết quả)
+                    </span>
+                  )}
+                </th>
+                {CRUD_COLS.map(c => {
+                  const allChecked = columnAllChecked(c.key)
+                  return (
+                    <th key={c.key} className="w-24 px-3 py-2 text-center font-medium">
+                      <div className="flex flex-col items-center gap-1">
+                        <span>{c.label}</span>
+                        <button
+                          onClick={() => toggleColumn(c.key)}
+                          title={allChecked ? 'Bỏ tick toàn cột' : 'Tick toàn cột'}
+                          disabled={upsert.isPending || filteredMenus.length === 0}
+                          className={`flex h-5 w-5 items-center justify-center rounded border transition ${allChecked ? 'border-brand-600 bg-brand-600 text-white' : 'border-slate-300 bg-white text-slate-400 hover:border-brand-500'}`}
+                        >
+                          {allChecked && <Check className="h-3 w-3" />}
+                        </button>
+                      </div>
+                    </th>
+                  )
+                })}
               </tr>
             </thead>
             <tbody>
-              {menus.data?.map(m => {
+              {filteredMenus.length === 0 && (
+                <tr>
+                  <td colSpan={5} className="px-3 py-10 text-center text-xs text-slate-400">
+                    Không có menu khớp với từ khóa.
+                  </td>
+                </tr>
+              )}
+              {filteredMenus.map(m => {
                 const flags = currentFlags(m.key)
                 const depth = m.parentKey ? 1 : 0
                 return (
-                  <tr key={m.key} className="border-t border-slate-100">
+                  <tr key={m.key} className="border-t border-slate-100 hover:bg-slate-50/50">
                     <td className="px-3 py-2" style={{ paddingLeft: `${0.75 + depth * 1.5}rem` }}>
                       <span className="font-medium text-slate-800">{m.label}</span>
                       <span className="ml-2 font-mono text-xs text-slate-400">{m.key}</span>