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>

apps/web/src/cockpits/rafael/ClientsPage.tsx

@@ -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>
+  );
+}

apps/web/src/components/dev/DevLogin.tsx

@@ -0,0 +1,53 @@
+// Componente de login dev — visível apenas quando NODE_ENV !== 'production' e sem token.
+// Em produção o token vem do master-login real (fora do escopo do MVP).
+
+import { useState } from 'react';
+import { Alert, Button, Card, Flex, Space, Typography } from 'antd';
+import { apiFetch } from '../../lib/api-client';
+import { authStore } from '../../lib/auth-store';
+import { AuthTokenResponseSchema } from '@sar/api-interface';
+
+export function DevLogin({ onLogin }: { onLogin: () => void }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleLogin() {
+    setLoading(true);
+    setError(null);
+    try {
+      const raw = await apiFetch('/api/v1/auth/dev/token', {
+        method: 'POST',
+        body: { userId: 'user-001', workspaceId: 'dev-workspace', role: 'rep' },
+      });
+      const { accessToken } = AuthTokenResponseSchema.parse(raw);
+      authStore.set(accessToken);
+      onLogin();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Erro ao obter token');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Flex justify="center" align="center" style={{ minHeight: '100vh' }}>
+      <Card style={{ width: 360 }}>
+        <Space direction="vertical" size={20} style={{ width: '100%' }}>
+          <Typography.Title level={3} style={{ margin: 0 }}>
+            SAR · Login Dev
+          </Typography.Title>
+          <Alert
+            type="warning"
+            message="Ambiente de desenvolvimento"
+            description="Este login automático não existe em produção."
+            showIcon
+          />
+          {error && <Alert type="error" message={error} showIcon />}
+          <Button type="primary" block loading={loading} onClick={() => void handleLogin()}>
+            Entrar como Rafael (rep · user-001)
+          </Button>
+        </Space>
+      </Card>
+    </Flex>
+  );
+}

apps/web/src/lib/api-client.ts

@@ -8,6 +8,8 @@
 // CODING-RULES §05: 422 = validação Zod; 4xx outros = erros de domínio; 5xx = retry pelo
 // QueryClient (até 2x). O ApiError carrega tudo que o caller precisa pra decidir.
 
+import { authStore } from './auth-store';
+
 const PROBLEM_CONTENT_TYPE = 'application/problem+json';
 
 export interface ProblemDetails {
@@ -39,11 +41,14 @@ interface RequestOptions extends Omit<RequestInit, 'body'> {
 export async function apiFetch(path: string, options: RequestOptions = {}): Promise<unknown> {
   const { body, headers, ...rest } = options;
 
+  const token = authStore.get();
+
   const init: RequestInit = {
     ...rest,
     headers: {
       Accept: 'application/json',
       ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
       ...headers,
     },
     ...(body !== undefined ? { body: JSON.stringify(body) } : {}),

apps/web/src/lib/auth-store.ts

@@ -0,0 +1,16 @@
+// Store minimalista para o token de acesso (dev: localStorage; prod: cookie httpOnly via BFF).
+// Em produção o token virá do master-login real e não ficará em localStorage.
+
+const TOKEN_KEY = 'sar_access_token';
+
+export const authStore = {
+  get(): string | null {
+    return localStorage.getItem(TOKEN_KEY);
+  },
+  set(token: string): void {
+    localStorage.setItem(TOKEN_KEY, token);
+  },
+  clear(): void {
+    localStorage.removeItem(TOKEN_KEY);
+  },
+};

apps/web/src/lib/queries/clients.ts

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  ClientListResponseSchema,
+  ClientDetailSchema,
+  type ClientListQuery,
+  type ClientListResponse,
+  type ClientDetail,
+} from '@sar/api-interface';
+import { apiFetch } from '../api-client';
+
+export const CLIENT_KEYS = {
+  all: ['clients'] as const,
+  list: (params: Partial<ClientListQuery>) => ['clients', 'list', params] as const,
+  detail: (id: string) => ['clients', 'detail', id] as const,
+};
+
+export function useClientList(params: Partial<ClientListQuery> = {}) {
+  const qs = new URLSearchParams();
+  if (params.q) qs.set('q', params.q);
+  if (params.status) qs.set('status', params.status);
+  if (params.financialStatus) qs.set('financialStatus', params.financialStatus);
+  if (params.page) qs.set('page', String(params.page));
+  if (params.limit) qs.set('limit', String(params.limit));
+
+  const query = qs.toString();
+
+  return useQuery<ClientListResponse, Error>({
+    queryKey: CLIENT_KEYS.list(params),
+    queryFn: async () => {
+      const raw = await apiFetch(`/api/v1/clients${query ? `?${query}` : ''}`);
+      return ClientListResponseSchema.parse(raw);
+    },
+  });
+}
+
+export function useClientDetail(id: string) {
+  return useQuery<ClientDetail, Error>({
+    queryKey: CLIENT_KEYS.detail(id),
+    queryFn: async () => {
+      const raw = await apiFetch(`/api/v1/clients/${id}`);
+      return ClientDetailSchema.parse(raw);
+    },
+    enabled: !!id,
+  });
+}

apps/web/src/lib/router.tsx

@@ -1,6 +1,7 @@
 import { createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router';
 import { AppShell } from '../components/layout/AppShell';
 import { RafaelPainel } from '../cockpits/rafael/RafaelPainel';
+import { ClientsPage } from '../cockpits/rafael/ClientsPage';
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -16,14 +17,38 @@ const indexRoute = createRoute({
   component: RafaelPainel,
 });
 
-// Placeholder routes (cockpits a implementar)
 const rafaelRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/rep',
   component: RafaelPainel,
 });
 
-const routeTree = rootRoute.addChildren([indexRoute, rafaelRoute]);
+const clientesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/clientes',
+  component: ClientsPage,
+});
+
+// Placeholder detail route — ClientDetailPage virá em próxima iteração de C2
+const clienteDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/clientes/$id',
+  component: () => {
+    const { id } = clienteDetailRoute.useParams();
+    return (
+      <div style={{ padding: 24 }}>
+        <p>Ficha do cliente {id} — em construção</p>
+      </div>
+    );
+  },
+});
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  rafaelRoute,
+  clientesRoute,
+  clienteDetailRoute,
+]);
 
 export const router = createRouter({
   routeTree,

apps/web/src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+import { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ConfigProvider, App as AntdApp } from 'antd';
 import ptBR from 'antd/locale/pt_BR';
@@ -12,9 +12,24 @@ import './styles/global.css';
 import { sarTheme } from './lib/theme';
 import { queryClient } from './lib/query-client';
 import { router } from './lib/router';
+import { authStore } from './lib/auth-store';
+import { DevLogin } from './components/dev/DevLogin';
 
 dayjs.locale('pt-br');
 
+const isDev = import.meta.env.DEV;
+
+function Root() {
+  const [hasToken, setHasToken] = useState(() => !!authStore.get());
+
+  // Em dev, exibe DevLogin se não houver token. Em prod, fluxo de auth real virá aqui.
+  if (isDev && !hasToken) {
+    return <DevLogin onLogin={() => setHasToken(true)} />;
+  }
+
+  return <RouterProvider router={router} />;
+}
+
 const rootEl = document.getElementById('root');
 if (!rootEl) {
   throw new Error('Root element not found');
@@ -25,7 +40,7 @@ createRoot(rootEl).render(
     <ConfigProvider theme={sarTheme} locale={ptBR} componentSize="middle">
       <AntdApp>
         <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
+          <Root />
         </QueryClientProvider>
       </AntdApp>
     </ConfigProvider>