18 Diseñando el Dashboard Principal Completo con ApexCarts y Métricas Clave del Sistema con Laravel

Duración: 8 min
Módulo: Módulo de Cronograma, Reportes, Exportación e Interfaz Interactiva (FullCalendar) Lección 6 de 6
Anterior
17 Diseñando Panel Control de Cronogramas | Filtros, Métricas por Sucursal y Validaciones en Laravel
Siguiente
19 CRUD completo de Roles en Laravel con Spatie en el Sistema de Turnos Laborales FullStack

Descripción

📋 Lección 18: Diseñando el Dashboard Principal Completo con ApexCharts y Métricas Clave del Sistema con Laravel 📈

En esta lección se transforma la plantilla estática por defecto en un Dashboard Principal dinámico, alimentado en tiempo real con datos de la base de datos de Laravel y visualizado con gráficos de ApexCharts.

🔑 Conceptos Clave y Métricas Implementadas

1. 📊 Tarjetas de Métricas Clave (KPIs)

Se integraron 7 tarjetas de información conectadas a la base de datos:

  • Personal Activo: Cantidad y porcentaje de ocupación del personal.
  • Ausencias Pendientes: Solicitudes de vacaciones o permisos por aprobar.
  • Ausencias Aprobadas: Cantidad de personal no disponible temporalmente.
  • Configuraciones de Turnos: Total de modalidades de turnos creadas.
  • Sucursales: Cantidad de sedes activas registradas.
  • Asignaciones Semanales: Total de turnos cubiertos en la semana en curso.

2. 📈 Gráficos Dinámicos con ApexCharts

  • Se adaptó el gráfico principal (chart) para mostrar la cantidad de asignaciones de turnos correspondientes al mes actual.
  • Se estructuró la consulta dentro de dashboard.blade.php para renderizar datos dinámicos en tiempo real sin perder los estilos visuales de la plantilla.

3. 🏢 Widgets Complementarios y Accesos Rápidos

  • Panel de Sucursales: Muestra el top de sedes con desglose de personal activo, inactivo y nivel de ocupación.
  • Turnos Activos: Lista en vivo del personal en servicio durante la jornada.
  • Acciones Rápidas: Botones directos para ir al módulo de Cronogramas, Empleados o Solicitudes de Ausencias.

4. 📱 Compatibilidad Modo Oscuro (Dark Mode) y Diseño Responsive

  • Comprobación del renderizado de los gráficos y tarjetas en Modo Claro y Modo Oscuro.
  • Adaptación responsiva verificada en distintos dispositivos móviles (iPhone, Samsung Galaxy, etc.).

5. 🛠️ Plan de Ajustes Finales del Sistema

Para los siguientes capítulos se identificaron las siguientes tareas pendientes:

  • Personalización de la Landing Page pública.
  • Traducir al español y personalizar las vistas del Login, Perfil y la barra de navegación.
  • Configuración del sistema de Roles y Permisos para limitar los accesos de administradores, supervisores y empleados.
$0.00
Iniciar sesión para inscribirse

Lecciones

Presentación, instalación y configuración de paquetes en laravel
Lección 1. 01 Como Crear un Sistema de Turnos Laborales Moderno desde Cero con Laravel FullStack y FullCalendar 7 min
Lección 2. 02 Como Instalar La Plantilla Administrable Hope UI en Laravel y la Base de Datos con Migraciones 18 min
Migraciones y Modelos
Lección 1. 03 Migraciones desde el Modelo Entidad Relación diseñado para la Base de Datos en Laravel FullStack 22 min
Lección 2. 04 Modelos de Eloquent y Relaciones Avanzadas para el Control de Turnos Laborales Laravel FullStack 13 min
Gestión de Módulos Base (Sucursales, Categorías y Empleados)
Lección 1. 05 Crear CRUD del Módulo de Sucursales y Navegación Dinámica en la Plantilla con Laravel FullStack 15 min
Lección 1. 07 CRUD de Categorías Rutas, Controladores, Vistas, Validaciones, Alertas y otros Laravel FullStack 15 min
Lección 1. 10 Edit, Update, Delete Empleados de forma segura con registros relacionados en Laravel FullStack 17 min
Lección 2. 06 CRUD Completo del Modulo Sucursales, Controlador, Validación, Alertas y DataTables con Laravel 28 min
Lección 2. 08 CRUD Módulo Empleados Create Store, Asignación de Rol Spatie Subida de archivos Laravel FullStack 28 min
Lección 3. 09 Vista Detalle de Empleados, Rol, Avatar Metodo Show en Laravel FullStack 16 min
Reglas de Negocio: Módulos de Turnos y Ausencias
Lección 1. 11 Como programar el CRUD Completo de Turnos de forma segura con registros relacionados en Laravel 15 min
Lección 2. 12 Como programar el CRUD Completo de Ausencias de forma segura con registros relacionados Laravel 16 min
Módulo de Cronograma, Reportes, Exportación e Interfaz Interactiva (FullCalendar)
Lección 1. 13 Como programar Sistema de Cronogramas por Sucursales en Laravel (FullCalendar + SweetAlert2) 10 min
Lección 2. 14 Guardar, Modificar y Eliminar asignaciones dentro del Cronograma por Sucursales en Laravel 10 min
Lección 3. 15 Como generar Reportes en PDF de las asignaciones dentro del Cronograma por Sucursales en Laravel 17 min
Lección 4. 16 Validad Ausencias del Personal de asignaciones dentro del Cronograma por Sucursales en Laravel 11 min
Lección 5. 17 Diseñando Panel Control de Cronogramas | Filtros, Métricas por Sucursal y Validaciones en Laravel 9 min
Lección 6. 18 Diseñando el Dashboard Principal Completo con ApexCarts y Métricas Clave del Sistema con Laravel 8 min
Roles, Permisos y Control de Acceso (Spatie Laravel-Permission)
Lección 1. 19 CRUD completo de Roles en Laravel con Spatie en el Sistema de Turnos Laborales FullStack 10 min
Lección 2. 20 Cómo Proteger las Rutas del Siste4na Usando Permisos de Roles en Laravel con Spatie FullStack 10 min
Lección 3. 21 Interfaz Dinamica, Menú y Elementos del Dashboard Por Roles y Permisos en Laravel Spatie 13 min
Portal del Empleado y Validaciones Avanzadas
Lección 1. 22 Módulo Mis Turnos Portal para Empleados en Laravel Turnos Asignados en Fullcalendar y Exportacion 15 min
Lección 2. 23 Eliminación Segura Validando Registros Relacionados con JavaScript y SweetAlert2 en Laravel 9 min
Despliegue a Producción (Deployment)
Lección 1. 24 Cómo Subir un Proyecto de Laravel a Producción de Localhost a Internet: Base de Datos, .env 21 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso