Table

"use client";

import { useMemo } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { DataListPagination } from "@/components/f-ui/data-list-chrome/data-list-pagination";
import { DataListSearchInput } from "@/components/f-ui/data-list-chrome/data-list-search-input";
import { DataListProvider } from "@/components/f-ui/data-list-chrome/layout/data-list-provider";
import { createInMemoryListAdapter } from "@/components/f-ui/data-list-internals/adapters/in-memory-list-adapter";
import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";

import {
  createDirectoryMembers,
  delay,
  type DirectoryMember,
} from "@/demos/table/directory-demo-data";
import { f } from "@/components/f-ui/field-types/catalog";

const ROWS = createDirectoryMembers(40);

const schema = defineDataListSchema<DirectoryMember>({
  name: f.text({ label: "Name", sortable: true }),
  email: f.text({ label: "Email" }),
  department: f.text({ label: "Department", sortable: true }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        invited: { label: "Invited" },
      } }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

/**
 * One network fetch loads the full directory; search, sort, and pagination
 * then run in memory via applyQuery (client full-load recipe).
 */
function TableClientFullLoadDemoInner() {
  const adapter = useMemo(
    () =>
      createInMemoryListAdapter<DirectoryMember>({
        load: async (signal) => {
          await delay(400, signal);
          return ROWS;
        },
      }),
    [],
  );

  const handle = useDataList({
    schema,
    listCode: "demo-table-client-full-load",
    adapter,
    getRowId: (row) => row.id,
    defaultPageSize: 5,
    features: {
      filters: true,
      selection: true,
      pagination: { mode: "offset" },
    },
  });

  return (
    <DataListProvider dataList={handle}>
      <div className="space-y-3 rounded-xl border bg-card p-4 shadow-sm">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
          <DataListSearchInput className="sm:max-w-xs" dataList={handle} />
          <p className="text-muted-foreground text-xs tabular-nums">
            {handle.selection.count} selected across all pages
          </p>
        </div>
        <Table dataList={handle} stickyHeader />
        <DataListPagination
          dataList={handle}
          pageSizeOptions={[5, 10]}
          className="border-border border-t pt-2"
        />
      </div>
    </DataListProvider>
  );
}

export function TableClientFullLoadDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableClientFullLoadDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { useMemo } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { DataListPagination } from "@/components/f-ui/data-list-chrome/data-list-pagination";
import { DataListSearchInput } from "@/components/f-ui/data-list-chrome/data-list-search-input";
import { DataListProvider } from "@/components/f-ui/data-list-chrome/layout/data-list-provider";
import { applyQuery } from "@/components/f-ui/data-list-internals/adapters/apply-query";
import type { DataListAdapter } from "@/components/f-ui/data-list-internals/adapters/data-list-adapter";
import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";

import {
  createDirectoryMembers,
  delay,
  type DirectoryMember,
} from "@/demos/table/directory-demo-data";
import { f } from "@/components/f-ui/field-types/catalog";

const ALL_ROWS = createDirectoryMembers(120);

const schema = defineDataListSchema<DirectoryMember>({
  name: f.text({ label: "Name", sortable: true }),
  email: f.text({ label: "Email" }),
  department: f.text({ label: "Department", sortable: true }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        invited: { label: "Invited" },
      } }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

/**
 * Fake server adapter: every page / search / sort pays a network delay, then
 * applies the same filter → sort → page pipeline a real API would.
 */
function createFakeServerDirectoryAdapter(
  allRows: readonly DirectoryMember[],
): DataListAdapter<DirectoryMember> {
  const adapter: DataListAdapter<DirectoryMember> = async (request) => {
    await delay(350, request.signal);
    return applyQuery(allRows, request);
  };
  adapter.versionKey = ["demo-table-server-offset", allRows.length];
  return adapter;
}

/**
 * Large directories should not download in one shot. Each page, search, and sort
 * is a request; selection stores IDs across pages.
 */
function TableServerOffsetDemoInner() {
  const adapter = useMemo(
    () => createFakeServerDirectoryAdapter(ALL_ROWS),
    [],
  );

  const handle = useDataList({
    schema,
    listCode: "demo-table-server-offset",
    adapter,
    getRowId: (row) => row.id,
    defaultPageSize: 5,
    features: {
      filters: true,
      selection: true,
      pagination: { mode: "offset" },
    },
  });

  return (
    <DataListProvider dataList={handle}>
      <div className="space-y-3 rounded-xl border bg-card p-4 shadow-sm">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
          <DataListSearchInput
            className="sm:max-w-xs"
            dataList={handle}
            minChars={2}
            placeholder="Search (min 2 characters)…"
          />
          <p className="text-muted-foreground text-xs tabular-nums">
            {handle.selection.count} selected across all pages
          </p>
        </div>
        <Table dataList={handle} stickyHeader />
        <DataListPagination
          dataList={handle}
          pageSizeOptions={[5, 10, 20]}
          className="border-border border-t pt-2"
        />
      </div>
    </DataListProvider>
  );
}

export function TableServerOffsetDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableServerOffsetDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  owner: string;
  status: "active" | "paused" | "archived";
  calls: number;
  amount: number;
  createdAt: string;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", owner: "Ada", status: "active", calls: 1280, amount: 4200, createdAt: "2026-01-04" },
  { id: "2", name: "Auth Gateway", owner: "Lin", status: "active", calls: 980, amount: 3100, createdAt: "2026-02-11" },
  { id: "3", name: "Image Pipeline", owner: "Mei", status: "paused", calls: 210, amount: 760, createdAt: "2026-03-02" },
  { id: "4", name: "Search Index", owner: "Ravi", status: "active", calls: 5400, amount: 9900, createdAt: "2026-03-19" },
  { id: "5", name: "Legacy Export", owner: "Sam", status: "archived", calls: 12, amount: 40, createdAt: "2025-11-22" },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  owner: f.text({ label: "Owner", sortable: true }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        paused: { label: "Paused" },
        archived: { label: "Archived" },
      } }),
  calls: f.number({ label: "Calls", sortable: true }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
  createdAt: f.date({ label: "Created", sortable: true }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function TableBasicDemoInner() {
  const handle = useDataList({
    schema: demoAppSchema,
    listCode: "demo-apps-basic",
    data: DEMO_APPS,
    getRowId: (r) => r.id,
    defaultSort: [{ field: "name", order: "asc" }],
  });

  return (
    <div className="rounded-xl border bg-card p-4 shadow-sm">
      <Table
        dataList={handle}
        columns={{ amount: { align: "end" }, calls: { align: "end" } }}
      />
    </div>
  );
}

/** Controlled recipe — you own `useDataList`; the table renders the matrix only. */
export function TableBasicDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableBasicDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  owner: string;
  status: "active" | "paused" | "archived";
  calls: number;
  amount: number;
  createdAt: string;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", owner: "Ada", status: "active", calls: 1280, amount: 4200, createdAt: "2026-01-04" },
  { id: "2", name: "Auth Gateway", owner: "Lin", status: "active", calls: 980, amount: 3100, createdAt: "2026-02-11" },
  { id: "3", name: "Image Pipeline", owner: "Mei", status: "paused", calls: 210, amount: 760, createdAt: "2026-03-02" },
  { id: "4", name: "Search Index", owner: "Ravi", status: "active", calls: 5400, amount: 9900, createdAt: "2026-03-19" },
  { id: "5", name: "Legacy Export", owner: "Sam", status: "archived", calls: 12, amount: 40, createdAt: "2025-11-22" },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  owner: f.text({ label: "Owner", sortable: true }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        paused: { label: "Paused" },
        archived: { label: "Archived" },
      } }),
  calls: f.number({ label: "Calls", sortable: true }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
  createdAt: f.date({ label: "Created", sortable: true }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

/** Uncontrolled recipe — pass `schema` + `data`; the table owns its handle. */
export function TableUncontrolledDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="rounded-xl border bg-card p-4 shadow-sm">
        <Table
          schema={demoAppSchema}
          data={DEMO_APPS}
          listCode="demo-apps-uncontrolled"
          getRowId={(r) => r.id}
          columns={{ amount: { align: "end" }, calls: { align: "end" } }}
        />
      </div>
    </QueryClientProvider>
  );
}

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

