@flaredev/cli 0.2.0 → 0.4.0

package/templates/app/components/dashboard/resource-chart.tsx

@@ -0,0 +1,91 @@
+import { sql } from "drizzle-orm";
+import type { Resource } from "@flaredev/core";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getDb } from "@/db";
+import { resourceTables } from "@/resources/server";
+import { cached, resourceTag, TTL } from "@/lib/cache";
+
+export interface DayCount {
+  /** "2026-09-23" */
+  date: string;
+  total: number;
+}
+
+/**
+ * How many records were created a day, grouped in SQL rather than by reading rows: one
+ * query over the created_at index, whatever the table's size.
+ */
+export function createdPerDay(name: string, days = 30): Promise<DayCount[]> {
+  const counts = cached(
+    async (resourceName: string, window: number) => {
+      const entry = (resourceTables as unknown as Record<string, { table: unknown } | undefined>)[resourceName];
+      const table = entry?.table as { createdAt?: unknown } | undefined;
+      if (!table?.createdAt) return [];
+      const since = new Date(Date.now() - window * 86_400_000);
+      const rows = (await getDb()
+        .select({
+          date: sql<string>`strftime('%Y-%m-%d', ${table.createdAt} / 1000, 'unixepoch')`,
+          total: sql<number>`count(*)`,
+        })
+        .from(table as never)
+        .where(sql`${table.createdAt} >= ${since.getTime()}`)
+        .groupBy(sql`1`)
+        .orderBy(sql`1`)) as DayCount[];
+      return rows;
+    },
+    ["flare", "created-per-day"],
+    { tags: [resourceTag(name)], revalidate: TTL.short },
+  );
+  return counts(name, days);
+}
+
+/** Fill the gaps: a day with nothing created still needs a column. */
+function series(rows: DayCount[], days: number): DayCount[] {
+  const found = new Map(rows.map((row) => [row.date, row.total]));
+  return Array.from({ length: days }, (_, index) => {
+    const date = new Date(Date.now() - (days - 1 - index) * 86_400_000).toISOString().slice(0, 10);
+    return { date, total: found.get(date) ?? 0 };
+  });
+}
+
+/**
+ * New records a day for the last month, above the table.
+ *
+ * Drawn with CSS rather than a charting library: thirty numbers don't justify shipping
+ * one to the browser, and this renders on the server with the rest of the page.
+ */
+export async function ResourceChart({ resource, days = 30 }: { resource: Resource; days?: number }) {
+  const rows = series(await createdPerDay(resource.name, days), days);
+  const total = rows.reduce((sum, row) => sum + row.total, 0);
+  if (total === 0) return null;
+
+  const peak = Math.max(1, ...rows.map((row) => row.total));
+  const month = new Intl.DateTimeFormat(undefined, { day: "numeric", month: "short" });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">New {resource.pluralLabel.toLowerCase()}</CardTitle>
+        <CardDescription>
+          {total.toLocaleString()} in the last {days} days.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex h-28 items-end gap-0.5" role="img" aria-label={`New ${resource.pluralLabel.toLowerCase()} a day for the last ${days} days`}>
+          {rows.map((row) => (
+            <div
+              key={row.date}
+              title={`${row.date}: ${row.total}`}
+              style={{ height: `${Math.max(2, Math.round((row.total / peak) * 100))}%` }}
+              className="flex-1 rounded-t-sm bg-primary/70 transition-colors hover:bg-primary"
+            />
+          ))}
+        </div>
+        <div className="mt-2 flex justify-between text-xs text-muted-foreground">
+          <span>{month.format(new Date(`${rows[0]!.date}T00:00:00Z`))}</span>
+          <span>{month.format(new Date(`${rows[rows.length - 1]!.date}T00:00:00Z`))}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/app/components/dashboard/resource-form-dialog.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { PlusIcon } from "lucide-react";
+import type { Resource } from "@flaredev/core";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import type { RelationMeta } from "./fields/field-widget";
+import { ResourceForm } from "./resource-form";
+
+export type FormRelations = Record<string, RelationMeta & { initialTitle?: string }>;
+
+interface Props {
+  resource: Resource;
+  relations: FormRelations;
+  listHref: string;
+  mode: "create" | "edit";
+  /** Edit: the record and its id. */
+  id?: string;
+  record?: Record<string, unknown> | null;
+  /** Controlled use (a row menu opens it); otherwise pass `trigger`. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+}
+
+/**
+ * The create/edit form in a dialog, so adding a record doesn't lose the list, its
+ * filters or the place in it. Apps that would rather have a page set
+ * `site.dashboard.forms` to "page" (lib/site.ts) and get the same form full width.
+ */
+export function ResourceFormDialog({ resource, relations, listHref, mode, id, record, open, onOpenChange, trigger }: Props) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const noun = resource.label.toLowerCase();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? `New ${noun}` : `Edit ${noun}`}</DialogTitle>
+          <DialogDescription>{mode === "create" ? `Fill this in and it appears in the list.` : "Changes save straight away."}</DialogDescription>
+        </DialogHeader>
+        {/* Remounting on open clears whatever was typed and abandoned last time. */}
+        {isOpen && (
+          <ResourceForm
+            key={`${mode}-${id ?? "new"}`}
+            resource={resource}
+            mode={mode}
+            id={id}
+            record={record}
+            relations={relations}
+            listHref={listHref}
+            onDone={() => setOpen(false)}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** The list page's "New …" button, when forms open in a dialog. */
+export function NewRecordButton({ resource, relations, listHref }: { resource: Resource; relations: FormRelations; listHref: string }) {
+  return (
+    <ResourceFormDialog
+      resource={resource}
+      relations={relations}
+      listHref={listHref}
+      mode="create"
+      trigger={
+        <Button>
+          <PlusIcon data-icon="inline-start" />
+          New {resource.label.toLowerCase()}
+        </Button>
+      }
+    />
+  );
+}

package/templates/app/components/{admin → dashboard}/resource-form-page.tsx

@@ -1,55 +1,61 @@
-import { notFound } from "next/navigation";
-import { formatValue, storedFields, type Resource } from "@flaredev/core";
-import { adminPath, adminResources, adminStore, requireAccess } from "@/lib/admin";
-import type { RelationMeta } from "./fields/field-widget";
-import { ResourceForm } from "./resource-form";
-
-/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
-export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
-  await requireAccess(resource, id ? "update" : "create");
-  let record: Record<string, unknown> | null = null;
-  if (id) {
-    const result = await adminStore(resource.name).get(id);
-    if (!result.ok) notFound();
-    record = result.data;
-  }
-
-  const byName = new Map(adminResources().map((r) => [r.name, r]));
-  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
-  for (const [key, def] of storedFields(resource)) {
-    if (def.kind !== "belongsTo") continue;
-    const target = byName.get(def.target);
-    if (!target) continue;
-    const value = record?.[key];
-    const titles = typeof value === "string" ? await adminStore(target.name).titles([value]) : {};
-    relations[key] = {
-      name: target.name,
-      label: target.label,
-      pluralLabel: target.pluralLabel,
-      slug: target.slug,
-      titleField: target.titleField,
-      initialTitle: typeof value === "string" ? titles[value] : undefined,
-    };
-  }
-
-  const titleDef = resource.fields[resource.titleField];
-  const title =
-    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold">{title}</h1>
-        {record && <p className="text-xs text-muted-foreground">Edit {resource.label.toLowerCase()}</p>}
-      </div>
-      <ResourceForm
-        resource={resource}
-        mode={record ? "edit" : "create"}
-        id={id}
-        record={record}
-        relations={relations}
-        listHref={adminPath(resource)}
-      />
-    </div>
-  );
-}
+import { notFound } from "next/navigation";
+import { formatValue, storedFields, type Resource } from "@flaredev/core";
+import { resourcePath, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import type { RelationMeta } from "./fields/field-widget";
+import { PageHeader } from "./page-header";
+import { ResourceForm } from "./resource-form";
+
+/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
+export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
+  await requireAccess(resource, id ? "update" : "create");
+  let record: Record<string, unknown> | null = null;
+  if (id) {
+    const result = await dashboardStore(resource.name).get(id);
+    if (!result.ok) notFound();
+    record = result.data;
+  }
+
+  const byName = new Map(allResources().map((r) => [r.name, r]));
+  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "belongsTo") continue;
+    const target = byName.get(def.target);
+    if (!target) continue;
+    const value = record?.[key];
+    const titles = typeof value === "string" ? await dashboardStore(target.name).titles([value]) : {};
+    relations[key] = {
+      name: target.name,
+      label: target.label,
+      pluralLabel: target.pluralLabel,
+      slug: target.slug,
+      titleField: target.titleField,
+      initialTitle: typeof value === "string" ? titles[value] : undefined,
+    };
+  }
+
+  const titleDef = resource.fields[resource.titleField];
+  const title =
+    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={title}
+        description={record ? `Edit this ${resource.label.toLowerCase()}.` : `Add a ${resource.label.toLowerCase()} to ${resource.pluralLabel.toLowerCase()}.`}
+        crumbs={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: resource.pluralLabel, href: resourcePath(resource) },
+          { label: record ? "Edit" : "New" },
+        ]}
+      />
+      <ResourceForm
+        resource={resource}
+        mode={record ? "edit" : "create"}
+        id={id}
+        record={record}
+        relations={relations}
+        listHref={resourcePath(resource)}
+      />
+    </div>
+  );
+}

