sar/apps/web/src/cockpits/rep/CatalogPage.tsx

import { useState } from 'react';
import { Table, Input, Select, Space, Typography, Tag } from 'antd';
import type { TableColumnsType } from 'antd';
import type { ProdutoSummary } from '@sar/api-interface';
import { useCatalog, usePautas } from '../../lib/queries/catalog';

const { Title } = Typography;
const { Search } = Input;

function fmtPrice(v: string | null | undefined): string {
  const n = Number(v ?? 0);
  return n > 0 ? n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) : '—';
}

const columns: TableColumnsType<ProdutoSummary> = [
  {
    title: 'Código',
    dataIndex: 'codigo',
    width: 110,
    render: (v: string) => <span style={{ fontVariantNumeric: 'tabular-nums' }}>{v.trim()}</span>,
  },
  {
    title: 'Descrição',
    dataIndex: 'descricao',
    render: (v: string, row: ProdutoSummary) => (
      <div>
        <div style={{ fontWeight: 500 }}>{v.trim()}</div>
        {row.grupo && <div style={{ fontSize: 12, color: '#888' }}>{row.grupo.trim()}</div>}
      </div>
    ),
  },
  {
    title: 'Und',
    dataIndex: 'unidade',
    width: 60,
    align: 'center',
    render: (v: string | null) => v ?? '—',
  },
  {
    title: 'Marca',
    dataIndex: 'marca',
    width: 130,
    render: (v: string | null) => (v ? <Tag>{v.trim()}</Tag> : null),
  },
  {
    title: 'Preço',
    dataIndex: 'vlPreco1',
    width: 120,
    align: 'right',
    render: (v: string) => (
      <span style={{ fontWeight: 600, color: Number(v) > 0 ? '#389e0d' : '#999' }}>
        {fmtPrice(v)}
      </span>
    ),
  },
  {
    title: 'Estoque',
    dataIndex: 'qtdEstoque',
    width: 90,
    align: 'right',
    render: (v: string | null) => {
      if (v == null) return '—';
      const n = Number(v);
      return (
        <span style={{ color: n > 0 ? 'inherit' : '#f5222d' }}>{n.toLocaleString('pt-BR')}</span>
      );
    },
  },
];

export function CatalogPage() {
  const [q, setQ] = useState('');
  const [idPauta, setIdPauta] = useState<number | undefined>();
  const [page, setPage] = useState(1);
  const limit = 50;

  const { data: pautas, isLoading: pautasLoading } = usePautas();
  const { data, isLoading } = useCatalog({ q: q || undefined, idPauta, page, limit });

  return (
    <div style={{ padding: 24 }}>
      <Title level={3} style={{ marginBottom: 16 }}>
        Catálogo de Produtos
      </Title>

      <Space style={{ marginBottom: 16 }} wrap>
        <Search
          placeholder="Buscar por código ou descrição..."
          allowClear
          style={{ width: 300 }}
          onSearch={(v) => {
            setQ(v);
            setPage(1);
          }}
          onChange={(e) => {
            if (!e.target.value) {
              setQ('');
              setPage(1);
            }
          }}
        />
        <Select
          placeholder="Selecionar pauta de preços"
          allowClear
          loading={pautasLoading}
          style={{ width: 340 }}
          onChange={(v) => {
            setIdPauta(v as number | undefined);
            setPage(1);
          }}
          options={pautas?.map((p) => ({
            value: p.idPauta,
            label: `${p.codigo} — ${p.descricao}`,
          }))}
        />
      </Space>

      <Table<ProdutoSummary>
        rowKey="idErp"
        columns={columns}
        dataSource={data?.data ?? []}
        loading={isLoading}
        size="small"
        pagination={{
          current: page,
          pageSize: limit,
          total: data?.total ?? 0,
          showSizeChanger: false,
          showTotal: (t) => `${t.toLocaleString('pt-BR')} produtos`,
          onChange: (p) => setPage(p),
        }}
      />
    </div>
  );
}