Table

'use client';

import { Cell, Column, Row, Table, TableBody, TableHeader } from '@/components/ui/table';

const pedidos = [
  { id: '1042', cliente: 'Padaria Pão de Ouro', servico: 'Site institucional', valor: 3200, entrega: '10/10/2026' },
  { id: '1043', cliente: 'Clínica Sorriso', servico: 'Landing page + Google Ads', valor: 4800, entrega: '18/10/2026' },
  { id: '1044', cliente: 'Lima Advocacia', servico: 'Sistema de agendamento', valor: 12900, entrega: '05/11/2026' },
  { id: '1045', cliente: 'Pet Shop Amigo', servico: 'Loja virtual', valor: 8600, entrega: '22/11/2026' },
];

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

export default function TableDemo() {
  return (
    <Table aria-label="Pedidos em andamento">
      <TableHeader>
        <Column isRowHeader>Pedido</Column>
        <Column>Cliente</Column>
        <Column>Serviço</Column>
        <Column className="text-right">Valor</Column>
        <Column>Entrega</Column>
      </TableHeader>
      <TableBody items={pedidos}>
        {(p) => (
          <Row id={p.id}>
            <Cell className="font-mono tabular-nums">#{p.id}</Cell>
            <Cell className="font-medium">{p.cliente}</Cell>
            <Cell className="text-muted-foreground">{p.servico}</Cell>
            <Cell className="text-right font-mono tabular-nums">{brl.format(p.valor)}</Cell>
            <Cell className="tabular-nums">{p.entrega}</Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}

'use client';

import * as React from 'react';
import type { SortDescriptor } from 'react-aria-components';
import { Cell, Column, Row, Table, TableBody, TableHeader } from '@/components/ui/table';

const pedidos = [
  { id: '1042', cliente: 'Padaria Pão de Ouro', servico: 'Site institucional', valor: 3200 },
  { id: '1043', cliente: 'Clínica Sorriso', servico: 'Landing page + Google Ads', valor: 4800 },
  { id: '1044', cliente: 'Lima Advocacia', servico: 'Sistema de agendamento', valor: 12900 },
  { id: '1045', cliente: 'Pet Shop Amigo', servico: 'Loja virtual', valor: 8600 },
  { id: '1046', cliente: 'Studio JM', servico: 'Identidade visual', valor: 2400 },
];
type Pedido = (typeof pedidos)[number];

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

export default function TableSorting() {
  const [sort, setSort] = React.useState<SortDescriptor>({ column: 'valor', direction: 'descending' });

  // A tabela só informa qual coluna/direção foi pedida — a ordenação dos dados é sua.
  const rows = React.useMemo(() => {
    const key = sort.column as keyof Pedido;
    return [...pedidos].sort((a, b) => {
      const av = a[key];
      const bv = b[key];
      const cmp =
        typeof av === 'number' && typeof bv === 'number' ? av - bv : String(av).localeCompare(String(bv), 'pt-BR');
      return sort.direction === 'descending' ? -cmp : cmp;
    });
  }, [sort]);

  return (
    <Table aria-label="Pedidos" sortDescriptor={sort} onSortChange={setSort}>
      <TableHeader>
        <Column id="cliente" isRowHeader allowsSorting>
          Cliente
        </Column>
        <Column id="servico">Serviço</Column>
        <Column id="valor" allowsSorting className="text-right">
          Valor
        </Column>
      </TableHeader>
      <TableBody items={rows}>
        {(p) => (
          <Row id={p.id}>
            <Cell className="font-medium">{p.cliente}</Cell>
            <Cell className="text-muted-foreground">{p.servico}</Cell>
            <Cell className="text-right font-mono tabular-nums">{brl.format(p.valor)}</Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}

'use client';

import * as React from 'react';
import type { Selection } from 'react-aria-components';
import { Button } from '@/components/ui/button';
import { Cell, Column, Row, Table, TableBody, TableHeader } from '@/components/ui/table';

const faturas = [
  { id: 'NF-2031', cliente: 'Padaria Pão de Ouro', vencimento: '05/10/2026', valor: 890 },
  { id: 'NF-2032', cliente: 'Clínica Sorriso', vencimento: '08/10/2026', valor: 1490 },
  { id: 'NF-2033', cliente: 'Lima Advocacia', vencimento: '12/10/2026', valor: 2350 },
  { id: 'NF-2034', cliente: 'Pet Shop Amigo', vencimento: '15/10/2026', valor: 640 },
];

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

export default function TableSelection() {
  const [selected, setSelected] = React.useState<Selection>(new Set(['NF-2032']));
  const count = selected === 'all' ? faturas.length : selected.size;

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <p className="text-sm text-muted-foreground" aria-live="polite">
          {count === 0 ? 'Nenhuma fatura selecionada' : `${count} fatura(s) selecionada(s)`}
        </p>
        <Button size="sm" variant="outline" isDisabled={count === 0}>
          Enviar lembrete
        </Button>
      </div>
      <div className="rounded-md border">
        <Table
          aria-label="Faturas em aberto"
          selectionMode="multiple"
          selectedKeys={selected}
          onSelectionChange={setSelected}
        >
          <TableHeader>
            <Column isRowHeader>Fatura</Column>
            <Column>Cliente</Column>
            <Column>Vencimento</Column>
            <Column className="text-right">Valor</Column>
          </TableHeader>
          <TableBody items={faturas}>
            {(f) => (
              <Row id={f.id}>
                <Cell className="font-mono tabular-nums">{f.id}</Cell>
                <Cell className="font-medium">{f.cliente}</Cell>
                <Cell className="tabular-nums">{f.vencimento}</Cell>
                <Cell className="text-right font-mono tabular-nums">{brl.format(f.valor)}</Cell>
              </Row>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

'use client';

import { Inbox } from 'lucide-react';
import { Cell, Column, Row, Table, TableBody, TableHeader } from '@/components/ui/table';

type Orcamento = { id: string; cliente: string; servico: string; valor: string };
const orcamentos: Orcamento[] = [];

export default function TableEmpty() {
  return (
    <Table aria-label="Orçamentos enviados">
      <TableHeader>
        <Column isRowHeader>Cliente</Column>
        <Column>Serviço</Column>
        <Column className="text-right">Valor</Column>
      </TableHeader>
      <TableBody
        items={orcamentos}
        renderEmptyState={() => (
          <div className="flex flex-col items-center gap-2 py-6">
            <Inbox aria-hidden className="size-6 text-muted-foreground" />
            <p className="font-medium text-foreground">Nenhum orçamento enviado ainda</p>
            <p className="text-sm">Os orçamentos aparecem aqui assim que forem enviados ao cliente.</p>
          </div>
        )}
      >
        {(o) => (
          <Row id={o.id}>
            <Cell>{o.cliente}</Cell>
            <Cell>{o.servico}</Cell>
            <Cell className="text-right">{o.valor}</Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}