Spec de Telas — App Gestão CFC Produtivo

Documento de desenho e projeto. Descreve as telas, componentes, estados e conteúdo do novo app de gestão, para servir de base a protótipos.

Viabilidade técnica, esforço, riscos e dependências de integração estão fora deste documento — vivem em analise-api-app-gestao-instrutor.md, que permanece a peça canônica de análise.

Data: 2026-09-06

Sumário

1. Propósito e público
2. Identidade visual white-label
3. Perfis e modelo de papéis
4. Mapa de navegação
5. Bloco A — Entrada e identidade
6. Bloco B — Telas comuns aos dois papéis
7. Bloco C — Papel Instrutor
8. Bloco D — Papel Gestor
9. Bloco E — Financeiro (papel Gestor)
10. Componentes reutilizáveis
11. Estados globais
12. Configurações do CFC que alteram a interface
13. Microcopy de referência
14. Matriz tela × papel
15. Entregáveis sugeridos

1. Propósito e público

O app substitui a experiência atual do App de Gestão, hoje limitada à consulta de agenda e ao fechamento de aulas pelo instrutor. O novo app atende dois papéis dentro de um mesmo CFC:

Caso central de desenho: em CFCs pequenos e médios, o gestor também dá aula. O app precisa atender esse duplo papel sem poluir a experiência de quem exerce só um deles.

Princípios de desenho

1. Agenda é a tela-mãe do instrutor; dashboard é a tela-mãe do gestor. Cada papel abre no que importa para ele.
2. Uma identidade, dois contextos. Nunca pedir novo login para trocar de papel.
3. O switcher não existe para quem não precisa dele. Instrutor puro e gestor puro jamais veem o controle de papel.
4. Otimizado para uso em pé, com uma mão, entre aulas. Alvos de toque generosos, ações primárias ao alcance do polegar, leitura possível sob sol.
5. Baixo consumo de rede. A tela inicial de cada papel resolve com uma requisição.
6. Dinheiro exige confirmação e rastro. Toda operação financeira mostra o que vai acontecer antes de acontecer, e deixa registro de quem fez. Nenhum lançamento nasce de um toque acidental.
7. Valores são sensíveis em público. O gestor consulta o app no balcão, na frente de aluno. Todo agregado financeiro é ocultável com um toque.

2. Identidade visual white-label

O app é branco de marca: cada CFC aplica sua identidade. Os dados de marca chegam no login e valem para toda a sessão.

Diretriz para o protótipo: desenhar com uma paleta neutra de referência e demonstrar ao menos duas variações de marca (uma clara, uma escura), provando que o layout aguenta cores arbitrárias vindas do cliente. Textos e ícones precisam manter contraste adequado sobre cor1 em ambos os casos — prever token de "cor de conteúdo sobre primária" calculado, não fixo.

3. Perfis e modelo de papéis

3.1 As três formas do app

O app decide a forma no login, a partir das capacidades que o servidor devolve (perfis e instrutor). Não há tela de configuração para isso — a forma é consequência do cadastro feito no painel web pelo gestor do CFC.

3.2 O controle de troca de papel

Padrão adotado: context switcher no cabeçalho, ao lado da identidade — o mesmo modelo do seletor de organização do GitHub ou de workspace do Slack. É reconhecível, não consome espaço da navegação principal e deixa o contexto ativo sempre visível.

Onde fica: um chip de contexto no canto esquerdo da barra superior da home, exibindo o papel ativo com ícone e rótulo, com um chevron indicando que é acionável.

┌──────────────────────────────────────────────┐
│  ⌄ Instrutor        [logo CFC]        (foto) │
│  ────────────────────────────────────────────│

Ao tocar: abre um bottom sheet curto — não uma tela cheia. Trocar de papel é ação frequente e precisa custar um toque e meio.

┌──────────────────────────────────────────────┐
│               Trocar de papel                │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │ 👤  Instrutor                       ✓  │  │
│  │     Sua agenda e suas aulas            │  │
│  └────────────────────────────────────────┘  │
│  ┌────────────────────────────────────────┐  │
│  │ 📊  Gestão                             │  │
│  │     Indicadores e operação do CFC      │  │
│  └────────────────────────────────────────┘  │
│                                              │
│            Autoescola Modelo · Ana Paula     │
└──────────────────────────────────────────────┘

