[CLAUDE] FE-User: Plan CA Chunk B — Move 4 master pages từ fe-admin → fe-user

- Copy SuppliersPage/ProjectsPage/DepartmentsPage/CatalogsPage (948 LOC mirror)
- Extend menuKeys.ts với 5 key Catalogs* (CatalogUnits/Materials/Services/WorkItems)
- Add 7 route App.tsx (/master/suppliers + /master/projects + /master/departments + 4 catalogs tab)
- fe-user component parity verified (DataTable, PageHeader, PermissionGuard, 6 shadcn ui)

Verify:
- fe-user npm run build PASS 0 TS err (1916 modules, 14.14s)
- 4 file SHA256 byte-identical mirror fe-admin (all 4 hash match)
- 0 BE touch (Chunk A em main solo parallel)

Pending Chunk C: sidebar filter 2 app (fe-admin HIDE 9 menu, fe-user SHOW)
Pending Chunk D: smoke verify + role demo user

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

fe-user/src/App.tsx

@@ -6,6 +6,10 @@ import { Layout } from '@/components/Layout'
 import { LoginPage } from '@/pages/LoginPage'
 import { UserDashboardPage } from '@/pages/UserDashboardPage'
 import { InboxPage } from '@/pages/InboxPage'
+import { SuppliersPage } from '@/pages/master/SuppliersPage'
+import { ProjectsPage } from '@/pages/master/ProjectsPage'
+import { DepartmentsPage } from '@/pages/master/DepartmentsPage'
+import { CatalogsPage } from '@/pages/master/CatalogsPage'
 import { ContractCreatePage } from '@/pages/contracts/ContractCreatePage'
 import { ContractDetailPage } from '@/pages/contracts/ContractDetailPage'
 import { MyContractsPage } from '@/pages/contracts/MyContractsPage'