import {
  CELL_DEMO_ROWS,
  TableCellDemoShell,
  type CellDemoLine,
} from "./table-cell-customization-shared";

const schema = defineDataListSchema<CellDemoLine>({
  sku: f.text({ label: "SKU" }),
  qty: f.number({
    label: "Qty",
    renderCell: (formatted, row) =>
      row.qty >= 10 ? (
        <span className="inline-flex items-center gap-1">
          {formatted}
          <span className="text-muted-foreground text-xs">Bulk</span>
        </span>
      ) : (
        formatted
      ),
  }),
});

function Inner() {
  const handle = useDataList({
    schema,
    listCode: "demo-cell-wrap-copy",
    data: CELL_DEMO_ROWS,
    getRowId: (r) => r.id,
  });
  return <Table dataList={handle} columns={{ qty: { align: "end" } }} />;
}

/** Layer 3: keep kind formatting, add host copy beside the value. */
export function TableCellWrapCopyDemo() {
  return (
    <TableCellDemoShell>
      <Inner />
    </TableCellDemoShell>
  );
}

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

import {
  CELL_DEMO_ROWS,
  TableCellDemoShell,
  type CellDemoLine,
} from "./table-cell-customization-shared";

const schema = defineDataListSchema<CellDemoLine>({
  sku: f.text({ label: "SKU" }),
  amount: f.currency({ label: "Amount", currency: "USD", measure: "none" }),
});

