Table toolbar

"use client";

import { useMemo, useState } from "react";
import { Badge } from "@/components/equip/badge";
import { Button } from "@/components/equip/button";
import { DataGrid, dataGridFormat } from "@/components/equip/data-grid";
import type { DataGridSort } from "@/components/equip/data-grid";
import { Pagination } from "@/components/equip/pagination";
import { TableToolbar } from "@/components/equip/table-toolbar";
import type { TableToolbarDensity } from "@/components/equip/table-toolbar";

type Status = "draft" | "open" | "paid" | "overdue";
type Invoice = { id: string; customer: string; status: Status; issued: string; due: string; amount: number; currency: string };

const customers = ["Larkfield Labs", "Quillworks", "Hale & Sons", "Kanaal BV", "Marin Studio", "Harbour Traders", "Bluebird Logistics", "Fernhill Studio", "Halcyon Health"];
const statusCycle: Status[] = ["paid", "paid", "open", "overdue", "paid", "draft", "open", "paid"];

// Built from the index alone, so the server and the browser agree on every row.
const allInvoices: Invoice[] = Array.from({ length: 57 }, (_, i) => {
  const day = 1 + ((i * 3) % 28);
  const month = 1 + (i % 10);
  return {
    id: `INV-${2041 + i}`,
    customer: customers[(i * 5) % customers.length],
    status: statusCycle[i % statusCycle.length],
    issued: `2026-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`,
    due: `2026-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`,
    amount: Math.round(((i * 7919) % 480000) + 12000) / 100,
    currency: i % 4 === 0 ? "EUR" : "USD",
  };
});

const STATUS = {
  draft: { label: "Draft", tone: "neutral" },
  open: { label: "Open", tone: "neutral" },
  paid: { label: "Paid", tone: "ok" },
  overdue: { label: "Overdue", tone: "danger" },
} as const;

const PAGE = 10;
const date = dataGridFormat.date();
const usd = dataGridFormat.currency("USD");
const eur = dataGridFormat.currency("EUR");
const collator = new Intl.Collator("en-US", { numeric: true, sensitivity: "base" });

const columnList = [
  { key: "id", label: "Invoice", hideable: false },
  { key: "customer", label: "Customer" },
  { key: "status", label: "Status" },
  { key: "issued", label: "Issued" },
  { key: "due", label: "Due" },
  { key: "amount", label: "Amount" },
];

