feat(frontend): dashboard rediseñado — visualizaciones variadas + tema moderno (claro/oscuro)#26
Merged
Merged
Conversation
…ema moderno Sustituye los dos BarChart idénticos por un dashboard completo y atractivo, con sistema de diseño propio (design tokens) y modo claro/oscuro automático (prefers-color-scheme). Sin dependencias nuevas; todo con Recharts + CSS. - KPIs (ingresos, ventas, ticket medio, unidades, top producto), derivados en cliente de /api/sales vía lib/analytics.ts (funciones puras testeadas). - Evolución temporal: AreaChart con gradiente (serie revenueByDate). - Por producto: BarChart restyleado (barras redondeadas, tooltip custom). - Por cliente: donut (PieChart) con paleta multicolor y leyenda. - ChartCard + ChartTooltip compartidos; globals.css con tokens, grid responsive y variante oscura. - lib/theme.ts: paleta concreta light/dark vía useSyncExternalStore. Los colores de Recharts van como hex (var() NO resuelve en atributos SVG). Animaciones de series desactivadas (render determinista, sin parpadeo en blanco al cargar). - fetchDashboard trae también las ventas crudas; el self-heal de cold start se conserva intacto. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rediseño visual del dashboard pedido por el usuario: mostrar los datos de forma atractiva y variada con un look moderno.
Qué cambia
Antes: dos
BarChartidénticos sobre CSS plano. Ahora un dashboard completo:/api/sales).AreaChartcon gradiente (revenueByDate).BarChartrestyleado (barras redondeadas, tooltip custom).PieChart) con paleta multicolor + leyenda.Estilo
globals.css(colores, sombras, paleta de gráficos, radios) + layout en CSS grid responsive.prefers-color-scheme.Notas técnicas
lib/analytics.ts: funciones puras (revenueByDate,computeKpis) testeadas.lib/theme.ts: paleta concreta light/dark víauseSyncExternalStore. Los colores de Recharts van como hex porquevar()no resuelve en atributos de presentación SVG (fill/stroke); el chrome HTML sí usa variables CSS. Animaciones de series desactivadas → render determinista y sin parpadeo en blanco al cargar.fetchDashboardtrae también las ventas crudas; el self-heal de cold start se conserva intacto.Verificación
lint✅ ·test:run✅ (18, +nuevos de analytics/KpiCards/RevenueOverTime) ·build✅🤖 Generated with Claude Code