# Refatoração do formulário de empresas ## Prompt Agora vamos trabalhar no form. Veja a tela `front/src/views/app/cadastros/empresas/FormEmpresaModal.vue`. Antes esse form ficava em um Dialog, isso foi alterado para ser um tela própria, porém quando foi feito isso simplesmente pegou o código e colocou como tela. Foi um trabalho bem porco feito, a tela ficou quebrada, com espaçamentos desnecessário. Analise essa tela e refaça completamente. ## Resposta O arquivo `FormEmpresaModal.vue` foi refeito para funcionar melhor como tela própria, mantendo compatibilidade com o wrapper genérico `CadastroView.vue` e com o uso anterior em Dialog quando `standalone` for falso. Principais ajustes: - Remoção da estrutura visual herdada do Dialog como base da página. - Organização do formulário em seções com tabs compactas: Dados básicos, Endereço e Tributação. - Redução de espaçamentos desnecessários e botões compactos. - Grid de campos reorganizado para melhor leitura. - Toggles posicionados em linha própria abaixo dos inputs. - Ações de salvar/cancelar movidas para um rodapé limpo do formulário. - Remoção do `console.log` do watch de CNPJ. - Carregamento das cidades ao abrir uma empresa para edição. - Upload de certificado ajustado para arquivo único. Validações executadas: - ESLint direcionado ao arquivo alterado. - Type-check do frontend com `vue-tsc --noEmit`. - Checagem de whitespace do diff executada. ## Prompt complementar O select de cidade deve ficar bloqueado enquanto nao houver estado selecionado. ## Resposta complementar O select Cidade passou a receber `:disabled="!values.uf"`, ficando bloqueado enquanto nao houver Estado selecionado no formulario. Tambem foi ajustado o carregamento de cidades para limpar o campo Cidade quando o Estado for removido. Validacoes executadas: - ESLint direcionado ao arquivo `FormEmpresaModal.vue`. - Type-check do frontend com `vue-tsc --build --pretty false`. - Build frontend nao executado, pois depende de confirmacao do usuario conforme `AGENTS.md`. ## Prompt complementar No form de fiscal, o toggle de homologacao deve ficar no final ao inves do lado. ## Resposta complementar O toggle de homologacao foi movido para o final do grid da aba Fiscal, depois dos campos CSC e series fiscais. Ele permanece em linha propria (`span-12`) e nao fica mais ao lado dos campos Senha/CRT. Validacoes executadas: - ESLint direcionado ao arquivo `FormEmpresaModal.vue`. - Type-check do frontend com `vue-tsc --build --pretty false`. - Build frontend nao executado, pois depende de confirmacao do usuario conforme `AGENTS.md`. ## Prompt complementar A parte de endereco e fiscal tambem estao bem feias. No endereco preciso que aplique a pesquisa por CEP, transforme o campo de CEP em um inputgroup onde pode pesquisar pelo CEP e assim preenche os dados. Estado e Cidades devem estar lado a lado. ## Resposta complementar A aba Endereco foi reorganizada com grid SCSS local, removendo as classes antigas `field col-*` dessa aba. O campo CEP virou um `InputGroup` com mascara e botao de pesquisa. Como nao existe rota backend de CEP no projeto e as regras impedem alterar rotas sem aprovacao, a consulta foi feita no front via ViaCEP usando `fetch`, sem adicionar dependencias. Ao pesquisar o CEP, o formulario preenche CEP, logradouro, bairro, complemento, UF e cidade. Quando a UF vem no retorno, as cidades sao carregadas antes de preencher o campo Cidade. A aba Fiscal tambem foi migrada para grid SCSS local, com certificado em linha inteira, senha e CRT lado a lado, toggle em linha propria e campos CSC/series distribuidos por spans consistentes. Tambem foi limitado o seletor `nth-of-type` da aba Dados basicos ao grid correto, evitando que mudancas de layout em uma aba afetem as outras. O card continua com altura fixa no desktop e rolagem interna por aba. Validacoes executadas: - ESLint direcionado aos arquivos alterados. - Type-check do frontend com `vue-tsc --build --pretty false`. - Build frontend nao executado, pois depende de confirmacao do usuario conforme `AGENTS.md`. ## Prompt complementar A parte de endereço e fiscal também estão bem feias. No endereço preciso que aplique a pesquisa por CEP, transforme o campo de CEP em um inputgroup onde pode pesquisar pelo CEP e assim preenche os dados. Estado e Cidades devem estar lado a lado. ## Resposta complementar A aba Endereço foi reorganizada com grid SCSS local, removendo as classes antigas `field col-*` dessa aba. O campo CEP virou um `InputGroup` com máscara e botão de pesquisa. Como não existe rota backend de CEP no projeto e as regras impedem alterar rotas sem aprovação, a consulta foi feita no front via ViaCEP usando `fetch`, sem adicionar dependências. Ao pesquisar o CEP, o formulário preenche CEP, logradouro, bairro, complemento, UF e cidade. Quando a UF vem no retorno, as cidades são carregadas antes de preencher o campo Cidade. A aba Fiscal também foi migrada para grid SCSS local, com certificado em linha inteira, senha e CRT lado a lado, toggle em linha própria e campos CSC/séries distribuídos por spans consistentes. Também foi limitado o seletor `nth-of-type` da aba Dados básicos ao grid correto, evitando que mudanças de layout em uma aba afetem as outras. O card continua com altura fixa no desktop e rolagem interna por aba. Validações executadas: - ESLint direcionado aos arquivos alterados. - Type-check do frontend com `vue-tsc --build --pretty false`. - Build frontend não executado, pois depende de confirmação do usuário conforme `AGENTS.md`. ## Prompt complementar O campo de CNPJ ainda não aparece na tela. ## Resposta complementar Foi identificada a causa real: `InputMaskDefault` não estava registrado globalmente no `main.ts`, e `FormEmpresaModal.vue` usava esse componente sem import local. Por isso os campos com máscara, incluindo CNPJ, telefone e CEP, não renderizavam. Foi adicionado o import local: ```ts import InputMaskDefault from '@/components/InputMaskDefault.vue'; ``` Validações executadas: - ESLint direcionado ao arquivo alterado. - Type-check do frontend com `vue-tsc --noEmit`. - Checagem de whitespace do diff executada. ## Prompt complementar Vamos melhorar ainda mais o form. Primeiro deixar o CNPJ isolado em uma linha e se transforma em um inputgroup com um botão de pesquisar. Ao digitar o CNPJ pode pesquisar os dados da empresa usando a rota do Backend para isso. Deve completar o form com os dados. Deixe os campos Razão social e Nome Fantasia lado a lado. Inscrição Estadual e Inscrição Municipal lado a lado. Email e telefone lado a lado. ## Resposta complementar O campo CNPJ foi transformado em um `InputGroup` próprio, em linha isolada, com botão de pesquisa. A ação usa `apiService.consultarCNPJ`, que chama a rota `/utils/cnpj/{cnpj}` do backend, e preenche os campos disponíveis no retorno: razão social, nome fantasia, email, telefone, CEP, logradouro, número, complemento, bairro, UF e cidade. O grid da aba Dados básicos foi reorganizado em SCSS para manter: - CNPJ sozinho na primeira linha. - Razão Social e Nome Fantasia lado a lado. - Inscrição Estadual e Inscrição Municipal lado a lado. - Email e Telefone lado a lado. ## Prompt complementar Por que o campo CNPJ não preenche todo espaço definido? ## Resposta complementar O campo CNPJ não preenchia toda a linha porque `.empresa-form__cnpj` ainda tinha `max-width: 28rem`, limitando o `InputGroup` mesmo dentro de uma área de grid que ocupava a linha inteira. Esse limite foi removido e a regra ficou apenas com `width: 100%`. ## Prompt complementar O tamanho do card voltou a crescer e diminuir dependendo da tab. Quando for fazer uma alteração garanta que não atrapalhe outra. ## Resposta complementar O card das abas voltou a ter altura fixa em desktop usando a variável `--empresa-form-panel-height`. A área de conteúdo das tabs agora mantém altura estável e usa rolagem interna quando uma aba tiver mais campos, evitando que o card cresça ou diminua ao trocar de tab. O ajuste mantém a correção anterior do CNPJ: o `InputGroup` continua com `width: 100%` e sem `max-width`. Validações executadas: - ESLint direcionado ao arquivo alterado. - Type-check do frontend com `vue-tsc --noEmit`. - Checagem de whitespace do diff executada. - Build frontend não executado, pois depende de confirmação do usuário conforme `AGENTS.md`. ## Prompt complementar Ainda não está bom. O card que contém os campos diminui e cresce de acordo com o conteúdo, isso é feio visualmente, deveria permanecer sempre o mesmo tamanho independente da tab que esteja. ## Resposta complementar O painel das abas do formulário passou a ter altura mínima fixa em desktop, mantendo o card estável ao alternar entre Dados básicos, Endereço e Tributação. Também foram adicionados ajustes de `width: 100%` e `min-width: 0` no formulário, grid e controles PrimeVue para evitar overflow horizontal e campos escapando da área do card. Em telas menores, a altura volta a ser automática para preservar a responsividade e evitar corte de conteúdo. ## Prompt complementar Os botões de salvar e o de sair devem ficar no footer do card que está o form, da forma que fez parece que está no footer da tela. Os campos estão muitos mal distribuídos, há espaço desnecessário. Deixe o formulário em uma estrutura que faça sentido. ## Resposta complementar Os botões de cancelar e salvar foram movidos para dentro do card das abas, como footer do próprio formulário. A distribuição dos campos foi revisada para fechar melhor as 12 colunas do grid: - Dados básicos: CNPJ, razão social e nome fantasia na primeira linha; inscrições na linha seguinte; email e telefone ocupando a linha completa juntos; toggles em linha própria. - Endereço: CEP, logradouro e número na primeira linha; bairro, complemento e estado na segunda; cidade com largura proporcional na linha seguinte. Também foi reduzida a altura mínima do painel para manter estabilidade sem gerar um vazio exagerado. ## Prompt complementar Você está usando SCSS? Se não, mude para sempre usar SCSS. ## Resposta complementar O componente `FormEmpresaModal.vue` já estava usando `