# Plan de Implementación - Mejoras de UX/UI en WOL TT Panel

Este documento detalla la planificación para la incorporación de nuevas funcionalidades visuales y de organización en el panel de Wake on LAN.

## Descripción del Objetivo

El objetivo es mejorar la organización y la interfaz de usuario con las siguientes incorporaciones:
1. **Agrupación y Ordenamiento:** 
   - **Dashboard:** Agrupar equipos por departamento. Por defecto, ordenados alfabéticamente por nombre. Permitir ordenar por "Nombre" o "Ubicación" de forma dinámica manteniendo la agrupación.
   - **Admin Panel:** Permitir ordenar dinámicamente haciendo clic en las cabeceras de las columnas (desactivando la agrupación por departamentos en esta vista de tabla plana).
2. **Selector de Vista (Cuadrícula / Lista):** Permitir alternar en el dashboard entre una vista de tarjetas (cuadrícula) y una vista de filas (lista) adaptada para pantallas móviles y de escritorio.
3. **Barra de Controles Fija (Sticky):** Fijar la barra de búsqueda y el botón de refrescar justo debajo del header al hacer scroll para facilitar su acceso.
4. **Soporte de Tema (Claro / Oscuro / Auto):** Permitir alternar entre tema claro, oscuro y automático (siguiendo las preferencias del sistema).
5. **Menú de Usuario Unificado:** Agrupar las acciones de usuario (información de perfil, acceso a administración, selector de tema, alternador de vista y botón de salida) en un menú desplegable interactivo.

---

## Revisión de Usuario Requerida

> [!IMPORTANT]
> **Persistencia de Preferencias:** El tema seleccionado (Claro/Oscuro/Auto) y el modo de vista (Cuadrícula/Lista) se almacenarán en `localStorage` en el navegador del cliente. Esto garantiza que las preferencias se mantengan entre recargas de página y nuevas sesiones de navegación.
>
> **Script Antidestello (Flicker):** Agregaremos un script inline en el `<head>` de todas las páginas para aplicar la clase `dark` antes de que se dibuje el HTML, previniendo el molesto parpadeo de color al cargar la página si el usuario tiene configurado un tema no predeterminado.

---

## Preguntas Abiertas

* Ninguna por el momento. Los requisitos están claros y son viables en el frontend mediante Tailwind CSS y Javascript.

---

## Cambios Propuestos

### [Componente Plantillas Frontend]

Modificaremos las plantillas HTML para aplicar soporte de temas (utilizando clases `dark:bg-...`), reorganizar el layout y añadir las funciones JS de ordenamiento y control de vistas.

#### [MODIFY] [login.html](file:///t:/TiaTulaDocs/htdocs/wake-on-lan-tt/templates/login.html)
- Añadir el bloque de configuración de Tailwind CSS para habilitar el modo oscuro basado en clases: `tailwind.config = { darkMode: 'class' }`.
- Añadir el script de carga de tema en el `<head>` para aplicar la clase `dark` inmediatamente según `localStorage`.
- Modificar las clases del body y el formulario para soportar temas claros:
  - Cambiar fondo a degradado adaptable: `bg-gradient-to-tr from-slate-100 via-slate-50 to-indigo-100 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950`.
  - Caja contenedora: `bg-white/70 dark:bg-slate-900/60 border-slate-200 dark:border-slate-800`.
  - Textos y inputs adaptables en color.

#### [MODIFY] [dashboard.html](file:///t:/TiaTulaDocs/htdocs/wake-on-lan-tt/templates/dashboard.html)
- Habilitar `tailwind.config = { darkMode: 'class' }` y el script antidestello en el `<head>`.
- **Menú desplegable:**
  - Reemplazar el botón "Admin Panel" y el botón rojo de logout con un botón de menú con icono `menu`.
  - Crear el menú desplegable (`#user-menu`) con la información del usuario, enlace a administración (si es admin), selectores de tema (Botones: Claro, Oscuro, Auto), selectores de vista (Botones: Cuadrícula, Lista) y botón de cierre de sesión al final.
- **Barra de Control Sticky:**
  - Mover la barra de búsqueda y refrescar a un contenedor con clase `sticky top-16 z-20 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800/50 py-4`.
  - Añadir en esta barra un control para ordenar por "Nombre" o "Ubicación".