package/templates/app/components/{admin → dashboard}/resource-form.tsx

@@ -1,139 +1,165 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useMemo, useState, useTransition, type FormEvent } from "react";
-import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type Resource } from "@flaredev/core";
-import { toast } from "sonner";
-import { createRecordAction, updateRecordAction } from "@/app/admin/actions";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardFooter } from "@/components/ui/card";
-import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
-import { Spinner } from "@/components/ui/spinner";
-import { FieldWidget, type RelationMeta } from "./fields/field-widget";
-
-export interface ResourceFormProps {
-  resource: Resource;
-  mode: "create" | "edit";
-  /** Record id (edit mode). */
-  id?: string;
-  record?: Record<string, unknown> | null;
-  /** belongsTo field key → related resource metadata and the current value's title. */
-  relations?: Record<string, RelationMeta & { initialTitle?: string }>;
-  /** Where Cancel and a successful save go. */
-  listHref: string;
-}
-
-const WIDE = new Set(["text", "file"]);
-
-/**
- * Create/edit form rendered from field metadata. Values are validated in the browser
- * with the descriptor's zod schemas, then again on the server by the same store the
- * REST API uses; server errors (e.g. unique conflicts) land on their fields.
- */
-export function ResourceForm({ resource, mode, id, record, relations = {}, listHref }: ResourceFormProps) {
-  const router = useRouter();
-  const validators = useMemo(() => createValidators(resource), [resource]);
-  const fields = useMemo(() => storedFields(resource), [resource]);
-  const [values, setValues] = useState(() => initialFormValues(resource, record));
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [pending, startTransition] = useTransition();
-
-  const setValue = (key: string, value: string | boolean) => {
-    setValues((current) => ({ ...current, [key]: value }));
-    if (errors[key]) setErrors(({ [key]: _removed, ...rest }) => rest);
-  };
-
-  function focusFirstError(fieldErrors: Record<string, string>) {
-    const first = fields.find(([key]) => fieldErrors[key]);
-    if (first) document.getElementById(`field-${first[0]}`)?.focus();
-  }
-
-  function onSubmit(event: FormEvent) {
-    event.preventDefault();
-    const input = formValuesToInput(resource, values, mode);
-    const parsed = (mode === "create" ? validators.create : validators.update).safeParse(input);
-    if (!parsed.success) {
-      const fieldErrors = issuesByField(parsed.error.issues);
-      setErrors(fieldErrors);
-      focusFirstError(fieldErrors);
-      return;
-    }
-
-    startTransition(async () => {
-      const result = mode === "create" ? await createRecordAction(resource.name, input) : await updateRecordAction(resource.name, id!, input);
-      if (result.ok) {
-        toast.success(`${resource.label} ${mode === "create" ? "created" : "saved"}.`);
-        router.push(listHref);
-        router.refresh();
-        return;
-      }
-      const fieldErrors = result.issues ? issuesByField(result.issues) : result.field ? { [result.field]: result.error } : { _form: result.error };
-      setErrors(fieldErrors);
-      focusFirstError(fieldErrors);
-    });
-  }
-
-  return (
-    <form onSubmit={onSubmit} noValidate>
-      <Card>
-        <CardContent>
-          {errors._form && (
-            <Alert variant="destructive" className="mb-6">
-              <AlertDescription>{errors._form}</AlertDescription>
-            </Alert>
-          )}
-          <FieldGroup className="grid gap-6 md:grid-cols-2">
-            {fields.map(([key, def]) => {
-              const error = errors[key];
-              const widgetId = `field-${key}`;
-              const horizontal = def.kind === "boolean";
-              return (
-                <Field
-                  key={key}
-                  data-invalid={error ? true : undefined}
-                  className={WIDE.has(def.kind) ? "md:col-span-2" : undefined}
-                >
-                  <FieldLabel htmlFor={widgetId}>
-                    {def.label}
-                    {def.required && def.kind !== "boolean" && (
-                      <span className="ml-0.5 text-muted-foreground" aria-hidden>
-                        *
-                      </span>
-                    )}
-                  </FieldLabel>
-                  <div className={horizontal ? "flex h-9 items-center" : undefined}>
-                    <FieldWidget
-                      id={widgetId}
-                      name={key}
-                      resourceName={resource.name}
-                      fieldKey={key}
-                      field={def}
-                      value={values[key] ?? ""}
-                      onChange={(value) => setValue(key, value)}
-                      invalid={Boolean(error)}
-                      disabled={pending}
-                      relation={relations[key]}
-                    />
-                  </div>
-                  {def.helpText && <FieldDescription>{def.helpText}</FieldDescription>}
-                  {error && <FieldError>{error}</FieldError>}
-                </Field>
-              );
-            })}
-          </FieldGroup>
-        </CardContent>
-        <CardFooter className="justify-end gap-2 border-t">
-          <Button variant="outline" asChild>
-            <Link href={listHref}>Cancel</Link>
-          </Button>
-          <Button type="submit" disabled={pending}>
-            {pending && <Spinner data-icon="inline-start" />}
-            {mode === "create" ? `Create ${resource.label.toLowerCase()}` : "Save changes"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </form>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useState, useTransition, type FormEvent } from "react";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type Resource } from "@flaredev/core";
+import { toast } from "sonner";
+import { createRecordAction, updateRecordAction } from "@/app/dashboard/actions";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Spinner } from "@/components/ui/spinner";
+import { FieldWidget, type RelationMeta } from "./fields/field-widget";
+
+export interface ResourceFormProps {
+  resource: Resource;
+  mode: "create" | "edit";
+  /** Record id (edit mode). */
+  id?: string;
+  record?: Record<string, unknown> | null;
+  /** belongsTo field key → related resource metadata and the current value's title. */
+  relations?: Record<string, RelationMeta & { initialTitle?: string }>;
+  /** Where Cancel and a successful save go, when the form owns the page. */
+  listHref: string;
+  /** In a dialog: close it instead of navigating, and drop the card around the fields. */
+  onDone?: () => void;
+}
+
+const WIDE = new Set(["text", "file"]);
+
+/**
+ * Create/edit form rendered from field metadata. Values are validated in the browser
+ * with the descriptor's zod schemas, then again on the server by the same store the
+ * REST API uses; server errors (e.g. unique conflicts) land on their fields.
+ */
+export function ResourceForm({ resource, mode, id, record, relations = {}, listHref, onDone }: ResourceFormProps) {
+  const router = useRouter();
+  const validators = useMemo(() => createValidators(resource), [resource]);
+  const fields = useMemo(() => storedFields(resource), [resource]);
+  const [values, setValues] = useState(() => initialFormValues(resource, record));
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [pending, startTransition] = useTransition();
+
+  const setValue = (key: string, value: string | boolean) => {
+    setValues((current) => ({ ...current, [key]: value }));
+    if (errors[key]) setErrors(({ [key]: _removed, ...rest }) => rest);
+  };
+
+  function focusFirstError(fieldErrors: Record<string, string>) {
+    const first = fields.find(([key]) => fieldErrors[key]);
+    if (first) document.getElementById(`field-${first[0]}`)?.focus();
+  }
+
+  function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    const input = formValuesToInput(resource, values, mode);
+    const parsed = (mode === "create" ? validators.create : validators.update).safeParse(input);
+    if (!parsed.success) {
+      const fieldErrors = issuesByField(parsed.error.issues);
+      setErrors(fieldErrors);
+      focusFirstError(fieldErrors);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = mode === "create" ? await createRecordAction(resource.name, input) : await updateRecordAction(resource.name, id!, input);
+      if (result.ok) {
+        toast.success(`${resource.label} ${mode === "create" ? "created" : "saved"}.`);
+        if (onDone) onDone();
+        else router.push(listHref);
+        router.refresh();
+        return;
+      }
+      const fieldErrors = result.issues ? issuesByField(result.issues) : result.field ? { [result.field]: result.error } : { _form: result.error };
+      setErrors(fieldErrors);
+      focusFirstError(fieldErrors);
+    });
+  }
+
+  const Frame = onDone ? DialogFrame : Card;
+  const Body = onDone ? DialogBody : CardContent;
+  const Footer = onDone ? DialogFooterRow : CardFooter;
+
+  return (
+    <form onSubmit={onSubmit} noValidate>
+      <Frame>
+        <Body>
+          {errors._form && (
+            <Alert variant="destructive" className="mb-6">
+              <AlertDescription>{errors._form}</AlertDescription>
+            </Alert>
+          )}
+          <FieldGroup className="grid gap-6 md:grid-cols-2">
+            {fields.map(([key, def]) => {
+              const error = errors[key];
+              const widgetId = `field-${key}`;
+              const horizontal = def.kind === "boolean";
+              return (
+                <Field
+                  key={key}
+                  data-invalid={error ? true : undefined}
+                  className={WIDE.has(def.kind) ? "md:col-span-2" : undefined}
+                >
+                  <FieldLabel htmlFor={widgetId}>
+                    {def.label}
+                    {def.required && def.kind !== "boolean" && (
+                      <span className="ml-0.5 text-muted-foreground" aria-hidden>
+                        *
+                      </span>
+                    )}
+                  </FieldLabel>
+                  <div className={horizontal ? "flex h-9 items-center" : undefined}>
+                    <FieldWidget
+                      id={widgetId}
+                      name={key}
+                      resourceName={resource.name}
+                      fieldKey={key}
+                      field={def}
+                      value={values[key] ?? ""}
+                      onChange={(value) => setValue(key, value)}
+                      invalid={Boolean(error)}
+                      disabled={pending}
+                      relation={relations[key]}
+                    />
+                  </div>
+                  {def.helpText && <FieldDescription>{def.helpText}</FieldDescription>}
+                  {error && <FieldError>{error}</FieldError>}
+                </Field>
+              );
+            })}
+          </FieldGroup>
+        </Body>
+        <Footer className="flex justify-end gap-2 border-t pt-4">
+          {onDone ? (
+            <Button type="button" variant="outline" onClick={onDone} disabled={pending}>
+              Cancel
+            </Button>
+          ) : (
+            <Button variant="outline" asChild>
+              <Link href={listHref}>Cancel</Link>
+            </Button>
+          )}
+          <Button type="submit" disabled={pending}>
+            {pending && <Spinner data-icon="inline-start" />}
+            {mode === "create" ? `Create ${resource.label.toLowerCase()}` : "Save changes"}
+          </Button>
+        </Footer>
+      </Frame>
+    </form>
+  );
+}
+
+/** Plain wrappers so the same form works in a page (a card) and in a dialog (no card). */
+function DialogFrame({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-col gap-4">{children}</div>;
+}
+
+function DialogBody({ children }: { children: React.ReactNode }) {
+  return <div className="max-h-[60vh] overflow-y-auto px-1">{children}</div>;
+}
+
+function DialogFooterRow({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <div className={className}>{children}</div>;
+}

package/templates/app/components/dashboard/resource-stats.tsx

@@ -0,0 +1,48 @@
+import { storedFields, optionLabel, type Resource } from "@flaredev/core";
+import { recentCounts, recordCount, trend, valueCounts } from "@/lib/dashboard";
+import { resourceIcon } from "./resource-icon";
+import { StatCards, type Stat } from "./stat-card";
+
+/**
+ * The numbers above a resource's table: how many there are, how many are new, and how
+ * they split across the resource's own status field.
+ *
+ * The split comes from the first enum field the descriptor marks as filterable, which
+ * in practice is the status of the thing — a deal's stage, an invoice's state.
+ */
+export async function ResourceStats({ resource }: { resource: Resource }) {
+  const [total, recent] = await Promise.all([recordCount(resource.name), recentCounts(resource.name)]);
+
+  const stats: Stat[] = [
+    {
+      label: `Total ${resource.pluralLabel.toLowerCase()}`,
+      value: total,
+      icon: resourceIcon(resource.icon),
+    },
+    {
+      label: "New this week",
+      value: recent.current,
+      change: trend(recent.current, recent.previous),
+      hint: `${recent.previous.toLocaleString()} the week before`,
+    },
+  ];
+
+  const statusField = storedFields(resource).find(([, def]) => def.kind === "enum" && def.filterable !== false);
+  if (statusField && total > 0) {
+    const [key, def] = statusField;
+    if (def.kind === "enum") {
+      const counts = await valueCounts(resource.name, key);
+      // Two options at most: a strip of eight cards is a wall, not a summary.
+      for (const option of def.options.slice(0, 2)) {
+        const value = counts[option] ?? 0;
+        stats.push({
+          label: optionLabel(def, option),
+          value,
+          hint: `${Math.round((value / total) * 100)}% of all`,
+        });
+      }
+    }
+  }
+
+  return <StatCards stats={stats.slice(0, 4)} />;
+}