Pular para o conteúdo principal

Cabeçalho

Visão Geral​

Este arquivo define o componente CatalogSearchAndAddSection, responsável por fornecer a interface de busca, seleção de filtros e configuração de visualização para o catálogo de produtos. Ele integra diversos controles de UI, lógica de permissão e interações com o estado global via Redux.

⚙️ Principais Funções e Componentes​

  • ComponentCard: Wrapper visual para o bloco de busca/filtros.
  • TextField, Select, Autocomplete, FormControl: Inputs para busca e seleção de cliente, empresa, tipo de operação, tipo de negociação, tabela de preço, centro de resultados etc.
  • Checkboxes: Filtros adicionais como "Promoção", "Comprados", "Não Comprados", "Último Pedido", "Mais Vendidos", "Com Estoque", "Perfil".
  • SearchPreferences, SearchPartnerModal, CentroResultadosModal: Modais e componentes auxiliares para preferências de busca, seleção de parceiro/cliente e centro de resultados.
  • Redux Selectors e Actions: Uso de useSelector para acessar dados (catálogo, permissões, usuário, empresas, tabelas de preço) e useDispatch para disparar ações (alterar empresa, parceiro, tipo de operação, filtros).
  • Permissões: Exibição de campos/filtros personalizada por empresa via permission.permissionByCompany.isDisan(), isChrisMedic(), isNeoDistribuidora(), isMakena(), isVinicolaGaribaldi() etc.
  • Debounce: Busca de produtos otimizada com debounce para evitar requisições excessivas.
  • Filtros Dinâmicos: Array de checkboxes filtrado dinamicamente conforme permissões e contexto.
  • Chips: Exibe os filtros ativos como chips.

⚡ Requisitos Funcionais​

  • Busca de Produtos: Campo principal para busca textual (código, descrição, marca).
  • Seleção de Cliente/Parceiro: Campo condicional conforme permissões da empresa.
  • Seleção de Empresa: Exibido para empresas com múltiplas opções/regras específicas.
  • Seleção de Tabela de Preço: Exibido para empresas como Disan ou NeoDistribuidora.
  • Seleção de Tipo de Operação e Negociação: Inputs dinâmicos conforme contexto/permissões.
  • Centro de Resultados: Campo específico para empresas Makena.
  • Filtros Avançados: Checkboxes com lógica condicional.
  • Chips de Filtros Ativos: Visualização dos filtros aplicados.
  • Reset de Filtros: Botão/função para limpar todos os filtros e seleções.
  • Modais de Configuração: Preferências de busca, seleção de parceiro e centro de resultados.
  • Integração com Redux: Todas as ações e seleções sincronizadas globalmente.

🧠 Lógica de Permissões​

A lógica de permissões determina quais campos, filtros e opções são exibidos/habilitados:

  • isDisan: Exibe campo de tabela de preço.
  • isChrisMedic: Oculta campo de cliente.
  • isNeoDistribuidora: Exibe empresa e tabela de preço vinculada.
  • isMakena: Exibe campo de centro de resultados.
  • isVinicolaGaribaldi: Define valores padrão para empresa e tipo de operação.
  • OCULTAINFOEST: Oculta filtro "Com Estoque" quando ativo.

⚙️ Principais Customizações​

  • Debounced Search: Busca disparada com debounce (ex.: 1s), ajustável por empresa (ex.: Baratao).
  • Filtros Dinâmicos: Checkboxes filtrados conforme permissões e contexto para exibir apenas opções válidas.
  • Seleção de Parceiro/Cliente: Modal de busca e seleção integrado ao estado global.
  • Seleção de Empresa/Tabela de Preço: Sincronização entre empresa selecionada e tabela de preço (especialmente para NeoDistribuidora).
  • Chips de Filtros: Visualização dos filtros ativos para melhor UX.

🧩 Estrutura do Componente​

// ... existing code ...
const CatalogSearchAndAddSection: React.FC<Props> = ({
  onViewChange,
  onSearch,
  onFilter,
  onReset,
}) => {
  // ... estados, seletores, lógica de permissões, handlers ...
  return (
    <ComponentCard>
      <section className="flex items-center justify-between flex-wrap gap-2">
        <div className="flex items-center flex-wrap gap-3">
          {/* Campo de busca principal */}
          {/* Campos condicionais: Cliente, Empresa, Tabela de Preço, Centro de Resultados, Tipo de Operação, Tipo de Negociação */}
          {/* Checkboxes de filtros dinâmicos */}
        </div>
        {/* Chips de filtros ativos */}
        {/* Botão de reset */}
        {/* Modais de configuração */}
      </section>
    </ComponentCard>
  )
}
// ... existing code ...

🧾 Observações​

  • O componente é altamente customizável e adaptável ao contexto do usuário/empresa.
  • A lógica de permissões garante que o usuário veja apenas opções relevantes.
  • A integração com Redux reflete globalmente as seleções e filtros.
  • O uso de debounce e filtragem dinâmica melhora a performance e a experiência do usuário.