@flaredev/cli 0.12.2 → 0.13.0

package/templates/next/app/dashboard/page.tsx

@@ -1,22 +1,31 @@
 import Link from "next/link";
-import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon, UsersIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { resourceIcon } from "@/components/dashboard/resource-icon";
 import { StatCards, type Stat } from "@/components/dashboard/stat-card";
 import { prisma } from "@/lib/db";
 import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
-import { adminPermissions, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
+import { ADMIN_ROLES, adminPermissions, dashboardSession, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
 
 export const metadata = { title: "Dashboard" };
 
+/** The three commands that turn an empty app into one with data, with the stack's real steps. */
+const FIRST_RESOURCE_STEPS = [
+  { command: "npx flare gen resource Contact --fields 'name:string, email:email!'", note: "the table, API and admin screens" },
+  { command: "npx flare migrate", note: "create its table" },
+  { command: "npx flare seed:resource Contact 1000", note: "fill it with sample rows" },
+];
+
 /** The first thing you see when you sign in: how much data there is, and what's left to set up. */
 export default async function DashboardPage() {
   const { user } = await requireSession("/dashboard");
+  const { role } = await dashboardSession();
+  const isAdmin = role !== null && ADMIN_ROLES.includes(role);
   const resources = await visibleResources();
+  const week = new Date(Date.now() - 7 * 86_400_000);
 
   const cards = await Promise.all(
     resources.map(async (resource) => {
@@ -26,14 +35,33 @@ export default async function DashboardPage() {
     }),
   );
 
-  const stats: Stat[] = cards.slice(0, 4).map(({ resource, total, recent }) => ({
-    label: resource.pluralLabel,
-    value: total,
-    hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
-    change: trend(recent.current, recent.previous),
-    icon: resourceIcon(resource.icon),
-    href: resourcePath(resource),
-  }));
+  // The one table every app has from its first sign-in. Admin only, because it links to
+  // the accounts page, which is.
+  const [people, peopleThisWeek] = isAdmin
+    ? await Promise.all([prisma.user.count(), prisma.user.count({ where: { createdAt: { gte: week } } })])
+    : [0, 0];
+
+  const stats: Stat[] = [
+    ...(isAdmin
+      ? [
+          {
+            label: "Users",
+            value: people,
+            hint: peopleThisWeek > 0 ? `${peopleThisWeek.toLocaleString()} this week` : "none this week",
+            icon: UsersIcon,
+            href: "/dashboard/users",
+          } satisfies Stat,
+        ]
+      : []),
+    ...cards.slice(0, isAdmin ? 3 : 4).map(({ resource, total, recent }) => ({
+      label: resource.pluralLabel,
+      value: total,
+      hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
+      change: trend(recent.current, recent.previous),
+      icon: resourceIcon(resource.icon),
+      href: resourcePath(resource),
+    })),
+  ];
 
   const passkeys = await prisma.passkey.count({ where: { userId: user.id } });
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
@@ -48,31 +76,67 @@ export default async function DashboardPage() {
     <>
       <PageHeader
         title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
-        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource and this page fills in."}
       />
 
       <StatCards stats={stats} />
 
       {resources.length === 0 && (
-        <Empty className="rounded-xl border border-dashed">
-          <EmptyHeader>
-            <EmptyTitle>No resources yet</EmptyTitle>
-            <EmptyDescription>
-              Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>, then fill it with{" "}
-              <code>flare seed:resource Contact --count 1000</code>.
-            </EmptyDescription>
-          </EmptyHeader>
-        </Empty>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Add your first resource</CardTitle>
+            <CardDescription>
+              A resource is a table, its API and its admin screens, generated from one line. Three commands from a terminal in this
+              app:
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {FIRST_RESOURCE_STEPS.map((step, index) => (
+              <div key={step.command} className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b py-3 last:border-b-0 last:pb-0">
+                <span className="grid size-6 shrink-0 translate-y-0.5 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                  {index + 1}
+                </span>
+                <code className="rounded bg-muted px-2 py-1 font-mono text-[13px]">{step.command}</code>
+                <span className="text-xs text-muted-foreground">{step.note}</span>
+              </div>
+            ))}
+            <p className="mt-4 text-xs text-muted-foreground">
+              Then refresh this page: the sidebar, these cards and the admin screens are already wired to it.
+            </p>
+          </CardContent>
+        </Card>
       )}
 
       <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-        {cards.length > 0 && (
+        {(cards.length > 0 || isAdmin) && (
           <Card>
             <CardHeader>
               <CardTitle className="text-base">Your data</CardTitle>
-              <CardDescription>Every resource you can see.</CardDescription>
+              <CardDescription>Every table in the app, and who it belongs to.</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col">
+              {isAdmin && (
+                <div className="flex items-center gap-3 border-b py-3 last:border-b-0 last:pb-0">
+                  <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+                    <UsersIcon className="size-4.5" />
+                  </span>
+                  <div className="flex min-w-0 flex-col">
+                    <Link href="/dashboard/users" className="truncate text-sm font-medium hover:underline">
+                      Users
+                    </Link>
+                    <span className="text-xs text-muted-foreground">
+                      {people.toLocaleString()} {people === 1 ? "account" : "accounts"}
+                    </span>
+                  </div>
+                  <div className="ml-auto flex items-center gap-1">
+                    <Button variant="ghost" size="icon" aria-label="Open users" asChild>
+                      <Link href="/dashboard/users">
+                        <ArrowRightIcon />
+                      </Link>
+                    </Button>
+                  </div>
+                </div>
+              )}
               {cards.map(({ resource, total, permissions }) => {
                 const Icon = resourceIcon(resource.icon);
                 return (

package/templates/next/app/dashboard/users/page.tsx

@@ -0,0 +1,51 @@
+import { redirect } from "next/navigation";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { CreateUserButton } from "@/components/dashboard/user-actions";
+import { UsersTable } from "@/components/dashboard/users-table";
+import { prisma } from "@/lib/db";
+import { ADMIN_ROLES, dashboardSession } from "@/lib/dashboard";
+
+export const metadata = { title: "Users" };
+
+/**
+ * Everyone with an account — there from the first sign-in, before any resource exists.
+ *
+ * Admin only: the resource policies decide who sees data, but the account list is about
+ * the people themselves, so it follows ADMIN_ROLES rather than any one policy.
+ */
+export default async function UsersPage() {
+  const { session, role } = await dashboardSession();
+  if (!session) redirect("/sign-in?next=/dashboard/users");
+  if (!role || !ADMIN_ROLES.includes(role)) redirect("/dashboard");
+
+  const [rows, total] = await Promise.all([
+    prisma.user.findMany({
+      orderBy: { createdAt: "desc" },
+      take: 200,
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        image: true,
+        role: true,
+        banned: true,
+        emailVerified: true,
+        twoFactorEnabled: true,
+        createdAt: true,
+      },
+    }),
+    prisma.user.count(),
+  ]);
+
+  return (
+    <>
+      <PageHeader
+        title="Users"
+        description="Everyone who can sign in, newest first — and what each of them is allowed to be."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Users" }]}
+        actions={<CreateUserButton />}
+      />
+      <UsersTable rows={rows} total={total} currentUserId={session.user.id} />
+    </>
+  );
+}

package/templates/next/lib/auth.ts

@@ -190,7 +190,7 @@ async function promoteFirstUser() {
 }
 
 export const auth = betterAuth({
-  appName: "__APP_NAME__",
+  appName: "__APP_TITLE__",
   secret: process.env.BETTER_AUTH_SECRET,
   // Without BETTER_AUTH_URL, accept local dev on any port, a `flare dev --tunnel` URL and
   // this app's workers.dev host. Cloudflare only routes hosts this Worker serves, so a
@@ -263,7 +263,7 @@ export const auth = betterAuth({
     }),
     emailOTP({ sendVerificationOTP: (data) => sendEmailCode(data), otpLength: 6, expiresIn: 5 * 60, allowedAttempts: 5 }),
     twoFactor({
-      issuer: "__APP_NAME__",
+      issuer: "__APP_TITLE__",
       otpOptions: { sendOTP: ({ user, otp }) => sendTwoFactorCode({ user, otp }), allowedAttempts: 5 },
       // With only email codes switched on there's no authenticator app to confirm first.
       skipVerificationOnEnable: !authConfig.twoFactor.authenticator,
@@ -271,7 +271,7 @@ export const auth = betterAuth({
       // accounts that do have one must still give it.
       allowPasswordless: true,
     }),
-    passkey({ rpName: "__APP_NAME__" }),
+    passkey({ rpName: "__APP_TITLE__" }),
     // Must stay last: lets server actions set auth cookies.
     nextCookies(),
   ],

package/templates/next/lib/dashboard-nav.ts

@@ -0,0 +1,29 @@
+// Extra dashboard sidebar links (maintained by flare generators such as `flare gen security`).
+// Add your own links outside the generated block.
+// generated:start
+export interface DashboardLink {
+  label: string;
+  href: string;
+  /** A resource icon name, e.g. "shield" (see components/dashboard/resource-icon.tsx). */
+  icon: string;
+}
+
+export const generatedDashboardLinks: DashboardLink[] = [];
+// generated:end
+
+import { authConfig } from "./auth-config";
+
+/**
+ * Links shown under "Platform" in the dashboard sidebar.
+ *
+ * No Costs page on this stack: the estimator prices Workers, D1 and R2 from Cloudflare's
+ * price sheet, and this app runs on Vercel and Neon, whose bills live in their own
+ * dashboards.
+ */
+export const dashboardLinks: DashboardLink[] = [
+  // Only where invitations are the way in; the page explains itself for the other two
+  // modes, but there is no reason to send anybody to it.
+  ...(authConfig.signup === "invite" ? [{ label: "Invitations", href: "/dashboard/invitations", icon: "mail" }] : []),
+  ...generatedDashboardLinks,
+  { label: "API reference", href: "/api/reference", icon: "book" },
+];

package/templates/next/lib/dashboard.ts

@@ -162,7 +162,11 @@ export async function resourceStats(name: string, field?: string, days = 7): Pro
       return stats;
     },
     ["flare", "resource-stats"],
-    { tags: [resourceTag(name)], revalidate: TTL.medium },
+    // TTL.short, by the TTL table's own words: "changes often, cheap to recompute:
+    // counts, dashboards". These are those counts — and `flare seed:resource` writes
+    // from outside the app, where no tag revalidates them, so at medium the overview
+    // said "0 records" for five minutes after seeding a thousand.
+    { tags: [resourceTag(name)], revalidate: TTL.short },
   );
   return read(name, field, days, limit ?? undefined);
 }

package/templates/next/lib/mail.ts

@@ -9,7 +9,7 @@ import { createMailer, renderTransactionalEmail, type TransactionalEmail } from
  */
 export const mailer = createMailer({
   apiKey: process.env.RESEND_API_KEY,
-  from: process.env.MAIL_FROM || "__APP_NAME__ <onboarding@resend.dev>",
+  from: process.env.MAIL_FROM || "__APP_TITLE__ <onboarding@resend.dev>",
 });
 
 /**
@@ -30,6 +30,6 @@ export async function sendTransactionalEmail({
   idempotencyKey,
   ...content
 }: Omit<TransactionalEmail, "appName"> & { to: string | string[]; subject: string; idempotencyKey?: string }) {
-  const { html, text } = renderTransactionalEmail({ appName: "__APP_NAME__", ...content });
+  const { html, text } = renderTransactionalEmail({ appName: "__APP_TITLE__", ...content });
   return mailer.send({ to, subject, html, text, idempotencyKey });
 }

package/templates/next/prisma/schema/base.prisma

@@ -5,11 +5,17 @@
 // regenerated: the generator, the datasource, the tables Better Auth needs and the two
 // Flare's own dashboard uses are all here, and yours to edit.
 
+// Prisma 7's generator, not a leftover from 6: `prisma-client` (the v7 provider; v6's
+// was `prisma-client-js`), and `output` is required — v7 no longer generates into
+// node_modules. The client lands in lib/generated/, git-ignored and rebuilt on every
+// install and `flare migrate`.
 generator client {
   provider = "prisma-client"
   output   = "../../lib/generated/prisma"
 }
 
+// No `url` here — that is also Prisma 7: the connection string lives in
+// prisma.config.ts, which reads DATABASE_URL from .env.
 datasource db {
   provider = "postgresql"
 }

package/templates/next/tsconfig.json

@@ -12,13 +12,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "incremental": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "types": ["node"],
     "plugins": [{ "name": "next" }],
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
   "exclude": ["node_modules", ".next", "lib/generated"]
 }