Pedro Araujo da Silveira f85cd6c210 fix: ui changes

2025-11-29 20:14:14 -03:00

65 KiB

Raw Blame History

MediConnect Roadmap

Page 1

MediConnect Roadmap Final (Versão para PDF) Data: 2025-11-21 Versão: 1.0 Responsável: Equipe MediConnect Legenda de Status: EXISTE: funcionalidade ou base já implementada (mesmo que simples) PARCIAL: há elementos, mas precisa evolução significativa PENDENTE: ainda não implementado

Visão Geral Sistema de agendamento médico multi-perfil (médico, paciente, secretaria, admin) com gerenciamento de consultas, disponibilidades e relatórios. Este roadmap destaca melhorias para aumentar valor, diferenciação e qualidade antes da entrega final.
Design & UI/UX Item Status Descrição Como Vai Funcionar KPIs no topo dos painéis PENDENTE Cards com métricas chave (Consultas Hoje, Ocupação %, No-show %, Tempo médio) Consulta agregada via serviço analytics; atualização automática a cada 60s ou ação do usuário Calendário Semana/Dia PENDENTE Modos adicionais além do mês Alternar tabs (Mês/Semana/Dia); Semana mostra colunas por dia, Dia mostra timeline vertical com blocos de consultas Drag & Drop consultas PENDENTE Reagendar arrastando bloco Biblioteca (react-beautiful-dnd ou dnd-kit); atualiza scheduled_at e valida conflitos Heatmap de ocupação PENDENTE Matriz dias × horas com cores densidade Pré-calcular slots ocupados vs total e renderizar grade com escala de cor Modo escuro consistente PARCIAL Existe base Tailwind dark; refinamento contraste Ajustar tokens semânticos; auditoria AA/AAA em principais componentes Skeleton loaders PENDENTE Placeholder cinza animado durante fetch Wrapper para listas, calendário e relatórios Empty states com CTA PARCIAL Algumas mensagens simples Componente padrão mostrando ícone, texto, botão ação principal Sidebar colapsável PENDENTE Reduz largura exibindo apenas ícones Estado persistido em localStorage; botão toggle Tokens tipografia/spacing PENDENTE Escala consistente (ex: 12– 14–16–20–24) Arquivo design-tokens.ts e utilitários Tailwind personalizados

Page 2

Cores semânticas status PARCIAL Mapeamento manual atual Centralizar em objeto STATUS_COLORS; fácil manutenção e tema Perfil médico com progress bar PENDENTE Indicar % completude do perfil Função calcula campos preenchidos / total e exibe barra 3. Acessibilidade Item Status Descrição Como Vai Funcionar Focus rings custom PENDENTE Outline visível padronizado Classe utilitária Tailwind aplicada em componentes interativos Preferências ampliadas PARCIAL Menu existe; adicionar alto contraste, fonte maior Salvar preferências em contexto; aplicar classes globais Aria-live para toasts críticos PENDENTE Leitura por leitores de tela Container

integrando com react-hot-toast Labels em ícones isolados PARCIAL Alguns ícones têm texto Verificar ícones solo; adicionar aria- label ou texto oculto Atalhos teclado (Command Palette) PENDENTE Abrir busca global (Ctrl+K) Modal com busca em pacientes, consultas, relatórios; mapear atalhos via hook Navegação teclado calendário PENDENTE Setas movem seleção; Enter abre modal Gerenciar estado de dia focado; listeners keydown Fonte acessível (modo dislexia) PENDENTE Alternar fonte custom Importar OpenDyslexic; toggle aplica classe root 4. Performance Item Status Descrição Como Vai Funcionar Code-splitting PainelMedico PENDENTE Arquivo muito grande fragmentado Rotas internas + lazy import via React.lazy/Suspense Cache com React Query PENDENTE Evita múltiplos fetch redundantes Reescrever chamadas service.list() em hooks useQuery Memo mapa pacientes PARCIAL Hoje recalcula Hook usePatientNames + cache por tempo Debounce em buscas PENDENTE Reduz requisições Hook useDebouncedValue aplicado em campos de filtro Prefetch próxima semana PENDENTE Navegação calendário suave Ao mudar mês/semana dispara fetch dos próximos dias

Page 3

PWA offline agenda PENDENTE Uso básico offline Service Worker + cache de assets + agenda do dia em IndexedDB Lazy-load avatar PARCIAL Carrega direto loading="lazy" + placeholder fallback Virtualização listas PENDENTE Melhor para grandes volumes react-window ou react-virtualized em tabelas extensas 5. Segurança & Conformidade Item Status Descrição Como Vai Funcionar Auditoria ações PENDENTE Log quem criou/editou/cancelou Middleware registra ação em tabela audit_log Renovação de sessão PARCIAL Autenticação básica Refresh token automático antes expiração; interceptador fetch Anonimização exportações PENDENTE Remover dados sensíveis Flag "modo externo" oculta CPF, email Validações robustas (CPF/CRM) PARCIAL Algumas máscaras Zod schemas + feedback inline Rate limiting login PENDENTE Mitigar brute force Backend contador tentativas + bloqueio temporário LGPD gestão consentimento PENDENTE Paciente solicita remoção/export Página solicita ação; backend fila processamento Assinatura digital consentimento PENDENTE Registro legal Checkbox + timestamp + hash assinatura no registro consulta Hash integridade relatórios PENDENTE Evita adulteração Calcular hash SHA256 conteúdo + armazenar junto ao registro 6. Fluxos Médicos / Consultas Item Status Descrição Como Vai Funcionar Check-in paciente PENDENTE Secretaria marca chegada Botão altera status para checked_in; notifica médico Sala de espera virtual PENDENTE Lista pacientes aguardando Painel ordenado por horário; atraso calculado em tempo real Automação atraso médico PENDENTE Sugere reorganizar agenda Se atraso médio > limiar, algoritmo propõe empurrar slots Tags e tipos consulta PARCIAL Campo tipo simples Lista padronizada (Retorno, Primeira, Teleconsulta); filtros

Page 4

Reagendamento inteligente PENDENTE Sugere melhor slot Busca slot livre mais próximo preservando espaçamentos Duração adaptativa PENDENTE Varia tempo conforme tipo Campo estimated_duration; impacto na geração de slots Pré-consulta formulário PENDENTE Dados antes da consulta Link enviado; dados salvos e exibidos como resumo Teleconsulta PENDENTE Consulta remota Botão "Iniciar Teleconsulta" abre sala vídeo (WebRTC / serviço externo) Encadeamento retorno PENDENTE Cria próxima consulta automaticamente Regra: tipos específicos geram retorno em X dias Gestão exceções (bloqueios) PARCIAL Existe ExceptionsManager Interface aprimorada para férias/manutenção com calendário visual 7. Funcionalidades Paciente Item Status Descrição Como Vai Funcionar Portal histórico PENDENTE Ver consultas, relatórios Página protegida com lista e filtros Notificações multicanal PENDENTE Email/SMS/push lembretes Serviço fila agendamento; integra API SMS Confirmação 1- clique PENDENTE Reduz no-show Link em email muda status para confirmed Lista de espera PENDENTE Preenche cancelamentos Pacientes optam; ao cancelar consulta procura candidato Preferências paciente PENDENTE Horários/médicos favoritos Armazenar em perfil e usar nas sugestões de slot Avaliação pós- consulta PENDENTE NPS + comentário Prompt após status completed; agrega em analytics 8. Funcionalidades Secretaria Item Status Descrição Como Vai Funcionar Painel conflitos PENDENTE Identifica choques de agenda Varre consultas por sobreposição de tempo/sala Operações em lote PENDENTE Alterar/cancelar várias Checkboxes + ações em massa com confirmação Mapa semanal multi- médico PENDENTE Visual global Grade com médicos colunas × horas linhas

Page 5

Filtro avançado PARCIAL Filtros básicos Combinação status, médico, tipo, atraso com query builder Exportar agenda CSV/PDF PENDENTE Compartilhamento externo Botão export gera arquivo com seleção de colunas 9. Relatórios & Analytics Item Status Descrição Como Vai Funcionar Dashboard KPIs PENDENTE Métricas principais Endpoint /analytics/summary; render cards + gráficos Curva demanda PENDENTE Tendência solicitações Gráfico linha pedidos vs capacidade (últimos 90 dias) Ranking motivos PENDENTE Motivos mais recorrentes Agrupamento por tag/motivo; gráfico barras No-show evolução PENDENTE Histórico mensal Série temporal + comparação mês anterior Análise sazonal PENDENTE Picos por época Agrupar por mês/semana do ano, heatmap Builder relatórios custom PENDENTE Personalizar campos UI drag & drop colunas; exportar JSON/PDF Previsão demanda PENDENTE Estimativa futura simples Média móvel + regressão linear leve para próximos 14 dias Heatmap especialidades PENDENTE Popularidade Matriz especialidade × volume consultas 10. Arquitetura & Código Item Status Descrição Como Vai Funcionar Modularizar PainelMedico PENDENTE Separar áreas Criar subcomponentes: DashboardSection, ConsultasSection, etc. Hooks especializados PENDENTE Reuso + cache useAppointments, useAvailability com React Query Tipos centralizados