Comportamento da troca:

• Troca toda a casca do app: tab bar, home e cor de acento do papel. Não é um filtro dentro da mesma tela.
• Transição breve (~200 ms) com o novo contexto entrando — o usuário precisa perceber que mudou de mundo.
• O papel ativo persiste no dispositivo: reabrir o app volta ao último papel usado. Um mesmo usuário pode estar em papéis diferentes no tablet e no celular.
• Nenhuma confirmação, nenhum recarregamento de sessão, nenhuma senha.
• O chip de contexto continua visível na home do papel novo, para que a troca de volta seja igualmente barata.

Regra de exibição: o chip só é renderizado quando o usuário possui os dois papéis. Nas formas puras, o espaço é ocupado apenas pela identidade do CFC — sem placeholder, sem controle desabilitado.

3.3 Primeira entrada de um usuário de duplo papel

Na primeira sessão após ganhar o segundo papel, exibir uma folha de apresentação única (uma vez só, nunca mais):

Você tem dois papéis neste CFC Como gestor, acompanha os indicadores da autoescola. Como instrutor, gerencia sua própria agenda de aulas. Toque no seletor no topo da tela para alternar quando quiser.

[ Começar como Gestor ] [ Começar como Instrutor ]

A escolha define o papel inicial e já ensina onde fica o controle.

4. Mapa de navegação

4.1 Tab bar — papel Instrutor

Ação primária flutuante sobre a Agenda: + Nova aula (C5).

4.2 Tab bar — papel Gestor

Cinco abas é o limite prático da tab bar; a ordem segue a frequência de uso real de um gestor de CFC. Ação primária flutuante sobre Painel e Financeiro: + Lançamento (E2).

Quando o usuário não tem acesso ao financeiro, a aba Financeiro não é renderizada e a tab bar volta a quatro itens — sem espaço vazio, sem aba desabilitada.

4.3 Fluxo geral

Splash (A1)
   │
   ├─ sem sessão ──► Login (A2) ──► Recuperar senha (A3)
   │                    │
   │                    ▼
   │            [resolve capacidades]
   │                    │
   │      ┌─────────────┼─────────────┐
   │      ▼             ▼             ▼
   │  instrutor      gestor       duplo papel
   │   puro           puro             │
   │      │             │        Apresentação (A4)
   │      │             │         [1ª vez apenas]
   │      ▼             ▼              │
   │  Agenda (C1)   Painel (D1) ◄──────┘
   │                    │
   │                    └─► Financeiro (E1) ─► Lançar (E2) · Quitar (E5)
   │      ▲             ▲
   │      └──── troca de papel (B2) ────┘
   │
   └─ com sessão ──► home do último papel usado

5. Bloco A — Entrada e identidade

A1 — Splash

Logo do app sobre a cor primária. Enquanto exibe, valida a sessão local e resolve o papel salvo. Duração máxima percebida: 1,5 s — passando disso, mostrar indicador de progresso discreto.

A2 — Login

Tela única, sem abas, sem cadastro (contas são criadas pelo CFC no painel web).

Mensagens de erro — abaixo do formulário, nunca em alerta modal:

A3 — Recuperar senha

Campo único de e-mail + botão Enviar link. Em sucesso, troca o conteúdo por estado de confirmação:

Verifique seu e-mail Se houver uma conta para ana@autoescola.com.br, enviamos as instruções de recuperação. [ Voltar ao login ]

Mensagem deliberadamente neutra quanto à existência da conta.

A4 — Apresentação de duplo papel

Descrita em 3.3. Folha modal, ilustração leve, dois botões de ação. Não reaparece.

6. Bloco B — Telas comuns aos dois papéis

B1 — Conta e preferências

B2 — Trocar de papel

Bottom sheet descrito em 3.2. Altura ajustada ao conteúdo, arrasto para fechar, toque fora fecha.

7. Bloco C — Papel Instrutor

C1 — Agenda do instrutor (home)

A tela mais usada do app inteiro. Precisa responder em um relance: qual é a próxima aula e com quem.

Estrutura:

