Reconstruindo o dashboard: de tabela confusa a um painel funcional.

O primeiro dashboard que construí para o painel admin da barbearia funcionava. Todos os dados estavam lá. Mas era difícil de usar/ver — especialmente em mobile, onde as colunas da tabela se sobrepunham e os botões ficavam inacessíveis.

Era hora de reconstruir!

O problema com tabelas em mobile

Tabelas com muitas colunas são inimigas do mobile. O projeto tinha uma grade com 9 colunas — cliente, serviços, data, horário, duração, total, status e ações. Num ecrã de 375px, isso é simplesmente ilegível.

A solução não foi esconder colunas. Foi criar duas vistas diferentes para o mesmo dado: uma tabela completa para desktop, e cards individuais para mobile. Cada card agrupa a informação de um agendamento de forma legível e com os botões acessíveis.

Sidebar em vez de botões soltos

O design original tinha botões de navegação espalhados pelo topo da página — BLACKLIST, FECHAMENTO, HOME, SAIR. Funcionava, mas não escalava.

Troquei por uma sidebar lateral com ícones e labels claros, igual ao padrão que qualquer dashboard moderno usa. Em mobile a sidebar fica escondida e abre com um botão hamburguer no topo.

Stats cards

Adicionei um conjunto de cards de estatísticas no topo: agendamentos hoje, total, confirmados, cancelados e faltas. São calculados diretamente dos dados já carregados — sem chamadas extra à API.

É informação que o admin quer ver imediatamente ao abrir o dashboard, sem precisar de contar linhas na tabela.

Filtros por status

Em vez de mostrar todos os agendamentos em bloco, adicionei botões de filtro — Todos, Confirmados, Cancelados, Faltas, Pendentes. O filtro é apenas client-side, sem re-fetch.

Pequeno detalhe, grande diferença na usabilidade.

O que fica para mim

Essa mudança é sobre reduzir o esforço cognitivo de quem usa. Um dashboard bem construído faz o admin tomar decisões mais rápido, com menos erros. Isso tem valor real.