Componentes essenciais

Prontos para pedidos e clientes

Conjunto inicial para CRUD, filtros, ações críticas, estados de lista e indicadores operacionais da marmitaria.

Import base

import { Input } from "@/components/ui/input"
import { Table } from "@/components/ui/table"
import { EntityToolbar } from "@/components/entity-toolbar"
import { OrderStatusBadge } from "@/components/order-status-badge"

Formulários e filtros

Controles base

Nome do cliente

Observações do pedido

Status

Receber atualizações

Contato por WhatsApp

Toolbar reutilizável

Somente ativos

Status, ações e feedback

Status do pedido

NovoEm preparoPronto para retiradaEm entregaEntregueCancelado

Diálogos e menu de ações

Padrão de uso recomendado

Use OrderStatusBadge em tabelas e cards para manter consistência visual entre os estados do pedido.

Listas, estados e paginação

Tabela de clientes

Cliente	Telefone	Status
Ana Paula	(65) 99999-2222	Em preparo
João Marcos	(65) 98111-0000	Entregue

Estado de carregamento

Nenhum cliente encontrado

Comece cadastrando clientes para acompanhar histórico e facilitar novos pedidos.

Indicadores (KPIs)

Pedidos do dia

+8%

Comparado ao mesmo horário de ontem

Em preparo

18 ativos

Pedidos ainda não finalizados

Concluídos

95%

Pedidos entregues com sucesso

Atrasados

3 pedidos

Requer atenção imediata

Uso sugerido

<EntityToolbar
  searchValue={searchValue}
  onSearchValueChange={setSearchValue}
  statusValue={statusFilter}
  onStatusValueChange={setStatusFilter}
  primaryActionLabel="Novo pedido"
  onPrimaryAction={() => openCreateModal()}
/>

<OrderStatusBadge status="em_preparo" />

<ConfirmActionDialog
  title="Cancelar pedido?"
  description="Esta ação não pode ser desfeita."
  onConfirm={cancelOrder}
  trigger={<Button variant="destructive">Cancelar</Button>}
/>