leandro/phronCare
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Backoffice UI/UX Refresh #78

New Issue
Closed
opened 2026-07-21 00:23:02 +00:00 by leandro · 0 comments
leandro commented 2026-07-21 00:23:02 +00:00
Owner
Copy Link

Objetivo

Modernizar la estética general del Backoffice de PhronCare para mejorar la percepción de calidad, usabilidad y consistencia visual, manteniendo intacto el comportamiento funcional del sistema.

La finalidad de esta Story es realizar un refresh visual integral, sin modificar reglas de negocio, flujos funcionales ni contratos existentes.

Contexto funcional

El Backoffice de PhronCare ha evolucionado funcionalmente durante numerosas Stories y actualmente posee una gran cantidad de módulos completamente operativos.

Sin embargo, el crecimiento fue incremental y la interfaz presenta diferencias visuales entre pantallas, componentes y estilos.

Actualmente existen:

  • diferentes criterios de espaciado;
  • distintos tratamientos para títulos;
  • botones con estilos variables;
  • formularios con alineaciones distintas;
  • tablas con diferentes presentaciones;
  • pantallas con distintos niveles de jerarquía visual;
  • una pantalla de Login muy básica respecto del resto del producto.

El objetivo NO es rediseñar el producto.

El objetivo es darle una apariencia moderna, consistente y profesional, similar a la de un producto comercial terminado.

Alcance

Antes de modificar cualquier archivo, Codex deberá analizar el estado actual del Backoffice y proponer internamente un plan de modernización.

Posteriormente deberá implementar mejoras visuales sobre toda la experiencia del usuario, incluyendo como mínimo:

Acceso

  • Pantalla de Login.
  • Branding.
  • Logo.
  • Fondo.
  • Tipografía.
  • Mensajes.
  • Validaciones visuales.
  • Estados de carga.
  • Responsive.

Navegación

  • MainLayout.
  • Sidebar.
  • Topbar.
  • Menús.
  • Agrupación visual.
  • Estados activos.
  • Hover.
  • Espaciados.
  • Iconografía.
  • Responsive.

Home

Revisar la Home existente para asegurar que mantenga coherencia con el nuevo lenguaje visual.

No modificar sus funcionalidades.

Componentes

Unificar el aspecto visual de:

  • botones;
  • cards;
  • badges;
  • tablas;
  • formularios;
  • inputs;
  • selects;
  • datepickers;
  • modales;
  • diálogos;
  • toasts;
  • mensajes;
  • estados vacíos;
  • loading;
  • paginación;
  • iconografía.

Formularios

Revisar:

  • alineación;
  • espaciados;
  • agrupación lógica;
  • tamaños;
  • jerarquía visual;
  • acciones principales y secundarias.

Listados

Revisar:

  • buscadores;
  • filtros;
  • toolbars;
  • acciones;
  • tablas;
  • paginado.

Tema

Revisar:

  • colores;
  • contraste;
  • modo claro;
  • modo oscuro;
  • consistencia entre ambos.

Responsive

Mejorar la experiencia en:

  • desktop;
  • notebook;
  • tablet;
  • resoluciones reducidas.

Lineamientos de diseño

Codex deberá actuar como UX/UI Designer.

No deberá limitarse únicamente a aplicar estilos.

Deberá analizar la experiencia completa del usuario y mejorarla cuando exista una oportunidad clara.

Se espera una interfaz:

  • moderna;
  • limpia;
  • consistente;
  • profesional;
  • elegante;
  • sobria;
  • fácil de utilizar.

La estética debe inspirarse en aplicaciones SaaS modernas de uso empresarial.

No debe transformarse en una interfaz recargada ni experimental.

Restricciones

No modificar:

  • funcionalidades;
  • navegación existente;
  • endpoints;
  • DTOs;
  • Core;
  • Domain;
  • Data;
  • modelos EF;
  • base de datos;
  • permisos;
  • autenticación;
  • contratos publicados.

No incorporar frameworks UI nuevos.

Deberá reutilizar la infraestructura existente del proyecto.

Criterios de aceptación

✔ El Login presenta una imagen profesional y consistente.

✔ El Layout principal posee una estética moderna.

✔ Sidebar y Topbar presentan una navegación clara.

✔ Existe consistencia visual entre módulos.

✔ Botones, formularios y tablas comparten el mismo lenguaje visual.

✔ Se reducen estilos inline cuando corresponda.

✔ El sistema mantiene compatibilidad con tema claro y oscuro.

✔ No existen regresiones funcionales.

✔ El proyecto compila sin errores.

✔ No se modifican contratos existentes.

Decisiones de diseño

La prioridad de esta Story es la percepción del producto.

No se persigue crear un nuevo Design System completo.

No se busca cambiar la identidad de PhronCare.

Se busca que el usuario perciba una aplicación moderna, consistente y de calidad desde la pantalla de Login hasta cualquier módulo del sistema.

Codex podrá proponer pequeñas mejoras de UX siempre que:

  • no cambien el comportamiento funcional;
  • no modifiquen procesos de negocio;
  • no agreguen dependencias importantes;
  • respeten la arquitectura existente.

Entregable esperado

  • Revisión completa de la UI existente.
  • Modernización visual del Login.
  • Modernización del Shell.
  • Modernización de la navegación.
  • Homogeneización de componentes.
  • Ajustes responsive.
  • Ajustes de espaciados.
  • Ajustes tipográficos.
  • Ajustes de iconografía.
  • Lista de archivos modificados.
  • Resumen de las mejoras implementadas.
  • Checklist de pruebas manuales.