┌──────────────────────────────────────────────┐
│  ⌄ Instrutor      [logo CFC]          (foto) │
├──────────────────────────────────────────────┤
│  ‹  Seg 8    Ter 9    QUA 10   Qui 11   ›    │  ← faixa de dias
│         •       ••      •••      •            │  ← densidade
├──────────────────────────────────────────────┤
│  Quarta, 10 de setembro          4 aulas     │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │ AGORA · 14:00                          │  │
│  │ Marcos Vinícius Alves      (Aula 12)   │  │
│  │ CPF 123.456.789-00 · Renach 1234567    │  │
│  │ 🚗 Gol Prata — ABC-1D23                │  │
│  │ 📍 Pátio Central (Av. Brasil, 1200)    │  │
│  │                       [ Fechar aula ]  │  │
│  └────────────────────────────────────────┘  │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │ 15:00                    ⚠ em débito   │  │
│  │ Juliana Prado               (Aula 3)   │  │
│  │ 🚗 Onix Branco — DEF-4G56              │  │
│  └────────────────────────────────────────┘  │
│                                              │
│                                    ( + )     │
└──────────────────────────────────────────────┘

Faixa de dias: rolagem horizontal, dia atual destacado, pontos indicando densidade de aulas (1 ponto = 1–2 aulas, 2 = 3–4, 3 = 5+). Toque no cabeçalho da data abre seletor de calendário para saltos maiores. A extensão navegável para trás e para frente é definida pelo CFC.

Aula em andamento: o card cuja janela de horário contém o momento atual recebe rótulo AGORA, borda na cor primária e sobe para o topo com leve elevação.

Agrupamento: por dia, com cabeçalho fixo (data por extenso + contagem de aulas).

Ordenação: cronológica ascendente.

Ações do card:

• Toque → C2 (detalhe)
• Botão Fechar aula aparece no card apenas quando o fechamento está habilitado pelo CFC e a aula está em situação fechável
• Deslize para a esquerda → ações rápidas: Fechar · Desmarcar

Ação flutuante: + Nova aula → C5.

Filtro: ícone na barra superior abre folha com filtro por situação (Agendada / Realizada / Falta) e por categoria. Filtro ativo vira chip removível abaixo da faixa de dias.

Vazio do dia: ilustração leve + "Nenhuma aula neste dia." + botão Marcar aula.

C2 — Detalhe da aula

Tela cheia, com a informação organizada em blocos. É a tela que o instrutor abre quando o aluno chega.

C3 — Fechamento da aula

Bottom sheet acionado de C1, C2 ou C4. Precisa ser resolvível em dois toques.

┌──────────────────────────────────────────────┐
│              Fechar aula                     │
│   Marcos Vinícius Alves · Qua 10, 14:00      │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │ ✅  Realizada                           │  │
│  │     O aluno compareceu e fez a aula    │  │
│  └────────────────────────────────────────┘  │
│  ┌────────────────────────────────────────┐  │
│  │ ⛔  Falta                               │  │
│  │     O aluno não compareceu             │  │
│  └────────────────────────────────────────┘  │
│                                              │
│              [ Confirmar ]                   │
└──────────────────────────────────────────────┘

• Duas opções grandes, mutuamente exclusivas, com descrição de apoio — o instrutor não deve precisar interpretar rótulo seco.
• Confirmar só habilita após seleção.
• Sucesso: fecha a folha, o card na lista anterior anima para a nova cor de situação, e um snackbar oferece Desfazer por alguns segundos.
• A tela inteira não existe quando o CFC não habilita o fechamento pelo app — o botão simplesmente não é renderizado.

C4 — Fila de fechamento

Lista de aulas que já aconteceram e seguem sem registro. Existe porque o instrutor tipicamente fecha várias de uma vez, no fim do turno.

• Cabeçalho: "3 aulas aguardando fechamento" + botão de texto Fechar todas como realizadas (com confirmação, para o caso comum de um dia sem intercorrência).
• Itens: card compacto — hora, nome do aluno, ordem, veículo — com dois botões inline: Realizada e Falta. Fechar item a item não deve exigir abrir folha.
• Agrupamento: por dia, do mais recente para o mais antigo.
• Badge na tab bar: contagem de pendências.
• Vazio: "Tudo em dia. Nenhuma aula aguardando fechamento." com ilustração de conclusão.

