[CLAUDE] Phase3: Workflow MVP — 9-phase state machine + code gen + FE Inbox/Detail

Backend Contracts domain (5 entities):
- Contract aggregate: Phase (9 enum), SlaDeadline, MaHopDong, BypassProcurementAndCCM, DraftData, SlaWarningSent
- ContractApproval: FromPhase → ToPhase, ApproverUserId (null = system auto-approve), Decision, Comment
- ContractComment: thread theo Phase current
- ContractAttachment: FileName + StoragePath + Purpose (DraftExport/ScannedSigned/SealedCopy)
- ContractCodeSequence: Prefix PK + LastSeq — atomic gen

EF configs:
- Unique MaHopDong filtered [MaHopDong] IS NOT NULL
- Indexes: Phase+IsDeleted, SupplierId, ProjectId, SlaDeadline, ContractId+ApprovedAt, ContractId+CreatedAt
- Cascade delete Approvals/Comments/Attachments khi Contract xoa
- Query filter IsDeleted
- Migration AddContractsWorkflow (DB 19 tables)

Workflow service:
- IContractWorkflowService.TransitionAsync:
  - Adjacency check qua Transitions Dict<(from,to), roles[]> (12 transitions)
  - Role guard: user phai co role ∈ allowed
  - Admin bypass (role Admin pass moi check)
  - System bypass (userId=null + Decision=AutoApprove → cho SLA job sau nay)
  - Bypass CCM: BypassProcurementAndCCM=true cho phep DangInKy → DangTrinhKy skip phase 6
  - Gen ma HD khi chuyen DangDongDau (idempotent — khong gen lai neu da co)
  - Reset SlaDeadline = UtcNow + PhaseSla
  - Insert ContractApproval row

Code generator (RG-001):
- 7 format theo ContractType: HDTP / HDGK / NCC / HDDV / MB + 2 framework (year prefix)
- BeginTransactionAsync(Serializable) + ContractCodeSequences UPSERT → atomic
- Idempotent: neu MaHopDong da co thi skip

CQRS (8 feature, ContractFeatures.cs):
- CreateContractCommand + Validator + Handler (set SlaDeadline = +7d)
- UpdateContractDraftCommand (chi khi Phase=DangSoanThao)
- TransitionContractCommand (delegate → WorkflowService)
- AddCommentCommand (phase = hien tai)
- ListContractsQuery (PagedResult + filter phase/supplier/project/search)
- GetMyInboxQuery (map Phase → actor roles, filter theo role user)
- GetContractQuery (detail + approvals + comments + attachments + resolve user names)
- DeleteContractCommand (soft, block > DangInKy)

Controller:
- ContractsController 8 endpoint: GET list/inbox/detail, POST create/transition/comment, PUT update, DELETE

Frontend fe-admin (2 page moi):
- types/contracts.ts: ContractPhase const + Label + Color maps + types
- components/PhaseBadge.tsx
- pages/contracts/ContractsListPage.tsx: filter phase + search + click → detail
- pages/contracts/ContractDetailPage.tsx: 2-col layout (info+comments | timeline), action dialog select target phase + comment

