Skip to content

feat(ui): sistema de temas claro/oscuro con persistencia y consistencia visual cross-view#195

Open
asmulever wants to merge 7 commits intooscarchapp:mainfrom
asmulever:feature/dark-light-modes
Open

feat(ui): sistema de temas claro/oscuro con persistencia y consistencia visual cross-view#195
asmulever wants to merge 7 commits intooscarchapp:mainfrom
asmulever:feature/dark-light-modes

Conversation

@asmulever
Copy link

@asmulever asmulever commented Mar 3, 2026

Resumen

Este PR introduce un sistema de tema claro/oscuro con persistencia en navegador, mejorando experiencia de uso, legibilidad y continuidad visual entre sesiones sin alterar la lógica de negocio.

Qué cambia

  • Se implementa selector de tema en toolbar (iconografía de sol/luna).
  • Se agrega persistencia de preferencia mediante cookie en browser.
  • Se aplica sistema de variables de estilo para modo claro y modo oscuro.
  • Se mantiene consistencia visual en componentes críticos definidos durante el alcance (toolbar/controles y elementos con color funcional original).
  • Se ajustan estilos para asegurar legibilidad y contraste en vistas principales.

Valor funcional

  • Mejora la ergonomía visual en jornadas largas de uso.
  • Permite adaptación a preferencias del usuario sin fricción.
  • Aporta una percepción más moderna y profesional del producto.

Archivos relevantes

  • pms/templates/main.html
  • pms/statics/css/style.css
  • pms/templates/... (vistas afectadas por estilos globales)
  • docs/pr-4-dark-light-modes.md

Validación / pruebas

  • Validación funcional manual:
    • cambio de tema desde toolbar,
    • persistencia al recargar/navegar,
    • conservación de estados visuales esperados en ambos modos.
  • Verificación de contraste y legibilidad en componentes clave.
  • Revisión de no impacto en flujos de reservas, dashboard y habitaciones.

Información para Deploy

  • No requiere migraciones de base de datos.
  • No agrega variables de entorno nuevas.
  • No introduce dependencias externas.
  • Riesgo bajo de despliegue (principalmente capa de presentación).
  • Recomendado limpiar caché de assets estáticos/CDN si aplica, para evitar servir CSS previo.

Smoke test recomendado post-deploy

  1. Cambiar a modo oscuro y navegar por Home, Dashboard, Habitaciones y formularios.
  2. Recargar página y confirmar persistencia del tema.
  3. Cambiar a modo claro y repetir verificación de persistencia.
  4. Confirmar visual de toolbar y controles críticos en ambos modos.
  5. Validar que etiquetas funcionales (ej. estados de reserva) mantengan color esperado.

Documentación

Existe documentación detallada para PM/Arquitectura y Deploy en:

  • docs/pr-4-dark-light-modes.md

asmulever added 7 commits March 2, 2026 22:11
@asmulever
feat(rooms): implementar filtro de habitaciones con UX moderna y cobe…
19879ad 
…rtura de pruebas

Contexto de negocio:

- Se implementa el requerimiento PR 1 del challenge: filtrar la seccion Habitaciones por coincidencia parcial del campo name.

Alcance funcional entregado:

- Se agrega RoomFilterForm para encapsular validacion y mantener la vista desacoplada de la capa de presentacion.

- RoomsView incorpora lectura de query params y filtro name__icontains, preservando el listado completo cuando no hay criterio.

- Se agrega metadata de resultados para mejorar feedback al usuario (conteo total y conteo filtrado).

Mejoras de interfaz (orientadas a usabilidad):

- Nueva cabecera visual en Habitaciones con mensaje de accion claro.

- Barra de busqueda prominente con icono, CTA principal y accion de limpiar filtro.

- Grid responsivo de tarjetas para lectura rapida en desktop y mobile.

- Estado vacio explicito para evitar ambiguedad cuando no hay coincidencias.

Calidad y verificacion:

- Se incorporan tests automatizados de vista para: sin filtro, filtro parcial y sin resultados.

- Validado con python manage.py test pms.tests.RoomsFilterTests.
@asmulever
feat(dashboard): incorporar widget de ocupacion con rediseño consiste…
caeef70 
…nte y pruebas

Contexto de negocio:

- Se implementa el requerimiento PR 2 del challenge: agregar el KPI % ocupacion en Dashboard.

- El objetivo es exponer una metrica operativa accionable sin romper la experiencia visual existente.

Implementacion funcional:

- DashboardView ahora calcula occupancy_percentage usando la formula: reservas confirmadas (state=NEW) / total de habitaciones * 100.

