Saúde Livre - Documentação ERD & Wireframes

📋 Índice

Visão Geral
Diagrama de Entidades e Relacionamentos (ERD)
Wireframes
Fluxos de Usuário
Especificações Técnicas

🎯 Visão Geral

Este documento contém a documentação completa do banco de dados e das interfaces do MVP Saúde Livre, incluindo:

ERD completo com 30+ tabelas e relacionamentos
12 wireframes das principais telas
Fluxos de usuário detalhados
Especificações técnicas para desenvolvimento

🗄️ Diagrama de Entidades e Relacionamentos (ERD)

Estrutura do Banco de Dados

O banco de dados está organizado em 8 módulos principais:

1. USUÁRIOS E AUTENTICAÇÃO

Tabelas principais:

users - Dados básicos de usuários (CPF/CNPJ)
companies - Informações de empresas
dependents - Dependentes (filhos, pais, pets)
user_addresses - Endereços dos usuários

Campos críticos:

sql

users:
  - id (uuid, PK)
  - type (CPF/CNPJ)
  - cpf_cnpj (unique)
  - name, email, phone
  - sus_card (opcional)
  - birth_date
  - password_hash
  - active, verified flags

Relacionamentos:

1 usuário → N dependentes
1 usuário → N endereços
1 usuário CNPJ → 1 empresa

2. REDE CREDENCIADA

Tabelas principais:

providers - Clínicas, hospitais, laboratórios
professionals - Médicos, dentistas, fisioterapeutas
services - Serviços oferecidos

Campos críticos:

sql

providers:
  - type (clinica, hospital, laboratorio...)
  - coordinates (lat/lng para geolocalização)
  - business_hours (JSON)
  - rating, reviews_count
  - verified (flag de verificação)

professionals:
  - specialty (especialidade médica)
  - council_number (CRM, CRO...)
  - availability (JSON - horários)
  - rating, reviews_count

Relacionamentos:

1 provider → N professionals
1 provider → N services
Professional → N appointments

3. AGENDAMENTOS

Tabelas principais:

appointments - Agendamentos principais
appointment_documents - Documentos gerados
appointment_history - Histórico de mudanças

Campos críticos:

sql

appointments:
  - user_id, dependent_id (nullable)
  - provider_id, professional_id, service_id
  - appointment_date, appointment_time
  - status (pending, confirmed, in_progress, completed, cancelled)
  - format (presencial, tele_atendimento)
  - priority (normal, urgent, emergency)

Estados possíveis:

pending → Aguardando confirmação da clínica
confirmed → Confirmado pela clínica
in_progress → Em atendimento
completed → Concluído
cancelled → Cancelado

Relacionamentos:

Appointment → User (obrigatório)
Appointment → Dependent (opcional - para agendamento de terceiros)
Appointment → Provider/Professional/Service
Appointment → Transaction (pagamento)
Appointment → Teleconsultation (se online)

4. TELECONSULTA

Tabelas principais:

teleconsultations - Sessões de teleconsulta
teleconsultation_messages - Chat da consulta

Campos críticos:

sql

teleconsultations:
  - appointment_id (FK)
  - platform_session_id (ID externo)
  - room_url (link da sala)
  - status (waiting, active, ended)
  - duration_seconds

Integração:

Integra com plataforma externa de teleconsulta
Captura dados via API
Armazena histórico de mensagens

5. FINANCEIRO E PAGAMENTOS

Tabelas principais:

transactions - Transações financeiras
payment_splits - Divisão de pagamentos (split)
pix_keys - Chaves PIX
health_credits - Crédito saúde
insurances - Seguros
savings_accounts - Poupança saúde
cashback - Programa de cashback

Campos críticos:

sql

transactions:
  - type (payment, refund, credit, debit)
  - payment_method (pix, credit_card, health_credit...)
  - amount, platform_fee, net_amount
  - status (pending, processing, completed, failed)
  - external_id (ID no gateway)

payment_splits:
  - transaction_id
  - recipient_id (provider ou professional)
  - amount, percentage
  - status (pending, transferred, completed)

Fluxo de pagamento:

Usuário seleciona serviços
Transaction criada com status pending
Integração com gateway (PIX/cartão)
Payment_splits calculado automaticamente
Transaction → completed
Splits transferidos conforme configuração

Produtos financeiros:

Crédito Saúde: Linha de crédito específica para saúde
Seguros: Internação e cirurgia
Poupança Saúde: Rendimento mensal
Cashback: Devolução em compras

6. DOCUMENTOS E HISTÓRICO MÉDICO

Tabelas principais:

medical_documents - Documentos gerais
prescriptions - Receitas médicas
vaccines - Cartão de vacinação

Campos críticos:

sql

medical_documents:
  - type (exam, prescription, vaccine, report...)
  - file_url (storage URL)
  - document_date
  - metadata (JSON - dados adicionais)

prescriptions:
  - medications (JSON array)
  - valid_until
  - active (flag)

vaccines:
  - vaccine_name, batch_number
  - application_date, next_dose_date

7. NOTIFICAÇÕES E COMUNICAÇÃO

Tabelas principais:

notifications - Notificações gerais
medication_reminders - Lembretes de medicação

Campos críticos:

sql

notifications:
  - type (appointment, payment, reminder, alert)
  - channel (push, email, sms, whatsapp)
  - status (pending, sent, delivered, read, failed)
  - data (JSON - dados extras)

Canais de comunicação:

Push notification (app)
E-mail
SMS
WhatsApp Business API

8. SISTEMA E CONFIGURAÇÕES

Tabelas principais:

financial_settings - Configurações financeiras da rede
banners - Banners rotativos
news - Notícias
reviews - Avaliações
system_logs - Logs de auditoria

📱 Wireframes

Telas Desenvolvidas

Tela inicial com logo
Botões: Entrar / Criar Conta
Design gradient (teal → blue)

2. Escolha de Cadastro

Seleção CPF ou CNPJ
Cards interativos
Navegação clara

3. Formulário Cadastro CPF

Nome completo
CPF
Data de nascimento
Cartão SUS (opcional)
E-mail
Telefone
Validações em tempo real

4. Home - Tela Principal

Header com foto do usuário
Banner rotativo (3 slides)
Grid de serviços (3x3):
- Médicos, Clínicas, Hospitais
- Laboratórios, Farmácias, Dentista
- Fisioterapia, Estética, Meu Pet
Tab bar de navegação

5. Lista de Profissionais

Filtros por especialidade
Cards com:
- Foto do profissional
- Nome, especialidade
- Rating (estrelas)
- Preço
- Botão "Agendar"
Scroll infinito

6. Detalhes do Profissional

Banner com imagem
Informações completas:
- Nome, especialidade, CRM
- Rating e reviews
- Distância (geolocalização)
Lista de serviços com preços:
- Preço tabela (riscado)
- Preço plataforma (destaque)
Botão de pagamento total

7. Formulário de Agendamento

Resumo do profissional
Seleção de data (dropdown)
Seleção de horário
Formato (presencial/teleconsulta)
Checkbox: agendamento para dependente
Campo observações
Botão finalizar

8. Tela de Pagamento

Resumo dos serviços
Total
Métodos: PIX, Cartão, Dinheiro
Geração de QR Code PIX
Status do pagamento

9. Meus Agendamentos

Tabs: Agendamentos / Serviços / Pagamento Avulso
Cards com status:
- Amarelo: Aguardando liberação
- Verde: Confirmado
- Cinza: Concluído
Informações:
- Código, local, data/hora
- Tipo de serviço, valor
- Botões de ação

10. Crédito Saúde

Card de crédito visual
Limite disponível (grande)
Limite total vs usado
Lista de produtos:
- Auto Credi
- Poupança Saúde
- Seguros (internação, cirurgia)

11. Perfil do Usuário

Header com foto e dados
Seções organizadas:
- Meus Dados, Dependentes
- Meus Exames, Vacinas
- Minhas Receitas, Pets
- Notificações, Ajuda
- Termos, Privacidade
Botão sair (vermelho)

12. Painel Admin - Agenda

Seleção de estabelecimento
Date picker
Tabs: Agendamentos / Serviços / Pagamento
Lista de horários:
- Agendamentos pendentes
- Horários livres
- Botões de ação (confirmar, editar)

🔄 Fluxos de Usuário

Fluxo 1: Cadastro e Primeiro Acesso

1. Splash Screen
   ↓
2. Login / Criar Conta
   ↓
3. Escolha CPF ou CNPJ
   ↓
4. Formulário de Cadastro
   ↓
