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.
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:
<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>
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.
{{-- 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:$" />
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.
<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>
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.
<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>
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
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.
- 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.
