@flaredev/cli 0.2.0 → 0.4.0

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

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
 import { formatValue, optionLabel, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
 import { isSortable } from "@flaredev/core/server";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -15,11 +15,22 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { adminPath, adminPermissions, adminResources, adminStore, requireAccess } from "@/lib/admin";
+import { resourcePath, adminPermissions, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import { site } from "@/lib/site";
 import { cn } from "@/lib/utils";
+import { ColumnMenu } from "./column-menu";
+import { ExportButton } from "./export-button";
+import { isInlineEditable } from "./editable";
+import { InlineCell } from "./inline-cell";
+import type { RelationMeta } from "./fields/field-widget";
+import { ImportDialog } from "./import-dialog";
+import { LocalTime } from "./local-time";
 import { hrefWith, toSearchParams, type SearchParams } from "./query";
+import { NewRecordButton } from "./resource-form-dialog";
 import { ResourceTableToolbar } from "./resource-table-toolbar";
+import { SaveViewButton } from "./save-view-button";
 import { RowActions } from "./row-actions";
+import { RowCheckbox, SelectAllCheckbox, SelectionBar, TableSelection } from "./table-selection";
 
 type Column = { key: string; label: string; def: StoredField | { kind: "timestamp" } };
 
@@ -33,10 +44,10 @@ const NUMERIC = new Set(["int", "float"]);
  */
 export async function ResourceTable({ resource, searchParams }: { resource: Resource; searchParams: SearchParams }) {
   await requireAccess(resource, "read");
-  const basePath = adminPath(resource);
+  const basePath = resourcePath(resource);
   const permissions = await adminPermissions(resource.name);
   const params = toSearchParams(searchParams);
-  const store = adminStore(resource.name);
+  const store = dashboardStore(resource.name);
 
   let result = await store.list(params);
   let ignoredQuery = false;
@@ -48,22 +59,38 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
   const { data: rows, meta } = result.data;
 
   const fields = storedFields(resource);
-  const columns: Column[] = [
+  const allColumns: Column[] = [
     ...fields.filter(([, def]) => def.list !== false).map(([key, def]) => ({ key, label: def.label, def })),
-    { key: "createdAt", label: "Created", def: { kind: "timestamp" } },
+    { key: "createdAt", label: "Created", def: { kind: "timestamp" as const } },
   ];
+  // ?columns=name,email narrows the table; anything unknown in it is ignored.
+  const chosen = (params.get("columns") ?? "").split(",").filter(Boolean);
+  const columns = chosen.length > 0 ? allColumns.filter((column) => chosen.includes(column.key)) : allColumns;
 
   // Resolve belongsTo ids to their related record titles, one query per relation.
-  const byName = new Map(adminResources().map((r) => [r.name, r]));
+  const byName = new Map(allResources().map((r) => [r.name, r]));
   const titles: Record<string, Record<string, string>> = {};
   await Promise.all(
     columns.map(async ({ key, def }) => {
       if (def.kind !== "belongsTo") return;
       const ids = rows.map((row) => row[key]).filter((id): id is string => typeof id === "string");
-      titles[key] = byName.has(def.target) ? await adminStore(def.target).titles(ids) : {};
+      titles[key] = byName.has(def.target) ? await dashboardStore(def.target).titles(ids) : {};
     }),
   );
 
+  // The dialog form needs the same relation metadata the form page builds.
+  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 modalForms = site.dashboard.forms === "modal";
+  const rowIds = rows.map((row) => String(row.id));
+  const exportColumns = [{ key: "id", label: "Id" }, ...fields.filter(([, def]) => def.kind !== "file").map(([key, def]) => ({ key, label: def.label }))];
+
   const sort = params.get("sort") ?? `${resource.defaultSort.direction === "desc" ? "-" : ""}${resource.defaultSort.field}`;
   const sortField = sort.replace(/^-/, "");
   const sortDescending = sort.startsWith("-");
@@ -72,17 +99,27 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
   const last = Math.min(meta.page * meta.perPage, meta.total);
 
   return (
-    <div className="flex flex-col gap-4">
+    <TableSelection ids={rowIds}>
+      <div className="flex flex-col gap-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <ResourceTableToolbar resource={resource} />
-        {permissions.create && (
-          <Button asChild>
-            <Link href={adminPath(resource, "new")}>
-              <PlusIcon data-icon="inline-start" />
-              New {resource.label.toLowerCase()}
-            </Link>
-          </Button>
-        )}
+        <div className="flex flex-wrap items-center gap-2">
+          <SaveViewButton resourceName={resource.name} label={resource.pluralLabel} />
+          <ColumnMenu columns={allColumns.map(({ key, label }) => ({ key, label }))} visible={columns.map((column) => column.key)} />
+          <ExportButton resourceName={resource.name} pluralLabel={resource.pluralLabel} />
+          {permissions.create && <ImportDialog resource={resource} />}
+          {permissions.create &&
+            (modalForms ? (
+              <NewRecordButton resource={resource} relations={relations} listHref={basePath} />
+            ) : (
+              <Button asChild>
+                <Link href={resourcePath(resource, "new")}>
+                  <PlusIcon data-icon="inline-start" />
+                  New {resource.label.toLowerCase()}
+                </Link>
+              </Button>
+            ))}
+        </div>
       </div>
 
       {ignoredQuery && (
@@ -106,7 +143,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
               </Button>
             ) : (
               <Button asChild>
-                <Link href={adminPath(resource, "new")}>
+                <Link href={resourcePath(resource, "new")}>
                   <PlusIcon data-icon="inline-start" />
                   New {resource.label.toLowerCase()}
                 </Link>
@@ -119,6 +156,9 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
           <Table>
             <TableHeader className="bg-muted">
               <TableRow className="hover:bg-muted">
+                <TableHead className="w-10">
+                  <SelectAllCheckbox label={resource.pluralLabel.toLowerCase()} />
+                </TableHead>
                 {columns.map((column) => {
                   const sortable = column.key === "createdAt" || (column.def.kind !== "timestamp" && isSortable(column.def));
                   const active = sortField === column.key;
@@ -151,10 +191,17 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                 const id = String(row.id);
                 return (
                   <TableRow key={id}>
+                    <TableCell className="w-10">
+                      <RowCheckbox id={id} label={rowLabel(resource, row)} />
+                    </TableCell>
                     {columns.map((column, index) => {
                       const value = row[column.key];
                       let content: React.ReactNode = formatValue(column.def, value);
-                      if (column.def.kind === "enum" && value != null) {
+                      // Timestamps are formatted in the browser: the Worker's clock is UTC,
+                      // so a date rendered here would be in nobody's timezone.
+                      if ((column.def.kind === "timestamp" || column.def.kind === "datetime") && value != null) {
+                        content = <LocalTime value={value as string | number | Date} />;
+                      } else if (column.def.kind === "enum" && value != null) {
                         const tone = statusTone(value);
                         content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
                       } else if (column.def.kind === "multiselect" && Array.isArray(value) && value.length) {
@@ -190,7 +237,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                       } else if (column.def.kind === "belongsTo" && typeof value === "string") {
                         const target = byName.get(column.def.target);
                         content = target ? (
-                          <Link href={adminPath(target, value, "edit")} className="hover:underline">
+                          <Link href={resourcePath(target, value)} className="hover:underline">
                             {titles[column.key]?.[value] ?? value}
                           </Link>
                         ) : (
@@ -198,11 +245,26 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                         );
                       } else if (index === 0) {
                         content = (
-                          <Link href={adminPath(resource, id, "edit")} className="font-medium hover:underline">
+                          <Link href={resourcePath(resource, id)} className="font-medium hover:underline">
                             {content}
                           </Link>
                         );
                       }
+                      // The first column is the link to the record; the rest of the simple
+                      // ones can be changed where they are.
+                      if (index !== 0 && permissions.update && column.def.kind !== "timestamp" && isInlineEditable(column.def)) {
+                        content = (
+                          <InlineCell
+                            resourceName={resource.name}
+                            id={id}
+                            fieldKey={column.key}
+                            def={column.def as StoredField & { label: string }}
+                            value={value}
+                          >
+                            {content}
+                          </InlineCell>
+                        );
+                      }
                       return (
                         <TableCell
                           key={column.key}
@@ -219,10 +281,13 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                     })}
                     <TableCell className="text-right">
                       <RowActions
-                        resourceName={resource.name}
-                        label={resource.label}
+                        resource={resource}
                         id={id}
-                        editHref={adminPath(resource, id, "edit")}
+                        record={modalForms ? row : undefined}
+                        relations={relations}
+                        listHref={basePath}
+                        editHref={resourcePath(resource, id, "edit")}
+                        detailHref={resourcePath(resource, id)}
                         canUpdate={permissions.update}
                         canDelete={permissions.delete}
                       />
@@ -235,13 +300,22 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
         </div>
       )}
 
-      {meta.total > 0 && (
+      {(meta.total > 0 || rows.length > 0) && (
         <div className="flex flex-col items-center justify-between gap-3 text-sm text-muted-foreground sm:flex-row">
           <p className="tabular-nums">
-            {first}–{last} of {meta.total} {meta.total === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase()}
+            {meta.exactTotal ? (
+              <>
+                {first}–{last} of {meta.total.toLocaleString()} {meta.total === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase()}
+              </>
+            ) : (
+              <>
+                Showing {rows.length} of more than {meta.total.toLocaleString()} {resource.pluralLabel.toLowerCase()}
+              </>
+            )}
             {activeFilters > 0 && ` · ${activeFilters} filter${activeFilters === 1 ? "" : "s"} applied`}
           </p>
-          {meta.totalPages > 1 && (
+
+          {meta.exactTotal && meta.totalPages > 1 && (
             <Pagination className="mx-0 w-auto">
               <PaginationContent>
                 <PaginationItem>
@@ -268,12 +342,62 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
               </PaginationContent>
             </Pagination>
           )}
+
+          {/* Past the count limit, pages are walked with cursors: numbering them would mean
+              counting every row, and jumping to page 20,000 would mean reading the 500,000
+              rows before it. */}
+          {!meta.exactTotal && (
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" asChild={Boolean(meta.prevCursor)} disabled={!meta.prevCursor}>
+                {meta.prevCursor ? (
+                  <Link href={hrefWith(basePath, params, { cursor: meta.prevCursor, page: null })}>
+                    <ChevronLeftIcon data-icon="inline-start" />
+                    Previous
+                  </Link>
+                ) : (
+                  <span>
+                    <ChevronLeftIcon data-icon="inline-start" />
+                    Previous
+                  </span>
+                )}
+              </Button>
+              <Button variant="outline" size="sm" asChild={Boolean(meta.nextCursor)} disabled={!meta.nextCursor}>
+                {meta.nextCursor ? (
+                  <Link href={hrefWith(basePath, params, { cursor: meta.nextCursor, page: null })}>
+                    Next
+                    <ChevronRightIcon data-icon="inline-end" />
+                  </Link>
+                ) : (
+                  <span>
+                    Next
+                    <ChevronRightIcon data-icon="inline-end" />
+                  </span>
+                )}
+              </Button>
+            </div>
+          )}
         </div>
       )}
-    </div>
+
+      <SelectionBar
+        resourceName={resource.name}
+        label={resource.label}
+        pluralLabel={resource.pluralLabel}
+        canDelete={permissions.delete}
+        rows={rows}
+        columns={exportColumns}
+      />
+      </div>
+    </TableSelection>
   );
 }
 
+/** What a row is called, for the checkbox's label. */
+function rowLabel(resource: Resource, row: Record<string, unknown>): string {
+  const value = row[resource.titleField];
+  return typeof value === "string" && value ? value : String(row.id);
+}
+
 /** Up to five page numbers centred on the current page. */
 function pageWindow(page: number, totalPages: number): number[] {
   const start = Math.max(1, Math.min(page - 2, totalPages - 4));

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

@@ -3,9 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
-import { deleteRecordAction } from "@/app/admin/actions";
+import type { Resource } from "@flaredev/core";
+import { deleteRecordAction } from "@/app/dashboard/actions";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -25,25 +26,40 @@ import {
   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({
-  resourceName,
-  label,
+  resource,
   id,
+  record,
+  relations = {},
+  listHref,
   editHref,
+  detailHref,
   canUpdate = true,
   canDelete = true,
 }: {
-  resourceName: string;
-  label: string;
+  resource: Resource;
   id: string;
+  /** The record itself, when the form opens in a dialog. */
+  record?: Record<string, unknown>;
+  relations?: FormRelations;
+  listHref: string;
   editHref: string;
+  /** The record's own page. */
+  detailHref: 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 () => {
@@ -58,7 +74,7 @@ export function RowActions({
     });
   }
 
-  if (!canUpdate && !canDelete) return null;
+
 
   return (
     <>
@@ -69,14 +85,30 @@ export function RowActions({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
+          <DropdownMenuGroup>
+            <DropdownMenuItem asChild>
+              <Link href={detailHref}>
+                <ExternalLinkIcon />
+                Open
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
           {canUpdate && (
             <DropdownMenuGroup>
-              <DropdownMenuItem asChild>
-                <Link href={editHref}>
+              {record ? (
+                <DropdownMenuItem onSelect={() => setEditing(true)}>
                   <PencilIcon />
                   Edit
-                </Link>
-              </DropdownMenuItem>
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem asChild>
+                  <Link href={editHref}>
+                    <PencilIcon />
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+              )}
             </DropdownMenuGroup>
           )}
           {canUpdate && canDelete && <DropdownMenuSeparator />}
@@ -91,6 +123,19 @@ export function RowActions({
         </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>

package/templates/app/components/dashboard/save-view-button.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { BookmarkPlusIcon } from "lucide-react";
+import { toast } from "sonner";
+import { saveViewAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Keep this search, these filters, this sort and these columns as a named view.
+ *
+ * Only offered once the table is actually filtered — saving "all of them" as a view is
+ * saving the list you're already on.
+ */
+export function SaveViewButton({ resourceName, label }: { resourceName: string; label: string }) {
+  const params = useSearchParams();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [pending, startTransition] = useTransition();
+
+  const query = new URLSearchParams(params.toString());
+  query.delete("page");
+  query.delete("cursor");
+  if ([...query.keys()].length === 0) return null;
+
+  const save = () => {
+    startTransition(async () => {
+      const result = await saveViewAction(resourceName, name, query.toString());
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      setOpen(false);
+      setName("");
+      toast.success(`Saved "${name.trim()}" to the sidebar.`);
+      router.refresh();
+    });
+  };
+
+  return (
+    <>
+      <Button variant="outline" size="icon" aria-label="Save this view" onClick={() => setOpen(true)}>
+        <BookmarkPlusIcon />
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Save this view</DialogTitle>
+            <DialogDescription>It appears under {label.toLowerCase()} in the sidebar, for you.</DialogDescription>
+          </DialogHeader>
+          <Field>
+            <FieldLabel htmlFor="view-name">Name</FieldLabel>
+            <Input
+              id="view-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Overdue invoices"
+              maxLength={60}
+              autoFocus
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && name.trim()) save();
+              }}
+            />
+            <FieldDescription>Keeps the search, filters, sorting and columns you have now.</FieldDescription>
+          </Field>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)} disabled={pending}>
+              Cancel
+            </Button>
+            <Button onClick={save} disabled={pending || !name.trim()}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Save view
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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>
+  );
+}