38 Crear Categorías con Modales de Flux UI en Laravel 12: Interfaz Moderna y Profesional 💎🚀

Duración: 14 min
Módulo: Módulo Categorías Lección 2 de 5
Anterior
37 Módulo de Categorías en Laravel 12: Estructura, Migraciones y Modelo - Sistema de Préstamos 🏗️📂
Siguiente
39 Cómo mostrar Detalles de Categorías en Laravel 12: Método Show dentro de cada modal 👁️💎

Descripción

💎 Lección 38: Crear Categorías con Modales de Flux UI en Laravel 12

En esta sesión de Benji V2, optimizamos la experiencia de usuario (UX) implementando ventanas modales para el registro de categorías. En lugar de navegar a una página nueva para un proceso tan simple, utilizamos componentes modernos de Flux UI para mantener al administrador en la misma vista, agilizando la gestión del sistema.

🚀 Optimización de UX con Modales

Cambiamos el flujo de trabajo tradicional por uno más dinámico:

  • 🪟 Ventanas Emergentes: Implementamos el componente flux:modal. Esto permite que, al hacer clic en "Crear Nueva Categoría", aparezca un formulario superpuesto sin recargar la página, lo cual es ideal para módulos que requieren pocos campos de entrada [02:54].
  • 🎨 Diseño Profesional: Personalizamos la cabecera del modal con iconos y una variante de color "Primary" para que el botón de acción destaque. Incluimos descripciones claras para guiar al usuario en el registro [06:55].

🏗️ Formulario y Lógica de Backend

Integramos el modal con la potencia de Laravel:

  • 📑 Formulario Embebido: El modal contiene un formulario estándar que apunta a la ruta categorias.store. Incluimos el token @csrf para garantizar la seguridad del envío de datos [05:25].
  • 🛡️ Validaciones Estrictas: En el controlador, aplicamos una regla de unicidad (unique:categorias). Esto evita que el sistema registre dos categorías con el mismo nombre (ej. no pueden existir dos "Préstamos Personales"), manteniendo la base de datos limpia [11:16].
  • ✅ Feedback Instantáneo: Tras el registro exitoso, el sistema utiliza back() con una notificación de éxito, refrescando la tabla automáticamente para mostrar la nueva categoría creada [12:31].

🛠️ Simplificación del Código

Al usar modales, logramos un código más limpio:

  • 📉 Reducción de Rutas: Al eliminar la necesidad de una vista física para "Create", ahorramos recursos del servidor y simplificamos el archivo de rutas web.php [04:49].
  • ⚡ Atributos HTML5: Utilizamos el atributo required en el input para una validación rápida en el lado del cliente antes de que los datos lleguen al servidor [08:35].

✅ Resultado de la Lección

Al finalizar, habrás desarrollado una interfaz de administración moderna y fluida. Tu sistema ahora permite organizar los tipos de préstamos de forma extremadamente rápida, ofreciendo una experiencia profesional que reduce los tiempos de carga y mejora la productividad del administrador.

$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