function Inner() {
  const handle = useDataList({
    schema,
    listCode: "demo-cell-wash",
    data: CELL_DEMO_ROWS,
    getRowId: (r) => r.id,
  });
  return (
    <Table
      dataList={handle}
      columns={{
        amount: {
          align: "end",
          cellClassName: (row) =>
            row.amount > 1000 ? "bg-warning/10" : undefined,
        },
      }}
    />
  );
}

/** Layer 4: paint the td. Returning undefined clears host paint. */
export function TableCellWashDemo() {
  return (
    <TableCellDemoShell>
      <Inner />
    </TableCellDemoShell>
  );
}

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { CellCriticalityValue } from "@/components/f-ui/table/lib/cell-criticality";
import { f } from "@/components/f-ui/field-types/catalog";

import {
  CELL_DEMO_ROWS,
  TableCellDemoShell,
  type CellDemoLine,
} from "./table-cell-customization-shared";

const schema = defineDataListSchema<CellDemoLine>({
  sku: f.text({ label: "SKU" }),
  amount: f.currency({
    label: "Amount",
    currency: "USD",
    measure: "none",
    renderCell: (formatted, row) => (
      <CellCriticalityValue
        criticality={row.amount > 1000 ? "warning" : "success"}
        reason={row.amount > 1000 ? "Over $1,000" : undefined}
      >
        {formatted}
      </CellCriticalityValue>
    ),
  }),
});

function Inner() {
  const handle = useDataList({
    schema,
    listCode: "demo-cell-criticality",
    data: CELL_DEMO_ROWS,
    getRowId: (r) => r.id,
  });
  return <Table dataList={handle} columns={{ amount: { align: "end" } }} />;
}

/** Layer 3 + helper: colour on the value plus a mandatory icon. */
export function TableCellCriticalityDemo() {
  return (
    <TableCellDemoShell>
      <Inner />
    </TableCellDemoShell>
  );
}

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

import {
  CELL_DEMO_ROWS,
  TableCellDemoShell,
  type CellDemoLine,
} from "./table-cell-customization-shared";

const schema = defineDataListSchema<CellDemoLine>({
  sku: f.text({ label: "SKU" }),
  source: f.enum({
    render: "status",
    label: "Source",
    variants: {
      po: { label: "PO", tone: "success" },
      estimated: { label: "Estimated", tone: "warning" },
    },
    renderCell: (formatted, row) =>
      row.stale ? (
        <span className="inline-flex items-center gap-1">
          {formatted}
          <span className="text-muted-foreground text-xs">Stale</span>
        </span>
      ) : (
        formatted
      ),
  }),
});

function Inner() {
  const handle = useDataList({
    schema,
    listCode: "demo-cell-status-badge",
    data: CELL_DEMO_ROWS,
    getRowId: (r) => r.id,
  });
  return <Table dataList={handle} />;
}

