@flaredev/cli 0.2.0 → 0.3.0

package/templates/app/components/{admin → dashboard}/row-actions.tsx

@@ -1,111 +1,144 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useTransition } from "react";
-import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
-import { toast } from "sonner";
-import { deleteRecordAction } from "@/app/admin/actions";
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/spinner";
-
-export function RowActions({
-  resourceName,
-  label,
-  id,
-  editHref,
-  canUpdate = true,
-  canDelete = true,
-}: {
-  resourceName: string;
-  label: string;
-  id: string;
-  editHref: string;
-  canUpdate?: boolean;
-  canDelete?: boolean;
-}) {
-  const router = useRouter();
-  const [confirming, setConfirming] = useState(false);
-  const [pending, startTransition] = useTransition();
-
-  function onDelete() {
-    startTransition(async () => {
-      const result = await deleteRecordAction(resourceName, id);
-      if (result.ok) {
-        toast.success(`${label} deleted.`);
-        setConfirming(false);
-        router.refresh();
-      } else {
-        toast.error(result.error);
-      }
-    });
-  }
-
-  if (!canUpdate && !canDelete) return null;
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" aria-label="Row actions">
-            <MoreHorizontalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {canUpdate && (
-            <DropdownMenuGroup>
-              <DropdownMenuItem asChild>
-                <Link href={editHref}>
-                  <PencilIcon />
-                  Edit
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-          {canUpdate && canDelete && <DropdownMenuSeparator />}
-          {canDelete && (
-            <DropdownMenuGroup>
-              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
-                <Trash2Icon />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <AlertDialog open={confirming} onOpenChange={setConfirming}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
-            <Button variant="destructive" onClick={onDelete} disabled={pending}>
-              {pending && <Spinner data-icon="inline-start" />}
-              Delete
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import type { Resource } from "@flaredev/core";
+import { deleteRecordAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+
+/**
+ * Edit and delete for one row. Edit opens a dialog when the row's record came with it
+ * (site.dashboard.forms is "modal"), and otherwise goes to the form page.
+ */
+export function RowActions({
+  resource,
+  id,
+  record,
+  relations = {},
+  listHref,
+  editHref,
+  canUpdate = true,
+  canDelete = true,
+}: {
+  resource: Resource;
+  id: string;
+  /** The record itself, when the form opens in a dialog. */
+  record?: Record<string, unknown>;
+  relations?: FormRelations;
+  listHref: string;
+  editHref: string;
+  canUpdate?: boolean;
+  canDelete?: boolean;
+}) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const { name: resourceName, label } = resource;
+
+  function onDelete() {
+    startTransition(async () => {
+      const result = await deleteRecordAction(resourceName, id);
+      if (result.ok) {
+        toast.success(`${label} deleted.`);
+        setConfirming(false);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  if (!canUpdate && !canDelete) return null;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" aria-label="Row actions">
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {canUpdate && (
+            <DropdownMenuGroup>
+              {record ? (
+                <DropdownMenuItem onSelect={() => setEditing(true)}>
+                  <PencilIcon />
+                  Edit
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem asChild>
+                  <Link href={editHref}>
+                    <PencilIcon />
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuGroup>
+          )}
+          {canUpdate && canDelete && <DropdownMenuSeparator />}
+          {canDelete && (
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
+                <Trash2Icon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {record && canUpdate && (
+        <ResourceFormDialog
+          resource={resource}
+          relations={relations}
+          listHref={listHref}
+          mode="edit"
+          id={id}
+          record={record}
+          open={editing}
+          onOpenChange={setEditing}
+        />
+      )}
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={onDelete} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/templates/app/components/dashboard/stat-card.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { ArrowRightIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export interface Stat {
+  label: string;
+  value: number | string;
+  /** Under the number: "12 this week", "3 need attention". */
+  hint?: string;
+  /** Change against the previous period, as a percentage. Up isn't always good — see `goodDirection`. */
+  change?: number;
+  goodDirection?: "up" | "down";
+  icon?: React.ComponentType<{ className?: string }>;
+  href?: string;
+}
+
+const format = (value: number | string) => (typeof value === "number" ? value.toLocaleString() : value);
+
+/** One number, what it means, and where to go for the detail behind it. */
+export function StatCard({ label, value, hint, change, goodDirection = "up", icon: Icon, href }: Stat) {
+  const rising = (change ?? 0) >= 0;
+  const good = rising === (goodDirection === "up");
+  const Trend = rising ? TrendingUpIcon : TrendingDownIcon;
+
+  const card = (
+    <Card className={cn("h-full gap-3", href && "transition-colors hover:border-primary/40")}>
+      <CardHeader className="pb-0">
+        <CardDescription className="flex items-center gap-2">
+          {Icon && <Icon className="size-4" />}
+          {label}
+        </CardDescription>
+        <CardTitle className="text-3xl font-semibold tabular-nums">{format(value)}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {change !== undefined && (
+            <span className={cn("inline-flex items-center gap-1 font-medium", good ? "text-success" : "text-danger")}>
+              <Trend className="size-3.5" />
+              {Math.abs(change).toFixed(change % 1 === 0 ? 0 : 1)}%
+            </span>
+          )}
+          {hint && <span>{hint}</span>}
+        </div>
+        {href && <ArrowRightIcon className="size-4 text-muted-foreground" aria-hidden="true" />}
+      </CardContent>
+    </Card>
+  );
+
+  return href ? (
+    <Link href={href} className="rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      {card}
+    </Link>
+  ) : (
+    card
+  );
+}
+
+/** A row of stats that wraps: four across on a desktop, two on a tablet, one on a phone. */
+export function StatCards({ stats }: { stats: Stat[] }) {
+  if (stats.length === 0) return null;
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+      {stats.map((stat) => (
+        <StatCard key={stat.label} {...stat} />
+      ))}
+    </div>
+  );
+}

package/templates/app/components/dashboard/table-selection.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { createContext, useCallback, useContext, useMemo, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { DownloadIcon, Trash2Icon, XIcon } from "lucide-react";
+import { toast } from "sonner";
+import { deleteManyAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import { toCsv } from "@/lib/csv";
+
+interface SelectionValue {
+  ids: string[];
+  selected: Set<string>;
+  toggle: (id: string) => void;
+  toggleAll: () => void;
+  clear: () => void;
+}
+
+const SelectionContext = createContext<SelectionValue | null>(null);
+
+function useSelection(): SelectionValue {
+  const value = useContext(SelectionContext);
+  if (!value) throw new Error("Selection components must be inside <TableSelection>.");
+  return value;
+}
+
+/**
+ * Selection for the rows on screen.
+ *
+ * Deliberately per page: a "select everything, all 40,000 of them" checkbox reads as
+ * harmless right up until the moment it isn't. To act on more than a page, filter down
+ * to what you mean first.
+ */
+export function TableSelection({ ids, children }: { ids: string[]; children: React.ReactNode }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const toggle = useCallback((id: string) => {
+    setSelected((current) => {
+      const next = new Set(current);
+      if (!next.delete(id)) next.add(id);
+      return next;
+    });
+  }, []);
+
+  const toggleAll = useCallback(() => {
+    setSelected((current) => (current.size === ids.length ? new Set() : new Set(ids)));
+  }, [ids]);
+
+  const clear = useCallback(() => setSelected(new Set()), []);
+  const value = useMemo(() => ({ ids, selected, toggle, toggleAll, clear }), [ids, selected, toggle, toggleAll, clear]);
+
+  return <SelectionContext.Provider value={value}>{children}</SelectionContext.Provider>;
+}
+
+export function SelectAllCheckbox({ label }: { label: string }) {
+  const { ids, selected, toggleAll } = useSelection();
+  const all = ids.length > 0 && selected.size === ids.length;
+  return (
+    <Checkbox
+      checked={all ? true : selected.size > 0 ? "indeterminate" : false}
+      onCheckedChange={toggleAll}
+      aria-label={all ? `Clear selection` : `Select all ${label} on this page`}
+    />
+  );
+}
+
+export function RowCheckbox({ id, label }: { id: string; label: string }) {
+  const { selected, toggle } = useSelection();
+  return <Checkbox checked={selected.has(id)} onCheckedChange={() => toggle(id)} aria-label={`Select ${label}`} />;
+}
+
+/** Highlights the row while it's selected, so the checkbox isn't the only signal. */
+export function useRowSelected(id: string): boolean {
+  return useSelection().selected.has(id);
+}
+
+interface BarProps {
+  resourceName: string;
+  label: string;
+  pluralLabel: string;
+  canDelete: boolean;
+  /** Rows as they're shown, for exporting what's selected without another round trip. */
+  rows: Record<string, unknown>[];
+  columns: { key: string; label: string }[];
+}
+
+/**
+ * What you can do with the rows you've ticked. Appears only when something is selected,
+ * pinned to the bottom so it's reachable in a long table.
+ */
+export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns }: BarProps) {
+  const { selected, clear } = useSelection();
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const count = selected.size;
+  if (count === 0) return null;
+
+  const noun = count === 1 ? label.toLowerCase() : pluralLabel.toLowerCase();
+
+  const exportSelected = () => {
+    const chosen = rows.filter((row) => selected.has(String(row.id)));
+    downloadCsv(`${resourceName.toLowerCase()}-selection.csv`, toCsv(chosen, columns));
+  };
+
+  const remove = () => {
+    startTransition(async () => {
+      const result = await deleteManyAction(resourceName, [...selected]);
+      setConfirming(false);
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { deleted, failed } = result.data;
+      clear();
+      router.refresh();
+      if (failed > 0) toast.warning(`Deleted ${deleted}; ${failed} couldn't be deleted.`);
+      else toast.success(`Deleted ${deleted} ${deleted === 1 ? label.toLowerCase() : pluralLabel.toLowerCase()}.`);
+    });
+  };
+
+  return (
+    <>
+      <div className="sticky bottom-4 z-10 mx-auto flex w-fit items-center gap-2 rounded-full border bg-popover px-2 py-1.5 shadow-lg">
+        <span className="px-2 text-sm tabular-nums">
+          {count} {noun} selected
+        </span>
+        <Button variant="ghost" size="sm" onClick={exportSelected}>
+          <DownloadIcon data-icon="inline-start" />
+          Export
+        </Button>
+        {canDelete && (
+          <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={() => setConfirming(true)}>
+            <Trash2Icon data-icon="inline-start" />
+            Delete
+          </Button>
+        )}
+        <Button variant="ghost" size="icon" onClick={clear} aria-label="Clear selection">
+          <XIcon />
+        </Button>
+      </div>
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete {count} {noun}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone. Anything that belongs to them may be deleted too.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Keep them</AlertDialogCancel>
+            <AlertDialogAction onClick={(event) => { event.preventDefault(); remove(); }} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete {count}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+/** Hand the browser a file without a round trip to the server. */
+export function downloadCsv(filename: string, csv: string) {
+  // The BOM is what makes Excel read UTF-8 correctly.
+  const url = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv;charset=utf-8" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}

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

@@ -0,0 +1,32 @@
+import type { RequestPoint } from "@/lib/analytics";
+
+/**
+ * Requests a day, with the failing share in red.
+ *
+ * Bars in CSS rather than a charting library: seven numbers don't justify shipping one
+ * to the browser, and this renders on the server with the rest of the page.
+ */
+export function TrafficChart({ points }: { points: RequestPoint[] }) {
+  const peak = Math.max(1, ...points.map((point) => point.requests));
+  const day = new Intl.DateTimeFormat(undefined, { weekday: "short" });
+
+  return (
+    <div className="flex items-end gap-2" role="img" aria-label={`Requests a day for the last ${points.length} days`}>
+      {points.map((point) => {
+        const height = Math.max(2, Math.round((point.requests / peak) * 100));
+        const errorShare = point.requests > 0 ? (point.errors / point.requests) * 100 : 0;
+        return (
+          <div key={point.date} className="flex flex-1 flex-col items-center gap-2">
+            <span className="text-xs tabular-nums text-muted-foreground">{point.requests.toLocaleString()}</span>
+            <div className="flex h-32 w-full items-end" title={`${point.date}: ${point.requests.toLocaleString()} requests, ${point.errors.toLocaleString()} errors`}>
+              <div className="relative w-full overflow-hidden rounded-t-md bg-primary/80" style={{ height: `${height}%` }}>
+                {errorShare > 0 && <div className="absolute inset-x-0 bottom-0 bg-destructive" style={{ height: `${Math.max(4, errorShare)}%` }} />}
+              </div>
+            </div>
+            <span className="text-xs text-muted-foreground">{day.format(new Date(`${point.date}T00:00:00Z`))}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/app/db/flare-schema.ts

@@ -1,5 +1,5 @@
 import { sql } from "drizzle-orm";
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
 
 /**
  * Roles a user can hold (`user.role` from Better Auth's admin plugin).
@@ -13,3 +13,35 @@ export const role = sqliteTable("role", {
     .notNull()
     .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
 });
+
+/**
+ * Who changed what, and when. Written by the dashboard's actions (lib/audit.ts) for
+ * every create, update, delete and import, and read by /dashboard/observability.
+ *
+ * `changes` holds only the fields that moved, as JSON, never the whole record: an audit
+ * trail that copies every row is a second database of the same data, and a place for
+ * secrets to leak into.
+ */
+export const auditLog = sqliteTable(
+  "audit_log",
+  {
+    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    /** "create", "update", "delete", "import" or "bulk-delete". */
+    action: text("action").notNull(),
+    /** The resource's descriptor name, e.g. "Contact". */
+    resource: text("resource").notNull(),
+    /** The record, when the action was about one. */
+    recordId: text("record_id"),
+    /** How the record reads afterwards, for the log's own listing. */
+    recordLabel: text("record_label"),
+    userId: text("user_id"),
+    userEmail: text("user_email"),
+    /** Fields that changed: { field: { from, to } }, or a count for bulk actions. */
+    changes: text("changes", { mode: "json" }).$type<Record<string, unknown> | null>(),
+    ip: text("ip"),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .notNull()
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
+  },
+  (table) => [index("audit_log_created_at_idx").on(table.createdAt), index("audit_log_resource_idx").on(table.resource)],
+);