Tipo de página

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.

Kanban de ventas con 4 columnas por estado, conteo y suma de importes por columna — 4 columnas y 52 tarjetas, con el conteo y el total arriba de cada columna.

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:

resources/views/…blade.php

<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.

Tarjeta de venta arrastrada entre columnas del kanban — La tarjeta #1001 en medio del arrastre: al soltar, el estado cambia en la base de datos.

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) y ordem.
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 Venda y las columnas del VendaStatus.
Los botones de la tarjeta llaman a tu PHP. Una acción (<mad-kanban-action>) dispara un método de la pantalla, como onAprovar, 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-view apunta 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

Cada columna con su propio colorColumnas que reordenas arrastrandoSe cargan más tarjetas a medida que bajas por la columnaUn clic en la tarjeta abre el formularioFiltros iguales a los del listadoDiseño de la tarjeta como tú quieras

Mira el dashboard en detalle o conoce los tipos de página.

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.

Probar la app ahora Ver el código generado

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.