5. Verificação (e-mail/SMS)
   ↓
6. Home Principal

Fluxo 2: Agendamento de Consulta

1. Home
   ↓
2. Seleciona categoria (ex: Médicos)
   ↓
3. Lista de profissionais
   ↓
4. Detalhes do profissional
   ↓
5. Seleção de serviços
   ↓
6. Formulário de agendamento
   ↓
7. Pagamento
   ↓
8. Confirmação

Fluxo 3: Teleconsulta

1. Meus Agendamentos
   ↓
2. Seleciona agendamento confirmado
   ↓
3. Botão "Iniciar Teleconsulta"
   ↓
4. Sala de espera
   ↓
5. Videochamada com profissional
   ↓
6. Finalização (receita, documentos)

Fluxo 4: Gestão de Documentos

1. Perfil
   ↓
2. Meus Exames / Vacinas / Receitas
   ↓
3. Upload de documentos
   ↓
4. Visualização / Compartilhamento

Fluxo 5: Admin - Confirmação de Agendamento

1. Login Admin
   ↓
2. Painel Agenda
   ↓
3. Visualiza pedido de agendamento
   ↓
4. Confirma ou Rejeita
   ↓
5. Notificação enviada ao usuário

🎨 Especificações Técnicas

Cores Principais

css

/* Gradientes */
--gradient-primary: linear-gradient(to bottom right, #14b8a6, #2563eb);
--gradient-card: linear-gradient(to bottom right, #0d9488, #1d4ed8);

/* Cores Sólidas */
--teal-500: #14b8a6;
--teal-600: #0d9488;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--pink-500: #ec4899;
--purple-600: #9333ea;

/* Neutras */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-600: #4b5563;
--gray-900: #111827;

/* Status */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;

Tipografia

css

/* Família */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Tamanhos */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-4xl: 36px;

/* Pesos */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

Espaçamentos

css

/* Padding/Margin padrão */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;

/* Container */
--container-padding: 16px;
--max-width: 1280px;

Componentes

Botões

css

/* Primário */
.btn-primary {
  background: linear-gradient(to right, #ec4899, #9333ea);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

/* Secundário */
.btn-secondary {
  background: #14b8a6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

/* Outline */
.btn-outline {
  border: 2px solid #14b8a6;
  color: #14b8a6;
  background: transparent;
  padding: 12px 24px;
  border-radius: 8px;
}

Cards

css

.card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-professional {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

Inputs

css

.input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
}

.input:focus {
  border-color: #14b8a6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

Ícones

Usar biblioteca: Lucide Icons ou Heroicons

Tamanhos padrão:

Small: 16px
Medium: 24px
Large: 32px

Responsividade

css

/* Mobile First */
/* Base: 375px (iPhone SE/8) */

/* Breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

Animações

css

/* Transições padrão */
.transition {
  transition: all 0.3s ease;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up */
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

📊 Status de Desenvolvimento

Legenda

✅ Completo
🚧 Em desenvolvimento
📋 Planejado
❌ Não iniciado

ERD

✅ Estrutura principal definida
✅ Relacionamentos mapeados
🚧 Índices e otimizações
📋 Stored procedures
📋 Triggers

Wireframes

✅ Fluxos principais (12 telas)
🚧 Telas secundárias
📋 Estados de erro
📋 Loading states
📋 Empty states

Próximos Passos

Alta Fidelidade
- Criar protótipos no Figma
- Design system completo
- Componentes reutilizáveis
Validação
- Testes de usabilidade
- Feedback de stakeholders
- Ajustes de UX
Desenvolvimento
- Setup do banco de dados
- Implementação de APIs
- Desenvolvimento frontend

📁 Arquivos Gerados

saude-livre-erd.mermaid
- Diagrama completo do banco de dados
- Pode ser visualizado em: mermaid.live
- Ou importado no Figma/Draw.io
saude-livre-wireframes.html
- 12 wireframes interativos
- Visualizar em qualquer navegador
- Responsivo (375px)
saude-livre-documentacao.md
- Este documento
- Documentação completa
- Especificações técnicas

🤝 Colaboração

Para Designers

Use os wireframes como base
Mantenha a hierarquia de informações
Siga as especificações de cores e tipografia
Crie componentes reutilizáveis no Figma

Para Desenvolvedores

Use o ERD como referência do banco
Siga os padrões de nomenclatura
Implemente validações conforme especificado
Mantenha consistência com os wireframes

Para Product Managers

Valide os fluxos de usuário
Priorize features do MVP
Defina métricas de sucesso
Acompanhe desenvolvimento por módulo

📞 Contato e Suporte

Para dúvidas ou sugestões sobre a documentação:

Abra uma issue no repositório
Entre em contato com a equipe de produto
Participe das dailies

Última atualização: Dezembro 2025
Versão: 1.0.0
Status: 🚧 Em desenvolvimento

Saúde Livre - Documentação ERD & Wireframes ​

📋 Índice ​

🎯 Visão Geral ​

🗄️ Diagrama de Entidades e Relacionamentos (ERD) ​

Estrutura do Banco de Dados ​

1. USUÁRIOS E AUTENTICAÇÃO ​

2. REDE CREDENCIADA ​

3. AGENDAMENTOS ​

4. TELECONSULTA ​

5. FINANCEIRO E PAGAMENTOS ​

6. DOCUMENTOS E HISTÓRICO MÉDICO ​

7. NOTIFICAÇÕES E COMUNICAÇÃO ​

8. SISTEMA E CONFIGURAÇÕES ​

📱 Wireframes ​

Telas Desenvolvidas ​

1. Splash / Login ​

2. Escolha de Cadastro ​

3. Formulário Cadastro CPF ​

4. Home - Tela Principal ​

5. Lista de Profissionais ​

6. Detalhes do Profissional ​

7. Formulário de Agendamento ​

8. Tela de Pagamento ​

9. Meus Agendamentos ​

10. Crédito Saúde ​

11. Perfil do Usuário ​

12. Painel Admin - Agenda ​

🔄 Fluxos de Usuário ​

Fluxo 1: Cadastro e Primeiro Acesso ​

Fluxo 2: Agendamento de Consulta ​

Fluxo 3: Teleconsulta ​

Fluxo 4: Gestão de Documentos ​

Fluxo 5: Admin - Confirmação de Agendamento ​

🎨 Especificações Técnicas ​

Cores Principais ​

Tipografia ​

Espaçamentos ​

Componentes ​

Botões ​

Cards ​

Inputs ​

Ícones ​

Responsividade ​

Animações ​

📊 Status de Desenvolvimento ​

Legenda ​

ERD ​

Wireframes ​

Próximos Passos ​

📁 Arquivos Gerados ​

🤝 Colaboração ​

Para Designers ​

Para Desenvolvedores ​

Para Product Managers ​

📞 Contato e Suporte ​

Saúde Livre - Documentação ERD & Wireframes

📋 Índice

🎯 Visão Geral

🗄️ Diagrama de Entidades e Relacionamentos (ERD)

Estrutura do Banco de Dados

1. USUÁRIOS E AUTENTICAÇÃO

2. REDE CREDENCIADA

3. AGENDAMENTOS

4. TELECONSULTA

5. FINANCEIRO E PAGAMENTOS

6. DOCUMENTOS E HISTÓRICO MÉDICO

7. NOTIFICAÇÕES E COMUNICAÇÃO

8. SISTEMA E CONFIGURAÇÕES

📱 Wireframes

Telas Desenvolvidas

1. Splash / Login

2. Escolha de Cadastro

3. Formulário Cadastro CPF

4. Home - Tela Principal

5. Lista de Profissionais

6. Detalhes do Profissional

7. Formulário de Agendamento

8. Tela de Pagamento

9. Meus Agendamentos

10. Crédito Saúde

11. Perfil do Usuário

12. Painel Admin - Agenda

🔄 Fluxos de Usuário

Fluxo 1: Cadastro e Primeiro Acesso

Fluxo 2: Agendamento de Consulta

Fluxo 3: Teleconsulta

Fluxo 4: Gestão de Documentos

Fluxo 5: Admin - Confirmação de Agendamento

🎨 Especificações Técnicas

Cores Principais

Tipografia

Espaçamentos

Componentes

Botões

Cards

Inputs

Ícones

Responsividade

Animações

📊 Status de Desenvolvimento

Legenda

ERD

Wireframes

Próximos Passos

📁 Arquivos Gerados

🤝 Colaboração

Para Designers

Para Desenvolvedores

Para Product Managers

📞 Contato e Suporte