feat(auth): endpoint /auth/me, cockpits renomeados e menu de logout

- GET /api/v1/auth/me retorna perfil real do ERP (vw_representantes) - Contrato UserProfile adicionado ao shared api-interface - Hook useCurrentUser() no frontend consome o endpoint - Cockpit rafael → rep, sandra → supervisor (pastas e componentes) - Topbar exibe iniciais do usuário e dropdown com nome, role e "Sair" - Logout limpa token e recarrega para voltar ao DevLogin Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-05-29 17:48:24 +00:00
parent 20b0793227
commit a00a5c6a53
16 changed files with 156 additions and 33 deletions
--- a/apps/web/src/cockpits/rep/ClientsPage.tsx
+++ b/apps/web/src/cockpits/rep/ClientsPage.tsx
@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import { Badge, Input, Select, Space, Table, Typography } from 'antd';
+import type { TableColumnsType } from 'antd';
+import { useNavigate } from '@tanstack/react-router';
+import type { ActivityStatus, ClientSummary } 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' },
+};
+
+// ─── Columns ──────────────────────────────────────────────────────────────────
+
+function buildColumns(navigate: ReturnType<typeof useNavigate>): TableColumnsType<ClientSummary> {
+  return [
+    {
+      title: 'Cliente',
+      dataIndex: 'nome',
+      key: 'nome',
+      render: (nome: string, record: ClientSummary) => (
+        <Space orientation="vertical" size={0}>
+          <Typography.Link
+            strong
+            onClick={() =>
+              navigate({ to: '/clientes/$id', params: { id: String(record.idCliente) } })
+            }
+          >
+            {nome}
+          </Typography.Link>
+          {record.razao && (
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              {record.razao}
+            </Typography.Text>
+          )}
+        </Space>
+      ),
+      sorter: true,
+    },
+    {
+      title: 'CNPJ / CPF',
+      dataIndex: 'cgcpf',
+      key: 'cgcpf',
+      width: 160,
+      render: (v: string | null) => (
+        <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: 'Última compra',
+      dataIndex: 'dtUltimaCompra',
+      key: 'dtUltimaCompra',
+      width: 140,
+      render: (v: string | null) => {
+        if (!v) return <Typography.Text type="secondary">—</Typography.Text>;
+        return (
+          <Typography.Text className="tabular-nums">
+            {new Date(v).toLocaleDateString('pt-BR')}
+          </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 orientation="vertical" size={24} style={{ width: '100%' }}>
+      {/* Cabeçalho */}
+      <Space orientation="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="idCliente"
+        loading={isLoading || isFetching}
+        pagination={{
+          current: page,
+          pageSize: limit,
+          total: data?.total ?? 0,
+          showSizeChanger: false,
+          showTotal: (total) => `${total} clientes`,
+          onChange: (p) => setPage(p),
+        }}
+        scroll={{ x: 700 }}
+        size="middle"
+        onRow={(record) => ({
+          style: { cursor: 'pointer' },
+          onClick: () =>
+            navigate({ to: '/clientes/$id', params: { id: String(record.idCliente) } }),
+        })}
+      />
+    </Space>
+  );
+}