+
+
+
+
+
+ )
+}
diff --git a/fe-admin/src/pages/hrm/EmployeesListPage.tsx b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
new file mode 100644
index 0000000..807aee7
--- /dev/null
+++ b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
@@ -0,0 +1,573 @@
+// List + Detail Hồ sơ Nhân sự (HRM) — 2-panel: filter sidebar | list table + inline detail.
+// Phase 10.1 G-H1 Phase 1 ULTRA-MINIMAL scope (S33 Task 5):
+// - Read-only mọi section (Edit Header defer Phase 1.5)
+// - 6 section render inline trong right panel qua `Tạo Hồ sơ Nhân sự mới
+` HTML native
+// - NO separate DetailTabs component, NO satellite CRUD form
+// Pattern 16-bis 4-place mirror cross-app (4th reinforcement S33).
+// URL params: id (selected), q (search), status, deptId
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { toast } from 'sonner'
+import { UserCircle2, Search, Plus, X } from 'lucide-react'
+import { Input } from '@/components/ui/Input'
+import { Select } from '@/components/ui/Select'
+import { Button } from '@/components/ui/Button'
+import { EmptyState } from '@/components/EmptyState'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { cn } from '@/lib/cn'
+import type { Paged, Department } from '@/types/master'
+import {
+ EmployeeStatusColor,
+ EmployeeStatusLabel,
+ GenderLabel,
+ MaritalStatusLabel,
+ EmployeeTypeLabel,
+ DegreeLevelLabel,
+ EducationModeLabel,
+ GradeLevelLabel,
+ FamilyRelationKindLabel,
+ SkillKind,
+ SkillKindLabel,
+ EmployeeDocumentTypeLabel,
+ type EmployeeListItem,
+ type EmployeeDetail,
+} from '@/types/employee'
+
+const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleDateString('vi-VN') : '—')
+const fmtDateTime = (s: string | null) => (s ? new Date(s).toLocaleString('vi-VN') : '—')
+
+export function EmployeesListPage() {
+ const navigate = useNavigate()
+ const qc = useQueryClient()
+ const [sp, setSp] = useSearchParams()
+ const search = sp.get('q') ?? ''
+ const statusFilter = sp.get('status') ?? ''
+ const deptFilter = sp.get('deptId') ?? ''
+ const selectedId = sp.get('id')
+
+ const [localSearch, setLocalSearch] = useState(search)
+
+ const departments = useQuery({
+ queryKey: ['departments-all-hrm'],
+ queryFn: async () =>
+ (await api.get>('/departments', { params: { page: 1, pageSize: 200 } })).data.items,
+ })
+
+ const list = useQuery({
+ queryKey: ['employees-list', { search, statusFilter, deptFilter }],
+ queryFn: async () => {
+ const res = await api.get>('/employees', {
+ params: {
+ pageSize: 100,
+ search: search || undefined,
+ status: statusFilter || undefined,
+ departmentId: deptFilter || undefined,
+ },
+ })
+ return res.data
+ },
+ })
+
+ const detail = useQuery({
+ queryKey: ['employee-detail', selectedId],
+ queryFn: async () => (await api.get(`/employees/${selectedId}`)).data,
+ enabled: !!selectedId,
+ })
+
+ const del = useMutation({
+ mutationFn: async (id: string) => api.delete(`/employees/${id}`),
+ onSuccess: () => {
+ toast.success('Đã xoá hồ sơ NV.')
+ setParam('id', null)
+ qc.invalidateQueries({ queryKey: ['employees-list'] })
+ },
+ onError: e => toast.error(getErrorMessage(e)),
+ })
+
+ function setParam(key: string, value: string | null) {
+ const next = new URLSearchParams(sp)
+ if (value == null || value === '') next.delete(key)
+ else next.set(key, value)
+ setSp(next, { replace: true })
+ }
+
+ function applySearch(e: React.FormEvent) {
+ e.preventDefault()
+ setParam('q', localSearch.trim() || null)
+ }
+
+ function resetFilters() {
+ setLocalSearch('')
+ setSp(new URLSearchParams(), { replace: true })
+ }
+
+ return (
+ = {
+ 1: 'Đang làm việc',
+ 2: 'Nghỉ phép',
+ 3: 'Đã nghỉ việc',
+}
+
+export const EmployeeStatusColor: Record = {
+ 1: 'bg-emerald-100 text-emerald-700',
+ 2: 'bg-amber-100 text-amber-700',
+ 3: 'bg-slate-100 text-slate-600',
+}
+
+export const Gender = {
+ Male: 1,
+ Female: 2,
+ Other: 3,
+} as const
+export type Gender = typeof Gender[keyof typeof Gender]
+
+export const GenderLabel: Record = {
+ 1: 'Nam',
+ 2: 'Nữ',
+ 3: 'Khác',
+}
+
+export const MaritalStatus = {
+ Single: 1,
+ Married: 2,
+ Divorced: 3,
+ Widowed: 4,
+} as const
+export type MaritalStatus = typeof MaritalStatus[keyof typeof MaritalStatus]
+
+export const MaritalStatusLabel: Record = {
+ 1: 'Độc thân',
+ 2: 'Đã kết hôn',
+ 3: 'Đã ly hôn',
+ 4: 'Goá',
+}
+
+export const EmployeeType = {
+ FullTime: 1,
+ PartTime: 2,
+ Intern: 3,
+ Contractor: 4,
+} as const
+export type EmployeeType = typeof EmployeeType[keyof typeof EmployeeType]
+
+export const EmployeeTypeLabel: Record = {
+ 1: 'Chính thức',
+ 2: 'Bán thời gian',
+ 3: 'Thực tập',
+ 4: 'Khoán việc',
+}
+
+export const DegreeLevel = {
+ College: 1,
+ Bachelor: 2,
+ Master: 3,
+ PhD: 4,
+} as const
+export type DegreeLevel = typeof DegreeLevel[keyof typeof DegreeLevel]
+
+export const DegreeLevelLabel: Record = {
+ 1: 'Cao đẳng',
+ 2: 'Đại học',
+ 3: 'Thạc sĩ',
+ 4: 'Tiến sĩ',
+}
+
+export const EducationMode = {
+ FullTime: 1,
+ PartTime: 2,
+ Distance: 3,
+} as const
+export type EducationMode = typeof EducationMode[keyof typeof EducationMode]
+
+export const EducationModeLabel: Record = {
+ 1: 'Chính quy',
+ 2: 'Tại chức',
+ 3: 'Từ xa',
+}
+
+export const GradeLevel = {
+ Average: 1,
+ Good: 2,
+ Excellent: 3,
+} as const
+export type GradeLevel = typeof GradeLevel[keyof typeof GradeLevel]
+
+export const GradeLevelLabel: Record = {
+ 1: 'Trung bình',
+ 2: 'Khá',
+ 3: 'Giỏi',
+}
+
+export const FamilyRelationKind = {
+ Father: 1,
+ Mother: 2,
+ Spouse: 3,
+ Child: 4,
+ Sibling: 5,
+ Other: 99,
+} as const
+export type FamilyRelationKind = typeof FamilyRelationKind[keyof typeof FamilyRelationKind]
+
+export const FamilyRelationKindLabel: Record = {
+ 1: 'Cha',
+ 2: 'Mẹ',
+ 3: 'Vợ/Chồng',
+ 4: 'Con',
+ 5: 'Anh/Chị/Em ruột',
+ 99: 'Khác',
+}
+
+export const SkillKind = {
+ Computer: 1,
+ Language: 2,
+ Other: 3,
+} as const
+export type SkillKind = typeof SkillKind[keyof typeof SkillKind]
+
+export const SkillKindLabel: Record = {
+ 1: 'Kỹ năng vi tính',
+ 2: 'Ngoại ngữ',
+ 3: 'Kỹ năng khác',
+}
+
+export const EmployeeDocumentType = {
+ IdCard: 1,
+ Passport: 2,
+ Degree: 3,
+ Certificate: 4,
+ LaborContract: 5,
+ Other: 99,
+} as const
+export type EmployeeDocumentType = typeof EmployeeDocumentType[keyof typeof EmployeeDocumentType]
+
+export const EmployeeDocumentTypeLabel: Record = {
+ 1: 'CMND/CCCD',
+ 2: 'Hộ chiếu',
+ 3: 'Bằng cấp',
+ 4: 'Chứng chỉ',
+ 5: 'HĐLĐ',
+ 99: 'Khác',
+}
+
+// ========== List item (paged) ==========
+
+export type EmployeeListItem = {
+ id: string
+ employeeCode: string
+ userId: string
+ fullName: string | null
+ email: string | null
+ departmentId: string | null
+ departmentName: string | null
+ status: number
+ phone: string | null
+ hireDate: string | null
+ createdAt: string
+ updatedAt: string | null
+}
+
+// ========== Satellite read DTOs (inline GetDetail bundle) ==========
+
+export type EmployeeWorkHistoryDto = {
+ id: string
+ companyName: string
+ companyAddress: string | null
+ industry: string | null
+ fromDate: string | null
+ toDate: string | null
+ jobTitle: string | null
+ jobDescription: string | null
+ resignReason: string | null
+}
+
+export type EmployeeEducationDto = {
+ id: string
+ schoolName: string
+ major: string | null
+ degreeLevel: number | null
+ educationMode: number | null
+ gradeLevel: number | null
+ fromDate: string | null
+ toDate: string | null
+ certificateIssueDate: string | null
+ notes: string | null
+}
+
+export type EmployeeFamilyRelationDto = {
+ id: string
+ fullName: string
+ relationship: number
+ birthYear: number | null
+ occupation: string | null
+ currentAddress: string | null
+ phone: string | null
+}
+
+export type EmployeeSkillDto = {
+ id: string
+ kind: number
+ name: string
+ languageId: string | null
+ level: string | null
+}
+
+export type EmployeeDocumentDto = {
+ id: string
+ documentType: number
+ fileName: string
+ filePath: string
+ fileSize: number
+ contentType: string
+ issueDate: string | null
+ expiryDate: string | null
+ notes: string | null
+}
+
+// ========== Detail (full + 5 satellite collection) ==========
+
+export type EmployeeDetail = {
+ id: string
+ employeeCode: string
+ userId: string
+ fullName: string | null
+ email: string | null
+ departmentId: string | null
+ departmentName: string | null
+ employeeStatus: number
+ gender: number | null
+ maritalStatus: number | null
+ employeeType: number | null
+ dateOfBirth: string | null
+ birthPlace: string | null
+ hometown: string | null
+ phone: string | null
+ personalEmail: string | null
+ internalPhone: string | null
+ ethnicity: string | null
+ religion: string | null
+ nationality: string | null
+ idCardNumber: string | null
+ idCardIssueDate: string | null
+ idCardIssuePlace: string | null
+ taxCode: string | null
+ socialInsuranceNumber: string | null
+ passportNumber: string | null
+ permanentAddressText: string | null
+ streetAddressPermanent: string | null
+ temporaryAddressText: string | null
+ streetAddressTemporary: string | null
+ hireDate: string | null
+ resignDate: string | null
+ emergencyContactName: string | null
+ emergencyContactPhone: string | null
+ emergencyContactAddress: string | null
+ qualification: string | null
+ academicTitle: string | null
+ workLocation: string | null
+ timekeepingCode: string | null
+ bankAccount: string | null
+ bankName: string | null
+ bankBranch: string | null
+ heightCm: number | null
+ weightKg: number | null
+ bloodType: string | null
+ baseSalary: number | null
+ totalSalary: number | null
+ annualLeaveDays: number | null
+ remainingLeaveDays: number | null
+ compensatoryLeaveDays: number | null
+ seniorityLeaveDays: number | null
+ socialInsuranceStartDate: string | null
+ medicalRegistrationPlace: string | null
+ isCommunistParty: boolean
+ communistPartyJoinDate: string | null
+ isYouthUnion: boolean
+ youthUnionJoinDate: string | null
+ isTradeUnion: boolean
+ tradeUnionJoinDate: string | null
+ photoUrl: string | null
+ notes: string | null
+ createdAt: string
+ updatedAt: string | null
+ workHistories: EmployeeWorkHistoryDto[]
+ educations: EmployeeEducationDto[]
+ familyRelations: EmployeeFamilyRelationDto[]
+ skills: EmployeeSkillDto[]
+ documents: EmployeeDocumentDto[]
+}
diff --git a/fe-user/src/App.tsx b/fe-user/src/App.tsx
index 7c8cf01..3437871 100644
--- a/fe-user/src/App.tsx
+++ b/fe-user/src/App.tsx
@@ -19,6 +19,8 @@ import { PurchaseEvaluationWorkspacePage } from '@/pages/pe/PurchaseEvaluationWo
import { WorkflowMatrixViewPage } from '@/pages/pe/WorkflowMatrixViewPage'
import { BudgetsListPage, BudgetDetailPage } from '@/pages/budgets/BudgetsListPage'
import { BudgetCreatePage } from '@/pages/budgets/BudgetCreatePage'
+import { EmployeesListPage } from '@/pages/hrm/EmployeesListPage'
+import { EmployeeCreatePage } from '@/pages/hrm/EmployeeCreatePage'
function App() {
return (
@@ -51,6 +53,9 @@ function App() {
new Date().toISOString().slice(0, 10)
+
+const initial: CreateForm = {
+ userId: '',
+ employeeStatus: String(EmployeeStatus.Active),
+ hireDate: todayIso(),
+ dateOfBirth: '',
+ gender: '',
+ phone: '',
+ nationality: 'Việt Nam',
+}
+
+const PHONE_RE = /^0\d{9,10}$/
+const isValidPhone = (s: string) => !s || PHONE_RE.test(s.replace(/[\s\-.]/g, ''))
+
+export function EmployeeCreatePage() {
+ const navigate = useNavigate()
+ const [form, setForm] = useState(initial)
+
+ // Lấy list user để pick — pageSize lớn cho admin pick dễ.
+ const users = useQuery({
+ queryKey: ['users-for-employee-create'],
+ queryFn: async () =>
+ (await api.get>('/users', { params: { page: 1, pageSize: 200 } })).data.items,
+ })
+
+ const create = useMutation({
+ mutationFn: async () => {
+ const body = {
+ userId: form.userId,
+ employeeStatus: Number(form.employeeStatus),
+ hireDate: form.hireDate || null,
+ dateOfBirth: form.dateOfBirth || null,
+ gender: form.gender ? Number(form.gender) : null,
+ phone: form.phone.trim() || null,
+ nationality: form.nationality.trim() || null,
+ }
+ return (await api.post<{ id: string }>('/employees', body)).data
+ },
+ onSuccess: data => {
+ toast.success('Đã tạo hồ sơ NV.')
+ navigate(`/employees?id=${data.id}`)
+ },
+ onError: e => toast.error(getErrorMessage(e)),
+ })
+
+ function submit(e: FormEvent) {
+ e.preventDefault()
+ if (!form.userId) {
+ toast.error('Vui lòng chọn user.')
+ return
+ }
+ if (!isValidPhone(form.phone)) {
+ toast.error('SĐT không hợp lệ (10-11 số, bắt đầu bằng 0).')
+ return
+ }
+ create.mutate()
+ }
+
+ return (
+
+ {/* ========== LEFT PANEL: filter ========== */}
+
+
+ {/* ========== RIGHT PANEL: list table + selected detail ========== */}
+
+
+
+ )
+}
+
+// ========== Inline 6-section read-only detail ==========
+
+function EmployeeDetailSections({ detail, onDelete }: { detail: EmployeeDetail; onDelete: () => void }) {
+ return (
+
+
+
+ Danh sách nhân viên
+ +
+ {list.isLoading ? (
+
+
+
+ )}
+
+
+ {/* ========== Selected detail (6 collapsible section inline) ========== */}
+ {selectedId && (
+ Đang tải...
+ ) : !list.data || list.data.items.length === 0 ? (
+ | Mã NV | +Họ tên | +Phòng ban | +Trạng thái | +SĐT | +
|---|---|---|---|---|
| {e.employeeCode} | +{e.fullName ?? '—'} | +{e.departmentName ?? '—'} | ++ + {EmployeeStatusLabel[e.status]} + + | +{e.phone ?? '—'} | +
+ {detail.isLoading ? (
+ del.mutate(detail.data!.id)} />
+ )}
+
+ )}
+ Đang tải chi tiết...
+ ) : !detail.data ? (
+ Không tìm thấy hồ sơ.
+ ) : (
+
+ {/* Header bar */}
+
+
+
+ {/* Section 1: Cơ bản */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {detail.notes && (
+
+
+ )}
+
+
+ {/* Section 2: Công tác */}
+
+ {detail.workHistories.length === 0 ? (
+
+
+ {/* Section 3: Đào tạo */}
+
+ {detail.educations.length === 0 ? (
+
+
+ {/* Section 4: Thân nhân */}
+
+ {detail.familyRelations.length === 0 ? (
+
+
+
+ )}
+
+
+ {/* Section 5: Kỹ năng */}
+
+ {detail.skills.length === 0 ? (
+
+
+ {/* Section 6: Hồ sơ */}
+
+ {detail.documents.length === 0 ? (
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+// ========== Helpers ==========
+
+function Section({ title, children, defaultOpen }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
+ return (
+
+
+
+
+ {detail.photoUrl ? (
+ 
+ ) : (
+
+
+
+ {detail.fullName ?? '—'}
+
+ {detail.employeeCode}
+ •
+
+ {EmployeeStatusLabel[detail.employeeStatus]}
+
+ {detail.departmentName && (
+ <>
+ •
+ {detail.departmentName}
+
+ )}
+
+ {detail.notes}
+
+ {detail.workHistories.map(w => (
+
+ )}
+
+
+ ))}
+
+
+ {w.jobTitle && {w.companyName}
+
+ {fmtDate(w.fromDate)} → {fmtDate(w.toDate)}
+
+ Chức vụ: {w.jobTitle}
}
+ {w.industry && Ngành: {w.industry}
}
+ {w.companyAddress && Địa chỉ: {w.companyAddress}
}
+ {w.jobDescription && {w.jobDescription}
}
+ {w.resignReason && Lý do nghỉ: {w.resignReason}
}
+
+ {detail.educations.map(ed => (
+
+ )}
+
+
+ ))}
+
+
+ {ed.schoolName}
+
+ {fmtDate(ed.fromDate)} → {fmtDate(ed.toDate)}
+
+
+ {ed.major && Chuyên ngành: {ed.major}}
+ {ed.degreeLevel != null && Bằng cấp: {DegreeLevelLabel[ed.degreeLevel]}}
+ {ed.educationMode != null && Hình thức: {EducationModeLabel[ed.educationMode]}}
+ {ed.gradeLevel != null && Xếp loại: {GradeLevelLabel[ed.gradeLevel]}}
+
+ {ed.certificateIssueDate && Ngày cấp bằng: {fmtDate(ed.certificateIssueDate)}
}
+ {ed.notes && {ed.notes}
}
+ | Họ tên | +Quan hệ | +Năm sinh | +Nghề nghiệp | +SĐT | +
|---|---|---|---|---|
| {f.fullName} | +{FamilyRelationKindLabel[f.relationship]} | +{f.birthYear ?? '—'} | +{f.occupation ?? '—'} | +{f.phone ?? '—'} | +
+ {[SkillKind.Computer, SkillKind.Language, SkillKind.Other].map(kind => {
+ const group = detail.skills.filter(s => s.kind === kind)
+ if (group.length === 0) return null
+ return (
+
+ )}
+
+
+ )
+ })}
+
+ {SkillKindLabel[kind]}
+
+ -
+ {group.map(s => (
+
-
+ + {s.name} + {s.level && {s.level}} ++ {s.languageId &&Mã: {s.languageId}} +
+ ))}
+
| Loại | +Tên file | +Ngày cấp | +Ngày hết hạn | +
|---|---|---|---|
| {EmployeeDocumentTypeLabel[doc.documentType]} | ++ + {doc.fileName} + + | +{fmtDate(doc.issueDate)} | +{fmtDate(doc.expiryDate)} | +
+
+ )
+}
+
+function SubBlock({ title, children }: { title: string; children: React.ReactNode }) {
+ return (
+ + {title} + ▶ +
+{children}
+
+
+ )
+}
+
+function Grid2({ children }: { children: React.ReactNode }) {
+ return {title}
+ {children}
+ {children}
+}
+
+function Field({ label, value, mono }: { label: string; value: string | number | null; mono?: boolean }) {
+ return (
+
+
+ )
+}
+
+function EmptyHint({ text }: { text: string }) {
+ return {label}
+
+ {value == null || value === '' ? '—' : value}
+
+ {text}
+}
diff --git a/fe-admin/src/types/employee.ts b/fe-admin/src/types/employee.ts
new file mode 100644
index 0000000..c07180e
--- /dev/null
+++ b/fe-admin/src/types/employee.ts
@@ -0,0 +1,306 @@
+// Types cho module Hồ sơ Nhân sự (HRM) — mirror BE Domain.Hrm.Enums + DTOs.
+// Phase 10.1 G-H1 (S33) — Pattern 12-bis cross-module FE port PE → Hrm (4th
+// reinforcement). TS6 erasableSyntaxOnly cấm enum → const-object pattern bắt buộc.
+
+// ========== Enum mirror BE Domain.Hrm.Enums (10 enum) ==========
+
+export const EmployeeStatus = {
+ Active: 1,
+ OnLeave: 2,
+ Resigned: 3,
+} as const
+export type EmployeeStatus = typeof EmployeeStatus[keyof typeof EmployeeStatus]
+
+export const EmployeeStatusLabel: Record
+
+
+
+
+
+ )
+}
diff --git a/fe-user/src/pages/hrm/EmployeesListPage.tsx b/fe-user/src/pages/hrm/EmployeesListPage.tsx
new file mode 100644
index 0000000..807aee7
--- /dev/null
+++ b/fe-user/src/pages/hrm/EmployeesListPage.tsx
@@ -0,0 +1,573 @@
+// List + Detail Hồ sơ Nhân sự (HRM) — 2-panel: filter sidebar | list table + inline detail.
+// Phase 10.1 G-H1 Phase 1 ULTRA-MINIMAL scope (S33 Task 5):
+// - Read-only mọi section (Edit Header defer Phase 1.5)
+// - 6 section render inline trong right panel qua `Tạo Hồ sơ Nhân sự mới
+` HTML native
+// - NO separate DetailTabs component, NO satellite CRUD form
+// Pattern 16-bis 4-place mirror cross-app (4th reinforcement S33).
+// URL params: id (selected), q (search), status, deptId
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { toast } from 'sonner'
+import { UserCircle2, Search, Plus, X } from 'lucide-react'
+import { Input } from '@/components/ui/Input'
+import { Select } from '@/components/ui/Select'
+import { Button } from '@/components/ui/Button'
+import { EmptyState } from '@/components/EmptyState'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { cn } from '@/lib/cn'
+import type { Paged, Department } from '@/types/master'
+import {
+ EmployeeStatusColor,
+ EmployeeStatusLabel,
+ GenderLabel,
+ MaritalStatusLabel,
+ EmployeeTypeLabel,
+ DegreeLevelLabel,
+ EducationModeLabel,
+ GradeLevelLabel,
+ FamilyRelationKindLabel,
+ SkillKind,
+ SkillKindLabel,
+ EmployeeDocumentTypeLabel,
+ type EmployeeListItem,
+ type EmployeeDetail,
+} from '@/types/employee'
+
+const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleDateString('vi-VN') : '—')
+const fmtDateTime = (s: string | null) => (s ? new Date(s).toLocaleString('vi-VN') : '—')
+
+export function EmployeesListPage() {
+ const navigate = useNavigate()
+ const qc = useQueryClient()
+ const [sp, setSp] = useSearchParams()
+ const search = sp.get('q') ?? ''
+ const statusFilter = sp.get('status') ?? ''
+ const deptFilter = sp.get('deptId') ?? ''
+ const selectedId = sp.get('id')
+
+ const [localSearch, setLocalSearch] = useState(search)
+
+ const departments = useQuery({
+ queryKey: ['departments-all-hrm'],
+ queryFn: async () =>
+ (await api.get>('/departments', { params: { page: 1, pageSize: 200 } })).data.items,
+ })
+
+ const list = useQuery({
+ queryKey: ['employees-list', { search, statusFilter, deptFilter }],
+ queryFn: async () => {
+ const res = await api.get>('/employees', {
+ params: {
+ pageSize: 100,
+ search: search || undefined,
+ status: statusFilter || undefined,
+ departmentId: deptFilter || undefined,
+ },
+ })
+ return res.data
+ },
+ })
+
+ const detail = useQuery({
+ queryKey: ['employee-detail', selectedId],
+ queryFn: async () => (await api.get(`/employees/${selectedId}`)).data,
+ enabled: !!selectedId,
+ })
+
+ const del = useMutation({
+ mutationFn: async (id: string) => api.delete(`/employees/${id}`),
+ onSuccess: () => {
+ toast.success('Đã xoá hồ sơ NV.')
+ setParam('id', null)
+ qc.invalidateQueries({ queryKey: ['employees-list'] })
+ },
+ onError: e => toast.error(getErrorMessage(e)),
+ })
+
+ function setParam(key: string, value: string | null) {
+ const next = new URLSearchParams(sp)
+ if (value == null || value === '') next.delete(key)
+ else next.set(key, value)
+ setSp(next, { replace: true })
+ }
+
+ function applySearch(e: React.FormEvent) {
+ e.preventDefault()
+ setParam('q', localSearch.trim() || null)
+ }
+
+ function resetFilters() {
+ setLocalSearch('')
+ setSp(new URLSearchParams(), { replace: true })
+ }
+
+ return (
+ = {
+ 1: 'Đang làm việc',
+ 2: 'Nghỉ phép',
+ 3: 'Đã nghỉ việc',
+}
+
+export const EmployeeStatusColor: Record = {
+ 1: 'bg-emerald-100 text-emerald-700',
+ 2: 'bg-amber-100 text-amber-700',
+ 3: 'bg-slate-100 text-slate-600',
+}
+
+export const Gender = {
+ Male: 1,
+ Female: 2,
+ Other: 3,
+} as const
+export type Gender = typeof Gender[keyof typeof Gender]
+
+export const GenderLabel: Record = {
+ 1: 'Nam',
+ 2: 'Nữ',
+ 3: 'Khác',
+}
+
+export const MaritalStatus = {
+ Single: 1,
+ Married: 2,
+ Divorced: 3,
+ Widowed: 4,
+} as const
+export type MaritalStatus = typeof MaritalStatus[keyof typeof MaritalStatus]
+
+export const MaritalStatusLabel: Record = {
+ 1: 'Độc thân',
+ 2: 'Đã kết hôn',
+ 3: 'Đã ly hôn',
+ 4: 'Goá',
+}
+
+export const EmployeeType = {
+ FullTime: 1,
+ PartTime: 2,
+ Intern: 3,
+ Contractor: 4,
+} as const
+export type EmployeeType = typeof EmployeeType[keyof typeof EmployeeType]
+
+export const EmployeeTypeLabel: Record = {
+ 1: 'Chính thức',
+ 2: 'Bán thời gian',
+ 3: 'Thực tập',
+ 4: 'Khoán việc',
+}
+
+export const DegreeLevel = {
+ College: 1,
+ Bachelor: 2,
+ Master: 3,
+ PhD: 4,
+} as const
+export type DegreeLevel = typeof DegreeLevel[keyof typeof DegreeLevel]
+
+export const DegreeLevelLabel: Record = {
+ 1: 'Cao đẳng',
+ 2: 'Đại học',
+ 3: 'Thạc sĩ',
+ 4: 'Tiến sĩ',
+}
+
+export const EducationMode = {
+ FullTime: 1,
+ PartTime: 2,
+ Distance: 3,
+} as const
+export type EducationMode = typeof EducationMode[keyof typeof EducationMode]
+
+export const EducationModeLabel: Record = {
+ 1: 'Chính quy',
+ 2: 'Tại chức',
+ 3: 'Từ xa',
+}
+
+export const GradeLevel = {
+ Average: 1,
+ Good: 2,
+ Excellent: 3,
+} as const
+export type GradeLevel = typeof GradeLevel[keyof typeof GradeLevel]
+
+export const GradeLevelLabel: Record = {
+ 1: 'Trung bình',
+ 2: 'Khá',
+ 3: 'Giỏi',
+}
+
+export const FamilyRelationKind = {
+ Father: 1,
+ Mother: 2,
+ Spouse: 3,
+ Child: 4,
+ Sibling: 5,
+ Other: 99,
+} as const
+export type FamilyRelationKind = typeof FamilyRelationKind[keyof typeof FamilyRelationKind]
+
+export const FamilyRelationKindLabel: Record = {
+ 1: 'Cha',
+ 2: 'Mẹ',
+ 3: 'Vợ/Chồng',
+ 4: 'Con',
+ 5: 'Anh/Chị/Em ruột',
+ 99: 'Khác',
+}
+
+export const SkillKind = {
+ Computer: 1,
+ Language: 2,
+ Other: 3,
+} as const
+export type SkillKind = typeof SkillKind[keyof typeof SkillKind]
+
+export const SkillKindLabel: Record = {
+ 1: 'Kỹ năng vi tính',
+ 2: 'Ngoại ngữ',
+ 3: 'Kỹ năng khác',
+}
+
+export const EmployeeDocumentType = {
+ IdCard: 1,
+ Passport: 2,
+ Degree: 3,
+ Certificate: 4,
+ LaborContract: 5,
+ Other: 99,
+} as const
+export type EmployeeDocumentType = typeof EmployeeDocumentType[keyof typeof EmployeeDocumentType]
+
+export const EmployeeDocumentTypeLabel: Record = {
+ 1: 'CMND/CCCD',
+ 2: 'Hộ chiếu',
+ 3: 'Bằng cấp',
+ 4: 'Chứng chỉ',
+ 5: 'HĐLĐ',
+ 99: 'Khác',
+}
+
+// ========== List item (paged) ==========
+
+export type EmployeeListItem = {
+ id: string
+ employeeCode: string
+ userId: string
+ fullName: string | null
+ email: string | null
+ departmentId: string | null
+ departmentName: string | null
+ status: number
+ phone: string | null
+ hireDate: string | null
+ createdAt: string
+ updatedAt: string | null
+}
+
+// ========== Satellite read DTOs (inline GetDetail bundle) ==========
+
+export type EmployeeWorkHistoryDto = {
+ id: string
+ companyName: string
+ companyAddress: string | null
+ industry: string | null
+ fromDate: string | null
+ toDate: string | null
+ jobTitle: string | null
+ jobDescription: string | null
+ resignReason: string | null
+}
+
+export type EmployeeEducationDto = {
+ id: string
+ schoolName: string
+ major: string | null
+ degreeLevel: number | null
+ educationMode: number | null
+ gradeLevel: number | null
+ fromDate: string | null
+ toDate: string | null
+ certificateIssueDate: string | null
+ notes: string | null
+}
+
+export type EmployeeFamilyRelationDto = {
+ id: string
+ fullName: string
+ relationship: number
+ birthYear: number | null
+ occupation: string | null
+ currentAddress: string | null
+ phone: string | null
+}
+
+export type EmployeeSkillDto = {
+ id: string
+ kind: number
+ name: string
+ languageId: string | null
+ level: string | null
+}
+
+export type EmployeeDocumentDto = {
+ id: string
+ documentType: number
+ fileName: string
+ filePath: string
+ fileSize: number
+ contentType: string
+ issueDate: string | null
+ expiryDate: string | null
+ notes: string | null
+}
+
+// ========== Detail (full + 5 satellite collection) ==========
+
+export type EmployeeDetail = {
+ id: string
+ employeeCode: string
+ userId: string
+ fullName: string | null
+ email: string | null
+ departmentId: string | null
+ departmentName: string | null
+ employeeStatus: number
+ gender: number | null
+ maritalStatus: number | null
+ employeeType: number | null
+ dateOfBirth: string | null
+ birthPlace: string | null
+ hometown: string | null
+ phone: string | null
+ personalEmail: string | null
+ internalPhone: string | null
+ ethnicity: string | null
+ religion: string | null
+ nationality: string | null
+ idCardNumber: string | null
+ idCardIssueDate: string | null
+ idCardIssuePlace: string | null
+ taxCode: string | null
+ socialInsuranceNumber: string | null
+ passportNumber: string | null
+ permanentAddressText: string | null
+ streetAddressPermanent: string | null
+ temporaryAddressText: string | null
+ streetAddressTemporary: string | null
+ hireDate: string | null
+ resignDate: string | null
+ emergencyContactName: string | null
+ emergencyContactPhone: string | null
+ emergencyContactAddress: string | null
+ qualification: string | null
+ academicTitle: string | null
+ workLocation: string | null
+ timekeepingCode: string | null
+ bankAccount: string | null
+ bankName: string | null
+ bankBranch: string | null
+ heightCm: number | null
+ weightKg: number | null
+ bloodType: string | null
+ baseSalary: number | null
+ totalSalary: number | null
+ annualLeaveDays: number | null
+ remainingLeaveDays: number | null
+ compensatoryLeaveDays: number | null
+ seniorityLeaveDays: number | null
+ socialInsuranceStartDate: string | null
+ medicalRegistrationPlace: string | null
+ isCommunistParty: boolean
+ communistPartyJoinDate: string | null
+ isYouthUnion: boolean
+ youthUnionJoinDate: string | null
+ isTradeUnion: boolean
+ tradeUnionJoinDate: string | null
+ photoUrl: string | null
+ notes: string | null
+ createdAt: string
+ updatedAt: string | null
+ workHistories: EmployeeWorkHistoryDto[]
+ educations: EmployeeEducationDto[]
+ familyRelations: EmployeeFamilyRelationDto[]
+ skills: EmployeeSkillDto[]
+ documents: EmployeeDocumentDto[]
+}
+ {/* ========== LEFT PANEL: filter ========== */}
+
+
+ {/* ========== RIGHT PANEL: list table + selected detail ========== */}
+
+
+
+ )
+}
+
+// ========== Inline 6-section read-only detail ==========
+
+function EmployeeDetailSections({ detail, onDelete }: { detail: EmployeeDetail; onDelete: () => void }) {
+ return (
+
+
+
+ Danh sách nhân viên
+ +
+ {list.isLoading ? (
+
+
+
+ )}
+
+
+ {/* ========== Selected detail (6 collapsible section inline) ========== */}
+ {selectedId && (
+ Đang tải...
+ ) : !list.data || list.data.items.length === 0 ? (
+ | Mã NV | +Họ tên | +Phòng ban | +Trạng thái | +SĐT | +
|---|---|---|---|---|
| {e.employeeCode} | +{e.fullName ?? '—'} | +{e.departmentName ?? '—'} | ++ + {EmployeeStatusLabel[e.status]} + + | +{e.phone ?? '—'} | +
+ {detail.isLoading ? (
+ del.mutate(detail.data!.id)} />
+ )}
+
+ )}
+ Đang tải chi tiết...
+ ) : !detail.data ? (
+ Không tìm thấy hồ sơ.
+ ) : (
+
+ {/* Header bar */}
+
+
+
+ {/* Section 1: Cơ bản */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {detail.notes && (
+
+
+ )}
+
+
+ {/* Section 2: Công tác */}
+
+ {detail.workHistories.length === 0 ? (
+
+
+ {/* Section 3: Đào tạo */}
+
+ {detail.educations.length === 0 ? (
+
+
+ {/* Section 4: Thân nhân */}
+
+ {detail.familyRelations.length === 0 ? (
+
+
+
+ )}
+
+
+ {/* Section 5: Kỹ năng */}
+
+ {detail.skills.length === 0 ? (
+
+
+ {/* Section 6: Hồ sơ */}
+
+ {detail.documents.length === 0 ? (
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+// ========== Helpers ==========
+
+function Section({ title, children, defaultOpen }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
+ return (
+
+
+
+
+ {detail.photoUrl ? (
+
+ ) : (
+
+
+
+ {detail.fullName ?? '—'}
+
+ {detail.employeeCode}
+ •
+
+ {EmployeeStatusLabel[detail.employeeStatus]}
+
+ {detail.departmentName && (
+ <>
+ •
+ {detail.departmentName}
+
+ )}
+
+ {detail.notes}
+
+ {detail.workHistories.map(w => (
+
+ )}
+
+
+ ))}
+
+
+ {w.jobTitle && {w.companyName}
+
+ {fmtDate(w.fromDate)} → {fmtDate(w.toDate)}
+
+ Chức vụ: {w.jobTitle}
}
+ {w.industry && Ngành: {w.industry}
}
+ {w.companyAddress && Địa chỉ: {w.companyAddress}
}
+ {w.jobDescription && {w.jobDescription}
}
+ {w.resignReason && Lý do nghỉ: {w.resignReason}
}
+
+ {detail.educations.map(ed => (
+
+ )}
+
+
+ ))}
+
+
+ {ed.schoolName}
+
+ {fmtDate(ed.fromDate)} → {fmtDate(ed.toDate)}
+
+
+ {ed.major && Chuyên ngành: {ed.major}}
+ {ed.degreeLevel != null && Bằng cấp: {DegreeLevelLabel[ed.degreeLevel]}}
+ {ed.educationMode != null && Hình thức: {EducationModeLabel[ed.educationMode]}}
+ {ed.gradeLevel != null && Xếp loại: {GradeLevelLabel[ed.gradeLevel]}}
+
+ {ed.certificateIssueDate && Ngày cấp bằng: {fmtDate(ed.certificateIssueDate)}
}
+ {ed.notes && {ed.notes}
}
+ | Họ tên | +Quan hệ | +Năm sinh | +Nghề nghiệp | +SĐT | +
|---|---|---|---|---|
| {f.fullName} | +{FamilyRelationKindLabel[f.relationship]} | +{f.birthYear ?? '—'} | +{f.occupation ?? '—'} | +{f.phone ?? '—'} | +
+ {[SkillKind.Computer, SkillKind.Language, SkillKind.Other].map(kind => {
+ const group = detail.skills.filter(s => s.kind === kind)
+ if (group.length === 0) return null
+ return (
+
+ )}
+
+
+ )
+ })}
+
+ {SkillKindLabel[kind]}
+
+ -
+ {group.map(s => (
+
-
+ + {s.name} + {s.level && {s.level}} ++ {s.languageId &&Mã: {s.languageId}} +
+ ))}
+
| Loại | +Tên file | +Ngày cấp | +Ngày hết hạn | +
|---|---|---|---|
| {EmployeeDocumentTypeLabel[doc.documentType]} | ++ + {doc.fileName} + + | +{fmtDate(doc.issueDate)} | +{fmtDate(doc.expiryDate)} | +
+
+ )
+}
+
+function SubBlock({ title, children }: { title: string; children: React.ReactNode }) {
+ return (
+ + {title} + ▶ +
+{children}
+
+
+ )
+}
+
+function Grid2({ children }: { children: React.ReactNode }) {
+ return {title}
+ {children}
+ {children}
+}
+
+function Field({ label, value, mono }: { label: string; value: string | number | null; mono?: boolean }) {
+ return (
+
+
+ )
+}
+
+function EmptyHint({ text }: { text: string }) {
+ return {label}
+
+ {value == null || value === '' ? '—' : value}
+
+ {text}
+}
diff --git a/fe-user/src/types/employee.ts b/fe-user/src/types/employee.ts
new file mode 100644
index 0000000..c07180e
--- /dev/null
+++ b/fe-user/src/types/employee.ts
@@ -0,0 +1,306 @@
+// Types cho module Hồ sơ Nhân sự (HRM) — mirror BE Domain.Hrm.Enums + DTOs.
+// Phase 10.1 G-H1 (S33) — Pattern 12-bis cross-module FE port PE → Hrm (4th
+// reinforcement). TS6 erasableSyntaxOnly cấm enum → const-object pattern bắt buộc.
+
+// ========== Enum mirror BE Domain.Hrm.Enums (10 enum) ==========
+
+export const EmployeeStatus = {
+ Active: 1,
+ OnLeave: 2,
+ Resigned: 3,
+} as const
+export type EmployeeStatus = typeof EmployeeStatus[keyof typeof EmployeeStatus]
+
+export const EmployeeStatusLabel: Record