|
|
|
@@ -0,0 +1,191 @@
|
|
|
|
|
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 ReviewState = 'REQUIRED' | 'UPCOMING' | 'CONTEXT';
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
severity: number | null;
|
|
|
|
|
nextControlOn: string | null;
|
|
|
|
|
reviewState: ReviewState;
|
|
|
|
|
reviewReason: string;
|
|
|
|
|
asset: { id: string; code: string; name: string; typeName: string };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface BriefingAct {
|
|
|
|
|
actId: string;
|
|
|
|
|
actCode: string;
|
|
|
|
|
occurredAt: string;
|
|
|
|
|
adminState: string;
|
|
|
|
|
responseDueOn: string | null;
|
|
|
|
|
latestResponse: null | { id: string; receivedOn: string; committedCorrectionOn: string | null; hasPdf: boolean };
|
|
|
|
|
findings: BriefingFinding[];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface Briefing {
|
|
|
|
|
visit: {
|
|
|
|
|
id: string;
|
|
|
|
|
code: string;
|
|
|
|
|
status: string;
|
|
|
|
|
plannedStartAt: string | null;
|
|
|
|
|
operationalArea: { id: string; code: string | null; name: string | null };
|
|
|
|
|
operatorCompany: { id: string; code: string | null; name: string | null };
|
|
|
|
|
};
|
|
|
|
|
referenceDate: string;
|
|
|
|
|
generatedAt: string;
|
|
|
|
|
summary: {
|
|
|
|
|
actCount: number;
|
|
|
|
|
openFindingCount: number;
|
|
|
|
|
fieldReviewRequired: number;
|
|
|
|
|
fieldReviewUpcoming: number;
|
|
|
|
|
administrativeAttention: number;
|
|
|
|
|
assetCount: number;
|
|
|
|
|
};
|
|
|
|
|
acts: BriefingAct[];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function json<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 cargar la preparación de campo.';
|
|
|
|
|
throw new Error(message);
|
|
|
|
|
}
|
|
|
|
|
return payload as T;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reviewLabel(state: ReviewState) {
|
|
|
|
|
if (state === 'REQUIRED') return 'Revisar en campo';
|
|
|
|
|
if (state === 'UPCOMING') return 'Próximo control';
|
|
|
|
|
return 'Antecedente';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reasonLabel(reason: string) {
|
|
|
|
|
const labels: Record<string, string> = {
|
|
|
|
|
CONTROL_OVERDUE: 'Control vencido',
|
|
|
|
|
COMMITMENT_REACHED: 'Compromiso de empresa alcanzado',
|
|
|
|
|
RESPONSE_WITHOUT_CONTROL: 'Respuesta recibida sin control programado',
|
|
|
|
|
CONTROL_UPCOMING: 'Control próximo',
|
|
|
|
|
ADMIN_RESPONSE_OVERDUE: 'Respuesta administrativa vencida',
|
|
|
|
|
CONTEXT_ONLY: 'Antecedente abierto',
|
|
|
|
|
};
|
|
|
|
|
return labels[reason] ?? reason;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function FieldBriefingsPage() {
|
|
|
|
|
const [visits, setVisits] = useState<VisitOption[]>([]);
|
|
|
|
|
const [visitId, setVisitId] = useState('');
|
|
|
|
|
const [briefing, setBriefing] = useState<Briefing | null>(null);
|
|
|
|
|
const [loadingVisits, setLoadingVisits] = useState(true);
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
const [error, setError] = useState('');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setLoadingVisits(true);
|
|
|
|
|
Promise.all([
|
|
|
|
|
json<{ data: VisitOption[] }>('/api/v3/inspection-visits?status=PLANNED&page=1&pageSize=100'),
|
|
|
|
|
json<{ 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);
|
|
|
|
|
if (all.length === 1) setVisitId(all[0].id);
|
|
|
|
|
}).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)))
|
|
|
|
|
.finally(() => setLoadingVisits(false));
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!visitId) {
|
|
|
|
|
setBriefing(null);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
setLoading(true);
|
|
|
|
|
setError('');
|
|
|
|
|
json<Briefing>(`/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>Actas anteriores y hallazgos abiertos del mismo Área/Yacimiento y Operadora, ordenados por lo que el inspector debe revisar.</p>
|
|
|
|
|
</div>
|
|
|
|
|
{briefing && <button className="button secondary" 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." />}
|
|
|
|
|
{!loading && briefing && <>
|
|
|
|
|
<div className="page-heading compact">
|
|
|
|
|
<div>
|
|
|
|
|
<span className="eyebrow">{briefing.visit.code}</span>
|
|
|
|
|
<h2>{briefing.visit.operationalArea.name ?? 'Área'} · {briefing.visit.operatorCompany.name ?? 'Operadora'}</h2>
|
|
|
|
|
<p>Referencia: {formatDateOnly(briefing.referenceDate)} · generado {formatDate(briefing.generatedAt)}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<Link className="button secondary no-print" to={`/inspecciones/${briefing.visit.id}`}>Abrir planificación</Link>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="status-tabs briefing-summary">
|
|
|
|
|
<span>Actas <strong>{briefing.summary.actCount}</strong></span>
|
|
|
|
|
<span>Hallazgos abiertos <strong>{briefing.summary.openFindingCount}</strong></span>
|
|
|
|
|
<span>Revisar en campo <strong>{briefing.summary.fieldReviewRequired}</strong></span>
|
|
|
|
|
<span>Próximos <strong>{briefing.summary.fieldReviewUpcoming}</strong></span>
|
|
|
|
|
<span>Inventario involucrado <strong>{briefing.summary.assetCount}</strong></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{briefing.acts.length === 0 ? <EmptyState title="Sin pendientes anteriores" text="No hay hallazgos abiertos de Actas anteriores para este contexto." /> : 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)} · {act.adminState}</small></div>
|
|
|
|
|
<div><small>Plazo empresa</small><strong>{act.responseDueOn ? formatDateOnly(act.responseDueOn) : 'Sin definir'}</strong></div>
|
|
|
|
|
<div><small>Respuesta</small><strong>{act.latestResponse ? formatDateOnly(act.latestResponse.receivedOn) : 'Pendiente'}</strong></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="table-scroll"><table><thead><tr><th>Prioridad</th><th>Hallazgo</th><th>Inventario</th><th>Próximo control</th></tr></thead><tbody>
|
|
|
|
|
{act.findings.map((finding) => <tr key={finding.id}>
|
|
|
|
|
<td><span className={`status-badge ${finding.reviewState === 'REQUIRED' ? 'danger' : 'pending'}`}>{reviewLabel(finding.reviewState)}</span><small className="block-muted">{reasonLabel(finding.reviewReason)}</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>;
|
|
|
|
|
}
|
