Produtos

Visão Geral

O componente CatalogContent.tsx é o componente principal da tela de catálogo de produtos do sistema Force Web. Ele é responsável por exibir os produtos disponíveis, permitir a busca, filtragem e visualização detalhada dos produtos.

Estrutura Principal

const CatalogContent = () => {
  // Estados e seletores
  // Funções de manipulação
  // Renderização
}

Principais Funcionalidades

• Exibição de Produtos: visualização em dois modos (lista ou grid)
• Busca e Filtragem: por código, descrição, marca e outros campos
• Ordenação: por diferentes campos configuráveis
• Paginação: controla a quantidade de produtos por página
• Visualização Detalhada: modal com detalhes do produto
• Personalização por Empresa: interface adaptada conforme permissões

Estados Principais

• listMode: controla o modo de visualização (lista ou grid)
• currentPage e rowsPerPage: controlam a paginação
• order: controla a ordenação dos produtos
• filters: armazena os filtros aplicados
• search: armazena a configuração de busca
• sortedValues: produtos filtrados e ordenados
• selectedProduct: produto selecionado para visualização detalhada

Fluxo de Dados

• Produtos são carregados do Redux store
• Aplicação de filtros e ordenação conforme interação do usuário
• Exibição dos produtos filtrados na interface
• Interações do usuário (cliques, seleções) atualizam os estados
• Mudanças nos estados provocam re-renderizações e atualizações na UI

Componentes Relacionados

CatalogSearchAndAddSection

Componente responsável pela barra de busca, filtros e controles de visualização do catálogo.

• Principais funcionalidades:

  • Busca de produtos por código, descrição e marca
  • Seleção de parceiro/cliente para visualização de preços específicos
  • Filtros avançados (grupos, marcas, fornecedores, etc.)
  • Alternância entre visualização em lista ou grid
  • Personalização conforme permissões da empresa

• Props:

  • onSearch: função para aplicar busca
  • onViewChange: alterna modo de visualização
  • onFilter: aplica filtros
  • onReset: reseta filtros

ProductsGrid e ProductCard

• ProductsGrid: exibe os produtos em formato de grid (cartões).

  • Funcionalidades: exibição em grid, paginação, controle de quantidade por página
  • Props:
    • products: lista de produtos a serem exibidos
    • rowsPerPage: quantidade por página
    • currentPage: página atual
    • handlePageChange: muda de página
    • handleNumberOfRowsChange: altera quantidade por página
    • handleSelectProduct: seleciona um produto
    • isLoading: indica estado de carregamento

• ProductCard: cartão de produto individual no grid.

  • Funcionalidades: imagem, código, descrição, preço, indicação de promoção, seleção de unidade de medida
  • Props:
    • product: dados do produto
    • imageIp: IP do servidor de imagens
    • handleSelectProduct: seleciona o produto

TableRow

Componente que representa uma linha na tabela de produtos quando no modo lista.

• Funcionalidades: exibição dos dados do produto, seleção de unidade de medida, cálculo de preço conforme unidade, indicação de promoção
• Props:
  • product: dados do produto
  • imageIp: IP do servidor de imagens
  • onRowClick: callback para clique na linha

ProductModal

Componente modal que exibe detalhes completos de um produto selecionado.

• Funcionalidades: informações detalhadas, galeria de imagens, estoque, preço e promoções, histórico de vendas, produtos alternativos, regras de negócio, detalhes fiscais
• Props:
  • open: controla abertura
  • handleClose: fecha o modal
  • product: dados do produto
  • imageIp: IP do servidor de imagens
  • isCreateSale: contexto de criação de venda

Personalizações por Empresa

O componente CatalogContent.tsx implementa diversas personalizações baseadas nas permissões da empresa.

Quantidade de Itens por Página

const [rowsPerPage, setRowsPerPage] = useState(
  permission.permissionByCompany.isZamil() ? '100' : '15'
)

Campos Visíveis na Tabela

const fields: HeaderField[] = [
  // ...
].filter((item) => {
  if (item.field === 'Estoque') return permission.OCULTALOCALEST !== 'S'
  return true
})

Limitação de Produtos Exibidos

if (
  permission?.permissionByCompany?.isMakena() ||
  permission?.permissionByCompany?.isNovolubri?.() ||
  permission?.permissionByCompany?.isGPEmbalagens?.()
) {
  listProducts = filteredAndSorted?.slice(0, 50)
}

Cálculo de Preços Específicos

getProductWithPrice(
  listProducts,
  catalog?.tablePrices,
  catalog?.selectedPartner,
  permission.permissionByCompany?.isGRM() ||
    permission.permissionByCompany?.isBaratao() ||
    // ... outras condições específicas por empresa
)

