// ELS HRM — Module 05: Nhân Viên PIM — All Screens // Đồng bộ theo contract ADR-HRM-PIM-001 (SRS v1.1 / SDS v1.3, 2026-06-14) // shadcn table styling reproduced via arbitrary child variants (1 className, structure untouched) const TABLE_CLS = "w-full border-collapse text-sm " + "[&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:bg-muted [&_thead_th]:px-3.5 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-[0.04em] [&_thead_th]:text-muted-foreground [&_thead_th]:whitespace-nowrap " + "[&_tbody_td]:border-b [&_tbody_td]:border-border [&_tbody_td]:px-3.5 [&_tbody_td]:py-3 [&_tbody_td]:align-middle [&_tbody_td]:text-foreground " + "[&_tbody_tr:last-child_td]:border-0 [&_tbody_tr:hover]:bg-muted"; const CARD = "rounded-xl border border-border bg-card shadow-xs"; const CARD_HEAD = "flex items-center justify-between gap-3 border-b border-border px-5 py-4"; const CARD_TITLE = "text-md font-semibold text-foreground"; const CARD_BODY = "p-5"; const PIM_EMPLOYEES = [ { id:'e01', num:'EMP-2024-0001', name:'Nguyễn Thị Lan', gender:'female', dept:'Nhân sự', title:'HR Manager', type:'full_time', status:'active', hire:'01/03/2024', supervisor:'Hồ Văn Minh', email:'lan.nguyen@els.tech', phone:'0912 345 678', loc:'Hà Nội', cccd4:'3456', mst4:'7890', docs:5 }, { id:'e02', num:'EMP-2024-0008', name:'Trần Minh Tuấn', gender:'male', dept:'Engineering', title:'Backend Engineer', type:'full_time', status:'active', hire:'15/04/2024', supervisor:'Lê Hữu Phước', email:'tuan.tran@els.tech', phone:'0908 234 567', loc:'Hà Nội', cccd4:'1122', mst4:'4455', docs:3 }, { id:'e03', num:'EMP-2025-0015', name:'Lê Thị Hương', gender:'female', dept:'Marketing', title:'Marketing Lead', type:'full_time', status:'on_leave', hire:'02/01/2025', supervisor:'Nguyễn Văn Nam',email:'huong.le@els.tech', phone:'0923 456 789', loc:'HCM', cccd4:'7788', mst4:'2211', docs:4 }, { id:'e04', num:'EMP-2025-0032', name:'Phạm Đức Long', gender:'male', dept:'Kinh doanh', title:'Sales Executive', type:'full_time', status:'suspended', hire:'10/06/2025', supervisor:'Đỗ Thị Mai', email:'long.pham@els.tech', phone:'0934 567 890', loc:'HCM', cccd4:'9900', mst4:'3344', docs:2 }, { id:'e05', num:'EMP-2025-0041', name:'Võ Thị Thu', gender:'female', dept:'Tài chính', title:'Accountant', type:'part_time', status:'inactive', hire:'20/08/2025', supervisor:'Bùi Văn Sơn', email:'thu.vo@els.tech', phone:'0945 678 901', loc:'Đà Nẵng',cccd4:'5566', mst4:'8899', docs:3 }, { id:'e06', num:'EMP-2026-0002', name:'Đỗ Văn Hùng', gender:'male', dept:'Engineering', title:'Frontend Developer', type:'contract', status:'active', hire:'05/01/2026', supervisor:'Lê Hữu Phước', email:'hung.do@els.tech', phone:'0956 789 012', loc:'Hà Nội', cccd4:'2468', mst4:'1357', docs:2 }, { id:'e07', num:'EMP-2024-0019', name:'Bùi Thị Linh', gender:'female', dept:'Nhân sự', title:'HR Specialist', type:'full_time', status:'active', hire:'10/07/2024', supervisor:'Nguyễn Thị Lan',email:'linh.bui@els.tech', phone:'0967 890 123', loc:'Hà Nội', cccd4:'1010', mst4:'2020', docs:4 }, { id:'e08', num:'EMP-2025-0028', name:'Ngô Minh Khoa', gender:'male', dept:'Engineering', title:'DevOps Engineer', type:'full_time', status:'terminated', hire:'01/04/2025', supervisor:'Lê Hữu Phước', email:'khoa.ngo@els.tech', phone:'0978 901 234', loc:'Hà Nội', cccd4:'3030', mst4:'4040', docs:5 }, ]; // Người dùng đang đăng nhập (demo) — minh hoạ phân nhánh "hồ sơ của chính mình": // dòng nào trong danh sách chính là người dùng → mở ESS /me (không mở chế độ xem quản trị /:id). const PIM_ME_ID = 'e01'; // Nguyễn Thị Lan (HR Manager) — cũng là chủ trang ESS "Hồ sơ của tôi" // 5 trạng thái việc làm (§2.3) — chữ thường đúng giá trị lưu DB const EMP_STATUS_CFG = { active: { label:'Đang làm việc', v:'success', icon:'check-circle' }, on_leave: { label:'Đang nghỉ phép', v:'warning', icon:'umbrella' }, suspended: { label:'Đình chỉ', v:'danger', icon:'pause-circle' }, inactive: { label:'Tạm ngưng', v:'neutral', icon:'minus-circle' }, terminated: { label:'Đã nghỉ việc', v:'neutral', icon:'x-circle' }, }; const EMP_TYPE_CFG = { full_time: { label:'Toàn thời gian', v:'primary' }, part_time: { label:'Bán thời gian', v:'info' }, contract: { label:'Hợp đồng', v:'neutral' }, intern: { label:'Thực tập sinh', v:'neutral' }, temporary: { label:'Thời vụ', v:'neutral' }, }; // Tài liệu đính kèm (§6A) — loại tài liệu const DOC_TYPE_CFG = { national_id: { label:'CCCD/CMND', icon:'shield', color:'var(--color-destructive)', bg:'var(--color-destructive-soft)', sensitive:true }, contract: { label:'Hợp đồng', icon:'file-text', color:'var(--color-primary)', bg:'var(--color-primary-soft)', sensitive:false }, resume: { label:'Sơ yếu LL', icon:'file', color:'var(--color-info)', bg:'var(--color-info-soft)', sensitive:false }, certificate: { label:'Chứng chỉ', icon:'award', color:'var(--color-success)', bg:'var(--color-success-soft)', sensitive:false }, photo: { label:'Ảnh', icon:'image', color:'oklch(0.55 0.15 300)',bg:'oklch(0.95 0.04 300)', sensitive:false }, other: { label:'Khác', icon:'paperclip', color:'var(--color-muted-foreground)', bg:'var(--color-muted)', sensitive:false }, }; // ─── Helper: trường PII (mã hoá-at-rest, mask ••••••, cần view_pii) ───── const PiiField = ({ label, last4, full, canView }) => { const [revealed, setRevealed] = React.useState(false); const show = canView && revealed; return (
{label}
{show ? full : '••••••' + last4} {canView ? ( ) : ( Cần quyền )}
); }; // ─── Helper: overlay dialog (absolute, an toàn trong artboard scale) ─────────── const PIMOverlay = ({ children, width=460 }) => (
{children}
); // ─── 01: Employee List ──────────────────────────────────────────────────────── const PIMListScreen = ({ dark=false }) => ( Xuất Excel Nhập dữ liệu Thêm nhân viên }> {/* Stats — 5 trạng thái */}
{[ { label:'Đang làm việc', val:'226', delta:'+5 tháng này', dir:'up', icon:'check-circle', ib:'var(--color-success-soft)', ic:'var(--color-success)' }, { label:'Đang nghỉ phép',val:'12', delta:'4.8%', dir:'down', icon:'umbrella', ib:'var(--color-warning-soft)', ic:'oklch(0.55 0.158 65)'}, { label:'Đình chỉ', val:'2', delta:'Điều tra', dir:'down', icon:'pause-circle', ib:'var(--color-destructive-soft)', ic:'var(--color-destructive)' }, { label:'Tạm ngưng', val:'3', delta:'Hành chính', dir:'down', icon:'minus-circle', ib:'var(--color-muted)', ic:'var(--color-muted-foreground)'}, { label:'Tổng nhân viên',val:'247', delta:'+12 năm nay', dir:'up', icon:'users', ib:'var(--color-info-soft)', ic:'var(--color-info)' }, ].map((s,i)=>)}
{/* Filter bar */}
{[ { w:148, opts:['Tất cả phòng ban','Nhân sự','Engineering','Marketing','Kinh doanh','Tài chính'] }, { w:150, opts:['Tất cả trạng thái','Đang làm việc','Đang nghỉ phép','Đình chỉ','Tạm ngưng','Đã nghỉ việc'] }, { w:130, opts:['Loại HĐ','Toàn thời gian','Bán thời gian','Hợp đồng','Thực tập sinh','Thời vụ'] }, ].map((s,i)=>( Nhân viên Phòng ban Chức danh Loại HĐ Trạng thái Ngày vào Thao tác {PIM_EMPLOYEES.map(e=>{ const st = EMP_STATUS_CFG[e.status]; const tp = EMP_TYPE_CFG[e.type]; return (
{e.name} {e.id===PIM_ME_ID && Bạn}
{e.num} · {e.loc}
{e.dept} {e.title} {tp.label} {st.label} {e.hire} {e.id===PIM_ME_ID ? ( ) : (
)} ); })}
Trang 1 / 31 · 247 nhân viên
{[1,2,3,'…',31].map((p,i)=>( ))}
); // ─── 02: Employee Detail — 7 tabs ───────────────────────────────────────────── // MỘT màn chi tiết /:id, render theo quyền người xem (SRS §9.1–9.3): // viewer='hr' → data:employees:all + view_pii/salary → đầy đủ + sửa + thao tác vòng đời // viewer='manager' → data:employees:dept, CHỈ ĐỌC → ẩn PII/lương/liên lạc cá nhân, ẩn tab nhạy cảm const PIMDetailScreen = ({ initialTab, initialEdit=false, viewer='hr' }) => { const e = PIM_EMPLOYEES[0]; const P = viewer === 'manager' ? { user:{ name:'Lê Hữu Phước', role:'Department Manager' }, readOnly:true, canViewPii:false, canViewSalary:false, tabs:['employment','contact','dependents'] } : { user:{ name:'Nguyễn Thị Lan', role:'HR Manager' }, readOnly:false, canViewPii:true, canViewSalary:true, tabs:['personal','employment','contact','dependents','documents','custom','history'] }; const [tab, setTab] = React.useState(initialTab || P.tabs[0]); const [canViewPii, setCanViewPii] = React.useState(P.canViewPii); // mô phỏng quyền action:employee:view_pii const [statusOpen, setStatusOpen] = React.useState(false); // editTarget: null | 'personal' | 'employment' | 'contact' — overlay sửa theo từng nhóm dữ liệu const [editTarget, setEditTarget] = React.useState(initialEdit===true ? 'personal' : (initialEdit || null)); const ALL_TABS = [ { id:'personal', label:'Thông tin cá nhân' }, { id:'employment', label:'Dữ liệu việc làm' }, { id:'contact', label:'Liên lạc & Khẩn cấp' }, { id:'dependents', label:'Người phụ thuộc' }, { id:'documents', label:'Tài liệu' }, { id:'custom', label:'Trường tuỳ chỉnh' }, { id:'history', label:'Lịch sử thay đổi' }, ]; const TABS = ALL_TABS.filter(t => P.tabs.includes(t.id)); // hàng dữ liệu + ô "Cần quyền" (trường bị ẩn theo phạm vi cấp phòng ban) const Row = ({ label, val }) => (
{label}
{typeof val === 'string' ?
{val}
: val}
); const Locked = () => ( Cần quyền ); // chuyển trạng thái hợp lệ từ 'active' (§2.3) const STATUS_ACTIONS = [ { to:'on_leave', label:'Chuyển sang Nghỉ phép', desc:'Nghỉ phép dài hạn đã được duyệt', icon:'umbrella', v:'var(--color-warning)' }, { to:'suspended', label:'Đình chỉ kỷ luật', desc:'Tạm ngưng do kỷ luật / điều tra', icon:'pause-circle', v:'var(--color-destructive)' }, { to:'inactive', label:'Tạm ngưng hành chính', desc:'Tạm dừng hồ sơ theo hành chính', icon:'minus-circle', v:'var(--color-muted-foreground)' }, ]; return ( Đang làm việc} actions={P.readOnly ? undefined : <>
setStatusOpen(o=>!o)}>Đổi trạng thái {statusOpen && (
Từ trạng thái “Đang làm việc”
{STATUS_ACTIONS.map(a=>(
ev.currentTarget.style.background='var(--color-muted)'} onMouseLeave={ev=>ev.currentTarget.style.background='transparent'}>
{a.label}
{a.desc}
))}
Mọi thay đổi trạng thái đều được kiểm tra hợp lệ và ghi vào lịch sử thay đổi.
)}
Chấm dứt HĐ }> {!P.readOnly && editTarget==='personal' && setEditTarget(null)} />} {!P.readOnly && editTarget==='employment' && setEditTarget(null)} />} {!P.readOnly && editTarget==='contact' && setEditTarget(null)} />} {P.readOnly && (
Bạn xem hồ sơ này theo phạm vi dữ liệu cấp phòng ban (cây đơn vị bạn phụ trách). Dữ liệu nhạy cảm (CCCD/MST, lương, liên lạc cá nhân, trường tuỳ chỉnh) bị ẩn. Trưởng phòng chỉ có quyền xem — mọi thay đổi do HR thực hiện.
)}
{/* Left panel */}
{!P.readOnly && ( )}
{e.name}
{e.title}
Đang làm việc Toàn thời gian
{[ { icon:'user', label:'Mã NV (chính)', val:e.num }, { icon:'building', label:'Phòng ban', val:e.dept }, { icon:'briefcase',label:'Chức danh', val:e.title }, { icon:'map-pin', label:'Địa điểm', val:e.loc }, { icon:'calendar', label:'Ngày vào', val:e.hire }, { icon:'user', label:'Quản lý trực tiếp', val:e.supervisor}, ].map((f,i)=>(
{f.label}
{f.val}
))}
{P.canViewSalary ? (
Liên kết module
{[ { icon:'dollar', label:'Xem bảng lương', color:'var(--color-success)' }, { icon:'umbrella', label:'Số dư nghỉ phép', color:'var(--color-info)' }, { icon:'clock', label:'Lịch sử chấm công', color:'var(--color-primary)' }, { icon:'award', label:'Đánh giá hiệu suất', color:'var(--color-warning)' }, ].map((a,i)=>(
{a.label}
))}
) : (
Lương, đánh giá hiệu suất và liên kết module bị ẩn ở chế độ xem phòng ban.
)}
{/* Right — tabs */}
{TABS.map(t=>(
setTab(t.id)} className={"-mb-px cursor-pointer whitespace-nowrap border-b-2 px-2.5 py-3 text-sm font-medium " + (tab===t.id?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground")}> {t.label}
))}
{tab==='personal' && (
Thông tin cá nhân
{!P.readOnly && setEditTarget('personal')}>Chỉnh sửa}
{[ ['Họ và tên', e.name ], ['Giới tính', 'Nữ' ], ['Ngày sinh', '15/04/1992' ], ['Quốc tịch', 'VNM · Việt Nam'], ['Tình trạng HN', 'Đã kết hôn' ], ['Nhóm máu', 'O+' ], ].map(([label,val],i)=>(
{label}
{val}
))} {[ ['GPLX số', canViewPii?'B2-01234567':'••••••4567'], ['GPLX hết hạn','15/04/2028'], ['Tên khai thuế','Nguyễn Thị Lan'], ['Mã nhân viên cũ','— (không có)'], ].map(([label,val],i)=>(
{label}
{val}
))}
Số CCCD & mã số thuế được mã hoá khi lưu trữ, mặc định chỉ hiển thị 4 số cuối. Chỉ vai trò có quyền xem dữ liệu nhạy cảm mới thấy đầy đủ; mỗi lần xem đều được ghi lại.
)} {tab==='employment' && (
Dữ liệu việc làm
{!P.readOnly && setEditTarget('employment')}>Chỉnh sửa}
{[ { l:'Chức danh', v:e.title }, { l:'Đơn vị', v:'Phòng Nhân sự' }, { l:'Loại hợp đồng', v:'Toàn thời gian', restrict:true }, { l:'Bậc lương', v:'Grade B3', restrict:true }, { l:'Ca làm việc', v:'Hành chính (8–17h)', hide:true }, { l:'Địa điểm làm việc', v:e.loc }, { l:'Ngày vào làm', v:e.hire }, { l:'Quản lý trực tiếp', v:e.supervisor }, { l:'Quản lý thay thế', v:'Bùi Thị Linh', hide:true }, { l:'Là quản lý?', v:'Có (3 cấp dưới)', hide:true }, ].filter(f=>!(P.readOnly && f.hide)).map((f,i)=>( : f.v} /> ))}
{!P.readOnly && (
Chuỗi báo cáo · theo quản lý trực tiếp
{[e.name, e.supervisor, 'Ban Giám Đốc'].map((n,i,arr)=>(
{n}
{i===0?e.title:i===1?'HR Director':'CEO'}
{i} ))}
)}
)} {tab==='contact' && (
Thông tin liên lạc{P.readOnly && · chỉ liên lạc công việc}
{!P.readOnly && setEditTarget('contact')}>Chỉnh sửa}
{[ { l:'Email công ty', v:e.email + ' · chính' }, { l:'Email cá nhân', v:'lan.nguyen.personal@gmail.com', restrict:true }, { l:'SĐT di động', v:e.phone, restrict:true }, { l:'SĐT nhà', v:'024 3456 7890', restrict:true }, { l:'SĐT công ty', v:'028 1234 5678' }, { l:'Địa chỉ · Thường trú (chính)', v:'15 Trần Duy Hưng, Cầu Giấy, Hà Nội, VNM', restrict:true }, { l:'Địa chỉ · Nhận thư', v:'92 Láng Hạ, Đống Đa, Hà Nội, VNM', restrict:true }, ].map((f,i)=>( : f.v} /> ))}
Liên lạc khẩn cấp · {P.readOnly ? 'chỉ tên & số điện thoại' : 'tối thiểu 1, tối đa 5'}
{[ { name:'Nguyễn Văn Bình', rel:'Vợ/Chồng', phone:'0987 654 321', primary:true }, { name:'Trần Thị Minh', rel:'Cha/Mẹ', phone:'0976 543 210', primary:false }, ].map((c,i)=>(
{c.name}
{P.readOnly ? c.phone + ' · quan hệ ẩn' : c.rel + ' · ' + c.phone}
{c.primary && Chính}
))}
)} {tab==='dependents' && (
2 người phụ thuộc · {P.readOnly ? 'chỉ tên & quan hệ' : 'tối đa 20'}
{!P.readOnly && Thêm người PT}
{[ { name:'Nguyễn Hà Linh', rel:'Con', gender:'Nữ', dob:'12/05/2018', cccd4:'8821', tax:true, financial:true, emg:true }, { name:'Nguyễn Minh Anh', rel:'Con', gender:'Nam',dob:'08/09/2021', cccd4:'9930', tax:true, financial:false, emg:false }, ].map((d,i)=>(
{d.name}
{P.readOnly ? (
{d.rel}
) : (<>
{d.rel} · {d.gender} · Sinh: {d.dob} · CCCD ••••••{d.cccd4}
{d.tax && Giảm trừ thuế} {d.financial && Phụ thuộc tài chính} {d.emg && Liên hệ khẩn cấp}
)}
{!P.readOnly && (
)}
))}
)} {tab==='documents' && (
Tài liệu đính kèm · 5 tệp · lưu trữ an toàn
Tải lên tài liệu
{/* Dropzone */}
Kéo thả tệp vào đây hoặc bấm để chọn
PDF, JPG, PNG · tối đa 10MB · CCCD/CMND, hợp đồng, CV, chứng chỉ
{[ { type:'national_id', name:'CCCD_NguyenThiLan.pdf', size:'1.2 MB', by:'Hồ Văn Minh', at:'01/03/2024' }, { type:'contract', name:'HopDongLaoDong_2024.pdf', size:'480 KB', by:'Hồ Văn Minh', at:'01/03/2024' }, { type:'resume', name:'CV_NguyenThiLan.pdf', size:'320 KB', by:'Nguyễn Thị Lan',at:'28/02/2024' }, { type:'certificate', name:'ChungChi_PMP.pdf', size:'890 KB', by:'Nguyễn Thị Lan',at:'10/06/2024' }, { type:'photo', name:'Anh_3x4.jpg', size:'210 KB', by:'Hồ Văn Minh', at:'01/03/2024' }, ].map((doc,i)=>{ const cfg = DOC_TYPE_CFG[doc.type]; return (
{doc.name} {cfg.sensitive && Nhạy cảm}
{cfg.label} · {doc.size} · {doc.by} · {doc.at}
); })}
Tài liệu CCCD/CMND chỉ tải về được khi có quyền xem dữ liệu nhạy cảm. Mọi thao tác tải lên / xoá đều được ghi vào lịch sử.
)} {tab==='custom' && (
Trường tuỳ chỉnh · do quản trị viên cấu hình
Quản lý trường
{[ { label:'Mã số BHXH', type:'text', val:'0123 456 789', ess:true }, { label:'Size áo đồng phục', type:'dropdown', val:'L', ess:true }, { label:'Ngày ký NDA', type:'date', val:'05/03/2024', ess:false }, { label:'Đã hoàn thành ATLĐ', type:'checkbox', val:'Có', ess:false }, { label:'Số tài khoản ngân hàng',type:'text', val:'1903 •••• 4521',ess:false }, { label:'Mức phụ cấp ăn trưa', type:'number', val:'730.000 ₫', ess:true }, ].map((f,i)=>(
{f.label} {({text:'Văn bản',number:'Số',date:'Ngày',dropdown:'Danh sách',checkbox:'Có/Không'})[f.type]} {f.ess && NV xem được}
{f.val}
))}
)} {tab==='history' && (
Lịch sử thay đổi
Toàn bộ thay đổi đều được ghi lại
{[ { field:'Số CCCD', old:'(đã ẩn)', nv:'(đã ẩn)', action:'Cập nhật hồ sơ', by:'Hồ Văn Minh (Quản trị)', time:'02/06/2026 09:14', type:'admin' }, { field:'Trạng thái HN', old:'Độc thân', nv:'Đã kết hôn', action:'Cập nhật hồ sơ', by:'Nguyễn Thị Lan (Tự cập nhật)', time:'15/02/2026 10:22', type:'self' }, { field:'Chức danh', old:'HR Specialist', nv:'HR Manager', action:'Cập nhật hồ sơ', by:'Hồ Văn Minh (Quản trị)', time:'01/03/2025 09:00', type:'admin' }, { field:'Tài liệu', old:'—', nv:'ChungChi_PMP.pdf', action:'Tải lên tài liệu', by:'Nguyễn Thị Lan (Tự cập nhật)', time:'10/06/2024 16:40', type:'self' }, ].map((ev,i)=>(
Thay đổi {ev.field} {ev.action}
{ev.old} {ev.nv}
bởi {ev.by} · {ev.time}
))}
)}
); }; // ─── 03: Add Employee Form ───────────────────────────────────────────────────── const PIMCreateScreen = () => ( Hủy Lưu hồ sơ }>
{[ { title:'Thông tin cá nhân', icon:'user', fields:[ [{ label:'Họ *', ph:'Nguyễn', w:'1fr' }, { label:'Tên đệm', ph:'Thị', w:'1fr' }, { label:'Tên *', ph:'Lan', w:'1fr' }], [{ label:'Ngày sinh * (≥16 tuổi)', ph:'dd/mm/yyyy', type:'date', w:'1fr' }, { label:'Giới tính *', type:'select', opts:['— Chọn —','Nam','Nữ','Khác','Không tiết lộ'], w:'1fr' }], [{ label:'Quốc tịch *', ph:'Việt Nam', w:'1fr' }, { label:'Tình trạng hôn nhân *', type:'select', opts:['— Chọn —','Độc thân','Đã kết hôn','Ly hôn','Goá','Ly thân','Sống chung'], w:'1fr' }], [{ label:'Số CCCD/CMND', ph:'012345678901', pii:true, w:'1fr' }, { label:'Mã số thuế', ph:'8234567890', pii:true, w:'1fr' }, { label:'Tên khai thuế', ph:'Nguyễn Thị Lan', w:'1fr' }], [{ label:'Nhóm máu', type:'select', opts:['— Chọn —','A+','A-','B+','B-','AB+','AB-','O+','O-','Không rõ'], w:'1fr' }, { label:'GPLX số', ph:'B2-01234567', w:'1fr' }, { label:'GPLX hết hạn', ph:'dd/mm/yyyy', type:'date', w:'1fr' }], ]}, { title:'Thông tin việc làm', icon:'briefcase', fields:[ [{ label:'Chức danh *', type:'select', opts:['— Chọn chức danh —','HR Manager','Software Engineer','Accountant'], w:'1fr' }, { label:'Đơn vị *', type:'select', opts:['— Chọn đơn vị —','Phòng Nhân sự','Engineering','Marketing'], w:'1fr' }], [{ label:'Loại hợp đồng *', type:'select', opts:['— Chọn —','Toàn thời gian','Bán thời gian','Hợp đồng','Thực tập sinh','Thời vụ'], w:'1fr' }, { label:'Ngày vào làm *', ph:'dd/mm/yyyy', type:'date', w:'1fr' }], [{ label:'Quản lý trực tiếp', ph:'Tìm nhân viên đang làm việc...', w:'1fr' }, { label:'Quản lý thay thế', ph:'Tuỳ chọn...', w:'1fr' }], [{ label:'Địa điểm làm việc', type:'select', opts:['Hà Nội','HCM','Đà Nẵng'], w:'1fr' }, { label:'Ca làm việc', type:'select', opts:['Hành chính (standard)','Xoay ca','Ca đêm','Linh hoạt','Trực'], w:'1fr' }], [{ label:'Mã NV (chính)', ph:'Tự động sinh khi lưu — EMP-YYYY-NNNN', dis:true, w:'1fr' }], ]}, { title:'Thông tin liên lạc & khẩn cấp', icon:'phone', fields:[ [{ label:'Email công ty *', ph:'ten@els.tech', w:'1fr' }, { label:'SĐT di động', ph:'+84 9xx xxx xxx', w:'1fr' }], [{ label:'Địa chỉ thường trú', ph:'Số nhà, đường...', w:'2fr' }, { label:'Tỉnh/Thành phố', type:'select', opts:['Hà Nội','HCM','Đà Nẵng'], w:'1fr' }], [{ label:'Liên hệ khẩn cấp — Họ tên *', ph:'Nguyễn Văn Bình', w:'1fr' }, { label:'Quan hệ *', type:'select', opts:['Vợ/Chồng','Cha/Mẹ','Con','Anh/Chị/Em','Bạn bè','Khác'], w:'1fr' }], ]}, ].map((sec,si)=>(
{sec.title}
{sec.fields.map((row,ri)=>(
f.w||'1fr').join(' ') }}> {row.map((f,fi)=>(
{f.type==='select' ? }
))}
))}
))}
{/* Right sidebar */}
Ảnh đại diện
PNG, JPG tối đa 5MB · lưu trữ an toàn
Chọn ảnh
Tạo tài khoản đăng nhập
Hồ sơ nhân viên có thể tồn tại độc lập với tài khoản đăng nhập (User Management module xử lý liên kết).
Tiến trình nhập liệu
{[ { label:'Thông tin cá nhân', done:false }, { label:'Thông tin việc làm', done:false }, { label:'Liên lạc & khẩn cấp', done:false }, { label:'Tài liệu đính kèm (tuỳ chọn)', done:false }, ].map((s,i)=>(
{s.done && }
{s.label}
))}
); // ─── 04: ESS Self-Service View ──────────────────────────────────────────────── const PIMESSScreen = () => { const [tab, setTab] = React.useState('personal'); // ESS field editability matrix (§8.2): 'direct' = lưu ngay; 'request' = qua EditRequest; 'no' = chỉ HR const ESS_PERSONAL = [ { label:'Họ và tên', val:'Nguyễn Thị Lan', edit:'request' }, { label:'Ngày sinh', val:'15/04/1992', edit:'request' }, { label:'Giới tính', val:'Nữ', edit:'request' }, { label:'Quốc tịch', val:'VNM · Việt Nam', edit:'request' }, { label:'Tình trạng hôn nhân',val:'Đã kết hôn', edit:'direct' }, { label:'Nhóm máu', val:'O+', edit:'direct' }, { label:'GPLX số', val:'B2-01234567', edit:'direct' }, { label:'Email cá nhân', val:'lan.ng@gmail.com', edit:'direct' }, { label:'SĐT di động', val:'0912 345 678', edit:'direct' }, { label:'CCCD / MST', val:'••••••3456 / ••••••7890', edit:'no' }, ]; // Tab Liên lạc — SĐT & email cá nhân sửa trực tiếp; email công ty do HR quản lý const ESS_CONTACT = [ { label:'Email công ty', val:'lan.nguyen@els.tech', edit:'no' }, { label:'Email cá nhân', val:'lan.nguyen.personal@gmail.com', edit:'direct' }, { label:'SĐT di động', val:'0912 345 678', edit:'direct' }, { label:'SĐT nhà', val:'024 3456 7890', edit:'direct' }, { label:'Địa chỉ · Thường trú',val:'15 Trần Duy Hưng, Cầu Giấy, Hà Nội',edit:'direct' }, { label:'Địa chỉ · Nhận thư', val:'92 Láng Hạ, Đống Đa, Hà Nội', edit:'direct' }, ]; // Liên hệ khẩn cấp — nhân viên tự quản lý (sửa trực tiếp) const ESS_EMERGENCY = [ { name:'Nguyễn Văn Bình', rel:'Vợ/Chồng', phone:'0987 654 321', primary:true }, { name:'Trần Thị Minh', rel:'Cha/Mẹ', phone:'0976 543 210', primary:false }, ]; // Người phụ thuộc — thêm/sửa đều phải gửi HR duyệt vì ảnh hưởng giảm trừ thuế const ESS_DEPENDENTS = [ { name:'Nguyễn Hà Linh', rel:'Con', gender:'Nữ', dob:'12/05/2018', cccd4:'8821', tax:true, status:'approved' }, { name:'Nguyễn Minh Anh', rel:'Con', gender:'Nam', dob:'08/09/2021', cccd4:'9930', tax:true, status:'pending' }, ]; const EDIT_TAG = { direct: { label:'Sửa trực tiếp', color:'var(--color-success)', bg:'var(--color-success-soft)', icon:'edit' }, request: { label:'Cần HR duyệt', color:'var(--color-warning)', bg:'var(--color-warning-soft)', icon:'send' }, no: { label:'Chỉ HR sửa', color:'var(--color-muted-foreground)', bg:'var(--color-muted)', icon:'lock' }, }; return ( Gửi yêu cầu chỉnh sửa}>
{/* Left */}
Nguyễn Thị Lan
HR Manager · EMP-2024-0001
Đang làm việc
{/* Pending edit request */}
Yêu cầu đang chờ
Đổi “Họ và tên”
Lan → Lan Anh · chờ HR duyệt · gửi 12/06/2026
{/* Quick actions */} {[ { icon:'umbrella', label:'Xin nghỉ phép', color:'var(--color-primary)' }, { icon:'clock', label:'Xem chấm công', color:'var(--color-info)' }, { icon:'dollar', label:'Phiếu lương', color:'var(--color-warning)' }, { icon:'paperclip',label:'Tài liệu của tôi',color:'var(--color-success)'}, ].map((a,i)=>(
{a.label}
))}
{/* Right */}
Trường “Sửa trực tiếp” lưu ngay không cần duyệt. Trường “Cần HR duyệt” (tên, ngày sinh, giới tính, quốc tịch) phải gửi yêu cầu và chờ HR phê duyệt.
{['Thông tin cá nhân','Liên lạc','Người phụ thuộc'].map((t,i)=>(
setTab(['personal','contact','dependents'][i])} className={"-mb-px cursor-pointer border-b-2 px-3.5 py-3 text-sm font-medium " + (tab===(['personal','contact','dependents'][i])?"border-primary text-primary":"border-transparent text-muted-foreground hover:text-foreground")}>{t}
))}
{tab==='personal' && (
{ESS_PERSONAL.map((f,i)=>{ const tag = EDIT_TAG[f.edit]; return (
{f.label}
{f.val}
{tag.label}
); })}
)} {tab==='contact' && (
Thông tin liên lạc
{ESS_CONTACT.map((f,i)=>{ const tag = EDIT_TAG[f.edit]; return (
{f.label}
{f.val}
{tag.label}
); })}
Liên lạc khẩn cấp · bạn tự quản lý · tối thiểu 1
Thêm liên hệ
{ESS_EMERGENCY.map((c,i)=>(
{c.name}
{c.rel} · {c.phone}
{c.primary && Chính}
))}
SĐT, email cá nhân và liên hệ khẩn cấp được lưu ngay. Riêng địa chỉ thường trú cần HR duyệt.
)} {tab==='dependents' && (
Người phụ thuộc của tôi · 2 người · dùng cho giảm trừ thuế
Thêm người PT
{ESS_DEPENDENTS.map((d,i)=>(
{d.name}
{d.rel} · {d.gender} · Sinh: {d.dob} · CCCD ••••••{d.cccd4}
{d.tax && Giảm trừ thuế}
))}
Thêm hoặc chỉnh sửa người phụ thuộc được lưu ngay, không cần HR duyệt.
)}
); }; // ─── 05: Termination Form ───────────────────────────────────────────────────── const PIMTerminationScreen = () => { const e = PIM_EMPLOYEES[1]; // Trần Minh Tuấn const [rehire, setRehire] = React.useState('yes'); const [exit, setExit] = React.useState('done'); return ( Hủy Xác nhận chấm dứt }>
Trạng thái cuối — không thể hoàn tác
Sau khi xác nhận: nhân viên chuyển sang Đã nghỉ việc, gỡ liên kết quản lý, dữ liệu lịch sử được bảo tồn, email công ty giải phóng sau 90 ngày. Tái tuyển dụng sẽ tạo hồ sơ mới.
{e.name}
{e.num} · {e.title} · {e.dept}
Ngày vào: {e.hire} · Thâm niên: 2 năm 1 tháng
Phải ≥ ngày vào làm và ≤ hôm nay