export default function Example() {
  const [invoices, setInvoices] = useState(allInvoices);
  const [search, setSearch] = useState("");
  const [filters, setFilters] = useState<Record<string, string[]>>({ status: ["open", "overdue"] });
  const [density, setDensity] = useState<TableToolbarDensity>("comfortable");
  const [hidden, setHidden] = useState<string[]>(["issued"]);
  const [sort, setSort] = useState<DataGridSort>({ key: "due", direction: "ascending" });
  const [selected, setSelected] = useState<string[]>([]);
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const needle = search.trim().toLowerCase();
    const statuses = filters.status ?? [];
    const currencies = filters.currency ?? [];
    return invoices.filter(
      (inv) =>
        (!needle || inv.id.toLowerCase().includes(needle) || inv.customer.toLowerCase().includes(needle)) &&
        (statuses.length === 0 || statuses.includes(inv.status)) &&
        (currencies.length === 0 || currencies.includes(inv.currency)),
    );
  }, [invoices, search, filters]);

  const sorted = useMemo(() => {
    if (!sort) return filtered;
    const factor = sort.direction === "ascending" ? 1 : -1;
    const key = sort.key as keyof Invoice;
    return [...filtered].sort((a, b) => {
      const va = a[key];
      const vb = b[key];
      const c = typeof va === "number" && typeof vb === "number" ? va - vb : collator.compare(String(va), String(vb));
      return c * factor;
    });
  }, [filtered, sort]);

  const pages = Math.max(1, Math.ceil(sorted.length / PAGE));
  const current = Math.min(page, pages);
  const pageRows = sorted.slice((current - 1) * PAGE, current * PAGE);
  const from = sorted.length === 0 ? 0 : (current - 1) * PAGE + 1;

  // Anything that changes which rows match starts again from the first page.
  function refine<V>(set: (v: V) => void) {
    return (v: V) => {
      set(v);
      setPage(1);
    };
  }

  function markPaid() {
    const chosen = new Set(selected);
    setInvoices((all) => all.map((inv) => (chosen.has(inv.id) ? { ...inv, status: "paid" } : inv)));
    setSelected([]);
  }

  return (
    <div style={{ display: "grid", gap: 12, minWidth: 0, maxWidth: 720 }}>
      <TableToolbar
        label="Invoice tools"
        search={search}
        onSearchChange={refine(setSearch)}
        searchLabel="Search invoices"
        searchPlaceholder="Search by number or customer"
        resultCount={sorted.length}
        filters={[
          {
            key: "status",
            label: "Status",
            options: (Object.keys(STATUS) as Status[]).map((s) => ({ value: s, label: STATUS[s].label })),
          },
          {
            key: "currency",
            label: "Currency",
            options: [
              { value: "USD", label: "US dollar" },
              { value: "EUR", label: "Euro" },
            ],
          },
        ]}
        filterValues={filters}
        onFilterValuesChange={refine(setFilters)}
        density={density}
        onDensityChange={setDensity}
        columns={columnList}
        hiddenColumns={hidden}
        onHiddenColumnsChange={setHidden}
        actions={
          <Button size="s" variant="solid">
            New invoice
          </Button>
        }
        selectedCount={selected.length}
        onClearSelection={() => setSelected([])}
        bulkActions={
          <>
            <Button size="s" variant="outline" onClick={markPaid}>
              Mark as paid
            </Button>
            <Button size="s" variant="outline">
              Send reminder
            </Button>
          </>
        }
      />
      <DataGrid
        label="Invoices"
        dense={density === "compact"}
        selectable="multiple"
        selected={selected}
        onSelectedChange={setSelected}
        sort={sort}
        onSortChange={setSort}
        hiddenColumns={hidden}
        rows={pageRows}
        rowKey={(inv) => inv.id}
        empty="No invoices match these filters."
        columns={[
          { key: "id", header: "Invoice", width: 104, pin: "start", sortable: true },
          { key: "customer", header: "Customer", width: 168, sortable: true },
          {
            key: "status",
            header: "Status",
            width: 104,
            sortable: true,
            render: (inv) => <Badge tone={STATUS[inv.status].tone}>{STATUS[inv.status].label}</Badge>,
          },
          { key: "issued", header: "Issued", width: 120, sortable: true, format: date },
          { key: "due", header: "Due", width: 120, sortable: true, format: date },
          {
            key: "amount",
            header: "Amount",
            align: "end",
            width: 120,
            sortable: true,
            format: (v, inv) => (inv.currency === "EUR" ? eur : usd)(v),
          },
        ]}
      />
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        <span style={{ color: "var(--eq-ink-2)", fontSize: "var(--eq-text-s)", fontVariantNumeric: "tabular-nums" }}>
          {sorted.length === 0 ? "No results" : `${from}–${from + pageRows.length - 1} of ${sorted.length}`}
        </span>
        {pages > 1 && (
          <Pagination aria-label="Invoice pages" page={current} count={pages} onPageChange={setPage} />
        )}
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/components/equip/button";
import { DataGrid } from "@/components/equip/data-grid";
import { TableToolbar } from "@/components/equip/table-toolbar";

type Customer = { id: string; name: string; email: string; plan: string; seats: number };

const start: Customer[] = [
  { id: "c1", name: "Aisha Bello", email: "aisha@larkfield.io", plan: "Team", seats: 12 },
  { id: "c2", name: "Marcus Hale", email: "marcus@hale.dev", plan: "Business", seats: 48 },
  { id: "c3", name: "Noor Haddad", email: "noor@quillworks.co", plan: "Team", seats: 6 },
  { id: "c4", name: "Pieter de Vries", email: "pieter@kanaal.nl", plan: "Free", seats: 1 },
  { id: "c5", name: "Sofia Marin", email: "sofia@marin.studio", plan: "Business", seats: 22 },
];

export default function Example() {
  const [rows, setRows] = useState(start);
  const [selected, setSelected] = useState<string[]>(["c2", "c5"]);

  function archive() {
    setRows((all) => all.filter((c) => !selected.includes(c.id)));
    setSelected([]);
  }

  return (
    <div style={{ display: "grid", gap: 8, maxWidth: 560 }}>
      <TableToolbar
        label="Customer tools"
        selectedCount={selected.length}
        onClearSelection={() => setSelected([])}
        bulkActions={
          <>
            <Button size="s" variant="outline">
              Change plan
            </Button>
            <Button size="s" variant="danger" onClick={archive}>
              Archive
            </Button>
          </>
        }
        actions={
          <Button size="s" variant="outline" onClick={() => setRows(start)}>
            Restore list
          </Button>
        }
      />
      <DataGrid
        label="Customers"
        selectable="multiple"
        selected={selected}
        onSelectedChange={setSelected}
        rows={rows}
        rowKey={(c) => c.id}
        empty="Every customer is archived."
        columns={[
          { key: "name", header: "Name", sortable: true },
          { key: "email", header: "Email" },
          { key: "plan", header: "Plan", width: 96 },
          { key: "seats", header: "Seats", align: "end", width: 72 },
        ]}
        style={{ minWidth: 480 }}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/components/equip/button";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/equip/table";
import { TableToolbar } from "@/components/equip/table-toolbar";

type Service = { name: string; team: string; tier: string; uptime: string };

const services: Service[] = [
  { name: "checkout-api", team: "Payments", tier: "Critical", uptime: "99.98%" },
  { name: "search-indexer", team: "Discovery", tier: "Standard", uptime: "99.71%" },
  { name: "email-sender", team: "Growth", tier: "Standard", uptime: "99.90%" },
  { name: "ledger", team: "Payments", tier: "Critical", uptime: "99.99%" },
  { name: "image-resizer", team: "Platform", tier: "Best effort", uptime: "98.40%" },
];

const option = (v: string) => ({ value: v, label: v });

export default function Example() {
  const [search, setSearch] = useState("");
  const [filters, setFilters] = useState<Record<string, string[]>>({ team: ["Payments"], tier: ["Critical"] });

  const needle = search.trim().toLowerCase();
  const shown = services.filter(
    (s) =>
      (!needle || s.name.includes(needle)) &&
      (!filters.team?.length || filters.team.includes(s.team)) &&
      (!filters.tier?.length || filters.tier.includes(s.tier)),
  );

  return (
    <div style={{ display: "grid", gap: 8, maxWidth: 520 }}>
      <TableToolbar
        label="Service tools"
        search={search}
        onSearchChange={setSearch}
        searchLabel="Search services"
        resultCount={shown.length}
        filters={[
          { key: "team", label: "Team", options: ["Discovery", "Growth", "Payments", "Platform"].map(option) },
          { key: "tier", label: "Tier", options: ["Critical", "Standard", "Best effort"].map(option) },
        ]}
        filterValues={filters}
        onFilterValuesChange={setFilters}
        actions={
          <Button size="s" variant="outline">
            Export CSV
          </Button>
        }
      />
      <Table dense label="Services">
        <TableCaption>Services, {shown.length} shown</TableCaption>
        <TableHead>
          <TableRow>
            <TableHeader>Service</TableHeader>
            <TableHeader>Team</TableHeader>
            <TableHeader>Tier</TableHeader>
            <TableHeader numeric>Uptime</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {shown.map((s) => (
            <TableRow key={s.name}>
              <TableCell>{s.name}</TableCell>
              <TableCell>{s.team}</TableCell>
              <TableCell>{s.tier}</TableCell>
              <TableCell numeric>{s.uptime}</TableCell>
            </TableRow>
          ))}
          {shown.length === 0 && (
            <TableRow>
              <TableCell colSpan={4}>No services match.</TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}