C5 — Nova aula (fluxo em etapas)

Fluxo guiado, uma decisão por tela, com barra de progresso no topo e possibilidade de voltar sem perder o preenchido.

Etapa 1 — Aluno

• Campo de busca com foco automático, aceitando nome ou CPF.
• Resultados como lista de linhas: foto/iniciais, nome, CPF, e chips de contexto (categoria em curso, "em débito" quando aplicável).
• Seção Recentes acima dos resultados: últimos alunos atendidos por este instrutor.
• Vazio: "Nenhum aluno encontrado para maria."

Etapa 2 — Categoria e tipo de aula

• Categorias como cartões selecionáveis, cada um com o ícone da categoria, o rótulo (A, B, AB…), o saldo de créditos do aluno e o progresso ("7 de 20 aulas").
• Categoria sem crédito aparece esmaecida, com o motivo em texto de apoio.
• Tipo de aula logo abaixo, como chips: Comum · Extra · Noturna · Simulador · Automático — apenas os tipos que o CFC oferece e para os quais o aluno tem saldo.

Etapa 3 — Data

• Calendário mensal. Dias fora da janela permitida ficam desabilitados.
• Legenda discreta indicando disponibilidade por dia.

Etapa 4 — Horário

• Grade de horários do dia escolhido, em blocos tocáveis, agrupados por período (Manhã / Tarde / Noite).
• Horário indisponível permanece visível mas desabilitado — o instrutor entende a grade melhor vendo o que está ocupado do que vendo lacunas.
• Ao selecionar um horário, revelar em linha o veículo que será usado; se houver mais de uma opção, permitir escolher.
• Vazio: "Nenhum horário disponível nesta data." + atalho Ver próxima data com vagas.

Etapa 5 — Revisão

Resumo em cartão único — aluno, categoria, tipo, data, hora, instrutor, veículo, local — e botão primário Confirmar agendamento.

Erros de regra de negócio aparecem nesta tela, em faixa acima do botão, com texto direto e ação corretiva quando existir (ex.: "O veículo já tem agendamento neste horário." → Escolher outro horário).

Sucesso

Tela de confirmação breve: marca de conclusão, resumo em uma linha, e dois botões — Ver na agenda e Marcar outra aula (que retorna à Etapa 1 já com a data preservada).

C6 — Desmarcar aula

Diálogo de confirmação com peso destrutivo:

Desmarcar esta aula? Marcos Vinícius Alves · Quarta, 10 de setembro, 14:00 O horário voltará a ficar disponível na grade.

[ Manter ] [ Desmarcar ]

Sucesso retorna à origem com snackbar e opção de desfazer.

C7 — Aulas teóricas

Lista simples, de leitura, no mesmo formato de agrupamento por dia da C1.

• Card: data e hora, categoria/simulado, sala, turma, quantidade de alunos, situação.
• Detalhe: dados da aula e lista de alunos.
• Ação de desmarcar disponível quando cabível, com o mesmo padrão da C6.
• Vazio: "Você não tem aulas teóricas agendadas."

8. Bloco D — Papel Gestor

D1 — Painel (home)

Resposta à pergunta "como está o CFC hoje?" em uma tela, sem rolagem obrigatória para o essencial.

Cabeçalho: chip de contexto (quando duplo papel), logo do CFC, avatar. Abaixo, seletor de período: Hoje · Semana · Mês (padrão: Mês), com a competência escrita por extenso ao lado.

Organização em seções roláveis:

Seção 1 — Operação (primeiro bloco, sempre visível)

Quatro indicadores em grade 2×2, formato de bloco numérico grande:

Seção 2 — Comercial

Seção 3 — Financeiro

Resumo de leitura. A operação financeira vive na aba Financeiro (Bloco E) — aqui o gestor só confere, e cada linha é um atalho para lá.

O estado de ocultação de valores é o mesmo da E1: alternar em qualquer uma das duas afeta as duas.

Seção 4 — Alunos

Comportamento comum a todos os blocos:

• Cada bloco é tocável e leva a D2.
• Rodapé discreto da tela: "Atualizado às 14:32" + gesto de puxar para atualizar.
• Valores financeiros ganham alternância de visibilidade (ícone de olho no cabeçalho da seção) — gestor consulta em público.

