Tipo de página

Dashboard: indicadores e gráficos direto do banco.

O painel abaixo roda no app de exemplo, publicado no Teste Online, sobre as mesmas 52 vendas da listagem e do PDF. A receita de R$ 391.796,04 bate centavo por centavo. Ninguém escreveu uma consulta à mão.

Receita, ticket médio e pendências numa tela só

Indicadores, gráficos e tabelas são declarados, não programados. Cada um faz a sua própria consulta ao banco, já somando ou contando o que precisa.

Dashboard de vendas com 4 indicadores e gráficos de receita — 52 vendas, receita de R$ 391.796,04, ticket médio de R$ 7.534,54 e 16 pendentes, com os 4 gráficos.

Indicadores que consultam o banco sozinhos

Você diz a tabela, o campo e a conta: contagem, soma, média, mínimo ou máximo (count, sum, avg, min, max). O card (<mad-db-metric-card>) faz a consulta sozinho. Dá para escolher o formato de moeda, a cor e um filtro só para aquele card:

resources/views/…blade.php

<mad-form-grid :cols="4"><mad-db-metric-card model="Venda" field="id" total="count"label="Vendas" icon="shopping-cart" format="integer" /><mad-db-metric-card model="Venda" field="valor_total" total="sum"label="Receita" icon="circle-dollar-sign" variant="success" format="money:R$" /><mad-db-metric-card model="Venda" field="valor_total" total="avg"label="Ticket médio" icon="trending-up" format="money:R$" /><mad-db-metric-card model="Venda" field="id" total="count":filters="[['status', '=', 'pendente']]"label="Pendentes" icon="clock" variant="warning" format="integer" /></mad-form-grid>

Quatro indicadores: vendas, receita, ticket médio e pendentes — Os quatro cards que saem do código acima, sem nenhuma consulta escrita à mão.

Sete tipos de gráfico, trocados por um atributo

O atributo type escolhe o desenho. Você diz por qual campo agrupar e que conta fazer, e o gráfico sai pronto, desenhado com ECharts. Ajustes como área, barras horizontais, empilhadas ou em percentual (area, horizontal, stacked, percentage) combinam com qualquer tipo.

resources/views/…blade.php

{{-- os 7 valores aceitos em type= --}}<mad-db-chart type="bar"     model="Venda" group-by="vendedor"field="valor_total" total="sum" format="currency:R$" /><mad-db-chart type="line"    model="Venda" group-by="data_venda"field="valor_total" total="sum" area format="currency:R$" /><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:R$" />

Gráfico de barras por vendedor e gráfico de linha com área por dia — Barras e linha com área: a receita por vendedor e por dia.

Gráfico de pizza por forma de pagamento e de rosca por status — Pizza e rosca: vendas contadas por forma de pagamento e por status.

Gráfico de rosa por vendedor e funil por status — Rosa e funil: o funil coloca as etapas em ordem sozinho.

Treemap de receita e barras horizontais por forma de pagamento — Treemap e barras horizontais: a mesma receita vista de dois jeitos.

Uma listagem e uma tabela cruzada no mesmo painel

O dashboard pode ter dois tipos de tabela. Uma é a listagem completa, embutida (<mad-grid>), com status colorido, moeda, data formatada, busca e paginação. A outra é uma tabela cruzada (<mad-pivot-table>): um campo nas linhas, outro nas colunas e o valor calculado no cruzamento, com subtotais e exportação.

resources/views/…blade.php

<mad-pivot-table model="Venda"title="Receita: vendedor x forma de pagamento" :height="360" subtotals><mad-pivot-row   field="vendedor"        label="Vendedor" /><mad-pivot-col   field="forma_pagamento" label="Pagamento" /><mad-pivot-value field="valor_total"     label="Receita"aggregation="sum" format="currency" currency="BRL" /></mad-pivot-table>{{-- listagem embutida: ordenação e filtro declarativos --}}<mad-grid model="Venda" order-by="data_venda desc":filters="[['status', '=', 'pago']]" per-page="8" searchable>...</mad-grid>

