Portal de pagos y dashboard Citybox

Portal web para que los inquilinos renten y paguen su bodega, y dashboard para revisar pagos y generar links de cobro.

Dashboard de Citybox con registros de pago y órdenes de cobro, formulario de nueva orden y vista en celular, con los datos de clientes difuminados

Qué se necesitaba

Que el personal pudiera revisar y administrar los pagos de varias sedes, que los inquilinos que no usan la app tuvieran una versión web, y que se pudieran cobrar cosas puntuales (multas, reparaciones, depósitos) sin armar una cuenta en el sistema.

Qué construí

Una aplicación en Laravel con tres partes que comparten los mismos pagos:

  • Portal de clientes (/portal): el inquilino elige la sede (Kennedy, Samborondón o Quito), ingresa o crea su cuenta, ve su código de puerta y el saldo de cada unidad y paga la deuda. También puede rentar una unidad: elige el tipo, el piso (solo aparecen los pisos con unidades libres) y la unidad, ve el desglose con proporcional del mes, inscripción e IVA del 15 %, y paga con tarjeta. Tiene modo claro y oscuro.
  • Dashboard del personal: la lista de registros de pago con ambiente, estado, tipo de tarjeta, monto, lote, autorización, fecha y sede, con búsqueda y orden por columna, y una vista que se adapta al celular. Hay tres roles: el super admin ve todo y crea cuentas, el admin ve los pagos de todas las sedes, y el delegado solo los de las sedes que se le asignan, donde además puede anular pagos. Las cuentas nuevas se activan con un correo de invitación para que cada persona defina su propia contraseña.
  • Órdenes de cobro: el personal genera un link de pago con descripción, número de orden o factura opcional, monto sin IVA (el sistema calcula el IVA y el total), nombre y correo del cliente, y puede enviarlo por correo. El cliente lo abre sin iniciar sesión y paga. El link vence a las 24 horas. Un resumen muestra lo generado, lo cobrado, lo pendiente y la cantidad de órdenes. Un delegado solo puede crear órdenes si el administrador le da ese permiso, y solo ve las suyas.

Los datos de inquilinos y unidades vienen en tiempo real de un servicio SOAP externo. Los pagos se procesan con la pasarela de Datafast, y la app móvil usa el mismo backend, con endpoints propios para pagos, reembolsos y tarjetas guardadas. Se envían cinco correos: confirmación de reserva, pago de deuda, bienvenida al inquilino, aviso al administrador y cambio de clave.

Seguridad

  • Sin acceso a datos ajenos: en el portal, el inquilino y la sede salen siempre de la sesión, nunca de lo que envía el navegador. Un pago de otra persona y uno que no existe responden igual.
  • Montos calculados en el servidor: el cliente no puede modificar lo que paga, y cada intento de pago queda registrado y se procesa una sola vez.
  • Sesión: se renueva al ingresar, tiene vencimiento por inactividad y un máximo de 8 horas, y rechaza sesiones manipuladas.
  • Control de intentos: límites por capas en inicio de sesión, registro y recuperación de contraseña, además de un campo trampa contra bots.
  • Sin enumeración de usuarios: recuperar la contraseña y el error de ingreso responden lo mismo exista o no el correo.
  • Entradas y salidas: validación estricta de cada campo, salida siempre escapada, política de seguridad de contenido y cabeceras de seguridad.
  • Roles por sede: cada delegado solo ve y administra lo de sus sedes.
  • Pruebas: hay pruebas automáticas de seguridad del portal.

Resultado

La app, el portal web y el equipo administrativo usan las mismas cuentas y los mismos pagos. Es un sistema en producción que sigue evolucionando junto con la nueva versión de la app móvil.