202 lines
13 KiB
TypeScript
202 lines
13 KiB
TypeScript
import { SearchableSelect } from '../components/SearchableSelect';
|
||
import { useEffect, useMemo, useState } from 'react';
|
||
import type { FormEvent } from 'react';
|
||
import { Link, useSearchParams } from 'react-router';
|
||
import { PermissionGate } from '../auth/PermissionGate';
|
||
import { Alert, EmptyState, LoadingBlock, errorMessage } from '../components/Feedback';
|
||
import { Icon } from '../components/Icon';
|
||
import { useOperationalContext } from '../context/OperationalContext';
|
||
import { AssetCenterTabs } from '../features/assets/AssetCenterTabs';
|
||
import { AssetHierarchyView } from '../features/assets/AssetHierarchyView';
|
||
import {
|
||
assetOperationalStatusLabel,
|
||
assetStatusClass,
|
||
assetStatusLabel,
|
||
ASSET_OPERATIONAL_STATUSES,
|
||
ASSET_STATUSES,
|
||
} from '../features/assets/assetPresentation';
|
||
import { listAssetTypes } from '../lib/api';
|
||
import type {
|
||
AssetInformationStatus,
|
||
AssetOperationalStatus,
|
||
AssetType,
|
||
PageMeta,
|
||
} from '../lib/api';
|
||
import { listInventory } from '../lib/inventoryBrowserApi';
|
||
import type { InventoryListItem, InventoryQuery } from '../lib/inventoryBrowserApi';
|
||
import { formatDate } from '../lib/format';
|
||
|
||
const quickViews = [
|
||
{ key: 'all', label: 'Todos' },
|
||
{ key: 'validation', label: 'Pendientes de validar' },
|
||
{ key: 'location', label: 'Sin ubicación' },
|
||
{ key: 'out', label: 'Fuera de servicio' },
|
||
] as const;
|
||
|
||
const structuredTypeCopy: Record<string, { title: string; description: string }> = {
|
||
departamento: {
|
||
title: 'Departamentos',
|
||
description: 'Raíz territorial del Inventario. Cada Departamento contiene sus Áreas.',
|
||
},
|
||
area: {
|
||
title: 'Áreas',
|
||
description: 'Áreas dentro de un Departamento, con sus Empresas operadoras vinculadas.',
|
||
},
|
||
yacimiento: {
|
||
title: 'Yacimientos',
|
||
description: 'Yacimientos pertenecientes a un Área y utilizados para organizar sus Instalaciones.',
|
||
},
|
||
instalacion: {
|
||
title: 'Instalaciones',
|
||
description: 'Instalaciones dentro de un Yacimiento, con clasificación técnica y contexto operativo.',
|
||
},
|
||
subinstalacion: {
|
||
title: 'Subinstalaciones',
|
||
description: 'Subinstalaciones dependientes de una Instalación, último nivel de la estructura.',
|
||
},
|
||
};
|
||
|
||
function structuredPresentation(type: AssetType | undefined) {
|
||
if (!type) return null;
|
||
if (type.operationalRole === 'COMPANY') {
|
||
return {
|
||
title: 'Empresas',
|
||
description: 'Maestro independiente de Empresas operadoras. Se vinculan a una o más Áreas.',
|
||
};
|
||
}
|
||
return structuredTypeCopy[type.code.toLowerCase()] ?? null;
|
||
}
|
||
|
||
export function AssetsPage() {
|
||
const [urlParams, setUrlParams] = useSearchParams();
|
||
const operationalContext = useOperationalContext();
|
||
const [assets, setAssets] = useState<InventoryListItem[]>([]);
|
||
const [types, setTypes] = useState<AssetType[]>([]);
|
||
const [meta, setMeta] = useState<PageMeta>({ page: 1, pageSize: 25, total: 0, totalPages: 0 });
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState('');
|
||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||
const [draftSearch, setDraftSearch] = useState(urlParams.get('search') ?? '');
|
||
|
||
const view = urlParams.get('view') === 'list' ? 'list' : 'hierarchy';
|
||
const quick = (urlParams.get('quick') ?? 'all') as typeof quickViews[number]['key'];
|
||
const search = urlParams.get('search') ?? '';
|
||
const typeId = urlParams.get('typeId') ?? '';
|
||
const rawStatus = urlParams.get('status') ?? '';
|
||
const rawOperationalStatus = urlParams.get('operationalStatus') ?? '';
|
||
const operationalAreaId = operationalContext.areaId || urlParams.get('operationalAreaId') || '';
|
||
const operatorCompanyId = operationalContext.companyId || urlParams.get('operatorCompanyId') || '';
|
||
const status = ASSET_STATUSES.some((item) => item.value === rawStatus) ? rawStatus as AssetInformationStatus : '';
|
||
const operationalStatus = ASSET_OPERATIONAL_STATUSES.some((item) => item.value === rawOperationalStatus) ? rawOperationalStatus as AssetOperationalStatus : '';
|
||
const page = Math.max(1, Number(urlParams.get('page') ?? 1) || 1);
|
||
const needsValidation = quick === 'validation' ? true : undefined;
|
||
const hasGeometry = quick === 'location' ? false : undefined;
|
||
const effectiveOperationalStatus = quick === 'out' ? 'OUT_OF_SERVICE' as AssetOperationalStatus : operationalStatus;
|
||
const selectedType = types.find((type) => type.id === typeId);
|
||
const selectedPresentation = structuredPresentation(selectedType);
|
||
|
||
useEffect(() => {
|
||
listAssetTypes().then((data) => setTypes(data.filter((type) =>
|
||
type.operationalRole === 'COMPANY'
|
||
|| ['departamento','area','yacimiento','instalacion','subinstalacion'].includes(type.code.toLowerCase()),
|
||
))).catch(() => undefined);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (view !== 'list') return;
|
||
setLoading(true); setError('');
|
||
listInventory({
|
||
page, pageSize: 25, search, typeId, status,
|
||
operationalStatus: effectiveOperationalStatus,
|
||
operationalAreaId, operatorCompanyId, needsValidation, hasGeometry,
|
||
})
|
||
.then((response) => { setAssets(response.data); setMeta(response.meta); })
|
||
.catch((requestError) => setError(errorMessage(requestError)))
|
||
.finally(() => setLoading(false));
|
||
}, [view, page, search, typeId, status, effectiveOperationalStatus, operationalAreaId, operatorCompanyId, needsValidation, hasGeometry]);
|
||
|
||
const filters: InventoryQuery = useMemo(() => ({
|
||
search, typeId, status, operationalStatus: effectiveOperationalStatus,
|
||
operationalAreaId, operatorCompanyId, needsValidation, hasGeometry,
|
||
}), [search, typeId, status, effectiveOperationalStatus, operationalAreaId, operatorCompanyId, needsValidation, hasGeometry]);
|
||
|
||
const update = (changes: Record<string, string | null>) => {
|
||
const next = new URLSearchParams(urlParams);
|
||
Object.entries(changes).forEach(([key, value]) => value ? next.set(key, value) : next.delete(key));
|
||
next.delete('page'); setUrlParams(next);
|
||
};
|
||
const applySearch = (event: FormEvent) => { event.preventDefault(); update({ search: draftSearch.trim() || null }); };
|
||
const setQuick = (key: string) => update({ quick: key === 'all' ? null : key, operationalStatus: key === 'out' ? null : rawOperationalStatus || null });
|
||
const clearFilters = () => {
|
||
const next = new URLSearchParams();
|
||
if (view === 'list') next.set('view', 'list');
|
||
const parentId=urlParams.get('parentId'); if (parentId) next.set('parentId',parentId);
|
||
setDraftSearch(''); setUrlParams(next);
|
||
};
|
||
const setPage = (value: number) => {
|
||
const next = new URLSearchParams(urlParams);
|
||
value > 1 ? next.set('page', String(value)) : next.delete('page'); setUrlParams(next);
|
||
};
|
||
const advancedActive = Boolean(typeId || status || rawOperationalStatus);
|
||
const sectionTitle = view === 'list' && selectedPresentation ? selectedPresentation.title : 'Inventarios';
|
||
const sectionDescription = view === 'list' && selectedPresentation
|
||
? selectedPresentation.description
|
||
: 'Empresas y estructura territorial: Departamento → Área → Yacimiento → Instalación → Subinstalación.';
|
||
|
||
return <section>
|
||
<div className="page-heading asset-center-heading">
|
||
<div>
|
||
<span className="eyebrow">{selectedPresentation && view === 'list' ? 'INVENTARIOS · SECCIÓN' : 'INVENTARIOS'}</span>
|
||
<h1>{sectionTitle}</h1>
|
||
<p>{sectionDescription}</p>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||
{selectedPresentation && view === 'list' && <Link className="button secondary" to="/inventarios"><Icon name="layers" />Ver estructura</Link>}
|
||
<PermissionGate permission="assets.create"><Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Nuevo registro</Link></PermissionGate>
|
||
</div>
|
||
</div>
|
||
|
||
<AssetCenterTabs active={view === 'hierarchy' ? 'navigate' : 'list'} />
|
||
|
||
<div className="asset-center-controls">
|
||
<form className="asset-center-search" onSubmit={applySearch}>
|
||
<Icon name="search" />
|
||
<input value={draftSearch} onChange={(event) => setDraftSearch(event.target.value)} placeholder="Buscar por nombre, código o identificación…" />
|
||
<button className="button primary" type="submit">Buscar</button>
|
||
</form>
|
||
<div className="quick-view-row" aria-label="Vistas rápidas">
|
||
{quickViews.map((item) => <button key={item.key} type="button" className={quick === item.key ? 'active' : ''} onClick={() => setQuick(item.key)}>{item.label}</button>)}
|
||
{view === 'list' && <button type="button" className={advancedOpen || advancedActive ? 'advanced active' : 'advanced'} onClick={() => setAdvancedOpen((current) => !current)}>Más filtros</button>}
|
||
</div>
|
||
{view === 'list' && (advancedOpen || advancedActive) && <div className="advanced-filter-panel">
|
||
<label className="field compact-field"><span>Sección</span><SearchableSelect value={typeId} onChange={(event) => update({ typeId: event.target.value || null })}><option value="">Todas las secciones</option>{types.map((type) => <option key={type.id} value={type.id}>{type.operationalRole === 'COMPANY' ? 'Empresas' : structuredTypeCopy[type.code.toLowerCase()]?.title ?? type.name}</option>)}</SearchableSelect></label>
|
||
<label className="field compact-field"><span>Estado del dato</span><SearchableSelect value={status} onChange={(event) => update({ status: event.target.value || null })}><option value="">Todos</option>{ASSET_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</SearchableSelect></label>
|
||
<label className="field compact-field"><span>Estado operativo</span><SearchableSelect value={rawOperationalStatus} onChange={(event) => update({ operationalStatus: event.target.value || null, quick: quick === 'out' ? null : quick === 'all' ? null : quick })}><option value="">Todos</option>{ASSET_OPERATIONAL_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</SearchableSelect></label>
|
||
<button type="button" className="button text filter-clear" onClick={clearFilters}>Limpiar filtros</button>
|
||
</div>}
|
||
</div>
|
||
|
||
{error && <Alert>{error}</Alert>}
|
||
{view === 'hierarchy'
|
||
? <AssetHierarchyView filters={filters} types={types} />
|
||
: loading
|
||
? <LoadingBlock label="Cargando Inventarios…" />
|
||
: assets.length === 0
|
||
? <EmptyState title="Todavía no hay registros" text={selectedPresentation ? `No hay registros cargados en ${selectedPresentation.title}.` : 'La base está lista para comenzar la carga manual desde Departamento.'} />
|
||
: <div className="table-panel compact-assets-table">
|
||
<div className="table-summary"><strong>{meta.total} registro{meta.total === 1 ? '' : 's'}</strong><span>Página {meta.page} de {Math.max(meta.totalPages, 1)}</span></div>
|
||
<div className="table-scroll"><table><thead><tr><th>Registro</th><th>Sección</th><th>Ubicación / Operadora</th><th>Estado</th><th>Actualizado</th><th aria-label="Acciones" /></tr></thead><tbody>
|
||
{assets.map((asset) => <tr key={asset.id}>
|
||
<td><div className="asset-cell"><span className="asset-symbol"><Icon name="layers" size={16} /></span><div><Link to={`/inventarios/${asset.id}`} className="table-primary">{asset.name}</Link><small>{asset.code}{asset.parent ? ` · en ${asset.parent.name}` : ''}</small></div></div></td>
|
||
<td><span className="tag">{asset.type.name}</span></td>
|
||
<td>{asset.operationalArea ? <span><strong className="table-primary">{asset.operationalArea.name}</strong><small className="cell-subtext">{asset.operatorCompany?.name ?? 'Sin operadora vigente'}</small></span> : asset.operatorCompany ? <span>{asset.operatorCompany.name}</span> : <span className="muted">{asset.parent?.name ?? 'Raíz / maestro independiente'}</span>}</td>
|
||
<td><div className="dual-status"><span className={`status-badge ${assetStatusClass(asset.informationStatus)}`}>{assetStatusLabel(asset.informationStatus)}</span><small>{assetOperationalStatusLabel(asset.operationalStatus)}</small></div></td>
|
||
<td>{formatDate(asset.updatedAt)}</td>
|
||
<td className="action-cell"><Link className="icon-button" to={`/inventarios/${asset.id}`} aria-label={`Abrir ${asset.name}`}><Icon name="chevron" /></Link></td>
|
||
</tr>)}
|
||
</tbody></table></div>
|
||
<div className="pagination"><button className="button secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>Anterior</button><span>{meta.total ? `${(page - 1) * meta.pageSize + 1}–${Math.min(page * meta.pageSize, meta.total)} de ${meta.total}` : '0 resultados'}</span><button className="button secondary" disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)}>Siguiente</button></div>
|
||
</div>}
|
||
</section>;
|
||
}
|