[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/App.tsx

@@ -5,6 +5,10 @@ import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Layout } from '@/components/Layout'
 import { LoginPage } from '@/pages/LoginPage'
 import { DashboardPage } from '@/pages/DashboardPage'
+import { SuppliersPage } from '@/pages/master/SuppliersPage'
+import { ProjectsPage } from '@/pages/master/ProjectsPage'
+import { DepartmentsPage } from '@/pages/master/DepartmentsPage'
+import { PermissionsPage } from '@/pages/system/PermissionsPage'
 
 function App() {
   return (
@@ -20,12 +24,16 @@ function App() {
             }
           >
             <Route path="/dashboard" element={<DashboardPage />} />
+            <Route path="/master/suppliers" element={<SuppliersPage />} />
+            <Route path="/master/projects" element={<ProjectsPage />} />
+            <Route path="/master/departments" element={<DepartmentsPage />} />
+            <Route path="/system/permissions" element={<PermissionsPage />} />
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <Route
               path="*"
               element={
                 <div className="p-8 text-slate-500">
-                  Trang này chưa được build — sẽ có ở Phase 1 đợt 2 / Phase 2 / 3.
+                  Trang này chưa được build — sẽ có ở Phase tiếp theo.
                 </div>
               }
             />

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'

fe-admin/src/contexts/AuthContext.tsx

@@ -1,29 +1,48 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
 import { api, TOKEN_KEY, USER_KEY } from '@/lib/api'
 import type { AuthResponse, LoginPayload, UserInfo } from '@/types/auth'
+import type { MenuNode } from '@/types/menu'
 
 type AuthContextValue = {
   user: UserInfo | null
+  menu: MenuNode[]
   isAuthenticated: boolean
   isBootstrapping: boolean
   login: (payload: LoginPayload) => Promise<void>
   logout: () => void
+  refreshMenu: () => Promise<void>
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null)
+const MENU_KEY = 'solution-erp-admin-menu'
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<UserInfo | null>(null)
+  const [menu, setMenu] = useState<MenuNode[]>([])
   const [isBootstrapping, setIsBootstrapping] = useState(true)
 
+  async function loadMenu() {
+    try {
+      const res = await api.get<MenuNode[]>('/menus/me')
+      setMenu(res.data)
+      localStorage.setItem(MENU_KEY, JSON.stringify(res.data))
+    } catch {
+      // keep cached menu if request fails
+    }
+  }
+
   useEffect(() => {
     const token = localStorage.getItem(TOKEN_KEY)
-    const raw = localStorage.getItem(USER_KEY)
-    if (token && raw) {
+    const userRaw = localStorage.getItem(USER_KEY)
+    const menuRaw = localStorage.getItem(MENU_KEY)
+    if (token && userRaw) {
       try {
-        setUser(JSON.parse(raw))
+        setUser(JSON.parse(userRaw))
+        if (menuRaw) setMenu(JSON.parse(menuRaw))
+        loadMenu()
       } catch {
         localStorage.removeItem(USER_KEY)
+        localStorage.removeItem(MENU_KEY)
       }
     }
     setIsBootstrapping(false)
@@ -34,16 +53,19 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     localStorage.setItem(TOKEN_KEY, res.data.accessToken)
     localStorage.setItem(USER_KEY, JSON.stringify(res.data.user))
     setUser(res.data.user)
+    await loadMenu()
   }
 
   function logout() {
     localStorage.removeItem(TOKEN_KEY)
     localStorage.removeItem(USER_KEY)
+    localStorage.removeItem(MENU_KEY)
     setUser(null)
+    setMenu([])
   }
 
   return (
-    <AuthContext.Provider value={{ user, isAuthenticated: !!user, isBootstrapping, login, logout }}>
+    <AuthContext.Provider value={{ user, menu, isAuthenticated: !!user, isBootstrapping, login, logout, refreshMenu: loadMenu }}>
       {children}
     </AuthContext.Provider>
   )

fe-admin/src/hooks/usePermission.ts

@@ -0,0 +1,26 @@
+import { useAuth } from '@/contexts/AuthContext'
+import type { CrudAction } from '@/lib/menuKeys'
+import type { MenuNode } from '@/types/menu'
+
+function findNode(tree: MenuNode[], key: string): MenuNode | undefined {
+  for (const n of tree) {
+    if (n.key === key) return n
+    const found = findNode(n.children, key)
+    if (found) return found
+  }
+  return undefined
+}
+
+export function usePermission() {
+  const { menu } = useAuth()
+  return {
+    can: (menuKey: string, action: CrudAction = 'Read'): boolean => {
+      const node = findNode(menu, menuKey)
+      if (!node) return false
+      return action === 'Read' ? node.canRead
+        : action === 'Create' ? node.canCreate
+        : action === 'Update' ? node.canUpdate
+        : node.canDelete
+    },
+  }
+}

fe-admin/src/lib/apiError.ts

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export function getErrorMessage(err: unknown, fallback = 'Lỗi hệ thống'): string {
+  if (axios.isAxiosError(err)) {
+    const data = err.response?.data as { detail?: string; title?: string; errors?: Record<string, string[]> } | undefined
+    if (data?.errors) {
+      const first = Object.values(data.errors).flat()[0]
+      if (first) return first
+    }
+    return data?.detail ?? data?.title ?? err.message
+  }
+  return fallback
+}

fe-admin/src/lib/menuKeys.ts

@@ -0,0 +1,18 @@
+// Đồng bộ tay với BE SolutionErp.Domain.Identity.MenuKeys
+export const MenuKeys = {
+  Dashboard: 'Dashboard',
+  Master: 'Master',
+  Suppliers: 'Suppliers',
+  Projects: 'Projects',
+  Departments: 'Departments',
+  Contracts: 'Contracts',
+  Forms: 'Forms',
+  Reports: 'Reports',
+  System: 'System',
+  Users: 'Users',
+  Roles: 'Roles',
+  Permissions: 'Permissions',
+} as const
+
+export type MenuKey = typeof MenuKeys[keyof typeof MenuKeys]
+export type CrudAction = 'Read' | 'Create' | 'Update' | 'Delete'

fe-admin/src/pages/master/DepartmentsPage.tsx

@@ -0,0 +1,160 @@
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+import { DataTable, Pagination, type Column } from '@/components/DataTable'
+import { PermissionGuard } from '@/components/PermissionGuard'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Textarea } from '@/components/ui/Textarea'
+import { Dialog } from '@/components/ui/Dialog'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { MenuKeys } from '@/lib/menuKeys'
+import type { Department, Paged } from '@/types/master'
+
+type FormState = { id?: string; code: string; name: string; note: string }
+const emptyForm: FormState = { code: '', name: '', note: '' }
+
+export function DepartmentsPage() {
+  const qc = useQueryClient()
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [sortBy, setSortBy] = useState<string | undefined>()
+  const [sortDesc, setSortDesc] = useState(true)
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const isEdit = !!form.id
+
+  const list = useQuery({
+    queryKey: ['departments', { page, search, sortBy, sortDesc }],
+    queryFn: async () => {
+      const res = await api.get<Paged<Department>>('/departments', {
+        params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
+      })
+      return res.data
+    },
+  })
+
+  const mutate = useMutation({
+    mutationFn: async (d: FormState) => {
+      const payload = { id: d.id, code: d.code, name: d.name, managerUserId: null, note: d.note || null }
+      if (d.id) await api.put(`/departments/${d.id}`, payload)
+      else await api.post('/departments', payload)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['departments'] })
+      toast.success(isEdit ? 'Đã cập nhật phòng ban' : 'Đã thêm phòng ban')
+      setOpen(false)
+      setForm(emptyForm)
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const remove = useMutation({
+    mutationFn: (id: string) => api.delete(`/departments/${id}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['departments'] })
+      toast.success('Đã xóa')
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const columns: Column<Department>[] = [
+    { key: 'code', header: 'Mã', sortable: true, render: d => <span className="font-mono text-xs">{d.code}</span>, width: 'w-32' },
+    { key: 'name', header: 'Tên phòng ban', sortable: true, render: d => d.name },
+    { key: 'note', header: 'Ghi chú', render: d => d.note ?? '—' },
+    {
+      key: 'actions',
+      header: '',
+      align: 'right',
+      width: 'w-28',
+      render: d => (
+        <div className="flex justify-end gap-1">
+          <PermissionGuard menuKey={MenuKeys.Departments} action="Update">
+            <Button size="sm" variant="ghost" onClick={() => {
+              setForm({ id: d.id, code: d.code, name: d.name, note: d.note ?? '' })
+              setOpen(true)
+            }}>
+              <Pencil className="h-3.5 w-3.5" />
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard menuKey={MenuKeys.Departments} action="Delete">
+            <Button size="sm" variant="ghost" onClick={() => {
+              if (confirm(`Xóa phòng ban "${d.name}"?`)) remove.mutate(d.id)
+            }}>
+              <Trash2 className="h-3.5 w-3.5 text-red-500" />
+            </Button>
+          </PermissionGuard>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title="Phòng ban"
+        actions={
+          <PermissionGuard menuKey={MenuKeys.Departments} action="Create">
+            <Button onClick={() => { setForm(emptyForm); setOpen(true) }}>
+              <Plus className="h-4 w-4" />
+              Thêm phòng ban
+            </Button>
+          </PermissionGuard>
+        }
+      />
+
+      <div className="mb-3 flex gap-2">
+        <Input
+          placeholder="Tìm…"
+          value={search}
+          onChange={e => { setSearch(e.target.value); setPage(1) }}
+          className="max-w-sm"
+        />
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={list.data?.items ?? []}
+        getRowKey={d => d.id}
+        isLoading={list.isLoading}
+        sortBy={sortBy}
+        sortDesc={sortDesc}
+        onSortChange={(k, desc) => { setSortBy(k); setSortDesc(desc) }}
+      />
+      <Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={isEdit ? 'Sửa phòng ban' : 'Thêm phòng ban mới'}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
+            <Button onClick={(e: FormEvent) => { e.preventDefault(); mutate.mutate(form) }} disabled={mutate.isPending}>
+              {mutate.isPending ? 'Đang lưu…' : 'Lưu'}
+            </Button>
+          </>
+        }
+      >
+        <form className="space-y-4" onSubmit={e => { e.preventDefault(); mutate.mutate(form) }}>
+          <div className="space-y-1.5">
+            <Label>Mã phòng ban *</Label>
+            <Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Tên phòng ban *</Label>
+            <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Ghi chú</Label>
+            <Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  )
+}

fe-admin/src/pages/master/ProjectsPage.tsx

@@ -0,0 +1,214 @@
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+import { DataTable, Pagination, type Column } from '@/components/DataTable'
+import { PermissionGuard } from '@/components/PermissionGuard'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Textarea } from '@/components/ui/Textarea'
+import { Dialog } from '@/components/ui/Dialog'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { MenuKeys } from '@/lib/menuKeys'
+import type { Paged, Project } from '@/types/master'
+
+type FormState = {
+  id?: string
+  code: string
+  name: string
+  startDate: string
+  endDate: string
+  budgetTotal: string
+  note: string
+}
+
+const emptyForm: FormState = { code: '', name: '', startDate: '', endDate: '', budgetTotal: '', note: '' }
+
+const fmtMoney = (v: number | null) => (v == null ? '—' : v.toLocaleString('vi-VN'))
+const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleDateString('vi-VN') : '—')
+
+export function ProjectsPage() {
+  const qc = useQueryClient()
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [sortBy, setSortBy] = useState<string | undefined>()
+  const [sortDesc, setSortDesc] = useState(true)
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const isEdit = !!form.id
+
+  const list = useQuery({
+    queryKey: ['projects', { page, search, sortBy, sortDesc }],
+    queryFn: async () => {
+      const res = await api.get<Paged<Project>>('/projects', {
+        params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
+      })
+      return res.data
+    },
+  })
+
+  const mutate = useMutation({
+    mutationFn: async (d: FormState) => {
+      const payload = {
+        id: d.id,
+        code: d.code,
+        name: d.name,
+        startDate: d.startDate || null,
+        endDate: d.endDate || null,
+        managerUserId: null,
+        budgetTotal: d.budgetTotal ? Number(d.budgetTotal) : null,
+        note: d.note || null,
+      }
+      if (d.id) await api.put(`/projects/${d.id}`, payload)
+      else await api.post('/projects', payload)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['projects'] })
+      toast.success(isEdit ? 'Đã cập nhật dự án' : 'Đã thêm dự án')
+      setOpen(false)
+      setForm(emptyForm)
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const remove = useMutation({
+    mutationFn: (id: string) => api.delete(`/projects/${id}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['projects'] })
+      toast.success('Đã xóa')
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  function openEdit(p: Project) {
+    setForm({
+      id: p.id,
+      code: p.code,
+      name: p.name,
+      startDate: p.startDate ? p.startDate.slice(0, 10) : '',
+      endDate: p.endDate ? p.endDate.slice(0, 10) : '',
+      budgetTotal: p.budgetTotal?.toString() ?? '',
+      note: p.note ?? '',
+    })
+    setOpen(true)
+  }
+
+  const columns: Column<Project>[] = [
+    { key: 'code', header: 'Mã DA', sortable: true, render: p => <span className="font-mono text-xs">{p.code}</span>, width: 'w-32' },
+    { key: 'name', header: 'Tên dự án', sortable: true, render: p => p.name },
+    { key: 'startDate', header: 'Bắt đầu', render: p => fmtDate(p.startDate), width: 'w-32' },
+    { key: 'endDate', header: 'Kết thúc', render: p => fmtDate(p.endDate), width: 'w-32' },
+    { key: 'budgetTotal', header: 'Ngân sách', align: 'right', render: p => fmtMoney(p.budgetTotal) },
+    {
+      key: 'actions',
+      header: '',
+      align: 'right',
+      width: 'w-28',
+      render: p => (
+        <div className="flex justify-end gap-1">
+          <PermissionGuard menuKey={MenuKeys.Projects} action="Update">
+            <Button size="sm" variant="ghost" onClick={() => openEdit(p)}>
+              <Pencil className="h-3.5 w-3.5" />
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard menuKey={MenuKeys.Projects} action="Delete">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                if (confirm(`Xóa dự án "${p.name}"?`)) remove.mutate(p.id)
+              }}
+            >
+              <Trash2 className="h-3.5 w-3.5 text-red-500" />
+            </Button>
+          </PermissionGuard>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title="Dự án"
+        description="Quản lý các dự án xây dựng — tham chiếu trong mã HĐ"
+        actions={
+          <PermissionGuard menuKey={MenuKeys.Projects} action="Create">
+            <Button onClick={() => { setForm(emptyForm); setOpen(true) }}>
+              <Plus className="h-4 w-4" />
+              Thêm dự án
+            </Button>
+          </PermissionGuard>
+        }
+      />
+
+      <div className="mb-3 flex gap-2">
+        <Input
+          placeholder="Tìm theo mã, tên…"
+          value={search}
+          onChange={e => { setSearch(e.target.value); setPage(1) }}
+          className="max-w-sm"
+        />
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={list.data?.items ?? []}
+        getRowKey={p => p.id}
+        isLoading={list.isLoading}
+        sortBy={sortBy}
+        sortDesc={sortDesc}
+        onSortChange={(k, d) => { setSortBy(k); setSortDesc(d) }}
+      />
+      <Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={isEdit ? 'Sửa dự án' : 'Thêm dự án mới'}
+        size="md"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
+            <Button onClick={(e: FormEvent) => { e.preventDefault(); mutate.mutate(form) }} disabled={mutate.isPending}>
+              {mutate.isPending ? 'Đang lưu…' : 'Lưu'}
+            </Button>
+          </>
+        }
+      >
+        <form
+          className="grid grid-cols-2 gap-4"
+          onSubmit={e => { e.preventDefault(); mutate.mutate(form) }}
+        >
+          <div className="space-y-1.5">
+            <Label>Mã dự án *</Label>
+            <Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Ngân sách (VND)</Label>
+            <Input type="number" value={form.budgetTotal} onChange={e => setForm({ ...form, budgetTotal: e.target.value })} />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Tên dự án *</Label>
+            <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Ngày bắt đầu</Label>
+            <Input type="date" value={form.startDate} onChange={e => setForm({ ...form, startDate: e.target.value })} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Ngày kết thúc</Label>
+            <Input type="date" value={form.endDate} onChange={e => setForm({ ...form, endDate: e.target.value })} />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Ghi chú</Label>
+            <Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  )
+}

fe-admin/src/pages/master/SuppliersPage.tsx

@@ -0,0 +1,253 @@
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+import { DataTable, Pagination, type Column } from '@/components/DataTable'
+import { PermissionGuard } from '@/components/PermissionGuard'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Textarea } from '@/components/ui/Textarea'
+import { Dialog } from '@/components/ui/Dialog'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { MenuKeys } from '@/lib/menuKeys'
+import { SupplierType, SupplierTypeLabel, type Paged, type Supplier } from '@/types/master'
+
+type FormState = {
+  id?: string
+  code: string
+  name: string
+  type: SupplierType
+  taxCode: string
+  phone: string
+  email: string
+  address: string
+  contactPerson: string
+  note: string
+}
+
+const emptyForm: FormState = {
+  code: '', name: '', type: SupplierType.NhaCungCap,
+  taxCode: '', phone: '', email: '', address: '', contactPerson: '', note: '',
+}
+
+export function SuppliersPage() {
+  const qc = useQueryClient()
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [sortBy, setSortBy] = useState<string | undefined>()
+  const [sortDesc, setSortDesc] = useState(true)
+
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const isEdit = !!form.id
+
+  const list = useQuery({
+    queryKey: ['suppliers', { page, search, sortBy, sortDesc }],
+    queryFn: async () => {
+      const res = await api.get<Paged<Supplier>>('/suppliers', {
+        params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
+      })
+      return res.data
+    },
+  })
+
+  const mutate = useMutation({
+    mutationFn: async (data: FormState) => {
+      const payload = {
+        id: data.id,
+        code: data.code,
+        name: data.name,
+        type: Number(data.type),
+        taxCode: data.taxCode || null,
+        phone: data.phone || null,
+        email: data.email || null,
+        address: data.address || null,
+        contactPerson: data.contactPerson || null,
+        note: data.note || null,
+      }
+      if (data.id) {
+        await api.put(`/suppliers/${data.id}`, payload)
+      } else {
+        await api.post('/suppliers', payload)
+      }
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['suppliers'] })
+      toast.success(isEdit ? 'Đã cập nhật NCC' : 'Đã thêm NCC')
+      setOpen(false)
+      setForm(emptyForm)
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const remove = useMutation({
+    mutationFn: async (id: string) => await api.delete(`/suppliers/${id}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['suppliers'] })
+      toast.success('Đã xóa')
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  function openNew() {
+    setForm(emptyForm)
+    setOpen(true)
+  }
+
+  function openEdit(s: Supplier) {
+    setForm({
+      id: s.id, code: s.code, name: s.name, type: s.type,
+      taxCode: s.taxCode ?? '', phone: s.phone ?? '', email: s.email ?? '',
+      address: s.address ?? '', contactPerson: s.contactPerson ?? '', note: s.note ?? '',
+    })
+    setOpen(true)
+  }
+
+  function submit(e: FormEvent) {
+    e.preventDefault()
+    mutate.mutate(form)
+  }
+
+  const columns: Column<Supplier>[] = [
+    { key: 'code', header: 'Mã', sortable: true, render: s => <span className="font-mono text-xs">{s.code}</span>, width: 'w-32' },
+    { key: 'name', header: 'Tên NCC', sortable: true, render: s => s.name },
+    { key: 'type', header: 'Loại', sortable: true, width: 'w-36', render: s => SupplierTypeLabel[s.type] },
+    { key: 'taxCode', header: 'MST', render: s => s.taxCode ?? '—' },
+    { key: 'phone', header: 'Điện thoại', render: s => s.phone ?? '—' },
+    {
+      key: 'actions',
+      header: '',
+      align: 'right',
+      width: 'w-32',
+      render: s => (
+        <div className="flex justify-end gap-1">
+          <PermissionGuard menuKey={MenuKeys.Suppliers} action="Update">
+            <Button size="sm" variant="ghost" onClick={() => openEdit(s)}>
+              <Pencil className="h-3.5 w-3.5" />
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard menuKey={MenuKeys.Suppliers} action="Delete">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                if (confirm(`Xóa NCC "${s.name}"?`)) remove.mutate(s.id)
+              }}
+            >
+              <Trash2 className="h-3.5 w-3.5 text-red-500" />
+            </Button>
+          </PermissionGuard>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title="Nhà cung cấp"
+        description="Quản lý NCC / Thầu phụ / Tổ đội / Đơn vị dịch vụ / Chủ đầu tư"
+        actions={
+          <PermissionGuard menuKey={MenuKeys.Suppliers} action="Create">
+            <Button onClick={openNew}>
+              <Plus className="h-4 w-4" />
+              Thêm NCC
+            </Button>
+          </PermissionGuard>
+        }
+      />
+
+      <div className="mb-3 flex gap-2">
+        <Input
+          placeholder="Tìm theo mã, tên, MST…"
+          value={search}
+          onChange={e => {
+            setSearch(e.target.value)
+            setPage(1)
+          }}
+          className="max-w-sm"
+        />
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={list.data?.items ?? []}
+        getRowKey={s => s.id}
+        isLoading={list.isLoading}
+        sortBy={sortBy}
+        sortDesc={sortDesc}
+        onSortChange={(key, desc) => {
+          setSortBy(key)
+          setSortDesc(desc)
+        }}
+      />
+      <Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={isEdit ? 'Sửa NCC' : 'Thêm NCC mới'}
+        size="lg"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Hủy
+            </Button>
+            <Button onClick={submit} disabled={mutate.isPending}>
+              {mutate.isPending ? 'Đang lưu…' : 'Lưu'}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={submit} className="grid grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <Label>Mã NCC *</Label>
+            <Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Loại *</Label>
+            <Select value={form.type} onChange={e => setForm({ ...form, type: Number(e.target.value) as SupplierType })}>
+              {Object.entries(SupplierTypeLabel).map(([v, l]) => (
+                <option key={v} value={v}>
+                  {l}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Tên đầy đủ *</Label>
+            <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
+          </div>
+          <div className="space-y-1.5">
+            <Label>MST</Label>
+            <Input value={form.taxCode} onChange={e => setForm({ ...form, taxCode: e.target.value })} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Điện thoại</Label>
+            <Input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Email</Label>
+            <Input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Người liên hệ</Label>
+            <Input value={form.contactPerson} onChange={e => setForm({ ...form, contactPerson: e.target.value })} />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Địa chỉ</Label>
+            <Input value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Ghi chú</Label>
+            <Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  )
+}

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

@@ -0,0 +1,129 @@
+import { useMemo, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+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' },
+]
+
+export function PermissionsPage() {
+  const qc = useQueryClient()
+  const [roleId, setRoleId] = useState<string>('')
+
+  const roles = useQuery({
+    queryKey: ['roles'],
+    queryFn: async () => (await api.get<Role[]>('/roles')).data,
+  })
+
+  const menus = useQuery({
+    queryKey: ['menus', 'all'],
+    queryFn: async () => (await api.get<MenuItem[]>('/menus')).data,
+  })
+
+  const perms = useQuery({
+    queryKey: ['permissions', roleId],
+    queryFn: async () => (await api.get<Permission[]>(`/permissions/by-role/${roleId}`)).data,
+    enabled: !!roleId,
+  })
+
+  const upsert = useMutation({
+    mutationFn: async (p: { menuKey: string; canRead: boolean; canCreate: boolean; canUpdate: boolean; canDelete: boolean }) => {
+      await api.put('/permissions', { roleId, ...p })
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['permissions', roleId] })
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const permMap = useMemo(() => {
+    const map = new Map<string, Permission>()
+    for (const p of perms.data ?? []) map.set(p.menuKey, p)
+    return map
+  }, [perms.data])
+
+  function currentFlags(menuKey: string) {
+    const p = permMap.get(menuKey)
+    return {
+      canRead: p?.canRead ?? false,
+      canCreate: p?.canCreate ?? false,
+      canUpdate: p?.canUpdate ?? false,
+      canDelete: p?.canDelete ?? false,
+    }
+  }
+
+  function toggle(menuKey: string, field: CrudKey) {
+    const flags = currentFlags(menuKey)
+    const next = { ...flags, [field]: !flags[field] }
+    upsert.mutate({ menuKey, ...next })
+  }
+
+  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."
+      />
+
+      <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>
+
+      {roleId && (
+        <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>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {menus.data?.map(m => {
+                const flags = currentFlags(m.key)
+                const depth = m.parentKey ? 1 : 0
+                return (
+                  <tr key={m.key} className="border-t border-slate-100">
+                    <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>
+                    </td>
+                    {CRUD_COLS.map(c => (
+                      <td key={c.key} className="px-3 py-2 text-center">
+                        <input
+                          type="checkbox"
+                          className="h-4 w-4 cursor-pointer accent-brand-600"
+                          checked={flags[c.key]}
+                          disabled={upsert.isPending}
+                          onChange={() => toggle(m.key, c.key)}
+                        />
+                      </td>
+                    ))}
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

fe-admin/src/types/master.ts

@@ -0,0 +1,71 @@
+export type Paged<T> = {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+  hasNext: boolean
+  hasPrev: boolean
+}
+
+export const SupplierType = {
+  NhaCungCap: 1,
+  NhaThauPhu: 2,
+  ToDoi: 3,
+  DonViDichVu: 4,
+  ChuDauTu: 5,
+} as const
+
+export type SupplierType = typeof SupplierType[keyof typeof SupplierType]
+
+export const SupplierTypeLabel: Record<SupplierType, string> = {
+  1: 'Nhà cung cấp',
+  2: 'Nhà thầu phụ',
+  3: 'Tổ đội',
+  4: 'Đơn vị dịch vụ',
+  5: 'Chủ đầu tư',
+}
+
+export type Supplier = {
+  id: string
+  code: string
+  name: string
+  type: SupplierType
+  taxCode: string | null
+  phone: string | null
+  email: string | null
+  address: string | null
+  contactPerson: string | null
+  note: string | null
+  createdAt: string
+  updatedAt: string | null
+}
+
+export type SupplierInput = Omit<Supplier, 'id' | 'createdAt' | 'updatedAt'>
+
+export type Project = {
+  id: string
+  code: string
+  name: string
+  startDate: string | null
+  endDate: string | null
+  managerUserId: string | null
+  budgetTotal: number | null
+  note: string | null
+  createdAt: string
+  updatedAt: string | null
+}
+
+export type ProjectInput = Omit<Project, 'id' | 'createdAt' | 'updatedAt'>
+
+export type Department = {
+  id: string
+  code: string
+  name: string
+  managerUserId: string | null
+  note: string | null
+  createdAt: string
+  updatedAt: string | null
+}
+
+export type DepartmentInput = Omit<Department, 'id' | 'createdAt' | 'updatedAt'>

fe-admin/src/types/menu.ts

@@ -0,0 +1,37 @@
+export type MenuNode = {
+  key: string
+  label: string
+  parentKey: string | null
+  order: number
+  icon: string | null
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+  children: MenuNode[]
+}
+
+export type MenuItem = {
+  key: string
+  label: string
+  parentKey: string | null
+  order: number
+  icon: string | null
+}
+
+export type Role = {
+  id: string
+  name: string
+  description: string | null
+  createdAt: string
+}
+
+export type Permission = {
+  id: string
+  roleId: string
+  menuKey: string
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}