# Guia de Implementação: Modal de Cadastro Rápido de Distribuidor

Este guia mostra como aplicar a funcionalidade de cadastro rápido de distribuidor em todas as telas de itens do kit manual.

## Componentes Reutilizáveis Criados

### 1. Hook: `useDistribuidorModal`

- **Localização**: `/hooks/useDistribuidorModal.tsx`
- **Função**: Gerencia estado e lógica do modal de distribuidor
- **Retorna**: Estados e funções para controlar o modal

### 2. Componente: `DistribuidorLabel`

- **Localização**: `/components/common/DistribuidorLabel.tsx`
- **Função**: Label com botão "+" integrado
- **Props**: `text`, `onAddClick`, `buttonSize`

### 3. Componente: `DistribuidorModal`

- **Localização**: `/components/common/DistribuidorModal.tsx`
- **Função**: Modal reutilizável para cadastro de distribuidor
- **Props**: `isOpen`, `isLoading`, `onClose`, `onSubmit`

### 4. Componente: `DistribuidorAddButton`

- **Localização**: `/components/common/DistribuidorAddButton.tsx`
- **Função**: Botão "+" estilizado
- **Props**: `onClick`, `size`, `className`

## Template de Implementação

### 1. Para Formulários (FormXXX.tsx)

```tsx
// 1. Imports necessários
import { DistribuidorLabel } from "@/components/common/DistribuidorLabel";
import { DistribuidorModal } from "@/components/common/DistribuidorModal";
import { useDistribuidorModal } from "@/hooks/useDistribuidorModal";

const FormXXX = ({
  // props existentes...
  onDistribuidorAdded, // nova prop opcional
  ...rest
}: any) => {
  // 2. Estados existentes...

  // 3. Função para recarregar distribuidores (se necessário)
  const recarregarDistribuidores = async () => {
    try {
      const res = await listarDistribuidores();
      setDistribuidores(
        res.filter(
          (distribuidor: any) => distribuidor.isFornecedor_distribuidor == "0"
        )
      );
    } catch (error) {
      console.error("Erro ao recarregar distribuidores:", error);
    }
  };

  // 4. Hook do modal
  const {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
  } = useDistribuidorModal(onDistribuidorAdded || recarregarDistribuidores);

  return (
    <form>
      {/* 5. Atualizar o campo de distribuidor */}
      <InputSelectComponent
        label={
          <DistribuidorLabel
            text="Distribuidor/Fornecedor"
            onAddClick={handleOpenDistribuidorModal}
          />
        }
        name="codDistribuidor_item"
        // outras props...
      />

      {/* outros campos... */}

      {/* 6. Adicionar modal no final do JSX */}
      <DistribuidorModal
        isOpen={showDistribuidorModal}
        isLoading={isDistribuidorLoading}
        onClose={handleCloseDistribuidorModal}
        onSubmit={handleDistribuidorSubmit}
      />
    </form>
  );
};
```

### 2. Para Telas de Consulta (xxx.tsx)

```tsx
// 1. Imports necessários
import { DistribuidorLabel } from "@/components/common/DistribuidorLabel";
import { DistribuidorModal } from "@/components/common/DistribuidorModal";
import { useDistribuidorModal } from "@/hooks/useDistribuidorModal";

const ConsultaXXX = () => {
  // 2. Estados existentes...

  // 3. Função para recarregar distribuidores
  const recarregarDistribuidores = async () => {
    try {
      const res = await listarDistribuidores();
      setDistribuidores(
        res.filter(
          (distribuidor: any) => distribuidor.isFornecedor_distribuidor == "0"
        )
      );
    } catch (error) {
      console.error("Erro ao recarregar distribuidores:", error);
    }
  };

  // 4. Hook do modal
  const {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
  } = useDistribuidorModal(recarregarDistribuidores);

  return (
    <>
      <div className="flex flex-row gap-2 flex-wrap pb-3">
        {/* 5. Atualizar o campo de filtro de distribuidor */}
        <InputSelectComponent
          name="codDistribuidor_item"
          label={
            <DistribuidorLabel
              text="Distribuidores/Fornecedores"
              onAddClick={handleOpenDistribuidorModal}
              buttonSize={10}
            />
          }
          // outras props...
        />

        {/* outros filtros... */}
      </div>

      <ReactTable>
        {/* configuração da tabela... */}
        Form=
        {(props) => (
          <FormXXX
            {...props}
            // props existentes...
            onDistribuidorAdded={recarregarDistribuidores}
          />
        )}
      </ReactTable>

      {/* 6. Adicionar modal no final */}
      <DistribuidorModal
        isOpen={showDistribuidorModal}
        isLoading={isDistribuidorLoading}
        onClose={handleCloseDistribuidorModal}
        onSubmit={handleDistribuidorSubmit}
      />
    </>
  );
};
```

## Telas para Aplicar

- ✅ Inversor (já implementado)
- ✅ Cabo (exemplo implementado)
- ⏳ Aterramento
- ⏳ Conector
- ⏳ Disjuntor
- ⏳ DPS
- ⏳ Estação
- ⏳ Módulo

## Vantagens da Solução

1. **Reutilização**: Componentes podem ser usados em qualquer tela
2. **Consistência**: Mesmo comportamento e visual em todas as telas
3. **Manutenibilidade**: Mudanças centralizadas nos componentes base
4. **Flexibilidade**: Pode ser personalizado com props
5. **Performance**: Hook otimizado para não recriar funções desnecessariamente

## Observações Importantes

- O filtro `isFornecedor_distribuidor` pode variar entre telas:
  - "0" para distribuidores
  - "1" para fornecedores
  - Sem filtro para ambos
- Ajustar o `buttonSize` conforme necessário (10 para filtros, 14 para formulários)
- Verificar se a tela já tem a prop `onDistribuidorAdded` antes de implementar