Ordem das seções é fixa nesta versão. Personalização fica para iteração futura.

D2 — Detalhe do indicador

Tela cheia por indicador, com estrutura padronizada:

D3 — Agenda geral

Visão da operação inteira, não apenas de um instrutor.

• Alternância de visualização: Por instrutor · Por veículo — controle segmentado no topo.
• Visão do dia em faixas: cada linha é um instrutor (ou veículo), cada bloco é uma aula posicionada no horário. Rolagem horizontal para o tempo, vertical para os recursos.
• Toque em um bloco abre o detalhe da aula (mesma C2, em modo leitura).
• Resumo do dia no topo: total de aulas, ocupação percentual da grade, quantidade de horários livres.
• Vazio: "Nenhuma aula agendada neste dia."

D4 — Comercial

Duas abas internas:

Leads

• Blocos de resumo: novos, em atendimento, convertidos, perdidos.
• Lista de leads recentes: nome, origem, responsável, tempo desde o último contato. Lead sem contato há muito tempo recebe marcação de atenção.

Matrículas

• Total no período e evolução.
• Quebra por origem e por usuário responsável, em barras ordenadas.

9. Bloco E — Financeiro (papel Gestor)

O financeiro no app não replica o painel web. O painel continua sendo o lugar do fechamento contábil, dos relatórios, do DRE e dos carnês. O app cobre as três operações que o gestor precisa fazer longe do computador:

Tudo o que não couber nessas três frentes fica no painel web, e o app diz isso explicitamente quando o usuário esbarra no limite.

E1 — Fluxo de caixa (home do financeiro)

Tela-mãe do módulo. Responde "como está o caixa" antes de qualquer rolagem.

┌──────────────────────────────────────────────┐
│  Financeiro                        👁  ⚙     │
│  ┌────────────────────────────────────────┐  │
│  │  Hoje  │  Semana  │ ● Mês │  Período   │  │
│  └────────────────────────────────────────┘  │
│                                              │
│   Saldo em contas                            │
│   R$ 48.320,15                               │
│   4 contas · atualizado às 14:32             │
│                                              │
│  ┌──────────────────┐  ┌──────────────────┐  │
│  │ ENTRADAS         │  │ SAÍDAS           │  │
│  │ R$ 62.400,00     │  │ R$ 18.750,30     │  │
│  │ ▲ 12% vs. ant.   │  │ ▼ 4% vs. ant.    │  │
│  └──────────────────┘  └──────────────────┘  │
│                                              │
│   Resultado do período     + R$ 43.649,70    │
│   ████████████████████░░░░░░                 │
│                                              │
│  ─── Precisa de atenção ────────────────────  │
│   ⚠ A receber vencido        R$ 8.410,00     │
│      12 parcelas             ›               │
│   ⚠ A pagar vencido          R$ 1.230,00     │
│      3 títulos               ›               │
│   • Vence nos próximos 7 dias  R$ 9.800,00   │
│                                              │
│  ─── Saldo por conta ───────────────────────  │
│   Caixa                       R$ 1.420,15    │
│   Banco do Brasil            R$ 32.900,00    │
│   PagSeguro                  R$ 14.000,00    │
│                                              │
│                                    ( + )     │
└──────────────────────────────────────────────┘

Estrutura:

Ocultar valores: ícone de olho no cabeçalho substitui todos os números por •••••• — decisão persistida no dispositivo, restaurada a cada abertura. Este é o único controle da tela que afeta a leitura inteira, por isso fica no cabeçalho e não dentro de uma seção.

Filtros avançados (ícone de engrenagem): conta, forma de pagamento, categoria financeira, unidade de custo, aluno, fornecedor e — para quem tem permissão para ver movimentações de outros — usuário responsável. Filtro ativo vira chip removível logo abaixo do seletor de período.

Ação flutuante: + Lançamento → E2.

Sem permissão para ver resumos: os blocos de saldo, entradas, saídas e resultado não são renderizados. A tela abre direto em "Precisa de atenção" e "Saldo por conta" — ou, se também não houver permissão para saldo de contas, direto na E3.

E2 — Lançamento rápido

A tela mais exigente de desenho do módulo: precisa ser rápida para o caso comum (uma saída em dinheiro, quitada na hora) e completa o suficiente para o caso menos comum, sem que a complexidade apareça antes da hora.

