[CLAUDE] FE-Admin: UsersPage dept/position field + RoleShortName tiếng Việt

## types/users.ts

- User type + departmentId/departmentName/position
- CreateUserInput + departmentId/position
- RoleShortName map (Mã viết tắt VN per role): QTV/NV.PB/TPB/PM/PRO/CCM/
  FIN/ACT/EQU/BOD/NĐUQ/HRA
- RoleLabel map (Tên đầy đủ VN per role)
- roleDisplayName(role) → "BOD — Ban Giám đốc" combined helper

## types/menu.ts

Role type + shortName field (mirror BE RoleDto).

## UsersPage redesign

- Column "Phòng ban" (departmentName + position 2 dòng)
- Column "Vai trò" hiển thị badge ShortName ("BOD", "CCM", "PM"), tooltip
  hover full label
- Column actions thêm "Sửa thông tin" (Pencil icon) — dialog edit dept/
  position/active state
- Create dialog 2-col grid: Email | Họ tên / Phòng ban (dropdown) | Chức vụ /
  Password (col-span-2). Roles checkboxes hiển thị "ShortName — full label"
- Edit dialog mới — sửa fullName + dept + position + isActive
- Roles dialog title kèm dept name (context cho user reviewer)
- toggleActive mutation include departmentId/position để không reset

## PermissionsPage

Panel 1 role list:
- 2-line per row: ShortName (semibold) + Description (truncate small)
- Tooltip = description đầy đủ
- Active row vẫn ring-brand-200

Panel 2 header badge: ShortName thay name code English.

## Build

fe-admin: tsc + vite pass (12.17s lần 1, 671ms lần 2)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -130,13 +130,19 @@ export function PermissionsPage() {
                 key={r.id}
                 onClick={() => setRoleId(r.id)}
                 className={cn(
-                  'flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition',
+                  'flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-left transition',
                   roleId === r.id
                     ? 'bg-brand-50 text-brand-700 font-medium ring-1 ring-brand-200'
                     : 'text-slate-600 hover:bg-slate-50',
                 )}
+                title={r.description ?? r.name}
               >
-                <span className="truncate">{r.name}</span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm font-semibold">{r.shortName ?? r.name}</span>
+                  <span className="block truncate text-[11px] font-normal text-slate-500">
+                    {r.description ?? r.name}
+                  </span>
+                </span>
                 {roleId === r.id && <Check className="h-3.5 w-3.5 shrink-0" />}
               </button>
             ))}
@@ -149,8 +155,8 @@ export function PermissionsPage() {
             <KeyRound className="h-4 w-4 text-brand-600" />
             <h2 className="text-sm font-semibold text-slate-700">2. Quyền theo menu</h2>
             {selectedRole && (
-              <span className="rounded-full bg-brand-50 px-2 py-0.5 text-[10px] font-medium text-brand-700">
-                {selectedRole.name}
+              <span className="rounded-full bg-brand-50 px-2 py-0.5 text-[10px] font-medium text-brand-700" title={selectedRole.description ?? ''}>
+                {selectedRole.shortName ?? selectedRole.name}
               </span>
             )}
             <div className="ml-auto w-56">