# Sistema Fit Food Ultracongelados — protótipo navegável

HTML, CSS e JavaScript puros. Sem build, sem framework, sem dependência.
**Abra `login.html`** no navegador para percorrer tudo — funciona direto do arquivo,
sem servidor.

38 telas: 1 de entrada, 5 de frente de caixa e 32 do administrativo.

---

## A decisão central: duas portas de entrada

A tela de login pergunta **para onde a pessoa vai** antes de perguntar quem ela é:

| Perfil | Entra em | Vê |
|---|---|---|
| **Gestão de caixa** | `pdv/painel.html` | Pedidos, atendimento, clientes, entregas e caixa |
| **Gestão completa** | `admin/visao-geral.html` | Tudo, inclusive fiscal, financeiro, produção e marketing |

### A unidade não se escolhe no login

Ela é atributo do usuário, definida em **Configurações › Usuários › Unidades que
pode acessar**. No login ninguém escolhe: o campo saiu da tela, e o que aparece
ali é só a confirmação do que o cadastro libera.

O que decorre disso:

| Cadastro do usuário | Ao entrar | Seletor de unidade |
|---|---|---|
| **Uma unidade** | abre nela | some — vira um selo fixo, sem clique |
| **Duas ou mais** | abre em *Todas as lojas* | aparece no topo, listando só as dele |

Guardado em `localStorage`: `fitfood:usuario` (quem entrou) e `fitfood:unidade`
(o recorte atual). Uma unidade guardada que saia do acesso da pessoa é
descartada na entrada seguinte — nunca sobra recorte que ela não pode mais ver.

Para quem for implantar: `FF.usuarios[].unidades` é um array de nomes de loja, e
`FF.sessao` sai daí. Trocar por uma sessão vinda do back-end é substituir a
função `sessaoAtual()` em `assets/js/dados.js` — nada mais no protótipo lê
unidade de outro lugar.

A matriz que amarra os perfis está em
**Configurações › Usuários › Matriz de permissões**.

---

## Mapa do backlog → onde ficou no protótipo

### Pedidos e atendimento

| Pedido do cliente | Onde está |
|---|---|
| Ordem dos pedidos: esteira ou lista, com botão | `pdv/painel.html` — alternador no cabeçalho, escolha salva na estação |
| Botões de status como categoria (solicitado / preparo / entrega / pronto / concluído) | `pdv/painel.html` — barra de status com contagem e valor por etapa |
| Seletor no topo Solicitado/Em preparo/Entregar/Concluído | mesma barra; clicar filtra a esteira e a lista |
| Filtro por nº do pedido, nome do cliente e forma de pagamento | `pdv/painel.html` e `admin/pedidos.html` |
| Filtro de origem (iFood, 99Food, site, balcão, WhatsApp) | ambos |
| Filtro de status e de pagamento confirmado | ambos |
| Mudar filtro de cidades no painel | virou seletor de unidade no filtro e no topo |
| Atualização constante (sem F5) | indicador "agora" no topo; atualiza a cada 30 s, clicável para pausar |
| Botão de mudar status na página de detalhes | detalhe do pedido — pílulas de situação |
| Mensagem de mudança de status | aviso no rodapé + modelo de WhatsApp em `admin/marketing.html` |
| Emitir NFC-e/NF-e sem entrar no pedido | botão de nota no cartão e na linha da lista |
| Botão que aparece quando a nota já foi emitida | ícone fica verde e abre "ver / reimprimir / A4 / XML" |
| Adicionar CPF na hora de emitir | janela de emissão, com opção de salvar no cadastro |
| Confirmar pagamento sem entrar nos detalhes | botão de cifrão no cartão e na linha |
| Botão para ir direto ao WhatsApp do cliente | ícone verde no cartão, na lista, no detalhe e no cadastro |
| Mover pedido de uma loja para outra | detalhe do pedido › "Mover de loja" |
| Reverter pedido cancelado, refazer e editar pagamento | detalhe do pedido cancelado › "Reverter cancelamento" |
| Cancelado mostrar motivo e usuário | registrado no cancelamento e exibido no detalhe e na lista |
| Campo observação | por item e do pedido inteiro, na comanda; sai na impressão |
| Ver histórico do cliente sem sair da tela | "x pedidos" abre janela com o histórico |
| Contabilizar no momento do pedido, não na conclusão | `admin/visao-geral.html` — "Pedidos feitos", nota explicando |
| Quantas marmitas vendidas (e bebidas/lanches) | KPI "Marmitas vendidas" na visão geral e coluna no relatório de vendas |

### Frente de caixa (atendimento)

