Kanban: las 52 ventas en columnas que suman solas.
El tablero de abajo corre en la app de ejemplo, publicada en la Prueba online. Cada columna suma el valor de sus ventas. Cada tarjeta muestra cliente, vendedor, forma de pago, valor y fecha.
Una columna por estado, con la suma arriba
Las columnas vienen de una tabla de estados, cada una con su color y su orden. Las tarjetas vienen de la tabla de ventas. Un atributo (value-field) suma el valor de cada columna, por ejemplo Pendiente y Pagado.
Tú eliges qué muestra cada tarjeta
El título puede venir de otra tabla, como el nombre del cliente ({cliente_id->nome}). Debajo entran etiquetas con el número y el estado, líneas con ícono para vendedor y pago y un pie con valor y fecha. Cada parte es una etiqueta dentro de la tarjeta:
<mad-kanban model="Venda" stage-model="VendaStatus" stage-field="status_id"value-field="valor_total" cards-draggableclick-target="VendaForm::onEdit({id})"><mad-kanban-card title="{cliente_id->nome}"><mad-kanban-badge type="id" /><mad-kanban-badge type="state" /><mad-kanban-meta icon="user" path="vendedor" /><mad-kanban-meta icon="credit-card" path="forma_pagamento" muted /><mad-kanban-footer type="money" path="valor_total" prefix="$" /><mad-kanban-footer type="date" path="data_venda" format="d/m/Y" icon="calendar" /></mad-kanban-card></mad-kanban>Arrastra la tarjeta y el estado cambia en la base de datos
Cuando sueltas la tarjeta en otra columna, el estado de la venta cambia en la base de datos. Justo después, el controller puede correr tu código (afterCardMove), por ejemplo para guardar el historial de cambio de etapa. Un clic en la tarjeta abre el formulario de la venta en un panel lateral.
Cuándo usar el kanban
El kanban sirve cuando el trabajo avanza por etapas y quieres ver qué está detenido en cada una. Cambiar la etapa es arrastrar la tarjeta.
- Embudo de ventas. Cada columna es una etapa de la negociación, con la suma de lo que hay en ella.
- Órdenes de servicio. Abierta, en ejecución, esperando repuesto y concluida. El técnico arrastra la tarjeta cuando el servicio avanza.
- Atención al cliente. Tickets por situación, con el cliente en el título y el responsable en una línea de la tarjeta.
- Selección en RR. HH. Filtro inicial, entrevista, propuesta y contratado, con la fecha de la próxima conversación en el pie de la tarjeta.
Para comparar muchos registros y exportar, el listado funciona mejor. Si el estado solo cambia con la aprobación de alguien, con plazo e historial, usa la cola de aprobación. Para ver el embudo en gráficos, usa un dashboard. El tablero se arma en el editor visual.
Lo que configuras
Además de la tabla y del campo de estado, estos atributos cambian lo que el usuario ve y hace en el tablero.
- Nombre de la columna
stage-title-field - El campo de la tabla de etapas que se convierte en el título de la columna. Por defecto, es el campo
nome. - Color y orden
stage-color-field - El color y el orden de las columnas vienen de dos campos de la tabla de etapas: por defecto,
cor(con el código del color) yordem. - Formato de la suma
value-format - Cómo aparece el total de cada columna. El predeterminado es moneda con dos decimales, y los formatos son los mismos de los gráficos.
- Orden en la columna
card-order-field - Con un campo de posición, el usuario también reordena las tarjetas dentro de la misma columna.
- Tarjetas por carga
cards-per-load - Cuántas tarjetas carga cada columna a la vez. Las siguientes llegan cuando la persona se desplaza por la columna.
- Sellos automáticos
no-id-badge - Toda tarjeta ya viene con un sello del número y otro del estado. Este atributo oculta el primero, y
no-state-badge, el segundo.
Lo que va al proyecto Laravel
El tablero es una clase en app/Control con la vista <mad-kanban> en resources/views. Aquí es donde metes mano cuando necesitas ir más allá de lo estándar:
- Los datos vienen de los models Eloquent. En el ejemplo, las tarjetas vienen del model
Venday las columnas delVendaStatus. - Los botones de la tarjeta llaman a tu PHP. Una acción (
<mad-kanban-action>) dispara un método de la pantalla, comoonAprovar, que recibe el id de la tarjeta. Puede pedir confirmación antes. - Tarjeta a tu manera. Si las etiquetas de título, sello, línea y pie no bastan,
card-viewapunta a una vista Blade tuya.
Como toda pantalla de MadBuilder, esos archivos se abren en tu editor, van a tu Git y aceptan código a mano en bloques protegidos, que siguen ahí cuando la pantalla se genera de nuevo. Mira cómo se genera el código.
Preguntas sobre el kanban
¿El kanban funciona con cualquier tabla?
Funciona con la tabla que tenga un campo de estado ligado a una tabla de etapas. Cada etapa se vuelve una columna, con el nombre, el color y el orden guardados en ella.
¿Se pueden filtrar las tarjetas del kanban?
Sí. El tablero acepta filtros con los mismos campos del listado, en una barra, en un panel lateral o en una ventana.
¿Puedo cambiar el código del kanban generado?
Sí. El tablero es una clase PHP y una vista Blade en tu proyecto Laravel, y el código de los bloques protegidos se conserva cuando la pantalla se genera de nuevo.
Y más
Crea la cuenta, arma una pantalla, descarga el proyecto.
Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.
- Crea la cuentaBeta abierta, sin tarjeta.
- Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
- Descarga el .zipUn proyecto Laravel que corre donde quieras.
