|
|
|
@@ -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>;
|
|
|
|
|
}
|
