/* ============================================================ Vela — S4 · UNDER_REVIEW review workspace (window.Review) Document viewer with annotations linked to an extracted-field panel, plus cross-document conflict resolution. ============================================================ */ (function () { const { useState } = React; const { fmtEur, Avatar, CaseStatus } = window.UI; // highlight styles for a field span inside a rendered document function fieldStyle(active, error) { if (active) return { background: error ? "rgba(224,75,67,.16)" : "rgba(20,102,255,.18)", outline: "2px solid " + (error ? "var(--red)" : "var(--gold)"), outlineOffset: 1, borderRadius: 4, animation: "pulseRing 1.4s ease 1" }; if (error) return { background: "rgba(224,75,67,.10)", outline: "1.5px dashed var(--red)", outlineOffset: 1, borderRadius: 4 }; return { background: "transparent", outline: "1.5px solid transparent", borderRadius: 4 }; } function F({ id, sel, setSel, error, children }) { const active = sel === id; return ( { e.stopPropagation(); setSel(id); }} style={{ cursor: "pointer", padding: "1px 4px", transition: "background .15s, outline-color .15s", ...fieldStyle(active, error) }}> {children} ); } // ---------- DNI document render (real specimen + overlaid annotations) ---------- const DNI_BOXES = [ { ref: "nif", l: 43.5, t: 17, w: 30, h: 7.5, label: "1" }, { ref: "nombre", l: 40.5, t: 26.5, w: 13.5, h: 22, label: "2" }, { ref: "sexo", l: 40.5, t: 50.5, w: 19, h: 7, label: "3" }, { ref: "nacimiento", l: 77, t: 50.5, w: 18.5, h: 7, label: "4" }, { ref: "validez", l: 56.5, t: 60, w: 16.5, h: 6.8, label: "5" }, ]; function DocDNI({ sel, setSel }) { return (
DNI · documento nacional de identidad {DNI_BOXES.map((b) => { const active = sel === b.ref; return ( ); })}
dni_carmen_especimen.jpg · specimen
); } // ---------- Nómina document render ---------- function DocNomina({ sel, setSel }) { return (
RECIBO DE SALARIOS · NÓMINA
Adquira España S.A.
CIF A·82605965 · Madrid
Período
Febrero 2026
Carmen Española Española 99999998R 12·09·2019 1 · Ingenieros
{[["Salario base", "2.180,00 €"], ["Complemento puesto", "640,00 €"], ["Plus transporte", "160,00 €"]].map(([k, v]) => ( ))}
Devengos Importe
{k}{v}
Total devengado (bruto)2.980,00 €
Deducciones (IRPF + S.S.)− 638,83 €
3.214,00 €
LÍQUIDO A PERCIBIR 2.341,17 €
); } function Row({ label, children }) { return
{label}{children}
; } // ---------- main review ---------- function Review({ c, go, onApprove, onWhatsApp }) { const rd = window.VELA.reviewDocs[c.id]; const [selDoc, setSelDoc] = useState(rd.docs[0].id); const [selField, setSelField] = useState(null); const [confirmed, setConfirmed] = useState({}); const [edits, setEdits] = useState({}); const [editing, setEditing] = useState(null); const [conflictChoice, setConflictChoice] = useState({}); const doc = rd.docs.find((d) => d.id === selDoc); const key = (ref) => selDoc + ":" + ref; const confirmField = (ref) => setConfirmed((s) => ({ ...s, [key(ref)]: true })); const confirmAll = () => setConfirmed((s) => { const n = { ...s }; doc.fields.forEach((f) => { if (f.status !== "error") n[selDoc + ":" + f.ref] = true; }); return n; }); // conflict resolution updates the disputed field value + confirms it const resolveConflict = (cf, opt) => { setConflictChoice((s) => ({ ...s, [cf.id]: opt.ref })); // apply to nómina nif field setEdits((e) => ({ ...e, ["nomina-mf:nif"]: opt.value })); setConfirmed((s) => ({ ...s, ["nomina-mf:nif"]: true })); }; const fieldValue = (docId, f) => edits[docId + ":" + f.ref] != null ? edits[docId + ":" + f.ref] : f.value; const fieldConfirmed = (docId, ref) => !!confirmed[docId + ":" + ref]; // progress const allFields = rd.docs.flatMap((d) => d.fields.map((f) => d.id + ":" + f.ref)); const confirmedCount = allFields.filter((k) => confirmed[k]).length; const conflictsResolved = rd.conflicts.every((cf) => conflictChoice[cf.id]); const allConfirmed = confirmedCount === allFields.length; const canApprove = allConfirmed && conflictsResolved; const docReviewed = (d) => d.fields.every((f) => confirmed[d.id + ":" + f.ref]); return (
{/* summary bar */}
{c.borrower}
{c.id} · agent reviewed {rd.docs.length} document types
{[["Reviewed", confirmedCount + "/" + allFields.length, "var(--ink)"], ["Conflicts", (rd.conflicts.length - Object.keys(conflictChoice).length) + " open", conflictsResolved ? "var(--green)" : "var(--amber)"]].map(([k, v, col]) => (
{k}
{v}
))}
{/* doc navigator */}
{c.participants.map((p) => { const pdocs = rd.docs.filter((d) => d.participant === p.name); if (!pdocs.length) return null; return (
{p.name.split(" ").slice(0, 2).join(" ")}
{pdocs.map((d) => { const active = selDoc === d.id; const reviewed = docReviewed(d); return ( ); })}
); })}
{/* document viewer */}
setSelField(null)} style={{ overflowY: "auto", padding: "28px 24px", background: "repeating-linear-gradient(45deg,#EAEFF7,#EAEFF7 12px,#F1F5FB 12px,#F1F5FB 24px)" }}>
Each highlighted field is where the agent read its value. Select a field to locate it.
{doc.kind === "dni" ? : }
{/* field panel */}

Extracted fields

{doc.fields.map((f) => { const active = selField === f.ref; const conf = fieldConfirmed(doc.id, f.ref); const isErr = f.status === "error" && !conf; const val = fieldValue(doc.id, f); const isEditing = editing === doc.id + ":" + f.ref; return (
setSelField(f.ref)} style={{ padding: "11px 12px", borderRadius: 10, marginBottom: 4, cursor: "pointer", background: active ? "var(--gold-soft)" : "transparent", border: "1px solid " + (active ? "var(--gold-line)" : "transparent"), transition: "all .12s" }}>
{f.label} {conf ? Confirmed : isErr ? {f.hint} : unconfirmed}
{isEditing ? (
e.stopPropagation()}>
) : (
{val}
e.stopPropagation()}> {!isErr && !conf && }
)}
); })} {/* conflicts */} {rd.conflicts.length > 0 && (

Conflicts

{rd.conflicts.map((cf) => { const chosen = conflictChoice[cf.id]; return (
{chosen ? <> Resolved : <>{cf.summary}}
{!chosen ? (
{cf.options.map((opt) => ( ))}
) : (
{cf.options.find((o) => o.ref === chosen).value}
)}
); })}
)}
); } window.Review = Review; window.VelaDocs = { F, fieldStyle, DocDNI, DocNomina, DNI_BOXES }; })();