/* ============================================================
바른셈 — 변동분 검수 워크플로 (§8 상태 전이 + 잠금)
============================================================ */
function Review({ ctx }) {
const { clients, statusOf, go, addAudit, toast, t, period, auditOf, hrChangesOf, rejectClient, transition, gateFor } = ctx;
const FLOW = window.BARUNSEM.FLOW;
const client = clients.find((c) => c.id === (ctx.params.clientId || clients[0].id)) || clients[0];
const st = statusOf(client.id);
const [mark, setMark] = useState({}); // e.id → "ok" | "issue" (상호배타 triage)
const [showAll, setShowAll] = useState(false); // 변동 없는 행 펼치기
const [rejectOpen, setRejectOpen] = useState(false);
const [rejectText, setRejectText] = useState("");
const [openTs, setOpenTs] = useState(null); // §06 근태 근거 drill-down 대상 empId
const [dismissTarget, setDismissTarget] = useState(null); // §01 경고 끄기 대상
const [dismissReason, setDismissReason] = useState("");
const [dismissMonths, setDismissMonths] = useState(3); // C9 — 무기한 끄기 금지. 기본 3개월 후 재발화.
const [resolveTarget, setResolveTarget] = useState(null); // 근로자 이의제기 처리 대상
const [resolveMemo, setResolveMemo] = useState("");
const [rejectCode, setRejectCode] = useState("근거자료 누락"); // §05 반려 사유 구조화
const [rejectScope, setRejectScope] = useState("client");
const [rejectTarget, setRejectTarget] = useState("");
useEffect(() => { setMark({}); setShowAll(false); }, [client.id]);
const emps = client.employees;
const reviewable = st === "in_review";
// §01 검수 자동 점검 findings (순수함수 소비 — 읽기전용 신호). 확정은 노무사.
const audit = ctx.clientAudit(client);
const findingsByEmp = {};
audit.findings.forEach((f) => { if (f.empId) (findingsByEmp[f.empId] = findingsByEmp[f.empId] || []).push(f); });
const canDismiss = ["submitted", "in_review", "locked", "calculated"].includes(st);
const dismissedHere = client.employees.reduce((s, e) => s + ((ctx.dismissals[e.id] || []).length), 0);
// 변동분 판정 — 이번달 variation 이 전월(prevVariation)과 다르면 '변동 있음'
const VKEYS = ["overtime", "night", "holiday", "holidayOver", "bonus", "absentDays"];
const hasChange = (e) => { const v = e.variation || {}, p = e.prevVariation || {}; if (e.hourlyMode && (e.workedHours || 0) !== (e.prevWorked || 0)) return true; if ((v.etcDeductions || []).length) return true; return VKEYS.some((k) => (v[k] || 0) !== (p[k] || 0)); };
const sevRank = (id) => { const fs = findingsByEmp[id] || []; return fs.some((f) => f.severity === "error") ? 0 : fs.some((f) => f.severity === "warn") ? 1 : fs.length ? 2 : 3; };
// W3-1 — 플래그 있는 행이 위로. 20명 표에서 아래로 스크롤해야 보이는 신호는 없는 신호와 같다(E1).
const changedEmps = emps.filter(hasChange).sort((a, b) => sevRank(a.id) - sevRank(b.id));
const unchangedEmps = emps.filter((e) => !hasChange(e));
const okCount = changedEmps.filter((e) => mark[e.id] === "ok").length;
const issueEmps = changedEmps.filter((e) => mark[e.id] === "issue");
const issueCount = issueEmps.length;
const triagedCount = okCount + issueCount;
/* C6·C8 잠금 게이트 —
· 확인 단위는 근로자가 아니라 (근로자 × 플래그 코드). 플래그 3건인데 하나 보고 셋이 처리되면 안 된다.
· 변동 없는 근로자의 error 플래그도 잠금을 막는다. 전엔 changedEmps만 봐서 그냥 통과했다. */
const openErrors = ctx.openErrorsOf(client);
const openErrorKeys = openErrors.filter((f) => f.empId).map((f) => f.empId + "|" + f.code);
const unresolvedErrors = openErrorKeys.filter((k) => mark[k] !== "ok");
const allReviewed = changedEmps.every((e) => mark[e.id] === "ok") && unresolvedErrors.length === 0;
const setOk = (id) => setMark((m) => ({ ...m, [id]: m[id] === "ok" ? undefined : "ok" }));
const setIssue = (id) => setMark((m) => ({ ...m, [id]: m[id] === "issue" ? undefined : "issue" }));
// 일괄 확인은 '플래그 없는 행만'. 미해결 플래그를 일괄로 덮으면 검수가 형식이 된다(C6).
const flaggedIds = new Set(audit.findings.filter((f) => f.severity !== "info" && f.empId).map((f) => f.empId));
const bulkTargets = changedEmps.filter((e) => !flaggedIds.has(e.id) && mark[e.id] !== "issue");
const bulkConfirm = () => {
setMark((m) => { const n = { ...m }; bulkTargets.forEach((e) => { n[e.id] = "ok"; }); return n; });
const skipped = changedEmps.length - bulkTargets.length;
toast(`플래그 없는 ${bulkTargets.length}명을 확인 처리했습니다${skipped ? ` · 플래그 ${skipped}명은 개별 확인이 필요합니다` : ""}`, "ok");
};
const idx = FLOW.findIndex((f) => f.key === st);
// 표 행 데이터 셀 (변동 행·자동통과 행 공용)
const dataCells = (e) => { const v = e.variation, p = e.prevVariation || {}; return (
<>
{e.name}{e.timesheet && } {e.dept} · {e.title} |
{!e.fiveOrMore && 5인미만} |
{e.hourlyMode
? {e.workedHours}h
: 고정} |
{v.overtime ? v.overtime : 0}{v.overtime !== undefined && } |
{v.night ? {v.night} : 0} |
{(v.holiday || v.holidayOver) ? ((v.holiday || 0) + (v.holidayOver || 0)) : 0} |
{v.bonus ? KRW(v.bonus) : —} |
{(v.etcDeductions || []).length ? v.etcDeductions.map((d) => {d.name} {KRW(d.amount)}) : —} |
); };
const log = auditOf(client.id);
const startReview = () => transition(client.id, "in_review", { toastText: "검수를 시작했습니다" });
const lock = (reason) => {
const r = transition(client.id, "locked", { reason,
label: `검수 완료·입력 잠금 (변동 ${changedEmps.length}명 확인 · 변동없음 ${unchangedEmps.length}명 자동)`,
toastText: "입력을 잠갔습니다 — 이후 변동분 동결" });
if (r.ok) setLockOpen(false);
};
// C6 — 게이트는 잠금 시점에 선다. 계산 실행 때 처음 묻던 것을 한 단계 앞으로 옮겼다.
const tryLock = () => {
if (!ctx.canReview) return toast("검수·입력 잠금은 노무사만 가능합니다", "warn");
if (unresolvedErrors.length) return setLockOpen(true); // 사유를 받고 진행
if (!allReviewed) return toast(`변동 ${changedEmps.length}명 중 ${okCount}명 확인 — 남은 행을 확인하거나 '변동 모두 확인'을 쓰세요`, "warn");
lock();
};
const calculate = () => {
const r = transition(client.id, "calculated", { toastText: "급여 계산을 완료했습니다" });
// 지연 이동은 그 사이 사용자가 누른 탭을 덮어써 해시와 화면이 어긋난다 — 바로 옮긴다.
if (r.ok) go("calc", { clientId: client.id });
};
const doDismiss = () => {
if (!dismissTarget || !dismissReason.trim()) return;
const until = ctx.dismissFinding(dismissTarget.empId, dismissTarget.code, dismissReason.trim(), { months: dismissMonths });
addAudit(client.id, `경고 끄기 — ${dismissTarget.empName} · ${window.BARUNSEM.FINDING_LABEL[dismissTarget.code] || dismissTarget.code} (사유: ${dismissReason.trim()} · ${until}까지)`);
toast(`경고를 껐습니다 — ${until}까지 · 사유 기록`, "ok");
setDismissTarget(null); setDismissReason("");
};
/* W2-4 반려 — 문자열 1줄이 아니라 {code, empIds[], memo} 구조. 고객 포털에서 체크리스트로 렌더된다. */
const reject = () => {
const empIds = rejectScope === "emp" && rejectTarget ? [rejectTarget] : issueEmps.map((e) => e.id);
const r = rejectClient(client.id, [{ code: rejectCode, empIds, memo: rejectText.trim() }]);
if (r && r.ok === false) return;
setRejectOpen(false); setRejectText(""); setRejectTarget("");
};
const [unlockOpen, setUnlockOpen] = useState(false);
const [unlockReason, setUnlockReason] = useState("");
const [lockOpen, setLockOpen] = useState(false);
const [lockReason, setLockReason] = useState("");
// C4 — 잠금 해제는 권한 + 사유 + 감사로그. 전엔 1클릭이었다.
const unlock = () => {
if (!unlockReason.trim()) return;
const r = transition(client.id, "in_review", { label: "잠금 해제 (재검수)", reason: unlockReason.trim(), toastText: "잠금을 해제했습니다 — 사유 기록" });
if (r.ok) { setUnlockOpen(false); setUnlockReason(""); }
};
return (
{/* 워크플로 표시 (tweak: reviewStyle) */}
{t.reviewStyle === "stepper" && (
)}
{t.reviewStyle === "board" && (
검수 보드
카드의 ◀ ▶ 는 권한·게이트를 통과할 때만 움직입니다
go("review", { clientId: cid })}
/* C1 — 보드 이동도 게이트웨이를 지난다. 전엔 여기서 CAN 검사·스냅샷 없이 상태가 바뀌었다. */
canMove={(cid, toKey) => gateFor(cid, toKey)}
onMove={(cid, toKey, dir) => transition(cid, toKey, { label: (dir > 0 ? "보드에서 단계 진행" : "보드에서 단계 되돌림"), reason: dir < 0 ? "보드에서 되돌림" : undefined })} />
)}
{/* §01 검수 자동 점검 (findings 패널) — §09 근거 inline 펼침 + 플래그별 확인·반려 */}
} />
{audit.findings.length === 0
?
자동 점검 통과 — 이상 신호 없음
: audit.findings.map((f, i) =>
e.id === f.empId) : null} mark={mark[f.empId]} reviewable={reviewable} onOk={setOk} onIssue={setIssue} canDismiss={canDismiss} onDismiss={(ff) => { setDismissTarget(ff); setDismissReason(""); }}
onResolveDispute={(ff) => { setResolveTarget(ff); setResolveMemo(""); }} />)}
{dismissedHere > 0 && (
끈 경고 {dismissedHere}건 — 사유·기간 기록됨 · 기간이 끝나면 다시 뜹니다
)}
{/* 제출 정보 */}
{reviewable
? <>
변동 {changedEmps.length} · 변동없음 {unchangedEmps.length}
: 웹 폼 직접 제출}
} />
제출자 {client.contact}
표준 스키마 자동 정규화 — 엑셀 재입력 없음
= 2 ? "var(--warn)" : "inherit", fontWeight: 600 }}>{client.note}
| 근로자 | 급여체계 | 근로시간 |
연장(h) | 야간(h) | 휴일(h) |
상여 | 기타공제 | 검수 |
{(reviewable ? changedEmps : emps).map((e) => {
const mk = mark[e.id];
return (
{dataCells(e)}
|
{reviewable ? (
) : idx >= 3 ? : 대기}
|
{openTs === e.id && e.timesheet && (
|
|
)}
);
})}
{reviewable && unchangedEmps.length > 0 && !showAll && (
|
|
)}
{reviewable && showAll && unchangedEmps.map((e) => (
{dataCells(e)}
| 자동 통과 |
))}
{reviewable && showAll && unchangedEmps.length > 0 && (
|
|
)}
{/* 인사변동 (입·퇴사 → 4대보험 자격취득·상실) */}
{hrChangesOf(client.id).length > 0 && (() => {
const hr = hrChangesOf(client.id);
const joins = hr.filter((x) => x.kind === "join");
const leaves = hr.filter((x) => x.kind === "leave");
return (
신고용 서식 자동 반영} />
| 구분 | 근로자 | 부서·직급 | 일자 | 비고 |
|---|
{hr.map((x) => (
| {x.kind === "join"
? 입사
: 퇴사} |
{x.name} |
{x.dept}{x.title ? " · " + x.title : ""} |
{x.date} |
{x.kind === "join"
? <>자격취득 · {x.scheme} {x.base ? KRW(x.base) + "원" : ""}
: <>자격상실 · {x.reason || "—"}}
|
))}
);
})()}
{/* 액션 바 */}
{st === "submitted" && (<>
검수를 시작하세요
고객사가 제출한 변동분 {emps.length}건을 확인합니다.
)}
{st === "in_review" && (<>
변동 {changedEmps.length}명 중 {triagedCount}명 검토
{unchangedEmps.length > 0 &&
변동없음 {unchangedEmps.length} 자동}
{issueCount > 0 &&
이상 {issueCount}건}
{unresolvedErrors.length > 0 &&
미해결 오류 {unresolvedErrors.length}건 — 잠금 불가}
{/* 게이트가 막을 때는 버튼을 죽이지 않고 '왜'와 '다음 행동'을 준다.
disabled로만 두면 사유 입력이라는 탈출구에 도달할 방법이 없다(E2·W2-2). */}
)}
{st === "locked" && (<>
입력이 잠겼습니다 — 변동분 동결
이제 급여를 계산할 수 있습니다. 결과는 노무사 확정 전까지 발송되지 않습니다.
)}
{idx >= 4 && (<>
)}
{/* 타임라인 사이드 (tweak) */}
{t.reviewStyle === "timeline" && (
진행 단계
)}
{log.entries.length === 0 ?
아직 기록된 처리 내역이 없습니다.
:
log.entries.map((a, i) => (
{(a.actor || "강")[0]}
{(a.actor || "강도현").replace(/\s*노무사$/, "")}{a.actorRole && ctx.ROLE_LABEL[a.actorRole] && {ctx.ROLE_LABEL[a.actorRole]}}{!a.actorId && 고객사} · {a.action}{a.approvalOf && 결재}
{a.at}
))}
{resolveTarget && (
setResolveTarget(null)}
footer={<>
}>
{resolveTarget.empName} 근로자의 이의제기를 처리합니다.
{resolveTarget.message}
회신 내용 (근로자에게 전달·감사로그 기록)