204 lines
11 KiB
TypeScript
204 lines
11 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import { Link } from 'react-router';
|
||
import { Alert, LoadingBlock, errorMessage } from '../components/Feedback';
|
||
import { Icon } from '../components/Icon';
|
||
import { getFindingCatalogAdmin, listAssetTypes } from '../lib/api';
|
||
import type { AssetType, FindingAdminCatalog } from '../lib/api';
|
||
import { listInventoryFamiliesAdmin } from '../lib/inventoryStructureApi';
|
||
import type { InventoryFamily } from '../lib/inventoryStructureApi';
|
||
|
||
type CanonicalKind = 'EMPRESA' | 'DEPARTAMENTO' | 'AREA' | 'YACIMIENTO' | 'INSTALACION' | 'SUBINSTALACION';
|
||
|
||
type StructuralField = {
|
||
label: string;
|
||
detail: string;
|
||
required?: boolean;
|
||
relation?: boolean;
|
||
};
|
||
|
||
const LEVELS: Array<{ kind: CanonicalKind; label: string; description: string; fields: StructuralField[] }> = [
|
||
{
|
||
kind: 'EMPRESA',
|
||
label: 'Empresa',
|
||
description: 'Maestro independiente. La Empresa se relaciona directamente con uno o más Yacimientos.',
|
||
fields: [{ label: 'Nombre', detail: 'Nombre de la Empresa / Operadora.', required: true }],
|
||
},
|
||
{
|
||
kind: 'DEPARTAMENTO',
|
||
label: 'Departamento',
|
||
description: 'Raíz territorial. No depende de ningún otro nivel.',
|
||
fields: [{ label: 'Nombre', detail: 'Nombre del Departamento.', required: true }],
|
||
},
|
||
{
|
||
kind: 'AREA',
|
||
label: 'Área',
|
||
description: 'El Área sólo tiene Nombre y pertenece obligatoriamente a un Departamento.',
|
||
fields: [
|
||
{ label: 'Departamento', detail: 'Relación obligatoria Departamento → Área.', required: true, relation: true },
|
||
{ label: 'Nombre', detail: 'Nombre del Área.', required: true },
|
||
],
|
||
},
|
||
{
|
||
kind: 'YACIMIENTO',
|
||
label: 'Yacimiento',
|
||
description: 'El Yacimiento concentra el contexto operativo: Área, Tipo de concesión y Empresa relacionada.',
|
||
fields: [
|
||
{ label: 'Área', detail: 'Relación obligatoria Área → Yacimiento.', required: true, relation: true },
|
||
{ label: 'Tipo de concesión', detail: 'Explotación o Exploración, según la fuente.', required: true, relation: true },
|
||
{ label: 'Empresa relacionada', detail: 'Empresa / Operadora asociada directamente al Yacimiento.', required: true, relation: true },
|
||
{ label: 'Nombre', detail: 'Nombre del Yacimiento. Puede repetirse en otra Área.', required: true },
|
||
],
|
||
},
|
||
{
|
||
kind: 'INSTALACION',
|
||
label: 'Instalación',
|
||
description: 'Cada Instalación pertenece a un Yacimiento y posee una clasificación técnica.',
|
||
fields: [
|
||
{ label: 'Yacimiento', detail: 'Relación obligatoria Yacimiento → Instalación.', required: true, relation: true },
|
||
{ label: 'Tipo de instalación', detail: 'Clasificación técnica tomada del modelo de Instalaciones.', required: true, relation: true },
|
||
],
|
||
},
|
||
{
|
||
kind: 'SUBINSTALACION',
|
||
label: 'Subinstalación',
|
||
description: 'Cada Subinstalación pertenece a una Instalación y usa una clasificación compatible con ella.',
|
||
fields: [
|
||
{ label: 'Instalación', detail: 'Relación obligatoria Instalación → Subinstalación.', required: true, relation: true },
|
||
{ label: 'Tipo de subinstalación', detail: 'Clasificación técnica compatible con el Tipo de instalación padre.', required: true, relation: true },
|
||
],
|
||
},
|
||
];
|
||
|
||
const EMPTY_CATALOG: FindingAdminCatalog = { categories: [], items: [] };
|
||
|
||
function canonicalType(types: AssetType[], kind: CanonicalKind): AssetType | null {
|
||
if (kind === 'EMPRESA') return types.find((type) => type.operationalRole === 'COMPANY' && type.isActive) ?? null;
|
||
if (kind === 'AREA') return types.find((type) => type.operationalRole === 'AREA' && type.isActive) ?? null;
|
||
return types.find((type) => type.code.toLowerCase() === kind.toLowerCase() && type.isActive) ?? null;
|
||
}
|
||
|
||
export function AuthoritativeInventoryConfigPage() {
|
||
const [types, setTypes] = useState<AssetType[]>([]);
|
||
const [families, setFamilies] = useState<InventoryFamily[]>([]);
|
||
const [catalog, setCatalog] = useState<FindingAdminCatalog>(EMPTY_CATALOG);
|
||
const [selectedKind, setSelectedKind] = useState<CanonicalKind>('AREA');
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState('');
|
||
|
||
useEffect(() => {
|
||
Promise.all([listAssetTypes(), listInventoryFamiliesAdmin(), getFindingCatalogAdmin()])
|
||
.then(([loadedTypes, loadedFamilies, loadedCatalog]) => {
|
||
setTypes(loadedTypes);
|
||
setFamilies(loadedFamilies);
|
||
setCatalog(loadedCatalog);
|
||
})
|
||
.catch((requestError) => setError(errorMessage(requestError)))
|
||
.finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
const level = LEVELS.find((item) => item.kind === selectedKind) ?? LEVELS[0]!;
|
||
const selectedType = canonicalType(types, selectedKind);
|
||
const commonAttributes = useMemo(() => {
|
||
const attributes = selectedType?.attributes.filter((attribute) => attribute.isActive) ?? [];
|
||
return selectedKind === 'INSTALACION'
|
||
? attributes.filter((attribute) => attribute.code !== 'tipo_instalacion')
|
||
: attributes;
|
||
}, [selectedKind, selectedType]);
|
||
const installationFamilies = families.filter((family) => family.level === 'INSTALLATION' && family.isActive !== false);
|
||
const subinstallationFamilies = families.filter((family) => family.level === 'SUBINSTALLATION' && family.isActive !== false);
|
||
const activeFindings = catalog.items.filter((item) => item.isActive).length;
|
||
|
||
if (loading) return <LoadingBlock label="Cargando configuración de Inventarios…" />;
|
||
|
||
return <section className="inventory-config-page">
|
||
<div className="page-heading">
|
||
<div>
|
||
<span className="eyebrow">ADMINISTRACIÓN · MODELO AUTORITATIVO</span>
|
||
<h1>Configuración de Inventarios</h1>
|
||
<p>Relaciones fijas cargadas desde los SQL definitivos. Los vínculos estructurales no son campos de texto editables.</p>
|
||
</div>
|
||
<Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Agregar registro</Link>
|
||
</div>
|
||
{error && <Alert>{error}</Alert>}
|
||
|
||
<article className="panel" style={{ marginBottom: 18 }}>
|
||
<div className="panel-heading">
|
||
<div>
|
||
<span className="eyebrow">ESTRUCTURA FÍSICA</span>
|
||
<h2>Jerarquía obligatoria</h2>
|
||
<p className="section-copy">Empresa es un maestro independiente y se asocia al Yacimiento. El árbol físico queda separado y sin ambigüedades.</p>
|
||
</div>
|
||
</div>
|
||
<div className="asset-browser-levels" aria-label="Jerarquía de Inventarios">
|
||
<div><span>1</span><strong>Departamento</strong><small>raíz</small></div><i>›</i>
|
||
<div><span>2</span><strong>Área</strong><small>Departamento</small></div><i>›</i>
|
||
<div><span>3</span><strong>Yacimiento</strong><small>Área + Empresa + concesión</small></div><i>›</i>
|
||
<div><span>4</span><strong>Instalación</strong><small>Yacimiento</small></div><i>›</i>
|
||
<div><span>5</span><strong>Subinstalación</strong><small>Instalación</small></div>
|
||
</div>
|
||
<div className="temporal-notice" style={{ marginTop: 14 }}>
|
||
<Icon name="users" />
|
||
<p><strong>Empresa:</strong> ya no pertenece al Área. La relación canónica es <strong>Yacimiento → Empresa relacionada</strong>.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="panel" style={{ marginBottom: 18 }}>
|
||
<div className="panel-heading">
|
||
<div>
|
||
<span className="eyebrow">INFORMACIÓN ESTRUCTURAL</span>
|
||
<h2>{level.label}</h2>
|
||
<p className="section-copy">{level.description}</p>
|
||
</div>
|
||
<span className="tag">Modelo SQL</span>
|
||
</div>
|
||
<div className="quick-view-row" style={{ marginBottom: 18 }}>
|
||
{LEVELS.map((item) => <button type="button" key={item.kind} className={selectedKind === item.kind ? 'active' : ''} onClick={() => setSelectedKind(item.kind)}>{item.label}</button>)}
|
||
</div>
|
||
|
||
<div className="attribute-list">
|
||
{level.fields.map((field, index) => <div className="attribute-card" key={field.label}>
|
||
<span className="attribute-order">{index + 1}</span>
|
||
<span>
|
||
<strong>{field.label}</strong>
|
||
<small>{field.detail}</small>
|
||
</span>
|
||
<span className="attribute-flags">
|
||
{field.relation && <span className="tag">Relación</span>}
|
||
{field.required && <span className="tag">Obligatorio</span>}
|
||
</span>
|
||
</div>)}
|
||
{commonAttributes.map((attribute, index) => <div className="attribute-card" key={attribute.id}>
|
||
<span className="attribute-order">{level.fields.length + index + 1}</span>
|
||
<span>
|
||
<strong>{attribute.name}</strong>
|
||
<small>{attribute.code} · Campo común del nivel</small>
|
||
</span>
|
||
<span className="attribute-flags">{attribute.isRequired && <span className="tag">Obligatorio</span>}</span>
|
||
</div>)}
|
||
</div>
|
||
</article>
|
||
|
||
<div className="dashboard-grid" style={{ alignItems: 'start' }}>
|
||
<article className="panel">
|
||
<div className="panel-heading"><div><span className="eyebrow">MODELO TÉCNICO</span><h2>Tipos de Instalación</h2><p className="section-copy">{installationFamilies.length} clasificaciones exactas del SQL.</p></div></div>
|
||
<div className="attribute-list" style={{ maxHeight: 520, overflow: 'auto' }}>
|
||
{installationFamilies.map((family) => <div className="attribute-card" key={family.id}><span className="asset-symbol"><Icon name="layers" size={16} /></span><span><strong>{family.name}</strong><small>{family.findingCount ?? 0} Hallazgos asociados</small></span><span className="tag">{family.code}</span></div>)}
|
||
</div>
|
||
</article>
|
||
<article className="panel">
|
||
<div className="panel-heading"><div><span className="eyebrow">MODELO TÉCNICO</span><h2>Tipos de Subinstalación</h2><p className="section-copy">{subinstallationFamilies.length} clasificaciones, cada una vinculada a su Tipo de instalación.</p></div></div>
|
||
<div className="attribute-list" style={{ maxHeight: 520, overflow: 'auto' }}>
|
||
{subinstallationFamilies.map((family) => <div className="attribute-card" key={family.id}><span className="asset-symbol"><Icon name="layers" size={16} /></span><span><strong>{family.name}</strong><small>{family.parentFamilies.map((parent) => parent.name).join(' · ') || 'Sin padre'} · {family.findingCount ?? 0} Hallazgos</small></span></div>)}
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<article className="panel" style={{ marginTop: 18 }}>
|
||
<div className="panel-heading">
|
||
<div><span className="eyebrow">HALLAZGOS</span><h2>Catálogo contextual</h2><p className="section-copy">{activeFindings} Hallazgos cargados con sus relaciones exactas a Instalaciones y Subinstalaciones.</p></div>
|
||
<Link className="button secondary" to="/admin/finding-catalog">Abrir catálogo <Icon name="chevron" /></Link>
|
||
</div>
|
||
</article>
|
||
</section>;
|
||
}
|