From 2cf2242b82a1e06e2daf27f09c2a5a2c12f7f18c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 13:52:13 -0600
Subject: [PATCH] Add maintenance mode to data analysis pages

Restore all data analysis pages but display them in maintenance mode.
Users can see these pages in the navigation and access them, but they
show a maintenance message instead of trying to fetch data.

Changes:
- Create MaintenanceMode component for reusable maintenance UI
- Restore all deleted pages: explorer, metadatos, rawExplorer, panorama,
  comparativa-cosechas, informe-ingresos
- Replace complex data-fetching logic with MaintenanceMode component
- Add "Mantenimiento" badges to navigation menu items
- Pages show clear maintenance message with technical details
- Users can still navigate to these pages without errors

This approach:
- Keeps the UI structure intact
- Shows users what features exist
- Provides clear communication about maintenance status
- Prevents confusion about missing features
- Easy to re-enable when data sources are reconnected
---
 nuxt4-app/app/components/MaintenanceMode.vue | 78 ++++++++++++++++++++
 nuxt4-app/app/components/app/AppSidebar.vue  | 42 +++++++++++
 nuxt4-app/app/pages/comparativa-cosechas.vue | 15 ++++
 nuxt4-app/app/pages/explorer.vue             | 15 ++++
 nuxt4-app/app/pages/informe-ingresos.vue     | 15 ++++
 nuxt4-app/app/pages/metadatos.vue            | 15 ++++
 nuxt4-app/app/pages/panorama.vue             | 15 ++++
 nuxt4-app/app/pages/rawExplorer.vue          | 15 ++++
 8 files changed, 210 insertions(+)
 create mode 100644 nuxt4-app/app/components/MaintenanceMode.vue
 create mode 100644 nuxt4-app/app/pages/comparativa-cosechas.vue
 create mode 100644 nuxt4-app/app/pages/explorer.vue
 create mode 100644 nuxt4-app/app/pages/informe-ingresos.vue
 create mode 100644 nuxt4-app/app/pages/metadatos.vue
 create mode 100644 nuxt4-app/app/pages/panorama.vue
 create mode 100644 nuxt4-app/app/pages/rawExplorer.vue

diff --git a/nuxt4-app/app/components/MaintenanceMode.vue b/nuxt4-app/app/components/MaintenanceMode.vue
new file mode 100644
index 0000000..6150c13
--- /dev/null
+++ b/nuxt4-app/app/components/MaintenanceMode.vue
@@ -0,0 +1,78 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <div class="text-center py-12 space-y-6">
+      <div class="flex justify-center">
+        <div class="w-24 h-24 rounded-full bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center relative">
+          <UIcon :name="icon" class="size-12 text-amber-600 dark:text-amber-400" />
+          <span class="absolute -top-1 -right-1 w-6 h-6 bg-amber-500 text-white text-xs font-bold rounded-full flex items-center justify-center ring-4 ring-white dark:ring-gray-900">
+            !
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+          {{ title }}
+        </h2>
+        <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
+          Esta funcionalidad está temporalmente en mantenimiento
+        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-500 max-w-md mx-auto">
+          {{ description }}
+        </p>
+      </div>
+
+      <div class="flex justify-center gap-3">
+        <UButton
+          to="/"
+          color="primary"
+          icon="i-lucide-home"
+        >
+          Volver al inicio
+        </UButton>
+        <UButton
+          v-if="showRefresh"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-refresh-cw"
+          @click="refresh"
+        >
+          Reintentar
+        </UButton>
+      </div>
+
+      <div v-if="technicalInfo" class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+        <details class="text-left max-w-md mx-auto">
+          <summary class="text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-white">
+            Información técnica
+          </summary>
+          <div class="mt-3 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-sm text-gray-600 dark:text-gray-400">
+            {{ technicalInfo }}
+          </div>
+        </details>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string
+  description?: string
+  icon?: string
+  showRefresh?: boolean
+  technicalInfo?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'Funcionalidad en mantenimiento',
+  description: 'Estamos trabajando para mejorar esta funcionalidad. Por favor, intenta nuevamente más tarde.',
+  icon: 'i-lucide-construction',
+  showRefresh: false,
+  technicalInfo: ''
+})
+
+const refresh = () => {
+  window.location.reload()
+}
+</script>
diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index d717a1f..ecce0e5 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -232,6 +232,48 @@ const navigationPrimary = computed<NavigationMenuItem[]>(() => [
     icon: 'i-lucide-home',
     to: '/',
     active: route.path === '/'
+  },
+  {
+    label: 'Panorama Facturador',
+    icon: 'i-lucide-bar-chart-3',
+    to: '/panorama',
+    active: route.path === '/panorama',
+    badge: { label: 'Mantenimiento', color: 'amber' }
+  },
+  {
+    label: 'Informe Ingresos',
+    icon: 'i-lucide-file-bar-chart',
+    to: '/informe-ingresos',
+    active: route.path === '/informe-ingresos',
+    badge: { label: 'Mantenimiento', color: 'amber' }
+  },
+  {
+    label: 'Comparativa Cosechas',
+    icon: 'i-lucide-calendar-range',
+    to: '/comparativa-cosechas',
+    active: route.path === '/comparativa-cosechas',
+    badge: { label: 'Mantenimiento', color: 'amber' }
+  },
+  {
+    label: 'Explorador de datos',
+    icon: 'i-lucide-table',
+    to: '/explorer',
+    active: route.path === '/explorer',
+    badge: { label: 'Mantenimiento', color: 'amber' }
+  },
+  {
+    label: 'Metadatos',
+    icon: 'i-lucide-database',
+    to: '/metadatos',
+    active: route.path === '/metadatos',
+    badge: { label: 'Mantenimiento', color: 'amber' }
+  },
+  {
+    label: 'Explorador de datos raw',
+    icon: 'i-lucide-table',
+    to: '/rawExplorer',
+    active: route.path === '/rawExplorer',
+    badge: { label: 'Mantenimiento', color: 'amber' }
   }
 ])
 