| Pedido do cliente | Onde está |
|---|---|
| Tirar opções da lateral e deixar categorias e itens | `pdv/novo-pedido.html` — catálogo ocupa a tela, comanda à direita |
| Botão para mudar de unidade no frente de caixa | topo do PDV e botão no cabeçalho da tela |
| Telefone não cadastrado abre cadastro com o número | digite e aperte Enter no campo Telefone |
| Página de cadastrar cliente no frente de caixa | `pdv/clientes.html` + janela de cadastro |
| Detalhes do cliente no PDV | ficha com nº de pedidos, ticket médio, último pedido e prato preferido |
| Múltiplos endereços com escolha e padrão | ficha do cliente › aba Endereços; comanda mostra os endereços para escolher |
| Sugerir endereço como no mapa | campo com autocompletar que preenche bairro, cidade e CEP |
| Consumidor não identificado | botão na comanda; o pedido sai marcado assim |
| Corrigir: permite adicionar mais que o estoque | bloqueado, com aviso e saldo visível em cada item |
| Adicionar itens do kit um a um, com lista completa | ao escolher um plano abre a montagem, sabor a sabor |
| Contador de refeições | rodapé fixo da montagem: "Faltam 3 de 20" |
| Botão de concluir sem rolar até o fim | o rodapé da montagem é fixo |
| Formas de pagamento separadas por classificação | grupos: Dinheiro, Pagamento online, Maquininha, Vale-refeição, Vale-alimentação |
| Clicar no grupo e aparecer as bandeiras | segunda linha mostra Visa, Master, Elo, Alelo, Sodexo… |
| Várias formas de pagamento no mesmo pedido | lança quantas quiser; o botão só libera quando fecha o total |
| Troco a devolver, em destaque | faixa laranja no fechamento, na comanda e no cupom |
| Troco perto do dinheiro | aparece assim que o dinheiro é lançado |
| Agendamento junto com as formas de pagamento | bloco Entrega, ao lado do pagamento |
| Envio imediato | pílula "Envio imediato" / "Agendar" |
| Janela única de horário por cidade | 11:00–14:00, configurável em Configurações › Entregas |
| 5% e 8% no dinheiro aparecendo ao clicar | botão de desconto na comanda, com a regra da cidade |
| Remover campo "Revisão" | não existe no novo fluxo |
| Sugerir itens ("compre também") | trilho na comanda; quais itens entram é uma flag em Produtos |

### Caixa

| Pedido do cliente | Onde está |
|---|---|
| Botão para abrir caixa com troco e unidade | `pdv/caixa.html` — janela de abertura |
| Número e série de caixa (N série) | `#0074 · DOU-2026-074`, sigla por unidade |
| Fechamento às cegas | conta primeiro, o esperado só aparece depois |
| Impressão após concluir o fechamento | botão no resultado |
| Sangria e suprimento com descrição | descrição obrigatória nos tipos que exigem motivo |
| Conferência com todas as movimentações detalhadas | pedidos e lançamentos na mesma linha do tempo, com acumulado |
| Filtro de forma de pagamento nos detalhes do caixa | seletor no cabeçalho da movimentação |
| Divergência aparecer na lista geral dos caixas | coluna Divergência em `admin/caixas.html`, com selo de fora da tolerância |
| Fixar o resultado na conferência | barra fixa no rodapé da tela de caixa |
| Limite de ±10,00 para avisar divergência | Configurações › Sistema › tolerância |
| Campo entradas e saídas | `admin/lancamentos.html` |

### Estoque e produção

| Pedido do cliente | Onde está |
|---|---|
| Visualização do estoque | `admin/estoque.html` |
| Mesclar preço, estoque e movimentação no mesmo lugar | custo, preço, margem, saldo e mínimo na mesma linha; clique abre o histórico |
| Lupa e filtro por categoria como no site | busca + abas de categoria |
| Histórico de movimentação de estoque | `admin/movimentacoes.html` |
| Acumulado do estoque (o que havia, o que entrou, o que ficou) | coluna **Saldo** mostra `54 → 39`; colunas iguais às do painel atual: item, complemento, pedido, qtd, acumulado, movimentação, obs, data/hora |
| Usuário e observação na movimentação | colunas próprias, com filtro por usuário |
| Entrada e saída de vários produtos de uma vez | "Movimentar vários" em `admin/estoque.html` |
| Criar a unidade Centro de Produção | está em Unidades e tem tela própria |
| Entradas de estoque, sugestão do que produzir, planejamento | `admin/producao.html` |
| Criar transferência de estoque | `admin/transferencias.html` |
| Imprimir pedido de transferência | botão de impressora na linha (térmica e A4) |
| Emitir NF-e do pedido de transferência | botão de nota na linha, com CFOP de transferência |

