@flaredev/cli 0.3.0 → 0.4.1

package/templates/app/components/dashboard/record-detail.tsx

@@ -0,0 +1,203 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { clientResource, formatValue, optionLabel, relationGraph, statusTone, storedFields, type Resource } from "@flaredev/core";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { recentAudit } from "@/lib/audit";
+import { adminPermissions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
+import { site } from "@/lib/site";
+import { LocalTime } from "./local-time";
+import { PageHeader } from "./page-header";
+import { RecordActions } from "./record-actions";
+import type { RelationMeta } from "./fields/field-widget";
+
+/** How many of a record's children to show before pointing at the filtered list. */
+const RELATED_LIMIT = 5;
+
+/**
+ * One record: its fields, what belongs to it, and what's been done to it.
+ *
+ * A row in a table is a summary; this is the page you send someone when you want them
+ * to look at the thing itself.
+ */
+export async function RecordDetail({ resource, id }: { resource: Resource; id: string }) {
+  await requireAccess(resource, "read");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
+  const store = dashboardStore(resource.name);
+  const result = await store.get(id);
+  if (!result.ok) notFound();
+  const record = result.data;
+  const permissions = await adminPermissions(resource.name);
+
+  const all = allResources();
+  const byName = new Map(all.map((item) => [item.name, item]));
+  const fields = storedFields(resource);
+
+  // Relation titles, so a belongsTo reads as a name rather than an id.
+  const relationTitles: Record<string, string> = {};
+  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
+  for (const [key, def] of fields) {
+    if (def.kind !== "belongsTo") continue;
+    const target = byName.get(def.target);
+    if (!target) continue;
+    relations[key] = { name: target.name, label: target.label, pluralLabel: target.pluralLabel, slug: target.slug, titleField: target.titleField };
+    const value = record[key];
+    if (typeof value === "string") {
+      const titles = await dashboardStore(target.name).titles([value]);
+      const title = titles[value];
+      if (title) relationTitles[key] = title;
+    }
+  }
+
+  // Children: resources with a belongsTo pointing back here.
+  const graph = relationGraph(all);
+  const children = (graph.byResource[resource.name]?.hasMany ?? []).flatMap((relation) => {
+    const target = byName.get(relation.target);
+    return target ? [{ relation, target }] : [];
+  });
+  const related = await Promise.all(
+    children.map(async ({ relation, target }) => {
+      const params = new URLSearchParams({ perPage: String(RELATED_LIMIT), [`filter[${relation.foreignKey}]`]: id });
+      const list = await dashboardStore(target.name).list(params);
+      return { relation, target, rows: list.ok ? list.data.data : [], total: list.ok ? list.data.meta.total : 0, filterKey: relation.foreignKey };
+    }),
+  );
+
+  const history = await recentAudit(10, resource.name);
+  const forThisRecord = history.filter((entry) => entry.recordId === id);
+
+  const titleDef = resource.fields[resource.titleField];
+  const title = titleDef && titleDef.kind !== "hasMany" ? String(formatValue(titleDef, record[resource.titleField]) || id) : id;
+
+  return (
+    <>
+      <PageHeader
+        title={title}
+        description={<>Created <LocalTime value={record.createdAt as string | number | Date} /></>}
+        crumbs={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: resource.pluralLabel, href: resourcePath(resource) },
+          { label: title },
+        ]}
+        actions={
+          <RecordActions
+            resource={forClient}
+            id={id}
+            record={record}
+            relations={relations}
+            listHref={resourcePath(resource)}
+            editHref={resourcePath(resource, id, "edit")}
+            canUpdate={permissions.update}
+            canDelete={permissions.delete}
+            modalForms={site.dashboard.forms === "modal"}
+          />
+        }
+      />
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Details</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-x-8 gap-y-4 sm:grid-cols-2">
+            {fields.map(([key, def]) => {
+              const value = record[key];
+              let content: React.ReactNode = formatValue(def, value);
+              if ((def.kind === "datetime") && value != null) {
+                content = <LocalTime value={value as string | number | Date} />;
+              } else if (def.kind === "enum" && value != null) {
+                const tone = statusTone(value);
+                content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+              } else if (def.kind === "multiselect" && Array.isArray(value) && value.length > 0) {
+                content = (
+                  <span className="flex flex-wrap gap-1">
+                    {value.map((item) => (
+                      <Badge key={String(item)} variant="secondary">
+                        {optionLabel(def, String(item))}
+                      </Badge>
+                    ))}
+                  </span>
+                );
+              } else if (def.kind === "belongsTo" && typeof value === "string") {
+                const target = byName.get(def.target);
+                content = target ? (
+                  <Link href={resourcePath(target, value)} className="text-primary hover:underline">
+                    {relationTitles[key] ?? value}
+                  </Link>
+                ) : (
+                  value
+                );
+              }
+              return (
+                <div key={key} className={def.kind === "text" ? "flex flex-col gap-1 sm:col-span-2" : "flex flex-col gap-1"}>
+                  <dt className="text-xs text-muted-foreground">{def.label}</dt>
+                  <dd className="text-sm break-words">{content}</dd>
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+
+        <div className="flex flex-col gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">History</CardTitle>
+              <CardDescription>What's been done to this {resource.label.toLowerCase()}.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col">
+              {forThisRecord.length === 0 ? (
+                <p className="text-sm text-muted-foreground">Nothing since the audit log started.</p>
+              ) : (
+                forThisRecord.map((entry) => (
+                  <div key={entry.id} className="flex flex-col gap-0.5 border-b py-2.5 text-sm last:border-b-0 last:pb-0">
+                    <span>
+                      <Badge variant={entry.action === "delete" ? "destructive" : "secondary"}>{entry.action}</Badge>
+                      <span className="ml-2 text-muted-foreground">{entry.userEmail ?? "someone"}</span>
+                    </span>
+                    <LocalTime value={entry.createdAt} className="text-xs text-muted-foreground tabular-nums" />
+                  </div>
+                ))
+              )}
+            </CardContent>
+          </Card>
+
+          {related.map(({ relation, target, rows, total, filterKey }) => (
+            <Card key={relation.key}>
+              <CardHeader>
+                <CardTitle className="text-base">{target.pluralLabel}</CardTitle>
+                <CardDescription>
+                  {total === 0 ? `No ${target.pluralLabel.toLowerCase()} yet.` : `${total.toLocaleString()} in total.`}
+                </CardDescription>
+              </CardHeader>
+              {rows.length > 0 && (
+                <CardContent className="flex flex-col">
+                  {rows.map((row) => {
+                    const childTitle = target.fields[target.titleField];
+                    const label = childTitle && childTitle.kind !== "hasMany" ? formatValue(childTitle, row[target.titleField]) : String(row.id);
+                    return (
+                      <Link
+                        key={String(row.id)}
+                        href={resourcePath(target, String(row.id))}
+                        className="truncate border-b py-2 text-sm last:border-b-0 last:pb-0 hover:text-primary"
+                      >
+                        {label || String(row.id)}
+                      </Link>
+                    );
+                  })}
+                  {total > rows.length && (
+                    <Button variant="link" className="h-auto justify-start p-0 pt-2" asChild>
+                      <Link href={`${resourcePath(target)}?filter[${filterKey}]=${id}`}>See all {total.toLocaleString()}</Link>
+                    </Button>
+                  )}
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { PlusIcon } from "lucide-react";
-import type { Resource } from "@flaredev/core";
+import type { ClientResource } 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";
@@ -11,7 +11,7 @@ import { ResourceForm } from "./resource-form";
 export type FormRelations = Record<string, RelationMeta & { initialTitle?: string }>;
 
 interface Props {
-  resource: Resource;
+  resource: ClientResource;
   relations: FormRelations;
   listHref: string;
   mode: "create" | "edit";
@@ -62,7 +62,7 @@ export function ResourceFormDialog({ resource, relations, listHref, mode, id, re
 }
 
 /** The list page's "New …" button, when forms open in a dialog. */
-export function NewRecordButton({ resource, relations, listHref }: { resource: Resource; relations: FormRelations; listHref: string }) {
+export function NewRecordButton({ resource, relations, listHref }: { resource: ClientResource; relations: FormRelations; listHref: string }) {
   return (
     <ResourceFormDialog
       resource={resource}

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

@@ -1,61 +1,64 @@
-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>
-  );
-}
+import { notFound } from "next/navigation";
+import { clientResource, 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");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
+  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={forClient}
+        mode={record ? "edit" : "create"}
+        id={id}
+        record={record}
+        relations={relations}
+        listHref={resourcePath(resource)}
+      />
+    </div>
+  );
+}