Add maintenance mode to data analysis pages
All checks were successful
build-and-deploy / build (push) Successful in 45s
build-and-deploy / deploy (push) Successful in 4s

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
This commit is contained in:
2025-10-13 13:52:13 -06:00
parent 608b4dbe26
commit 2cf2242b82
8 changed files with 210 additions and 0 deletions

View File

@@ -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>

View File

@@ -232,6 +232,48 @@ const navigationPrimary = computed<NavigationMenuItem[]>(() => [
icon: 'i-lucide-home', icon: 'i-lucide-home',
to: '/', to: '/',
active: route.path === '/' 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' }
} }
]) ])

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>