### Cardápio

| Pedido do cliente | Onde está |
|---|---|
| Campo de cupom para criar (ADM) | `admin/cupons.html` |
| Cupom para item, cliente ou valor mínimo | campos "Quem pode usar", "Vale para" e "Pedido mínimo" |
| Cupom no cardápio, editável, mostrar/ocultar por loja | coluna "No cardápio" + unidades no cadastro |
| Controle de exibição de banner e cupom | Configurações › Descontos › Exibição no cardápio |
| Exceção de funcionamento com banner | tipo de banner "Exceção de funcionamento", com período |
| Fotos do produto dentro dos planos | montagem do plano usa a foto de cada sabor, no site e no PDV |
| Complemento com itens já cadastrados | opção "Adicionar item do catálogo" em Complementos |
| Complementos de lanche (granola, barras) | complemento "Leve junto", ligado ao catálogo |
| Custos e preços por unidade e por canal | `admin/custos.html`, refletindo iFood e 99Food |

### Clientes

| Pedido do cliente | Onde está |
|---|---|
| Cadastro com CPF, sexo, aniversário, e-mail, cidade | ficha do cliente, aba Complementares |
| Ticket médio, nº de pedidos, tempo do último pedido | na própria ficha e na lista |
| Plano e prato preferidos | campos na ficha, usados na sugestão do PDV |
| Botão "deseja completar seu cadastro" | medidor de completude + botão que leva ao que falta |
| Coluna de último pedido e de cidade na lista | `admin/clientes.html` |
| Exportar para Excel | botão Exportar (CSV que abre no Excel em pt-BR) |
| Mostrador de até 500 clientes numa tela | seletor 20 / 50 / 100 / 500 por página |
| Filtro por letra | faixa A–Z acima da tabela |
| Filtro de cidade | seletor de cidade |
| Clicar no pedido dentro do cadastro sem sair da página | abre em janela, como no fechamento de caixa |
| Aba de carrinhos abandonados | `admin/carrinhos.html` |

### Logística e fiscal

| Pedido do cliente | Onde está |
|---|---|
| Organizar a rota manualmente e numerar no mapa | `admin/rotas.html` — arrastar ou setas; o mapa renumera junto |
| Entregas e coletas | tipo da rota; "Nova coleta" no PDV e no admin |
| Filtro de cidades ao escolher pedidos do MDF-e | seletor dentro da janela de emissão |
| Botão para encerrar manifesto | coluna de ações do MDF-e autorizado |
| Aba de pesquisa de NFC-e e NF-e | `admin/fiscal.html`, busca por número, chave, CPF ou pedido |
| Campo fiscal com NFC-e, NF-e, MDF-e e tipo de nota | mesma tela + "Tipos de nota" (55, 65, brinde, venda externa) |
| Imprimir NF-e e MDF-e em A4 | botão "A4" nas duas telas |
| Aviso de vencimento de certificado + envio pelo ADM | faixa em `admin/fiscal.html` e em Configurações › Fiscal |
| Tirar emissão automática de NFC-e | desligada por padrão; interruptor em Configurações › Fiscal |
| Entregas: valores e km por cidade | Configurações › Entregas |

### Financeiro

| Pedido do cliente | Onde está |
|---|---|
| Conciliação de caixa com taxas e prazos | `admin/conciliacao.html` |
| Campo a receber | coluna "A receber" na conciliação e em Contas |
| Contas a pagar, a receber e extrato | `admin/contas.html` |
| OpenPix dentro do sistema, no financeiro | `admin/cobrancas.html` |
| Link de pagamento com verificação | mesma tela: cobrança gera link, baixa automática |

### Configurações e administração

| Pedido do cliente | Onde está |
|---|---|
| Mover usuários e permissões para configurações | Configurações › Usuários |
| Ordenar lojas na página de escolher estabelecimento | Configurações › Lojas, arrastando |
| Reduzir o layout de estabelecimentos para uma página | opção "mostrar todas em uma página só" |
| Horário das lojas editável | Configurações › Lojas |
| Formas de entrega e retirada por unidade | mesma aba (Ponta Porã, Itaporã e Maracaju sem retirada) |
| Formas de pagamento por canal (balcão / cardápio) | Configurações › Pagamentos |
| Habilitação de forma de pagamento por loja | mesma aba, coluna Lojas |
| Reordenar formas de pagamento | setas na mesma tabela; a ordem vale no site e no PDV |
| Ampliar configurações da impressora, setores e vias | Configurações › Impressão |
| Fila de impressão online (imprimir pelo celular) | mesma aba |
| 5% no dinheiro editável por cidade | Configurações › Descontos |
| Módulo de funcionários, ponto e folha | `admin/funcionarios.html` |
| Marketing: templates, disparo, recuperação | `admin/marketing.html` |
| Integrações e onde achar os códigos | `admin/integracoes.html` |
| Relatório de pedidos por item, cliente com mais pedidos, ticket | `admin/relatorio-produtos.html` e `relatorio-clientes.html` |
| Acessos ao site nas métricas | KPI na visão geral e coluna no relatório de vendas |