@@ -31,6 +35,11 @@ function App() {
           >
             <Route path="/dashboard" element={<UserDashboardPage />} />
             <Route path="/inbox" element={<InboxPage />} />
+            <Route path="/master/suppliers" element={<SuppliersPage />} />
+            <Route path="/master/projects" element={<ProjectsPage />} />
+            <Route path="/master/departments" element={<DepartmentsPage />} />
+            <Route path="/master/catalogs" element={<Navigate to="/master/catalogs/units" replace />} />
+            <Route path="/master/catalogs/:kind" element={<CatalogsPage />} />
             <Route path="/contracts/new" element={<ContractCreatePage />} />
             <Route path="/contracts/:id" element={<ContractDetailPage />} />
             <Route path="/my-contracts" element={<MyContractsPage />} />

fe-user/src/lib/menuKeys.ts

@@ -5,6 +5,11 @@ export const MenuKeys = {
   Suppliers: 'Suppliers',
   Projects: 'Projects',
   Departments: 'Departments',
+  Catalogs: 'Catalogs',
+  CatalogUnits: 'CatalogUnits',
+  CatalogMaterials: 'CatalogMaterials',
+  CatalogServices: 'CatalogServices',
+  CatalogWorkItems: 'CatalogWorkItems',
   Contracts: 'Contracts',
   Forms: 'Forms',
   Reports: 'Reports',

fe-user/src/pages/master/CatalogsPage.tsx

@@ -0,0 +1,321 @@
+// Generic master catalogs CRUD — 1 page handle 4 kind: units / materials /
+// services / work-items. URL `/master/catalogs/:kind` driven, mỗi kind có
+// fields config riêng. Sub-tabs hiển thị 4 kind trên cùng để chuyển nhanh.
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useParams, useNavigate } from 'react-router-dom'
+import { Library, Pencil, Plus, Ruler, Package, Wrench, ListChecks, Trash2, Search } from 'lucide-react'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+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 { cn } from '@/lib/cn'
+
+type Kind = 'units' | 'materials' | 'services' | 'work-items'
+
+type FieldDef = { key: string; label: string; type: 'text' | 'textarea' | 'checkbox'; required?: boolean; placeholder?: string }
+
+const KIND_CONFIG: Record<Kind, {
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  fields: FieldDef[]
+  columns: string[]
+}> = {
+  'units': {
+    label: 'Đơn vị tính',
+    icon: Ruler,
+    fields: [
+      { key: 'code', label: 'Mã *', type: 'text', required: true, placeholder: 'm2, kg, ngc...' },
+      { key: 'name', label: 'Tên *', type: 'text', required: true, placeholder: 'Mét vuông, Kilogram...' },
+      { key: 'description', label: 'Mô tả', type: 'textarea' },
+    ],
+    columns: ['Mã', 'Tên', 'Mô tả'],
+  },
+  'materials': {
+    label: 'Vật tư / SP',
+    icon: Package,
+    fields: [
+      { key: 'code', label: 'Mã SP *', type: 'text', required: true, placeholder: 'XM-PCB40' },
+      { key: 'name', label: 'Tên SP *', type: 'text', required: true, placeholder: 'Xi măng PCB40' },
+      { key: 'category', label: 'Nhóm', type: 'text', placeholder: 'Xi măng, Sắt thép...' },
+      { key: 'defaultUnit', label: 'ĐVT mặc định', type: 'text', placeholder: 'kg, m3...' },
+      { key: 'specification', label: 'Thông số kỹ thuật', type: 'textarea' },
+      { key: 'originCountry', label: 'Xuất xứ', type: 'text' },
+      { key: 'isActive', label: 'Đang dùng', type: 'checkbox' },
+    ],
+    columns: ['Mã', 'Tên', 'Nhóm', 'ĐVT', 'Trạng thái'],
+  },
+  'services': {
+    label: 'Dịch vụ',
+    icon: Wrench,
+    fields: [
+      { key: 'code', label: 'Mã DV *', type: 'text', required: true, placeholder: 'VC-OTO' },
+      { key: 'name', label: 'Tên DV *', type: 'text', required: true, placeholder: 'Vận chuyển ô tô tải' },
+      { key: 'category', label: 'Loại', type: 'text', placeholder: 'Vận chuyển, Bảo trì...' },
+      { key: 'defaultUnit', label: 'ĐVT mặc định', type: 'text', placeholder: 'ca, h, lan...' },
+      { key: 'description', label: 'Mô tả', type: 'textarea' },
+      { key: 'isActive', label: 'Đang dùng', type: 'checkbox' },
+    ],
+    columns: ['Mã', 'Tên', 'Loại', 'ĐVT', 'Trạng thái'],
+  },
+  'work-items': {
+    label: 'Hạng mục công việc',
+    icon: ListChecks,
+    fields: [
+      { key: 'code', label: 'Mã CV *', type: 'text', required: true, placeholder: 'DAO-MONG' },
+      { key: 'name', label: 'Tên CV *', type: 'text', required: true, placeholder: 'Đào móng công trình' },
+      { key: 'category', label: 'Nhóm', type: 'text', placeholder: 'Phần thô, Hoàn thiện...' },
+      { key: 'defaultUnit', label: 'ĐVT mặc định', type: 'text', placeholder: 'm3, m2, kg...' },
+      { key: 'description', label: 'Mô tả + spec yêu cầu', type: 'textarea' },
+      { key: 'isActive', label: 'Đang dùng', type: 'checkbox' },
+    ],
+    columns: ['Mã', 'Tên', 'Nhóm', 'ĐVT', 'Trạng thái'],
+  },
+}
+
+const KINDS: Kind[] = ['units', 'materials', 'services', 'work-items']
+
+type CatalogRow = Record<string, unknown> & { id: string; code: string; name: string }
+
+export function CatalogsPage() {
+  const navigate = useNavigate()
+  const params = useParams<{ kind?: string }>()
+  const kind = (KINDS.includes(params.kind as Kind) ? params.kind : 'units') as Kind
+  const config = KIND_CONFIG[kind]
+
+  const qc = useQueryClient()
+  const [search, setSearch] = useState('')
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState<Record<string, unknown>>({})
+  const isEdit = !!form.id
+
+  const list = useQuery({
+    queryKey: ['catalogs', kind, search],
+    queryFn: async () => (await api.get<CatalogRow[]>(`/catalogs/${kind}`, { params: { q: search || undefined } })).data,
+  })
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const body = buildBody(kind, form)
+      if (isEdit) await api.put(`/catalogs/${kind}/${form.id}`, { id: form.id, ...body })
+      else await api.post(`/catalogs/${kind}`, body)
+    },
+    onSuccess: () => {
+      toast.success(isEdit ? 'Đã lưu' : 'Đã thêm')
+      qc.invalidateQueries({ queryKey: ['catalogs', kind] })
+      setOpen(false)
+      setForm({})
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const remove = useMutation({
+    mutationFn: async (id: string) => { await api.delete(`/catalogs/${kind}/${id}`) },
+    onSuccess: () => {
+      toast.success('Đã xóa')
+      qc.invalidateQueries({ queryKey: ['catalogs', kind] })
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  function openCreate() {
+    const init: Record<string, unknown> = {}
+    config.fields.forEach(f => { init[f.key] = f.type === 'checkbox' ? true : '' })
+    setForm(init)
+    setOpen(true)
+  }
+  function openEdit(row: CatalogRow) {
+    const init: Record<string, unknown> = { id: row.id }
+    config.fields.forEach(f => { init[f.key] = row[f.key] ?? (f.type === 'checkbox' ? false : '') })
+    setForm(init)
+    setOpen(true)
+  }
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title={
+          <span className="flex items-center gap-2">
+            <Library className="h-5 w-5" />
+            Danh mục chi tiết
+          </span>
+        }
+        description="Master data dùng cho phần Chi tiết HĐ — autocomplete khi user nhập line items."
+      />
+
+      {/* Sub-tabs cho 4 kind */}
+      <div className="mb-4 flex gap-1 border-b border-slate-200">
+        {KINDS.map(k => {
+          const KIcon = KIND_CONFIG[k].icon
+          const active = k === kind
+          return (
+            <button
+              key={k}
+              onClick={() => navigate(`/master/catalogs/${k}`)}
+              className={cn(
+                '-mb-px flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm transition',
+                active
+                  ? 'border-brand-600 font-semibold text-brand-700'
+                  : 'border-transparent text-slate-500 hover:text-slate-700',
+              )}
+            >
+              <KIcon className="h-4 w-4" />
+              {KIND_CONFIG[k].label}
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="mb-3 flex gap-2">
+        <div className="relative max-w-md flex-1">
+          <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
+          <Input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="Tìm theo mã / tên…"
+            className="pl-8"
+          />
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="h-4 w-4" />
+          Thêm {config.label.toLowerCase()}
+        </Button>
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border border-slate-200 bg-white">
+        <table className="min-w-full text-sm">
+          <thead className="bg-slate-50 text-[11px] uppercase tracking-wider text-slate-500">
+            <tr>
+              <th className="px-3 py-2 text-left">Mã</th>
+              <th className="px-3 py-2 text-left">Tên</th>
+              {kind !== 'units' && <th className="px-3 py-2 text-left">Nhóm/Loại</th>}
+              {kind !== 'units' && <th className="px-3 py-2 text-left">ĐVT</th>}
+              {kind !== 'units' && <th className="px-3 py-2 text-left">Trạng thái</th>}
+              <th className="w-20 px-3 py-2"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {list.isLoading && (
+              <tr><td colSpan={6} className="p-6 text-center text-slate-400">Đang tải…</td></tr>
+            )}
+            {!list.isLoading && (list.data?.length ?? 0) === 0 && (
+              <tr><td colSpan={6} className="p-6 text-center text-slate-400">Chưa có dữ liệu — bấm Thêm để tạo mới.</td></tr>
+            )}
+            {list.data?.map(row => (
+              <tr key={row.id} className="hover:bg-slate-50">
+                <td className="px-3 py-2 font-mono text-xs">{row.code}</td>
+                <td className="px-3 py-2">{row.name}</td>
+                {kind !== 'units' && <td className="px-3 py-2 text-xs text-slate-600">{(row.category as string) ?? '—'}</td>}
+                {kind !== 'units' && <td className="px-3 py-2 text-xs text-slate-600">{(row.defaultUnit as string) ?? '—'}</td>}
+                {kind !== 'units' && (
+                  <td className="px-3 py-2">
+                    {(row.isActive as boolean) ? (
+                      <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] text-emerald-700">Đang dùng</span>
+                    ) : (
+                      <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-500">Tạm tắt</span>
+                    )}
+                  </td>
+                )}
+                <td className="px-3 py-2">
+                  <div className="flex justify-end gap-1">
+                    <button
+                      onClick={() => openEdit(row)}
+                      title="Sửa"
+                      className="rounded p-1 text-slate-500 hover:bg-slate-100 hover:text-brand-600"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (confirm(`Xóa "${row.name}"?`)) remove.mutate(row.id)
+                      }}
+                      title="Xóa"
+                      className="rounded p-1 text-slate-500 hover:bg-slate-100 hover:text-red-600"
+                      disabled={remove.isPending}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={`${isEdit ? 'Sửa' : 'Thêm'} ${config.label.toLowerCase()}`}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
+            <Button
+              onClick={(e: FormEvent) => { e.preventDefault(); save.mutate() }}
+              disabled={save.isPending}
+            >
+              {save.isPending ? 'Đang lưu…' : (isEdit ? 'Lưu' : 'Thêm')}
+            </Button>
+          </>
+        }
+      >
+        <form
+          onSubmit={(e: FormEvent) => { e.preventDefault(); save.mutate() }}
+          className="grid grid-cols-2 gap-3"
+        >
+          {config.fields.map(f => (
+            <div
+              key={f.key}
+              className={cn('space-y-1', f.type === 'textarea' && 'col-span-2')}
+            >
+              <Label>{f.label}</Label>
+              {f.type === 'text' && (
+                <Input
+                  value={(form[f.key] as string) ?? ''}
+                  onChange={e => setForm(s => ({ ...s, [f.key]: e.target.value }))}
+                  placeholder={f.placeholder}
+                  required={f.required}
+                />
+              )}
+              {f.type === 'textarea' && (
+                <Textarea
+                  rows={3}
+                  value={(form[f.key] as string) ?? ''}
+                  onChange={e => setForm(s => ({ ...s, [f.key]: e.target.value }))}
+                />
+              )}
+              {f.type === 'checkbox' && (
+                <div className="flex items-center gap-2 pt-2">
+                  <input
+                    type="checkbox"
+                    checked={!!form[f.key]}
+                    onChange={e => setForm(s => ({ ...s, [f.key]: e.target.checked }))}
+                    className="h-4 w-4 accent-brand-600"
+                  />
+                  <span className="text-sm text-slate-600">{f.label}</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </form>
+      </Dialog>
+    </div>
+  )
+}
+
+function buildBody(kind: Kind, form: Record<string, unknown>): Record<string, unknown> {
+  // Build payload tương ứng BE Create/Update command — strip empty strings → null
+  const fields = KIND_CONFIG[kind].fields.map(f => f.key)
+  const body: Record<string, unknown> = {}
+  for (const k of fields) {
+    const v = form[k]
+    if (v === '' || v === undefined) body[k] = null
+    else body[k] = v
+  }
+  return body
+}

fe-user/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-user/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-user/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>
+  )
+}