From cc8d650aa463d33565bcc53a0df1e15195fd6203 Mon Sep 17 00:00:00 2001
From: enlineawork <enlinea.work@gmail.com>
Date: Thu, 10 Sep 2026 19:54:19 -0300
Subject: [PATCH] feat: present inventory levels as dedicated sections

---
 web-v2/src/pages/AssetsPage.tsx | 61 ++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/web-v2/src/pages/AssetsPage.tsx b/web-v2/src/pages/AssetsPage.tsx
index 25cd931..c4261d1 100644
--- a/web-v2/src/pages/AssetsPage.tsx
+++ b/web-v2/src/pages/AssetsPage.tsx
@@ -33,6 +33,40 @@ const quickViews = [
   { 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();
@@ -58,6 +92,8 @@ export function AssetsPage() {
   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) =>
@@ -102,15 +138,22 @@ export function AssetsPage() {
     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">INVENTARIOS</span>
-        <h1>Inventarios</h1>
-        <p>Todos los registros: Departamento → Área → Yacimiento → Instalación → Subinstalación, más el maestro independiente de Empresas.</p>
+        <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>
-      <PermissionGate permission="assets.create"><Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Nuevo registro</Link></PermissionGate>
     </div>
 
     <AssetCenterTabs active={view === 'hierarchy' ? 'navigate' : 'list'} />
@@ -126,7 +169,7 @@ export function AssetsPage() {
         {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>Nivel</span><SearchableSelect value={typeId} onChange={(event) => update({ typeId: event.target.value || null })}><option value="">Todos los niveles</option>{types.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)}</SearchableSelect></label>
+        <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>
@@ -135,17 +178,17 @@ export function AssetsPage() {
 
     {error && <Alert>{error}</Alert>}
     {view === 'hierarchy'
-      ? <AssetHierarchyView filters={filters} />
+      ? <AssetHierarchyView filters={filters} types={types} />
       : loading
         ? <LoadingBlock label="Cargando Inventarios…" />
         : assets.length === 0
-          ? <EmptyState title="Todavía no hay registros" text="La base está lista para comenzar la carga manual desde Departamento." />
+          ? <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>Nivel</th><th>Ubicación / Operadora</th><th>Estado</th><th>Actualizado</th><th aria-label="Acciones" /></tr></thead><tbody>
+            <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><span className="tag">{asset.type.operationalRole === 'COMPANY' ? 'Empresa' : 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>