Lección: 20 📊 Mejorando el Dashboard con Cards, Calendario y más | Sistema de Parqueo Laravel 12 FullStack

20 📊 Mejorando el Dashboard con Cards, Calendario y más | Sistema de Parqueo Laravel 12 FullStack

Duración: 28 min

Módulo: 📊 Dashboard y Reportes Financieros Lección 1 de 10

Descripción

20 📊 Índice de Lección: Mejorando el Dashboard con Cards, Calendario y más

La lección se centra en mejorar el Dashboard principal del sistema de parqueo en Laravel 12 para mostrar información relevante y brindar una mejor experiencia al usuario.

1. Personalización de la Bienvenida y la Barra de Navegación

Mensaje de Bienvenida: Se personaliza el mensaje de bienvenida para mostrar el nombre del usuario autenticado utilizando el modelo Auth::user()->name [01:44].
Visualización del Rol: Se añade la impresión del rol del usuario (Superadmin, Operador, etc.) en la barra de navegación del dashboard utilizando la relación con el modelo de roles de Spatie (Auth::user()->roles()->pluck('name')) [03:55].
División de Contenido: Se utiliza una línea horizontal (<hr>) para separar la cabecera de la sección de tarjetas informativas [05:46].

2. Implementación de Tarjetas Dinámicas (InfoBox Cards)

Se agregan tarjetas tipo InfoBox de AdminLTE para mostrar estadísticas clave del sistema, haciendo las consultas a la base de datos dinámicamente y utilizando iconos animados GIF (obtenidos de Flaticon) para mejorar la estética:

A. Roles Registrados

Consulta: Se utiliza Role::count() para obtener el total de roles en el sistema [13:09].
Función: La tarjeta redirige a la vista de administración de roles al hacer clic en el icono [11:49].

B. Usuarios Registrados

Consulta: Se cuenta el total de usuarios, pero excluyendo al Superadmin para mostrar solo los usuarios operativos. Se utiliza una cláusula where para filtrar [16:48].
Función: La tarjeta redirige a la vista de administración de usuarios [17:56].

C. Espacios de Parqueo Registrados

Consulta: Se utiliza Espacios::count() para contabilizar el total de espacios configurados en el parqueo [19:40].
Mejoras Futuras: Se plantea la necesidad de segmentar esta tarjeta para mostrar estados (disponibles, ocupados, en mantenimiento) [20:43].

3. Integración de Calendario Interactivo

Distribución de Columnas: Se modifica la estructura del dashboard para dividir la fila principal en una columna de 9 espacios (para las tarjetas) y una columna de 3 espacios (para el calendario) [21:53].
Librería: Se integra la librería Vanilla Calendar mediante CDNs en el archivo admin.blade.php [24:34].
Renderizado: Se inicializa el calendario a través de un script para que se muestre en el área lateral de la página, incluyendo la configuración para la traducción al español [26:06] - [26:30].

Hilari Web