Saltar al contenido
Alejandro
Todos los proyectos

Consola de contratistas

Panel administrativo bilingüe para aprobar contratistas, liquidar nómina y responder solicitudes.

Inicio con avisos de nómina, contratistas nuevos y solicitudes pendientes
Cliente
RR. HH. / nómina — empresa de contratistas en USA
Año
2026
Tipo
Panel administrativo
Mi rol
Rediseño de la interfaz y prototipo navegable sobre el sistema real
Tecnología
HTML, CSS, JavaScript, Laravel 8 (sistema original), Livewire, DocuSign, Microsoft Graph
Demo
Navegable, con datos ficticios

El problema

Una empresa en Estados Unidos que contrata personal por horas (limpieza, logística, operaciones) manejaba sus contratistas en una aplicación web hecha en Laravel. Funcionaba, pero la consola del administrador había crecido a pedazos: tablas densas, pantallas distintas para tareas parecidas y etiquetas en un solo idioma para un equipo que trabaja en español e inglés. Aprobar un contratista nuevo o encontrar el pago de un periodo tomaba más clics de los necesarios.

Para qué se hizo

Para redibujar la consola alrededor de lo que el administrador hace todos los días —revisar altas, aprobar, pagar y responder solicitudes— sin cambiar las reglas ni los datos del sistema que ya estaba en producción.

Qué se construyó

  • Inicio con los avisos de nómina y lo pendiente del día.
  • Contratistas nuevos con su ficha completa (datos personales, información bancaria enmascarada, documentos y contactos de emergencia) y las acciones reales del sistema: aprobar, dejar en espera, rechazar o enviar al CRM.
  • Historial y actualizaciones de información enviadas por los propios contratistas.
  • Pagos por periodo de nómina, con el detalle tipo voucher: horas diurnas y nocturnas por cliente, ajustes y total.
  • Solicitudes (cartas laborales, comprobantes) y formularios: W-9, carta de recomendación, contrato para firma electrónica y carga de jornada.
  • Todo bilingüe: cada etiqueta en español con su equivalente en inglés.

Cómo se construyó

  • Primero se leyó el sistema real. Cada pantalla del prototipo corresponde a una ruta y una acción que ya existen en la aplicación Laravel (con Livewire, generación de PDF, firma con DocuSign y correo por Microsoft Graph). Así el rediseño se puede implementar sin reinventar la lógica.
  • Prototipo sin compilación: HTML, CSS y JavaScript puros, para revisarlo con el cliente en cualquier navegador y ajustarlo en minutos.
  • Datos sensibles tratados como tales: el número de seguro social y las cuentas bancarias se muestran siempre enmascarados.

Resultado

[CONFIRMAR] ¿El rediseño ya está implementado en el sistema? ¿Algún dato de uso (contratistas por mes, tiempo de aprobación)? ¿Construiste también el sistema Laravel o solo el rediseño?

Qué puede ver en la demo

El prototipo navegable completo, con una empresa inventada (“Crewline Staffing”). Todas las personas, cuentas, teléfonos (rango 555, reservado para ficción en EE. UU.) y clientes son ficticios. Los botones muestran el flujo pero no guardan nada.

Qué probar en la demo

  1. Entre con cualquier correo y clave: es un acceso de demostración.
  2. En «Nuevos contratistas» abra un registro y pruebe Aprobar, En espera o Enviar al CRM.
  3. Vaya a «Pagos» y abra un periodo: verá el voucher con horas diurnas, nocturnas y ajustes.
  4. Revise «Formularios»: W-9, cartas laborales y contratos para firma electrónica.

Pantallas

Recorrido en video

Siguiente proyecto

OpsAnalytics

Limpia y estandariza reportes de horas de personal que llegan de varias agencias y los deja listos para Looker Studio.

Abrir la demoCompartir