Estratégia: formulário único, progressivo. O essencial cabe na primeira dobra; o resto vive em uma seção "Mais opções" recolhida.

┌──────────────────────────────────────────────┐
│  ✕            Novo lançamento                │
│  ┌────────────────────────────────────────┐  │
│  │   ● Entrada    │      Saída            │  │
│  └────────────────────────────────────────┘  │
│                                              │
│              R$ 200,00                       │  ← protagonista
│              ─────────────                   │
│                                              │
│  Descrição                                   │
│  ┌────────────────────────────────────────┐  │
│  │ Pagamento parcela — João Silva         │  │
│  └────────────────────────────────────────┘  │
│                                              │
│  Data          Hoje, 06/09/2026          ›   │
│  Conta         Caixa                     ›   │
│  Forma         Dinheiro                  ›   │
│  Categoria     Mensalidades              ›   │
│  Aluno         João Silva                ›   │
│                                              │
│  Situação                                    │
│  ┌────────────────────────────────────────┐  │
│  │  ● Quitada agora  │   Pendente         │  │
│  └────────────────────────────────────────┘  │
│                                              │
│  ⌄ Mais opções                               │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │            Lançar entrada              │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

Campos, em ordem de aparição:

Seção "Mais opções" (recolhida por padrão):

Confirmação: botão de largura total com rótulo específico — Lançar entrada ou Lançar saída — nunca "Salvar". Antes de gravar, se o valor for atipicamente alto para aquele CFC ou se a data for retroativa, exibir confirmação com o resumo do que será lançado.

Sucesso: tela de confirmação breve com o valor, o tipo, a conta e o novo saldo da conta afetada. Dois botões: Concluir e Lançar outro (que volta ao formulário preservando conta, forma e categoria — o padrão de quem lança vários seguidos).

Criação de cadastros a partir do app: quando a conta, a categoria, a forma de pagamento ou o fornecedor necessários não existem, a folha de seleção traz a opção + Criar ao final da lista, com um formulário mínimo (apenas o título e o que for obrigatório). Isso evita que o gestor abandone o lançamento para abrir o painel web.

E3 — A receber e a pagar

Lista operacional. É onde o gestor entra quando quer agir sobre títulos específicos.

Abas internas: A receber · A pagar · Quitados

Cabeçalho: total da aba no período selecionado + contagem de parcelas.

Filtro por situação, em chips horizontais: Vencidos · Vence hoje · A vencer · Todos. O chip Vencidos já vem com a contagem embutida e destaque quando maior que zero.

Card de parcela:

┌────────────────────────────────────────────┐
│ ▌ Vence 05/09          ⚠ vencida há 1 dia  │
│ ▌ João Silva                    Parcela 3/10│
│ ▌ Mensalidade — Categoria B                │
│ ▌ R$ 200,00  + R$ 6,40 de acréscimos       │
│ ▌ R$ 206,40                    [ Quitar ]  │
└────────────────────────────────────────────┘

• Barra lateral colorida pela situação: a vencer (neutro), vence hoje (âmbar), vencida (vermelho), quitada (verde).
• Acréscimos aparecem apenas quando existem, sempre decompostos do valor original — o gestor precisa ver que R$ 206,40 é R$ 200,00 mais R$ 6,40, nunca só o total.
• Botão Quitar inline abre E5 direto. Tocar no restante do card abre E4.
• Deslize para a esquerda: Quitar · Ver movimentação.

Agrupamento: por data de vencimento, com cabeçalho fixo ("Vencidos", "Hoje", "Amanhã", depois por data).

Vazio: "Nada a receber neste período." / "Nada a pagar neste período."

E4 — Detalhe da movimentação

Leitura completa de um lançamento e das suas parcelas.

E5 — Quitação de parcela

Bottom sheet, acionado de E1, E3 ou E4. É a operação financeira mais frequente do balcão e precisa ser resolvível sem rolagem no caso simples.

