F1.3 · Vista web de preparación de campo
Completa F1.3 con la vista web imprimible de preparación de campo, selector buscable y lectura Acta → Hallazgos → Inventario.
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { SearchableSelect } from '../components/SearchableSelect';
|
||||
import { Alert, EmptyState, LoadingBlock } from '../components/Feedback';
|
||||
import { formatDate, formatDateOnly } from '../lib/format';
|
||||
|
||||
type AdminState =
|
||||
| 'ACT_RESPONSE_OVERDUE'
|
||||
| 'ACT_RESPONSE_DUE_SOON'
|
||||
| 'WAITING_RESPONSE'
|
||||
| 'COMPANY_COMMITMENT_OVERDUE'
|
||||
| 'VERIFICATION_PENDING'
|
||||
| 'RESPONSE_RECEIVED';
|
||||
|
||||
interface VisitOption {
|
||||
id: string;
|
||||
code: string;
|
||||
status: string;
|
||||
plannedStartAt: string | null;
|
||||
operationalArea: { name: string } | null;
|
||||
operatorCompany: { name: string } | null;
|
||||
}
|
||||
|
||||
interface BriefingFinding {
|
||||
id: string;
|
||||
code: string;
|
||||
title: string;
|
||||
status: string;
|
||||
severity: number | null;
|
||||
nextControlOn: string | null;
|
||||
asset: {
|
||||
id: string;
|
||||
code: string;
|
||||
name: string;
|
||||
typeName: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface BriefingAct {
|
||||
actId: string;
|
||||
actCode: string;
|
||||
occurredAt: string;
|
||||
adminState: AdminState;
|
||||
responseDueOn: string | null;
|
||||
responseReceivedOn: string | null;
|
||||
committedCorrectionOn: string | null;
|
||||
latestResponseId: string | null;
|
||||
findings: BriefingFinding[];
|
||||
}
|
||||
|
||||
interface FieldBriefing {
|
||||
inspection: {
|
||||
id: string;
|
||||
code: string;
|
||||
status: string;
|
||||
plannedStartAt: string | null;
|
||||
area: { id: string; code: string | null; name: string | null } | null;
|
||||
operatorCompany: { id: string; code: string | null; name: string | null } | null;
|
||||
};
|
||||
plannedOn: string;
|
||||
summary: {
|
||||
acts: number;
|
||||
findings: number;
|
||||
inventoryItems: number;
|
||||
responseOverdue: number;
|
||||
commitmentOverdue: number;
|
||||
verificationPending: number;
|
||||
};
|
||||
acts: BriefingAct[];
|
||||
}
|
||||
|
||||
async function getJson<T>(url: string): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
const message = typeof payload?.message === 'string'
|
||||
? payload.message
|
||||
: 'No se pudo preparar el paquete de campo.';
|
||||
throw new Error(message);
|
||||
}
|
||||
return payload as T;
|
||||
}
|
||||
|
||||
function adminStateLabel(state: AdminState): string {
|
||||
const labels: Record<AdminState, string> = {
|
||||
ACT_RESPONSE_OVERDUE: 'Respuesta del Acta vencida',
|
||||
ACT_RESPONSE_DUE_SOON: 'Respuesta próxima a vencer',
|
||||
WAITING_RESPONSE: 'Esperando respuesta',
|
||||
COMPANY_COMMITMENT_OVERDUE: 'Compromiso de empresa vencido',
|
||||
VERIFICATION_PENDING: 'Verificación pendiente',
|
||||
RESPONSE_RECEIVED: 'Respuesta recibida',
|
||||
};
|
||||
return labels[state];
|
||||
}
|
||||
|
||||
function findingAction(finding: BriefingFinding, act: BriefingAct, plannedOn: string) {
|
||||
if (finding.nextControlOn) {
|
||||
if (finding.nextControlOn <= plannedOn) {
|
||||
return { label: 'Revisar en campo', detail: 'Control programado o vencido', tone: 'danger' };
|
||||
}
|
||||
return { label: 'Próximo control', detail: `Previsto ${formatDateOnly(finding.nextControlOn)}`, tone: 'pending' };
|
||||
}
|
||||
if (act.adminState === 'VERIFICATION_PENDING') {
|
||||
return { label: 'Revisar en campo', detail: 'Respuesta recibida sin control programado', tone: 'danger' };
|
||||
}
|
||||
if (act.adminState === 'COMPANY_COMMITMENT_OVERDUE') {
|
||||
return { label: 'Revisar en campo', detail: 'Regularización comprometida vencida', tone: 'danger' };
|
||||
}
|
||||
if (act.adminState === 'RESPONSE_RECEIVED') {
|
||||
return { label: 'Antecedente', detail: 'Respuesta de empresa recibida', tone: 'pending' };
|
||||
}
|
||||
return { label: 'Antecedente', detail: adminStateLabel(act.adminState), tone: 'pending' };
|
||||
}
|
||||
|
||||
export function FieldBriefingsPage() {
|
||||
const [visits, setVisits] = useState<VisitOption[]>([]);
|
||||
const [visitId, setVisitId] = useState('');
|
||||
const [briefing, setBriefing] = useState<FieldBriefing | null>(null);
|
||||
const [loadingVisits, setLoadingVisits] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setLoadingVisits(true);
|
||||
Promise.all([
|
||||
getJson<{ data: VisitOption[] }>('/api/v3/inspection-visits?status=PLANNED&page=1&pageSize=100'),
|
||||
getJson<{ data: VisitOption[] }>('/api/v3/inspection-visits?status=DRAFT&page=1&pageSize=100'),
|
||||
]).then(([planned, drafts]) => {
|
||||
const all = [...planned.data, ...drafts.data]
|
||||
.sort((a, b) => String(a.plannedStartAt ?? '').localeCompare(String(b.plannedStartAt ?? '')));
|
||||
setVisits(all);
|
||||
const onlyVisit = all[0];
|
||||
if (all.length === 1 && onlyVisit) setVisitId(onlyVisit.id);
|
||||
}).catch((cause) => {
|
||||
setError(cause instanceof Error ? cause.message : String(cause));
|
||||
}).finally(() => setLoadingVisits(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visitId) {
|
||||
setBriefing(null);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
getJson<FieldBriefing>(`/api/v3/inspection-visits/${visitId}/field-briefing`)
|
||||
.then(setBriefing)
|
||||
.catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)))
|
||||
.finally(() => setLoading(false));
|
||||
}, [visitId]);
|
||||
|
||||
const selected = useMemo(
|
||||
() => visits.find((visit) => visit.id === visitId) ?? null,
|
||||
[visits, visitId],
|
||||
);
|
||||
|
||||
return <section className="field-briefing-page">
|
||||
<div className="page-heading">
|
||||
<div>
|
||||
<span className="eyebrow">ANTES DE SALIR A CAMPO</span>
|
||||
<h1>Preparación de campo</h1>
|
||||
<p>Seleccioná la inspección y revisá los pendientes de Actas anteriores del mismo Área/Yacimiento y Operadora.</p>
|
||||
</div>
|
||||
{briefing && <button className="button secondary no-print" type="button" onClick={() => window.print()}>
|
||||
Imprimir preparación
|
||||
</button>}
|
||||
</div>
|
||||
|
||||
<div className="form-card no-print">
|
||||
<label>Inspección planificada</label>
|
||||
{loadingVisits ? <LoadingBlock label="Cargando inspecciones…" /> : <SearchableSelect
|
||||
value={visitId}
|
||||
onChange={(event) => setVisitId(event.target.value)}
|
||||
searchPlaceholder="Buscar por código, Área u Operadora…"
|
||||
>
|
||||
<option value="">Seleccionar inspección…</option>
|
||||
{visits.map((visit) => <option key={visit.id} value={visit.id}>
|
||||
{visit.code} · {visit.operationalArea?.name ?? 'Sin Área'} · {visit.operatorCompany?.name ?? 'Sin Operadora'}
|
||||
</option>)}
|
||||
</SearchableSelect>}
|
||||
{selected?.plannedStartAt && <small className="block-muted">Salida prevista: {formatDate(selected.plannedStartAt)}</small>}
|
||||
</div>
|
||||
|
||||
{error && <Alert>{error}</Alert>}
|
||||
{loading && <LoadingBlock label="Armando paquete de campo…" />}
|
||||
|
||||
{!loading && !briefing && !error && <EmptyState
|
||||
title="Seleccioná una inspección"
|
||||
text="El sistema reunirá automáticamente los pendientes de inspecciones anteriores del mismo contexto."
|
||||
/>}
|
||||
|
||||
{!loading && briefing && <>
|
||||
<div className="page-heading compact">
|
||||
<div>
|
||||
<span className="eyebrow">{briefing.inspection.code}</span>
|
||||
<h2>{briefing.inspection.area?.name ?? 'Área sin definir'} · {briefing.inspection.operatorCompany?.name ?? 'Operadora sin definir'}</h2>
|
||||
<p>Fecha de referencia: {formatDateOnly(briefing.plannedOn)}</p>
|
||||
</div>
|
||||
<Link className="button secondary no-print" to={`/inspecciones/${briefing.inspection.id}`}>
|
||||
Abrir planificación
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="status-tabs briefing-summary">
|
||||
<span>Actas <strong>{briefing.summary.acts}</strong></span>
|
||||
<span>Hallazgos <strong>{briefing.summary.findings}</strong></span>
|
||||
<span>Inventario <strong>{briefing.summary.inventoryItems}</strong></span>
|
||||
<span>Respuestas vencidas <strong>{briefing.summary.responseOverdue}</strong></span>
|
||||
<span>Compromisos vencidos <strong>{briefing.summary.commitmentOverdue}</strong></span>
|
||||
<span>Verificaciones pendientes <strong>{briefing.summary.verificationPending}</strong></span>
|
||||
</div>
|
||||
|
||||
{briefing.acts.length === 0 ? <EmptyState
|
||||
title="Sin pendientes anteriores"
|
||||
text="No hay Actas anteriores con hallazgos abiertos que requieran atención para esta inspección."
|
||||
/> : briefing.acts.map((act) => <article className="table-panel" key={act.actId}>
|
||||
<div className="table-summary">
|
||||
<div>
|
||||
<strong>{act.actCode}</strong>
|
||||
<small className="block-muted">{formatDate(act.occurredAt)} · {adminStateLabel(act.adminState)}</small>
|
||||
</div>
|
||||
<div>
|
||||
<small>Plazo del Acta</small>
|
||||
<strong>{act.responseDueOn ? formatDateOnly(act.responseDueOn) : 'Sin definir'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<small>Respuesta empresa</small>
|
||||
<strong>{act.responseReceivedOn ? formatDateOnly(act.responseReceivedOn) : 'Pendiente'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<small>Compromiso empresa</small>
|
||||
<strong>{act.committedCorrectionOn ? formatDateOnly(act.committedCorrectionOn) : 'Sin fecha'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-scroll">
|
||||
<table>
|
||||
<thead><tr><th>Qué hacer</th><th>Hallazgo</th><th>Inventario</th><th>Control</th></tr></thead>
|
||||
<tbody>{act.findings.map((finding) => {
|
||||
const action = findingAction(finding, act, briefing.plannedOn);
|
||||
return <tr key={finding.id}>
|
||||
<td>
|
||||
<span className={`status-badge ${action.tone}`}>{action.label}</span>
|
||||
<small className="block-muted">{action.detail}</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{finding.code}</strong>
|
||||
<small className="block-muted">{finding.title}</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{finding.asset.code}</strong>
|
||||
<small className="block-muted">{finding.asset.name} · {finding.asset.typeName}</small>
|
||||
</td>
|
||||
<td>{finding.nextControlOn ? formatDateOnly(finding.nextControlOn) : 'Sin fecha'}</td>
|
||||
</tr>;
|
||||
})}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>)}
|
||||
</>}
|
||||
</section>;
|
||||
}
|
||||
Reference in New Issue
Block a user