// Human review: one page per uploaded document, source PDF beside every extracted
// field.
//
// The older review surface (ManualMetadataReviewV2 in app.jsx) shows only the
// findings the metadata judge flagged, as a flat list, with no sight of the document
// they came from - a handler correcting a policy number has to open the PDF
// separately and find the line themselves. This page pairs the two: the real
// uploaded page on the left (rendered server-side by langgraph_app/review_api.py,
// which also reports where each value is printed), every extracted field editable on
// the right, and a click on either side highlighting the other.
//
// Edits are written back through POST /v1/medical/consensus/metadata-manual-review -
// the same endpoint the flagged-findings panel uses - so both surfaces land in the
// case manifest identically.
const { Button: DfrButton, IconButton: DfrIconButton, StatusPill: DfrStatusPill, Icon: DfrIcon } =
window.EasyClaimDesignSystem_b5ac63;
const DFR_API_BASE = location.port === '5500' ? 'http://localhost:8000' : '';
// Zoom steps rather than free scrolling: every step is a fresh server render, and a
// continuous slider would fire a render per pixel of travel.
const DFR_ZOOMS = [0.75, 1, 1.25, 1.5, 2, 2.5, 3];
const DFR_DEFAULT_ZOOM_INDEX = 3;
const DFR_FILTERS = ['All', 'Needs review', 'Empty', 'Edited', 'Verified', 'Not located'];
function dfrToken() {
return sessionStorage.getItem(window.EASYCLAIM_SESSION_TOKEN_KEY) || '';
}
async function dfrFetch(path, options) {
const response = await fetch(`${DFR_API_BASE}${path}`, {
...(options || {}),
headers: { Authorization: `Bearer ${dfrToken()}`, ...((options || {}).headers || {}) },
});
if (!response.ok) {
let detail = '';
try {
const body = await response.json();
detail = typeof body.detail === 'string' ? body.detail : JSON.stringify(body.detail || body);
} catch (err) {
detail = await response.text().catch(() => '');
}
throw new Error(detail || `Request failed (${response.status})`);
}
return response;
}
function dfrQuery(params) {
return Object.entries(params)
.filter(([, value]) => value !== undefined && value !== null && value !== '')
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
}
// The page endpoint needs a bearer token, so the image cannot be an ordinary pointing at it - it is fetched and handed to the as an object URL.
// Revoking is left to the cache eviction below so a page turned back to is instant.
function useDfrPageImage(caseId, document, page, zoom, rotate) {
const [state, setState] = React.useState({ url: '', loading: false, error: '' });
const cacheRef = React.useRef(new Map());
React.useEffect(() => {
if (!caseId || !document || !page) return undefined;
const key = `${document}|${page}|${zoom}|${rotate}`;
const cached = cacheRef.current.get(key);
if (cached) {
setState({ url: cached, loading: false, error: '' });
return undefined;
}
let cancelled = false;
setState((current) => ({ url: current.url, loading: true, error: '' }));
dfrFetch(`/v1/medical/consensus/cases/${encodeURIComponent(caseId)}/review/page?${dfrQuery({
document, page, scale: zoom, rotate,
})}`)
.then((response) => response.blob())
.then((blob) => {
if (cancelled) return;
const url = URL.createObjectURL(blob);
const cache = cacheRef.current;
cache.set(key, url);
// Keep a working set around the current page; drop the oldest beyond it.
while (cache.size > 12) {
const oldest = cache.keys().next().value;
URL.revokeObjectURL(cache.get(oldest));
cache.delete(oldest);
}
setState({ url, loading: false, error: '' });
})
.catch((err) => {
if (!cancelled) setState({ url: '', loading: false, error: err.message });
});
return () => { cancelled = true; };
}, [caseId, document, page, zoom, rotate]);
React.useEffect(() => {
const cache = cacheRef.current;
return () => {
cache.forEach((url) => URL.revokeObjectURL(url));
cache.clear();
};
}, []);
return state;
}
// Source boxes arrive in the unrotated page's 0-1000 space; the image on screen is
// the rotated render, so a viewer who rotated the page still needs the box over the
// same words.
function dfrRotateBox(box, rotate) {
const [x1, y1, x2, y2] = box;
const turn = ((rotate % 360) + 360) % 360;
if (turn === 90) return [1000 - y2, x1, 1000 - y1, x2];
if (turn === 180) return [1000 - x2, 1000 - y2, 1000 - x1, 1000 - y1];
if (turn === 270) return [y1, 1000 - x2, y2, 1000 - x1];
return [x1, y1, x2, y2];
}
function dfrIsBlank(value) {
return value === null || value === undefined || String(value).trim() === '';
}
// Field state drives the dot colour, the filter chips and the progress bar, in that
// order of precedence: an explicit tick beats everything, then what the judge said,
// then whether the extractor found anything at all.
//
// A blank field is deliberately NOT an error. The extraction schema covers every
// document type the pipeline accepts - police reports, bills, post mortems, salary
// slips - and any one document fills only its own sections, so most fields on any
// given page are legitimately empty. Red is reserved for a blank the judge itself
// called out as a fact the document does state.
function dfrStatusOf(field, entry) {
if (entry.verified) return 'ok';
if (field.flagged) return field.correction_type === 'missing' ? 'missing' : 'low';
if (entry.edited) return 'edited';
if (dfrIsBlank(entry.value)) return 'empty';
return 'pending';
}
// A field only needs a handler's decision if it holds something, or if the judge
// raised it. Counting the empty remainder would put 100% out of reach on every case.
function dfrNeedsDecision(field, entry) {
return field.flagged || !dfrIsBlank(entry.value);
}
const DFR_STATUS_COLOURS = {
ok: { dot: 'var(--green-500)', bg: 'var(--status-success-bg)', fg: 'var(--status-success-fg)' },
low: { dot: 'var(--amber-500)', bg: 'var(--status-warning-bg)', fg: 'var(--status-warning-fg)' },
missing: { dot: 'var(--red-500)', bg: 'var(--status-danger-bg)', fg: 'var(--status-danger-fg)' },
edited: { dot: 'var(--indigo-500)', bg: 'var(--status-info-bg)', fg: 'var(--status-info-fg)' },
empty: { dot: 'var(--slate-200)', bg: 'var(--bg-surface-sunken)', fg: 'var(--text-tertiary)' },
pending: { dot: 'var(--slate-300)', bg: 'var(--status-pending-bg)', fg: 'var(--status-pending-fg)' },
};
// A handler types into a text box; the manifest expects the type the extractor wrote.
// Retyping `18240.00` into a numeric field must not turn it into a string, and
// clearing a field must not turn a null into `""`.
function dfrCoerce(text, original) {
const trimmed = String(text);
if (trimmed.trim() === '') return original === null || original === undefined ? null : '';
if (typeof original === 'number') {
const parsed = Number(trimmed);
return Number.isFinite(parsed) ? parsed : trimmed;
}
if (typeof original === 'boolean') {
if (/^(true|yes)$/i.test(trimmed.trim())) return true;
if (/^(false|no)$/i.test(trimmed.trim())) return false;
}
return trimmed;
}
function dfrDisplay(value) {
if (value === null || value === undefined) return '';
if (typeof value === 'boolean') return value ? 'true' : 'false';
return String(value);
}
const DFR_SOURCE_RECORDS = {
certificate: {
label: 'Medical certificate', path: 'medical_leave_records[]', type: 'Medical Certificate',
fields: ['certificate_number', 'claimant_name', 'mc_from', 'mc_to', 'issued_by', 'certificate_date', 'days_as_stated', 'notes'],
},
expense: {
label: 'Receipt or bill', path: 'expense_records[]', type: 'Receipt',
fields: ['document_type', 'document_number', 'document_date', 'related_invoice_numbers', 'provider_name', 'billed_to', 'payer_name', 'patient_name', 'patient_identification_number', 'description', 'total_charges', 'patient_charge', 'patient_excess_amount', 'patient_excess_basis', 'amount_paid', 'balance_due', 'payment_status'],
},
clinical: {
label: 'Clinical event', path: 'clinical_events[]', type: 'Medical Report',
fields: ['claimant_name', 'claimant_identification_number', 'date', 'event', 'hospital_name'],
},
specialist: {
label: 'Specialist report', path: 'specialist_reports[]', type: 'Specialist Report',
fields: ['claimant_name', 'claimant_identification_number', 'examining_side', 'specialist_name', 'specialist_discipline', 'hospital_or_clinic_name', 'examination_date', 'report_date', 'specialist_findings'],
},
defendant: {
label: 'Insured or defendant', path: 'defendants[]',
fields: ['party_id', 'name', 'identification_number', 'vehicle_number', 'address', 'particulars', 'role_or_relationship'],
},
liability: {
label: 'Liability opinion allocation', path: 'solicitor_proposed_liability[]',
fields: ['proposed_percentage_or_share', 'reasoning'],
},
};
function dfrSourceRecordFields(document, kind, values, sourcePage, pageCount, sourceType = '') {
const spec = DFR_SOURCE_RECORDS[kind];
const source = Number(sourcePage);
if (!spec || !Number.isInteger(source) || source < 1 || source > pageCount) {
throw new Error('Choose a record type and a source page within this document.');
}
const value = Object.fromEntries(spec.fields.map((key) => [key, String(values[key] || '').trim() || null]));
if (kind === 'expense') value.related_invoice_numbers = [...new Set(String(values.related_invoice_numbers || '').split(/[,;\n]/).map((number) => number.trim()).filter(Boolean))];
if (kind === 'certificate' && (!value.claimant_name || !value.mc_from || !value.mc_to || !value.issued_by)) {
throw new Error('Enter the patient, both certificate dates and the issuing hospital or clinic.');
}
if (kind === 'expense' && (!value.document_type || !value.provider_name || !value.description)) {
throw new Error('Enter the original receipt/bill type, issuer and description.');
}
if (kind === 'clinical' && (!value.claimant_name || !value.date || !value.event || !value.hospital_name)) {
throw new Error('Enter the patient, event date, event description and hospital or clinic from the source page.');
}
if (kind === 'specialist' && (!value.claimant_name || !value.specialist_name || !value.specialist_findings || !/^(plaintiff|defendant)$/i.test(value.examining_side || ''))) {
throw new Error('Enter the patient, specialist, findings and commissioning side (Plaintiff or Defendant). Leave the examination date blank if it is not stated.');
}
if (kind === 'defendant' && (!value.party_id || !value.name)) {
throw new Error('Enter a new document-local party reference and the person’s name.');
}
if (kind === 'liability' && (!value.proposed_percentage_or_share || !value.reasoning)) {
throw new Error('Copy the allocation and its attributed reasoning from the source opinion.');
}
const fields = [{ document, field_path: spec.path, action: 'update', value, source_page: source }];
const clinicalContainer = /(?:medical|specialist)\s+report/i.test(sourceType);
if (spec.type) fields.push({
document, field_path: 'document_inventory[]', action: 'update', source_page: source,
value: { document_type: kind === 'expense' ? value.document_type : kind === 'specialist' ? `${spec.type} - ${value.examining_side}` : clinicalContainer && ['certificate', 'clinical'].includes(kind) ? sourceType : spec.type, document_title: value.certificate_number || value.document_number || spec.label, page_from: source, page_to: source },
});
return fields;
}
function DfrSplitter({ dragging, stacked, size, onPointerDown, onDoubleClick, onKeyDown }) {
return (
);
}
function dfrDocumentKey(doc) {
return doc.source_document_id || doc.filename;
}
function DfrDocumentTabs({ documents, activeName, onSelect, disabled }) {
return (
}
{loading && (