/** Enum `render: "status"` and host `renderCell` coexist on the same field. */
export function TableCellStatusBadgeDemo() {
  return (
    <TableCellDemoShell>
      <Inner />
    </TableCellDemoShell>
  );
}

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { Table } from "@/components/f-ui/table/table";
import { CellCriticalityValue } from "@/components/f-ui/table/lib/cell-criticality";
import { f } from "@/components/f-ui/field-types/catalog";

import {
  CELL_DEMO_ROWS,
  TableCellDemoShell,
  type CellDemoLine,
} from "./table-cell-customization-shared";

const schema = defineDataListSchema<CellDemoLine>({
  sku: f.text({ label: "SKU" }),
  qty: f.number({
    label: "Qty",
    renderCell: (formatted, row) =>
      row.qty >= 10 ? (
        <span className="inline-flex items-center gap-1">
          {formatted}
          <span className="text-muted-foreground text-xs">Bulk</span>
        </span>
      ) : (
        formatted
      ),
  }),
  amount: f.currency({
    label: "Amount",
    currency: "USD",
    measure: "none",
    renderCell: (formatted, row) => (
      <CellCriticalityValue criticality={row.amount > 1000 ? "warning" : "success"}>
        {formatted}
      </CellCriticalityValue>
    ),
  }),
  source: f.enum({
    render: "status",
    label: "Source",
    variants: {
      po: { label: "PO", tone: "success" },
      estimated: { label: "Estimated", tone: "warning" },
    },
  }),
});

function Inner() {
  const handle = useDataList({
    schema,
    listCode: "demo-cell-customization",
    data: CELL_DEMO_ROWS,
    getRowId: (r) => r.id,
  });

  return (
    <Table
      dataList={handle}
      columns={{
        qty: { align: "end" },
        amount: {
          align: "end",
          cellClassName: (row) =>
            row.amount > 1000 ? "bg-warning/10" : undefined,
        },
      }}
    />
  );
}

/** Combined scan: wrap copy + criticality + td wash on one grid. */
export function TableCellCustomizationDemo() {
  return (
    <TableCellDemoShell>
      <Inner />
    </TableCellDemoShell>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  owner: string;
  status: "active" | "paused" | "archived";
  calls: number;
  amount: number;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", owner: "Ada", status: "active", calls: 1280, amount: 4200 },
  { id: "2", name: "Auth Gateway", owner: "Lin", status: "active", calls: 980, amount: 3100 },
  { id: "3", name: "Image Pipeline", owner: "Mei", status: "paused", calls: 210, amount: 760 },
  { id: "4", name: "Search Index", owner: "Ravi", status: "active", calls: 5400, amount: 9900 },
  { id: "5", name: "Legacy Export", owner: "Sam", status: "archived", calls: 12, amount: 40 },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  owner: f.text({ label: "Owner" }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        paused: { label: "Paused" },
        archived: { label: "Archived" },
      } }),
  calls: f.number({ label: "Calls", sortable: true }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

/** Row checkboxes require stable `getRowId`; header checkbox selects the current page. */
export function TableSelectionDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="rounded-xl border bg-card p-4 shadow-sm">
        <Table
          schema={demoAppSchema}
          data={DEMO_APPS}
          listCode="demo-apps-selection"
          getRowId={(r) => r.id}
          selection
          columns={{ amount: { align: "end" }, calls: { align: "end" } }}
        />
      </div>
    </QueryClientProvider>
  );
}

"use client";

import { CopyIcon, PencilIcon, Trash2Icon } from "lucide-react";
import { toast } from "sonner";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import type { RowAction } from "@/components/f-ui/data-list-internals/row-actions/row-action-types";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  owner: string;
  status: "active" | "paused" | "archived";
  amount: number;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", owner: "Ada", status: "active", amount: 4200 },
  { id: "2", name: "Auth Gateway", owner: "Lin", status: "active", amount: 3100 },
  { id: "3", name: "Image Pipeline", owner: "Mei", status: "paused", amount: 760 },
  { id: "4", name: "Legacy Export", owner: "Sam", status: "archived", amount: 40 },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  owner: f.text({ label: "Owner" }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        paused: { label: "Paused" },
        archived: { label: "Archived" },
      } }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