### Site (visão do cliente)

| Pedido do cliente | Onde está |
|---|---|
| Botão para voltar a escolher unidade, login e pedidos | menu "Minha conta" no cabeçalho das quatro páginas |
| Nas unidades sem catálogo completo, mostrar só planos | cardápio filtra pela cidade e explica o porquê |
| Fotos dos produtos dentro dos planos | montagem do plano no modal, com foto e kcal de cada sabor |
| Contador de refeições e botão de concluir | rodapé fixo da montagem |
| Complementos de lanche na tela do produto | bloco "Compre também" |
| Melhorar a visão no PC | seções de borda a borda, grade até 5 colunas, hero com os planos |

---

## O que não é tela — precisa da equipe de back-end

Estes itens do backlog são **comportamento de servidor ou correção de dados**, não
desenho de interface. As telas já mostram onde o resultado aparece, mas a causa está
na regra por trás:

1. **Suprimento de R$ 114 não somou** no caixa — cálculo do fechamento.
2. **Caixa 9306 não vinculado** e **pedidos em dinheiro dos caixas 30 e 31 sem vínculo**
   — chave estrangeira do pedido para o caixa aberto na hora.
3. **Pedido 9341 vinculado ao dia 30/07** — data de referência do caixa.
4. **Ao abrir para conferir, altera a data de abertura** — a conferência está
   gravando quando deveria só ler.
5. **Caixas aparecem um dia depois** — fuso ou data de corte do relatório.
6. **Sangria não se atrela ao caixa** — mesma origem do item 2.
7. **Pixels do site × Facebook puxando origem errada** (pedido aparecendo como IG)
   — parâmetro de origem no checkout.
8. **Atualizar lista de clientes importada do PD** — migração de dados.
9. **Transferir os acessos do link da Prefiro para o atual da Fit** — migração.
10. **iFood: vincular o mesmo cliente entre pedidos** — casamento por telefone/CPF.
11. **Forma de pagamento do iFood espelhando como crédito online** — mapeamento de
    formas na integração. *(A tela já prevê "Pagamento online iFood" separado do
    cartão online da Rede — falta o de‑para na integração.)*

Também dependem de serviço externo, mesmo com a tela pronta: emissão real na SEFAZ,
geocodificação de endereço, roteirizador, disparo de WhatsApp, relógio de ponto e a
ponte de impressão térmica.

---

## Arquivos

```
sistema/
├─ index.html                  redireciona para o login
├─ login.html                  escolha do perfil + acesso
│
├─ pdv/                        GESTÃO DE CAIXA
│  ├─ painel.html              pedidos em esteira ou lista
│  ├─ novo-pedido.html         atendimento: catálogo, comanda, pagamento
│  ├─ clientes.html            busca e cadastro rápido
│  ├─ entregas.html            entregas do dia, rotas e coletas
│  └─ caixa.html               abertura, lançamentos, conferência, fechamento
│
├─ admin/                      GESTÃO COMPLETA (32 telas)
│  ├─ visao-geral.html         painel inicial
│  ├─ pedidos.html · carrinhos.html · clientes.html · cupons.html
│  ├─ produtos.html · categorias.html · complementos.html · banners.html
│  ├─ estoque.html · movimentacoes.html · transferencias.html · producao.html
│  ├─ rotas.html · frota.html · fiscal.html · mdfe.html
│  ├─ caixas.html · lancamentos.html · conciliacao.html · contas.html
│  ├─ cobrancas.html · custos.html
│  ├─ relatorio-vendas.html · relatorio-produtos.html
│  ├─ relatorio-clientes.html · relatorio-operacao.html
│  ├─ marketing.html · unidades.html · funcionarios.html
│  ├─ integracoes.html · configuracoes.html
│
└─ assets/
   ├─ css/sistema.css          todo o visual, em um arquivo
   ├─ js/ui.js                 casca, tabela viva, gráficos, janela, recado
   ├─ js/pedido.js             ações de pedido (status, nota, pagamento, impressão)
   ├─ js/cliente.js            cadastro, completude e endereços
   ├─ js/caixa.js              abertura, lançamento, conferência, fechamento
   ├─ js/rota.js               montagem de rota e mapa numerado
   ├─ js/dados.js              dados de demonstração
   ├─ js/catalogo.js           catálogo real exportado do site (88 itens)
   └─ img/                     logo e fotos dos produtos
```

