Data Table

'use client';

import { DataTable } from '@/components/data-table';

export default function DataTableDemo() {
  // Sem `data`, o bloco usa os contatos de exemplo (sampleContacts).
  return <DataTable aria-label="Contatos recentes" className="w-full" />;
}

'use client';

import { DataTable, type Contact } from '@/components/data-table';

const leadsDaSemana: Contact[] = [
  { id: 'l1', nome: 'Renata Dias', email: 'renata@floriculturaflor.com.br', origem: 'Instagram', status: 'novo', valor: 2200, data: '2026-09-28' },
  { id: 'l2', nome: 'Marcos Tavares', email: 'marcos@tavaresodonto.com.br', origem: 'Google Ads', status: 'em-atendimento', valor: 5400, data: '2026-09-27' },
  { id: 'l3', nome: 'Sofia Mendes', email: 'sofia@mendesarquitetura.com.br', origem: 'Indicação', status: 'convertido', valor: 9600, data: '2026-09-26' },
  { id: 'l4', nome: 'Paulo Henrique', email: 'paulo@phfitness.com.br', origem: 'WhatsApp', status: 'perdido', valor: 1800, data: '2026-09-25' },
  { id: 'l5', nome: 'Larissa Moura', email: 'larissa@mourabuffet.com.br', origem: 'Formulário do site', status: 'novo', valor: 3900, data: '2026-09-24' },
];

export default function DataTableCustomData() {
  return <DataTable aria-label="Leads da semana" data={leadsDaSemana} pageSize={3} className="w-full" />;
}

'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { DataTable, type Contact } from '@/components/data-table';

const brl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });

export default function DataTableSelection() {
  const [selecionados, setSelecionados] = React.useState<Contact[]>([]);
  const total = selecionados.reduce((soma, c) => soma + c.valor, 0);

  return (
    <div className="flex w-full flex-col gap-4">
      <DataTable aria-label="Contatos" onSelectionChange={setSelecionados} />
      <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border bg-muted/50 p-3">
        <p className="text-sm">
          {selecionados.length === 0 ? (
            <span className="text-muted-foreground">Selecione contatos para exportar.</span>
          ) : (
            <>
              <span className="font-medium">{selecionados.length}</span> selecionado(s) · potencial de{' '}
              <span className="font-mono font-medium tabular-nums">{brl.format(total)}</span>
            </>
          )}
        </p>
        <Button size="sm" isDisabled={selecionados.length === 0}>
          Exportar CSV
        </Button>
      </div>
    </div>
  );
}