create-nevela 0.5.1 → 0.5.3

package/template/web/components/dashboard/bulk-create-grid.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo, useRef, useState, useTransition } from "react";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
+import { ListPlusIcon, PlusIcon, XIcon } from "lucide-react";
+import { toast } from "sonner";
+import { createManyAction } from "@/app/dashboard/actions";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { FieldWidget, type RelationMeta } from "./fields/field-widget";
+
+type FieldDef = StoredField & { label: string };
+type Values = Record<string, string | boolean>;
+type Relations = Record<string, RelationMeta & { initialTitle?: string }>;
+
+interface Row {
+  /** Stays with the row as others are added and removed around it. */
+  key: number;
+  values: Values;
+}
+
+/**
+ * Enough to see that more can be added, and few enough not to look like a form to fill
+ * in. An empty grid gives nothing to type into; one row means clicking "Add row" before
+ * you have begun.
+ */
+const STARTING_ROWS = 5;
+
+/**
+ * Where the grid stops adding rows: what Laravel accepts in one request unless an app
+ * changes it (config/nevela.php, bulk_max). An app that sets it lower is still safe:
+ * Laravel refuses the larger request, and its message, which says the limit, is shown.
+ */
+const MOST_ROWS = 500;
+
+/** Kinds that fit in a cell: one control, one value. A file needs its own upload, so it is left to the form. */
+const IN_A_CELL = new Set(["string", "text", "int", "float", "boolean", "date", "datetime", "enum", "belongsTo"]);
+
+/**
+ * Add several records at once, in a grid.
+ *
+ * Between "New" and "Import". Import is for a file somebody already has, and New is for
+ * one record. This is for the twelve you have in your head or on a piece of paper, which
+ * until now meant opening the form twelve times.
+ *
+ * Rows left empty are ignored, so nobody has to delete the ones they didn't use. The rows
+ * that were filled in are saved together or not at all: Laravel checks every one first,
+ * and a mistake comes back against its row with nothing created.
+ */
+export function BulkCreateButton({ resource, relations = {} }: { resource: ClientResource; relations?: Relations }) {
+  const [open, setOpen] = useState(false);
+  const plural = resource.pluralLabel.toLowerCase();
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <ListPlusIcon data-icon="inline-start" />
+          Add several
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex max-h-[90vh] flex-col gap-4 sm:max-w-[min(96vw,84rem)]">
+        <DialogHeader>
+          <DialogTitle>Add several {plural}</DialogTitle>
+          <DialogDescription>One row for each. Rows you leave empty are ignored, and they are all saved together or not at all.</DialogDescription>
+        </DialogHeader>
+        {/* Mounted only while open, so what was typed and abandoned last time is gone. */}
+        {open && <Grid resource={resource} relations={relations} onDone={() => setOpen(false)} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Grid({ resource, relations, onDone }: { resource: ClientResource; relations: Relations; onDone: () => void }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const validators = useMemo(() => createValidators(resource), [resource]);
+  const all = useMemo(() => storedFields(resource) as [string, FieldDef][], [resource]);
+  const fields = useMemo(() => all.filter(([, def]) => IN_A_CELL.has(def.kind)), [all]);
+  // A field this grid can't show and Laravel requires would fail every row, with nothing
+  // on screen to fix. Say so, and leave those records to the form.
+  const missing = useMemo(() => all.filter(([, def]) => !IN_A_CELL.has(def.kind) && def.required !== false), [all]);
+
+  const blank = useMemo(() => initialFormValues(resource, null) as Values, [resource]);
+  const nextKey = useRef(STARTING_ROWS);
+  const [rows, setRows] = useState<Row[]>(() => Array.from({ length: STARTING_ROWS }, (_, key) => ({ key, values: { ...blank } })));
+  /** Problems by row key, then by field. "" holds what isn't about one field. */
+  const [problems, setProblems] = useState<Record<number, Record<string, string>>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  // A row is empty when it is exactly as it started: a tick box left unticked is not an entry.
+  const isEmpty = (values: Values) => fields.every(([key]) => values[key] === blank[key]);
+  const filled = rows.filter((row) => !isEmpty(row.values));
+  const noun = filled.length === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase();
+
+  function change(rowKey: number, field: string, value: string | boolean) {
+    setRows((current) => current.map((row) => (row.key === rowKey ? { ...row, values: { ...row.values, [field]: value } } : row)));
+    if (problems[rowKey]?.[field]) {
+      setProblems(({ [rowKey]: row = {}, ...rest }) => {
+        const { [field]: _fixed, ...others } = row;
+        return Object.keys(others).length > 0 ? { ...rest, [rowKey]: others } : rest;
+      });
+    }
+  }
+
+  function addRows(count: number) {
+    setRows((current) => [...current, ...Array.from({ length: Math.min(count, MOST_ROWS - current.length) }, () => ({ key: nextKey.current++, values: { ...blank } }))]);
+  }
+
+  function removeRow(rowKey: number) {
+    setRows((current) => (current.length > 1 ? current.filter((row) => row.key !== rowKey) : [{ key: nextKey.current++, values: { ...blank } }]));
+    setProblems(({ [rowKey]: _gone, ...rest }) => rest);
+  }
+
+  function save() {
+    setError(null);
+    if (filled.length === 0) {
+      setError("Nothing to create yet: every row is empty.");
+      return;
+    }
+    // Checked here first with the descriptor's own rules, so most mistakes never leave the page.
+    const found: Record<number, Record<string, string>> = {};
+    const inputs = filled.map((row) => {
+      const input = formValuesToInput(resource, row.values, "create") as Record<string, unknown>;
+      const parsed = validators.create.safeParse(input);
+      if (!parsed.success) {
+        const visible = Object.fromEntries(Object.entries(issuesByField(parsed.error.issues)).filter(([key]) => fields.some(([field]) => field === key)));
+        if (Object.keys(visible).length > 0) found[row.key] = visible;
+      }
+      // Only what the grid shows is sent; a field it can't show is left for Laravel to judge.
+      return Object.fromEntries(Object.entries(input).filter(([key]) => fields.some(([field]) => field === key)));
+    });
+    if (Object.keys(found).length > 0) {
+      setProblems(found);
+      setError(Object.keys(found).length === 1 ? "One row needs fixing." : `${Object.keys(found).length} rows need fixing.`);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await createManyAction(resource.name, inputs);
+      if (result.ok) {
+        toast.success(`${result.data.created} ${result.data.created === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase()} created.`);
+        onDone();
+        router.refresh();
+        return;
+      }
+      // Laravel numbers the rows it was sent, which are only the ones filled in. Here a
+      // row is called by its number on screen, so every number it mentions is translated.
+      const onScreen = (sent: number) => {
+        const row = filled[sent - 1];
+        return row ? rows.findIndex((candidate) => candidate.key === row.key) + 1 : sent;
+      };
+      const fromServer: Record<number, Record<string, string>> = {};
+      const numbers: number[] = [];
+      for (const problem of result.rows ?? []) {
+        const row = filled[problem.row - 1];
+        if (!row) continue;
+        numbers.push(onScreen(problem.row));
+        fromServer[row.key] = {};
+        for (const issue of problem.issues) {
+          const field = issue.path.split(".")[0] ?? "";
+          const known = fields.some(([key]) => key === field);
+          const label = all.find(([key]) => key === field)?.[1].label;
+          const message = issue.message.replace(/\brow (\d+)\b/g, (_, sent: string) => `row ${onScreen(Number(sent))}`);
+          // A problem with a field that has no column here is said beside the row instead.
+          fromServer[row.key]![known ? field : ""] ??= known || !label ? message : `${label}: ${message}`;
+        }
+      }
+      setProblems(fromServer);
+      setError(numbers.length === 0 ? result.error : numbers.length === 1 ? `Nothing was created: row ${numbers[0]} needs fixing.` : `Nothing was created: ${numbers.length} rows need fixing.`);
+    });
+  }
+
+  return (
+    <>
+      {missing.length > 0 && (
+        <Alert>
+          <AlertDescription>
+            {missing.map(([, def]) => def.label).join(", ")} {missing.length === 1 ? "is" : "are"} required and can&apos;t be filled in here, so these rows would be
+            refused. Use New {resource.label.toLowerCase()} for {resource.pluralLabel.toLowerCase()} instead.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-auto rounded-md border">
+        <table className="w-full border-collapse text-sm">
+          <thead className="sticky top-0 z-10 bg-muted text-left text-muted-foreground">
+            <tr>
+              <th scope="col" className="w-10 px-2 py-2 text-center font-medium">
+                #
+              </th>
+              {fields.map(([key, def]) => (
+                <th key={key} scope="col" className={cn("px-2 py-2 font-medium whitespace-nowrap", def.kind === "boolean" ? "w-24 text-center" : "min-w-44")}>
+                  {def.label}
+                  {def.required !== false && def.kind !== "boolean" && (
+                    <span className="text-destructive" aria-label="required">
+                      {" "}
+                      *
+                    </span>
+                  )}
+                </th>
+              ))}
+              <th scope="col" className="w-10">
+                <span className="sr-only">Remove</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, index) => {
+              const wrong = problems[row.key] ?? {};
+              const messages = Object.entries(wrong).map(([field, message]) => {
+                const label = fields.find(([key]) => key === field)?.[1].label;
+                return label ? `${label}: ${message}` : message;
+              });
+              return (
+                <tr key={row.key} className="border-t align-top">
+                  <td className="px-2 py-3 text-center text-muted-foreground tabular-nums">{index + 1}</td>
+                  {fields.map(([key, def]) => (
+                    <td key={key} className={cn("px-1.5 py-1.5", def.kind === "boolean" && "text-center")}>
+                      <Cell
+                        id={`bulk-${row.key}-${key}`}
+                        resourceName={resource.name}
+                        fieldKey={key}
+                        field={def}
+                        label={`${def.label}, row ${index + 1}`}
+                        value={row.values[key] ?? ""}
+                        invalid={Boolean(wrong[key])}
+                        disabled={pending}
+                        relation={relations[key]}
+                        onChange={(value) => change(row.key, key, value)}
+                      />
+                      {/* Said under the cell it is about. One with no cell of its own goes under the first. */}
+                      {key === fields[0]?.[0] && messages.length > 0 && (
+                        <p role="alert" className="mt-1 w-max max-w-[60vw] text-left text-xs text-destructive">
+                          {messages.join(" · ")}
+                        </p>
+                      )}
+                    </td>
+                  ))}
+                  <td className="px-1 py-1.5">
+                    <Button type="button" variant="ghost" size="icon-sm" aria-label={`Remove row ${index + 1}`} disabled={pending} onClick={() => removeRow(row.key)}>
+                      <XIcon />
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" variant="outline" size="sm" disabled={pending || rows.length >= MOST_ROWS} onClick={() => addRows(1)}>
+          <PlusIcon data-icon="inline-start" />
+          Add row
+        </Button>
+        <Button type="button" variant="ghost" size="sm" disabled={pending || rows.length >= MOST_ROWS} onClick={() => addRows(5)}>
+          Add 5 rows
+        </Button>
+        {error && (
+          <p role="alert" className="text-sm text-destructive">
+            {error}
+          </p>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button type="button" variant="ghost" disabled={pending} onClick={onDone}>
+          Cancel
+        </Button>
+        <Button type="button" disabled={pending || filled.length === 0 || missing.length > 0} onClick={save}>
+          {pending && <Spinner />}
+          {filled.length === 0 ? `Create ${resource.pluralLabel.toLowerCase()}` : `Create ${filled.length} ${noun}`}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+/**
+ * One cell. Long text is a single line here and a tick box is a tick box: a grid is for
+ * typing across, and a four-line text area or a labelled switch in every row is neither
+ * quick nor readable. Everything else is the form's own control, so a date, a price or a
+ * link to another record behaves exactly as it does there.
+ */
+function Cell({
+  id,
+  resourceName,
+  fieldKey,
+  field,
+  label,
+  value,
+  invalid,
+  disabled,
+  relation,
+  onChange,
+}: {
+  id: string;
+  resourceName: string;
+  fieldKey: string;
+  field: FieldDef;
+  label: string;
+  value: string | boolean;
+  invalid: boolean;
+  disabled: boolean;
+  relation?: RelationMeta & { initialTitle?: string };
+  onChange: (value: string | boolean) => void;
+}) {
+  if (field.kind === "boolean") {
+    return <Checkbox id={id} aria-label={label} checked={value === true} disabled={disabled} onCheckedChange={(checked) => onChange(checked === true)} className="mt-2" />;
+  }
+  if (field.kind === "text") {
+    return <Input id={id} aria-label={label} value={typeof value === "string" ? value : ""} disabled={disabled} aria-invalid={invalid || undefined} onChange={(event) => onChange(event.target.value)} />;
+  }
+  return (
+    <div aria-label={label} role="group">
+      <FieldWidget id={id} name={id} resourceName={resourceName} fieldKey={fieldKey} field={field} value={value} onChange={onChange} invalid={invalid} disabled={disabled} relation={relation} />
+    </div>
+  );
+}

package/template/web/components/dashboard/dashboard-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { ActivityIcon, LayoutDashboardIcon, ShieldCheckIcon, UserCircleIcon, UsersIcon } from "lucide-react";
+import { ActivityIcon, LayoutDashboardIcon, ShieldCheckIcon, Trash2Icon, UserCircleIcon, UsersIcon } from "lucide-react";
 import { ChevronsUpDownIcon } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import {
@@ -64,6 +64,7 @@ export function DashboardSidebar({
   links = [],
   isAdmin = false,
   access = { users: false, roles: false },
+  trash = false,
   user,
 }: {
   appName: string;
@@ -74,6 +75,8 @@ export function DashboardSidebar({
   isAdmin?: boolean;
   /** Which of the screens for managing people this person may open. */
   access?: { users: boolean; roles: boolean };
+  /** Whether this person may delete anything, and so has a trash to look in. */
+  trash?: boolean;
   user: DashboardUser;
 }) {
   const pathname = usePathname();
@@ -83,6 +86,7 @@ export function DashboardSidebar({
     ...ACCOUNT_LINKS,
     ...(access.users ? [{ href: "/dashboard/access/users", label: "Users", icon: UsersIcon }] : []),
     ...(access.roles ? [{ href: "/dashboard/access/roles", label: "Roles", icon: ShieldCheckIcon }] : []),
+    ...(trash ? [{ href: "/dashboard/trash", label: "Trash", icon: Trash2Icon }] : []),
     ...(isAdmin ? ADMIN_LINKS : []),
   ];
 

package/template/web/components/dashboard/record-actions.tsx

@@ -7,6 +7,7 @@ import { PencilIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
 import { deleteRecordAction } from "@/app/dashboard/actions";
+import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -18,7 +19,9 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { keptFor, type TrashInfo } from "@/lib/trash-info";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
+import { toastMovedToTrash } from "./trash-actions";
 
 interface Props {
   resource: ClientResource;
@@ -31,10 +34,12 @@ interface Props {
   canDelete: boolean;
   /** Whether editing opens a sheet (site.dashboard.forms) or goes to the form page. */
   overlayForms: boolean;
+  /** This resource's trash, when a deleted record goes there instead of going for good. */
+  trash?: TrashInfo;
 }
 
 /** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
-export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms }: Props) {
+export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms, trash }: Props) {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -47,7 +52,9 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
         toast.error(result.error);
         return;
       }
-      toast.success(`${resource.label} deleted.`);
+      // Undone, the record has a page again, and that is where to go back to.
+      if (trash) toastMovedToTrash(`${resource.label} moved to the trash.`, () => restoreRecordAction(resource.slug, id), () => router.push(`${listHref}/${id}`));
+      else toast.success(`${resource.label} deleted.`);
       // The record this page is about is gone, so the list is the only place left to be.
       router.push(listHref);
       router.refresh();
@@ -96,14 +103,16 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
       <AlertDialog open={confirming} onOpenChange={setConfirming}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete this {resource.label.toLowerCase()}?</AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone. Anything that belongs to it may be deleted too.</AlertDialogDescription>
+            <AlertDialogTitle>{trash ? `Move this ${resource.label.toLowerCase()} to the trash?` : `Delete this ${resource.label.toLowerCase()}?`}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {trash ? `It can be restored from the trash ${keptFor(trash)}.` : "This can't be undone. Anything that belongs to it may be deleted too."}
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={pending}>Keep it</AlertDialogCancel>
             <Button variant="destructive" onClick={remove} disabled={pending}>
               {pending && <Spinner data-icon="inline-start" />}
-              Delete
+              {trash ? "Move to trash" : "Delete"}
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>

package/template/web/components/dashboard/record-detail.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { adminPermissions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
 import { site } from "@/lib/site";
+import { trashFor } from "@/lib/trash";
 import { LocalTime } from "./local-time";
 import { PageHeader } from "./page-header";
 import { RecordActions } from "./record-actions";
@@ -31,6 +32,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
   if (!result.ok) notFound();
   const record = result.data;
   const permissions = await adminPermissions(resource.name);
+  const trash = permissions.delete ? await trashFor(resource.slug) : undefined;
 
   const all = allResources();
   const byName = new Map(all.map((item) => [item.name, item]));
@@ -90,6 +92,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             canUpdate={permissions.update}
             canDelete={permissions.delete}
             overlayForms={site.dashboard.forms === "sheet"}
+            trash={trash}
           />
         }
       />

package/template/web/components/dashboard/resource-insights.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useEffect, useId, useMemo, useState } from "react";
+import { optionLabel, type ClientResource } from "@flaredev/core";
+import { BarChart3Icon, ChevronDownIcon } from "lucide-react";
+import { resourceInsightsAction, type InsightsData, type InsightsUnit } from "@/app/dashboard/actions";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+
+const UNITS: { key: InsightsUnit; label: string; per: string; span: string }[] = [
+  { key: "day", label: "Daily", per: "day", span: "the last 30 days" },
+  { key: "week", label: "Weekly", per: "week", span: "the last 26 weeks" },
+  { key: "month", label: "Monthly", per: "month", span: "the last 12 months" },
+];
+
+/** A period as someone would say it: "9 Oct", "the week of 5 Oct", "Oct 2026". */
+function periodLabel(unit: InsightsUnit, bucket: string, long = false): string {
+  // UTC throughout: a bucket is a calendar day or month, not a moment, and must not slide a day in another timezone.
+  const date = new Date(`${unit === "month" ? `${bucket}-01` : bucket}T00:00:00Z`);
+  if (unit === "month") return new Intl.DateTimeFormat("en-GB", { month: "short", year: "numeric", timeZone: "UTC" }).format(date);
+  const day = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", ...(long ? { year: "numeric" } : {}), timeZone: "UTC" }).format(date);
+  return unit === "week" && long ? `the week of ${day}` : day;
+}
+
+/**
+ * Charts above a list, closed until somebody wants them.
+ *
+ * Closed is the default on purpose. The panel's numbers are a grouped query each over
+ * everything the list matches, which is work an ordinary visit to a list doesn't need.
+ * So nothing is asked for until it is opened, and whether it was left open is remembered
+ * for the next visit.
+ *
+ * What it charts is the rows the table is showing: the same search and filters go on the
+ * request, so narrowing the list to one category redraws the charts for that category.
+ *
+ * Drawn with plain elements and no chart library: bars are all these are, and a library
+ * for bars would be several hundred kilobytes to draw rectangles.
+ */
+export function ResourceInsights({ resource, total }: { resource: ClientResource; /** The list's own count: when it changes, so have the charts. */ total: number }) {
+  const panel = useId();
+  const remembered = `nevela.insights.${resource.name}`;
+  const [open, setOpen] = useState(false);
+  const [unit, setUnit] = useState<InsightsUnit>("day");
+  const [data, setData] = useState<InsightsData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Only what narrows the list. A page number or a sort order changes no count.
+  const params = useSearchParams();
+  const narrowed = useMemo(() => {
+    const kept = new URLSearchParams();
+    for (const [key, value] of params) if (key === "q" || key.startsWith("filter[")) kept.append(key, value);
+    kept.sort();
+    return kept.toString();
+  }, [params]);
+
+  // Read after the first paint: the server can't know what this browser remembers.
+  useEffect(() => {
+    try {
+      if (window.localStorage.getItem(remembered) === "open") setOpen(true);
+    } catch {
+      // No storage (a private window, or it is switched off): it just starts closed.
+    }
+  }, [remembered]);
+
+  function toggle() {
+    const next = !open;
+    setOpen(next);
+    try {
+      window.localStorage.setItem(remembered, next ? "open" : "closed");
+    } catch {
+      // Not remembered, and that is all.
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    let current = true;
+    setLoading(true);
+    void resourceInsightsAction(resource.name, narrowed, unit).then((result) => {
+      if (!current) return;
+      setLoading(false);
+      if (result.ok) {
+        setData(result.data);
+        setError(null);
+      } else {
+        setError(result.error);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [open, unit, narrowed, total, resource.name]);
+
+  const chosen = UNITS.find((entry) => entry.key === unit)!;
+  const plural = resource.pluralLabel.toLowerCase();
+
+  return (
+    <section className="rounded-xl border bg-card">
+      <button type="button" onClick={toggle} aria-expanded={open} aria-controls={panel} className="flex w-full items-center gap-2 rounded-xl px-4 py-3 text-left text-sm font-medium hover:bg-muted/50">
+        <BarChart3Icon className="size-4 text-muted-foreground" />
+        Insights
+        <span className="truncate font-normal text-muted-foreground">{narrowed ? `for the ${plural} this list is showing` : `when ${plural} were created, and how they split`}</span>
+        {loading && <Spinner className="ml-1" />}
+        <ChevronDownIcon className={cn("ml-auto size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <div id={panel} className="border-t p-4">
+          {error && !data && (
+            <p role="alert" className="text-sm text-destructive">
+              {error}
+            </p>
+          )}
+          {!data && !error && <p className="text-sm text-muted-foreground">Counting…</p>}
+          {data && (
+            <div className={cn("grid gap-x-10 gap-y-8", data.breakdown.length > 0 && "lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]", loading && "opacity-60")}>
+              <div className="flex min-w-0 flex-col gap-3">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <p className="text-sm">
+                    <span className="font-medium">Created per {chosen.per}</span> <span className="text-muted-foreground">· {chosen.span}</span>
+                  </p>
+                  <div role="group" aria-label="Period" className="flex rounded-md border p-0.5 text-xs">
+                    {UNITS.map((entry) => (
+                      <button
+                        key={entry.key}
+                        type="button"
+                        aria-pressed={entry.key === unit}
+                        onClick={() => setUnit(entry.key)}
+                        className={cn("rounded px-2 py-1", entry.key === unit ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground")}
+                      >
+                        {entry.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <Series unit={data.unit} series={data.series} noun={plural} />
+              </div>
+
+              {data.breakdown.length > 0 && (
+                <div className="flex min-w-0 flex-col gap-6">
+                  {data.breakdown.map((group) => (
+                    <Breakdown key={group.field} resource={resource} group={group} />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function Series({ unit, series, noun }: { unit: InsightsUnit; series: InsightsData["series"]; noun: string }) {
+  const most = Math.max(0, ...series.map((point) => point.count));
+  const sum = series.reduce((all, point) => all + point.count, 0);
+  const peak = series.find((point) => point.count === most);
+  const middle = series[Math.floor(series.length / 2)];
+  const summary =
+    sum === 0 || !peak
+      ? `No ${noun} were created in this time.`
+      : `${sum.toLocaleString()} created in this time. The most was ${most.toLocaleString()}, ${unit === "day" ? "on" : "in"} ${periodLabel(unit, peak.bucket, true)}.`;
+
+  return (
+    <figure className="flex flex-col gap-2">
+      <div role="img" aria-label={summary} className="flex h-40 items-end gap-0.5 border-b pb-px">
+        {series.map((point) => (
+          <div key={point.bucket} title={`${point.count.toLocaleString()} · ${periodLabel(unit, point.bucket, true)}`} className="group flex h-full min-w-0 flex-1 items-end">
+            <div
+              // A count of one in a tall chart still has to be seen: never thinner than a hairline.
+              style={{ height: most > 0 && point.count > 0 ? `max(${(point.count / most) * 100}%, 3px)` : "1px" }}
+              className={cn("w-full rounded-t-sm", point.count > 0 ? "bg-primary/75 group-hover:bg-primary" : "bg-border")}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between text-xs text-muted-foreground tabular-nums" aria-hidden="true">
+        <span>{series[0] && periodLabel(unit, series[0].bucket)}</span>
+        <span>{middle && periodLabel(unit, middle.bucket)}</span>
+        <span>{series.at(-1) && periodLabel(unit, series.at(-1)!.bucket)}</span>
+      </div>
+      <figcaption className="text-xs text-muted-foreground">{summary}</figcaption>
+    </figure>
+  );
+}
+
+function Breakdown({ resource, group }: { resource: ClientResource; group: InsightsData["breakdown"][number] }) {
+  const def = resource.fields[group.field];
+  const sum = group.slices.reduce((all, slice) => all + slice.count, 0);
+  const name = (value: string) => {
+    if (value === "") return "Not set";
+    if (group.kind === "boolean") return value === "true" ? "Yes" : "No";
+    return def && def.kind === "enum" ? optionLabel(def, value) : value;
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-sm font-medium">{def && "label" in def && def.label ? String(def.label) : group.field}</p>
+      <ul className="flex flex-col gap-1.5">
+        {group.slices.map((slice) => {
+          const share = sum > 0 ? (slice.count / sum) * 100 : 0;
+          return (
+            <li key={slice.value} className="grid grid-cols-[minmax(4rem,7rem)_1fr_auto] items-center gap-3 text-sm">
+              <span className="truncate text-muted-foreground">{name(slice.value)}</span>
+              <span className="h-2 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+                <span className="block h-full rounded-full bg-primary/75" style={{ width: `${share}%` }} />
+              </span>
+              <span className="tabular-nums">
+                {slice.count.toLocaleString()} <span className="text-muted-foreground">· {Math.round(share)}%</span>
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}