Fluxo de Dados e Interações

Carregamento Inicial

• Produtos são carregados do Redux store
• Configurações iniciais definidas com base nas permissões

Filtragem e Ordenação

• Um useEffect principal aplica filtros e ordenação
• Filtros: busca textual, grupos, marcas, promoções, etc.
• Ordenação: aplicada conforme configuração do usuário

Renderização Condicional

{listMode ? (
  <Table
    // Configuração da tabela
  />
) : (
  <ProductsGrid
    // Configuração do grid
  />
)}

Interação com Produto

• Ao clicar em um produto, o estado selectedProduct é atualizado, abrindo o modal de detalhes.

{!!selectedProduct && (
  <ProductModal
    open={!!selectedProduct}
    handleClose={() => setSelectedProduct(null)}
    product={selectedProduct}
    imageIp={server?.ipServer as string}
  />
)}

Considerações de Performance

Memoização de Valores

const tableValues = useMemo(() => {
  // Lógica para criar linhas da tabela
}, [sortedValues])

Limitação de Produtos Processados

let listProducts = filteredAndSorted
if (!permission?.permissionByCompany?.isDecorlux) {
  listProducts = filteredAndSorted?.slice(0, 50)
}

Debounce em Operações Custosas

• Debounce implementado em componentes filhos como CatalogSearchAndAddSection.

Conclusão

O componente CatalogContent.tsx é a peça central do módulo de catálogo, orquestrando a exibição, filtragem e interação com produtos. Ele utiliza diversos componentes especializados para criar uma experiência completa de navegação, adaptando-se às necessidades específicas de cada empresa por meio do sistema de permissões.

⚙️ Principais Funções

Função	Descrição
Filtragem e Ordenação	Filtra produtos com base em critérios como promoção, estoque, grupo, marca, fornecedor, produtos comprados, perfil, entre outros. Ordena por colunas definidas dinamicamente.
Controle de Visualização	Alterna entre os modos Tabela (<Table />) e Grade (<ProductsGrid />) conforme o estado listMode.
Busca Avançada	Permite busca multiatributo (código, descrição, marca, pesquisa, referência e código de barras alternativo).
Paginação e Controle de Linhas	Gerencia número de linhas e navegação de páginas com handlePageChange e handleNumberOfRowsChange.
Sincronização de Preços	Atualiza preços de tabela (getTablePrices) conforme permissões e janela de sincronização.
Seleção de Produto	Abre modal de detalhes (<ProductModal />) ao clicar em um produto.
Notificações	Exibe mensagens de sucesso/erro via Toast.

🧩 Principais Componentes Internos

Componente	Descrição
CatalogSearchAndAddSection	Controla ações de filtro, busca e troca de visualização.
Table	Exibe produtos em formato tabular com cabeçalhos ordenáveis e paginação.
ProductsGrid	Mostra produtos em cards, priorizando usabilidade visual.
ProductModal	Exibe detalhes do produto selecionado (imagem, preço, estoque etc.).
Toast	Notificações de feedback para o usuário.
TableRow	Renderiza uma linha de produto dentro da tabela.
Card	Wrapper visual para organização e estilo do conteúdo.

🧰 Hooks e Dependências

Hook	Uso
useSelector	Obtém dados do Redux: servidor, catálogo, permissões e configurações de venda.
useDispatch	Dispara ações assíncronas, como getTablePrices.
useState	Armazena estados locais (modo de exibição, filtros, ordenação etc.).
useEffect	Reexecuta filtragem e ordenação ao alterar dependências.
useMemo	Otimiza a renderização de tableValues, evitando recomputações desnecessárias.

🔗 Integrações e Dependências Externas

Módulo	Finalidade
@mui/material	Controles de interface e eventos (SelectChangeEvent).
react-redux	Conexão com o estado global.
dayjs	Manipulação/comparação de datas (verificação de sincronização).
AuthService	Autenticação/credenciais para requisições de preço.
getProductWithPrice, getProductPrice	Cálculo e aplicação de preços de produtos.
getTablePrices	Atualização dos preços de tabela via Redux.

🧭 Resumo Operacional

Função	Descrição
handleViewChange	Alterna entre Tabela e Grade.
handleFiltersApply / handleFiltersReset	Aplica ou reseta filtros de exibição.
handleSearchApply	Executa busca textual com base nos critérios selecionados.
handleHeaderCellClick	Ordena produtos pela coluna clicada.
handleNumberOfRowsChange / handlePageChange	Controla paginação e densidade de visualização.
fetchJuntoTablePrices	Atualiza tabela de preços condicionalmente.