Zod PARCIAL Schemas existem parcialmente Unificar em types/ + validação entrada serviços Erros padronizados PENDENTE Classe AppError Lançar com código e mapear para mensagem amigável Logs estruturados PARCIAL Console logs informais Wrapper logEvent(level, context); JSON em produção Constantes datas PARCIAL Arrays no componente Extrair para lib/date.ts

Page 6

Feature flags PENDENTE Ativar features gradualmente Objeto config vindo do backend ou .env 11. Automação & Inteligência Item Status Descrição Como Vai Funcionar Sugestão retorno PENDENTE Agenda retorno automático Regras por tipo; cria consulta futuro pendente confirmação Alertas condição paciente PENDENTE Avisa riscos Checa dados pré-consulta e mostra banner Autocomplete CID PENDENTE Código diagnóstico Campo search com índice local de códigos CID Alertas laudos atrasados PENDENTE Notifica drafts velhos Cron job verifica drafts > X dias Triagem inteligente PENDENTE Priorizar urgência Classificação simples por palavras-chave (ex: "dor aguda") 12. Engajamento & Diferenciais Item Status Descrição Como Vai Funcionar Gamificação médicos PENDENTE Badges desempenho Regras (pontualidade, zero no-show); cálculo semanal Selo paciente assíduo PENDENTE Reconhecimento Após N confirmações seguidas sem faltas Integração calendário externo PENDENTE Sincronizar Google/Outlook OAuth + push confirmadas para calendário do usuário Modo treinamento PENDENTE Sandbox para onboarding Flag ambiente usa dados fictícios segregados 13. Documentação & Conteúdo Item Status Descrição Como Vai Funcionar Central ajuda avançada PARCIAL Páginas básicas Indexação full-text + categorias + favoritos Tour guiado inicial PENDENTE Onboarding Biblioteca (react-joyride) passo a passo pós login primeiro Glossário paciente PENDENTE Explica termos Página com lista e busca local

Page 7

Monetização Item Status Descrição Como Vai Funcionar Plano lembretes avançados PENDENTE Add-on premium Verificação de plano antes de enviar SMS Teleconsulta (add-on) PENDENTE Serviço pago Ativado por flag de assinatura; registra tempo chamada Pagamento antecipado PENDENTE Cobrar antes Integração gateway; status pendente até pagamento Taxa no-show PENDENTE Penalização opcional Ao marcar no_show gera cobrança pré- configurada
Privacidade & Transparência Item Status Descrição Como Vai Funcionar Histórico de acessos PENDENTE Quem visualizou dados Tabela auditoria filtrada por paciente; UI dedicada Radar de permissões admin PENDENTE Visão roles Mapa matrix usuários × permissões
Qualidade Operacional Item Status Descrição Como Vai Funcionar Monitor SLA atendimento PENDENTE Tempo check-in -> início Medir intervalo e exibir média por dia Indicador relatórios pendentes PARCIAL Laudos existem Card com contagem drafts + link direto Detector sobrecarga agenda PENDENTE Sinaliza longas sequências sem pausa Algoritmo varre sequência > N sem intervalo >= M minutos
DIVISÃO DE EQUIPES E RESPONSABILIDADES Squad Composition (9 membros) Equipe 1 - UX/Design System (Trio) Alvaro (Lead) Gustavo Guilherme Equipe 2 - Performance & Arquitetura (Dupla) João Lopes (Lead)

Page 8

Bressan Equipe 3 - Features Médicas & Agendamento (Trio) Fernando (Lead) Peu Gabriel Cristiano Equipe 4 - Analytics & Relatórios (Dupla Reserve/Support) Membros rotativos das outras equipes conforme disponibilidade 18. DETALHAMENTO POR EQUIPE EQUIPE 1: UX/Design System (Alvaro, Gustavo, Guilherme) Responsabilidades Design tokens e sistema de cores Skeleton loaders e estados vazios Acessibilidade (atalhos, aria, focus) Componentes UI reutilizáveis Modo escuro consistente Tarefas Prioritárias Tarefa 1.1: Design Tokens & Cores Semânticas Status: PENDENTE Estimativa: 4h Descrição: Centralizar cores, tipografia e espaçamentos em sistema tokens reutilizável. Prompt para IA: Crie um sistema de design tokens para o MediConnect seguindo essas especificações:

Arquivo: src/styles/design-tokens.ts
Estrutura:
- Cores semânticas para status de consulta (requested, confirmed, completed, cancelled, no_show, checked_in, in_progress)
- Escala de tipografia modular (12, 14, 16, 20, 24, 32, 48)
- Escala de espaçamento (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px)
- Cores de tema (primary, secondary, success, warning, error, info)
- Breakpoints responsivos
Exportar como constantes TypeScript tipadas
Criar utility classes Tailwind customizadas em tailwind.config.js
Documentar uso em comentários JSDoc Contexto: Sistema de agendamento médico com múltiplos perfis (médico, paciente, secretaria). Stack: React + TypeScript + Tailwind CSS Tarefa 1.2: Skeleton Loaders Status: PENDENTE Estimativa: 6h Descrição: Componentes de placeholder animados para melhorar percepção de carregamento. Prompt para IA:

Page 9

Implemente sistema de skeleton loaders para o MediConnect:

Componente Base: src/components/ui/Skeleton.tsx
- Variantes: text, avatar, card, table, calendar
- Props: width, height, rounded, animated (pulse ou shimmer)
- Usar Tailwind para animação
Componentes Específicos:
- SkeletonAppointmentCard: Para lista de consultas
- SkeletonCalendar: Grade de calendário do médico
- SkeletonPatientList: Lista de pacientes (secretaria)
- SkeletonReportCard: Cards de relatórios
Integração:
- Substituir "Carregando..." em DoctorCalendar, PainelMedico, SecretaryAppointmentList
- Mostrar skeleton enquanto loading=true
Acessibilidade:
- aria-busy="true" e aria-label="Carregando conteúdo"
- role="status" Contexto: Listas e calendários carregam dados de Supabase; loading pode demorar 1-3s. Stack: React + TypeScript + Tailwind Tarefa 1.3: Empty States com CTA Status: PARCIAL Estimativa: 4h Descrição: Estados vazios consistentes com ícone, mensagem e ação principal. Prompt para IA: Crie componente EmptyState padronizado e aplique nas principais páginas:
Componente: src/components/ui/EmptyState.tsx Props:
- icon: LucideIcon
- title: string
- description: string
- actionLabel?: string
- onAction?: () => void
- variant: 'default' | 'info' | 'warning'
Casos de uso:
- Calendário sem consultas do dia
- Paciente sem histórico
- Nenhum relatório cadastrado
- Disponibilidade não configurada
- Sala de espera vazia
Aplicar em:
- DoctorCalendar (quando appointments.length === 0)
- PainelMedico seção relatórios
- SecretaryPatientList (filtros sem resultado)
- AvailableSlotsPicker (sem horários disponíveis)

Page 10

Design:
- Ícone centralizado (lucide-react)
- Título em text-lg font-semibold
- Descrição em text-sm text-gray-600
- Botão CTA primary Stack: React + TypeScript + Tailwind + Lucide icons Tarefa 1.4: Atalhos de Teclado & Command Palette Status: PENDENTE Estimativa: 8h Descrição: Navegação rápida via Ctrl+K e atalhos contextuais. Prompt para IA: Implemente Command Palette (estilo VSCode/Linear) para o MediConnect:
Hook: src/hooks/useCommandPalette.ts
- Detectar Ctrl+K / Cmd+K
- Gerenciar estado aberto/fechado
- Prevenir comportamento padrão do navegador
Componente: src/components/CommandPalette.tsx
- Modal com busca fuzzy
- Categorias: Pacientes, Consultas, Médicos, Relatórios, Navegação
- Navegar com setas ↑↓, Enter para confirmar, Esc para fechar
- Mostrar atalho de teclado ao lado de cada ação
Ações Disponíveis:
- "Nova Consulta" (N) - abre modal agendamento
- "Buscar Paciente" - autocomplete
- "Ir para Agenda" (G → A)
- "Ir para Perfil" (G → P)
- "Logout" (Shift+L)
Integração:
- Provider em App.tsx
- Listener global de teclado
- Busca indexada em pacientes e consultas (fuse.js ou similar)
Acessibilidade:
- role="dialog" aria-modal="true"
- Trap focus dentro do modal
- Anunciar resultados para screen readers Stack: React + TypeScript + Tailwind + Fuse.js (busca fuzzy) Referência: cmdk library ou implementação custom Tarefa 1.5: Modo Escuro Consistente Status: PARCIAL Estimativa: 6h Descrição: Auditoria e refinamento de contraste AA/AAA em todos os componentes. Prompt para IA:

Page 11

Audite e melhore o modo escuro do MediConnect:

Auditoria de Contraste:
- Usar ferramenta (ex: axe DevTools) para verificar AA/AAA
- Listar componentes com problemas de contraste
- Focar em: botões, badges de status, textos secundários, borders
Ajustes:
- Atualizar tokens de cores no design-tokens.ts
- Garantir contraste mínimo 4.5:1 para texto normal
- Garantir contraste mínimo 3:1 para texto grande e ícones
- Usar dark:bg-gray-800 dark:text-gray-100 consistentemente
Estados de Foco:
- Outline visível em dark mode (ex: ring-2 ring-offset-2 ring-blue-500)
- Aplicar em todos inputs, buttons, links
Componentes Prioritários:
- Header (todos os painéis)
- Formulários (AgendamentoConsulta, modais)
- Calendário (DoctorCalendar)
- Tabelas (listas de pacientes/consultas)
- Cards de métricas (quando implementar)
Testes:
- Verificar em Chrome DevTools (Rendering > Emulate CSS media)
- Testar com leitor de telas (NVDA/JAWS) Contexto: Projeto já usa Tailwind dark: variant, mas falta consistência. Stack: React + TypeScript + Tailwind CSS EQUIPE 2: Performance & Arquitetura (João Lopes, Bressan) Responsabilidades Code-splitting e lazy loading Cache com React Query Otimização de bundles Refatoração arquitetural PWA e Service Workers Tarefas Prioritárias Tarefa 2.1: Introduzir React Query (TanStack Query) Status: PENDENTE Estimativa: 12h Descrição: Substituir chamadas diretas de service por hooks com cache inteligente. Prompt para IA: Migre o sistema de fetching de dados para React Query no MediConnect:
Setup:
- Instalar @tanstack/react-query

Page 12

Criar QueryClientProvider em src/main.tsx
Configurar devtools (ReactQueryDevtools)
staleTime: 5 minutos, cacheTime: 10 minutos

Hooks Personalizados (src/hooks/): useAppointments.ts

- useAppointments(filters?: { doctor_id?, patient_id?, status? })
- useAppointment(id: string)
- useCreateAppointment()
- useUpdateAppointment()
- useCancelAppointment()

Invalidar queries relacionadas após mutations Optimistic updates para melhor UX usePatients.ts

usePatients()
usePatient(id: string)
usePatientNames() // retorna Map<id, nome> para lookups rápidos useAvailability.ts
useAvailability(doctorId: string)
useCreateAvailability()
useUpdateAvailability() useReports.ts
useReports(filters)
useReport(id)
useCreateReport()

Migrar Componentes: DoctorCalendar: usar useAppointments + usePatientNames PainelMedico: substituir loadConsultas por useAppointments SecretaryAppointmentList: idem AvailableSlotsPicker: usar useAvailability + useAppointments
Prefetching: Ao navegar calendário, prefetch próxima semana Ao abrir lista, prefetch primeiros 20 registros
Error Handling: Retry automático (3x com backoff exponencial) Fallback UI para erros Toast de erro integrado

Page 13

Contexto: Atualmente cada componente chama appointmentService.list() sem cache. Stack: React 18 + TypeScript + Supabase Referência: https://tanstack.com/query/latest/docs/react/overview

Tarefa 2.2: Code-Splitting PainelMedico

Status: PENDENTE Estimativa: 8h Descrição: Dividir arquivo gigante (2297 linhas) em módulos lazy-loaded. Prompt para IA: Refatore PainelMedico usando code-splitting e rotas internas:

Estrutura Nova: src/pages/painel-medico/ ├── index.tsx (Shell com tabs e Suspense) ├── DashboardTab.tsx ├── ConsultasTab.tsx ├── DisponibilidadeTab.tsx ├── RelatoriosTab.tsx ├── MensagensTab.tsx ├── PerfilTab.tsx └── components/ ├── ConsultasList.tsx ├── MetricsCards.tsx └── ProfileForm.tsx
Rotas Internas: /painel-medico/dashboard /painel-medico/consultas /painel-medico/disponibilidade /painel-medico/relatorios /painel-medico/mensagens /painel-medico/perfil
Lazy Loading: const DashboardTab = lazy(() => import('./DashboardTab')); const ConsultasTab = lazy(() => import('./ConsultasTab')); // etc.
Shell Component: Header fixo com nome médico e logout Tabs navigation Outlet para nested routes
State Management: Contexto PainelMedicoContext para compartilhar doctorId, user React Query para dados assíncronos Remover estados duplicados
Migração: Preservar funcionalidades existentes Manter compatibilidade com AuthContext Atualizar imports em App.tsx Contexto: Arquivo atual PainelMedico.tsx tem 2297 linhas e carrega tudo de uma vez. Stack: React Router v6 + React 18 Suspense + TypeScript

Page 14

Tarefa 2.3: PWA Básico com Offline

Status: PENDENTE Estimativa: 10h Descrição: Service Worker para cache de assets e agenda do dia offline. Prompt para IA: Transforme MediConnect em PWA com suporte offline básico:

Manifest (public/manifest.json): name: "MediConnect - Agendamento Médico" short_name: "MediConnect" icons: 192x192, 512x512 start_url: "/" display: "standalone" theme_color: cores do design system background_color: branco/escuro conforme tema
Service Worker (public/sw.js): Cache Strategy: Assets estáticos (CSS, JS, fonts): Cache First API calls: Network First com fallback para cache Imagens: Cache First com expiração 7 dias Offline Data: Armazenar agenda do dia atual em IndexedDB Sincronizar quando voltar online Mostrar banner "Você está offline" quando sem rede
Workbox Setup: Instalar vite-plugin-pwa Configurar em vite.config.ts Gerar service worker automaticamente Precache assets críticos
IndexedDB para Dados Offline: Biblioteca: idb (wrapper promises para IndexedDB) Stores: appointments, patients, availability Sync queue para mutations offline
UI Feedback: Indicador de status de rede (online/offline) no header Toast "Conteúdo salvo para acesso offline" Badge "Offline" em dados em cache
Update Prompt: Detectar nova versão do SW Mostrar toast "Nova versão disponível - Clique para atualizar"

Page 15

skipWaiting() e clients.claim() Contexto: Médicos podem precisar ver agenda em locais com sinal fraco. Stack: Vite + vite-plugin-pwa + Workbox + idb Referência: https://vite-pwa-org.netlify.app/

Tarefa 2.4: Otimização de Bundle

Status: PENDENTE Estimativa: 6h Descrição: Análise e redução do tamanho final do bundle. Prompt para IA: Otimize o bundle size do MediConnect:

Análise: Instalar rollup-plugin-visualizer Gerar relatório de bundle (npm run build -- --mode analyze) Identificar maiores dependências
Tree-shaking: Verificar imports nomeados vs default Substituir import * as por imports específicos Exemplo: import { format } from 'date-fns' ao invés de importar tudo
Dynamic Imports: Biblioteca pesada de gráficos (se adicionar): lazy load Modal components: carregar on-demand Componentes de relatórios PDF: lazy load
Substituições: Avaliar substituir date-fns por date-fns-tz apenas onde necessário Usar versão light de bibliotecas quando disponível Avaliar alternativas menores (ex: dayjs se date-fns muito grande)
Configuração Vite: build: { rollupOptions: { output: { manualChunks: { 'vendor-react': ['react', 'react-dom'], 'vendor-ui': ['lucide-react', 'react-hot-toast'], 'vendor-data': ['@supabase/supabase-js', '@tanstack/react-query'] } } }, chunkSizeWarningLimit: 600 }
Compressão:

Page 16

Habilitar gzip/brotli no Netlify Verificar headers de cache Meta: Bundle inicial < 200KB gzipped Stack: Vite + Rollup

EQUIPE 3: Features Médicas & Agendamento (Fernando, Peu Gabriel, Cristiano)

Responsabilidades

Check-in e sala de espera
Lista de espera inteligente
Reagendamento
Notificações e confirmações
Melhorias no fluxo de consulta

Tarefas Prioritárias

Tarefa 3.1: Check-in e Sala de Espera Virtual

Status: PENDENTE Estimativa: 12h Descrição: Secretaria marca chegada; médico vê fila em tempo real. Prompt para IA: Implemente sistema de Check-in e Sala de Espera para o MediConnect:

Backend (Supabase): Adicionar campo checked_in_at (timestamp nullable) na tabela appointments Criar função RPC check_in_patient(appointment_id) que: Atualiza status para 'checked_in' Registra checked_in_at com NOW() Retorna sucesso
Service Layer (src/services/appointments/): async checkIn(appointmentId: string): Promise async getWaitingRoom(doctorId: string): Promise<WaitingRoomItem[]> Interface WaitingRoomItem: appointmentId, patientName, scheduledTime checkedInAt, waitingMinutes (calculado) status, type
Componente Secretaria (src/components/secretaria/CheckInButton.tsx): Botão "Check-in" aparece em consultas com status 'confirmed' do dia atual Ao clicar: chamar checkIn() e atualizar lista Toast de sucesso Invalidar query do React Query
Painel Sala de Espera (src/components/consultas/WaitingRoom.tsx):

Page 17

Lista ordenada por horário agendado Card por paciente: Nome, horário agendado Badge com tempo de espera (ex: "Aguardando há 15 min") Indicador de atraso se ultrapassar horário + 10 min Auto-refresh a cada 30s (via React Query refetchInterval) Botão "Iniciar Atendimento" muda status para 'in_progress' 5. Integração PainelMedico: Nova tab "Sala de Espera" ou sidebar widget Contador badge com número de pacientes aguardando Som/notificação quando paciente faz check-in (opcional) 6. Real-time (Opcional para v2): Supabase Realtime subscription na tabela appointments Atualizar lista automaticamente sem polling Contexto: Evita que paciente espere sem médico saber que chegou. Stack: React + TypeScript + Supabase + React Query

Tarefa 3.2: Lista de Espera Inteligente

Status: PENDENTE Estimativa: 16h Descrição: Pacientes optam por preencher cancelamentos; algoritmo preenche automaticamente. Prompt para IA: Implemente sistema de Lista de Espera com preenchimento automático:

Backend (Supabase): Nova tabela waitlist : id (uuid PK) patient_id (uuid FK) doctor_id (uuid FK nullable - pode querer qualquer médico) preferred_dates (jsonb) - array de datas preferidas preferred_times (jsonb) - "morning" | "afternoon" | "evening" max_wait_days (int) - quantos dias no futuro aceita created_at, expires_at status: 'active' | 'fulfilled' | 'expired' Função RPC fill_cancelled_slot(appointment_id) : Busca waitlist candidates compatíveis Ordena por: data de inscrição (FIFO) Cria nova consulta com status 'pending_confirmation' Envia notificação ao paciente Marca waitlist como 'fulfilled'
Service Layer (src/services/waitlist/):

Page 18

async addToWaitlist(data: WaitlistInput): Promise async getWaitlistCandidates(appointmentId: string): Promise<Candidate[]> async assignSlot(waitlistId: string, appointmentId: string): Promise async removeFromWaitlist(waitlistId: string): Promise 3. UI Paciente (src/components/waitlist/JoinWaitlistModal.tsx): Formulário: Selecionar médico (ou "Qualquer médico") Datas preferidas (multi-select calendar) Horário preferencial (manhã/tarde/noite) Prazo máximo (ex: "até 7 dias") Mostrar estimativa de probabilidade (baseado em histórico de cancelamentos) Confirmar e adicionar à fila 4. UI Secretaria (src/components/secretaria/WaitlistManager.tsx): Ao cancelar consulta: mostrar modal "Há N pacientes na lista de espera para este horário" Lista com compatibilidade (score visual) Botão "Atribuir Horário" ao lado de cada candidato Modo manual: secretaria escolhe quem Modo automático: sistema escolhe o primeiro compatível 5. Algoritmo de Matching: Critérios de compatibilidade: Doctor match (se especificado) Data está em preferred_dates Horário está em preferred_times Não ultrapassou max_wait_days Score: 100 (match perfeito) a 0 6. Notificações: Email/SMS: "Uma vaga abriu! Confirme em 2 horas ou será oferecida ao próximo" Timeout: se não confirmar, oferecer ao próximo da fila Contexto: Reduzir slots vazios e dar oportunidade para pacientes urgentes. Stack: React + TypeScript + Supabase + React Query

Tarefa 3.3: Reagendamento Inteligente

Status: PENDENTE Estimativa: 10h Descrição: Sugerir melhor slot ao reagendar, evitando conflitos. Prompt para IA: Implemente sistema de Reagendamento Inteligente:

Service (src/services/appointments/reschedule.ts):

Page 19