- **Agrupación y Ordenamiento:**
  - Modificar el renderizado Jinja2 para agrupar los equipos por departamento utilizando el filtro de Jinja2 `map(attribute='department') | unique`.
  - Cada departamento tendrá su propio bloque `.dept-group` con un encabezado de departamento y un contenedor de ordenadores `.computers-container`.
  - Implementar Javascript para ordenar los elementos DOM dentro de cada `.computers-container` según `data-name` o `data-location` al cambiar el selector.
- **Alternador de Vista (Cuadrícula / Lista):**
  - Añadir estilos CSS en `<style>` para redefinir el layout cuando el contenedor padre tiene la clase `.view-list`.
  - Modificar la estructura de `computer-card` para agrupar semánticamente los datos (Top row, Body, Network details, Buttons) y que la transición a modo horizontal (lista) mediante CSS sea fluida y responsiva.
- **Filtro de búsqueda:**
  - Actualizar `filterComputers()` para que oculte las cabeceras de departamento si no hay ningún equipo coincidente visible en esa sección.

#### [MODIFY] [admin.html](file:///t:/TiaTulaDocs/htdocs/wake-on-lan-tt/templates/admin.html)
- Habilitar `tailwind.config = { darkMode: 'class' }` y el script de carga de tema en el `<head>`.
- Reemplazar la barra de navegación del header para incluir el mismo botón de menú desplegable de usuario (con soporte de tema y retorno al dashboard, sin selector de vista ya que aquí no aplica).
- Adaptar colores de tablas, botones, formularios y modales para que se muestren correctamente tanto en modo claro como oscuro.
- **Ordenamiento de Columnas:**
  - Añadir escuchas de eventos click en las celdas de encabezado `<th>` de las tablas de equipos y usuarios.
  - Implementar script JS para ordenar las filas de la tabla de forma ascendente/descendente según el texto de la columna pulsada y agregar un indicador visual simple (flechas arriba/abajo) al lado del título de la columna activa.

---

## Plan de Verificación

### Pruebas Manuales

1. **Tema Claro / Oscuro / Auto:**
   - Seleccionar "Claro" en el menú, verificar que toda la interfaz (Dashboard y Admin) cambie a tonos claros limpios y legibles.
   - Seleccionar "Oscuro", verificar que retorne al diseño actual.
   - Seleccionar "Auto", verificar que cambie según la preferencia del sistema operativo.
   - Recargar la página y verificar que se mantenga el tema elegido sin destellos oscuros/claros iniciales.
2. **Menú de Usuario:**
   - Verificar la apertura y cierre suave del menú desplegable haciendo clic en el icono.
   - Confirmar que al hacer clic fuera del menú este se cierre automáticamente.
   - Validar que la información del usuario y los accesos rápidos funcionen.
3. **Agrupación y Ordenación (Dashboard):**
   - Verificar que los equipos aparezcan separados bajo títulos según su departamento.
   - Probar el alternador de orden ("Por Nombre" y "Por Ubicación") y verificar que las tarjetas se reordenen dinámicamente de forma alfabética dentro de su respectivo departamento.
4. **Vista de Lista (Dashboard):**
   - Activar la vista de "Lista" en el menú.
   - Comprobar que las tarjetas se transformen en filas horizontales.
   - Validar que toda la información crítica (Icono, Nombre, Ubicación, IP, MAC, Estado y Botones de acción) siga visible y alineada.
   - Probar en tamaño de pantalla móvil y verificar que las filas se adapten responsivamente sin salirse de la pantalla.
5. **Barra de Control Sticky:**
   - Hacer scroll hacia abajo y comprobar que la barra de búsqueda y refresco se fije justo debajo del header de navegación.
6. **Ordenación en Admin Panel:**
   - Hacer clic en la columna "Equipo" del panel de administración y comprobar que se ordene alfabéticamente. Volver a hacer clic y comprobar que se invierta el orden.
   - Repetir con "Dirección IP", "Dirección MAC", "Departamento" y "Ubicación" para verificar la correcta ordenación.
   - Verificar la misma funcionalidad en la tabla de usuarios.