- Se contempla el caso borde sin habitaciones para evitar division por cero, devolviendo 0.

Mejoras de interfaz (reutilizando el diseño actual):

- Se mantiene el lenguaje visual del proyecto y se refuerza con un layout en grid responsivo para widgets.

- Se agrega una nueva tarjeta para % ocupacion alineada al resto de indicadores.

- Se mejora legibilidad con jerarquia visual consistente, colores diferenciados por KPI y estructura adaptativa para desktop/mobile.

Calidad y verificacion:

- Se añadieron tests para validar el KPI en escenario normal y sin habitaciones.

- Suite ejecutada: python manage.py test pms.tests.RoomsFilterTests pms.tests.DashboardOccupancyTests pms.tests.DashboardOccupancyWithoutRoomsTests.

- Resultado: OK (5 tests).
@asmulever
feat(bookings): habilitar edicion de fechas con validacion de disponi…
f02fa3a 
…bilidad

Contexto de negocio:

- Se implementa el requerimiento PR 3 del challenge: permitir editar fechas desde el listado principal de reservas.

- La solucion conserva la habitacion asignada y valida disponibilidad real antes de persistir cambios.

Alcance funcional entregado:

- Nueva ruta y flujo de edicion de fechas: booking/<pk>/edit-dates.

- Nuevo enlace en Home por reserva para acceder a la pantalla de edicion.

- Nuevo formulario dedicado con campos checkin/checkout y guardado.

- Validaciones server-side: rango cronologico valido, limite maximo 31/12/2026 y control de solapamientos en la misma habitacion.

- Mensaje funcional requerido por consigna cuando no hay cupo: No hay disponibilidad para las fechas seleccionadas.

- Recalculo automatico del total al actualizar fechas.

Correcciones de UX/consistencia tecnica:

- Los inputs de fecha se renderizan en formato ISO (YYYY-MM-DD), evitando desalineacion entre valor del textbox y calendario nativo.

Calidad y verificacion:

- Se incorporan pruebas automatizadas para: guardado exitoso, render ISO de fechas, bloqueo por solape y validacion de rango.

- Suite ejecutada: python manage.py test pms.tests.EditBookingDatesTests.

- Resultado: OK (4 tests).
@asmulever
style(ui): unificar diseño moderno en formularios de reserva y contacto
99f7ad3 
- Aplica layout visual consistente en Nueva reserva y Editar datos de contacto

- Mejora jerarquía de campos, botones y feedback visual

- Extiende estilos compartidos en style.css para mantener coherencia de interfaz
@asmulever
feat(ui): introducir sistema visual dual con tema persistente y coher…
4dd088a 
…encia de interfaz

Resumen ejecutivo:

- Se implementa un sistema de tema claro/oscuro con persistencia en cookie para mejorar continuidad de uso entre sesiones.

- La interfaz se alinea a una paleta más consistente y legible, con foco en experiencia SaaS/corporativa y uso intensivo en dashboards.

Mejoras entregadas:

- Toggle de tema integrado en la toolbar superior, ubicado a la derecha del botón Buscar, con iconografía contextual (sol/luna).

- Inicialización temprana del tema en head para evitar parpadeo visual (FOUC) al cargar la página.

- Persistencia client-side mediante cookie (theme_mode) con alcance global y expiración anual.

- Definición de variables de diseño por modo (fondos, texto, bordes, superficies, acentos) para mantener consistencia transversal.

- Conservación explícita de elementos críticos con identidad estable en ambos modos:

  * Colores originales de la toolbar y sus controles.

  * Colores originales de labels de estado Confirmada/Cancelada.

  * Colores fijos de widgets del Dashboard en ambos temas.

Impacto esperado:

- Mayor confort visual en contextos diurnos/nocturnos sin sacrificar reconocimiento de marca ni jerarquía funcional.

- Menor fricción cognitiva por consistencia cromática en componentes clave y estados operativos.

- Base de theming escalable para futuras vistas sin duplicar estilos.
@asmulever
chore(dark-light): restaurar vistas funcionales al estado original
25b7274 
- Revierte forms, views, urls, tests y templates de negocio para que coincidan con main

- Elimina la plantilla edit_booking_dates de este branch

- Mantiene este branch enfocado en modo claro/oscuro y capa visual
@asmulever
docs(pr4): documentar sistema de temas claro/oscuro para PM y arquite…
897f28e 
…ctura

- Describe alcance visual, persistencia por cookie e integración en layout

- Enumera archivos de UI impactados

- Resume pruebas y valor esperado para producto
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@asmulever