81 Interfaz de Pagos Parciales: Implementación de Modales Dinámicos con Flux UI en Laravel 12 💸

Duración: 19 min
Módulo: Módulo Pagos Parciales Lección 2 de 8
Anterior
80 Módulo Pagos Parciales en Laravel 12: Creación de Migraciones y Lógica de Abonos a Cuotas 💳📉
Siguiente
82 Registrar Abonos en la Base de Datos: Lógica del Controlador y Validaciones en Laravel 12 💾🛠️

Descripción

💸 Lección 81: Interfaz de Pagos Parciales y Refinamiento de UX

En esta sesión de Benji V2, resolvemos un detalle crítico de seguridad en la interfaz de pagos y preparamos el terreno visual para el nuevo sistema de abonos parciales utilizando Flux UI.

🛡️ Protección del Monto de Cuota (Refinamiento de UX)

A raíz de comentarios de la comunidad, identificamos que el monto a pagar en el modal de "Pago Total" era editable, lo que permitía errores humanos o pagos inconsistentes.

  • 🔒 Bloqueo de Input: Convertimos el campo de entrada del monto en un input type="hidden". Esto asegura que el valor enviado al servidor sea el calculado por el sistema (incluyendo moras) sin alteración manual [08:35].
  • 👁️ Visualización Estática: Implementamos etiquetas dinámicas (<p> y <span>) con estilos de Flux UI para mostrar el "Monto Total Pagado" de forma clara pero no editable, manteniendo la coherencia visual con el resto del Dashboard [12:15].

🏗️ Infraestructura para Pagos Parciales

Iniciamos la integración del nuevo módulo en el flujo de trabajo:

  • 🛤️ Definición de Rutas: Registramos una nueva ruta de tipo POST (admin.pago_parcial.store) que se encargará de procesar los abonos parciales en el controlador correspondiente [13:56].
  • 🔑 Permisos y Seeders: Actualizamos el RoleSeeder para incluir el nuevo permiso guardar pago parcial. Ejecutamos un refresco de la base de datos y optimización de caché para que el sistema reconozca estas nuevas capacidades de seguridad [14:41].

🎨 Diseño del Grupo de Botones con Flux UI

Para no saturar la interfaz en la vista de detalle del préstamo, organizamos las acciones de pago:

  • 🔘 Flux Button Group: Agrupamos las acciones de "Pagar Cuota" (Total) y el nuevo botón de "Pago Parcial" en un solo bloque estético [16:34].
  • 💳 Botón de Abono: Creamos un botón específico de color azul con el icono banknote, etiquetado como "Pago Parcial". Este activará un modal dinámico diseñado exclusivamente para registrar montos menores al total de la cuota [18:13].

✅ Resultado de la Lección

El sistema ahora es más robusto; hemos eliminado la posibilidad de alterar pagos totales accidentalmente. Además, la interfaz ya muestra la opción de "Pago Parcial", quedando lista para la implementación de la lógica de guardado en la siguiente lecció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