Components

import {
  Page, Section, Stack, Grid, Card, Toolbar, Fragment,
  Text, Stat, Divider, Badge, EmptyState, Table,
  Button, SubmitButton, ResetButton, Link,
  Form, Field, HiddenInput, NumberInput, DateInput, DateTimeInput,
  TextInput, Textarea, Select, Checkbox, Toggle,
} from "@backfill-io/sdk/ui";

<Page title="Reconciliation" description="Match Stripe charges to invoices.">
  <Section>...</Section>
</Page>

<Section title="Open invoices" description="Last 30 days.">
  <Table ... />
</Section>

<Stack direction="row" gap="sm">
  <Badge tone="success">Live</Badge>
  <Text tone="muted">Synced 2 minutes ago</Text>
</Stack>

<Stack direction="row" span={3} justify="end" self="center" gap="xs">
  <Button action="bump-hours">+.25</Button>
  <Button action="delete-entry" variant="dangerLink">Delete</Button>
</Stack>

<Grid columns={3} gap="md">
  <Card><Stat label="Pending" value={pendingCount} /></Card>
  <Card><Stat label="Reconciled" value={doneCount} /></Card>
  <Card><Stat label="Errors" value={errorCount} /></Card>
</Grid>

<Card title="This month">
  <Stat label="Revenue" value="$12,400" />
</Card>

<Card href={Routes.page(ctx, "work-week-detail", { query: { id: week.id } })}>
  <Text>{week.customerName}</Text>
  <Button action="delete-week" variant="dangerLink" params={{ workWeekId: week.id }}>
    Delete Week
  </Button>
</Card>

<Card tone="subtle" density="compact">
  <Form action="save-line">...</Form>
</Card>

<Page
  title="Vendors"
  toolbar={<Toolbar><Link href="/vendors/new">New vendor</Link></Toolbar>}
>
  ...
</Page>

<Fragment>
  <Text>First line</Text>
  <Text>Second line</Text>
</Fragment>

<Text tone="muted">No matches found.</Text>

<Stat label="Outstanding AR" value="$48,210" tone="warning">
  <Text tone="muted">across 12 invoices</Text>
</Stat>

<Divider label="Open tasks" />

<Badge tone="warning">Needs review</Badge>

{rows.length === 0
  ? <EmptyState title="No invoices yet" description="They'll show up once Stripe sends the first webhook." />
  : <Table rows={rows} columns={cols} />}

type TableColumn = {
  key: string;                                // matches a key on each row
  label: string;
  align?: "start" | "center" | "end";
  cell?:
    | { kind: "badge"; tone?: BadgeTone }
    | { kind: "link"; hrefKey: string; labelKey?: string }
    | { kind: "action"; action: string; label?: string; labelKey?: string; params?: Record<string, string | number | boolean>; paramsKey?: string }
    | { kind: "money"; currency?: string; currencyKey?: string }
    | { kind: "date" };
};

import { Customer } from "@backfill-io/sdk";

<Table
  rows={Customer.query({ limit: 50 })}
  columns={[
    { key: "name",   label: "Customer" },
    { key: "status", label: "Status", cell: { kind: "badge" } },
    { key: "balance", label: "Balance", align: "end", cell: { kind: "money", currency: "USD" } },
    { key: "href", label: "Open", cell: { kind: "link", hrefKey: "href", labelKey: "name" } },
    { key: "deleteLabel", label: "Actions", cell: { kind: "action", action: "delete-customer", params: { customerId: "id" } } },
  ]}
/>

<Button action="delete-entry" variant="dangerLink" params={{ entryId: entry.id }}>Delete</Button>

<Form action="save-customer">
  <Field name="name" label="Name"><TextInput name="name" /></Field>
  <SubmitButton params={{ customerId: existing.id }}>Save</SubmitButton>
</Form>

<ResetButton>Reset</ResetButton>

<Link href="/nexus-addresses">Back to nexus addresses</Link>

<Link
  href={Routes.page(ctx, "work-weeks", { query: { status: "closed" } })}
  mode="patch"
  variant="button"
>
  Closed
</Link>

<Form action="save-vendor" cancelHref="/vendors">
  <Field name="name" label="Vendor name" required>
    <TextInput name="name" />
  </Field>
  <SubmitButton>Create</SubmitButton>
</Form>

<Form action="update-time-entry" autoSubmit="change">
  <HiddenInput name="entryId" value={entry.id} />
  <Field name="hours" label="Hours">
    <NumberInput defaultValue={entry.hours} min={0} step={0.25} />
  </Field>
</Form>

<Field name="email" label="Email" required pattern="^[^@]+@[^@]+$" helpText="Used for invoices.">
  <TextInput name="email" type="email" />
</Field>

<Form action="save-hours">
  <HiddenInput name="entryId" value={entry.id} />
  <SubmitButton>Save</SubmitButton>
</Form>

<NumberInput defaultValue={1.25} min={0} step={0.25} />

<DateInput defaultValue={weekStart} min={weekStart} max={weekEnd} />

<DateTimeInput defaultValue="2026-05-11T09:00" />

<TextInput name="taxId" placeholder="GB123456789" />

<Textarea name="notes" rows={4} placeholder="Internal notes…" />

<Select
  defaultValue="USD"
  options={[
    { value: "USD", label: "US Dollar" },
    { value: "EUR", label: "Euro" },
    { value: "GBP", label: "British Pound" },
  ]}
/>

<Field name="active" label="Active">
  <Checkbox checked={existing.active} />
</Field>

<Toggle checked={settings.notifications} />

import { ok, message, redirect, refresh, validationError } from "@backfill-io/sdk/ui";

import { Vendor } from "@backfill-io/sdk";
import { redirect, validationError } from "@backfill-io/sdk/ui";

export default async function saveVendor(ctx) {
  if (!ctx.values.name) {
    return validationError("Please fix the errors", [
      { field: "name", message: "Required" },
    ]);
  }
  Vendor.create({ name: ctx.values.name });
  return redirect("/vendors", "Vendor created", "success");
}

type ScalarValue = string | number | boolean;

type TableColumn = {
  key: string;
  label: string;
  align?: "start" | "center" | "end";
  cell?:
    | { kind: "badge"; tone?: "info" | "success" | "warning" | "error" | "neutral" }
    | { kind: "link"; hrefKey: string; labelKey?: string }
    | { kind: "action"; action: string; label?: string; labelKey?: string; params?: Record<string, ScalarValue>; paramsKey?: string }
    | { kind: "money"; currency?: string; currencyKey?: string }
    | { kind: "date" };
};

type SelectOption = { value: string; label: string };