From b7aba13e8543b63f47c79cc257ccd3b91a401bff Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 11:34:01 -0600
Subject: [PATCH] Fix: Actualizar layout informe para usar estado unificado de
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problema identificado:
- Páginas con layout 'informe' mostraban icono inconsistente
- Páginas con layout 'dashboard' funcionaban correctamente
- Layout 'informe' seguía usando refs locales obsoletas

Causa raíz:
El layout 'informe' no fue actualizado en el refactor inicial:
- Línea 4: <AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
- Líneas 190-191: Refs locales que sobrescriben el composable
- Las props v-model forzaban estado local en lugar de usar singleton

Análisis por layout:
✅ Funcionaban (layout: dashboard):
  - index, explorer, rawExplorer, metadatos, notifications, settings

❌ No funcionaban (layout: informe):
  - panorama, informe-ingresos, comparativa-cosechas, metabase-debug

Solución aplicada:
1. Eliminar v-model:open y v-model:collapsed de <AppSidebar />
2. Remover refs locales sidebarOpen y sidebarCollapsed
3. Remover función isMobile() duplicada
4. Usar useSidebarState() como única fuente de verdad

Cambios:
- app/layouts/informe.vue:4 - Remover v-models de AppSidebar
- app/layouts/informe.vue:183 - Usar useSidebarState() composable
- app/layouts/informe.vue:190-191 - Eliminar refs locales

Resultado:
✓ Icono consistente en TODAS las páginas
✓ Ambos layouts usan la misma arquitectura
✓ Estado completamente unificado
✓ Sin refs locales que sobrescriban el singleton

Referencias:
- app/layouts/informe.vue:4
- app/layouts/informe.vue:183
---
 nuxt4-app/app/layouts/informe.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/nuxt4-app/app/layouts/informe.vue b/nuxt4-app/app/layouts/informe.vue
index 37333c3..51e9c4e 100644
--- a/nuxt4-app/app/layouts/informe.vue
+++ b/nuxt4-app/app/layouts/informe.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="brand-shell min-h-screen text-[#fef9f0]">
     <UDashboardGroup storage-key="analytics-dashboard" class="h-full">
-      <AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
+      <AppSidebar />
 
       <UDashboardPanel class="bg-transparent">
         <template #header>
@@ -179,16 +179,8 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
-// Detectar si es móvil en el primer montaje
-const isMobile = () => {
-  if (import.meta.client) {
-    return window.innerWidth < 1024 // lg breakpoint
-  }
-  return false
-}
-
-const sidebarOpen = ref(!isMobile()) // Cerrada en móvil, abierta en desktop
-const sidebarCollapsed = ref(false)
+// Usar el composable unificado para el estado de la sidebar
+const sidebarState = useSidebarState()
 
 const showActions = ref(true)