371 lines
27 KiB
TypeScript
371 lines
27 KiB
TypeScript
import { SearchableSelect } from '../../components/SearchableSelect';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import type { FormEvent } from 'react';
|
||
import { Link } from 'react-router';
|
||
import { Alert, errorMessage } from '../../components/Feedback';
|
||
import { Icon } from '../../components/Icon';
|
||
import {
|
||
closeInspectionFinding,
|
||
createInspectionFindingCommunication,
|
||
updateInspectionFindingFollowUp,
|
||
uploadInspectionFindingEvidence,
|
||
} from '../../lib/api';
|
||
import type {
|
||
InspectionFinding,
|
||
InspectionFindingCommunication,
|
||
InspectionFindingOfficeWorkflow,
|
||
} from '../../lib/api';
|
||
import { formatDate, formatDateOnly } from '../../lib/format';
|
||
|
||
function localDateTime(value: string | number | Date): string {
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return '';
|
||
const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
|
||
return local.toISOString().slice(0, 16);
|
||
}
|
||
|
||
function workflowFallback(finding: InspectionFinding): InspectionFindingOfficeWorkflow {
|
||
if (finding.status === 'CLOSED') {
|
||
return { stage: 'CLOSED', label: 'Hallazgo cerrado', action: 'El seguimiento está finalizado.', dueOn: null, overdue: false };
|
||
}
|
||
if (!finding.companyResponseReceivedOn) {
|
||
return { stage: 'WAITING_COMPANY', label: 'Esperando respuesta de empresa', action: 'Registrar la respuesta cuando sea recibida.', dueOn: finding.correctionDueOn, overdue: false };
|
||
}
|
||
if (finding.latestVerification?.outcome === 'RESOLVED' && finding.latestVerification.visitStatus === 'CLOSED') {
|
||
return { stage: 'READY_TO_CLOSE', label: 'Listo para cierre', action: 'Revisar la evidencia y cerrar administrativamente.', dueOn: null, overdue: false };
|
||
}
|
||
if (!finding.nextControlOn) {
|
||
return { stage: 'DEFINE_VERIFICATION', label: 'Definir fecha de verificación', action: 'Establecer cuándo debe volver a controlarse.', dueOn: null, overdue: false };
|
||
}
|
||
if (finding.verificationVisit) {
|
||
return { stage: 'VERIFICATION_PLANNED', label: 'Verificación planificada', action: 'Consultar la visita vinculada.', dueOn: finding.nextControlOn, overdue: false };
|
||
}
|
||
return { stage: 'PLAN_VERIFICATION', label: 'Verificación pendiente de planificación', action: 'Crear la visita de verificación.', dueOn: finding.nextControlOn, overdue: false };
|
||
}
|
||
|
||
function verificationEventLabel(eventType: NonNullable<InspectionFinding['verificationHistory']>[number]['eventType']): string {
|
||
if (eventType === 'CONTROL_DATE_DEFINED') return 'Fecha de verificación definida';
|
||
if (eventType === 'CONTROL_DATE_CHANGED') return 'Fecha de verificación reprogramada';
|
||
if (eventType === 'CONTROL_DATE_CLEARED') return 'Fecha de verificación consumida o retirada';
|
||
if (eventType === 'VISIT_PLANNED') return 'Visita de verificación planificada';
|
||
return 'Resultado de verificación registrado';
|
||
}
|
||
|
||
function verificationOutcomeLabel(outcome: NonNullable<InspectionFinding['latestVerification']>['outcome']): string {
|
||
if (outcome === 'RESOLVED') return 'Solucionado';
|
||
if (outcome === 'NOT_RESOLVED') return 'No solucionado';
|
||
if (outcome === 'REQUIRES_NEW_DATE') return 'Requiere nueva fecha';
|
||
return '';
|
||
}
|
||
|
||
|
||
export function FindingOfficeWorkspace({
|
||
finding,
|
||
canFollowUp,
|
||
canClose,
|
||
canCreateEvidence,
|
||
canCreateCommunications,
|
||
onFindingChanged,
|
||
onEvidenceChanged,
|
||
}: {
|
||
finding: InspectionFinding;
|
||
canFollowUp: boolean;
|
||
canClose: boolean;
|
||
canCreateEvidence: boolean;
|
||
canCreateCommunications: boolean;
|
||
onFindingChanged: (finding: InspectionFinding) => void;
|
||
onEvidenceChanged: () => void;
|
||
}) {
|
||
const responseFileRef = useRef<HTMLInputElement | null>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const [responseText, setResponseText] = useState('');
|
||
const [responseOccurredAt, setResponseOccurredAt] = useState(localDateTime(new Date()));
|
||
const [responseChannel, setResponseChannel] = useState<InspectionFindingCommunication['channel']>('EMAIL');
|
||
const [responseContactName, setResponseContactName] = useState('');
|
||
const [responseContactEmail, setResponseContactEmail] = useState('');
|
||
const [responseFile, setResponseFile] = useState<File | null>(null);
|
||
const [responseDueBasis, setResponseDueBasis] = useState<'FINDING_DATE' | 'REPORT_NOTIFICATION' | ''>(finding.responseDueBasis ?? '');
|
||
const [responseDueDays, setResponseDueDays] = useState(finding.responseDueDays == null ? '' : String(finding.responseDueDays));
|
||
const [reportNotifiedOn, setReportNotifiedOn] = useState(finding.reportNotifiedOn ?? '');
|
||
const [committedOn, setCommittedOn] = useState(finding.companyCommittedCorrectionOn ?? '');
|
||
const [nextControlOn, setNextControlOn] = useState(finding.nextControlOn ?? '');
|
||
const [closureNotes, setClosureNotes] = useState('');
|
||
|
||
useEffect(() => {
|
||
setResponseText('');
|
||
setResponseDueBasis(finding.responseDueBasis ?? '');
|
||
setResponseDueDays(finding.responseDueDays == null ? '' : String(finding.responseDueDays));
|
||
setReportNotifiedOn(finding.reportNotifiedOn ?? '');
|
||
setCommittedOn(finding.companyCommittedCorrectionOn ?? '');
|
||
setNextControlOn(finding.nextControlOn ?? '');
|
||
}, [finding.id, finding.responseDueBasis, finding.responseDueDays, finding.reportNotifiedOn, finding.companyCommittedCorrectionOn, finding.nextControlOn]);
|
||
|
||
const workflow = finding.officeWorkflow ?? workflowFallback(finding);
|
||
const hasResponse = Boolean(finding.companyResponseReceivedOn);
|
||
const verificationDone = Boolean(finding.latestVerification?.outcome);
|
||
const closed = finding.status === 'CLOSED';
|
||
const verificationReadyToClose = finding.latestVerification?.outcome === 'RESOLVED'
|
||
&& finding.latestVerification.visitStatus === 'CLOSED';
|
||
const verificationActive = Boolean(finding.verificationVisit);
|
||
const verificationHistory = finding.verificationHistory ?? [];
|
||
|
||
const saveResponseDeadline = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!responseDueBasis || responseDueDays === '') return;
|
||
if (responseDueBasis === 'REPORT_NOTIFICATION' && !reportNotifiedOn) return;
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
const updated = await updateInspectionFindingFollowUp(finding.id, {
|
||
responseDueBasis,
|
||
responseDueDays: Number(responseDueDays),
|
||
reportNotifiedOn: responseDueBasis === 'REPORT_NOTIFICATION' ? reportNotifiedOn : null,
|
||
});
|
||
onFindingChanged(updated);
|
||
setSuccess('Plazo administrativo calculado y guardado con su fecha base.');
|
||
} catch (requestError) {
|
||
setError(errorMessage(requestError));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
const registerResponse = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!responseText.trim() || !responseOccurredAt) return;
|
||
const receivedOn = responseOccurredAt.slice(0, 10);
|
||
const firstPresentation = !hasResponse;
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
let updated = finding;
|
||
if (firstPresentation) {
|
||
updated = await updateInspectionFindingFollowUp(finding.id, {
|
||
companyResponse: responseText.trim(),
|
||
companyResponseReceivedOn: receivedOn,
|
||
companyCommittedCorrectionOn: committedOn || null,
|
||
nextControlOn: nextControlOn || null,
|
||
});
|
||
onFindingChanged(updated);
|
||
} else if (
|
||
committedOn !== (finding.companyCommittedCorrectionOn ?? '')
|
||
|| nextControlOn !== (finding.nextControlOn ?? '')
|
||
) {
|
||
updated = await updateInspectionFindingFollowUp(finding.id, {
|
||
companyCommittedCorrectionOn: committedOn || null,
|
||
nextControlOn: nextControlOn || null,
|
||
});
|
||
onFindingChanged(updated);
|
||
}
|
||
|
||
let communicationId = '';
|
||
let traceWarning = '';
|
||
if (canCreateCommunications) {
|
||
try {
|
||
const communication = await createInspectionFindingCommunication(finding.id, {
|
||
type: 'COMPANY_RESPONSE',
|
||
direction: 'INBOUND',
|
||
channel: responseChannel,
|
||
occurredAt: new Date(responseOccurredAt).toISOString(),
|
||
subject: `${firstPresentation ? 'Respuesta' : 'Nueva presentación'} de empresa · ${finding.code}`,
|
||
details: responseText.trim(),
|
||
contactName: responseContactName.trim() || null,
|
||
contactEmail: responseContactEmail.trim() || null,
|
||
});
|
||
communicationId = communication.id;
|
||
onEvidenceChanged();
|
||
} catch (requestError) {
|
||
traceWarning = `${firstPresentation ? 'La primera respuesta' : 'La actualización de seguimiento'} quedó registrada, pero la presentación histórica no pudo incorporarse: ${errorMessage(requestError)}`;
|
||
}
|
||
} else {
|
||
traceWarning = 'No tenés permiso para incorporar la presentación a la trazabilidad histórica.';
|
||
}
|
||
|
||
if (responseFile && canCreateEvidence) {
|
||
if (!communicationId) {
|
||
traceWarning = traceWarning || 'El documento debe incorporarse desde Documentos y trazabilidad porque no existe una presentación histórica vinculada.';
|
||
} else {
|
||
try {
|
||
await uploadInspectionFindingEvidence(finding.id, {
|
||
file: responseFile,
|
||
kind: 'DOCUMENT',
|
||
purpose: 'COMPANY_RESPONSE',
|
||
communicationId,
|
||
title: responseFile.name,
|
||
description: `Documento presentado por la empresa para ${finding.code}`,
|
||
capturedAt: new Date(responseOccurredAt).toISOString(),
|
||
deviceLabel: navigator.userAgent.slice(0, 200),
|
||
});
|
||
onEvidenceChanged();
|
||
} catch (requestError) {
|
||
traceWarning = `La presentación quedó registrada, pero el documento no pudo incorporarse: ${errorMessage(requestError)}`;
|
||
}
|
||
}
|
||
}
|
||
|
||
setResponseText('');
|
||
setResponseContactName('');
|
||
setResponseContactEmail('');
|
||
setResponseOccurredAt(localDateTime(new Date()));
|
||
setResponseFile(null);
|
||
if (responseFileRef.current) responseFileRef.current.value = '';
|
||
setSuccess(firstPresentation
|
||
? 'Primera respuesta registrada. Las presentaciones posteriores se agregarán sin modificar esta respuesta original.'
|
||
: 'Nueva presentación agregada al historial del hallazgo. La respuesta original permanece inmutable.');
|
||
if (traceWarning) setError(traceWarning);
|
||
} catch (requestError) {
|
||
setError(errorMessage(requestError));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
const saveOperationalFollowUp = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
const updated = await updateInspectionFindingFollowUp(finding.id, {
|
||
companyCommittedCorrectionOn: committedOn || null,
|
||
nextControlOn: nextControlOn || null,
|
||
});
|
||
onFindingChanged(updated);
|
||
setSuccess('Seguimiento operativo actualizado. El cambio de fecha quedó agregado al historial sin borrar los controles anteriores.');
|
||
} catch (requestError) {
|
||
setError(errorMessage(requestError));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
const closeFinding = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!closureNotes.trim()) return;
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
const updated = await closeInspectionFinding(finding.id, closureNotes.trim());
|
||
onFindingChanged(updated);
|
||
setClosureNotes('');
|
||
setSuccess('Hallazgo cerrado. La conclusión quedó incorporada al expediente histórico.');
|
||
} catch (requestError) {
|
||
setError(errorMessage(requestError));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
return <article className="panel finding-office-workspace">
|
||
<div className="panel-heading">
|
||
<div><span className="eyebrow">EXPEDIENTE OPERATIVO</span><h2>Dar curso al hallazgo</h2><p className="section-copy">Respuesta, documentación, vencimientos, verificación y cierre desde una sola ficha.</p></div>
|
||
<span className={`status-badge large ${workflow.overdue ? 'observed' : workflow.stage === 'CLOSED' ? 'active' : 'pending'}`}>{workflow.label}</span>
|
||
</div>
|
||
|
||
{error && <Alert>{error}</Alert>}
|
||
{success && <Alert type="success">{success}</Alert>}
|
||
|
||
<div className="finding-case-progress" aria-label="Etapas del seguimiento">
|
||
<div className="done"><span>1</span><strong>Hallazgo</strong><small>Registrado</small></div>
|
||
<i>›</i>
|
||
<div className={hasResponse ? 'done' : 'current'}><span>2</span><strong>Empresa</strong><small>{hasResponse ? 'Respuesta recibida' : 'Esperando respuesta'}</small></div>
|
||
<i>›</i>
|
||
<div className={verificationDone ? 'done' : hasResponse ? 'current' : 'pending'}><span>3</span><strong>Verificación</strong><small>{verificationDone ? 'Resultado registrado' : finding.verificationVisit ? 'Visita planificada' : finding.nextControlOn ? 'Fecha definida' : 'Pendiente'}</small></div>
|
||
<i>›</i>
|
||
<div className={closed ? 'done' : verificationReadyToClose ? 'current' : 'pending'}><span>4</span><strong>Cierre</strong><small>{closed ? 'Finalizado' : verificationReadyToClose ? 'Listo para cerrar' : 'Pendiente'}</small></div>
|
||
</div>
|
||
|
||
{!closed && <div className={`finding-recommended-action ${workflow.overdue ? 'overdue' : ''}`}>
|
||
<div><span className="eyebrow">ACCIÓN RECOMENDADA</span><strong>{workflow.label}</strong><p>{workflow.action}{workflow.dueOn ? ` Fecha: ${formatDateOnly(workflow.dueOn)}.` : ''}</p></div>
|
||
<div className="form-actions">
|
||
{(workflow.stage === 'WAITING_COMPANY' || workflow.stage === 'COMPANY_OVERDUE') && <a className="button primary" href="#respuesta-empresa">Registrar respuesta</a>}
|
||
{(workflow.stage === 'DEFINE_VERIFICATION' || workflow.stage === 'RESCHEDULE_VERIFICATION') && <a className="button primary" href="#seguimiento-operativo">Definir fecha</a>}
|
||
{workflow.stage === 'PLAN_VERIFICATION' && <Link className="button primary" to="/hallazgos/planificacion">Planificar visita <Icon name="chevron" /></Link>}
|
||
{workflow.stage === 'VERIFICATION_PLANNED' && finding.verificationVisit && <Link className="button primary" to={`/inspecciones/${finding.verificationVisit.id}`}>Abrir verificación <Icon name="chevron" /></Link>}
|
||
{workflow.stage === 'READY_TO_CLOSE' && <a className="button primary" href="#cierre-hallazgo">Revisar y cerrar</a>}
|
||
</div>
|
||
</div>}
|
||
|
||
<div className="finding-office-sections">
|
||
<section id="respuesta-empresa" className={`finding-office-step ${hasResponse ? 'complete' : ''}`}>
|
||
<div className="subsection-heading"><div><span className="eyebrow">1 · ADMINISTRATIVO</span><h3>Respuesta de la empresa</h3></div><span className={`status-badge ${hasResponse ? 'active' : workflow.stage === 'COMPANY_OVERDUE' ? 'observed' : 'pending'}`}>{hasResponse ? 'Recibida' : workflow.stage === 'COMPANY_OVERDUE' ? 'Vencida' : 'Pendiente'}</span></div>
|
||
{!hasResponse && canFollowUp && <form className="finding-office-form finding-deadline-form" onSubmit={saveResponseDeadline}>
|
||
<div className="form-grid">
|
||
<label className="field"><span>Inicio del plazo de respuesta</span><SearchableSelect value={responseDueBasis} onChange={(event) => setResponseDueBasis(event.target.value as 'FINDING_DATE' | 'REPORT_NOTIFICATION' | '')}><option value="">Seleccionar…</option><option value="FINDING_DATE">Desde el día del hallazgo</option><option value="REPORT_NOTIFICATION">Desde la notificación del informe</option></SearchableSelect></label>
|
||
<label className="field"><span>Cantidad de días</span><input type="number" min="0" max="3650" value={responseDueDays} onChange={(event) => setResponseDueDays(event.target.value)} placeholder="Ej.: 5" /></label>
|
||
{responseDueBasis === 'REPORT_NOTIFICATION' && <label className="field"><span>Informe notificado el</span><input type="date" value={reportNotifiedOn} onChange={(event) => setReportNotifiedOn(event.target.value)} /></label>}
|
||
</div>
|
||
<p className="field-help">DH guarda la regla, la fecha base y el vencimiento calculado. Para casos críticos puede computarse desde el hallazgo; para los demás, desde la notificación del informe.</p>
|
||
<div className="form-actions"><button className="button secondary" disabled={busy || !responseDueBasis || responseDueDays === '' || (responseDueBasis === 'REPORT_NOTIFICATION' && !reportNotifiedOn)}><Icon name="calendar" />Calcular vencimiento</button></div>
|
||
</form>}
|
||
<div className="finding-office-deadline-row"><div><small>Vencimiento empresa</small><strong>{formatDateOnly(finding.correctionDueOn)}</strong>{finding.responseDueBasis && <span>{finding.responseDueBasis === 'FINDING_DATE' ? 'Desde hallazgo' : 'Desde notificación'} · {finding.responseDueDays ?? 0} día{finding.responseDueDays === 1 ? '' : 's'} · base {formatDateOnly(finding.responseDueBaseOn)}</span>}</div>{hasResponse && <div><small>Respuesta recibida</small><strong>{formatDateOnly(finding.companyResponseReceivedOn)}</strong></div>}</div>
|
||
|
||
{!closed && canFollowUp && <form className="finding-office-form" onSubmit={registerResponse}>
|
||
<label className="field"><span>{hasResponse ? 'Nueva presentación / ampliación de la empresa' : 'Respuesta o descargo recibido'}</span><textarea required rows={5} maxLength={20000} value={responseText} onChange={(event) => setResponseText(event.target.value)} placeholder={hasResponse ? 'Registrar sólo la nueva presentación; la respuesta original no se modifica…' : 'Resumir la presentación, acción correctiva o descargo recibido…'} /></label>
|
||
<div className="form-grid finding-response-grid">
|
||
<label className="field"><span>Recibida el</span><input type="datetime-local" required value={responseOccurredAt} onChange={(event) => setResponseOccurredAt(event.target.value)} /></label>
|
||
<label className="field"><span>Medio</span><SearchableSelect value={responseChannel} onChange={(event) => setResponseChannel(event.target.value as InspectionFindingCommunication['channel'])}><option value="EMAIL">Email</option><option value="LETTER">Nota formal</option><option value="IN_PERSON">Presencial</option><option value="PHONE">Teléfono</option><option value="SYSTEM">Sistema</option><option value="OTHER">Otro medio</option></SearchableSelect></label>
|
||
<label className="field"><span>Fecha informada por la empresa <em>opcional</em></span><input type="date" value={committedOn} onChange={(event) => setCommittedOn(event.target.value)} /></label>
|
||
<label className="field"><span>Fecha de verificación <em>opcional</em></span><input type="date" value={nextControlOn} onChange={(event) => setNextControlOn(event.target.value)} /></label>
|
||
</div>
|
||
{canCreateCommunications && <div className="form-grid"><label className="field"><span>Contacto <em>opcional</em></span><input maxLength={200} value={responseContactName} onChange={(event) => setResponseContactName(event.target.value)} /></label><label className="field"><span>Email de contacto <em>opcional</em></span><input type="email" maxLength={320} value={responseContactEmail} onChange={(event) => setResponseContactEmail(event.target.value)} /></label></div>}
|
||
{canCreateCommunications && canCreateEvidence && <label className="field"><span>Documento presentado por la empresa <em>opcional</em></span><input ref={responseFileRef} type="file" accept="application/pdf" onChange={(event) => setResponseFile(event.target.files?.[0] ?? null)} /><small className="field-help">Si adjuntás un PDF, queda vinculado a la respuesta recibida y protegido con SHA-256.</small></label>}
|
||
<p className="field-help">Registrar la respuesta cumple el vencimiento administrativo. La fecha informada por la empresa es sólo un compromiso declarado y la fecha de verificación sigue siendo una decisión operativa de DH.</p>
|
||
<div className="form-actions"><button className="button primary" disabled={busy || !responseText.trim() || !responseOccurredAt}><Icon name="check" />{busy ? 'Registrando…' : hasResponse ? 'Agregar presentación' : 'Registrar respuesta'}</button></div>
|
||
</form>}
|
||
|
||
{hasResponse && <div className="finding-response-record">
|
||
<div><small>Primera respuesta registrada · inmutable</small><p>{finding.companyResponse}</p></div>
|
||
<div><small>Fecha informada por la empresa</small><strong>{formatDateOnly(finding.companyCommittedCorrectionOn)}</strong></div>
|
||
</div>}
|
||
</section>
|
||
|
||
<section id="seguimiento-operativo" className={`finding-office-step ${finding.nextControlOn || verificationDone ? 'complete' : ''}`}>
|
||
<div className="subsection-heading"><div><span className="eyebrow">2 · OPERATIVO</span><h3>Verificación del hallazgo</h3></div><span className={`status-badge ${verificationDone ? 'active' : finding.nextControlOn ? 'pending' : 'draft'}`}>{verificationDone ? 'Verificado' : finding.nextControlOn ? 'Fecha definida' : 'Sin fecha'}</span></div>
|
||
{hasResponse && canFollowUp && !closed && <form className="finding-office-form" onSubmit={saveOperationalFollowUp}>
|
||
<div className="form-grid finding-follow-up-dates">
|
||
<label className="field"><span>Fecha informada por la empresa</span><input type="date" value={committedOn} onChange={(event) => setCommittedOn(event.target.value)} /></label>
|
||
<label className="field"><span>Fecha de verificación / resolución</span><input type="date" value={nextControlOn} onChange={(event) => setNextControlOn(event.target.value)} /></label>
|
||
</div>
|
||
<p className="field-help">El vencimiento administrativo original permanece intacto. Esta segunda fecha alimenta la planificación de verificaciones e inspecciones.</p>
|
||
<div className="form-actions"><button className="button secondary" disabled={busy}><Icon name="check" />Guardar seguimiento</button>{nextControlOn && !finding.verificationVisit && finding.latestVerification?.outcome !== 'RESOLVED' && <Link className="button primary" to="/hallazgos/planificacion">Planificar verificación <Icon name="chevron" /></Link>}{finding.verificationVisit && <Link className="button secondary" to={`/inspecciones/${finding.verificationVisit.id}`}>Abrir visita <Icon name="chevron" /></Link>}</div>
|
||
</form>}
|
||
{!hasResponse && <div className="inline-empty">La planificación operativa se habilita cuando se registra la respuesta de la empresa.</div>}
|
||
{finding.latestVerification?.outcome && <div className="finding-verification-record"><small>Último resultado de campo</small><strong>{verificationOutcomeLabel(finding.latestVerification.outcome)}</strong><span>{formatDate(finding.latestVerification.verifiedAt)} · {finding.latestVerification.visitCode}</span><p>{finding.latestVerification.resultNotes || 'Sin observaciones adicionales.'}</p></div>}
|
||
{verificationHistory.length > 0 && <div className="finding-verification-history">
|
||
<div className="finding-verification-history-heading"><div><small>TRAZABILIDAD APPEND-ONLY</small><strong>Historial completo de verificaciones</strong></div><span>{verificationHistory.length} evento{verificationHistory.length === 1 ? '' : 's'}</span></div>
|
||
<div className="finding-verification-timeline">{verificationHistory.map((event) => <div className="finding-verification-event" key={event.id}>
|
||
<div className="finding-verification-event-dot" />
|
||
<div className="finding-verification-event-body">
|
||
<div className="finding-verification-event-title"><strong>{verificationEventLabel(event.eventType)}</strong><span>{formatDate(event.occurredAt)}</span></div>
|
||
{event.outcome && <span className="status-badge pending">{verificationOutcomeLabel(event.outcome)}</span>}
|
||
{event.eventType.startsWith('CONTROL_DATE_') && (event.previousControlOn || event.nextControlOn) && <div className="finding-verification-date-change"><small>Fecha anterior</small><strong>{formatDateOnly(event.previousControlOn)}</strong><i>→</i><small>Nueva fecha</small><strong>{formatDateOnly(event.nextControlOn)}</strong></div>}
|
||
{(event.eventType === 'VISIT_PLANNED' || event.eventType === 'RESULT_RECORDED') && event.targetControlOn && <div className="finding-verification-target-date"><small>{event.eventType === 'VISIT_PLANNED' ? 'Control previsto' : 'Fecha que se verificó'}</small><strong>{formatDateOnly(event.targetControlOn)}</strong></div>}
|
||
{event.verificationVisit && <Link className="finding-verification-visit-link" to={`/inspecciones/${event.verificationVisit.id}`}><span>{event.verificationVisit.code}</span><Icon name="chevron" /></Link>}
|
||
{event.notes && <p>{event.notes}</p>}
|
||
<div className="finding-verification-event-meta"><span>{event.actorUsername || 'Sistema'}</span>{event.evidenceCount > 0 && <span>{event.evidenceCount} evidencia{event.evidenceCount === 1 ? '' : 's'}</span>}</div>
|
||
</div>
|
||
</div>)}</div>
|
||
</div>}
|
||
</section>
|
||
|
||
<section id="cierre-hallazgo" className={`finding-office-step ${closed ? 'complete' : ''}`}>
|
||
<div className="subsection-heading"><div><span className="eyebrow">3 · CIERRE</span><h3>{closed ? 'Hallazgo cerrado' : verificationReadyToClose ? 'Listo para cierre' : 'Decisión administrativa'}</h3></div><span className={`status-badge ${closed ? 'active' : verificationReadyToClose ? 'active' : 'draft'}`}>{closed ? 'Cerrado' : verificationReadyToClose ? 'Revisar' : 'Pendiente'}</span></div>
|
||
{closed ? <div className="finding-response-record"><div><small>Cerrado el</small><strong>{formatDate(finding.closedAt)}</strong><p>{finding.closureNotes}</p></div></div> : canClose ? <form className="finding-office-form" onSubmit={closeFinding}>
|
||
{verificationReadyToClose && <Alert type="success">La verificación de campo indicó que el hallazgo está solucionado. Revisá fotos y documentos antes de registrar el cierre.</Alert>}
|
||
<label className="field"><span>Conclusión de cierre</span><textarea rows={4} maxLength={5000} value={closureNotes} onChange={(event) => setClosureNotes(event.target.value)} placeholder="Indicar qué se revisó, qué respaldo existe y por qué corresponde cerrar el hallazgo…" /></label>
|
||
<p className="field-help">{verificationActive ? 'Existe una visita de verificación activa. Debe finalizar antes del cierre administrativo.' : 'El cierre queda versionado y auditado. Los documentos y fotos continúan disponibles en el expediente.'}</p>
|
||
<div className="form-actions"><a className="button text" href="#documentos-hallazgo">Revisar documentos</a><button className="button danger-outline" disabled={busy || verificationActive || closureNotes.trim().length < 3}><Icon name="check" />Cerrar hallazgo</button></div>
|
||
</form> : <div className="inline-empty">El cierre está reservado a Inspector, Supervisor o Director.</div>}
|
||
</section>
|
||
</div>
|
||
|
||
{hasResponse && <div className="finding-office-footnote"><Icon name="history" /><span>Respuesta recibida {formatDateOnly(finding.companyResponseReceivedOn)} · Las presentaciones sucesivas, medios y documentos quedan en la trazabilidad sin modificar la respuesta original. {finding.companyCommittedCorrectionOn ? `La empresa informó ${formatDateOnly(finding.companyCommittedCorrectionOn)}.` : 'La empresa no informó una fecha de corrección.'}</span></div>}
|
||
</article>;
|
||
}
|