@flaredev/cli 0.2.0 → 0.3.0

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

@@ -1,78 +1,78 @@
-"use client";
-
-import { useState } from "react";
-import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
-import { authClient } from "@/lib/auth-client";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Separator } from "@/components/ui/separator";
-import { SidebarTrigger } from "@/components/ui/sidebar";
-
-export type Theme = "light" | "dark" | "system";
-
-/** Persist the choice for SSR (so the first paint matches) and apply it now. */
-function applyTheme(theme: Theme) {
-  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
-  const root = document.documentElement;
-  root.classList.remove("light", "dark");
-  if (theme !== "system") root.classList.add(theme);
-}
-
-export function AdminHeader({ user, initialTheme }: { user: { name?: string | null; email: string }; initialTheme: Theme }) {
-  const [theme, setTheme] = useState<Theme>(initialTheme);
-  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
-
-  return (
-    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
-      <SidebarTrigger />
-      <Separator orientation="vertical" className="mr-1 h-4" />
-      <div className="ml-auto flex items-center gap-1">
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
-          onClick={() => {
-            const next: Theme = dark ? "light" : "dark";
-            setTheme(next);
-            applyTheme(next);
-          }}
-        >
-          {dark ? <SunIcon /> : <MoonIcon />}
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="gap-2">
-              <span className="max-w-40 truncate">{user.name || user.email}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="font-normal">
-              <span className="block truncate text-sm font-medium">{user.name || "Signed in"}</span>
-              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem
-                onSelect={async () => {
-                  await authClient.signOut();
-                  window.location.assign("/sign-in");
-                }}
-              >
-                <LogOutIcon />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </header>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+export type Theme = "light" | "dark" | "system";
+
+/** Persist the choice for SSR (so the first paint matches) and apply it now. */
+function applyTheme(theme: Theme) {
+  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  if (theme !== "system") root.classList.add(theme);
+}
+
+export function DashboardHeader({ user, initialTheme }: { user: { name?: string | null; email: string }; initialTheme: Theme }) {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-1 h-4" />
+      <div className="ml-auto flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
+          onClick={() => {
+            const next: Theme = dark ? "light" : "dark";
+            setTheme(next);
+            applyTheme(next);
+          }}
+        >
+          {dark ? <SunIcon /> : <MoonIcon />}
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-2">
+              <span className="max-w-40 truncate">{user.name || user.email}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="font-normal">
+              <span className="block truncate text-sm font-medium">{user.name || "Signed in"}</span>
+              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                onSelect={async () => {
+                  await authClient.signOut();
+                  window.location.assign("/sign-in");
+                }}
+              >
+                <LogOutIcon />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

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

@@ -1,120 +1,166 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { LayoutDashboardIcon } from "lucide-react";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar";
-import { resourceIcon } from "./resource-icon";
-
-export interface NavResource {
-  name: string;
-  pluralLabel: string;
-  slug: string;
-  icon?: string;
-  /** Optional count badge (off by default). */
-  badge?: number;
-}
-
-/**
- * Sidebar navigation, one item per registered resource. The icon comes from the
- * descriptor's `icon`, the label from its plural label, and the active item from the
- * current path.
- */
-export function ResourceNav({
-  appName,
-  resources,
-  links = [],
-}: {
-  appName: string;
-  resources: NavResource[];
-  /** Extra pages (see lib/admin-nav.ts), shown under "Platform". */
-  links?: Array<{ label: string; href: string; icon: string }>;
-}) {
-  const pathname = usePathname();
-
-  return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild size="lg" tooltip={appName}>
-              <Link href="/admin">
-                <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
-                  <LayoutDashboardIcon className="size-4" />
-                </div>
-                <span className="truncate font-semibold">{appName}</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Resources</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {resources.map((resource) => {
-                const href = `/admin/${resource.slug}`;
-                const Icon = resourceIcon(resource.icon);
-                return (
-                  <SidebarMenuItem key={resource.name}>
-                    <SidebarMenuButton asChild isActive={pathname === href || pathname.startsWith(`${href}/`)} tooltip={resource.pluralLabel}>
-                      <Link href={href}>
-                        <Icon />
-                        <span>{resource.pluralLabel}</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        {links.length > 0 && (
-          <SidebarGroup>
-            <SidebarGroupLabel>Platform</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {links.map((link) => {
-                  const Icon = resourceIcon(link.icon);
-                  // Route handlers (/api/...) and other sites are whole pages: open them in a new tab.
-                  const external = link.href.startsWith("/api/") || /^https?:\/\//.test(link.href);
-                  const content = (
-                    <>
-                      <Icon />
-                      <span>{link.label}</span>
-                    </>
-                  );
-                  return (
-                    <SidebarMenuItem key={link.href}>
-                      <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
-                        {external ? (
-                          <a href={link.href} target="_blank" rel="noreferrer">
-                            {content}
-                          </a>
-                        ) : (
-                          <Link href={link.href}>{content}</Link>
-                        )}
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  );
-                })}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        )}
-      </SidebarContent>
-    </Sidebar>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { resourceIcon } from "./resource-icon";
+
+export interface NavResource {
+  name: string;
+  pluralLabel: string;
+  slug: string;
+  icon?: string;
+  /** Optional count badge (off by default). */
+  badge?: number;
+}
+
+/**
+ * Sidebar navigation, one item per registered resource. The icon comes from the
+ * descriptor's `icon`, the label from its plural label, and the active item from the
+ * current path.
+ */
+/** Sections every dashboard has, whatever resources the app defines. */
+const ACCOUNT_LINKS = [{ href: "/dashboard/account", label: "Account", icon: UserCircleIcon }];
+// Security has its own page once `flare gen security` runs, which adds its link to
+// lib/dashboard-nav.ts; observability ships with every app.
+const ADMIN_LINKS = [{ href: "/dashboard/observability", label: "Observability", icon: ActivityIcon }];
+
+export function DashboardSidebar({
+  appName,
+  resources,
+  links = [],
+  isAdmin = false,
+}: {
+  appName: string;
+  resources: NavResource[];
+  /** Extra pages (see lib/dashboard-nav.ts), shown under "Platform". */
+  links?: Array<{ label: string; href: string; icon: string }>;
+  /** Whether to show the sections that manage the app itself. */
+  isAdmin?: boolean;
+}) {
+  const pathname = usePathname();
+  const manage = [...ACCOUNT_LINKS, ...(isAdmin ? ADMIN_LINKS : [])];
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild size="lg" tooltip={appName}>
+              <Link href="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <LayoutDashboardIcon className="size-4" />
+                </div>
+                <span className="truncate font-semibold">{appName}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/dashboard"} tooltip="Overview">
+                  <Link href="/dashboard">
+                    <LayoutDashboardIcon />
+                    <span>Overview</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {resources.length > 0 && (
+        <SidebarGroup>
+          <SidebarGroupLabel>Resources</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {resources.map((resource) => {
+                const href = `/dashboard/${resource.slug}`;
+                const Icon = resourceIcon(resource.icon);
+                return (
+                  <SidebarMenuItem key={resource.name}>
+                    <SidebarMenuButton asChild isActive={pathname === href || pathname.startsWith(`${href}/`)} tooltip={resource.pluralLabel}>
+                      <Link href={href}>
+                        <Icon />
+                        <span>{resource.pluralLabel}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        )}
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Manage</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {manage.map((link) => (
+                <SidebarMenuItem key={link.href}>
+                  <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
+                    <Link href={link.href}>
+                      <link.icon />
+                      <span>{link.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {links.length > 0 && (
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {links.map((link) => {
+                  const Icon = resourceIcon(link.icon);
+                  // Route handlers (/api/...) and other sites are whole pages: open them in a new tab.
+                  const external = link.href.startsWith("/api/") || /^https?:\/\//.test(link.href);
+                  const content = (
+                    <>
+                      <Icon />
+                      <span>{link.label}</span>
+                    </>
+                  );
+                  return (
+                    <SidebarMenuItem key={link.href}>
+                      <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
+                        {external ? (
+                          <a href={link.href} target="_blank" rel="noreferrer">
+                            {content}
+                          </a>
+                        ) : (
+                          <Link href={link.href}>{content}</Link>
+                        )}
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
+      </SidebarContent>
+    </Sidebar>
+  );
+}

package/templates/app/components/dashboard/export-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useTransition } from "react";
+import { useSearchParams } from "next/navigation";
+import { DownloadIcon } from "lucide-react";
+import { toast } from "sonner";
+import { exportRecordsAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { downloadCsv } from "./table-selection";
+
+/**
+ * Exports what the table is showing — the same search, filters and sort, not just the
+ * page on screen. The server builds the CSV because the browser only ever holds one page.
+ */
+export function ExportButton({ resourceName, pluralLabel }: { resourceName: string; pluralLabel: string }) {
+  const params = useSearchParams();
+  const [pending, startTransition] = useTransition();
+
+  const run = () =>
+    startTransition(async () => {
+      const query = new URLSearchParams(params.toString());
+      query.delete("page");
+      const result = await exportRecordsAction(resourceName, query.toString());
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { csv, rows, truncated } = result.data;
+      downloadCsv(`${resourceName.toLowerCase()}-${new Date().toISOString().slice(0, 10)}.csv`, csv);
+      if (truncated) toast.warning(`Exported the first ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}. Filter down for the rest.`);
+      else toast.success(`Exported ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}.`);
+    });
+
+  return (
+    <Button variant="outline" onClick={run} disabled={pending}>
+      {pending ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
+      Export
+    </Button>
+  );
+}