[CLAUDE] Phase1.2: CRUD Master + Permission Matrix + FE admin pages

Backend:
- Domain/Master: Supplier (+ SupplierType 5 loai), Project, Department (AuditableEntity)
- Domain/Identity: MenuItem, Permission, MenuKeys const (12 menu)
- EF Configurations voi unique Code + query filter IsDeleted
- DbSets + IApplicationDbContext interface update
- Application: PagedResult + PagedRequest generic
- Application/Master CQRS CRUD 3 entity (Create/Update/Delete/Get/List voi paging search sort)
- Application/Permissions: GetMyMenuTree (union OR role, filter tree), ListMenuItems, ListPermissionsByRole, UpsertPermission (guard admin khong tu giam quyen), ListRoles
- Api/Authorization: MenuPermissionRequirement + Handler (Admin bypass, query DB)
- Program.cs: register 48 policy {menu}.{action} tu MenuKeys x Actions
- Api/Controllers: Suppliers, Projects, Departments, Menus, Roles, Permissions
- DbInitializer: seed 12 menu + admin full CRUD permissions
- Migration AddMasterData + AddPermissions

Frontend (fe-admin):
- Types: menuKeys.ts const, menu.ts (MenuNode/Role/Permission), master.ts (Supplier/Project/Department + SupplierType const-object)
- AuthContext: load menu from /menus/me, cache localStorage, refreshMenu()
- usePermission hook + PermissionGuard component (wrap button)
- UI kit them: Dialog (modal overlay), Textarea, Select
- Generic: DataTable (column config, sortable, loading, empty) + Pagination
- PageHeader component
- apiError helper extract message tu ProblemDetails
- Layout rewrite: render menu dong tu AuthContext.menu (MenuGroup collapsible + NavLink + lucide icon map)
- Pages: master/Suppliers, master/Projects, master/Departments (CRUD + search + sort + paging + Dialog form)
- Page system/Permissions: ma tran Role x MenuKey x CRUD checkbox (tick tu dong PUT upsert)
- App.tsx them 4 route moi

Bug fix:
- MenuPermissionHandler: EF expression tree khong support switch expression -> tach switch ra ngoai AnyAsync
- TS erasableSyntaxOnly khong cho enum -> SupplierType const-object pattern (typeof[keyof])

E2E verified via Vite proxy:
- GET /menus/me -> 6 root + 6 child nodes (12 menus)
- GET /roles -> 12 roles
- POST/GET/PUT/DELETE /suppliers -> full CRUD, soft delete OK
- tsc -b fe-admin pass

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

fe-admin/src/components/DataTable.tsx

