# Padrão de tela do admin KeepMove

Toda tela nova (e toda tela retocada) segue este padrão. O objetivo é um só:
**nenhuma tela ou modal "solto"**, tudo com a mesma cara e o mesmo comportamento.

## Regras inegociáveis

1. **Nada de cartão único gigante.** A tela é uma pilha de cartões separados
   sobre o fundo cinza (`x-baseview` cuida do fundo e do título).
2. **Componentes `x-km.*` sempre.** Markup de cartão/KPI/tabela/filtro/modal
   escrito à mão é dívida: use o componente.
3. **Purge do Tailwind**: o bundle é compilado e classes novas NÃO existem
   (ex.: `lg:grid-cols-6`, `px-5`, `py-2.5`, `bg-amber-*`). Na dúvida, use os
   componentes (já são purge-safe) ou estilo inline.
4. **Sem travessão em texto nenhum** (em/en dash). Separador é `·`, vírgula ou
   dois-pontos. Placeholder de valor vazio é `·`.
5. **Datas sempre `d/m/Y H:i`.** Nunca formato em inglês.
6. **Tabela nunca corta**: o wrapper do `x-km.tabela` rola sozinho; a página
   não rola de lado (o grid do layout já está protegido pela skin).
7. **Texto longo em célula**: não trate na tela; o `skin.js` clipa sozinho e dá
   popover de cópia. Célula de texto puro basta.
8. **Cor é significado, não decoração**: verde=ok/dinheiro do motorista,
   âmbar=atenção/pendente, vermelho=crítico/recusa, azul=informativo/plataforma.
   Chips sempre em tinta suave (`x-km.chip`), nunca sólido berrante.

## O shell (v5, linguagem Grok/Cloudflare via Mobbin)

Sidebar CLARA e silenciosa: a marca vive no tile do logo e nos botões
primários, nunca na parede. Item ativo = fundo verde-claro + barra de 3px.
Seções em rótulos minúsculos cinza. Tudo implementado na skin.css (seção
"shell v5") por cima da estrutura existente: NENHUM blade do shell muda.
Se criar item de menu novo, use os componentes x-menu-item/x-group-menu-item
de sempre; a skin cuida do visual.

## A anatomia de uma tela

```blade
@section('title', __('Nome da Tela'))
<div>
    <x-baseview title="{{ __('Nome da Tela') }}">

        {{-- 1. aviso de contexto, só se houver --}}
        <x-km.aviso tipo="atencao">{{ __('Modo teste ligado.') }}</x-km.aviso>

        {{-- 2. régua de números (3 por linha) --}}
        <x-km.kpis>
            <x-km.kpi valor="12" rotulo="{{ __('Aguardando') }}" cor="#d97706" />
            <x-km.kpi valor="R$ 133,21" rotulo="{{ __('Recebido') }}" />
        </x-km.kpis>

        {{-- 3. filtros, se houver --}}
        <x-km.filtros>
            <x-km.filtro rotulo="{{ __('De') }}">
                <input type="date" wire:model.lazy="de" class="text-sm border-gray-300 rounded-md" />
            </x-km.filtro>
        </x-km.filtros>

        {{-- 4. o conteúdo: cartões e/ou tabelas --}}
        <x-km.card titulo="{{ __('Bloco de conteúdo') }}">...</x-km.card>

        <x-km.tabela titulo="{{ __('Lista') }}">
            <x-slot name="cabecalho">
                <th class="px-3 py-2" style="text-align:left">{{ __('Data') }}</th>
                <th class="px-3 py-2" style="text-align:right">{{ __('Valor') }}</th>
            </x-slot>
            <tr>
                <td>02/08 12:39</td>
                <td style="text-align:right">R$ 7,00</td>
            </tr>
        </x-km.tabela>

    </x-baseview>
</div>
```

## Modal padrão

```blade
<x-km.modal :mostrar="$modalAberto" titulo="{{ __('Detalhes') }}">
    <x-km.linha rotulo="{{ __('Subtotal') }}" valor="R$ 7,00" />
    <x-km.linha rotulo="{{ __('Taxa') }}" valor="R$ 0,00" />
    <x-km.linha rotulo="{{ __('Total') }}" valor="R$ 7,00" :forte="true" />
    <x-slot name="acoes">
        <button wire:click="fechar" class="px-4 py-2 text-sm border rounded-md">{{ __('Fechar') }}</button>
    </x-slot>
</x-km.modal>
```

Linhas de resumo financeiro (subtotal/total) usam `x-km.linha` SEMPRE, dentro ou
fora de modal: é isso que elimina o resumo espremido.

## Onde vive o quê

- Componentes: `resources/views/components/km/*.blade.php`
- Skin (estilo global, carrega por último): `public/css/skin.css` (+ `?v=N` no
  link em `layouts/partials/styles.blade.php`, subir o N a cada mudança)
- Comportamento global (clip+popover): `public/js/skin.js`
- Referências completas do padrão: Central de Operações
  (`operations_center.blade.php`), esteira (`driver_document_review.blade.php`)
  e relatório do split (`settings/asaas-report.blade.php`).

## Estado da conversão

| Tela | Estado |
| --- | --- |
| Dashboard, Central, Esteira de documentos | no padrão |
| Relatório do split (Asaas) | convertida |
| Validação documental (docval) | convertida |
| Ocorrências | convertida |
| Planejador de Lançamento | convertida |
| Dashboard novo (widgets Stripe-like arrastáveis) | reconstruído |
| Ficha do motorista | reconstruída (padrão Clerk/1Password) |
| Login/autenticação | modernizado pela skin |
| Telas do produto base (listas rappasoft) | cobertas pela skin |
| Formulários profundos de configuração do produto base | cobertos pela skin; redesenho sob demanda |