diff --git a/nuxt4-app/app/pages/comparativa-cosechas.vue b/nuxt4-app/app/pages/comparativa-cosechas.vue
new file mode 100644
index 0000000..2908caa
--- /dev/null
+++ b/nuxt4-app/app/pages/comparativa-cosechas.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Comparativa de Cosechas"
+    description="El análisis comparativo de cosechas está temporalmente deshabilitado."
+    icon="i-lucide-calendar-range"
+    technical-info="Módulo de análisis agrícola en proceso de actualización con nuevos indicadores y métricas."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'informe',
+  title: 'Comparativa Cosechas'
+})
+</script>
diff --git a/nuxt4-app/app/pages/explorer.vue b/nuxt4-app/app/pages/explorer.vue
new file mode 100644
index 0000000..fc35d31
--- /dev/null
+++ b/nuxt4-app/app/pages/explorer.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Explorador de Datos"
+    description="El explorador de datos está temporalmente deshabilitado mientras realizamos mejoras en el sistema de consultas."
+    icon="i-lucide-table"
+    technical-info="La funcionalidad de exploración de datos requiere reconexión con la fuente de datos. Actualmente en proceso de migración a nueva arquitectura."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard',
+  title: 'Explorador de datos'
+})
+</script>
diff --git a/nuxt4-app/app/pages/informe-ingresos.vue b/nuxt4-app/app/pages/informe-ingresos.vue
new file mode 100644
index 0000000..480026c
--- /dev/null
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Informe de Ingresos"
+    description="El informe detallado de ingresos está temporalmente deshabilitado."
+    icon="i-lucide-file-bar-chart"
+    technical-info="Sistema de reportes financieros en proceso de migración y mejora de algoritmos de cálculo."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'informe',
+  title: 'Informe Ingresos'
+})
+</script>
diff --git a/nuxt4-app/app/pages/metadatos.vue b/nuxt4-app/app/pages/metadatos.vue
new file mode 100644
index 0000000..3b148c8
--- /dev/null
+++ b/nuxt4-app/app/pages/metadatos.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Metadatos"
+    description="La visualización de metadatos de tablas está temporalmente deshabilitada."
+    icon="i-lucide-database"
+    technical-info="Servicio de metadatos en proceso de reconfiguración para nueva fuente de datos."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard',
+  title: 'Metadatos'
+})
+</script>
diff --git a/nuxt4-app/app/pages/panorama.vue b/nuxt4-app/app/pages/panorama.vue
new file mode 100644
index 0000000..d14ca6e
--- /dev/null
+++ b/nuxt4-app/app/pages/panorama.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Panorama Facturador"
+    description="El panel de panorama facturador está temporalmente deshabilitado mientras actualizamos las métricas."
+    icon="i-lucide-bar-chart-3"
+    technical-info="Dashboard de facturación en proceso de integración con nueva fuente de datos empresariales."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'informe',
+  title: 'Panorama Facturador'
+})
+</script>
diff --git a/nuxt4-app/app/pages/rawExplorer.vue b/nuxt4-app/app/pages/rawExplorer.vue
new file mode 100644
index 0000000..60e96ec
--- /dev/null
+++ b/nuxt4-app/app/pages/rawExplorer.vue
@@ -0,0 +1,15 @@
+<template>
+  <MaintenanceMode
+    title="Explorador de Datos Raw"
+    description="El explorador de datos en formato raw está temporalmente deshabilitado."
+    icon="i-lucide-file-code"
+    technical-info="Funcionalidad de exploración raw en proceso de actualización para soportar nuevos formatos de datos."
+  />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard',
+  title: 'Explorador de datos raw'
+})
+</script>