Page type

Kanban: the 52 sales in columns that add themselves up.

The board below runs in the sample app, published on the Online Test. Each column totals the value of its sales. Each card shows customer, salesperson, payment method, amount and date.

One column per status, with the total on top

The columns come from a status table, each with its own color and order. The cards come from the sales table. One attribute (value-field) sums the value of each column, so you see at a glance how much is Pending and how much is Paid.

Sales kanban with 4 columns by status, with a count and a total per column — 4 columns and 52 cards, with the count and the total at the top of each column.

You choose what each card shows

The title can come from another table, like the customer's name ({cliente_id->nome}). Below it go badges with the number and the status, icon rows for salesperson and payment, and a footer with amount and date. Each part is a tag inside the card:

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="m/d/Y" icon="calendar" /></mad-kanban-card></mad-kanban>

Drag the card and the status changes in the database

When you drop the card in another column, the sale's status changes in the database. Right after, the controller can run your code (afterCardMove), for example to keep a history of stage changes. A click on the card opens the sale form in a side panel.

Sale card being dragged between kanban columns — Card #1001 mid-drag: when you drop it, the status changes in the database.

When to use the kanban

Use the kanban when the work moves through stages and you want to see what is stuck in each one. Changing the stage is dragging the card.

Sales pipeline. Each column is a stage of the negotiation, with the total of what is in it.
Work orders. Open, in progress, waiting for a part and done. The technician drags the card as the job moves forward.
Customer support. Tickets by status, with the customer in the title and the owner on a card row.
HR recruiting. Screening, interview, offer and hired, with the date of the next conversation in the card footer.

To compare many records and export them, the list view does it better. If the status only changes when someone approves, with a deadline and history, use the approval queue. To see the pipeline in charts, use a dashboard. The board is built in the visual editor.

What you configure

Besides the table and the status field, these attributes change what the user sees and does on the board.

Column name stage-title-field: The field of the stages table that becomes the column title. By default, it is the nome field.
Color and order stage-color-field: The color and order of the columns come from two fields of the stages table: by default, cor (holding the color code) and ordem.
Total format value-format: How each column's total is displayed. The default is currency with two decimal places, and the formats are the same as for charts.
Order within a column card-order-field: With a position field, users can also reorder cards inside the same column.
Cards per load cards-per-load: How many cards each column loads at a time. The next ones arrive as the person scrolls the column.
Automatic badges no-id-badge: Every card comes with a number badge and a status badge. This attribute hides the first one, and no-state-badge hides the second.

What goes into the Laravel project

The board is a class in app/Control with the <mad-kanban> view in resources/views. This is where you go when you need to go beyond the defaults:

The data comes from Eloquent models. In the example, the cards come from the Venda model and the columns from VendaStatus.
Buttons on the card call your PHP. An action (<mad-kanban-action>) triggers a method of the screen, such as onAprovar, which receives the card's id. It can ask for confirmation first.
Your own card. If the title, badge, row and footer tags aren't enough, card-view points to a Blade view of your own.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the kanban

Does the kanban work with any table?

It works with any table that has a status field linked to a stages table. Each stage becomes a column, with the name, color and order stored in it.

Can I filter the kanban cards?

Yes. The board accepts filters with the same fields as the list view, in a bar, a side panel or a window.

Can I change the generated kanban code?

Yes. The board is a PHP class and a Blade view in your Laravel project, and the code in protected blocks stays when the screen is regenerated.

And more

Each column with its own colorColumns you reorder by draggingMore cards load as you scroll the columnOne click on a card opens the formFilters just like the ones in the list viewCard layout any way you like

See the dashboard in detail or explore the page types.

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

Try the app now See the generated code

Create an accountOpen beta, no credit card.
Build a screenVisually, in code, or by asking the AI.
Download the .zipA Laravel project that runs wherever you want.