Tabela cruzada de vendedor por forma de pagamento com total geral — Vendedor nas linhas, forma de pagamento nas colunas e o Total Geral fechando em R$ 391.796,04.

Listagem de vendas dentro do dashboard, ordenada pela data mais recente — A listagem embutida, com as vendas mais recentes primeiro, status colorido, moeda, data em português, busca e paginação.

Filtros por mês e ano, em sete formatos

Os filtros funcionam como os da listagem, com um extra só do dashboard: o seletor de período por mês e ano. O bloco de filtros (<mad-dash-filters>) pode aparecer de sete jeitos, e você troca mudando só o style: toolbar, chips, form, drawer, modal, sidebar-left ou sidebar-right.

resources/views/…blade.php

<mad-dash-filters style="drawer" name="filtros" title="Filtros"><mad-period-monthyear />                        {{-- período mês/ano --}}<mad-search-field    name="busca"         label="Busca" /><mad-select-field    name="status"        label="Status" :items="[...]" /><mad-dbcombo-field   name="cliente_id"    label="Cliente" model="Pessoa" display="{nome}" /><mad-daterange-field name="periodo_venda" label="Período da venda" /><mad-number-field    name="valor_minimo"  label="Valor mínimo" :min="0" /><mad-switch-field    name="somente_pagas" label="Somente pagas" /></mad-dash-filters>

Filtros do dashboard em barra — Barra: o período e os filtros numa faixa só, no formato padrão.

Filtros do dashboard em etiquetas — Etiquetas: só o período fica à vista, e o resto entra por "+ Adicionar filtro".

Filtros do dashboard num painel fixo em duas colunas — Formulário: um painel fixo em duas colunas, com Aplicar e Limpar tudo.

Filtros do dashboard num painel lateral — Painel lateral: todos os campos juntos, com o botão Aplicar.

Filtros do dashboard numa janela central — Janela central: os campos em duas colunas, com o dashboard ainda na tela.

Filtros do dashboard em coluna fixa à esquerda dos indicadores e gráficos — Coluna à esquerda: 260px fixos, e os indicadores e gráficos se ajeitam ao lado.

Filtros do dashboard em coluna fixa à direita dos indicadores e gráficos — Coluna à direita: a mesma coluna, do outro lado do dashboard.

Doze tipos de campo para filtrar

O bloco de filtros aceita doze tipos de campo. Qualquer um deles filtra o dashboard inteiro: indicadores, gráficos e tabelas mudam juntos.

<mad-period-monthyear> Todos, mês, ano ou personalizado. Só existe no dashboard

<mad-search-field> Busca livre por texto

<mad-input-field> Texto simples

<mad-select-field> Lista fixa de opções

<mad-dbselect-field> Lista vinda de uma tabela

<mad-dbcombo-field> Lista com busca, vinda do banco

<mad-dbunique-search-field> Busca de um registro no banco

<mad-date-field> Uma data

<mad-daterange-field> Intervalo de datas

<mad-number-field> Número, como um valor mínimo

<mad-switch-field> Liga-desliga

<mad-checkbox-field> Caixa de marcação, sim ou não

A imagem do painel lateral, mais acima, mostra sete deles juntos: período, busca, lista de opções, lista do banco, intervalo de datas, número e liga-desliga.

E mais

Indicador com valor calculado por você, em PHPLegendas com nomes no lugar de códigosBarras horizontais, empilhadas, área, percentual e números abreviadosGráfico sem moldura, para encaixar em outro layoutGráfico com dados informados por você, sem tabela no bancoResultado guardado em cache para cada combinação de filtros

Veja a listagem em detalhe ou conheça os tipos de página.

Crie a conta, monte uma tela, baixe o projeto.

Sem demo agendada e sem call de descoberta. Se o Laravel que sair não passar na revisão do seu time, você perdeu uma tarde.

Testar o app agora Ver o código gerado

Crie a contaBeta aberto, sem cartão.
Monte uma telaNo visual, no código ou pedindo à IA.
Baixe o .zipUm projeto Laravel que roda onde você quiser.