21 📊 Mejorando el Dashboard con Cards, Metricas en Tiempo Real | Sistema de Parqueo Laravel 12
Duración: 23 minDescripción
21 📊 Índice de Lección: Mejorando el Dashboard con Cards, Métricas en Tiempo Real
La lección se enfoca en expandir las tarjetas informativas (InfoBox Cards) del Dashboard para incluir métricas en tiempo real y detalladas, así como incorporar la hora y la fecha actualizadas dinámicamente.
1. Funcionalidad de Fecha y Hora en Tiempo Real
- Ajuste de Diseño: Se aplica un margin-top: -20px al calendario para optimizar su posición y eliminar el espacio superior [01:07].
- Visualización Dinámica: Se añaden etiquetas <H1> y <H5> para mostrar la hora y la fecha actual [01:30].
- Script de Actualización: Se implementa un script de JavaScript que actualiza la hora y la fecha de las etiquetas cada 1000 milisegundos (1 segundo) para mantener la métrica en tiempo real [01:51].
- Funcionalidad del Calendario: Se verifica que el calendario interactivo (Vanilla Calendar) permite navegar a meses y años anteriores, y resalta la fecha actual [03:06].
2. Cards de Métricas Detalladas (Espacios de Parqueo)
Se mejora la tarjeta de Espacios Registrados para segmentar la información y mostrar el estado de los 50 espacios disponibles.
- Total de Espacios: Se muestra el conteo de 50 espacios registrados en la parte superior [04:08].
- Espacios Libres: Se consulta y se muestra el total de espacios cuyo estado es libre en la base de datos [05:07].
- Espacios Ocupados: Se consulta y se muestra el total de espacios cuyo estado es ocupado en la base de datos [06:39].
- Espacios en Mantenimiento: Se consulta y se muestra el total de espacios cuyo estado es mantenimiento en la base de datos [06:52].
- Alineación: Se aplica el estilo text-align: center para centrar el contenido de la tarjeta [09:48].
3. Nuevas Tarjetas Informativas (Módulos)
Se añaden cards para mostrar el total de registros en otros módulos importantes, utilizando iconos animados GIF temáticos.
- Tarifas Registradas: Se cuenta el total de tarifas en el sistema (Tarifa::count()) [10:51].
- Clientes Registrados: Se cuenta el total de clientes en el sistema (Cliente::count()) [13:07].
- Vehículos Registrados: Se cuenta el total de vehículos registrados en la base de datos (Vehiculos::count()), señalando que un cliente puede tener múltiples vehículos [15:29].
- Tickets Activos: Se contabiliza el total de tickets en estado activo para saber cuántos vehículos están actualmente en el parqueo (Ticket::where('estado', 'activo')->count()) [19:35].
4. Próximos Pasos
- Gráficos (Charts): Se planea incluir gráficos para visualizar información de manera más enriquecida en el dashboard [22:25].
- Módulo de Vehículos: Se contempla la creación de un módulo dedicado a la visualización y gestión de vehículos [16:45].
- Reportes: Se continuará con el desarrollo del módulo de reportes [22:34].
