Table

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { Chip } from "@/registry/ds/badge";
import { Checkbox } from "@/registry/ds/checkbox";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/registry/ds/table";

const rows = [
  { codigo: "MAT201", nombre: "Cálculo II", turno: "Mañana", cupo: 12 },
  { codigo: "FIS101", nombre: "Física I", turno: "Tarde", cupo: 3 },
  { codigo: "ALG101", nombre: "Álgebra", turno: "Noche", cupo: 24 },
  { codigo: "ING201", nombre: "Inglés técnico", turno: "Noche", cupo: 31 },
];

/** Selección múltiple: checkbox por fila, "todas" con estado indeterminado y una barra de acciones en lote */
export default function TableSelection() {
  const [selected, setSelected] = useState<Set<string>>(new Set(["FIS101"]));
  const all = selected.size === rows.length;
  const some = selected.size > 0 && !all;

  const toggle = (codigo: string, checked: boolean) =>
    setSelected((prev) => {
      const next = new Set(prev);
      if (checked) next.add(codigo);
      else next.delete(codigo);
      return next;
    });

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <div className="flex min-h-9 items-center justify-between gap-3 text-sm" aria-live="polite">
        <span className="text-fg-muted">{selected.size === 0 ? "Elegí materias para inscribirte" : `${selected.size} ${selected.size === 1 ? "seleccionada" : "seleccionadas"}`}</span>
        {selected.size > 0 && (
          <div className="flex gap-2">
            <Button size="sm" variant="text" onClick={() => setSelected(new Set())}>
              Limpiar
            </Button>
            <Button size="sm">Inscribirme a {selected.size}</Button>
          </div>
        )}
      </div>
      <Table size="sm">
        <TableHead>
          <TableRow>
            <TableHeader className="w-10">
              <Checkbox size="sm" aria-label="Seleccionar todas" checked={all} indeterminate={some} onCheckedChange={(c) => setSelected(c ? new Set(rows.map((r) => r.codigo)) : new Set())} />
            </TableHeader>
            <TableHeader>Materia</TableHeader>
            <TableHeader className="max-sm:hidden">Turno</TableHeader>
            <TableHeader align="right">Cupo</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((r) => {
            const checked = selected.has(r.codigo);
            return (
              <TableRow key={r.codigo} selected={checked}>
                <TableCell>
                  <Checkbox size="sm" aria-label={`Seleccionar ${r.nombre}`} checked={checked} onCheckedChange={(c) => toggle(r.codigo, Boolean(c))} />
                </TableCell>
                <TableCell>
                  <span className="block font-medium text-fg">{r.nombre}</span>
                  <span className="block text-xs text-fg-muted">{r.codigo}</span>
                </TableCell>
                <TableCell className="text-fg-muted max-sm:hidden">{r.turno}</TableCell>
                <TableCell numeric>
                  {r.cupo <= 5 ? (
                    <Chip size="sm" status="warning">
                      {r.cupo}
                    </Chip>
                  ) : (
                    r.cupo
                  )}
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { Chip } from "@/registry/ds/badge";
import { Search } from "@/registry/ds/icons";
import { Skeleton } from "@/registry/ds/skeleton";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/registry/ds/table";
import { ToggleGroup, ToggleItem } from "@/registry/ds/toggle-group";

const rows = [
  { codigo: "MAT201", nombre: "Cálculo II", docente: "Julia Arce", estado: "success" as const },
  { codigo: "FIS101", nombre: "Física I", docente: "Martín Ferro", estado: "warning" as const },
  { codigo: "ALG101", nombre: "Álgebra", docente: "Pedro Núñez", estado: "danger" as const },
];
const label = { success: "Regular", warning: "En riesgo", danger: "Libre" };

/** Los tres estados de una tabla: cargando (skeleton con la misma grilla), vacía (TableEmpty) y con datos */
export default function TableStates() {
  const [state, setState] = useState<"loading" | "empty" | "data">("loading");

  return (
    <div className="flex w-full max-w-2xl flex-col gap-4">
      <ToggleGroup aria-label="Estado de la tabla" size="sm" value={[state]} onValueChange={(v) => v[0] && setState(v[0] as typeof state)}>
        <ToggleItem value="loading">Cargando</ToggleItem>
        <ToggleItem value="empty">Vacía</ToggleItem>
        <ToggleItem value="data">Con datos</ToggleItem>
      </ToggleGroup>

      <div aria-busy={state === "loading"} aria-live="polite">
        <Table size="sm">
          <TableHead>
            <TableRow>
              <TableHeader>Materia</TableHeader>
              <TableHeader>Docente</TableHeader>
              <TableHeader>Estado</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {state === "loading" &&
              [0, 1, 2].map((i) => (
                <TableRow key={i} aria-hidden>
                  <TableCell>
                    <Skeleton width={i === 1 ? "55%" : "70%"} />
                  </TableCell>
                  <TableCell>
                    <Skeleton width="60%" />
                  </TableCell>
                  <TableCell>
                    <Skeleton width={64} height={20} variant="rect" className="rounded-full" />
                  </TableCell>
                </TableRow>
              ))}
            {state === "empty" && (
              <TableEmpty colSpan={3}>
                <div className="flex flex-col items-center gap-3">
                  <span className="flex size-10 items-center justify-center rounded-full bg-surface text-icon-muted">
                    <Search className="size-5" />
                  </span>
                  <div>
                    <p className="font-medium text-fg">Ninguna materia coincide</p>
                    <p className="mt-0.5">Probá con otro nombre o quitá los filtros.</p>
                  </div>
                  <Button size="sm" variant="stroke" onClick={() => setState("data")}>
                    Quitar filtros
                  </Button>
                </div>
              </TableEmpty>
            )}
            {state === "data" &&
              rows.map((r) => (
                <TableRow key={r.codigo}>
                  <TableCell className="font-medium">{r.nombre}</TableCell>
                  <TableCell className="text-fg-muted">{r.docente}</TableCell>
                  <TableCell>
                    <Chip size="sm" status={r.estado}>
                      {label[r.estado]}
                    </Chip>
                  </TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
        {state === "loading" && <span className="sr-only">Cargando materias</span>}
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { ArrowUpRight, Close, DotsVertical, FileText } from "@/registry/ds/icons";
import { Menu, MenuItem, MenuSeparator } from "@/registry/ds/menu";
import { Pagination } from "@/registry/ds/pagination";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/registry/ds/table";

const pagos = Array.from({ length: 23 }, (_, i) => {
  const mes = ["Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct"][i % 8];
  return { id: `2026-${String(i + 1).padStart(3, "0")}`, concepto: i % 4 === 0 ? "Matrícula" : `Cuota ${mes}`, fecha: `${10 + (i % 18)}/${String((i % 8) + 3).padStart(2, "0")}/2026`, importe: i % 4 === 0 ? 48000 : 20500 };
});
const porPagina = 8;
const pesos = (n: number) => `$ ${n.toLocaleString("es-AR")}`;

/** Muchas filas: encabezado fijo dentro de un alto máximo, columna numérica alineada, acciones en un Menu y paginación compacta */
export default function TableScroll() {
  const [page, setPage] = useState(1);
  const pages = Math.ceil(pagos.length / porPagina);
  const visible = pagos.slice((page - 1) * porPagina, page * porPagina);
  const total = visible.reduce((t, p) => t + p.importe, 0);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <div className="max-h-72 overflow-y-auto rounded-xl [&>div]:rounded-none [&>div]:border-0">
        <Table size="sm" className="[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-bg-subtle">
          <TableHead>
            <TableRow>
              <TableHeader>Comprobante</TableHeader>
              <TableHeader>Concepto</TableHeader>
              <TableHeader className="max-sm:hidden">Fecha</TableHeader>
              <TableHeader align="right">Importe</TableHeader>
              <TableHeader>
                <span className="sr-only">Acciones</span>
              </TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {visible.map((p) => (
              <TableRow key={p.id}>
                <TableCell className="font-mono text-xs text-fg-muted">{p.id}</TableCell>
                <TableCell className="font-medium">{p.concepto}</TableCell>
                <TableCell className="text-fg-muted max-sm:hidden">{p.fecha}</TableCell>
                <TableCell numeric>{pesos(p.importe)}</TableCell>
                <TableCell align="right">
                  <Menu align="end" trigger={<Button variant="text" size="sm" iconOnly={<DotsVertical />} aria-label={`Acciones de ${p.id}`} />}>
                    <MenuItem icon={<FileText />}>Descargar PDF</MenuItem>
                    <MenuItem icon={<ArrowUpRight />} href="#">
                      Ver detalle
                    </MenuItem>
                    <MenuSeparator />
                    <MenuItem icon={<Close />} destructive>
                      Anular
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-fg-muted">
        <span>
          {visible.length} de {pagos.length} · total de la página <span className="font-medium text-fg tabular-nums">{pesos(total)}</span>
        </span>
        <Pagination variant="compact" size="sm" page={page} count={pages} onPageChange={setPage} />
      </div>
    </div>
  );
}