@@ -0,0 +1,151 @@
+import type { ReactNode } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+export type Column<T> = {
+  key: string
+  header: ReactNode
+  render: (row: T) => ReactNode
+  sortable?: boolean
+  width?: string
+  align?: 'left' | 'center' | 'right'
+}
+
+type Props<T> = {
+  columns: Column<T>[]
+  rows: T[]
+  getRowKey: (row: T) => string
+  isLoading?: boolean
+  empty?: ReactNode
+  sortBy?: string
+  sortDesc?: boolean
+  onSortChange?: (sortBy: string, sortDesc: boolean) => void
+  onRowClick?: (row: T) => void
+}
+
+export function DataTable<T>({
+  columns,
+  rows,
+  getRowKey,
+  isLoading,
+  empty,
+  sortBy,
+  sortDesc,
+  onSortChange,
+  onRowClick,
+}: Props<T>) {
+  return (
+    <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>
+            {columns.map(c => (
+              <th
+                key={c.key}
+                className={cn(
+                  'px-3 py-2 font-medium',
+                  c.align === 'right' && 'text-right',
+                  c.align === 'center' && 'text-center',
+                  c.align !== 'right' && c.align !== 'center' && 'text-left',
+                  c.width,
+                )}
+              >
+                {c.sortable && onSortChange ? (
+                  <button
+                    onClick={() => onSortChange(c.key, sortBy === c.key ? !sortDesc : false)}
+                    className="inline-flex items-center gap-1 hover:text-slate-900"
+                  >
+                    {c.header}
+                    {sortBy === c.key && (sortDesc ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />)}
+                  </button>
+                ) : (
+                  c.header
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading && (
+            <tr>
+              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+                Đang tải…
+              </td>
+            </tr>
+          )}
+          {!isLoading && rows.length === 0 && (
+            <tr>
+              <td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
+                {empty ?? 'Không có dữ liệu'}
+              </td>
+            </tr>
+          )}
+          {!isLoading &&
+            rows.map(row => (
+              <tr
+                key={getRowKey(row)}
+                className={cn(
+                  'border-t border-slate-100 transition',
+                  onRowClick && 'cursor-pointer hover:bg-slate-50',
+                )}
+                onClick={() => onRowClick?.(row)}
+              >
+                {columns.map(c => (
+                  <td
+                    key={c.key}
+                    className={cn(
+                      'px-3 py-2',
+                      c.align === 'right' && 'text-right',
+                      c.align === 'center' && 'text-center',
+                    )}
+                  >
+                    {c.render(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+type PaginationProps = {
+  page: number
+  pageSize: number
+  total: number
+  onChange: (page: number) => void
+}
+
+export function Pagination({ page, pageSize, total, onChange }: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const to = Math.min(page * pageSize, total)
+
+  return (
+    <div className="flex items-center justify-between py-3 text-sm text-slate-600">
+      <span>
+        {from}–{to} / {total}
+      </span>
+      <div className="flex gap-1">
+        <button
+          disabled={page <= 1}
+          onClick={() => onChange(page - 1)}
+          className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
+        >
+          Trước
+        </button>
+        <span className="px-3 py-1">
+          Trang {page}/{totalPages}
+        </span>
+        <button
+          disabled={page >= totalPages}
+          onClick={() => onChange(page + 1)}
+          className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
+        >
+          Sau
+        </button>
+      </div>
+    </div>
+  )
+}

fe-admin/src/components/Layout.tsx

@@ -1,18 +1,80 @@
 import { Link, NavLink, Outlet } from 'react-router-dom'
-import { LogOut, LayoutDashboard, FileText, Users, Building2, Settings } from 'lucide-react'
+import { LogOut, ChevronDown, Circle, type LucideIcon } from 'lucide-react'
+import * as Icons from 'lucide-react'
+import { useState } from 'react'
 import { useAuth } from '@/contexts/AuthContext'
+import type { MenuNode } from '@/types/menu'
 import { cn } from '@/lib/cn'
 
-const menuItems = [
-  { to: '/dashboard', label: 'Tổng quan', icon: LayoutDashboard },
-  { to: '/contracts', label: 'Hợp đồng', icon: FileText },
-  { to: '/suppliers', label: 'Nhà cung cấp', icon: Building2 },
-  { to: '/users', label: 'Người dùng', icon: Users },
-  { to: '/settings', label: 'Cài đặt', icon: Settings },
-]
+// Map icon name → component (fallback Circle)
+function getIcon(name: string | null): LucideIcon {
+  if (!name) return Circle
+  const candidate = (Icons as unknown as Record<string, LucideIcon>)[name]
+  return candidate ?? Circle
+}
+
+// Map menu key → route path
+const KEY_TO_PATH: Record<string, string> = {
+  Dashboard: '/dashboard',
+  Suppliers: '/master/suppliers',
+  Projects: '/master/projects',
+  Departments: '/master/departments',
+  Contracts: '/contracts',
+  Forms: '/forms',
+  Reports: '/reports',
+  Users: '/system/users',
+  Roles: '/system/roles',
+  Permissions: '/system/permissions',
+}
+
+function MenuGroup({ node }: { node: MenuNode }) {
+  const [open, setOpen] = useState(true)
+  const Icon = getIcon(node.icon)
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="flex w-full items-center justify-between rounded-md px-3 py-2 text-xs font-semibold uppercase text-slate-500 hover:bg-slate-100"
+      >
+        <span className="flex items-center gap-2">
+          <Icon className="h-4 w-4" />
+          {node.label}
+        </span>
+        <ChevronDown className={cn('h-4 w-4 transition', !open && '-rotate-90')} />
+      </button>
+      {open && (
+        <div className="mt-1 space-y-0.5 pl-2">
+          {node.children.map(c => (
+            <MenuLeaf key={c.key} node={c} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function MenuLeaf({ node }: { node: MenuNode }) {
+  const Icon = getIcon(node.icon)
+  const path = KEY_TO_PATH[node.key]
+  if (!path) return null
+  return (
+    <NavLink
+      to={path}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition',
+          isActive ? 'bg-brand-50 text-brand-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+        )
+      }
+    >
+      <Icon className="h-4 w-4" />
+      {node.label}
+    </NavLink>
+  )
+}
 
 export function Layout() {
-  const { user, logout } = useAuth()
+  const { user, menu, logout } = useAuth()
 
   return (
     <div className="flex h-screen">
@@ -22,28 +84,12 @@ export function Layout() {
             SOLUTION ERP · Admin
           </Link>
         </div>
-        <nav className="flex-1 space-y-1 p-3">
-          {menuItems.map(item => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              className={({ isActive }) =>
-                cn(
-                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition',
-                  isActive
-                    ? 'bg-brand-50 text-brand-700'
-                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
-                )
-              }
-            >
-              <item.icon className="h-4 w-4" />
-              {item.label}
-            </NavLink>
-          ))}
+        <nav className="flex-1 space-y-1 overflow-y-auto p-3">
+          {menu.map(n => (n.children.length > 0 ? <MenuGroup key={n.key} node={n} /> : <MenuLeaf key={n.key} node={n} />))}
         </nav>
         <div className="border-t border-slate-200 p-3">
           <div className="mb-2 px-3 text-xs text-slate-500">
-            <div className="font-medium text-slate-700">{user?.fullName}</div>
+            <div className="truncate font-medium text-slate-700">{user?.fullName}</div>
             <div className="truncate">{user?.email}</div>
           </div>
           <button

fe-admin/src/components/PageHeader.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+export function PageHeader({ title, description, actions }: { title: ReactNode; description?: ReactNode; actions?: ReactNode }) {
+  return (
+    <div className="mb-5 flex items-start justify-between gap-4">
+      <div>
+        <h1 className="text-xl font-bold text-slate-900">{title}</h1>
+        {description && <p className="mt-1 text-sm text-slate-600">{description}</p>}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  )
+}

fe-admin/src/components/PermissionGuard.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import { usePermission } from '@/hooks/usePermission'
+import type { CrudAction } from '@/lib/menuKeys'
+
+type Props = {
+  menuKey: string
+  action?: CrudAction
+  fallback?: ReactNode
+  children: ReactNode
+}
+
+export function PermissionGuard({ menuKey, action = 'Read', fallback = null, children }: Props) {
+  const { can } = usePermission()
+  if (!can(menuKey, action)) return <>{fallback}</>
+  return <>{children}</>
+}

fe-admin/src/components/ui/Dialog.tsx

@@ -0,0 +1,48 @@
+import { useEffect, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  title: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Dialog({ open, onClose, title, children, footer, size = 'md' }: Props) {
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
+      <div
+        className={cn(
+          'w-full rounded-lg bg-white shadow-xl',
+          size === 'sm' && 'max-w-md',
+          size === 'md' && 'max-w-xl',
+          size === 'lg' && 'max-w-3xl',
+        )}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
+          <div className="text-base font-semibold text-slate-900">{title}</div>
+          <button onClick={onClose} className="rounded p-1 text-slate-500 hover:bg-slate-100">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="max-h-[70vh] overflow-auto p-5">{children}</div>
+        {footer && <div className="flex items-center justify-end gap-2 border-t border-slate-200 px-5 py-3">{footer}</div>}
+      </div>
+    </div>
+  )
+}

fe-admin/src/components/ui/Select.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, type SelectHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+type Props = SelectHTMLAttributes<HTMLSelectElement>
+
+export const Select = forwardRef<HTMLSelectElement, Props>(({ className, children, ...props }, ref) => (
+  <select
+    ref={ref}
+    className={cn(
+      'h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </select>
+))
+Select.displayName = 'Select'

fe-admin/src/components/ui/Textarea.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    className={cn(
+      'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+))
+Textarea.displayName = 'Textarea'