const rowActions: RowAction<DemoApp>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    hidden: (row) => row.status === "archived",
    onClick: (r) => {
      toast.info(`Edit ${r.name}`);
    },
  },
  {
    id: "duplicate",
    label: "Duplicate",
    icon: <CopyIcon className="size-3.5" />,
    onClick: (r) => {
      toast.info(`Duplicate ${r.name}`);
    },
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    hidden: (row) => row.status === "archived",
    confirm: { description: "This permanently deletes the application." },
    onClick: (r) => {
      toast.success(`Deleted ${r.name}`);
    },
  },
];

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function TableRowActionsDemoInner() {
  const handle = useDataList({
    schema: demoAppSchema,
    listCode: "demo-apps-row-actions",
    data: DEMO_APPS,
    getRowId: (r) => r.id,
  });

  return (
    <div className="rounded-xl border bg-card p-4 shadow-sm">
      <Table
        dataList={handle}
        columns={{ amount: { align: "end" } }}
        rowActions={rowActions}
        rowActionsPresentation="icon"
        maxInlineRowActions={2}
      />
    </div>
  );
}

/** Right-pinned Actions: Edit + Duplicate inline; trailing Delete; hide both on archived. */
export function TableRowActionsDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableRowActionsDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { CopyIcon, PencilIcon, Trash2Icon } from "lucide-react";
import { toast } from "sonner";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import type { RowAction } from "@/components/f-ui/data-list-internals/row-actions/row-action-types";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  owner: string;
  status: "active" | "paused" | "archived";
  amount: number;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", owner: "Ada", status: "active", amount: 4200 },
  { id: "2", name: "Auth Gateway", owner: "Lin", status: "active", amount: 3100 },
  { id: "3", name: "Image Pipeline", owner: "Mei", status: "paused", amount: 760 },
  { id: "4", name: "Legacy Export", owner: "Sam", status: "archived", amount: 40 },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  owner: f.text({ label: "Owner" }),
  status: f.enum({ render: "status", label: "Status", variants: {
        active: { label: "Active" },
        paused: { label: "Paused" },
        archived: { label: "Archived" },
      } }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

const rowActions: RowAction<DemoApp>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    hidden: (row) => row.status === "archived",
    onClick: (r) => {
      toast.info(`Edit ${r.name}`);
    },
  },
  {
    id: "duplicate",
    label: "Duplicate",
    icon: <CopyIcon className="size-3.5" />,
    onClick: (r) => {
      toast.info(`Duplicate ${r.name}`);
    },
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    hidden: (row) => row.status === "archived",
    confirm: { description: "This permanently deletes the application." },
    onClick: (r) => {
      toast.success(`Deleted ${r.name}`);
    },
  },
];

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function TableRowActionsDemoInner() {
  const handle = useDataList({
    schema: demoAppSchema,
    listCode: "demo-apps-row-actions",
    data: DEMO_APPS,
    getRowId: (r) => r.id,
  });

  return (
    <div className="rounded-xl border bg-card p-4 shadow-sm">
      <Table
        dataList={handle}
        columns={{ amount: { align: "end" } }}
        rowActions={rowActions}
        rowActionsPresentation="icon"
        maxInlineRowActions={2}
      />
    </div>
  );
}

/** Right-pinned Actions: Edit + Duplicate inline; trailing Delete; hide both on archived. */
export function TableRowActionsDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableRowActionsDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { EmptyValuePlaceholder } from "@/components/f-ui/empty-value-placeholder";
import { Table } from "@/components/f-ui/table/table";
import { formatMoneyForDisplay } from "@/components/f-ui/currency-format/currency-format";
import { f } from "@/components/f-ui/field-types/catalog";

interface OrderLine {
  sku: string;
  name: string;
  qty: number;
}

interface DemoOrder {
  id: string;
  customer: string;
  total: number;
  status: "pending" | "shipped" | "cancelled";
  shipTo: string;
  poNumber: string;
  lines: OrderLine[];
}