Frontend fe-user (4 page moi + 14 file shared):
- cp 14 file shared tu fe-admin (menuKeys, types/*, DataTable, PhaseBadge, Dialog, Textarea, Select, apiError, usePermission, PermissionGuard)
- AuthContext update: load menu tu /menus/me + cache
- Layout: menu fixed 3 muc + user info + roles display
- InboxPage: list HD cho role user xu ly (sort theo SLA)
- ContractCreatePage: form chon loai + template + NCC + du an + gia tri + bypass CDT
- ContractDetailPage: duplicate fe-admin pattern (convention)
- MyContractsPage: list HD cua toi
- App.tsx: 4 route moi

E2E verified:
- Setup Supplier + Project
- POST /contracts → 201 + phase=2
- POST /contracts/{id}/transitions x7 → di het 9 phase
- Final: MaHopDong = "FLOCK 01/HĐGK/SOL&PVL2026/01" dung format RG-001
- Approvals: 7 rows audit day du

Docs:
- .claude/skills/contract-workflow/SKILL.md: placeholder → full spec voi state machine, SLA table, role matrix, 7 code format, code pointers, API, E2E workflow, pitfalls
- docs/changelog/sessions/2026-04-21-1330-phase3-workflow.md: session log
- docs/STATUS.md: Phase 3 MVP done, next Phase 4
- docs/HANDOFF.md: update phase status + file tree + commit log + testing points
- docs/changelog/migration-todos.md: tick Phase 3 MVP items + add iteration 2 list

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

fe-user/src/App.tsx

@@ -5,6 +5,9 @@ import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Layout } from '@/components/Layout'
 import { LoginPage } from '@/pages/LoginPage'
 import { InboxPage } from '@/pages/InboxPage'
+import { ContractCreatePage } from '@/pages/contracts/ContractCreatePage'
+import { ContractDetailPage } from '@/pages/contracts/ContractDetailPage'
+import { MyContractsPage } from '@/pages/contracts/MyContractsPage'
 
 function App() {
   return (
@@ -20,12 +23,15 @@ function App() {
             }
           >
             <Route path="/inbox" element={<InboxPage />} />
+            <Route path="/contracts/new" element={<ContractCreatePage />} />
+            <Route path="/contracts/:id" element={<ContractDetailPage />} />
+            <Route path="/my-contracts" element={<MyContractsPage />} />
             <Route path="/" element={<Navigate to="/inbox" 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.
                 </div>
               }
             />

fe-user/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-user/src/components/Layout.tsx

@@ -1,12 +1,20 @@
 import { Link, NavLink, Outlet } from 'react-router-dom'
-import { LogOut, Inbox, FileText, Plus } from 'lucide-react'
+import { LogOut, Circle, Inbox, FileText, Plus, type LucideIcon } from 'lucide-react'
+import * as Icons from 'lucide-react'
 import { useAuth } from '@/contexts/AuthContext'
 import { cn } from '@/lib/cn'
 
-const menuItems = [
-  { to: '/inbox', label: 'Chờ xử lý', icon: Inbox },
-  { to: '/my-contracts', label: 'HĐ của tôi', icon: FileText },
+function getIcon(name: string | null): LucideIcon {
+  if (!name) return Circle
+  const cand = (Icons as unknown as Record<string, LucideIcon>)[name]
+  return cand ?? Circle
+}
+
+// Menu fixed cho fe-user (không show tree động vì user-flow đơn giản)
+const USER_MENU = [
+  { to: '/inbox', label: 'HĐ chờ xử lý', icon: Inbox },
   { to: '/contracts/new', label: 'Tạo HĐ mới', icon: Plus },
+  { to: '/my-contracts', label: 'HĐ của tôi', icon: FileText },
 ]
 
 export function Layout() {
@@ -21,28 +29,32 @@ export function Layout() {
           </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>
-          ))}
+          {USER_MENU.map(item => {
+            const Icon = item.icon ?? getIcon(null)
+            return (
+              <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',
+                  )
+                }
+              >
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </NavLink>
+            )
+          })}
         </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>
+            {user && user.roles.length > 0 && (
+              <div className="mt-1 font-mono text-[10px]">{user.roles.join(', ')}</div>
+            )}
           </div>
           <button
             onClick={logout}

fe-user/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-user/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-user/src/components/PhaseBadge.tsx

@@ -0,0 +1,10 @@
+import { cn } from '@/lib/cn'
+import { ContractPhaseColor, ContractPhaseLabel } from '@/types/contracts'
+
+export function PhaseBadge({ phase, className }: { phase: number; className?: string }) {
+  return (
+    <span className={cn('inline-flex rounded-full px-2 py-0.5 text-xs font-medium', ContractPhaseColor[phase], className)}>
+      {ContractPhaseLabel[phase]}
+    </span>
+  )
+}

fe-user/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-user/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-user/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-user/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-user-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
+    }
+  }
+
   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-user/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-user/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-user/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-user/src/pages/InboxPage.tsx

@@ -1,18 +1,64 @@
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { Inbox } from 'lucide-react'
+import { PageHeader } from '@/components/PageHeader'
+import { DataTable, type Column } from '@/components/DataTable'
+import { PhaseBadge } from '@/components/PhaseBadge'
 import { useAuth } from '@/contexts/AuthContext'
+import { api } from '@/lib/api'
+import type { ContractListItem } from '@/types/contracts'
+import { ContractTypeLabel } from '@/types/forms'
+
+const fmtMoney = (v: number) => v.toLocaleString('vi-VN')
+const fmtSla = (s: string | null) => {
+  if (!s) return '—'
+  const ms = new Date(s).getTime() - Date.now()
+  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((ms % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  if (ms < 0) return <span className="text-red-600">Quá hạn</span>
+  if (days > 0) return `còn ${days}d ${hours}h`
+  return <span className="text-amber-600">còn {hours}h</span>
+}
 
 export function InboxPage() {
+  const navigate = useNavigate()
   const { user } = useAuth()
 
+  const list = useQuery({
+    queryKey: ['inbox'],
+    queryFn: async () => (await api.get<ContractListItem[]>('/contracts/inbox')).data,
+  })
+
+  const columns: Column<ContractListItem>[] = [
+    { key: 'maHopDong', header: 'Mã HĐ', width: 'w-48', render: c => <span className="font-mono text-xs">{c.maHopDong ?? '—'}</span> },
+    { key: 'tenHopDong', header: 'Tên HĐ', render: c => c.tenHopDong ?? '—' },
+    { key: 'type', header: 'Loại', width: 'w-32', render: c => ContractTypeLabel[c.type] ?? '—' },
+    { key: 'phase', header: 'Phase hiện tại', width: 'w-36', render: c => <PhaseBadge phase={c.phase} /> },
+    { key: 'supplierName', header: 'NCC', render: c => c.supplierName },
+    { key: 'giaTri', header: 'Giá trị', align: 'right', width: 'w-32', render: c => fmtMoney(c.giaTri) },
+    { key: 'slaDeadline', header: 'SLA', width: 'w-32', render: c => fmtSla(c.slaDeadline) },
+  ]
+
   return (
-    <div className="p-8">
-      <h1 className="text-2xl font-bold text-slate-900">Hộp thư — HĐ chờ xử lý</h1>
-      <p className="mt-2 text-slate-600">
-        Xin chào <span className="font-medium">{user?.fullName}</span>. Vai trò:{' '}
-        <span className="font-mono text-sm">{user?.roles.join(', ')}</span>
-      </p>
-      <div className="mt-6 rounded-lg border border-slate-200 bg-white p-6 text-sm text-slate-500">
-        Danh sách HĐ chờ role của bạn xử lý sẽ hiển thị ở đây (Phase 3).
-      </div>
+    <div className="p-6">
+      <PageHeader
+        title={
+          <span className="flex items-center gap-2">
+            <Inbox className="h-5 w-5" />
+            Hộp thư
+          </span>
+        }
+        description={`HĐ chờ vai trò ${user?.roles.join(', ') ?? ''} xử lý. Click row để xem chi tiết.`}
+      />
+
+      <DataTable
+        columns={columns}
+        rows={list.data ?? []}
+        getRowKey={c => c.id}
+        isLoading={list.isLoading}
+        empty="Không có HĐ nào chờ bạn xử lý."
+        onRowClick={c => navigate(`/contracts/${c.id}`)}
+      />
     </div>
   )
 }

fe-user/src/pages/contracts/ContractCreatePage.tsx

@@ -0,0 +1,149 @@
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+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 { Select } from '@/components/ui/Select'
+import { Textarea } from '@/components/ui/Textarea'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import type { Paged, Project, Supplier } from '@/types/master'
+import type { ContractTemplate } from '@/types/forms'
+import { ContractTypeLabel } from '@/types/forms'
+
+export function ContractCreatePage() {
+  const navigate = useNavigate()
+  const [type, setType] = useState(2)
+  const [supplierId, setSupplierId] = useState('')
+  const [projectId, setProjectId] = useState('')
+  const [templateId, setTemplateId] = useState('')
+  const [giaTri, setGiaTri] = useState('')
+  const [tenHopDong, setTenHopDong] = useState('')
+  const [noiDung, setNoiDung] = useState('')
+  const [bypass, setBypass] = useState(false)
+
+  const suppliers = useQuery({
+    queryKey: ['suppliers-all'],
+    queryFn: async () => (await api.get<Paged<Supplier>>('/suppliers', { params: { page: 1, pageSize: 200 } })).data.items,
+  })
+
+  const projects = useQuery({
+    queryKey: ['projects-all'],
+    queryFn: async () => (await api.get<Paged<Project>>('/projects', { params: { page: 1, pageSize: 200 } })).data.items,
+  })
+
+  const templates = useQuery({
+    queryKey: ['templates-by-type', type],
+    queryFn: async () => (await api.get<ContractTemplate[]>('/forms/templates', { params: { type } })).data,
+  })
+
+  const create = useMutation({
+    mutationFn: async () => {
+      const res = await api.post<{ id: string }>('/contracts', {
+        type: Number(type),
+        supplierId,
+        projectId,
+        departmentId: null,
+        templateId: templateId || null,
+        giaTri: giaTri ? Number(giaTri) : 0,
+        tenHopDong: tenHopDong || null,
+        noiDung: noiDung || null,
+        bypassProcurementAndCCM: bypass,
+        draftData: null,
+      })
+      return res.data.id
+    },
+    onSuccess: id => {
+      toast.success('Đã tạo HĐ draft')
+      navigate(`/contracts/${id}`)
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  function submit(e: FormEvent) {
+    e.preventDefault()
+    if (!supplierId || !projectId) {
+      toast.error('Chọn NCC và dự án')
+      return
+    }
+    create.mutate()
+  }
+
+  return (
+    <div className="p-6">
+      <PageHeader title="Tạo hợp đồng mới" description="Điền thông tin cơ bản. Sau đó có thể bổ sung + submit lên phase góp ý." />
+
+      <form onSubmit={submit} className="max-w-3xl space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <Label>Loại HĐ *</Label>
+            <Select value={type} onChange={e => setType(Number(e.target.value))}>
+              {Object.entries(ContractTypeLabel).map(([v, l]) => (
+                <option key={v} value={v}>{l}</option>
+              ))}
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Template (optional)</Label>
+            <Select value={templateId} onChange={e => setTemplateId(e.target.value)}>
+              <option value="">— Chưa chọn —</option>
+              {templates.data?.filter(t => t.isActive).map(t => (
+                <option key={t.id} value={t.id}>{t.formCode} — {t.name}</option>
+              ))}
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>NCC *</Label>
+            <Select value={supplierId} onChange={e => setSupplierId(e.target.value)} required>
+              <option value="">— Chọn —</option>
+              {suppliers.data?.map(s => (
+                <option key={s.id} value={s.id}>{s.code} — {s.name}</option>
+              ))}
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Dự án *</Label>
+            <Select value={projectId} onChange={e => setProjectId(e.target.value)} required>
+              <option value="">— Chọn —</option>
+              {projects.data?.map(p => (
+                <option key={p.id} value={p.id}>{p.code} — {p.name}</option>
+              ))}
+            </Select>
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Tên HĐ</Label>
+            <Input value={tenHopDong} onChange={e => setTenHopDong(e.target.value)} placeholder="vd: HĐ giao khoán nhân công dự án FLOCK 01" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Giá trị (VND)</Label>
+            <Input type="number" value={giaTri} onChange={e => setGiaTri(e.target.value)} />
+          </div>
+          <div className="flex items-end gap-2 pb-2">
+            <input
+              type="checkbox"
+              id="bypass"
+              checked={bypass}
+              onChange={e => setBypass(e.target.checked)}
+              className="h-4 w-4 accent-brand-600"
+            />
+            <Label htmlFor="bypass" className="cursor-pointer">HĐ với Chủ đầu tư (bypass CCM)</Label>
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <Label>Nội dung / ghi chú</Label>
+            <Textarea rows={4} value={noiDung} onChange={e => setNoiDung(e.target.value)} />
+          </div>
+        </div>
+
+        <div className="flex gap-2 pt-2">
+          <Button type="button" variant="outline" onClick={() => navigate(-1)}>Hủy</Button>
+          <Button type="submit" disabled={create.isPending}>
+            {create.isPending ? 'Đang tạo…' : 'Tạo HĐ draft'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}

fe-user/src/pages/contracts/ContractDetailPage.tsx

@@ -0,0 +1,241 @@
+// Fe-user version identical with fe-admin ContractDetailPage.
+// Duplicate có chủ đích (theo convention dự án).
+import { useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate, useParams } from 'react-router-dom'
+import { ArrowRight, CheckCircle2, MessageSquare, Clock, ArrowLeft, XCircle } from 'lucide-react'
+import { toast } from 'sonner'
+import { PageHeader } from '@/components/PageHeader'
+import { PhaseBadge } from '@/components/PhaseBadge'
+import { Button } from '@/components/ui/Button'
+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 {
+  ApprovalDecision,
+  ContractPhase,
+  ContractPhaseLabel,
+  type ContractDetail,
+} from '@/types/contracts'
+import { ContractTypeLabel } from '@/types/forms'
+
+const fmt = (s: string) => new Date(s).toLocaleString('vi-VN')
+const fmtMoney = (v: number) => v.toLocaleString('vi-VN') + ' VND'
+
+const NEXT_PHASES: Record<number, number[]> = {
+  [ContractPhase.DangSoanThao]: [ContractPhase.DangGopY, ContractPhase.TuChoi],
+  [ContractPhase.DangGopY]: [ContractPhase.DangDamPhan, ContractPhase.DangSoanThao],
+  [ContractPhase.DangDamPhan]: [ContractPhase.DangInKy],
+  [ContractPhase.DangInKy]: [ContractPhase.DangKiemTraCCM, ContractPhase.DangTrinhKy],
+  [ContractPhase.DangKiemTraCCM]: [ContractPhase.DangTrinhKy, ContractPhase.DangSoanThao],
+  [ContractPhase.DangTrinhKy]: [ContractPhase.DangDongDau, ContractPhase.DangSoanThao],
+  [ContractPhase.DangDongDau]: [ContractPhase.DaPhatHanh],
+}
+
+export function ContractDetailPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const [actionOpen, setActionOpen] = useState(false)
+  const [targetPhase, setTargetPhase] = useState<number>(0)
+  const [decision, setDecision] = useState<number>(ApprovalDecision.Approve)
+  const [comment, setComment] = useState('')
+  const [commentInput, setCommentInput] = useState('')
+
+  const detail = useQuery({
+    queryKey: ['contract', id],
+    queryFn: async () => (await api.get<ContractDetail>(`/contracts/${id}`)).data,
+    enabled: !!id,
+  })
+
+  const transition = useMutation({
+    mutationFn: async () => {
+      await api.post(`/contracts/${id}/transitions`, { targetPhase, decision, comment: comment || null })
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['contract', id] })
+      qc.invalidateQueries({ queryKey: ['inbox'] })
+      toast.success('Đã chuyển phase')
+      setActionOpen(false)
+      setComment('')
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  const addComment = useMutation({
+    mutationFn: async (content: string) => {
+      await api.post(`/contracts/${id}/comments`, { content })
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['contract', id] })
+      setCommentInput('')
+      toast.success('Đã gửi')
+    },
+    onError: err => toast.error(getErrorMessage(err)),
+  })
+
+  if (detail.isLoading) return <div className="p-8 text-slate-500">Đang tải…</div>
+  if (!detail.data) return <div className="p-8 text-slate-500">Không tìm thấy HĐ.</div>
+  const c = detail.data
+
+  const availableTargets = NEXT_PHASES[c.phase] ?? []
+
+  function openAction(decisionType: number) {
+    const targets = NEXT_PHASES[c.phase] ?? []
+    const defaultTarget = decisionType === ApprovalDecision.Reject
+      ? targets.find(t => t === ContractPhase.DangSoanThao) ?? targets[0]
+      : targets[0]
+    setTargetPhase(defaultTarget)
+    setDecision(decisionType)
+    setActionOpen(true)
+  }
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title={
+          <span className="flex items-center gap-3">
+            <button onClick={() => navigate(-1)} className="text-slate-400 hover:text-slate-700">
+              <ArrowLeft className="h-5 w-5" />
+            </button>
+            {c.tenHopDong ?? 'HĐ chưa đặt tên'}
+          </span>
+        }
+        description={
+          <span className="flex items-center gap-3">
+            <span className="font-mono text-xs">{c.maHopDong ?? '(chưa có mã)'}</span>
+            <PhaseBadge phase={c.phase} />
+          </span>
+        }
+        actions={
+          <div className="flex gap-2">
+            {availableTargets.length > 0 && (
+              <>
+                <Button variant="outline" onClick={() => openAction(ApprovalDecision.Reject)}>
+                  <XCircle className="h-4 w-4" />
+                  Yêu cầu sửa
+                </Button>
+                <Button onClick={() => openAction(ApprovalDecision.Approve)}>
+                  <CheckCircle2 className="h-4 w-4" />
+                  Duyệt → tiếp
+                </Button>
+              </>
+            )}
+          </div>
+        }
+      />
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="space-y-4 lg:col-span-2">
+          <section className="rounded-lg border border-slate-200 bg-white p-5">
+            <h2 className="mb-3 text-sm font-semibold text-slate-700">Thông tin HĐ</h2>
+            <dl className="grid grid-cols-2 gap-3 text-sm">
+              <div><dt className="text-slate-500">Loại</dt><dd>{ContractTypeLabel[c.type] ?? '—'}</dd></div>
+              <div><dt className="text-slate-500">Giá trị</dt><dd>{fmtMoney(c.giaTri)}</dd></div>
+              <div><dt className="text-slate-500">NCC</dt><dd>{c.supplierName}</dd></div>
+              <div><dt className="text-slate-500">Dự án</dt><dd>{c.projectName}</dd></div>
+              <div><dt className="text-slate-500">Người soạn</dt><dd>{c.drafterName ?? '—'}</dd></div>
+              <div><dt className="text-slate-500">SLA</dt><dd>{c.slaDeadline ? fmt(c.slaDeadline) : '—'}</dd></div>
+            </dl>
+            {c.noiDung && (
+              <div className="mt-3">
+                <dt className="text-sm text-slate-500">Nội dung</dt>
+                <dd className="mt-1 whitespace-pre-wrap text-sm text-slate-700">{c.noiDung}</dd>
+              </div>
+            )}
+          </section>
+
+          <section className="rounded-lg border border-slate-200 bg-white p-5">
+            <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-700">
+              <MessageSquare className="h-4 w-4" />
+              Góp ý ({c.comments.length})
+            </h2>
+            <div className="space-y-3">
+              {c.comments.length === 0 && <div className="text-sm text-slate-400">Chưa có góp ý.</div>}
+              {c.comments.map(cm => (
+                <div key={cm.id} className="rounded-md border border-slate-100 p-3">
+                  <div className="flex items-center justify-between text-xs text-slate-500">
+                    <span className="font-medium text-slate-700">{cm.userName}</span>
+                    <span>{fmt(cm.createdAt)} · {ContractPhaseLabel[cm.phase]}</span>
+                  </div>
+                  <div className="mt-1 whitespace-pre-wrap text-sm text-slate-700">{cm.content}</div>
+                </div>
+              ))}
+            </div>
+            <form
+              className="mt-4 flex gap-2"
+              onSubmit={(e: FormEvent) => {
+                e.preventDefault()
+                if (!commentInput.trim()) return
+                addComment.mutate(commentInput.trim())
+              }}
+            >
+              <Textarea rows={2} placeholder="Thêm góp ý…" value={commentInput} onChange={e => setCommentInput(e.target.value)} />
+              <Button type="submit" disabled={addComment.isPending || !commentInput.trim()}>
+                Gửi
+              </Button>
+            </form>
+          </section>
+        </div>
+
+        <aside>
+          <section className="rounded-lg border border-slate-200 bg-white p-5">
+            <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-700">
+              <Clock className="h-4 w-4" />
+              Lịch sử ({c.approvals.length})
+            </h2>
+            <ol className="space-y-3">
+              {c.approvals.length === 0 && <li className="text-sm text-slate-400">Chưa có.</li>}
+              {c.approvals.map(a => (
+                <li key={a.id} className="flex gap-3">
+                  <div className="mt-1 h-2 w-2 rounded-full bg-brand-500" />
+                  <div className="flex-1 space-y-0.5 text-sm">
+                    <div className="flex items-center gap-1">
+                      <PhaseBadge phase={a.fromPhase} className="text-[10px]" />
+                      <ArrowRight className="h-3 w-3 text-slate-400" />
+                      <PhaseBadge phase={a.toPhase} className="text-[10px]" />
+                    </div>
+                    <div className="text-slate-700">{a.approverName ?? 'Hệ thống'}</div>
+                    <div className="text-xs text-slate-500">{fmt(a.approvedAt)}</div>
+                    {a.comment && <div className="mt-1 rounded bg-slate-50 px-2 py-1 text-xs text-slate-600">{a.comment}</div>}
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </section>
+        </aside>
+      </div>
+
+      <Dialog
+        open={actionOpen}
+        onClose={() => setActionOpen(false)}
+        title={decision === ApprovalDecision.Reject ? 'Yêu cầu sửa' : 'Chuyển phase tiếp'}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setActionOpen(false)}>Hủy</Button>
+            <Button onClick={() => transition.mutate()} disabled={transition.isPending || !targetPhase}>
+              {transition.isPending ? 'Đang xử lý…' : 'Xác nhận'}
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-slate-700">Chuyển đến phase</label>
+            <Select value={targetPhase} onChange={e => setTargetPhase(Number(e.target.value))}>
+              {availableTargets.map(p => (
+                <option key={p} value={p}>{ContractPhaseLabel[p]}</option>
+              ))}
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-slate-700">Ghi chú (optional)</label>
+            <Textarea rows={3} value={comment} onChange={e => setComment(e.target.value)} />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  )
+}

fe-user/src/pages/contracts/MyContractsPage.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { FileText } from 'lucide-react'
+import { PageHeader } from '@/components/PageHeader'
+import { DataTable, type Column } from '@/components/DataTable'
+import { PhaseBadge } from '@/components/PhaseBadge'
+import { api } from '@/lib/api'
+import type { Paged } from '@/types/master'
+import type { ContractListItem } from '@/types/contracts'
+import { ContractTypeLabel } from '@/types/forms'
+
+const fmtMoney = (v: number) => v.toLocaleString('vi-VN')
+
+export function MyContractsPage() {
+  const navigate = useNavigate()
+
+  const list = useQuery({
+    queryKey: ['my-contracts'],
+    queryFn: async () => (await api.get<Paged<ContractListItem>>('/contracts', { params: { page: 1, pageSize: 100 } })).data,
+  })
+
+  const columns: Column<ContractListItem>[] = [
+    { key: 'maHopDong', header: 'Mã HĐ', width: 'w-48', render: c => <span className="font-mono text-xs">{c.maHopDong ?? '—'}</span> },
+    { key: 'tenHopDong', header: 'Tên', render: c => c.tenHopDong ?? '—' },
+    { key: 'type', header: 'Loại', width: 'w-32', render: c => ContractTypeLabel[c.type] ?? '—' },
+    { key: 'phase', header: 'Phase', width: 'w-36', render: c => <PhaseBadge phase={c.phase} /> },
+    { key: 'supplierName', header: 'NCC', render: c => c.supplierName },
+    { key: 'giaTri', header: 'Giá trị', align: 'right', width: 'w-32', render: c => fmtMoney(c.giaTri) },
+  ]
+
+  return (
+    <div className="p-6">
+      <PageHeader
+        title={
+          <span className="flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            HĐ của tôi
+          </span>
+        }
+        description="Danh sách HĐ bạn đã tạo hoặc tham gia."
+      />
+
+      <DataTable
+        columns={columns}
+        rows={list.data?.items ?? []}
+        getRowKey={c => c.id}
+        isLoading={list.isLoading}
+        empty="Bạn chưa tạo HĐ nào."
+        onRowClick={c => navigate(`/contracts/${c.id}`)}
+      />
+    </div>
+  )
+}

fe-user/src/types/contracts.ts

@@ -0,0 +1,122 @@
+export const ContractPhase = {
+  DangChon: 1,
+  DangSoanThao: 2,
+  DangGopY: 3,
+  DangDamPhan: 4,
+  DangInKy: 5,
+  DangKiemTraCCM: 6,
+  DangTrinhKy: 7,
+  DangDongDau: 8,
+  DaPhatHanh: 9,
+  TuChoi: 99,
+} as const
+
+export type ContractPhase = typeof ContractPhase[keyof typeof ContractPhase]
+
+export const ContractPhaseLabel: Record<number, string> = {
+  1: 'Đang chọn NCC',
+  2: 'Đang soạn thảo',
+  3: 'Đang góp ý',
+  4: 'Đang đàm phán',
+  5: 'Đang in ký',
+  6: 'CCM kiểm tra',
+  7: 'Đang trình ký',
+  8: 'Đang đóng dấu',
+  9: 'Đã phát hành',
+  99: 'Từ chối',
+}
+
+export const ContractPhaseColor: Record<number, string> = {
+  1: 'bg-slate-100 text-slate-700',
+  2: 'bg-blue-100 text-blue-700',
+  3: 'bg-amber-100 text-amber-700',
+  4: 'bg-orange-100 text-orange-700',
+  5: 'bg-purple-100 text-purple-700',
+  6: 'bg-indigo-100 text-indigo-700',
+  7: 'bg-fuchsia-100 text-fuchsia-700',
+  8: 'bg-pink-100 text-pink-700',
+  9: 'bg-emerald-100 text-emerald-700',
+  99: 'bg-red-100 text-red-700',
+}
+
+export const ApprovalDecision = {
+  Pending: 0,
+  Approve: 1,
+  Reject: 2,
+  AutoApprove: 3,
+} as const
+
+export type ApprovalDecision = typeof ApprovalDecision[keyof typeof ApprovalDecision]
+
+export type ContractListItem = {
+  id: string
+  maHopDong: string | null
+  tenHopDong: string | null
+  type: number
+  phase: number
+  supplierId: string
+  supplierName: string
+  projectId: string
+  projectName: string
+  giaTri: number
+  slaDeadline: string | null
+  createdAt: string
+}
+
+export type ContractApproval = {
+  id: string
+  fromPhase: number
+  toPhase: number
+  approverUserId: string | null
+  approverName: string | null
+  decision: number
+  comment: string | null
+  approvedAt: string
+}
+
+export type ContractComment = {
+  id: string
+  userId: string
+  userName: string
+  phase: number
+  content: string
+  createdAt: string
+}
+
+export type ContractAttachment = {
+  id: string
+  fileName: string
+  storagePath: string
+  fileSize: number
+  contentType: string
+  purpose: number
+  note: string | null
+  createdAt: string
+}
+
+export type ContractDetail = {
+  id: string
+  maHopDong: string | null
+  tenHopDong: string | null
+  noiDung: string | null
+  type: number
+  phase: number
+  supplierId: string
+  supplierName: string
+  projectId: string
+  projectName: string
+  departmentId: string | null
+  departmentName: string | null
+  drafterUserId: string | null
+  drafterName: string | null
+  templateId: string | null
+  giaTri: number
+  bypassProcurementAndCCM: boolean
+  slaDeadline: string | null
+  draftData: string | null
+  createdAt: string
+  updatedAt: string | null
+  approvals: ContractApproval[]
+  comments: ContractComment[]
+  attachments: ContractAttachment[]
+}

fe-user/src/types/forms.ts

@@ -0,0 +1,21 @@
+export type ContractTemplate = {
+  id: string
+  formCode: string
+  name: string
+  contractType: number | null
+  fileName: string
+  format: 'docx' | 'xlsx'
+  fieldSpec: string | null
+  description: string | null
+  isActive: boolean
+}
+
+export const ContractTypeLabel: Record<number, string> = {
+  1: 'HĐ Thầu phụ',
+  2: 'HĐ Giao khoán',
+  3: 'HĐ Nhà cung cấp',
+  4: 'HĐ Dịch vụ',
+  5: 'HĐ Mua bán',
+  6: 'HĐ Nguyên tắc NCC',
+  7: 'HĐ Nguyên tắc Dịch vụ',
+}

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