77 Mostrar Roles de Usuario en la Interfaz: Personalización con Flux UI y FontAwesome 🛡️👤

Duración: 13 min
Módulo: Módulo Producción Lección 4 de 6

¡Contenido Exclusivo!

Adquiere este curso para tener acceso inmediato a esta y a **todas las lecciones Premium**.

Inscribirse Ahora por $10.00 Acceso instantáneo de por vida y código fuente incluido.
Anterior
76 Entrega de Manual de Usuario y Puesta en Marcha del Sistema de Préstamos 🏦📘
Siguiente
78 Seguridad en la Interfaz: Protegiendo Menús y Dashboard con Directivas @can en Laravel 12 🔐

Descripción

🛡️ Lección 77: Personalización de la Interfaz: Visualización de Roles

Aunque el sistema Benji V2 ya es funcional en todos sus módulos, esta lección marca el inicio de los ajustes de experiencia de usuario (UX). El objetivo principal es que el sistema identifique visualmente el nivel de acceso del usuario actual, mejorando la claridad operativa.

👤 Identificación de Roles en el Dashboard

Implementamos una sección en la cabecera del sistema para mostrar el rol del usuario autenticado:

  • 🏗️ Estructura con Tailwind CSS: Utilizamos contenedores flex con propiedades de alineación y espaciado (justify-between, gap-4) para ubicar la información del rol de manera elegante en la parte superior derecha del Dashboard [03:16].
  • 🔍 Lógica de Obtención de Datos: * Accedemos al modelo de usuario mediante la fachada de autenticación de Laravel: Auth::user() [04:46].
    • Extraemos el nombre del rol asociado utilizando los métodos getRoleNames() (o similares del paquete de permisos), simplificando la colección a una cadena de texto legible [05:49].
  • 🎨 Diseño con Flux UI: Integramos componentes de Flux UI (flux:text) para dar formato al texto, utilizando colores dinámicos que se adaptan tanto al modo claro como al modo oscuro (dark mode) [06:57].

🎖️ Iconografía y Estilos Visuales

Reforzamos la identidad visual de los roles mediante iconos profesionales:

  • 🛠️ FontAwesome: Añadimos iconos descriptivos como fa-user-shield para representar la autoridad del rol y fa-id-badge para enfatizar la identidad del usuario [08:13].
  • 🌗 Adaptabilidad Dark Mode: Realizamos ajustes manuales en las clases de color de Tailwind (dark:text-white) para asegurar que el nombre del rol sea perfectamente legible sobre fondos oscuros, garantizando una estética profesional en cualquier configuración [10:48].

🧪 Validación de Perfiles de Usuario

Realizamos pruebas cruzadas para verificar la precisión del sistema:

  • 🔑 Superadministrador: Confirmamos que el sistema muestra correctamente la etiqueta de "Superadministrador" con todos los accesos habilitados [07:54].
  • 👥 Perfil Cliente: Accedemos con una cuenta de cliente y validamos que el sistema lo identifique correctamente. Esto pone en evidencia la necesidad de la siguiente fase: ocultar menús no autorizados para mejorar la seguridad visual del cliente [12:16].

✅ Resultado de la Lección

El Dashboard de Benji V2 es ahora más informativo y transparente. El usuario sabe exactamente bajo qué perfil está operando, lo que reduce errores administrativos y personaliza la experiencia de navegación.

$10.00
Iniciar sesión para inscribirse

Lecciones

