438 lines
25 KiB
TypeScript
438 lines
25 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import type { FormEvent } from 'react';
|
||
import { Link, useSearchParams } from 'react-router';
|
||
import { useAuth } from '../auth/AuthContext';
|
||
import { Alert, EmptyState, LoadingBlock, errorMessage } from '../components/Feedback';
|
||
import { Icon } from '../components/Icon';
|
||
import { SearchableSelect } from '../components/SearchableSelect';
|
||
import { AssetHistoryPanel } from '../features/assets/AssetHistoryPanel';
|
||
import { AssetMediaPanel } from '../features/assets/AssetMediaPanel';
|
||
import { assetStatusClass, assetStatusLabel } from '../features/assets/assetPresentation';
|
||
import {
|
||
createAreaCompanyRelation,
|
||
endAreaCompanyRelation,
|
||
getAssetRegistry,
|
||
listAreaCompanyRelations,
|
||
listInspectionVisits,
|
||
listOperationalAreas,
|
||
updateAsset,
|
||
upsertOrganizationProfile,
|
||
} from '../lib/api';
|
||
import type {
|
||
AreaCompanyRelation,
|
||
AssetDetail,
|
||
AssetRegistry,
|
||
OperationalAssetSummary,
|
||
OrganizationKind,
|
||
} from '../lib/api';
|
||
import {
|
||
listInspectionActsGlobalF4,
|
||
type InspectionActListItemF4,
|
||
type InspectionActStatusF4,
|
||
} from '../lib/inspectionActF4Api';
|
||
import {
|
||
listInspectionReportsF4,
|
||
type InspectionReportDetailF4,
|
||
} from '../lib/reportWorkflowApi';
|
||
import { formatDate } from '../lib/format';
|
||
import './companyInventory.css';
|
||
|
||
type CompanyTab = 'summary' | 'issued' | 'documents' | 'history';
|
||
|
||
const organizationLabels: Record<OrganizationKind, string> = {
|
||
COMPANY: 'Empresa',
|
||
UTE: 'UTE',
|
||
PUBLIC_ENTITY: 'Entidad pública',
|
||
OTHER: 'Otra organización',
|
||
};
|
||
|
||
function relationRoleLabel(role: AreaCompanyRelation['relationRole']) {
|
||
if (role === 'OPERATOR') return 'Operadora';
|
||
if (role === 'TECHNICAL_OPERATOR') return 'Operadora técnica';
|
||
if (role === 'CONCESSIONAIRE') return 'Concesionaria / titular';
|
||
if (role === 'PERMIT_HOLDER') return 'Permisionaria';
|
||
if (role === 'PARTICIPANT') return 'Participante';
|
||
return 'Otro vínculo';
|
||
}
|
||
|
||
function reportStatusLabel(report: InspectionReportDetailF4) {
|
||
if (report.status === 'OFFICIALIZED') return report.gedoIfIdentifier ? `GEDO · ${report.gedoIfIdentifier}` : 'Oficializado en GEDO';
|
||
if (report.status === 'WORKING') return 'INF en preparación';
|
||
if (report.status === 'CANCELLED') return 'Cancelado';
|
||
return 'Informe histórico';
|
||
}
|
||
|
||
function reportStatusClass(report: InspectionReportDetailF4) {
|
||
if (report.status === 'OFFICIALIZED') return 'active';
|
||
if (report.status === 'CANCELLED') return 'danger';
|
||
return 'pending';
|
||
}
|
||
|
||
function areaLabel(items: Array<{ name: string }>) {
|
||
if (!items.length) return 'Área sin informar';
|
||
const first = items[0];
|
||
if (!first) return 'Área sin informar';
|
||
return items.length === 1 ? first.name : `${first.name} +${items.length - 1}`;
|
||
}
|
||
|
||
async function loadAllActs(companyId: string): Promise<InspectionActListItemF4[]> {
|
||
const statuses: InspectionActStatusF4[] = ['SEALED', 'CLOSED', 'RECTIFIED'];
|
||
const groups = await Promise.all(statuses.map(async (status) => {
|
||
const collected: InspectionActListItemF4[] = [];
|
||
let page = 1;
|
||
let totalPages = 1;
|
||
do {
|
||
const response = await listInspectionActsGlobalF4({ companyId, status, page, pageSize: 100 });
|
||
collected.push(...response.data);
|
||
totalPages = response.meta.totalPages;
|
||
page += 1;
|
||
} while (page <= totalPages);
|
||
return collected;
|
||
}));
|
||
return groups.flat().sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
|
||
}
|
||
|
||
async function loadAllReports(companyId: string): Promise<InspectionReportDetailF4[]> {
|
||
const collected: InspectionReportDetailF4[] = [];
|
||
let page = 1;
|
||
let totalPages = 1;
|
||
do {
|
||
const response = await listInspectionReportsF4({ companyId, page, pageSize: 100 });
|
||
collected.push(...response.data);
|
||
totalPages = response.meta.totalPages;
|
||
page += 1;
|
||
} while (page <= totalPages);
|
||
return collected
|
||
.filter((item) => item.status !== 'CANCELLED')
|
||
.sort((a, b) => new Date(b.generatedAt).getTime() - new Date(a.generatedAt).getTime());
|
||
}
|
||
|
||
export function CompanyInventoryPage({ initialAsset }: { initialAsset: AssetDetail }) {
|
||
const [params, setParams] = useSearchParams();
|
||
const requestedTab = params.get('tab') as CompanyTab | null;
|
||
const tab: CompanyTab = requestedTab && ['summary', 'issued', 'documents', 'history'].includes(requestedTab)
|
||
? requestedTab
|
||
: 'summary';
|
||
const { hasPermission } = useAuth();
|
||
const canEditAsset = hasPermission('assets.update');
|
||
const canReadRegistry = hasPermission('asset_registry.read');
|
||
const canManageRegistry = hasPermission('asset_registry.manage');
|
||
const canReadRelations = hasPermission('asset_relations.read');
|
||
const canManageRelations = hasPermission('asset_relations.manage');
|
||
const canReadActs = hasPermission('inspection_acts.read');
|
||
const canReadReports = hasPermission('inspection_reports.read');
|
||
const canReadInspections = hasPermission('inspections.read');
|
||
const canReadMedia = hasPermission('assets.read_media');
|
||
const canManageMedia = hasPermission('assets.manage_media');
|
||
const canReadHistory = hasPermission('assets.read_history');
|
||
|
||
const [asset, setAsset] = useState(initialAsset);
|
||
const [registry, setRegistry] = useState<AssetRegistry | null>(null);
|
||
const [relations, setRelations] = useState<AreaCompanyRelation[]>([]);
|
||
const [areas, setAreas] = useState<OperationalAssetSummary[]>([]);
|
||
const [loadingContext, setLoadingContext] = useState(true);
|
||
const [contextError, setContextError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const [editing, setEditing] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [companyForm, setCompanyForm] = useState({
|
||
name: initialAsset.name,
|
||
commonName: initialAsset.commonName ?? '',
|
||
organizationKind: 'COMPANY' as OrganizationKind,
|
||
legalName: initialAsset.name,
|
||
taxId: '',
|
||
notificationEmail: '',
|
||
notes: '',
|
||
});
|
||
const [relationForm, setRelationForm] = useState({ areaId: '', reason: '' });
|
||
const [metrics, setMetrics] = useState({ acts: 0, reports: 0, activeInspections: 0 });
|
||
const [acts, setActs] = useState<InspectionActListItemF4[]>([]);
|
||
const [reports, setReports] = useState<InspectionReportDetailF4[]>([]);
|
||
const [documentsLoading, setDocumentsLoading] = useState(false);
|
||
const [documentsError, setDocumentsError] = useState('');
|
||
const [documentSearch, setDocumentSearch] = useState('');
|
||
|
||
const activeRelations = useMemo(() => relations.filter((item) => item.active), [relations]);
|
||
|
||
const loadContext = async () => {
|
||
setLoadingContext(true);
|
||
setContextError('');
|
||
try {
|
||
const [loadedRegistry, loadedRelations, loadedAreas] = await Promise.all([
|
||
canReadRegistry ? getAssetRegistry(asset.id) : Promise.resolve(null),
|
||
canReadRelations ? listAreaCompanyRelations({ companyId: asset.id, includeHistory: true }) : Promise.resolve([]),
|
||
canManageRelations ? listOperationalAreas() : Promise.resolve([]),
|
||
]);
|
||
setRegistry(loadedRegistry);
|
||
setRelations(loadedRelations);
|
||
setAreas(loadedAreas);
|
||
if (loadedRegistry?.organizationProfile) {
|
||
const profile = loadedRegistry.organizationProfile;
|
||
setCompanyForm({
|
||
name: asset.name,
|
||
commonName: asset.commonName ?? '',
|
||
organizationKind: profile.organizationKind,
|
||
legalName: profile.legalName ?? asset.name,
|
||
taxId: profile.taxId ?? '',
|
||
notificationEmail: profile.notificationEmail ?? '',
|
||
notes: profile.notes ?? '',
|
||
});
|
||
}
|
||
} catch (requestError) {
|
||
setContextError(errorMessage(requestError));
|
||
} finally {
|
||
setLoadingContext(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => { void loadContext(); }, [asset.id]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
const loadMetrics = async () => {
|
||
try {
|
||
const [sealed, closed, rectified, reportPage, planned, inProgress] = await Promise.all([
|
||
canReadActs ? listInspectionActsGlobalF4({ companyId: asset.id, status: 'SEALED', pageSize: 1 }) : Promise.resolve(null),
|
||
canReadActs ? listInspectionActsGlobalF4({ companyId: asset.id, status: 'CLOSED', pageSize: 1 }) : Promise.resolve(null),
|
||
canReadActs ? listInspectionActsGlobalF4({ companyId: asset.id, status: 'RECTIFIED', pageSize: 1 }) : Promise.resolve(null),
|
||
canReadReports ? listInspectionReportsF4({ companyId: asset.id, pageSize: 1 }) : Promise.resolve(null),
|
||
canReadInspections ? listInspectionVisits({ companyId: asset.id, status: 'PLANNED', pageSize: 1 }) : Promise.resolve(null),
|
||
canReadInspections ? listInspectionVisits({ companyId: asset.id, status: 'IN_PROGRESS', pageSize: 1 }) : Promise.resolve(null),
|
||
]);
|
||
if (cancelled) return;
|
||
setMetrics({
|
||
acts: (sealed?.meta.total ?? 0) + (closed?.meta.total ?? 0) + (rectified?.meta.total ?? 0),
|
||
reports: reportPage?.meta.total ?? 0,
|
||
activeInspections: (planned?.meta.total ?? 0) + (inProgress?.meta.total ?? 0),
|
||
});
|
||
} catch {
|
||
if (!cancelled) setMetrics({ acts: 0, reports: 0, activeInspections: 0 });
|
||
}
|
||
};
|
||
void loadMetrics();
|
||
return () => { cancelled = true; };
|
||
}, [asset.id, canReadActs, canReadReports, canReadInspections]);
|
||
|
||
useEffect(() => {
|
||
if (tab !== 'issued' || (!canReadActs && !canReadReports)) return;
|
||
let cancelled = false;
|
||
setDocumentsLoading(true);
|
||
setDocumentsError('');
|
||
Promise.all([
|
||
canReadActs ? loadAllActs(asset.id) : Promise.resolve([]),
|
||
canReadReports ? loadAllReports(asset.id) : Promise.resolve([]),
|
||
])
|
||
.then(([loadedActs, loadedReports]) => {
|
||
if (cancelled) return;
|
||
setActs(loadedActs);
|
||
setReports(loadedReports);
|
||
})
|
||
.catch((requestError) => { if (!cancelled) setDocumentsError(errorMessage(requestError)); })
|
||
.finally(() => { if (!cancelled) setDocumentsLoading(false); });
|
||
return () => { cancelled = true; };
|
||
}, [tab, asset.id, canReadActs, canReadReports]);
|
||
|
||
const saveCompany = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
setSaving(true); setContextError(''); setSuccess('');
|
||
try {
|
||
let savedAsset = asset;
|
||
if (canEditAsset) {
|
||
savedAsset = await updateAsset(asset.id, {
|
||
name: companyForm.name.trim(),
|
||
commonName: companyForm.commonName.trim() || null,
|
||
});
|
||
setAsset(savedAsset);
|
||
}
|
||
if (canManageRegistry) {
|
||
await upsertOrganizationProfile(asset.id, {
|
||
organizationKind: companyForm.organizationKind,
|
||
legalName: companyForm.legalName.trim() || null,
|
||
taxId: companyForm.taxId.trim() || null,
|
||
notificationEmail: companyForm.notificationEmail.trim() || null,
|
||
notes: companyForm.notes.trim() || null,
|
||
});
|
||
}
|
||
setEditing(false);
|
||
setSuccess('Datos de la empresa actualizados.');
|
||
await loadContext();
|
||
} catch (requestError) {
|
||
setContextError(errorMessage(requestError));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const addRelation = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!relationForm.areaId || relationForm.reason.trim().length < 3) return;
|
||
setSaving(true); setContextError(''); setSuccess('');
|
||
try {
|
||
await createAreaCompanyRelation({
|
||
areaId: relationForm.areaId,
|
||
companyId: asset.id,
|
||
reason: relationForm.reason.trim(),
|
||
});
|
||
setRelationForm({ areaId: '', reason: '' });
|
||
setSuccess('Área vinculada a la empresa.');
|
||
await loadContext();
|
||
} catch (requestError) {
|
||
setContextError(errorMessage(requestError));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const endRelation = async (relation: AreaCompanyRelation) => {
|
||
const reason = window.prompt(`Motivo para finalizar el vínculo con ${relation.area.name}`);
|
||
if (!reason?.trim() || reason.trim().length < 3) return;
|
||
setSaving(true); setContextError(''); setSuccess('');
|
||
try {
|
||
await endAreaCompanyRelation(relation.id, reason.trim());
|
||
setSuccess('Vínculo finalizado. El historial quedó conservado.');
|
||
await loadContext();
|
||
} catch (requestError) {
|
||
setContextError(errorMessage(requestError));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const setTab = (next: CompanyTab) => {
|
||
const nextParams = new URLSearchParams(params);
|
||
next === 'summary' ? nextParams.delete('tab') : nextParams.set('tab', next);
|
||
nextParams.delete('advanced');
|
||
setParams(nextParams);
|
||
};
|
||
|
||
const reportByAct = useMemo(() => new Map(reports.map((report) => [report.actId, report])), [reports]);
|
||
const filteredActs = useMemo(() => {
|
||
const needle = documentSearch.trim().toLocaleLowerCase('es');
|
||
if (!needle) return acts;
|
||
return acts.filter((act) => [
|
||
act.code,
|
||
act.title,
|
||
act.visit.code,
|
||
...act.areas.map((item) => item.name),
|
||
reportByAct.get(act.id)?.code ?? '',
|
||
reportByAct.get(act.id)?.gedoIfIdentifier ?? '',
|
||
].join(' ').toLocaleLowerCase('es').includes(needle));
|
||
}, [acts, documentSearch, reportByAct]);
|
||
|
||
const usedAreaIds = new Set(activeRelations.map((relation) => relation.area.id));
|
||
const availableAreas = areas.filter((item) => !usedAreaIds.has(item.id));
|
||
const profile = registry?.organizationProfile ?? null;
|
||
|
||
return <section className="narrow-section company-page">
|
||
<nav className="breadcrumb company-breadcrumb" aria-label="Ruta de empresa">
|
||
<Link to="/inventarios">Inventarios</Link><span>›</span>
|
||
<Link to="/inventarios?section=companies">Empresas</Link><span>›</span><strong>{asset.name}</strong>
|
||
</nav>
|
||
|
||
<header className="company-hero">
|
||
<div>
|
||
<span className="eyebrow">EMPRESA</span>
|
||
<h1>{asset.name}</h1>
|
||
<p><strong>{asset.code}</strong>{profile?.taxId ? ` · CUIT ${profile.taxId}` : ''}</p>
|
||
</div>
|
||
<div className="company-hero-actions">
|
||
<span className={`status-badge ${assetStatusClass(asset.informationStatus)}`}>{assetStatusLabel(asset.informationStatus)}</span>
|
||
{(canEditAsset || canManageRegistry) && tab === 'summary' && <button type="button" className="button primary" onClick={() => setEditing((current) => !current)}><Icon name="edit" />{editing ? 'Cerrar edición' : 'Editar empresa'}</button>}
|
||
</div>
|
||
</header>
|
||
|
||
<nav className="company-tabs" aria-label="Secciones de la empresa">
|
||
<button type="button" className={tab === 'summary' ? 'active' : ''} onClick={() => setTab('summary')}>Resumen</button>
|
||
{(canReadActs || canReadReports) && <button type="button" className={tab === 'issued' ? 'active' : ''} onClick={() => setTab('issued')}>Actas e informes</button>}
|
||
{(canReadRegistry || canReadMedia) && <button type="button" className={tab === 'documents' ? 'active' : ''} onClick={() => setTab('documents')}>Documentación</button>}
|
||
{canReadHistory && <button type="button" className={tab === 'history' ? 'active' : ''} onClick={() => setTab('history')}>Historial</button>}
|
||
</nav>
|
||
|
||
{contextError && <Alert>{contextError}</Alert>}
|
||
{success && <Alert type="success">{success}</Alert>}
|
||
|
||
{tab === 'summary' && <div className="company-stack">
|
||
{loadingContext ? <LoadingBlock label="Cargando empresa…" /> : <>
|
||
<article className="panel company-card">
|
||
<div className="company-card-heading">
|
||
<div><span className="eyebrow">IDENTIDAD</span><h2>Datos de la empresa</h2><p>La información que se usa para identificarla y enviar documentación oficial.</p></div>
|
||
</div>
|
||
{editing ? <form className="company-edit-form" onSubmit={saveCompany}>
|
||
<div className="form-grid">
|
||
<label className="field"><span>Nombre</span><input value={companyForm.name} disabled={!canEditAsset} onChange={(event) => setCompanyForm({ ...companyForm, name: event.target.value })} required /></label>
|
||
<label className="field"><span>Nombre corto / sigla <em>opcional</em></span><input value={companyForm.commonName} disabled={!canEditAsset} onChange={(event) => setCompanyForm({ ...companyForm, commonName: event.target.value })} placeholder="Ej.: EMESA" /></label>
|
||
<label className="field"><span>Tipo</span><SearchableSelect value={companyForm.organizationKind} disabled={!canManageRegistry} onChange={(event) => setCompanyForm({ ...companyForm, organizationKind: event.target.value as OrganizationKind })}>{Object.entries(organizationLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}</SearchableSelect></label>
|
||
<label className="field"><span>Razón social <em>opcional</em></span><input value={companyForm.legalName} disabled={!canManageRegistry} onChange={(event) => setCompanyForm({ ...companyForm, legalName: event.target.value })} /></label>
|
||
<label className="field"><span>CUIT <em>opcional</em></span><input value={companyForm.taxId} disabled={!canManageRegistry} onChange={(event) => setCompanyForm({ ...companyForm, taxId: event.target.value })} /></label>
|
||
<label className="field"><span>Email oficial para actas <em>opcional</em></span><input type="email" value={companyForm.notificationEmail} disabled={!canManageRegistry} onChange={(event) => setCompanyForm({ ...companyForm, notificationEmail: event.target.value })} /></label>
|
||
</div>
|
||
<label className="field"><span>Notas <em>opcional</em></span><textarea rows={2} value={companyForm.notes} disabled={!canManageRegistry} onChange={(event) => setCompanyForm({ ...companyForm, notes: event.target.value })} /></label>
|
||
<div className="form-actions"><button type="button" className="button secondary" onClick={() => setEditing(false)}>Cancelar</button><button className="button primary" disabled={saving}>{saving ? 'Guardando…' : 'Guardar cambios'}</button></div>
|
||
</form> : <div className="company-data-grid">
|
||
<div><small>Razón social</small><strong>{profile?.legalName || asset.name}</strong></div>
|
||
<div><small>Tipo</small><strong>{organizationLabels[profile?.organizationKind ?? 'COMPANY']}</strong></div>
|
||
<div><small>CUIT</small><strong>{profile?.taxId || 'Sin informar'}</strong></div>
|
||
<div><small>Email oficial para actas</small><strong>{profile?.notificationEmail || 'Sin informar'}</strong></div>
|
||
</div>}
|
||
</article>
|
||
|
||
<article className="panel company-card">
|
||
<div className="company-card-heading">
|
||
<div><span className="eyebrow">OPERACIÓN</span><h2>Áreas donde opera</h2><p>Estas relaciones indican dónde participa la empresa. No cambian la jerarquía física del Inventario.</p></div>
|
||
<span className="count-pill">{activeRelations.length}</span>
|
||
</div>
|
||
{activeRelations.length === 0 ? <EmptyState title="Sin áreas vinculadas" text="Todavía no hay áreas operativas asociadas a esta empresa." /> : <div className="company-area-list">{activeRelations.map((relation) => <div className="company-area-row" key={relation.id}>
|
||
<Link to={`/inventarios/${relation.area.id}`}><strong>{relation.area.name}</strong><small>{relation.area.code} · {relationRoleLabel(relation.relationRole)}</small></Link>
|
||
<div><span className="status-badge active">Activa</span>{canManageRelations && <button type="button" className="button text compact" disabled={saving} onClick={() => void endRelation(relation)}>Finalizar</button>}</div>
|
||
</div>)}</div>}
|
||
{canManageRelations && <details className="company-inline-action"><summary><Icon name="plus" size={15} />Vincular otra área</summary><form onSubmit={addRelation}><div className="form-grid"><label className="field"><span>Área</span><SearchableSelect value={relationForm.areaId} onChange={(event) => setRelationForm({ ...relationForm, areaId: event.target.value })} required><option value="">Seleccionar área…</option>{availableAreas.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.code}</option>)}</SearchableSelect></label><label className="field"><span>Motivo</span><input value={relationForm.reason} onChange={(event) => setRelationForm({ ...relationForm, reason: event.target.value })} minLength={3} required placeholder="Ej.: operación vigente" /></label></div><button className="button primary" disabled={saving || !relationForm.areaId || relationForm.reason.trim().length < 3}>Vincular área</button></form></details>}
|
||
</article>
|
||
|
||
<article className="panel company-card company-activity-card">
|
||
<div className="company-card-heading"><div><span className="eyebrow">INSPECCIONES</span><h2>Actividad de la empresa</h2><p>Acceso rápido a la documentación que ya fue emitida.</p></div></div>
|
||
<div className="company-metrics">
|
||
<div><small>Actas emitidas</small><strong>{metrics.acts}</strong></div>
|
||
<div><small>Informes</small><strong>{metrics.reports}</strong></div>
|
||
<div><small>Inspecciones activas</small><strong>{metrics.activeInspections}</strong></div>
|
||
</div>
|
||
{(canReadActs || canReadReports) && <div className="company-card-actions"><button type="button" className="button primary" onClick={() => setTab('issued')}>Ver actas e informes <Icon name="chevron" /></button></div>}
|
||
</article>
|
||
</>}
|
||
</div>}
|
||
|
||
{tab === 'issued' && <div className="company-stack">
|
||
<article className="panel company-card">
|
||
<div className="company-card-heading company-doc-heading"><div><span className="eyebrow">DOCUMENTACIÓN EMITIDA</span><h2>Actas e informes</h2><p>Historial documental de esta empresa. Sólo se muestran Actas ya emitidas y sus Informes asociados.</p></div><div className="company-doc-counts"><span>{acts.length} actas</span><span>{reports.length} informes</span></div></div>
|
||
<label className="company-document-search"><Icon name="search" /><input value={documentSearch} onChange={(event) => setDocumentSearch(event.target.value)} placeholder="Buscar por acta, informe, inspección, área o GEDO" /></label>
|
||
{documentsError && <Alert>{documentsError}</Alert>}
|
||
{documentsLoading ? <LoadingBlock label="Cargando documentación emitida…" /> : filteredActs.length === 0 ? <EmptyState title="Sin documentación emitida" text="Todavía no hay Actas selladas para esta empresa." /> : <div className="table-scroll company-doc-table"><table><thead><tr><th>Fecha</th><th>Área</th><th>Acta</th><th>Inspección</th><th>Informe</th><th>Oficialización</th><th /></tr></thead><tbody>{filteredActs.map((act) => {
|
||
const report = reportByAct.get(act.id);
|
||
return <tr key={act.id}>
|
||
<td>{formatDate(act.occurredAt)}</td>
|
||
<td><strong className="table-primary">{areaLabel(act.areas)}</strong></td>
|
||
<td><Link className="text-link" to={`/inspecciones/actas/${act.id}`}>{act.code}</Link></td>
|
||
<td><Link className="text-link" to={`/inspecciones/${act.visitId}`}>{act.visit.code}</Link></td>
|
||
<td>{report ? <Link className="text-link" to={`/informes/${report.id}`}>{report.code}</Link> : <span className="status-badge pending">Pendiente de INF</span>}</td>
|
||
<td>{report ? <span className={`status-badge ${reportStatusClass(report)}`}>{reportStatusLabel(report)}</span> : <span className="muted">—</span>}</td>
|
||
<td className="action-cell"><Link className="icon-button" to={`/inspecciones/actas/${act.id}`} aria-label={`Abrir ${act.code}`}><Icon name="chevron" /></Link></td>
|
||
</tr>;
|
||
})}</tbody></table></div>}
|
||
</article>
|
||
</div>}
|
||
|
||
{tab === 'documents' && <div className="company-stack">
|
||
{loadingContext ? <LoadingBlock label="Cargando documentación…" /> : <>
|
||
{canReadRegistry && <article className="panel company-card">
|
||
<div className="company-card-heading"><div><span className="eyebrow">RESPALDO</span><h2>Documentos de la empresa</h2><p>Documentos e identificadores que respaldan los datos institucionales.</p></div><Link className="button secondary" to={`/inventarios/${asset.id}?advanced=1&tab=registry`}>Administrar</Link></div>
|
||
{registry?.sourceDocuments.length ? <div className="company-document-list">{registry.sourceDocuments.map((document) => <div key={document.linkId}><div><strong>{document.title}</strong><small>{document.documentNumber || document.documentType}{document.issuer ? ` · ${document.issuer}` : ''}</small></div><span className="tag">{document.relationType}</span></div>)}</div> : <div className="inline-empty">Todavía no hay documentos respaldatorios vinculados.</div>}
|
||
{registry?.externalIdentifiers.length ? <details className="company-more"><summary>Ver identificadores externos ({registry.externalIdentifiers.length})</summary><div className="company-identifier-list">{registry.externalIdentifiers.map((item) => <div key={item.id}><strong>{item.namespace}</strong><span>{item.value}</span><small>{item.validUntil ? 'Histórico' : 'Vigente'}</small></div>)}</div></details> : null}
|
||
</article>}
|
||
{canReadMedia && <AssetMediaPanel assetId={asset.id} assetName={asset.name} canManage={canManageMedia} />}
|
||
<div className="company-advanced-link"><span>¿Necesitás procedencia, composición UTE u otros datos técnicos?</span><Link to={`/inventarios/${asset.id}?advanced=1&tab=registry`}>Abrir administración avanzada</Link></div>
|
||
</>}
|
||
</div>}
|
||
|
||
{tab === 'history' && canReadHistory && <AssetHistoryPanel assetId={asset.id} />}
|
||
</section>;
|
||
}
|