Modernización de la Página de Inicio #72

Closed
opened 2026-06-11 00:25:06 +00:00 by leandro · 0 comments
Owner

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.
## 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. ```
Sign in to join this conversation.
No Milestone
No project
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leandro/phronCare#72
No description provided.