// ============================================================ // DOMAIN DETAIL — Checklist, Comments, Info // ============================================================ window.DomainDetailPage = function({ domainId, onNavigate }) { const [domain, setDomain] = React.useState(null); const [checkItems, setCheckItems] = React.useState([]); const [comments, setComments] = React.useState([]); const [loading, setLoading] = React.useState(true); const [activePhase, setActivePhase] = React.useState(0); const [activeTab, setActiveTab] = React.useState('checklist'); const [showEdit, setShowEdit] = React.useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false); const isAdmin = Store.isAdmin(); const user = Store.getUser(); React.useEffect(() => { if (domainId) load(); }, [domainId]); const load = async () => { setLoading(true); try { const [d, ciRes, cmRes] = await Promise.all([ API.getOne('domains', domainId), API.get('checklist_items', { limit: 1000 }), API.get('comments', { limit: 500 }) ]); setDomain(d); const ci = (ciRes.data || []).filter(c => c.domain_id === domainId); setCheckItems(ci); const cm = (cmRes.data || []).filter(c => c.domain_id === domainId); setComments(cm); } catch(e) { toast('Lỗi tải dữ liệu domain', 'error'); } setLoading(false); }; // Calculate per-phase progress const phaseProgress = (phaseId) => { const keys = getPhaseItemKeys(phaseId); if (!keys.length) return 0; const done = keys.filter(k => { const ci = checkItems.find(c => c.item_key === k && c.domain_id === domainId); return ci?.status === 'done'; }).length; return Math.round((done / keys.length) * 100); }; const overallProgress = () => { let total = 0, done = 0; SOP_PHASES.forEach(p => { const keys = getPhaseItemKeys(p.id); total += keys.length; done += keys.filter(k => { const ci = checkItems.find(c => c.item_key === k && c.domain_id === domainId); return ci?.status === 'done'; }).length; }); return total ? Math.round((done / total) * 100) : 0; }; // Update checklist item const updateItem = async (key, status, value) => { const existing = checkItems.find(c => c.item_key === key && c.domain_id === domainId); const phase = SOP_PHASES.find(p => p.sections.some(s => s.items.some(i => i.key === key))); try { let updated; if (existing) { updated = await API.patch('checklist_items', existing.id, { status: status !== undefined ? status : existing.status, item_value: value !== undefined ? value : existing.item_value, checked_by: user?.id, checked_at: Date.now() }); setCheckItems(prev => prev.map(c => c.id === updated.id ? updated : c)); } else { updated = await API.post('checklist_items', { id: uuid(), domain_id: domainId, phase: phase?.id || 0, phase_name: phase?.name || '', item_key: key, item_label: '', item_value: value || '', status: status || 'done', checked_by: user?.id, checked_at: Date.now() }); setCheckItems(prev => [...prev, updated]); } // Update domain progress const allItems = existing ? checkItems.map(c => c.id === updated.id ? updated : c) : [...checkItems, updated]; let total = 0, done = 0; SOP_PHASES.forEach(p => { const keys = getPhaseItemKeys(p.id); total += keys.length; done += keys.filter(k => { const ci = allItems.find(c => c.item_key === k && c.domain_id === domainId); return ci?.status === 'done'; }).length; }); const newProgress = total ? Math.round((done / total) * 100) : 0; const currentPhase = SOP_PHASES.findIndex(p => { const keys = getPhaseItemKeys(p.id); if (!keys.length) return false; const doneCnt = keys.filter(k => allItems.find(c => c.item_key === k && c.domain_id === domainId && c.status === 'done')).length; return doneCnt < keys.length; }); await API.patch('domains', domainId, { overall_progress: newProgress, current_phase: currentPhase >= 0 ? currentPhase : 13 }); await logAction('update_checklist', `Cập nhật checklist: ${key} → ${status}`, domainId, domain?.domain_name, phase?.id, key); } catch(e) { toast('Lỗi cập nhật', 'error'); } }; const getItemState = (key) => { const ci = checkItems.find(c => c.item_key === key && c.domain_id === domainId); return { status: ci?.status || 'pending', value: ci?.item_value || '' }; }; // CHECKLIST ITEM COMPONENT const CheckItem = ({ item }) => { const { status, value } = getItemState(item.key); const [inputVal, setInputVal] = React.useState(value); const [showMenu, setShowMenu] = React.useState(false); const menuRef = React.useRef(); React.useEffect(() => { setInputVal(value); }, [value]); React.useEffect(() => { const handler = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setShowMenu(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); const statusIcon = { done: 'fa-check', in_progress: 'fa-spinner', na: 'fa-minus', pending: '' }; const isDone = status === 'done'; return (
updateItem(item.key, isDone ? 'pending' : 'done')}> {status !== 'pending' && }
{item.label}
{item.hasInput && (
setInputVal(e.target.value)} placeholder={item.placeholder || 'Nhập thông tin...'}/>
)} {value && !item.hasInput && status !== 'pending' && (
{value}
)}
{showMenu && (
{[['done','fa-check-circle','var(--green)','Hoàn thành'],['in_progress','fa-clock','var(--yellow)','Đang làm'],['na','fa-ban','var(--t3)','Không áp dụng'],['pending','fa-circle','var(--border)','Reset']].map(([s,ic,cl,lb]) => (
{ updateItem(item.key, s); setShowMenu(false); }}> {lb}
))}
)}
); }; // PHASE CHECKLIST const PhaseChecklist = ({ phase }) => { const phaseCmts = comments.filter(c => c.phase === phase.id); const [cmtText, setCmtText] = React.useState(''); const [cmtType, setCmtType] = React.useState('note'); const [submitting, setSubmitting] = React.useState(false); const submitComment = async () => { if (!cmtText.trim()) return; setSubmitting(true); try { const nc = await API.post('comments', { id: uuid(), domain_id: domainId, phase: phase.id, item_key: '', author_id: user?.id, author_name: user?.full_name, author_role: user?.role, content: cmtText, type: cmtType }); setComments(prev => [...prev, nc]); setCmtText(''); await logAction('add_comment', `Thêm comment giai đoạn ${phase.id}: ${cmtText.slice(0,60)}`, domainId, domain?.domain_name, phase.id); toast('Đã thêm ghi chú', 'success'); } catch(e) { toast('Lỗi thêm comment', 'error'); } setSubmitting(false); }; const typeLabels = { note:'Ghi chú', correction:'Yêu cầu sửa', warning:'Cảnh báo', approval:'Duyệt OK' }; return (
{phase.sections.map((sec, si) => (
{sec.title} {sec.items.filter(it => checkItems.find(c => c.item_key === it.key && c.domain_id === domainId && c.status === 'done')).length}/{sec.items.length} hoàn thành
{sec.items.map(item => )}
))} {/* COMMENTS SECTION */}
Ghi chú / Comment giai đoạn này {phaseCmts.length > 0 && {phaseCmts.length}}
{phaseCmts.length > 0 && (
{phaseCmts.map(c => { const typeClsMap = { note:'b-info', correction:'b-warning', warning:'b-danger', approval:'b-success' }; return (
{c.author_name} {formatDate(c.created_at)}
{c.content}
); })}
)}