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
This commit is contained in:
78
nuxt4-app/app/components/MaintenanceMode.vue
Normal file
78
nuxt4-app/app/components/MaintenanceMode.vue
Normal 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>
|
||||
@@ -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' }
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
15
nuxt4-app/app/pages/comparativa-cosechas.vue
Normal file
15
nuxt4-app/app/pages/comparativa-cosechas.vue
Normal 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>
|
||||
15
nuxt4-app/app/pages/explorer.vue
Normal file
15
nuxt4-app/app/pages/explorer.vue
Normal 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>
|
||||
15
nuxt4-app/app/pages/informe-ingresos.vue
Normal file
15
nuxt4-app/app/pages/informe-ingresos.vue
Normal 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>
|
||||
15
nuxt4-app/app/pages/metadatos.vue
Normal file
15
nuxt4-app/app/pages/metadatos.vue
Normal 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>
|
||||
15
nuxt4-app/app/pages/panorama.vue
Normal file
15
nuxt4-app/app/pages/panorama.vue
Normal 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>
|
||||
15
nuxt4-app/app/pages/rawExplorer.vue
Normal file
15
nuxt4-app/app/pages/rawExplorer.vue
Normal 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>
|
||||
Reference in New Issue
Block a user