leandro
ed9de1b45e
5.3 KiB
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:
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:
UI (Blazor)
Sin impacto en capas inferiores.
Wireframe funcional esperado
+--------------------------------------------------+
| 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
feature/leandro/72-home-dashboard
Commit sugerido
feat(ui): modernize home dashboard and welcome experience close #72
Instrucción para Codex
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.