Frontend completo (Etapas 11-18) e extensões de backend (Etapas 13 e 18)

Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-16 09:41:13 -03:00
parent f9738e54da
commit 323912748f
179 changed files with 29312 additions and 22 deletions
@@ -0,0 +1,152 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+
+import { listTenants, type TenantListItem, type TenantStatus } from '@/lib/api/tenants';
+import { formatDate } from '@/lib/format';
+
+import { Button } from '@/components/ui/button';
+import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
+import { Input } from '@/components/ui/input';
+import { StatusPill } from '@/components/ui/status-pill';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { TenantStatusDialog } from '@/components/domain/tenant-status-dialog';
+
+const STATUS_OPTIONS: { value: TenantStatus | 'todos'; label: string }[] = [
+  { value: 'todos', label: 'Todos os status' },
+  { value: 'trial', label: 'Trial' },
+  { value: 'ativo', label: 'Ativo' },
+  { value: 'inadimplente', label: 'Inadimplente' },
+  { value: 'suspenso', label: 'Suspenso' },
+  { value: 'cancelado', label: 'Cancelado' },
+];
+
+const LIMIT = 20;
+
+export default function TenantsPage() {
+  const router = useRouter();
+  const [busca, setBusca] = React.useState('');
+  const [status, setStatus] = React.useState<TenantStatus | 'todos'>('todos');
+  const [page, setPage] = React.useState(1);
+  const [statusTarget, setStatusTarget] = React.useState<TenantListItem | null>(null);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['master', 'tenants', { busca, status, page }],
+    queryFn: () =>
+      listTenants({
+        busca: busca || undefined,
+        status: status === 'todos' ? undefined : status,
+        page,
+        limit: LIMIT,
+      }),
+    placeholderData: (prev) => prev,
+  });
+
+  const columns: DataTableColumn<TenantListItem>[] = [
+    {
+      id: 'nome',
+      header: 'Tenant',
+      primary: true,
+      cell: (row) => (
+        <div className="flex flex-col">
+          <span className="font-medium text-foreground">{row.nome_fantasia || row.razao_social}</span>
+          {row.documento && <span className="text-xs text-muted-foreground">{row.documento}</span>}
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      primary: true,
+      cell: (row) => <StatusPill status={row.status} />,
+    },
+    { id: 'plano', header: 'Plano', cell: (row) => row.plano?.nome ?? '—' },
+    { id: 'criado_em', header: 'Criado em', cell: (row) => formatDate(row.criado_em) },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">Tenants</h1>
+          <p className="text-sm text-muted-foreground">Clientes da plataforma SeConectai Vendas</p>
+        </div>
+        <Button asChild>
+          <Link href="/master/tenants/novo">
+            <Plus /> Novo tenant
+          </Link>
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1 sm:max-w-xs">
+          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
+          <Input
+            placeholder="Buscar por nome ou documento..."
+            className="pl-9"
+            value={busca}
+            onChange={(e) => {
+              setBusca(e.target.value);
+              setPage(1);
+            }}
+          />
+        </div>
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value as TenantStatus | 'todos');
+            setPage(1);
+          }}
+        >
+          <SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {STATUS_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={data?.data ?? []}
+        keyField={(row) => row.id}
+        loading={isLoading}
+        emptyTitle="Nenhum tenant encontrado"
+        emptyDescription="Ajuste os filtros ou cadastre um novo tenant."
+        emptyAction={
+          <Button size="sm" asChild>
+            <Link href="/master/tenants/novo">Novo tenant</Link>
+          </Button>
+        }
+        onRowClick={(row) => router.push(`/master/tenants/${row.id}`)}
+        rowActions={(row) => (
+          <>
+            <Button variant="ghost" size="sm" asChild>
+              <Link href={`/master/tenants/${row.id}`}>Ver</Link>
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setStatusTarget(row)}>
+              Mudar status
+            </Button>
+          </>
+        )}
+        pagination={
+          data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
+        }
+      />
+
+      <TenantStatusDialog
+        tenant={statusTarget}
+        onOpenChange={(open) => !open && setStatusTarget(null)}
+      />
+    </div>
+  );
+}