Branch sugerida

feature/leandro/78-backoffice-ui-refresh

Commit sugerido

feat(ui): refresh backoffice user experience close #78

## Objetivo Modernizar la estética general del Backoffice de PhronCare para mejorar la percepción de calidad, usabilidad y consistencia visual, manteniendo intacto el comportamiento funcional del sistema. La finalidad de esta Story es realizar un **refresh visual integral**, sin modificar reglas de negocio, flujos funcionales ni contratos existentes. --- ## Contexto funcional El Backoffice de PhronCare ha evolucionado funcionalmente durante numerosas Stories y actualmente posee una gran cantidad de módulos completamente operativos. Sin embargo, el crecimiento fue incremental y la interfaz presenta diferencias visuales entre pantallas, componentes y estilos. Actualmente existen: - diferentes criterios de espaciado; - distintos tratamientos para títulos; - botones con estilos variables; - formularios con alineaciones distintas; - tablas con diferentes presentaciones; - pantallas con distintos niveles de jerarquía visual; - una pantalla de Login muy básica respecto del resto del producto. El objetivo NO es rediseñar el producto. El objetivo es darle una apariencia moderna, consistente y profesional, similar a la de un producto comercial terminado. --- ## Alcance Antes de modificar cualquier archivo, Codex deberá analizar el estado actual del Backoffice y proponer internamente un plan de modernización. Posteriormente deberá implementar mejoras visuales sobre toda la experiencia del usuario, incluyendo como mínimo: ### Acceso - Pantalla de Login. - Branding. - Logo. - Fondo. - Tipografía. - Mensajes. - Validaciones visuales. - Estados de carga. - Responsive. ### Navegación - MainLayout. - Sidebar. - Topbar. - Menús. - Agrupación visual. - Estados activos. - Hover. - Espaciados. - Iconografía. - Responsive. ### Home Revisar la Home existente para asegurar que mantenga coherencia con el nuevo lenguaje visual. No modificar sus funcionalidades. ### Componentes Unificar el aspecto visual de: - botones; - cards; - badges; - tablas; - formularios; - inputs; - selects; - datepickers; - modales; - diálogos; - toasts; - mensajes; - estados vacíos; - loading; - paginación; - iconografía. ### Formularios Revisar: - alineación; - espaciados; - agrupación lógica; - tamaños; - jerarquía visual; - acciones principales y secundarias. ### Listados Revisar: - buscadores; - filtros; - toolbars; - acciones; - tablas; - paginado. ### Tema Revisar: - colores; - contraste; - modo claro; - modo oscuro; - consistencia entre ambos. ### Responsive Mejorar la experiencia en: - desktop; - notebook; - tablet; - resoluciones reducidas. --- ## Lineamientos de diseño Codex deberá actuar como UX/UI Designer. No deberá limitarse únicamente a aplicar estilos. Deberá analizar la experiencia completa del usuario y mejorarla cuando exista una oportunidad clara. Se espera una interfaz: - moderna; - limpia; - consistente; - profesional; - elegante; - sobria; - fácil de utilizar. La estética debe inspirarse en aplicaciones SaaS modernas de uso empresarial. No debe transformarse en una interfaz recargada ni experimental. --- ## Restricciones No modificar: - funcionalidades; - navegación existente; - endpoints; - DTOs; - Core; - Domain; - Data; - modelos EF; - base de datos; - permisos; - autenticación; - contratos publicados. No incorporar frameworks UI nuevos. Deberá reutilizar la infraestructura existente del proyecto. --- ## Criterios de aceptación ✔ El Login presenta una imagen profesional y consistente. ✔ El Layout principal posee una estética moderna. ✔ Sidebar y Topbar presentan una navegación clara. ✔ Existe consistencia visual entre módulos. ✔ Botones, formularios y tablas comparten el mismo lenguaje visual. ✔ Se reducen estilos inline cuando corresponda. ✔ El sistema mantiene compatibilidad con tema claro y oscuro. ✔ No existen regresiones funcionales. ✔ El proyecto compila sin errores. ✔ No se modifican contratos existentes. --- ## Decisiones de diseño La prioridad de esta Story es la percepción del producto. No se persigue crear un nuevo Design System completo. No se busca cambiar la identidad de PhronCare. Se busca que el usuario perciba una aplicación moderna, consistente y de calidad desde la pantalla de Login hasta cualquier módulo del sistema. Codex podrá proponer pequeñas mejoras de UX siempre que: - no cambien el comportamiento funcional; - no modifiquen procesos de negocio; - no agreguen dependencias importantes; - respeten la arquitectura existente. --- ## Entregable esperado - Revisión completa de la UI existente. - Modernización visual del Login. - Modernización del Shell. - Modernización de la navegación. - Homogeneización de componentes. - Ajustes responsive. - Ajustes de espaciados. - Ajustes tipográficos. - Ajustes de iconografía. - Lista de archivos modificados. - Resumen de las mejoras implementadas. - Checklist de pruebas manuales. --- ## Branch sugerida feature/leandro/78-backoffice-ui-refresh --- ## Commit sugerido feat(ui): refresh backoffice user experience close #78
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
STORY
bug
infra
refactor
tech-debt
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leandro/phronCare#78
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?