Introducción e instalación
Lección 1. 01 Presentación al Curso Laravel Desarrollo de Sistema de Préstamos y Cobranzas V2 Módulos Completos 10 min
Lección 2. 02 Instalación y Auth: 🛠️ Creando el Login Profesional del Sistema de Préstamos y Cobranzas 🔑 23 min
Lección 3. 03 Autenticación de Dos Factores (2FA) con Laravel Starter Kit 🛡️ | Paso a Paso 🔑 10 min
Lección 4. 04 Cómo subir un proyecto de Laravel 12 a GitHub en 2026 🖥️ | Guía Completa 9 min
Lección 5. 05 💻 | Cómo Crea un Virtual Host con WampServer para Laravel 12 ¡DEJA DE USAR ARTISAN SERVE! ⚡ 7 min
Módulo Ajustes del sistema
Lección 1. 06 💰 | Módulo Ajustes del Sistema: Control de Interes, Monedas, Perfil Global y otros Laravel 12 🛠️ 14 min
Lección 2. 07 🛠️ Creando un Componente Card Reutilizable para Formularios Pro | Laravel 12 & Tailwind & FluxUI 28 min
Lección 3. 08 🚀 | Construyendo el Formulario de Ajustes: Inputs con Iconos y Preview de Imagen | Laravel 12 🛠️ 23 min
Lección 4. 09 🔄 Del Formulario a la Base de Datos: Implementando la Función Store | Laravel 12 🛠️Guardar Datos 14 min
Lección 5. 10 🖼️ Gestión de Archivos y Alertas Pro: Subiendo el Logo y SweetAlert2 | Laravel 12🚀 Notificaciones 14 min
Lección 6. 11 ✅ | ¡Módulo de Ajustes Listo! Traer Información y Guardar Cambios | Laravel 12 💰 18 min
Módulo Roles
Lección 1. 12 🛡️ | Instalación de Laravel Spatie Permissions: Roles y Permisos en Laravel 12 | Benji V2 🚀 9 min
Lección 2. 13 🔑 | Gestión de Roles: Creando el Controlador y la Interfaz de Usuario | Laravel 12 & Flux UI 🚀 18 min
Lección 3. 14 📋 | Listado de Roles: Creando una Tabla Profesional con Tailwind CSS | Laravel 12 🚀 11 min
Lección 4. 15 ➕ Creando Nuevos Roles: Formulario de Registro y Validación | Laravel 12 & Spatie 🛡️ 17 min
Lección 5. 16 🌐 | Laravel en Español: Traduciendo Validaciones y Mensajes de Error 🛠️Configuración de Idioma 9 min
Lección 6. 17 🔍 Implementando el Método Show: Visualización de Roles en Detalle | Laravel 12 🛠️Mostrando Datos 12 min
Lección 7. 18 🔄 Actualización de Roles en Laravel 12: Método Edit, Update y Validación de Nombres Únicos 🛠️ 10 min
Lección 8. 19 💣 Método Destroy: Cómo Eliminar Registros con Validación y Alertas Pro en Laravel 12 ✨ 9 min
Módulo Usuarios
Lección 1. 20 👤 Módulo Usuarios: Estructura de Base de Datos y Nuevos Atributos | Benji V2 🔐 Migración nueva 21 min
Lección 2. 21 🛠️ Gestión de Usuarios: Listado, Visualización Dinámica | Laravel 12 🔐 Tablas Responsivas 18 min
Lección 3. 22 👤 Formulario de Creación de Usuario - Registro de Usuarios Flux UI Selects, Enums Laravel 12 🛠️ 21 min
Lección 4. 23 💾 Backend Guardado de Usuarios: Validación Masiva, Upload de Fotos y Roles Spatie | Laravel 12 🛠️ 17 min
Lección 5. 24 🛠️ Detalles de Usuario: Layout de 2 Columnas, Breadcrumbs y Gestión de Imágenes | Laravel 12 🚀 11 min
Lección 6. 25 ⚙️ Método Update: Cómo actualizar Fotos de Perfil y Sincronizar Roles de Spatie | Laravel 12 🚀 17 min
Lección 7. 26 Eliminación Suave de Usuarios (Soft Deletes) en Laravel 12 - Sistema de Préstamos Laravel 12 🗑️ 8 min
Lección 8. 27 Cómo Restaurar Usuarios Eliminados en el Sistema de Préstamos Método Restore y WithTrashed 16 min
Módulo clientes
Lección 1. 28 Módulo Clientes Modelado de Datos: Diagrama Entidad Relación (DER) Laravel Sistema de prestamos 17 min
Lección 2. 29 Cómo crear Datos de Prueba con Factories - Módulo Clientes Laravel Factories y Faker 🚀 21 min
Lección 3. 30 Listado de Clientes con Laravel 12: Tabla Pro en el Sistema de Préstamos 📑🚀 17 min
Lección 4. 31 Optimiza tu Sistema: Paginación de Datos en Laravel 12 (Fácil y Rápido) ⚡Módulo Clientes 📑🚀 14 min
Lección 5. 32 Cómo crear Buscador de Clientes 🔍 + Código Fuente GRATIS 🎁 Sistema de Préstamos en Laravel 20 min
Lección 6. 33 Formulario de Registro de Clientes: Funciones Create y Store en Laravel 12 📝 en el Sistema de prestamos 16 min
Lección 7. 34 Cómo Visualizar Detalles del Cliente: Método Show en Laravel 12 👁️📂 en el Sistema de Prestamos 17 min
Lección 8. 35 Cómo Editar y Actualizar Clientes en Laravel 12: Método Edit, Update y Validaciones Pro 📝🚀 20 min
Lección 9. 36 Eliminar y Restaurar Clientes en Laravel 12: Soft Deletes y Recuperación de Registros 🗑️♻️ 23 min
Módulo Categorías
Lección 1. 37 Módulo de Categorías en Laravel 12: Estructura, Migraciones y Modelo - Sistema de Préstamos 🏗️📂 11 min
Lección 2. 38 Crear Categorías con Modales de Flux UI en Laravel 12: Interfaz Moderna y Profesional 💎🚀 14 min
Lección 3. 39 Cómo mostrar Detalles de Categorías en Laravel 12: Método Show dentro de cada modal 👁️💎 10 min
Lección 4. 40 Editar y Actualizar Categorías con Modales de Flux UI en Laravel 12: Manejo de Validaciones 🛠️✅ 14 min
Lección 5. 41 Cómo Eliminar Categorías con Modales de Flux UI en Laravel 12: Confirmación y Borrado Seguro 🗑️🔥 11 min
Módulo Prestamos y Pagos
Lección 1. 42 Módulo de Préstamos en Laravel 12: Arquitectura, Migraciones y Relaciones entre Modelos 💰🏗️ 15 min
Lección 2. 43 Dashboard Profesional con Chart.js y Flux UI: Gráficas y Estadísticas en Vivo - Laravel 12 📊🔥 15 min
Lección 3. 44 Cálculo de Préstamos en Laravel 12: Métodos de Amortización Francés, Alemán y Americano 🧮💰 16 min
Lección 4. 45 Guardar Préstamos en Laravel 12: Método Store, Validaciones y Registro de Cuotas en la BD 💰📥 26 min
Lección 5. 46 Módulo de Pagos en Laravel 12: Migración, Estructura de Cuotas y Control de Estados 💳📊 13 min
Lección 6. 47 Registro Automática de Cuotas en Laravel: Insertando la Tabla de Amortización en la BD ⚡💰 22 min
Lección 7. 48 SISTEMA DE PRÉSTAMOS PROFESIONAL: Código Fuente Completo, Laravel 12 y Flux UI 🎁🚀 ¡GRATIS! 17 min
Lección 8. 49 Vista Detallada de Préstamos en Laravel 12: Tabla de Amortización, Progreso y Estados de Pago 💎📊 15 min
Lección 9. 50 Edición Dinámica de Préstamos en Laravel 12: Recalculando Amortizaciones con JavaScript y Blade 16 min
Lección 10. 51 Cómo Eliminar Préstamos en Laravel 12: Borrado en Cascada y Modales de Confirmación Flux 🗑️⚠️ 12 min
Lección 11. 52 Registro de Pagos en Laravel 12: Formulario de Cobranzas y Validación de Cuotas con Flux UI 💳✅ 23 min
Lección 12. 53 Configuración de Días de Gracia y Registro de Pagos en Laravel 12: Lógica de Cobro y Ajustes ⚙️💸 17 min
Lección 13. 54 Lógica de Mora y Días de Gracia en Laravel 12: Cálculos Automáticos de Atraso y Notificaciones 📉🔔 12 min
Lección 14. 55 Cobro de Cuotas con Mora Automática en Laravel 12: Formulario de Pago Dinámico y Flux UI 💸🚀 12 min
Lección 15. 56 Generación de Tickets de Pago en Laravel 12 con DomPDF: Comprobantes Térmicos y Diseño CSS 📄🖨️ 36 min
Lección 16. 57 Previsualización de Tickets en Modal: Integrando iFrame y Flux UI en Laravel para Impresión 🖼️🖨️ 9 min
Lección 17. 58 Cómo Revertir Pagos en Laravel 12: Lógica de Borrado Lógico y Restauración de Cuotas 🔄⚠️ 19 min
Lección 18. 59 Cierre Automático de Préstamos en Laravel 12: Lógica de Finalización y Control de Estados 🏁✅ 21 min
Módulo Contratos
Lección 1. 60 Contrato de Préstamo en Laravel 12: Generación de Documentos Legales con DomPDF y Estilos CSS 📄✍️ 13 min
Lección 2. 61 Dashboard Financiero en Laravel 12: Gráficos de Cartera, Capital Recuperado y Análisis de Datos 📊 15 min
Módulo Notificaciones
Lección 1. 62 Módulo de Notificaciones en Laravel: Gestión de Clientes Morosos y Alertas por Email WhatsApp 📱📢 15 min
Lección 2. 63 Configuración de Mailtrap en Laravel 12: Envío de Correos y Recuperación de Contraseñas 📧🔐 11 min
Lección 3. 64 Notificaciones de Cobro Automáticas en Laravel 12: Plantilla HTML y Envío Masivo de Correos 📧🔥 19 min
Lección 4. 65 Notificaciones por WhatsApp en Laravel 12: Envío de Recordatorios con un Clic y Formato Pro 📱🔥 10 min
Módulo Permisos
Lección 1. 66 Seguridad Total en Laravel 12: Protegiendo Rutas con Middleware Spatie y Permisos Dinámicos 🛡️🔐 14 min
Lección 2. 67 Configuración Masiva de Roles y Permisos en Laravel 12: RoleSeeder y Estructura con Spatie 👑🛠️ 12 min
Lección 3. 68 Gestión de Permisos por Rol en Laravel 12: Tabla Pivote y Visualización de Accesos con Spatie 🔑📊 17 min
Lección 4. 69 Interfaz Pro de Permisos en Laravel 12: Agrupación por Módulos y Sincronización con Spatie 🛠️📋 10 min
Módulo Backups
Lección 1. 70 Backups Automáticos en Laravel 12: Instalación de Spatie Backup y Seguridad de Datos 💾🛡️ 18 min
Lección 2. 71 Panel de Control de Backups en Laravel 12: Descargar, Eliminar y Crear Respaldos desde la Web 📁⚙️ 16 min
Módulo Reportes
Lección 1. 72 Métricas y Estadísticas en Laravel 12: Analizando el Crecimiento Mensual y Préstamos Activos 📊🚀 13 min
Lección 2. 73 Gráficos Avanzados con Chart.js en Laravel 12: Comparativa Capital vs. Interés Mensual 📊💸 9 min
Módulo Producción
Lección 1. 74 Cómo Subir Laravel 12 a Producción: Despliegue Real, Configuración de Servidor y Optimización 🌐🚀 13 min
Lección 2. 75 Cómo Subir Laravel 12 a Producción: Despliegue Real, Configuración de Servidor y Optimización 🌐🚀 13 min
Lección 3. 76 Entrega de Manual de Usuario y Puesta en Marcha del Sistema de Préstamos 🏦📘 19 min
Lección 4. 77 Mostrar Roles de Usuario en la Interfaz: Personalización con Flux UI y FontAwesome 🛡️👤 13 min
Lección 5. 78 Seguridad en la Interfaz: Protegiendo Menús y Dashboard con Directivas @can en Laravel 12 🔐 16 min
Lección 6. 79 Personalizar Error 403 en Laravel 12: Diseñando una Pantalla de Acceso Denegado con Flux UI 🚫🛡️ 13 min
Módulo Pagos Parciales
Lección 1. 80 Módulo Pagos Parciales en Laravel 12: Creación de Migraciones y Lógica de Abonos a Cuotas 💳📉 14 min
Lección 2. 81 Interfaz de Pagos Parciales: Implementación de Modales Dinámicos con Flux UI en Laravel 12 💸 19 min
Lección 3. 82 Registrar Abonos en la Base de Datos: Lógica del Controlador y Validaciones en Laravel 12 💾🛠️ 15 min
Lección 4. 83 Historial de Abonos en Tiempo Real: Listado de Pagos Parciales con Blade y Carbon en Laravel 🗓️💰 13 min
Lección 5. 84 Automatización de Cobros: Cálculo de Saldos y Cierre Automático de Cuotas en Laravel 12 ⚙️💳 23 min
Lección 6. 85 Liquidación Automática de Préstamos: Cierre de Deuda y Reporte de Abonos en Laravel 12 💸📜 20 min
Lección 7. 86 Reversión de Pagos y Abonos: Lógica de Anulación y Reapertura de Préstamos en Laravel 12 🔄🛠️ 16 min
Lección 8. 87 Eliminación de Abonos Parciales: Recálculo de Saldos y Reapertura de Estados en Laravel 12 🔄📉 23 min
Módulo Liquidación de Préstamo
Lección 1. 88 Liquidación de Préstamos: Cómo Cerrar Deudas y Archivarlas Correctamente en Laravel 12 ✅📦 19 min
Lección 2. 89 Liquidación Inteligente: Cálculo de Interés Devengado y Mora Proporcional en Laravel 12 🧮💰 20 min
Lección 3. 90 Procesar Liquidación de Préstamos con Modal Interactivo y Transacciones en Laravel 12 💳✅ 22 min
Lección 4. 91 Vista Previa del Modal de Liquidación: Modal Interactivo con Desglose de Deuda en Laravel 12 👁️💰 12 min
Lección 5. 92 Procesar y Finalizar Liquidación: Ajuste de Cuotas y Diferencia de Intereses en Laravel💳🔐 Parte 1 20 min
Lección 6. 93 Procesar y Finalizar Liquidación: Ajuste de Cuotas y Diferencia de Intereses en Laravel💳🔐 Parte 2 18 min
Últimos Ajustes del Sistema
Lección 1. 94 Categorías de Préstamos: Porcentaje de Interés Dinámico por Tipo de Crédito en Laravel 12 📊💼 18 min
Lección 2. 95 Interfaz Cargar Tasa de Interés Automáticamente al Seleccionar Categoría con JavaScript 🚀💻 12 min
Lección 3. 96 Personalización de Menú Profesional en Español (Ajustes + Cerrar Sesión) 🔐⚙️ 12 min
Lección 4. 97 Como conservar 5 Backups como Máximo, Limpieza Automático para Ahorrar Espacio en Disco 11 min
Lección 5. 98 Auditoría en Laravel: Registrar Usuario que Creó el Préstamo y Mostrar en Tabla 👤📋Prestamos 11 min
Lección 6. 99 Traduciendo Login, Validaciones y Más en Laravel - Cómo Traducir Todo tu Sistema al Español 🇪🇸✨ 17 min
Lección 7. 100 Página 404 Personalizada en Laravel: Diseño Elegante y Profesional para tu Sistema 🚫✨ 7 min
Lección 8. 101 Eliminación Segura con SweetAlert: Evita Borrar Datos Relacionados en Laravel 🛡️🗑️ 15 min
Lección 9. 102 🎉 Curso Completado: Sistema de Préstamos y Cobranzas en Laravel - Despedida y Próximos Pasos 🚀 10 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