┌──────────────────────────────────────────────┐
│              Quitar parcela                  │
│      João Silva · Parcela 3/10               │
│                                              │
│   Valor original              R$ 200,00      │
│   Multa (2%)                  R$   4,00      │
│   Mora (1 dia)                R$   2,40      │
│   ──────────────────────────────────────     │
│   Total a receber             R$ 206,40      │
│                                              │
│   Conta         Caixa                    ›   │
│   Forma         Dinheiro                 ›   │
│   Observação    (opcional)               ›   │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │        Confirmar quitação              │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

Decomposição do valor: sempre visível e sempre discriminada — valor original, multa, mora e juros em linhas separadas, com o total destacado. Quando a parcela está em dia, o bloco reduz a uma única linha com o valor.

Campos: conta de destino (padrão: a da parcela, ou a principal), forma de pagamento (padrão: a da parcela) e observação opcional.

Controles condicionais à permissão do usuário — quando ausentes, simplesmente não são renderizados:

Forma de pagamento integrada ao CFC Pay: ao escolher uma forma processada pelo gateway, a folha muda de comportamento — o botão passa a ser Gerar cobrança, e a confirmação exibe o meio de envio ao aluno em vez de dar a parcela por quitada. A distinção precisa ser evidente antes do toque: forma integrada recebe um selo "Cobrança online" na lista de seleção.

Sucesso: folha fecha, o card de origem anima para a situação quitada, e um snackbar oferece Ver recibo — que abre o comprovante em tela cheia, com opção de compartilhar.

E6 — Caixa do dia

Fechamento informal do dia. É o que o gestor olha no fim do expediente.

Cabeçalho: seletor de data (padrão: hoje), com navegação para dias anteriores.

Blocos:

Cada linha de qualquer bloco é tocável e leva à E3 filtrada pela dimensão correspondente.

Compartilhar: ação no cabeçalho gera um resumo em texto do dia, para enviar por WhatsApp ao sócio ou ao contador.

E7 — Selecionar aluno ou fornecedor

Folha de seleção, reutilizada por E2 e pelos filtros.

• Campo de busca com foco automático — nome ou CPF para aluno, nome para fornecedor.
• Recentes no topo: últimos vinculados pelo usuário.
• Linha de resultado: avatar/iniciais, nome, documento e — para alunos — chip "em débito" quando aplicável, com o valor.
• Rodapé fixo: + Criar fornecedor (apenas no contexto de saída).
• Vazio: "Nenhum aluno encontrado para joão." com atalho Criar sem vincular.

10. Componentes reutilizáveis

10.1 Card de aula

Componente mais repetido do app. Três densidades:

Anatomia da versão completa:

┌────────────────────────────────────────────┐
│ ▌ 14:00                        ⚠ em débito │  ← barra lateral = cor da situação
│ ▌ Marcos Vinícius Alves        (Aula 12)   │
│ ▌ CPF 123.456.789-00 · Renach 1234567      │
│ ▌ 🚗 Gol Prata — ABC-1D23                  │
│ ▌ 📍 Pátio Central (Av. Brasil, 1200)      │
│ ▌ 💬 Aluno pediu foco em baliza            │
│ ▌                        [ Fechar aula ]   │
└────────────────────────────────────────────┘

Linhas de veículo, local e observação são condicionais: quando o dado não existe ou o CFC não o exibe, a linha desaparece — sem placeholder, sem "não informado".

10.2 Chip de situação

Cores herdadas do painel web, para que gestor e instrutor leiam o mesmo código visual nos dois ambientes. Nunca usar cor como único portador de significado — o chip sempre traz o rótulo escrito.

10.3 Faixa de dias

Rolagem horizontal, item = sigla do dia + número, dia ativo com fundo na cor primária, pontos de densidade abaixo. Toque longo abre calendário completo.

10.4 Bloco numérico (dashboard)

Rótulo em caixa alta discreta, valor em tipografia grande, variação com seta e cor semântica, e — quando houver — miniatura de série ao fundo em opacidade baixa. Tocável por inteiro.

10.5 Linha de aluno

Avatar (foto ou iniciais sobre cor derivada do nome), nome em destaque, CPF em apoio, chips de contexto à direita. Usada em busca, listas e composições de indicador.

10.6 Seletor de período

Controle segmentado Hoje · Semana · Mês · Período, com a competência por extenso ao lado. A escolha é global do papel gestor e persiste entre D1, D2, D4, E1 e E3 durante a sessão. A opção Período abre seletor de data inicial e final.