const ORDERS: DemoOrder[] = [
  {
    id: "SO-1001",
    customer: "Acme Corp",
    total: 4280,
    status: "pending",
    shipTo: "123 Harbor Way, Seattle, WA",
    poNumber: "PO-7781",
    lines: [
      { sku: "SKU-001", name: "Wrench set", qty: 2 },
      { sku: "SKU-010", name: "Socket kit", qty: 1 },
    ],
  },
  {
    id: "SO-1002",
    customer: "Northwind Traders",
    total: 1290,
    status: "shipped",
    shipTo: "88 Market St, Portland, OR",
    poNumber: "PO-4410",
    lines: [{ sku: "SKU-020", name: "Drill bits", qty: 4 }],
  },
  {
    id: "SO-1003",
    customer: "Globex",
    total: 0,
    status: "cancelled",
    shipTo: "",
    poNumber: "",
    lines: [],
  },
];

const orderSchema = defineDataListSchema<DemoOrder>({
  id: f.text({ label: "Order #", sortable: true }),
  customer: f.text({ label: "Customer", sortable: true }),
  total: f.currency({ label: "Total", currency: "USD", sortable: true }),
  status: f.enum({ render: "status", label: "Status", variants: {
        pending: { label: "Pending", tone: "warning" },
        shipped: { label: "Shipped", tone: "success" },
        cancelled: { label: "Cancelled", tone: "neutral" },
      } }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function OrderDetailPanel({ order }: { order: DemoOrder }) {
  if (order.lines.length === 0) {
    return <p className="text-sm text-muted-foreground">No line items on this cancelled order.</p>;
  }

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div className="space-y-1">
        <div className="text-xs font-medium text-muted-foreground">Ship to</div>
        <div className="text-sm">
          {order.shipTo.trim() ? (
            order.shipTo
          ) : (
            <EmptyValuePlaceholder />
          )}
        </div>
      </div>
      <div className="space-y-1">
        <div className="text-xs font-medium text-muted-foreground">PO number</div>
        <div className="text-sm">
          {order.poNumber.trim() ? (
            order.poNumber
          ) : (
            <EmptyValuePlaceholder />
          )}
        </div>
      </div>
      <div className="space-y-2 sm:col-span-2 lg:col-span-3">
        <div className="text-xs font-medium text-muted-foreground">Line items</div>
        <ul className="divide-border divide-y rounded-lg border text-sm">
          {order.lines.map((line) => (
            <li key={line.sku} className="flex items-center justify-between gap-3 px-3 py-2">
              <span>
                <span className="font-medium">{line.sku}</span>
                <span className="text-muted-foreground"> · {line.name}</span>
              </span>
              <span className="tabular-nums text-muted-foreground">Qty {line.qty}</span>
            </li>
          ))}
        </ul>
        <div className="text-end text-sm tabular-nums">
          Order total {formatMoneyForDisplay(order.total, "USD")}
        </div>
      </div>
    </div>
  );
}

/**
 * Ant Table `expandable` parity — primary columns stay scannable; chevron reveals a
 * full-width detail panel beneath the row (non-virtual modes only).
 */
export function TableExpandableDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="rounded-xl border bg-card p-4 shadow-sm">
        <Table
          schema={orderSchema}
          data={ORDERS}
          listCode="demo-orders-expandable"
          getRowId={(r) => r.id}
          columns={{ total: { align: "end" } }}
          expandable={{
            expandedRowRender: (order) => <OrderDetailPanel order={order} />,
            rowExpandable: (order) => order.status !== "cancelled",
          }}
        />
      </div>
    </QueryClientProvider>
  );
}

"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface Claim {
  id: string;
  qty: number;
  note: string;
}

interface CatalogLine {
  id: string;
  sku: string;
  item: string;
  capacity: number;
  claims: Claim[];
}

function claimedQty(row: CatalogLine): number {
  return (row.claims ?? []).reduce((sum, c) => sum + (Number(c.qty) || 0), 0);
}

function remainingQty(row: CatalogLine): number {
  return Number(row.capacity) - claimedQty(row);
}

const LINES: CatalogLine[] = [
  {
    id: "l1",
    sku: "A-100",
    item: "Motor controller",
    capacity: 10,
    claims: [
      { id: "c1", qty: 4, note: "Batch A" },
      { id: "c2", qty: 2, note: "Batch B" },
    ],
  },
  {
    id: "l2",
    sku: "B-220",
    item: "Harness kit",
    capacity: 8,
    claims: [],
  },
  {
    id: "l3",
    sku: "C-310",
    item: "Sensor pack",
    capacity: 5,
    claims: [{ id: "c3", qty: 5, note: "Full allocation" }],
  },
];

