Page type

Dashboard: KPIs and charts straight from the database.

The panel below runs in the sample app, published on the Online Test, on top of the same 52 sales as the list view and the PDF. The revenue total matches to the cent. Nobody wrote a query by hand.

Revenue, average ticket and pending items on a single screen

KPIs, charts and tables are declared, not programmed. Each one runs its own query against the database, already summing or counting what it needs.

Sales dashboard with 4 KPIs and revenue charts — 52 sales, total revenue, average ticket and 16 pending, with the 4 charts.

KPIs that query the database on their own

You name the table, the field and the calculation: count, sum, average, minimum or maximum (count, sum, avg, min, max). The card (<mad-db-metric-card>) runs the query itself. You can pick the currency format, the color and a filter just for that card:

resources/views/…blade.php

<mad-form-grid :cols="4"><mad-db-metric-card model="Venda" field="id" total="count"label="Sales" icon="shopping-cart" format="integer" /><mad-db-metric-card model="Venda" field="valor_total" total="sum"label="Revenue" icon="circle-dollar-sign" variant="success" format="money:$" /><mad-db-metric-card model="Venda" field="valor_total" total="avg"label="Average ticket" icon="trending-up" format="money:$" /><mad-db-metric-card model="Venda" field="id" total="count":filters="[['status', '=', 'pendente']]"label="Pending" icon="clock" variant="warning" format="integer" /></mad-form-grid>

Four KPIs: sales, revenue, average ticket and pending — The four cards that come out of the code above, without a single hand-written query.

Seven chart types, switched with one attribute

The type attribute picks the drawing. You say which field to group by and what calculation to run, and the chart comes out ready, drawn with ECharts. Tweaks such as area, horizontal, stacked or percentage (area, horizontal, stacked, percentage) combine with any type.

resources/views/…blade.php

{{-- the 7 values accepted in type= --}}<mad-db-chart type="bar"     model="Venda" group-by="vendedor"field="valor_total" total="sum" format="currency:$" /><mad-db-chart type="line"    model="Venda" group-by="data_venda"field="valor_total" total="sum" area format="currency:$" /><mad-db-chart type="pie"     model="Venda" group-by="forma_pagamento"total="count" legend format="numeric:0" /><mad-db-chart type="donut"   model="Venda" group-by="status"total="count" legend percentage format="numeric:0" /><mad-db-chart type="rose"    model="Venda" group-by="vendedor"total="count" legend format="numeric:0" /><mad-db-chart type="funnel"  model="Venda" group-by="status"total="count" legend format="numeric:0" /><mad-db-chart type="treemap" model="Venda" group-by="forma_pagamento"field="valor_total" total="sum" format="currency:$" />

Bar chart by salesperson and line chart with area by day — Bar and area line: revenue by salesperson and by day.

Pie chart by payment method and donut chart by status — Pie and donut: sales counted by payment method and by status.

Rose chart by salesperson and funnel by status — Rose and funnel: the funnel puts the stages in order on its own.

Revenue treemap and horizontal bars by payment method — Treemap and horizontal bars: the same revenue seen two ways.

A list view and a pivot table on the same panel

The dashboard can have two kinds of table. One is the full embedded list view (<mad-grid>), with colored status, currency, formatted dates, search and pagination. The other is a pivot table (<mad-pivot-table>): one field on the rows, another on the columns and the value calculated at the intersection, with subtotals and export.

resources/views/…blade.php

<mad-pivot-table model="Venda"title="Revenue: salesperson x payment method" :height="360" subtotals><mad-pivot-row   field="vendedor"        label="Salesperson" /><mad-pivot-col   field="forma_pagamento" label="Payment" /><mad-pivot-value field="valor_total"     label="Revenue"aggregation="sum" format="currency" currency="USD" /></mad-pivot-table>{{-- embedded list view: declarative sorting and filtering --}}<mad-grid model="Venda" order-by="data_venda desc":filters="[['status', '=', 'pago']]" per-page="8" searchable>...</mad-grid>

Pivot table of salesperson by payment method with a grand total — Salesperson on the rows, payment method on the columns and the grand total at the end.

Sales list view inside the dashboard, sorted by most recent date — The embedded list view, with the most recent sales first, colored status, currency, formatted date, search and pagination.

Month and year filters, in seven layouts

The filters work like the ones in the list view, with one extra that only the dashboard has: the month and year period picker. The filter block (<mad-dash-filters>) can appear in seven ways, and you switch by changing only the style: toolbar, chips, form, drawer, modal, sidebar-left or sidebar-right.

resources/views/…blade.php

<mad-dash-filters style="drawer" name="filtros" title="Filters"><mad-period-monthyear />                        {{-- month/year period --}}<mad-search-field    name="busca"         label="Search" /><mad-select-field    name="status"        label="Status" :items="[...]" /><mad-dbcombo-field   name="cliente_id"    label="Customer" model="Pessoa" display="{nome}" /><mad-daterange-field name="periodo_venda" label="Sale period" /><mad-number-field    name="valor_minimo"  label="Minimum amount" :min="0" /><mad-switch-field    name="somente_pagas" label="Paid only" /></mad-dash-filters>

Dashboard filters as a toolbar — Toolbar: the period and the filters in a single strip, the default layout.

Dashboard filters as chips — Chips: only the period stays in view, and the rest comes in through "+ Add filter".

Dashboard filters in a fixed two-column panel — Form: a fixed two-column panel, with Apply and Clear all.

Dashboard filters in a side panel — Side drawer: all the fields together, with the Apply button.

Dashboard filters in a centered window — Centered window: the fields in two columns, with the dashboard still on screen.

Dashboard filters in a fixed column to the left of the KPIs and charts — Left column: a fixed 260px, with the KPIs and charts fitting in beside it.

Dashboard filters in a fixed column to the right of the KPIs and charts — Right column: the same column, on the other side of the dashboard.

Twelve field types to filter with

The filter block accepts twelve field types. Any of them filters the whole dashboard: KPIs, charts and tables change together.

<mad-period-monthyear> All, month, year or custom. Only exists on the dashboard

<mad-search-field> Free text search

<mad-input-field> Plain text

<mad-select-field> Fixed list of options

<mad-dbselect-field> List coming from a table

<mad-dbcombo-field> Searchable list coming from the database

<mad-dbunique-search-field> Look up a record in the database

<mad-date-field> A single date

<mad-daterange-field> Date range

<mad-number-field> A number, such as a minimum amount

<mad-switch-field> On/off toggle

<mad-checkbox-field> Checkbox, yes or no

The side drawer image above shows seven of them together: period, search, option list, database list, date range, number and toggle.

And more

KPI with a value you calculate yourself, in PHPLegends with names instead of codesHorizontal, stacked, area, percentage and abbreviated-number chartsFrameless chart, to fit into another layoutChart with data you supply, no database table neededResult cached for each combination of filters

See the list view 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.