From ed9de1b45ef3800812ff9c68e7ef4432f9c63bc0 Mon Sep 17 00:00:00 2001 From: leandro Date: Thu, 11 Jun 2026 00:10:43 -0300 Subject: [PATCH] feat(ui): modernize home dashboard and welcome experience close #72 --- .../Story-72-Modernizacion-Home-PhronCare.md | 276 +++++++++++++++ phronCare.UIBlazor/Layout/NavMenu.razor | 2 +- phronCare.UIBlazor/Pages/Index.razor | 155 +++++++-- phronCare.UIBlazor/Pages/Index.razor.css | 318 ++++++++++++++++++ 4 files changed, 715 insertions(+), 36 deletions(-) create mode 100644 docs/stories/Story-72-Modernizacion-Home-PhronCare.md create mode 100644 phronCare.UIBlazor/Pages/Index.razor.css diff --git a/docs/stories/Story-72-Modernizacion-Home-PhronCare.md b/docs/stories/Story-72-Modernizacion-Home-PhronCare.md new file mode 100644 index 0000000..eb9c351 --- /dev/null +++ b/docs/stories/Story-72-Modernizacion-Home-PhronCare.md @@ -0,0 +1,276 @@ +# PhronCare — Story #72: Modernización de la Página de Inicio + +## Objetivo + +Modernizar la página principal posterior al login para reemplazar el contenido demo actual por una Home profesional, moderna y visualmente atractiva, alineada con el resto de PhronCare. + +La nueva Home debe funcionar como punto de entrada al sistema y ofrecer una visión rápida de los módulos principales. + +--- + +## Contexto funcional + +Actualmente la página principal del BackOffice muestra contenido de demostración utilizado durante el desarrollo inicial. + +El contenido existente no representa información funcional del producto y genera una percepción poco profesional para usuarios finales. + +PhronCare ya cuenta con múltiples módulos funcionales: + +- Pacientes +- Presupuestos +- Ventas +- Remitos +- Sales Documents +- Stock +- Tickets +- Configuración + +La Home debe evolucionar hacia un dashboard de bienvenida que sirva como punto de navegación principal. + +Esta Story se enfoca exclusivamente en la capa UI. + +No debe incorporar métricas reales ni nuevas integraciones. + +--- + +## Alcance + +Analizar la implementación actual de la Home. + +Identificar archivos involucrados. + +Reemplazar el contenido demo actual por un dashboard institucional. + +Implementar: + +### 1. Hero de bienvenida + +Bloque superior con: + +- nombre del sistema +- mensaje de bienvenida +- descripción breve + +Ejemplo: + +```text +Bienvenido a PhronCare + +Gestión integral para empresas de internación domiciliaria, +ortopedia y prestaciones médicas. +``` + +### 2. Accesos rápidos + +Mostrar tarjetas de navegación hacia módulos principales. + +- Pacientes +- Presupuestos +- Ventas +- Remitos +- Sales Documents +- Stock +- Tickets + +Cada tarjeta debe permitir navegación directa. + +### 3. Tarjetas resumen + +Agregar sección de KPIs visuales mock. + +Ejemplos: + +- Presupuestos Activos +- Remitos Emitidos +- Facturas Pendientes +- Tickets Abiertos + +Valores estáticos temporales. + +No consumir API. + +No generar endpoints. + +### 4. Actividad reciente + +Agregar listado visual de actividad simulada. + +Ejemplo: + +- Presupuesto aprobado +- Remito emitido +- Factura generada +- Ticket cerrado + +Contenido mock. + +### 5. Responsive + +La Home debe visualizarse correctamente en: + +- Desktop +- Tablet +- Notebook + +Utilizar Bootstrap existente. + +### 6. Compatibilidad visual + +Mantener compatibilidad con: + +- tema claro +- tema oscuro + +No romper estilos existentes. + +--- + +## Fuera de alcance + +No modificar: + +- Data +- Models +- Domain +- Core +- API +- Base de datos +- Stored Procedures +- Repositorios +- DTOs +- Endpoints +- Swagger +- Autenticación +- Permisos + +No incorporar: + +- métricas reales +- integraciones externas +- reportes +- charts dinámicos + +--- + +## Criterios de aceptación + +- La página principal deja de mostrar contenido demo. +- Existe una sección institucional de bienvenida. +- Existen accesos rápidos a módulos principales. +- Existen tarjetas resumen visuales. +- Existe sección de actividad reciente mock. +- La página es responsive. +- Funciona correctamente en modo claro y oscuro. +- No se generan cambios fuera de UI. +- El proyecto compila correctamente. + +--- + +## Decisiones de diseño + +### Dashboard estático inicial + +La Home funcionará inicialmente como dashboard visual. + +Las métricas serán simuladas. + +Esto evita dependencias innecesarias con API y permite evolucionar posteriormente hacia métricas reales. + +### Navegación rápida + +La Home debe priorizar velocidad de acceso a funcionalidades frecuentes. + +No reemplaza menús laterales existentes. + +Los complementa. + +### Implementación exclusivamente UI + +Toda la Story queda limitada a: + +```text +UI (Blazor) +``` + +Sin impacto en capas inferiores. + +--- + +## Wireframe funcional esperado + +```text ++--------------------------------------------------+ +| Bienvenido a PhronCare | +| Gestión integral de prestaciones médicas | ++--------------------------------------------------+ + ++-----------+-----------+-----------+-------------+ +| Pacientes | Ventas | Stock | Tickets | ++-----------+-----------+-----------+-------------+ + ++-----------+-----------+-----------+-------------+ +| Presup. | Remitos | Facturas | Config | ++-----------+-----------+-----------+-------------+ + ++-----------+-----------+-----------+-------------+ +| 128 | 42 | 15 | 6 | +| Presup. | Remitos | Facturas | Tickets | ++-----------+-----------+-----------+-------------+ + +Actividad reciente + +• Presupuesto aprobado +• Remito emitido +• Factura generada +• Ticket cerrado +``` + +--- + +## Entregable esperado + +Archivos potencialmente involucrados: + +- phronCare.UIBlazor/Pages/Index.razor +- phronCare.UIBlazor/wwwroot/css/app.css + +Pueden agregarse componentes UI auxiliares si Codex considera necesario reutilizar patrones existentes. + +--- + +## Branch sugerida + +```text +feature/leandro/72-home-dashboard +``` + +--- + +## Commit sugerido + +```text +feat(ui): modernize home dashboard and welcome experience close #72 +``` + +--- + +## Instrucción para Codex + +```text +Analizar primero el repositorio completo. + +Identificar cómo está implementada actualmente la Home. + +Reutilizar componentes, estilos y patrones ya existentes. + +No generar APIs. +No generar Core. +No generar Domain. +No generar Models. + +Limitar todos los cambios a UI. + +Implementar la Home descrita en esta Story. + +Generar patch final validado mediante compilación exitosa. +``` diff --git a/phronCare.UIBlazor/Layout/NavMenu.razor b/phronCare.UIBlazor/Layout/NavMenu.razor index 879c150..9d80c2e 100644 --- a/phronCare.UIBlazor/Layout/NavMenu.razor +++ b/phronCare.UIBlazor/Layout/NavMenu.razor @@ -17,7 +17,7 @@