Design System

DS03 — Molecules · 15 componentes

DS03 · v1.0
M01 Form Group 3 estados
Default
Informe o nome completo da clínica
Error State
CNPJ inválido. Verifique o formato
Com ícone + Sucesso
E-mail verificado
M02 Search Bar padrão + com filtros
Busca Padrão
Com Filtros por Tipo
M03 KPI Stat Cards com trend + ícone + variantes de cor
🦷
Procedimentos / Mês
1.284
▲ 12,4% vs. mês anterior
💰
Faturamento
R$ 94k
▲ 8,7% meta: R$ 100k
👤
Novos Pacientes
247
▲ 5,2% recorrência: 68%
⏱
Taxa de Cancelamento
4,3%
▼ 1,8% meta: < 5%
M04 Data Table Row ranking + badge + progress
# Procedimento Qtd / Mês Volume Receita Status
1
 Clareamento Dental 312
R$ 28.400 ● Ativo
2
 Restauração Resina 287
R$ 21.100 ● Ativo
3
 Extração Simples 198
R$ 14.300 ● Queda
4
 Implante Unitário 89
R$ 31.200 ⭐ Premium
5
 Canal Radicular 72
R$ 19.800 ● Abaixo
M05 Alert Banner info / success / warning / error
ℹ️
Relatório mensal disponível
O relatório de Julho/2026 foi gerado com sucesso. Acesse em Relatórios → Mensais.
✅
Meta atingida!
Sua clínica atingiu 94% da meta de faturamento de Julho. Parabéns à equipe!
⚠️
Taxa de cancelamento acima do esperado
Detectamos aumento de 2,1% em cancelamentos na semana. Revise o fluxo de confirmação de consultas.
🚫
Falha na sincronização
Não foi possível sincronizar com o sistema de agendamento. Tente novamente ou contate o suporte.
M06 Navbar com logo, nav, notificação e avatar
Dashboard
Pacientes
Procedimentos
Financeiro
Relatórios
avatar
M07 Sidebar Navigation grupos + active + badges + usuário
Visão Geral
📊 Dashboard
📅 Agenda 12
Gestão Clínica
👥 Pacientes
🦷 Procedimentos 4
👨‍⚕️ Profissionais
Financeiro
💰 Faturamento
📈 Relatórios
⚙️ Configurações
user
Dr. Rafael Costa
Administrador
M08 Notification Panel lidas / não lidas / tipos contextuais
Notificações Marcar todas como lidas
📊
Relatório de Julho pronto para download. Faturamento +8,7% vs. junho.
Há 5 minutos
⭐
Meta atingida! Procedimentos de implante superaram o objetivo mensal.
Há 1 hora
✅
Sincronização com sistema de agendamento concluída com sucesso.
Ontem, 14h32
⚠️
Taxa de cancelamento subiu para 4,3% na semana passada.
Há 2 dias
M09 Filter Bar chips + select + separadores
Filtros de Dashboard
Tudo
Operacional
Financeiro
Pacientes
⭐ Premium
M10 Progress Bar metas, capacidade e variantes
Metas do Mês
FaturamentoR$ 94k / 100k
94% da meta — R$ 6.000 restantes
Novos Pacientes247 / 300
82% — faltam 53 pacientes
Procedimentos1.284 / 1.200
✅ Meta superada em 7%
Cancelamentos4,3% / 5%
Atenção — aproximando da meta máxima
Ocupação de Cadeiras
Cadeira 1 — Dr. Rafael92%
Cadeira 2 — Dra. Letícia78%
Cadeira 3 — Dr. Paulo65%
Cadeira 4 — Dra. Camila41%
Baixa ocupação — revisar agenda
M11 Pagination com ellipsis + count
Mostrando 1–20 de 247 pacientes
…
M12 Breadcrumb trail de navegação
🏠 Início / Gestão Clínica / Procedimentos / Clareamento Dental
M13 Tooltip 3 variantes contextuais
Taxa calculada nos últimos 30 dias
📊 Taxa de Cancelamento
Funcionalidade exclusiva do plano Scale 2 Pro
🔒 Relatório Avançado
⭐ Melhor procedimento do mês
🏆 Top Procedimento
M14 Dropdown Menu usuário + ações de tabela
Menu do Usuário
user
Dr. Rafael Costa
rafael@scale2.com.br
📊 Meu Dashboard
👤 Perfil
⚙️ Configurações
📥 Exportar dados
↩ Sair
Ações de Tabela
Clareamento Dental
👁 Visualizar detalhes
✏️ Editar procedimento
📋 Duplicar
📈 Ver histórico
📄 Exportar relatório
🗑 Excluir
M15 App Shell composição completa da plataforma
Principal
📊 Dashboard
📅 Agenda 3
👥 Pacientes
🦷 Procedimentos
Gestão
💰 Financeiro
📈 Relatórios
⚙️ Configurações
user
Dr. Rodrigo
Administrador
Clínica › Dashboard
🔍  Buscar pacientes…
av
Dashboard — Julho 2026
Visão geral da clínica · Atualizado há 2 min
Faturamento
R$ 94k
▲ 8,7% vs mês ant.
Procedimentos
1.284
▲ 12,4%
Novos Pacientes
247
▲ 5,2%
Cancelamentos
4,3%
▼ 1,8%
Procedimentos por semana
Geral
Premium
Top Procedimentos
1 Clareamento
312
2 Restauração
287
3 Extração
198
4 Implante
89
5 Canal
72
Scale2Clinic Design System · DS03 Molecules · v1.0 · 2026
15 componentes W3C DTCG WCAG 2.2