const parentSchema = defineDataListSchema<CatalogLine>({
  sku: f.text({ label: "SKU", sortable: true }),
  item: f.text({ label: "Item", sortable: true }),
  capacity: f.number({ label: "Capacity", sortable: true }),
  remaining: f.number({
    label: "Remaining",
    accessor: (row) => remainingQty(row as CatalogLine),
  }),
});

const claimColumns: ColumnDef<Claim, unknown>[] = [
  { id: "qty", accessorKey: "qty", header: "Claim qty", size: 110 },
  { id: "note", accessorKey: "note", header: "Note" },
];

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

/**
 * Read-only master–detail — parent Table expands to an inset child Table with
 * an independent schema (Ant Nested rhythm). Prefer this over `expandable`
 * when children are a different entity type.
 */
export function TableNestedDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="rounded-xl border bg-card p-4 shadow-sm">
        <Table
          schema={parentSchema}
          data={LINES}
          listCode="demo-catalog-nested"
          getRowId={(r) => r.id}
          columns={{ capacity: { align: "end" }, remaining: { align: "end" } }}
          nested={{
            columns: claimColumns,
            getSubRows: (row) => row.claims,
            getSubRowId: (c) => c.id,
          }}
        />
      </div>
    </QueryClientProvider>
  );
}

"use client";

import { toast } from "sonner";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import type { BatchAction } from "@/components/f-ui/data-list-internals/selection/batch-action-types";
import { DataListProvider } from "@/components/f-ui/data-list-chrome/layout/data-list-provider";
import { DataListSelectionBar } from "@/components/f-ui/data-list-chrome/data-list-selection-bar";
import { DataListSelectAllMatchingToggle } from "@/components/f-ui/data-list-chrome/data-list-select-all-matching-toggle";
import { DataListBatchActionButton } from "@/components/f-ui/data-list-chrome/data-list-batch-action-button";
import { DataListPagination } from "@/components/f-ui/data-list-chrome/data-list-pagination";
import { Table } from "@/components/f-ui/table/table";
import { f } from "@/components/f-ui/field-types/catalog";

interface DemoApp {
  id: string;
  name: string;
  amount: number;
}

const DEMO_APPS: DemoApp[] = [
  { id: "1", name: "Billing Service", amount: 4200 },
  { id: "2", name: "Auth Gateway", amount: 3100 },
  { id: "3", name: "Image Pipeline", amount: 760 },
  { id: "4", name: "Search Index", amount: 9900 },
  { id: "5", name: "Legacy Export", amount: 40 },
];

const demoAppSchema = defineDataListSchema<DemoApp>({
  name: f.text({ label: "Name", sortable: true }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

const deleteAction: BatchAction<DemoApp> = {
  id: "delete",
  label: "Delete",
  variant: "destructive",
  onClick: (payload) => {
    toast.success(
      payload.mode === "all-matching"
        ? `Deleting all ${payload.count} matching`
        : `Deleting ${payload.count} selected`,
    );
    payload.clear();
  },
};

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function TableSelectAllMatchingDemoInner() {
  const handle = useDataList({
    schema: demoAppSchema,
    listCode: "demo-apps-all-matching",
    data: DEMO_APPS,
    getRowId: (r) => r.id,
    defaultPageSize: 2,
    features: { selection: true, pagination: { mode: "offset" } },
  });

  return (
    <DataListProvider dataList={handle}>
      <div className="space-y-0 overflow-hidden rounded-xl border bg-card shadow-sm">
        <DataListSelectionBar
          summary={<DataListSelectAllMatchingToggle />}
          actions={<DataListBatchActionButton action={deleteAction} />}
        />
        <div className="p-4">
          <Table dataList={handle} columns={{ amount: { align: "end" } }} />
        </div>
        <DataListPagination className="border-border border-t px-4 py-2" />
      </div>
    </DataListProvider>
  );
}

/** Select every row on the page, then choose Select all N matching for server-side batch scope. */
export function TableSelectAllMatchingDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <TableSelectAllMatchingDemoInner />
    </QueryClientProvider>
  );
}