---

## Para quem for implantar

### 1. A casca é montada por JavaScript

Cada página tem só isto no corpo:

```html
<div id="casca"></div>
<script src="../assets/js/catalogo.js"></script>
<script src="../assets/js/dados.js"></script>
<script src="../assets/js/ui.js"></script>
<script>
  FFUI.casca({ area: 'admin', ativo: 'produtos' });
  document.getElementById('conteudo').innerHTML = /* … */;
</script>
```

O mapa de navegação inteiro está em duas constantes no topo do `ui.js`:
**`NAV_ADMIN`** e **`NAV_PDV`**. Mexer no menu é mexer só ali.

### 2. Um componente resolve quase toda lista

`FFUI.tabelaViva(seletor, config)` entrega busca, filtros, ordenação por coluna,
filtro por letra, paginação (20/50/100/500) e exportação para CSV:

```js
FFUI.tabelaViva('#lista', {
  colunas: [{ rotulo: 'Cliente', chave: 'nome', celula: c => c.nome }],
  dados: FF.clientes,
  busca:  { campos: ['nome', 'fone'], placeholder: 'Nome ou telefone' },
  filtros:[{ rotulo: 'Cidade', chave: 'cidade', opcoes: ['Dourados', 'Itaporã'] }],
  chips:  { chave: 'etapa', todos: 'Todos' },
  alfabeto: 'nome',
  exportar: 'clientes',
  aoClicar: c => abrirFicha(c)
});
```

Trocar essa função por uma que fale com a API de vocês liga quase todas as listas de
uma vez.

### 3. Os dados estão separados do layout

Nada está escrito no HTML. Tudo vem de `window.FF` (`dados.js`) e
`window.FF_CATALOGO` (`catalogo.js`). Substituir esses dois arquivos por respostas da
API com o mesmo formato faz o protótipo virar sistema. As chaves estão comentadas
dentro dos arquivos.

### 4. Botões que ainda não têm back-end

Todos carregam `data-demo="mensagem"` e só mostram um aviso. Procurar por `data-demo`
lista tudo que falta ligar.

### 5. Componentes prontos no `ui.js`

| Função | O que faz |
|---|---|
| `U.casca({area, ativo})` | menu lateral + topo (ou barra do PDV) |
| `U.cabeca({titulo, sub, trilha, acoes})` | cabeçalho da tela |
| `U.kpis([...])` | faixa de indicadores |
| `U.tabelaViva(...)` / `U.tabela(...)` | listas com e sem estado |
| `U.selo(status)` | pastilha colorida por situação |
| `U.grafLinha / grafBarras / rosca / ranking` | gráficos em SVG puro |
| `U.janela({titulo, corpo, rodape})` | modal |
| `U.confirmar({...})` | confirmação com Promise |
| `U.recado(texto)` | aviso flutuante |
| `U.botaoZap(fone, texto)` | botão de WhatsApp já formatado |
| `U.atualizacaoAutomatica(fn)` | atualiza a tela sozinha, com indicador |
| `U.brl / num / pct` | formatação em pt-BR |

Módulos: `FFPedido` (status, nota, pagamento, impressão, cancelamento),
`FFCliente` (cadastro, completude, endereços), `FFCaixa` (abertura, lançamento,
conferência, fechamento às cegas), `FFRota` (montagem e mapa).

---

## Acessibilidade e responsivo

- Navegação por teclado com foco visível em tudo que é clicável.
- `aria-pressed`, `aria-selected`, `aria-expanded` e `role="switch"` nos controles.
- Menu lateral vira gaveta abaixo de 1000 px; tabelas rolam dentro do próprio cartão.
- `@media print` esconde menu, filtros e paginação — qualquer tela sai limpa no papel.
- `prefers-reduced-motion` respeitado.

---

## O que ainda depende de vocês

- **Dados reais.** Os números são plausíveis, mas inventados. Nenhum nome de cliente
  aqui é real.
- **Regras de negócio.** Prazo de preparo, política de cancelamento, quem pode dar
  desconto e limite de sangria estão desenhados na tela, não implementados.
- **Certificado e SEFAZ**, **roteirizador**, **WhatsApp API**, **relógio de ponto** e
  **ponte de impressão** são integrações de back-end.
- **Artes dos planos com preço impresso.** Ao reajustar, troque também a imagem —
  o valor aparece na foto.