# Ajuste do formulario de clientes

## Prompt

Agora preciso que ajuste a tela de formulario de clientes, que antes era um dialog.

Precisa se comportar como uma tela, bem estruturada assim como a tela de empresas, e tirar esse padrao de dialog.

## Resposta

Foi ajustado o componente `front/src/views/app/cadastros/clientes/FormClienteModal.vue` para renderizar como tela quando usado no fluxo de cadastro/edicao:

- quando `standalone` estiver ativo, o componente usa `section` em vez de `Dialog`;
- o layout passou a usar shell, abas, secoes e grid responsivo no mesmo padrao estrutural da tela de empresas;
- os botoes de cancelar e salvar foram movidos para dentro da estrutura do formulario, com icones pequenos e tooltips;
- o comportamento como dialog foi mantido apenas para usos externos que ainda chamam o mesmo componente como modal, como o fluxo de vendas;
- foram adicionados os campos `cnpj` e `data_nascimento` ao schema do formulario para manter os valores usados na tela alinhados com a validacao.

## Validacoes

- Executado `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue` dentro de `front/`, sem erros reportados.
- Build do frontend nao foi executado porque o fluxo do projeto pede confirmacao antes de rodar build.

## Ajuste complementar

Prompt complementar: RG e Email devem ficar lado a lado. O componente `InputMaskDefault` nao estava aparecendo, possivelmente por falta de import.

Resposta complementar:

- importado `InputMaskDefault` localmente no formulario de clientes, pois ele nao esta registrado globalmente em `front/src/main.ts`;
- reorganizados os campos de Pessoa Fisica para exibir `RG` e `Email` lado a lado;
- reorganizados `CPF` e `Celular` na linha seguinte, mantendo os campos com mascara visiveis;
- validado novamente com `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue`;
- validado `git diff --check` sem problemas de whitespace.

## Ajuste de CEP

Prompt complementar: na parte de endereco, adicionar busca por CEP com autopreenchimento e bloquear o select de cidades enquanto nao houver Estado.

Resposta complementar:

- adicionado campo de CEP com `InputGroup`, `InputMask` e botao de busca por lupa;
- adicionada busca no ViaCEP ao clicar na lupa ou pressionar Enter no campo de CEP;
- preenchidos automaticamente `logradouro`, `bairro`, `complemento`, `estado` e `cidade` quando o CEP for encontrado;
- carregadas as cidades do estado retornado pelo CEP antes de preencher a cidade;
- o select de cidade agora fica desabilitado enquanto `estado` estiver vazio;
- validado novamente com `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue`;
- validado `git diff --check` sem problemas de whitespace.

## Ajuste de espacamento

Prompt complementar: a tela tem espacamento desnecessario e o card sai dos limites da tela criando scroll indevido.

Resposta complementar:

- removida a altura fixa de `26rem` do painel das abas do formulario de clientes;
- a secao agora usa altura automatica com `max-height` apenas para proteger contra conteudo maior que o viewport;
- reduzidos paddings, gaps e altura da area de acoes para compactar o formulario;
- mantido scroll interno apenas quando o conteudo realmente exceder a area disponivel;
- validado novamente com `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue`;
- validado `git diff --check` sem problemas de whitespace.

## Correcao do ajuste de espacamento

Prompt complementar: o espacamento citado era externo ao card/tela, nao entre os inputs; os inputs ficaram muito proximos.

Resposta complementar:

- restaurado o espacamento interno entre inputs do formulario de clientes;
- mantida a remocao da altura fixa do painel para evitar espaco vazio artificial;
- adicionada a classe `cadastro-form-page` ao `Container` da tela de cadastro para reduzir o espacamento externo da tela;
- reduzido o espacamento do cabecalho da tela de cadastro sem alterar o respiro dos campos;
- validado `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue src/views/app/cadastros/CadastroView.vue`;
- validado `git diff --check` sem problemas de whitespace.

## Correcao de altura do card

Prompt complementar: o card do formulario cresce e diminui de acordo com o conteudo, e isso nao deve acontecer.

Resposta complementar:

- corrigido o painel das abas do formulario de clientes para ter altura estavel por viewport;
- adicionada a variavel `--cliente-form-panel-height` com `clamp(20rem, calc(100vh - 15rem), 26rem)`;
- aplicadas `height` e `min-height` fixas no painel, na secao e no tab panel;
- o conteudo excedente agora rola dentro da aba, sem alterar a altura do card ao alternar entre conteudos;
- validado `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue src/views/app/cadastros/CadastroView.vue`;
- validado `git diff --check` sem problemas de whitespace.

## Correcao de overflow da tela

Prompt complementar: a altura fixa anterior fazia o card sair do limite da tela e criava scroll na tela inteira.

Resposta complementar:

- removido o calculo de altura fixa baseado diretamente no viewport dentro do formulario;
- a tela `CadastroView` agora limita sua propria altura com `height: calc(100dvh - 6rem)` e `overflow: hidden`;
- o formulario de clientes passou a usar layout flex para ocupar somente o espaco disponivel no container pai;
- `TabPanels`, `TabPanel` e a secao interna agora usam `min-height: 0` e rolagem apenas dentro da area da aba;
- as acoes do formulario ficam fixas no rodape do card, sem aumentar a altura total da tela;
- validado `npx eslint src/views/app/cadastros/clientes/FormClienteModal.vue src/views/app/cadastros/CadastroView.vue`;
- validado `git diff --check` sem problemas de whitespace.