async getSuggestedSlots(input: { appointmentId: string, doctorId: string, preferredDates?: string[], // YYYY-MM-DD preferredTimes?: ('morning' | 'afternoon')[], minDaysFromNow?: number }): Promise<SuggestedSlot[]> Interface SuggestedSlot: date: string time: string score: number (0-100) reasons: string[] (ex: ["Sem conflitos", "Horário preferencial"]) conflicts?: Conflict[] 2. Algoritmo de Sugestão: Buscar disponibilidade do médico (próximos 30 dias) Gerar todos os slots disponíveis Filtrar: Já ocupados Fora de preferred_dates/times (se especificado) Muito próximos (< minDaysFromNow) Calcular score: +30: está em preferred_dates +20: está em preferred_times +15: não tem consultas adjacentes (médico tem respiro) +10: mesmo dia da semana que original +5: mesma hora que original Ordenar por score DESC Retornar top 10 3. Componente Modal (src/components/consultas/RescheduleModal.tsx): Props: appointment (dados atuais) Mostrar: Data/hora atual Campo busca de nova data (calendar picker) Lista de slots sugeridos (cards) Badge com score visual (cores: verde alto, amarelo médio) Botão "Selecionar" Ao confirmar: Atualizar appointment.scheduled_at Notificar paciente da mudança Toast de sucesso 4. Validações: Não permitir reagendar para horário passado Verificar conflitos em tempo real antes de salvar

Page 20

Confirmar via dialog se slot tem score < 50 5. Integrações: Botão "Reagendar" em: Lista de consultas (PainelMedico) Detalhes da consulta (modal) Painel secretaria Log de auditoria: registrar quem reagendou e quando Contexto: Facilitar reorganização de agenda sem conflitos. Stack: React + TypeScript + Supabase + date-fns

Tarefa 3.4: Confirmação de Consulta 1-Clique

Status: PENDENTE Estimativa: 8h Descrição: Link em email/SMS para paciente confirmar presença. Prompt para IA: Implemente sistema de Confirmação 1-Clique via email/SMS:

Backend (Supabase Functions ou Netlify): Endpoint: POST /api/appointments/:id/confirm Validar token de confirmação (JWT ou hash) Atualizar status para 'confirmed' Registrar confirmed_at timestamp Retornar página de sucesso
Geração de Token: Service (src/services/appointments/confirmation.ts): async generateConfirmationToken(appointmentId: string): Promise async sendConfirmationRequest(appointmentId: string): Promise Token: JWT com payload { appointmentId, exp: 7 dias } OU hash seguro: SHA256(appointmentId + secret + expiry)
Template de Email/SMS: Email: Olá {paciente}, Sua consulta com Dr(a). {medico} está agendada para: 📅 {data} às {hora} 📍 {local} Por favor confirme sua presença clicando no link abaixo: [CONFIRMAR PRESENÇA] (botão verde grande) Link: https://mediconnectbrasil.app/confirmar/{token} Caso não possa comparecer, por favor reagende ou cancele com antecedência. SMS:

Page 21

MediConnect: Consulta {data} {hora} com Dr. {medico}. Confirme: {link_curto} 4. Landing Page (src/pages/ConfirmarConsulta.tsx): Route: /confirmar/:token Ao carregar: Validar token Buscar dados da consulta Mostrar resumo (médico, data, hora) Botão "Confirmar Presença" Após confirmar: Animação de sucesso ✅ Opção de adicionar ao calendário (Google/Apple) Botão "Ver Meus Agendamentos" 5. Automação de Envio: Cron job ou agendamento: 7 dias antes: lembrete inicial 24 horas antes: lembrete urgente + link confirmação Integração com serviço SMS (Twilio, Zenvia, etc.) Fallback: se SMS falhar, enviar apenas email 6. Métricas: Rastrear taxa de confirmação Dashboard admin: % confirmados vs não confirmados Enviar lembrete adicional se não confirmar em 48h Contexto: Reduzir no-show de ~30% para <10%. Stack: React + TypeScript + Supabase Functions + Twilio/Zenvia

EQUIPE 4 (ROTATIVA): Analytics & Relatórios

Responsabilidades

Dashboard de métricas
Gráficos de ocupação
Relatórios customizáveis
Exportações CSV/PDF

Tarefas Prioritárias

Tarefa 4.1: Dashboard KPIs

Status: PENDENTE Estimativa: 12h Descrição: Cards de métricas principais com gráficos simples. Prompt para IA: Crie Dashboard de KPIs para o PainelMedico:

Endpoint Analytics (Backend): Supabase Function ou View: get_doctor_metrics Retorna:

Page 22

{ today: { total_appointments: number, confirmed: number, completed: number, no_show: number, waiting: number }, week: { total: number, occupancy_rate: number, // % slots preenchidos avg_duration_minutes: number, no_show_rate: number }, month: { total: number, trend: 'up' | 'down' | 'stable', // vs mês anterior trend_percentage: number }, top_reasons: Array<{ reason: string, count: number }> } 2. Service (src/services/analytics/): async getDoctorMetrics(doctorId: string): Promise 3. Componentes UI (src/components/dashboard/): MetricCard.tsx: Props: title, value, change (±%), icon, trend ('up'|'down'|'neutral') Design: Card branco, ícone colorido, valor grande, delta pequeno Exemplo: "Consultas Hoje: 12 | +3 vs ontem" OccupancyChart.tsx: Gráfico de barras simples (últimos 7 dias) Eixo Y: % ocupação (0-100%) Eixo X: dias da semana Usar biblioteca leve: recharts ou chart.js NoShowTrend.tsx: Linha temporal de no-show % (últimos 3 meses) Destacar pico e vale 4. Layout DashboardTab.tsx: +----------------+----------------+----------------+ | Consultas Hoje | Taxa Ocupação | No-Show Taxa | | 12 | 78% | 8% | +----------------+----------------+----------------+ | Tempo Médio | Retornos | Novos |

Page 23

| 45 min | 8 | 4 | +----------------+----------------+----------------+ | Gráfico Ocupação Semanal | +--------------------------------------------------+ | Top 5 Motivos de Consulta | +--------------------------------------------------+ 5. Atualização: Refetch automático a cada 5 minutos (React Query) Botão manual "Atualizar" Skeleton durante loading 6. Responsivo: Mobile: cards empilhados verticalmente Desktop: grid 3 colunas Stack: React + TypeScript + React Query + Recharts Referência design: Linear, Notion Analytics

Tarefa 4.2: Heatmap de Ocupação

Status: PENDENTE Estimativa: 10h Descrição: Matriz visual de densidade de consultas (dias × horas). Prompt para IA: Implemente Heatmap de Ocupação para visualizar padrões de agenda:

Cálculo de Densidade: Service (src/services/analytics/heatmap.ts): async getOccupancyHeatmap(doctorId: string, startDate: string, endDate: string): Promise HeatmapData: { days: string[], // ['2025-11-21', '2025-11-22', ...] hours: number[], // [8, 9, 10, ..., 18] matrix: number[][] // [dia][hora] = densidade 0-100 } Algoritmo: Para cada dia no range: Para cada hora (8h-18h): Contar slots totais (baseado availability) Contar slots ocupados (appointments) Densidade = (ocupados / totais) * 100
Componente (src/components/analytics/OccupancyHeatmap.tsx):

Page 24

Renderização: Grid CSS ou SVG Linhas = dias (últimos 30 dias ou semana selecionada) Colunas = horas (8h-18h) Células coloridas por densidade: 0-25%: verde claro 26-50%: amarelo 51-75%: laranja 76-100%: vermelho Interatividade: Hover: tooltip mostra "70% ocupação | 7/10 slots" Click: filtrar consultas daquele dia/hora 3. Filtros: Período: última semana, último mês, customizado Tipo de consulta: todas, presencial, teleconsulta Status: incluir/excluir canceladas 4. Insights Automáticos: Badge: "Pico às quartas-feiras 14h-16h" Sugestão: "Considere adicionar horários às segundas de manhã (baixa ocupação)" 5. Exportar: Botão "Exportar PNG" (html2canvas) CSV dos dados brutos Stack: React + TypeScript + D3.js (ou CSS Grid simples) + Tailwind

19. Quick Wins Priorizados (Primeira Sprint)

Skeleton loaders (Equipe 1 - 6h)
Design Tokens (Equipe 1 - 4h)
Empty states com CTA (Equipe 1 - 4h)
React Query setup (Equipe 2 - 8h - fundação para demais)
Check-in básico (Equipe 3 - 6h - versão simples sem real-time) Total Sprint 1: ~28h de trabalho distribuído

20. Roadmap por Fase Detalhado

Fase 1: Quick Wins (Sprint 1 - 1 semana)

Objetivo: Melhorias visuais e fundação técnica

Tarefa	Equipe	Esforço	Impacto
Design Tokens	Equipe 1	4h	Alto - base para todo sistema
Skeleton Loaders	Equipe 1	6h	Alto - UX imediata

Page 25

Sistema de design consistente
Loading states profissionais
Cache inteligente funcionando
Secretaria pode fazer check-in

Fase 2: Features Core (Sprints 2-3 - 2 semanas)

Objetivo: Funcionalidades que reduzem no-show e melhoram operação

Tarefa	Equipe	Esforço	Impacto
Sala de Espera Virtual	Equipe 3	12h	Alto
Lista de Espera	Equipe 3	16h	Muito Alto
Confirmação 1-Clique	Equipe 3	8h	Muito Alto
Command Palette	Equipe 1	8h	Médio
Code-Splitting PainelMedico	Equipe 2	8h	Médio
Dashboard KPIs	Equipe 4	12h	Alto
Entregas:

Fluxo check-in completo
Sistema de lista de espera funcional
Confirmações automáticas reduzindo no-show
Navegação rápida por teclado
Performance melhorada

Fase 3: Analytics & Otimização (Sprint 4 - 1 semana)

Objetivo: Inteligência de dados e otimização

Tarefa	Equipe	Esforço	Impacto
Heatmap Ocupação	Equipe 4	10h	Médio
Reagendamento Inteligente	Equipe 3	10h	Alto
PWA Básico	Equipe 2	10h	Médio
Modo Escuro Auditoria	Equipe 1	6h	Médio
Entregas:

Visualizações analíticas
Sugestões inteligentes de horários
App instalável e offline
Acessibilidade AAA

Fase 4: Diferenciais (Futuro/Opcional)

Teleconsulta integrada
Previsão de demanda com ML
Auditoria completa LGPD

Page 26

Integração calendários externos
Sistema de pagamentos

21. Prompts Adicionais por Categoria

PROMPTS DE INTEGRAÇÃO

Integração Twilio para SMS

Configure integração Twilio para envio de SMS no MediConnect:

Setup: Criar conta Twilio (trial ou production) Obter Account SID e Auth Token Adicionar variáveis ambiente (.env): TWILIO_ACCOUNT_SID=xxx TWILIO_AUTH_TOKEN=xxx TWILIO_PHONE_NUMBER=+5511xxxxx
Service (src/services/sms/twilioService.ts): import twilio from 'twilio'; const client = twilio( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN ); export async function sendSMS(to: string, message: string): Promise { await client.messages.create({ body: message, from: process.env.TWILIO_PHONE_NUMBER, to: formatPhoneNumber(to) // +55 11 99999-9999 -> +5511999999999 }); } export async function sendAppointmentReminder(appointment: Appointment) { const message = MediConnect: Lembrete consulta ${formatDate(appointment.scheduled_at)} com Dr. ${appointment.doctor_name}. Confirme: ${getConfirmationLink(appointment.id)}; await sendSMS(appointment.patient_phone, message); }
Netlify Function (netlify/functions/send-sms.ts): Endpoint seguro para envio Validar API key interna Rate limiting
Agendamento: Usar Netlify Scheduled Functions ou cron job Função roda diariamente às 8h

Page 27

Busca consultas das próximas 24h Envia SMS para cada paciente Stack: Twilio SDK + Netlify Functions + Supabase

Real-time com Supabase

Implemente atualizações em tempo real para sala de espera:

Setup Subscription (src/hooks/useRealtimeAppointments.ts): import { useEffect } from 'react'; import { supabase } from '../lib/supabase'; import { useQueryClient } from '@tanstack/react-query'; export function useRealtimeAppointments(doctorId: string) { const queryClient = useQueryClient(); useEffect(() => { const channel = supabase .channel('appointments-changes') .on( 'postgres_changes', { event: '*', // INSERT, UPDATE, DELETE schema: 'public', table: 'appointments', filter: doctor_id=eq.${doctorId} }, (payload) => { console.log('Real-time update:', payload); // Invalidar queries relevantes queryClient.invalidateQueries(['appointments', doctorId]); queryClient.invalidateQueries(['waitingRoom', doctorId]); } ) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [doctorId, queryClient]); }
Usar no componente: function WaitingRoom({ doctorId }) { const { data: patients } = useWaitingRoom(doctorId); useRealtimeAppointments(doctorId); // auto-update

Page 28

return (...); } 3. Policies Supabase: Habilitar realtime na tabela appointments Row Level Security para filtrar apenas consultas autorizadas Stack: Supabase Realtime + React Query

PROMPTS DE TESTES

Testes Unitários com Vitest

Configure ambiente de testes e crie testes para componentes críticos:

Setup: Instalar: vitest, @testing-library/react, @testing-library/user-event, jsdom Configurar vitest.config.ts: import { defineConfig } from 'vitest/config'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], test: { environment: 'jsdom', globals: true, setupFiles: './src/test/setup.ts' } });
Helpers (src/test/setup.ts): import '@testing-library/jest-dom'; import { cleanup } from '@testing-library/react'; import { afterEach } from 'vitest'; afterEach(() => { cleanup(); });
Testes Prioritários: AvailableSlotsPicker.test.tsx: import { render, screen, waitFor } from '@testing-library/react'; import { AvailableSlotsPicker } from './AvailableSlotsPicker'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Page 29

const queryClient = new QueryClient(); test('mostra skeleton durante loading', () => { render( ); expect(screen.getByText(/carregando/i)).toBeInTheDocument(); }); test('mostra slots disponíveis após carregar', async () => { // Mock do service vi.mock('../../services', () => ({ availabilityService: { list: vi.fn().mockResolvedValue([ { weekday: 4, start_time: '09:00', end_time: '12:00', slot_minutes: 30 } ]) }, appointmentService: { list: vi.fn().mockResolvedValue([]) } })); render(...); await waitFor(() => { expect(screen.getByText('09:00')).toBeInTheDocument(); expect(screen.getByText('09:30')).toBeInTheDocument(); }); }); useAppointments.test.ts: Testar hook isoladamente Mock Supabase client Verificar cache e invalidation 4. Coverage: Meta: > 70% nos componentes críticos Command: vitest --coverage Stack: Vitest + Testing Library + MSW (mock API)

PROMPTS DE SEGURANÇA

Auditoria de Ações

Implemente sistema de auditoria (audit trail) para ações sensíveis:

Page 30

Tabela (Supabase): CREATE TABLE audit_logs ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID REFERENCES auth.users(id), action VARCHAR(100) NOT NULL, -- 'create_appointment', 'cancel_appointment', etc. resource_type VARCHAR(50), -- 'appointment', 'patient', 'report' resource_id UUID, details JSONB, -- dados antes/depois ip_address INET, user_agent TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); CREATE INDEX idx_audit_user ON audit_logs(user_id); CREATE INDEX idx_audit_resource ON audit_logs(resource_type, resource_id); CREATE INDEX idx_audit_created ON audit_logs(created_at DESC);
Service (src/services/audit/auditService.ts): interface AuditLogInput { action: string; resourceType: string; resourceId: string; details?: Record<string, any>; } export async function logAction(input: AuditLogInput): Promise { const { data: { user } } = await supabase.auth.getUser();

await supabase.from('audit_logs').insert({ user_id: user?.id, action: input.action, resource_type: input.resourceType, resource_id: input.resourceId, details: input.details, ip_address: await getClientIP(), // helper function user_agent: navigator.userAgent }); } // Wrapper para ações críticas export async function auditedAction( action: string, resourceType: string, resourceId: string, fn: () => Promise ): Promise { const before = await getResourceState(resourceType, resourceId); const result = await fn(); const after = await getResourceState(resourceType, resourceId);

Page 31

await logAction({ action, resourceType, resourceId, details: { before, after } }); return result; } 3. Integração: // Antes: await appointmentService.cancel(id); // Depois: await auditedAction( 'cancel_appointment', 'appointment', id, () => appointmentService.cancel(id) ); 4. Visualização Admin (src/pages/AuditLogs.tsx): Tabela filtrada por usuário, ação, data Diff visual de before/after Exportar CSV 5. Ações Auditadas: create/update/delete appointment cancel_appointment check_in_patient create/update/delete report access_patient_data (LGPD) Stack: Supabase + PostgreSQL JSONB

22. Checklist de Qualidade Pré-Entrega

Equipe 1 (UX/Design)

Todos os estados de loading têm skeleton
Todos os estados vazios têm mensagem + CTA
Contraste AAA em textos principais
Focus visible em todos os elementos interativos
Modo escuro consistente em todas as páginas
Responsivo testado em mobile/tablet/desktop
Atalhos de teclado documentados

Page 32

Equipe 2 (Performance)

Bundle size < 200KB gzipped
Lighthouse Performance > 90
Lighthouse Accessibility > 95
Nenhum console.error em produção
React Query configurado em todos os fetches
Code-splitting em rotas principais
Service Worker registrado e funcional

Equipe 3 (Features)

Check-in funcionando sem bugs
Lista de espera preenchendo cancelamentos
Confirmação por email funcionando
Reagendamento sugerindo horários válidos
Notificações sendo enviadas 24h antes
Validações em todos os formulários
Mensagens de erro amigáveis

Equipe 4 (Analytics)

Dashboard carregando métricas reais
Gráficos renderizando corretamente
Heatmap mostrando densidade real
Exportações CSV funcionando
Dados atualizando em tempo real
Filtros aplicando corretamente

Geral

Nenhum erro TypeScript
Nenhum warning ESLint crítico
README.md atualizado com setup
Variáveis ambiente documentadas (.env.example)
Deploy em staging funcionando
Testes críticos passando
Supabase RLS policies revisadas

23. Distribuição de Horas por Equipe

Equipe	Fase 1	Fase 2	Fase 3	Total
Equipe 1 (UX)	14h	14h	6h	34h
Equipe 2 (Perf)	8h	8h	20h	36h
Equipe 3 (Features)	6h	36h	10h	52h
Equipe 4 (Analytics)	-	12h	10h	22h
Total Projeto: 144h (aprox. 3-4 semanas com squad de 9 pessoas)

24. Comunicação e Sincronização

Daily Standups (15 min)

Cada equipe reporta: ontem, hoje, bloqueios

Page 33

Identificar dependências entre equipes
Resolver impedimentos rapidamente

Revisões de Código

Pull requests obrigatórios
Mínimo 1 aprovação de outro membro
Checklist de qualidade antes de merge
Convenção de commits: feat:, fix:, refactor:, test:

Integração Contínua

Branch: main (produção), develop (staging)
Feature branches: feature/nome-tarefa
Deploys automáticos em staging para PRs
Deploy manual para produção após QA

Documentação

Cada feature documentada em docs/features/
Prompts usados salvos para referência
Decisões técnicas em docs/adr/ (Architecture Decision Records)

25. Dependências Técnicas Detalhadas

Biblioteca	Versão	Uso	Comando Instalação
@tanstack/react-query	^5.0.0	Cache e sincronização dados	`npm install @tanstack/react-
query`
@tanstack/react-query-devtools	^5.0.0	Debug React Query	`npm install -D
@tanstack/react-query-devtools`
@dnd-kit/core	^6.0.0	Drag & drop consultas	`npm install @dnd-kit/core @dnd-
kit/sortable`
react-window	^1.8.10	Virtualização listas	`npm install react-window`
@types/react-window	^1.8.8	Types React Window	`npm install -D @types/react-window`
react-joyride	^2.7.0	Tour guiado	`npm install react-joyride`
fuse.js	^7.0.0	Busca fuzzy (Command Palette)	`npm install fuse.js`
vite-plugin-pwa	^0.20.0	PWA e Service Worker	`npm install -D vite-plugin-pwa`
workbox-window	^7.0.0	Workbox runtime	`npm install workbox-window`
idb	^8.0.0	IndexedDB wrapper	`npm install idb`
recharts	^2.12.0	Gráficos simples	`npm install recharts`
twilio	^5.0.0	SMS (backend)	`npm install twilio`
rollup-plugin-visualizer	^5.12.0	Análise bundle	`npm install -D rollup-plugin-
visualizer`
vitest	^2.0.0	Testes unitários	`npm install -D vitest`
@testing-library/react	^16.0.0	Testes componentes	`npm install -D @testing-
library/react`
@testing-library/user-event	^14.5.0	Simulação interações	`npm install -D @testing-
library/user-event`
jsdom	^25.0.0	DOM para testes	`npm install -D jsdom`

26. Estrutura de Pastas Proposta Pós-Refatoração

Page 34

src/ ├── components/ │ ├── ui/ # Componentes base reutilizáveis │ │ ├── Skeleton.tsx │ │ ├── EmptyState.tsx │ │ ├── Button.tsx │ │ ├── Input.tsx │ │ ├── Modal.tsx │ │ └── Badge.tsx │ ├── dashboard/ # Componentes de dashboard │ │ ├── MetricCard.tsx │ │ ├── OccupancyChart.tsx │ │ └── NoShowTrend.tsx │ ├── consultas/ # Features de consultas │ │ ├── ConsultaModal.tsx │ │ ├── WaitingRoom.tsx │ │ ├── RescheduleModal.tsx │ │ └── CheckInButton.tsx │ ├── waitlist/ # Lista de espera │ │ ├── JoinWaitlistModal.tsx │ │ └── WaitlistManager.tsx │ ├── analytics/ # Analytics e relatórios │ │ ├── OccupancyHeatmap.tsx │ │ └── CustomReportBuilder.tsx │ └── CommandPalette.tsx # Busca global ├── hooks/ │ ├── useAppointments.ts # React Query hooks │ ├── usePatients.ts │ ├── useAvailability.ts │ ├── useReports.ts │ ├── useWaitingRoom.ts │ ├── useRealtimeAppointments.ts │ ├── useCommandPalette.ts │ └── useDebounce.ts ├── services/ │ ├── appointments/ │ │ ├── types.ts │ │ ├── appointmentService.ts │ │ ├── reschedule.ts │ │ └── confirmation.ts │ ├── waitlist/ │ │ └── waitlistService.ts │ ├── analytics/ │ │ ├── metricsService.ts │ │ └── heatmapService.ts │ ├── audit/ │ │ └── auditService.ts │ └── sms/ │ └── twilioService.ts ├── pages/ │ ├── painel-medico/ # Modularizado │ │ ├── index.tsx │ │ ├── DashboardTab.tsx │ │ ├── ConsultasTab.tsx │ │ ├── DisponibilidadeTab.tsx │ │ ├── RelatoriosTab.tsx │ │ └── PerfilTab.tsx │ ├── ConfirmarConsulta.tsx # Landing page confirmação │ └── AuditLogs.tsx # Admin audit trail ├── styles/ │ ├── design-tokens.ts # Sistema de design │ └── design-system.css ├── lib/ │ ├── supabase.ts │ ├── queryClient.ts # Config React Query │ └── date.ts # Helpers de data └── test/ ├── setup.ts ├── mocks/ └── fixtures/

27. Exemplo de Prompt Completo (Template)

Template Genérico para Novas Features

CONTEXTO: Sistema de agendamento médico multi-perfil (médico, paciente, secretaria, admin). Stack: React 18 + TypeScript + Tailwind CSS + Supabase + React Query Arquitetura: Services layer + React Query hooks + Componentes funcionais OBJETIVO: [Descrever feature claramente em 1-2 frases] REQUISITOS FUNCIONAIS:

[Requisito 1]
[Requisito 2]
[Requisito 3] REQUISITOS NÃO-FUNCIONAIS: Performance: [ex: carregar em < 2s] Acessibilidade: [ex: WCAG AA] Responsivo: mobile-first TypeScript: tipagem estrita, sem 'any' ESPECIFICAÇÃO TÉCNICA:
BACKEND (se aplicável): Tabela/Função Supabase: [SQL schema ou RPC function]
SERVICE LAYER: Arquivo: src/services/[categoria]/[nome].ts [Interfaces e funções principais]

Page 35

REACT QUERY HOOK: Arquivo: src/hooks/use[Nome].ts [Hook signature e config]
COMPONENTE UI: Arquivo: src/components/[categoria]/[Nome].tsx Props: [prop1]: [tipo] - [descrição] [prop2]: [tipo] - [descrição] Comportamento: [Behavior 1] [Behavior 2]
INTEGRAÇÃO: Onde usar: [páginas/componentes] Dependências: [outros componentes/hooks] Side effects: [invalidações, notificações]
TESTES: Casos de teste prioritários: [Test case 1] [Test case 2]
ACESSIBILIDADE: [Requisitos aria-*] [Navegação por teclado] [Anúncios para screen readers] DESIGN: Referência visual: [link Figma ou descrição] Cores: usar tokens de design-tokens.ts Ícones: lucide-react VALIDAÇÕES: [Validação 1] [Validação 2] MENSAGENS DE ERRO: [Cenário erro 1]: "[Mensagem amigável]" [Cenário erro 2]: "[Mensagem amigável]" CRITÉRIOS DE ACEITAÇÃO: [Critério 1] [Critério 2] [Critério 3] TypeScript compila sem erros Acessível via teclado Responsivo mobile/desktop

Page 36

Loading states implementados

28. Riscos e Mitigações Detalhados

Risco	Probabilidade	Impacto	Mitigação	Responsável
Complexidade Teleconsulta muito alta	Alta	Alto	Usar serviço terceiro (Whereby,
Daily.co) primeiro	Equipe 3 + Tech Lead
Performance degradar com muitos dados	Média	Alto	Virtualização + paginação + índices
DB	Equipe 2
Atraso em integrações SMS	Média	Médio	Começar cedo; ter fallback email-only	Equipe 3

Baixa adoção lista de espera	Alta	Médio	UX clara + comunicação ativa + incentivos
Equipe 3 + Product
Conflitos merge entre equipes	Média	Médio	PRs pequenos + comunicação diária + code
reviews	Todos
Supabase rate limits	Baixa	Alto	Monitorar uso + cache agressivo + plano adequado
Equipe 2 + DevOps
Falta de tempo para testes	Alta	Alto	Priorizar testes críticos + automated CI	Todos

Scope creep (adicionar features demais)	Alta	Alto	Focar em quick wins Fase 1; resto é
bonus	Product Owner

29. Métricas de Sucesso Detalhadas

Métricas Técnicas

Métrica	Baseline Atual	Meta Fase 1	Meta Fase 3
Lighthouse Performance	~70	> 85	> 90
Lighthouse Accessibility	~80	> 90	> 95
Bundle Size (gzipped)	~300KB	< 250KB	< 200KB
Time to Interactive (TTI)	~4s	< 3s	< 2s
First Contentful Paint (FCP)	~2s	< 1.5s	< 1s
Cumulative Layout Shift (CLS)	N/A	< 0.1	< 0.05

Métricas de Produto

Métrica	Baseline	Meta 1 Mês	Meta 3 Meses
Taxa No-show	~30%	< 20%	< 10%
Taxa Confirmação (1-clique)	0%	> 60%	> 80%
Tempo médio agendamento	~5 min	< 3 min	< 2 min
Slots vazios por cancelamento	~80%	< 50%	< 20%
Satisfação médico (NPS)	N/A	> 7	> 8
Satisfação paciente (NPS)	N/A	> 7	> 8
Uso Command Palette	0%	> 20% usuários	> 40%
Uso App Offline (PWA)	0%	> 10%	> 25%

Page 37

30. Próximos Passos Imediatos (Semana 1)

Segunda-feira

Kickoff squad completo (1h)
Alinhar visão e prioridades
Distribuir equipes e tarefas
Setup ambientes de desenvolvimento
Equipe 1: Começar Design Tokens
Equipe 2: Setup React Query

Terça-feira

Equipe 1: Implementar Skeleton loaders
Equipe 2: Migrar primeiro hook (useAppointments)
Equipe 3: Design da tela Check-in
Daily standup

Quarta-feira

Equipe 1: Empty States
Equipe 2: Code-splitting inicial
Equipe 3: Backend Check-in (Supabase)
Primeira revisão de código
Daily standup

Quinta-feira

Equipe 1: Iniciar Command Palette
Equipe 2: Testes de performance
Equipe 3: UI Check-in
Integração contínua
Daily standup

Sexta-feira

Finalizar Quick Wins Sprint 1
Code freeze 14h
QA e testes integrados
Deploy staging
Retrospectiva (1h)
Planejamento Sprint 2

31. Glossário Técnico

Termo	Definição
Code-splitting	Técnica de dividir bundle JavaScript em chunks menores carregados sob
demanda
Skeleton Loader	Placeholder animado que simula estrutura do conteúdo durante
carregamento
Empty State	Interface exibida quando não há dados para mostrar
Design Tokens	Valores centralizados (cores, espaçamentos, fontes) usados
consistentemente
React Query	Biblioteca para cache, sincronização e gerenciamento de estado server
PWA	Progressive Web App - app web com capacidades offline e instalável

Page 38

| Service Worker | Script que roda em background para cache e funcionalidades offline | | Heatmap | Visualização de densidade de dados usando escala de cores | | Fuzzy Search | Busca que tolera erros de digitação e aproxima resultados | | Optimistic Update | Atualizar UI antes da confirmação do servidor para melhor UX | | Prefetch | Carregar dados antecipadamente antes do usuário solicitar | | Tree-shaking | Remover código não usado do bundle final | | Bundle Size | Tamanho total do JavaScript/CSS enviado ao navegador | | Lazy Loading | Carregar recursos apenas quando necessários | | Debounce | Atrasar execução de função até usuário parar de digitar | | WCAG | Web Content Accessibility Guidelines - padrão de acessibilidade | | ARIA | Accessible Rich Internet Applications - atributos para acessibilidade | | RLS | Row Level Security - segurança a nível de linha no Supabase | | Audit Trail | Registro completo de ações para conformidade e segurança |

32. FAQs para o Squad

Q: Por que React Query ao invés de Redux? A: React Query é especializado em estado server (dados de API), elimina boilerplate, cache automático e sincronização. Redux é mais adequado para estado cliente complexo, que não é nosso caso principal. Q: Preciso saber todos os prompts de cor? A: Não. Use como referência e adapte conforme necessário. Copie, cole na IA e ajuste detalhes específicos. Q: E se minha equipe terminar antes? A: Ajude outras equipes, faça code review, ou comece tarefas da próxima fase. Comunicar no daily. Q: Posso usar biblioteca diferente da sugerida? A: Sim, desde que justifique tecnicamente e não quebre integrações. Discutir com squad primeiro. Q: Como testar integrações Supabase localmente? A: Use Supabase local dev (`supabase start`) ou aponte para projeto de staging. Nunca testar direto em produção. Q: Onde colocar variáveis sensíveis (API keys)? A: Arquivo `.env.local` (nunca commitar). Para produção, usar Netlify Environment Variables. Q: Como resolver conflitos de merge? A: Comunicação proativa, PRs pequenos e frequentes, rebase regular da branch develop. Pedir ajuda se necessário. Q: Testes são obrigatórios? A: Testes unitários para lógica crítica (hooks, services) são altamente recomendados. E2E opcional mas valorizado.

33. Recursos de Referência

Page 39

Documentação Oficial

Inspiração de Design

Linear - Dashboard limpo e rápido
Notion - UX intuitiva
Cal.com - Agendamento moderno
Vercel Dashboard - Métricas claras

Ferramentas Úteis

Lighthouse - Auditoria performance
axe DevTools - Auditoria acessibilidade
Bundle Analyzer - Análise bundle
React DevTools - Debug React
Supabase Studio - Admin DB

34. Observações Finais

Para o Product Owner

Este roadmap é ambicioso mas realista. Priorize Fase 1 e 2 para entrega com máximo impacto. Fase 3 e 4 são diferenciais que podem ser negociados conforme tempo.

Para Tech Lead

Monitore integrações entre equipes. Equipe 2 (Performance) desbloqueia outras com React Query. Code reviews são críticos para manter qualidade.

Para o Squad

Trabalhem com autonomia mas comuniquem cedo e frequentemente. Use os prompts como ponto de partida, não receita definitiva. Adaptem conforme aprendem.

Sobre Prompts de IA

Os prompts fornecidos são detalhados para reduzir ambiguidade. Ao usar com IA (ChatGPT, Claude, Copilot):

Copie prompt completo
Adicione contexto específico do arquivo que está editando
Revise código gerado antes de aceitar
Ajuste para seguir padrões do projeto
Teste localmente antes de commitar

35. Celebração e Reconhecimento

Marcos para Comemorar

✅ Primeira feature em produção
✅ Lighthouse score > 90
✅ Primeiro paciente usando lista de espera com sucesso
✅ Zero no-shows em um dia

Page 40

✅ Deploy sem bugs críticos
✅ Feedback positivo de usuários reais

Como o Squad Será Avaliado (Plus)

Qualidade Técnica (30%)
- Código limpo, tipado, testado
- Performance e acessibilidade
- Arquitetura escalável
Impacto no Produto (40%)
- Features que reduzem no-show
- Melhorias em UX validadas por usuários
- Redução de fricção operacional
Inovação (20%)
- Soluções criativas para problemas
- Uso inteligente de tecnologia
- Diferenciais competitivos
Colaboração (10%)
- Trabalho em equipe
- Code reviews construtivos
- Documentação e compartilhamento

36. Contato e Suporte

Dúvidas Técnicas:

Criar issue no repositório com label question
Mencionar tech lead nas discussões Bloqueios:
Reportar imediatamente no daily
Não esperar mais de 4h tentando resolver sozinho Ideias e Melhorias:
Adicionar em docs/ideas.md
Discutir na retrospectiva

37. Anexo: Status Consolidado

IMPLEMENTADO (EXISTE/PARCIAL)

✅ Agenda básica (visualização mês) ✅ Disponibilidades do médico ✅ Exceções de agenda ✅ Relatórios básicos (CRUD) ✅ Laudos em draft/completed ✅ Autenticação multi-role ✅ Mensagens médico-paciente ✅ Componentes acessibilidade básicos ✅ Chatbot base

Page 41

✅ Modo escuro (parcial)

PRIORIDADE ALTA (Fase 1-2)

🔴 Design Tokens 🔴 Skeleton Loaders 🔴 Empty States 🔴 React Query 🔴 Check-in 🔴 Sala de Espera 🔴 Lista de Espera 🔴 Confirmação 1-clique 🔴 Dashboard KPIs 🔴 Command Palette

PRIORIDADE MÉDIA (Fase 3)

🟡 Heatmap Ocupação 🟡 Reagendamento Inteligente 🟡 PWA Offline 🟡 Code-splitting Completo 🟡 Modo Escuro AAA 🟡 Notificações SMS

OPCIONAL (Fase 4/Futuro)

⚪ Teleconsulta ⚪ Previsão Demanda ML ⚪ Auditoria LGPD Completa ⚪ Integração Calendários Externos ⚪ Sistema Pagamentos ⚪ Gamificação

38. Instruções para Regenerar PDF

Método 1: NPM Script (Recomendado)

npm run pdf:roadmap
Método 2: Pandoc (Se instalado)
pandoc docs/mediConnect-roadmap.md -o docs/mediConnect-roadmap.pdf --pdf-engine=xelatex -V 
geometry:margin=1in
Método 3: VS Code Extension
1. Instalar extensão "Markdown PDF"
2. Abrir mediConnect-roadmap.md
3. Ctrl+Shift+P  → "Markdown PDF: Export (pdf)"
Documento preparado para: Squad 18 - MediConnect Última atualização: 2025-11-21 Versão: 2.0 (Detalhada com
equipes e prompts)

---
## Page 42

Bom trabalho, time! 🚀 Vamos fazer o melhor sistema de agendamento médico! 💪

65 KiB Raw Blame History Unescape Escape

MediConnect Roadmap

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page 7

Page 8

Page 9

Page 10

Page 11

Page 12

Page 13

Tarefa 2.2: Code-Splitting PainelMedico

Page 14

Tarefa 2.3: PWA Básico com Offline

Page 15

Tarefa 2.4: Otimização de Bundle

Page 16

Habilitar gzip/brotli no Netlify Verificar headers de cache Meta: Bundle inicial < 200KB gzipped Stack: Vite + Rollup

EQUIPE 3: Features Médicas & Agendamento (Fernando, Peu Gabriel, Cristiano)

Responsabilidades

Tarefas Prioritárias

Tarefa 3.1: Check-in e Sala de Espera Virtual

Page 17

Tarefa 3.2: Lista de Espera Inteligente

Page 18

Tarefa 3.3: Reagendamento Inteligente

Page 19

Page 20

Tarefa 3.4: Confirmação de Consulta 1-Clique

Page 21

EQUIPE 4 (ROTATIVA): Analytics & Relatórios

Responsabilidades

Tarefas Prioritárias

Tarefa 4.1: Dashboard KPIs

Page 22

Page 23

Tarefa 4.2: Heatmap de Ocupação

Page 24

19. Quick Wins Priorizados (Primeira Sprint)

20. Roadmap por Fase Detalhado

Fase 1: Quick Wins (Sprint 1 - 1 semana)

Page 25

Fase 2: Features Core (Sprints 2-3 - 2 semanas)

Fase 3: Analytics & Otimização (Sprint 4 - 1 semana)

Fase 4: Diferenciais (Futuro/Opcional)

Page 26

21. Prompts Adicionais por Categoria

PROMPTS DE INTEGRAÇÃO

Integração Twilio para SMS

Page 27

Real-time com Supabase

Page 28

return (...); } 3. Policies Supabase: Habilitar realtime na tabela appointments Row Level Security para filtrar apenas consultas autorizadas Stack: Supabase Realtime + React Query

PROMPTS DE TESTES

Testes Unitários com Vitest

Page 29

PROMPTS DE SEGURANÇA

Auditoria de Ações

Page 30

Page 31

22. Checklist de Qualidade Pré-Entrega

Equipe 1 (UX/Design)

Page 32

Equipe 2 (Performance)

Equipe 3 (Features)

Equipe 4 (Analytics)

Geral

23. Distribuição de Horas por Equipe

24. Comunicação e Sincronização

Daily Standups (15 min)

Page 33

Revisões de Código

Integração Contínua

Documentação

25. Dependências Técnicas Detalhadas

26. Estrutura de Pastas Proposta Pós-Refatoração

65 KiB

Raw Blame History