@flaredev/cli 0.12.2 → 0.14.0

package/templates/app/components/dashboard/import-dialog.tsx

@@ -31,6 +31,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Spinner } from "@/components/ui/spinner";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { toCsv } from "@/lib/csv";
+import { matchOption, squash, toValue } from "./cell-value";
 import { Dropzone } from "./dropzone";
 import { downloadCsv } from "./table-selection";
 
@@ -142,66 +143,8 @@ function parseCsv(text: string): string[][] {
 
 const csvCell = (value: string) => (/[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value);
 
-const squash = (text: string) => text.toLowerCase().replace(/[\s_-]+/g, "");
-
-/** A field must be mapped when nothing else can supply it: required, with no default. */
 const needsColumn = (def: StoredField) => def.required && !("default" in def && def.default !== undefined);
 
-/** An option from a cell holding either the stored value or the label shown in the admin. */
-function matchOption(def: EnumField | MultiSelectField, text: string): string {
-  const match = def.options.find(
-    (option) => option === text || squash(option) === squash(text) || squash(optionLabel(def, option)) === squash(text),
-  );
-  return match ?? text;
-}
-
-/**
- * A cell as the value its field expects. Text that doesn't convert is passed through
- * unchanged so validation reports it against the field, rather than the import guessing.
- */
-function toValue(def: StoredField, raw: string): unknown {
-  const text = raw.trim();
-  if (text === "") return undefined;
-  switch (def.kind) {
-    case "int":
-    case "float": {
-      const number = Number(text);
-      return Number.isFinite(number) ? number : text;
-    }
-    case "boolean": {
-      const lower = text.toLowerCase();
-      if (["true", "yes", "1"].includes(lower)) return true;
-      if (["false", "no", "0"].includes(lower)) return false;
-      return text;
-    }
-    case "enum":
-      return matchOption(def, text);
-    case "multiselect":
-      return text
-        .split(/[;,]/)
-        .map((part) => part.trim())
-        .filter(Boolean)
-        .map((part) => matchOption(def, part));
-    case "tags":
-      // Semicolons first so a tag may contain a comma: "a, b; c" is two tags.
-      return text
-        .split(text.includes(";") ? ";" : ",")
-        .map((part) => part.trim())
-        .filter(Boolean);
-    case "json":
-      try {
-        return JSON.parse(text);
-      } catch {
-        // Handed over as typed: the validator reports it against the row and the column,
-        // which is more use than this throwing halfway through a file.
-        return text;
-      }
-    default:
-      // Dates keep their text: the descriptor's schema decides which formats it takes.
-      return text;
-  }
-}
-
 /** A column per field, matched on header text; anything unrecognised starts as Skip. */
 function guessMapping(fields: MappedField[], headers: string[]): Record<string, string> {
   const taken = new Set<number>();

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

@@ -25,6 +25,7 @@ import { TrashToggle } from "./trash-toggle";
 import { isInlineEditable } from "./editable";
 import { InlineCell } from "./inline-cell";
 import type { RelationMeta } from "./fields/field-widget";
+import { BulkAddSheet } from "./bulk-add-sheet";
 import { ImportDialog } from "./import-dialog";
 import { LocalTime } from "./local-time";
 import { hrefWith, toSearchParams, type SearchParams } from "./query";
@@ -125,6 +126,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
           <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={forClient} />}
+          {permissions.create && <BulkAddSheet resource={forClient} label={resource.label} />}
           {permissions.create &&
             (overlayForms ? (
               <NewRecordButton resource={forClient} relations={relations} listHref={basePath} omit={omit} />

package/templates/app/components/dashboard/role-matrix.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { LockIcon, PlusIcon, ShieldIcon, Trash2Icon, UnlockIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+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 { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { createRoleAction, deleteRoleAction, setGrantAction } from "@/app/dashboard/roles/actions";
+
+export interface MatrixResource {
+  name: string;
+  pluralLabel: string;
+  /** Whether a policy file restricts it. Without one, every signed-in user may use it. */
+  restricted: boolean;
+  /** Roles the policy *file* gives, per action — these are ticked and locked. */
+  fromCode: Record<string, string[]>;
+  /** Roles the dashboard has granted, per action — these are the editable ticks. */
+  granted: Record<string, string[]>;
+}
+
+export interface MatrixRole {
+  name: string;
+  label: string;
+}
+
+const ACTIONS = ["read", "create", "update", "delete"] as const;
+
+/**
+ * Who may do what, as a grid.
+ *
+ * Two kinds of tick, and the difference is the point. A **locked** tick comes from
+ * `policies/<resource>.policy.ts` and cannot be changed here — the file is the floor,
+ * and a screen that appeared to remove access the code grants would be lying. An
+ * **open** tick is a grant in the database, and is yours to set.
+ *
+ * A resource with no policy file is open to every signed-in user. Ticking boxes on it
+ * would change nothing, so the row says so and points at the command that restricts it,
+ * rather than offering controls that quietly do nothing.
+ */
+export function RoleMatrix({ roles, resources, adminRoles }: { roles: MatrixRole[]; resources: MatrixResource[]; adminRoles: string[] }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const [selected, setSelected] = useState(roles[0]?.name ?? "");
+  const [open, setOpen] = useState(false);
+
+  const role = roles.find((candidate) => candidate.name === selected);
+
+  const run = (work: () => Promise<{ ok: boolean; error?: string }>, done?: string) =>
+    startTransition(async () => {
+      const result = await work();
+      if (!result.ok) {
+        toast.error(result.error ?? "That didn't work.");
+        return;
+      }
+      if (done) toast.success(done);
+      router.refresh();
+    });
+
+  const addRole = (form: FormData) => {
+    const name = String(form.get("name") ?? "");
+    run(async () => {
+      const result = await createRoleAction({ name, label: String(form.get("label") ?? "") });
+      if (result.ok) {
+        setSelected(name.trim().toLowerCase());
+        setOpen(false);
+      }
+      return result;
+    }, "Role created.");
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Roles</CardTitle>
+          <CardDescription>
+            A role is a name your policies give meaning. Assign one to somebody from{" "}
+            <a href="/dashboard/users" className="underline underline-offset-2">
+              Users
+            </a>
+            .
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-2">
+          {roles.map((candidate) => (
+            <Button
+              key={candidate.name}
+              variant={candidate.name === selected ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelected(candidate.name)}
+            >
+              <ShieldIcon data-icon="inline-start" />
+              {candidate.label}
+            </Button>
+          ))}
+
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                <PlusIcon data-icon="inline-start" />
+                New role
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle>New role</DialogTitle>
+                <DialogDescription>It exists as soon as you name it; what it may do is the grid below.</DialogDescription>
+              </DialogHeader>
+              <form action={addRole} className="flex flex-col gap-4">
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="role-name">Name</Label>
+                  <Input id="role-name" name="name" placeholder="support-agent" required autoComplete="off" />
+                  <p className="text-xs text-muted-foreground">Lowercase letters, digits, _ or -. This is what `user.role` holds.</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="role-label">Label</Label>
+                  <Input id="role-label" name="label" placeholder="Support agent" autoComplete="off" />
+                </div>
+                <DialogFooter>
+                  <Button type="submit" disabled={pending}>
+                    {pending && <Spinner data-icon="inline-start" />}
+                    Create role
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+
+          {role && !adminRoles.includes(role.name) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="ml-auto text-destructive"
+              disabled={pending}
+              onClick={() =>
+                run(async () => {
+                  const result = await deleteRoleAction(role.name);
+                  if (result.ok) setSelected(roles.find((other) => other.name !== role.name)?.name ?? "");
+                  return result;
+                }, `Deleted ${role.label}.`)
+              }
+            >
+              <Trash2Icon data-icon="inline-start" />
+              Delete {role.label}
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+
+      {role && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">What {role.label} may do</CardTitle>
+            <CardDescription>
+              A locked tick comes from the resource&apos;s policy file and can only be changed there. Everything else is yours.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Resource</TableHead>
+                    {ACTIONS.map((action) => (
+                      <TableHead key={action} className="w-24 text-center capitalize">
+                        {action}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {resources.map((resource) => (
+                    <TableRow key={resource.name}>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span className="font-medium">{resource.pluralLabel}</span>
+                          {!resource.restricted && (
+                            <span className="text-xs text-muted-foreground">
+                              Open to everyone signed in — <code>flare gen policy {resource.name} --roles admin</code> to restrict it.
+                            </span>
+                          )}
+                        </div>
+                      </TableCell>
+                      {ACTIONS.map((action) => {
+                        const inCode = (resource.fromCode[action] ?? []).some((named) => named === role.name || named === "*");
+                        const isGranted = (resource.granted[action] ?? []).includes(role.name);
+                        if (!resource.restricted) {
+                          return (
+                            <TableCell key={action} className="text-center">
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <span className="inline-flex text-muted-foreground">
+                                    <UnlockIcon className="size-4" aria-label="No policy: everyone signed in may do this" />
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>This resource has no policy, so every signed-in user may do this.</TooltipContent>
+                              </Tooltip>
+                            </TableCell>
+                          );
+                        }
+                        if (inCode) {
+                          return (
+                            <TableCell key={action} className="text-center">
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <span className="inline-flex text-success">
+                                    <LockIcon className="size-4" aria-label="Granted by the policy file" />
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  policies/{resource.name.toLowerCase()}.policy.ts grants this. Change it there.
+                                </TooltipContent>
+                              </Tooltip>
+                            </TableCell>
+                          );
+                        }
+                        return (
+                          <TableCell key={action} className="text-center">
+                            <Checkbox
+                              checked={isGranted}
+                              disabled={pending}
+                              aria-label={`${role.label} may ${action} ${resource.pluralLabel.toLowerCase()}`}
+                              onCheckedChange={(next) =>
+                                run(() =>
+                                  setGrantAction({ role: role.name, resource: resource.name, action, granted: next === true }),
+                                )
+                              }
+                            />
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+              <span className="inline-flex items-center gap-1.5">
+                <LockIcon className="size-3.5 text-success" /> from the policy file
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <UnlockIcon className="size-3.5" /> no policy — open to everyone signed in
+              </span>
+              <Badge variant="secondary">Grants widen a policy; they never narrow one.</Badge>
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/templates/app/components/dashboard/user-actions.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { BanIcon, MoreHorizontalIcon, ShieldIcon, UserPlusIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Combobox } from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { createUserAction, setBannedAction, setRoleAction, type UserActionResult } from "@/app/dashboard/users/actions";
+
+/**
+ * The management side of the users page: make an account, change a role, ban.
+ *
+ * Everything here calls the same Better Auth admin API the CLI uses, so an account made
+ * from this dialog and one made with `flare user:add` are indistinguishable.
+ *
+ * The well-known roles get one-click entries; anything else is typed, because a role is
+ * just a string your policies name — inventing one here is how you "add a role".
+ */
+const KNOWN_ROLES = ["admin", "staff", "user"];
+
+export function CreateUserButton() {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [role, setRole] = useState("user");
+  const [pending, startTransition] = useTransition();
+
+  const submit = (form: FormData) => {
+    startTransition(async () => {
+      const result = await createUserAction({
+        name: String(form.get("name") ?? ""),
+        email: String(form.get("email") ?? ""),
+        password: String(form.get("password") ?? ""),
+        role: String(form.get("role") ?? "user"),
+      });
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success("Account created. They can sign in now.");
+      setOpen(false);
+      router.refresh();
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlusIcon data-icon="inline-start" />
+          New user
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>New user</DialogTitle>
+          <DialogDescription>Usable immediately — send them the password and have them change it.</DialogDescription>
+        </DialogHeader>
+        <form action={submit} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-name">Name</Label>
+            <Input id="new-user-name" name="name" required autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-email">Email</Label>
+            <Input id="new-user-email" name="email" type="email" required autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-password">Password</Label>
+            <Input id="new-user-password" name="password" type="text" required minLength={8} autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-role">Role</Label>
+            {/* A combobox rather than a datalist: browsers render datalists
+                inconsistently, and the arrow on one that does nothing reads as a broken
+                control. allowCustom because a role is a string your policies name — the
+                list is a convenience, not the set of legal answers. */}
+            <Combobox
+              id="new-user-role"
+              name="role"
+              value={role}
+              onChange={setRole}
+              options={KNOWN_ROLES.map((option) => ({ value: option, label: option }))}
+              placeholder="Choose a role"
+              searchPlaceholder="Search or type a new role…"
+              allowCustom
+              customLabel={(typed) => `Create the role "${typed}"`}
+            />
+            <p className="text-xs text-muted-foreground">Type anything: a new role exists the moment a policy names it.</p>
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Create account
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function UserRowMenu({ userId, role, banned }: { userId: string; role: string; banned: boolean }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const [picking, setPicking] = useState(false);
+  const [draft, setDraft] = useState(role);
+
+  const run = (work: () => Promise<UserActionResult>, done: string) => {
+    startTransition(async () => {
+      const result = await work();
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success(done);
+      router.refresh();
+    });
+  };
+
+  const setRole = (next: string) => run(() => setRoleAction({ userId, role: next }), `Role is now ${next}.`);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Manage this account" disabled={pending}>
+          {pending ? <Spinner /> : <MoreHorizontalIcon />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuLabel className="flex items-center gap-2 text-xs font-normal text-muted-foreground">
+          <ShieldIcon className="size-3.5" />
+          Role
+        </DropdownMenuLabel>
+        <DropdownMenuGroup>
+          {KNOWN_ROLES.map((option) => (
+            <DropdownMenuItem key={option} disabled={option === role} onSelect={() => setRole(option)}>
+              {option}
+            </DropdownMenuItem>
+          ))}
+          {/* A dialog with the same combobox, not window.prompt: a browser prompt
+              cannot show the roles that already exist, and is the one piece of UI in
+              the app that looks like it belongs to 1998. */}
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              setDraft(role);
+              setPicking(true);
+            }}
+          >
+            Something else…
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            variant={banned ? undefined : "destructive"}
+            onSelect={() => run(() => setBannedAction({ userId, banned: !banned }), banned ? "Unbanned — they can sign in again." : "Banned. Their data stays; their way in doesn't.")}
+          >
+            <BanIcon />
+            {banned ? "Unban" : "Ban"}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+
+      <Dialog open={picking} onOpenChange={setPicking}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Change role</DialogTitle>
+            <DialogDescription>Pick one that exists, or type a new one — a role exists the moment a policy names it.</DialogDescription>
+          </DialogHeader>
+          <Combobox
+            value={draft}
+            onChange={setDraft}
+            options={KNOWN_ROLES.map((option) => ({ value: option, label: option }))}
+            placeholder="Choose a role"
+            searchPlaceholder="Search or type a new role…"
+            allowCustom
+            customLabel={(typed) => `Create the role "${typed}"`}
+          />
+          <DialogFooter>
+            <Button
+              disabled={pending || !draft.trim() || draft === role}
+              onClick={() => {
+                setPicking(false);
+                setRole(draft.trim());
+              }}
+            >
+              Change role
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DropdownMenu>
+  );
+}

package/templates/app/components/dashboard/user-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { KeyRoundIcon, LogOutIcon, MonitorSmartphoneIcon, ShieldCheckIcon, UserIcon } from "lucide-react";
+import { LogOutIcon, ShieldIcon, UserCircleIcon } from "lucide-react";
 import { authClient } from "@/lib/auth-client";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -36,8 +36,12 @@ export function UserAvatar({ user, className }: { user: DashboardUser; className
 /**
  * What's inside the account menu, wherever it's opened from — the header's avatar and
  * the sidebar's footer both show this, so there's one list of account actions, not two.
+ *
+ * Three entries, not a sitemap. Password, security and devices are tabs inside Account
+ * settings, so linking each of them here was the same door four times. "Manage roles"
+ * appears for the people who can use it.
  */
-export function UserMenuItems({ user }: { user: DashboardUser }) {
+export function UserMenuItems({ user, isAdmin = false }: { user: DashboardUser; isAdmin?: boolean }) {
   const signOut = async () => {
     await authClient.signOut();
     window.location.assign("/sign-in");
@@ -56,34 +60,24 @@ export function UserMenuItems({ user }: { user: DashboardUser }) {
       <DropdownMenuGroup>
         <DropdownMenuItem asChild>
           <Link href="/dashboard/account">
-            <UserIcon />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/password">
-            <KeyRoundIcon />
-            Password
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/security">
-            <ShieldCheckIcon />
-            Security
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/sessions">
-            <MonitorSmartphoneIcon />
-            Devices
+            <UserCircleIcon />
+            Account settings
           </Link>
         </DropdownMenuItem>
+        {isAdmin && (
+          <DropdownMenuItem asChild>
+            <Link href="/dashboard/roles">
+              <ShieldIcon />
+              Manage roles
+            </Link>
+          </DropdownMenuItem>
+        )}
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
       <DropdownMenuGroup>
         <DropdownMenuItem variant="destructive" onSelect={signOut}>
           <LogOutIcon />
-          Sign out
+          Log out
         </DropdownMenuItem>
       </DropdownMenuGroup>
     </>