10.7 Card de parcela

Usado em E3, E4 e nas listas de "precisa de atenção" da E1. Barra lateral colorida pela situação, vencimento e alerta de atraso no topo, vínculo (aluno ou fornecedor) e ordem da parcela, descrição, e o valor sempre decomposto quando há acréscimos. Botão de quitação inline nas parcelas em aberto.

10.8 Linha de valor monetário

Componente de exibição, não de entrada. Regras fixas em todo o app:

• Sempre R$ 0.000,00, com separador de milhar.
• Sinal explícito em resultados (+ R$ 43.649,70 / − R$ 1.230,00), nunca apenas cor.
• Acréscimos e descontos aparecem decompostos do valor original, nunca embutidos no total.
• Sujeito ao estado global de ocultação — quando ativo, vira •••••• mantendo a largura, para o layout não saltar.

10.9 Folha de seleção com busca

Padrão único para escolher conta, forma de pagamento, categoria, aluno e fornecedor. Campo de busca no topo, seção Recentes, lista com informação de apoio à direita (saldo da conta, hierarquia da categoria, documento do aluno) e, quando cabível, + Criar fixo ao final.

10.10 Teclado de valor

Entrada monetária em tela cheia ou em bloco dedicado: dígitos grandes, formatação em tempo real da direita para a esquerda, sem separador digitado pelo usuário. Nunca usar campo de texto comum para dinheiro.

11. Estados globais

Todos os componentes de lista e todas as telas de dado precisam dos cinco estados:

Sessão expirada: retorno ao login com aviso — "Sua sessão expirou. Entre novamente." — preservando o papel ativo para restaurá-lo após o novo login.

Ação sem permissão: o app não renderiza controles que o papel não possui. Não existe estado de "botão desabilitado por permissão".

12. Configurações do CFC que alteram a interface

Cada CFC configura o próprio comportamento no painel web. O protótipo precisa demonstrar as variações — o mesmo app tem aparências diferentes entre clientes.

12.1 Permissões do usuário que alteram o financeiro

Além das configurações do CFC, o financeiro responde a permissões concedidas por usuário. Controle sem permissão não é desabilitado — é ausente. O app nunca mostra um botão que o usuário não pode acionar.

Recomendação para o protótipo: montar duas personas de CFC — uma com tudo habilitado (CFC grande, instrutor autônomo, gestor com permissão financeira plena) e uma minimalista (CFC pequeno, secretaria centralizadora, gestor sem permissão de resumo) — e navegar as mesmas telas nas duas. É a forma mais rápida de validar que o layout não quebra quando blocos desaparecem.

13. Microcopy de referência

Princípios: segunda pessoa, verbo no imperativo nas ações, sem jargão de sistema, sem culpar o usuário. "Aula" e "aluno" são as palavras do domínio — não substituir por "evento" ou "cliente".

14. Matriz tela × papel

O bloco E inteiro depende de o usuário ter acesso ao financeiro. Um gestor sem esse acesso vê a tab bar de quatro itens, sem a aba Financeiro.

15. Entregáveis sugeridos para a fase de protótipo

1. Fluxo de entrada completo — A1 → A2 → A4 → home, nas três formas do app.
2. Agenda do instrutor (C1) em quatro estados: dia cheio, dia vazio, carregando, sem conexão.
3. Fluxo de marcação (C5) nas cinco etapas, incluindo uma tela de erro de regra.
4. Painel do gestor (D1) com as quatro seções e o seletor de período.
5. Troca de papel (B2) demonstrada em animação, saindo de C1 e chegando em D1.
6. Lançamento rápido (E2) em dois caminhos: o simples (saída em dinheiro, quitada na hora) e o completo com "Mais opções" aberto e parcelamento ligado.
7. Quitação de parcela (E5) em três variações: parcela em dia, parcela vencida com acréscimos decompostos, e forma de pagamento integrada ao gateway.
8. Fluxo de caixa (E1) com valores visíveis e com valores ocultos, provando o estado de privacidade.
9. Duas variações de marca, provando o white-label.
10. Uma persona de CFC minimalista, provando o comportamento com configurações e permissões desligadas — incluindo a tab bar sem a aba Financeiro.