alexandrump/gob-alert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
alexandrump
2026-02-09 01:02:53 +01:00
commit 82f3464565
90 changed files with 4788 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
apps/web/pages/index.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<div class="page">
<Header />
<main class="container">
<section class="hero">
<div>
<p class="kicker">Radar automático de datos públicos</p>
<h1>Detecta cambios en datos.gob.es antes que nadie</h1>
<p class="lead">Monitoriza datasets, normaliza formatos y recibe alertas por email o Telegram. Configura perfiles sin complicaciones.</p>
<div class="hero-actions">
<NuxtLink to="/catalog" class="btn primary">Ver catálogo</NuxtLink>
<NuxtLink to="/alerts" class="btn ghost">Crear alertas</NuxtLink>
</div>
</div>
<div class="hero-card" v-if="summary">
<div class="metric">
<span class="metric-value">{{ summary.totals.items }}</span>
<span class="metric-label">Datasets</span>
</div>
<div class="metric">
<span class="metric-value">{{ summary.totals.changes }}</span>
<span class="metric-label">Cambios recientes</span>
</div>
<div class="metric">
<span class="metric-value">{{ summary.totals.alertProfiles }}</span>
<span class="metric-label">Perfiles activos</span>
</div>
<div class="card-footer">Actualizado automáticamente</div>
</div>
</section>
<section class="trend" v-if="summary?.trend?.length">
<h2>Tendencia (últimos {{ summary.trend.length }} días)</h2>
<div class="trend-chart">
<div v-for="point in summary.trend" :key="point.date" class="trend-bar">
<span class="bar-fill" :style="{ height: barHeight(point.total) }"></span>
<small>{{ formatShortDate(point.date) }}</small>
</div>
</div>
</section>
<section class="grid">
<article class="panel">
<h2>Cambios recientes</h2>
<ul>
<li v-for="change in summary?.latestChanges || []" :key="change.id">
<strong>{{ change.snapshot?.title || 'Sin título' }}</strong>
<span class="muted">{{ change.snapshot?.publisher || '—' }}</span>
<small class="muted">{{ formatDate(change.createdAt) }}</small>
</li>
</ul>
</article>
<article class="panel">
<h2>Top publicadores</h2>
<ul>
<li v-for="pub in summary?.topPublishers || []" :key="pub.label">
<span>{{ pub.label }}</span>
<strong>{{ pub.value }}</strong>
</li>
</ul>
</article>
<article class="panel">
<h2>Formatos más comunes</h2>
<ul>
<li v-for="fmt in summary?.topFormats || []" :key="fmt.label">
<span>{{ fmt.label }}</span>
<strong>{{ fmt.value }}</strong>
</li>
</ul>
</article>
<article class="panel">
<h2>Top temas</h2>
<ul>
<li v-for="topic in summary?.topTopics || []" :key="topic.label">
<span>{{ topic.label }}</span>
<strong>{{ topic.value }}</strong>
</li>
</ul>
</article>
<article class="panel">
<h2>Top territorios</h2>
<ul>
<li v-for="territory in summary?.topTerritories || []" :key="territory.label">
<span>{{ territory.label }}</span>
<strong>{{ territory.value }}</strong>
</li>
</ul>
</article>
</section>
</main>
</div>
</template>
<script setup>
import Header from '~/components/Header.vue'
const config = useRuntimeConfig()
const { data: summary } = await useFetch(`${config.public.apiBase}/dashboard/summary`)
const maxTrend = computed(() => {
const values = summary.value?.trend?.map((p) => p.total) || []
return Math.max(...values, 1)
})
function formatDate(value) {
if (!value) return ''
return new Date(value).toLocaleDateString('es-ES')
}
function formatShortDate(value) {
if (!value) return ''
const date = new Date(value)
return date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' })
}
function barHeight(value) {
return `${Math.round((value / maxTrend.value) * 100)}%`
}
</script>
<style scoped>
.page {
min-height: 100vh;
background: radial-gradient(circle at top, #f5f7ff 0%, #eef2f9 45%, #e5ecf5 100%);
color: #0f172a;
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}
.hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
align-items: center;
}
.kicker {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.75rem;
color: #475569;
margin-bottom: 0.6rem;
}
.hero h1 {
font-size: clamp(2.2rem, 3vw, 3rem);
margin: 0 0 1rem;
}
.lead {
font-size: 1.05rem;
color: #334155;
}
.hero-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.btn {
padding: 0.7rem 1.4rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.primary {
background: #0f172a;
color: #fff;
}
.btn.ghost {
border: 1px solid #0f172a;
color: #0f172a;
}
.hero-card {
background: #0f172a;
color: #fff;
padding: 1.5rem;
border-radius: 24px;
display: grid;
gap: 1rem;
}
.metric {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.metric-value {
font-size: 1.8rem;
font-weight: 700;
}
.metric-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.card-footer {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.trend {
margin-top: 2.5rem;
background: #ffffff;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
.trend h2 {
margin-top: 0;
font-size: 1.1rem;
}
.trend-chart {
margin-top: 1.2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
gap: 0.6rem;
align-items: end;
}
.trend-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
height: 140px;
}
.bar-fill {
width: 100%;
max-width: 18px;
background: linear-gradient(180deg, #38bdf8 0%, #0f172a 100%);
border-radius: 999px;
display: block;
min-height: 8px;
}
.panel {
background: #ffffff;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
.panel h2 {
margin-top: 0;
font-size: 1.1rem;
}
.panel ul {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: grid;
gap: 0.9rem;
}
.panel li {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.muted {
color: #64748b;
font-size: 0.85rem;
}
@media (max-width: 720px) {
.hero-actions {
flex-direction: column;
align-items: stretch;
}
}
</style>