feat(api,web): c2 consulta de clientes — list + search + auth flow
prisma: modelo Client + migração 20260527225728_add_client + seed dev (10 clientes)
api: GET /clients (list, busca, filtro atividade/financeiro, paginação) + GET /clients/:id
rep vê carteira própria; supervisor/admin vê tudo; activityStatus calculado de lastOrderAt
@sar/api-interface: ClientSummarySchema, ClientDetailSchema, ClientListResponseSchema
web: ClientsPage (tabela AntD, busca, filtro), DevLogin (token dev), authStore, Bearer no apiFetch
oq-4 resolvida: creditLimit gerenciado no SAR
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
201
apps/web/src/cockpits/rafael/ClientsPage.tsx
Normal file
201
apps/web/src/cockpits/rafael/ClientsPage.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { useState } from 'react';
|
||||
import { Badge, Input, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import type { ActivityStatus, ClientSummary, FinancialStatus } from '@sar/api-interface';
|
||||
import { useClientList } from '../../lib/queries/clients';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Search } = Input;
|
||||
|
||||
// ─── Badge configs ────────────────────────────────────────────────────────────
|
||||
|
||||
const ACTIVITY_CONFIG: Record<ActivityStatus, { color: string; label: string }> = {
|
||||
active: { color: 'success', label: 'Ativo' },
|
||||
alert: { color: 'warning', label: 'Em alerta' },
|
||||
inactive: { color: 'error', label: 'Inativo' },
|
||||
};
|
||||
|
||||
const FINANCIAL_CONFIG: Record<FinancialStatus, { color: string; label: string }> = {
|
||||
regular: { color: 'success', label: 'Regular' },
|
||||
attention: { color: 'warning', label: 'Atenção' },
|
||||
blocked: { color: 'error', label: 'Bloqueado' },
|
||||
};
|
||||
|
||||
// ─── Columns ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function buildColumns(navigate: ReturnType<typeof useNavigate>): TableColumnsType<ClientSummary> {
|
||||
return [
|
||||
{
|
||||
title: 'Cliente',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name: string, record: ClientSummary) => (
|
||||
<Space direction="vertical" size={0}>
|
||||
<Typography.Link
|
||||
strong
|
||||
onClick={() => navigate({ to: '/clientes/$id', params: { id: record.id } })}
|
||||
>
|
||||
{name}
|
||||
</Typography.Link>
|
||||
{record.tradeName && (
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{record.tradeName}
|
||||
</Typography.Text>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: 'CNPJ / CPF',
|
||||
dataIndex: 'taxId',
|
||||
key: 'taxId',
|
||||
width: 160,
|
||||
render: (v: string) => (
|
||||
<Typography.Text className="tabular-nums" style={{ fontSize: 13 }}>
|
||||
{v}
|
||||
</Typography.Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Atividade',
|
||||
dataIndex: 'activityStatus',
|
||||
key: 'activityStatus',
|
||||
width: 120,
|
||||
render: (v: ActivityStatus) => {
|
||||
const cfg = ACTIVITY_CONFIG[v];
|
||||
return <Badge status={cfg.color as 'success' | 'warning' | 'error'} text={cfg.label} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Situação',
|
||||
dataIndex: 'financialStatus',
|
||||
key: 'financialStatus',
|
||||
width: 110,
|
||||
render: (v: FinancialStatus) => {
|
||||
const cfg = FINANCIAL_CONFIG[v];
|
||||
return <Tag color={cfg.color}>{cfg.label}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Última compra',
|
||||
dataIndex: 'lastOrderAt',
|
||||
key: 'lastOrderAt',
|
||||
width: 140,
|
||||
render: (v: string | null, record: ClientSummary) => {
|
||||
if (!v) return <Typography.Text type="secondary">—</Typography.Text>;
|
||||
const date = new Date(v).toLocaleDateString('pt-BR');
|
||||
const value = record.lastOrderValue
|
||||
? `R$ ${Number(record.lastOrderValue).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
|
||||
: '';
|
||||
return (
|
||||
<Tooltip title={value}>
|
||||
<Typography.Text className="tabular-nums">{date}</Typography.Text>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Pedidos abertos',
|
||||
dataIndex: 'openOrdersCount',
|
||||
key: 'openOrdersCount',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
render: (v: number) =>
|
||||
v > 0 ? (
|
||||
<Tag color="processing" className="tabular-nums">
|
||||
{v}
|
||||
</Tag>
|
||||
) : (
|
||||
<Typography.Text type="secondary">—</Typography.Text>
|
||||
),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// ─── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function ClientsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [q, setQ] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [activityFilter, setActivityFilter] = useState<ActivityStatus | undefined>();
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 50;
|
||||
|
||||
const { data, isLoading, isFetching } = useClientList({
|
||||
q: search || undefined,
|
||||
status: activityFilter,
|
||||
page,
|
||||
limit,
|
||||
});
|
||||
|
||||
const columns = buildColumns(navigate);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size={24} style={{ width: '100%' }}>
|
||||
{/* Cabeçalho */}
|
||||
<Space direction="vertical" size={4}>
|
||||
<Title level={2} style={{ margin: 0 }}>
|
||||
Carteira de Clientes
|
||||
</Title>
|
||||
<Typography.Text type="secondary">
|
||||
{data ? `${data.total} cliente${data.total !== 1 ? 's' : ''} na sua carteira` : ' '}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
|
||||
{/* Filtros */}
|
||||
<Space wrap>
|
||||
<Search
|
||||
placeholder="Buscar por nome, razão social ou CNPJ…"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onSearch={(v) => {
|
||||
setSearch(v);
|
||||
setPage(1);
|
||||
}}
|
||||
allowClear
|
||||
style={{ width: 320 }}
|
||||
/>
|
||||
<Select<ActivityStatus | undefined>
|
||||
placeholder="Atividade"
|
||||
allowClear
|
||||
style={{ width: 140 }}
|
||||
value={activityFilter}
|
||||
onChange={(v) => {
|
||||
setActivityFilter(v);
|
||||
setPage(1);
|
||||
}}
|
||||
options={[
|
||||
{ value: 'active', label: 'Ativo' },
|
||||
{ value: 'alert', label: 'Em alerta' },
|
||||
{ value: 'inactive', label: 'Inativo' },
|
||||
]}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
{/* Tabela */}
|
||||
<Table<ClientSummary>
|
||||
columns={columns}
|
||||
dataSource={data?.data ?? []}
|
||||
rowKey="id"
|
||||
loading={isLoading || isFetching}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: limit,
|
||||
total: data?.total ?? 0,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total) => `${total} clientes`,
|
||||
onChange: (p) => setPage(p),
|
||||
}}
|
||||
scroll={{ x: 900 }}
|
||||
size="middle"
|
||||
onRow={(record) => ({
|
||||
style: { cursor: 'pointer' },
|
||||
onClick: () => navigate({ to: '/clientes/$id', params: { id: record.id } }),
|
||||
})}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user