Kanban: as 52 vendas em colunas que somam sozinhas.

Uma coluna por status, com a soma no topo

As colunas vêm de uma tabela de status, cada uma com a sua cor e a sua ordem. Os cards vêm da tabela de vendas. Um atributo (value-field) soma o valor de cada coluna: Pendente tem R$ 124.201,35 e Pago tem R$ 197.170,49.

Você escolhe o que cada card mostra

O título pode vir de outra tabela, como o nome do cliente ({cliente_id->nome}). Abaixo dele entram etiquetas com o número e o status, linhas com ícone para vendedor e pagamento e um rodapé com valor e data. Cada parte é uma tag dentro do card:

<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="R$" /><mad-kanban-footer type="date" path="data_venda" format="d/m/Y" icon="calendar" /></mad-kanban-card></mad-kanban>

Arraste o card e o status muda no banco

Quando você solta o card em outra coluna, o status da venda muda no banco. Logo depois, o controller pode rodar o seu código (afterCardMove), por exemplo para guardar o histórico de mudança de etapa. Um clique no card abre o formulário da venda num painel lateral.

Quando usar o kanban

O kanban serve quando o trabalho anda por etapas e você quer ver o que está parado em cada uma. Mudar a etapa é arrastar o card.

• Funil de vendas. Cada coluna é uma etapa da negociação, com a soma do que está nela.
• Ordens de serviço. Aberta, em execução, aguardando peça e concluída. O técnico arrasta o card quando o serviço avança.
• Atendimento. Chamados por situação, com o cliente no título e o responsável numa linha do card.
• Seleção no RH. Triagem, entrevista, proposta e contratado, com a data da próxima conversa no rodapé do card.

Para comparar muitos registros e exportar, a listagem resolve melhor. Se o status só muda com a aprovação de alguém, com prazo e histórico, use a fila de aprovação. Para ver o funil em gráficos, use um dashboard. O quadro é montado no editor visual.

O que você configura

Além da tabela e do campo de status, estes atributos mudam o que o usuário vê e faz no quadro.

Nome da coluna stage-title-field

O campo da tabela de etapas que vira o título da coluna. Por padrão, é o campo nome.

Cor e ordem stage-color-field

A cor e a ordem das colunas vêm de dois campos da tabela de etapas: por padrão, cor (com o código da cor) e ordem.

Formato da soma value-format

Como o total de cada coluna aparece. O padrão é reais com duas casas, e os formatos são os mesmos dos gráficos.

Ordem na coluna card-order-field

Com um campo de posição, o usuário também reordena os cards dentro da mesma coluna.

Cards por vez cards-per-load

Quantos cards cada coluna carrega de uma vez. Os próximos chegam quando a pessoa rola a coluna.

Selos automáticos no-id-badge

Todo card já vem com um selo do número e outro do status. Este atributo esconde o primeiro, e o no-state-badge, o segundo.

O que vai para o projeto Laravel

O quadro é uma classe em app/Control com a view <mad-kanban> em resources/views. É aqui que você mexe quando precisa ir além do padrão:

• Os dados vêm dos models Eloquent. No exemplo, os cards vêm do model Venda e as colunas do VendaStatus.
• Botões no card chamam o seu PHP. Uma ação (<mad-kanban-action>) dispara um método da tela, como onAprovar, que recebe o id do card. Ela pode pedir confirmação antes.
• Card do seu jeito. Se as tags de título, selo, linha e rodapé não bastam, o card-view aponta para uma view Blade sua.

Como toda tela do MadBuilder, esses arquivos abrem no seu editor, vão para o seu Git e aceitam código à mão em blocos protegidos, que continuam lá quando a tela é gerada de novo. Veja como o código é gerado.

Perguntas sobre o kanban

E mais

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