@codaijs/keel 0.1.0

package/sails/admin-dashboard/files/frontend/pages/admin/Dashboard.tsx

@@ -0,0 +1,173 @@
+import { useMemo } from "react";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import StatsCard from "@/components/admin/StatsCard.js";
+import UsersTable from "@/components/admin/UsersTable.js";
+import { useAdminStats, useAdminUsers } from "@/hooks/useAdmin.js";
+
+export default function AdminDashboard() {
+  const { stats, isLoading: statsLoading } = useAdminStats();
+  const {
+    users,
+    pagination,
+    isLoading: usersLoading,
+    search,
+    setSearch,
+    setPage,
+  } = useAdminUsers();
+
+  // Fill in missing days for the chart (last 30 days)
+  const chartData = useMemo(() => {
+    if (!stats?.signupsByDay) return [];
+
+    const map = new Map<string, number>();
+    for (const entry of stats.signupsByDay) {
+      map.set(entry.date, entry.count);
+    }
+
+    const days: Array<{ date: string; signups: number }> = [];
+    const now = new Date();
+    for (let i = 29; i >= 0; i--) {
+      const d = new Date(now.getTime() - i * 24 * 60 * 60 * 1000);
+      const key = d.toISOString().slice(0, 10);
+      days.push({ date: key, signups: map.get(key) ?? 0 });
+    }
+
+    return days;
+  }, [stats?.signupsByDay]);
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white">Admin Dashboard</h1>
+        <p className="mt-1 text-sm text-keel-gray-400">
+          User management and application metrics
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatsCard
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          }
+          label="Total Users"
+          value={statsLoading ? "..." : (stats?.totalUsers ?? 0)}
+        />
+        <StatsCard
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+            </svg>
+          }
+          label="New This Week"
+          value={statsLoading ? "..." : (stats?.newUsersWeek ?? 0)}
+          trend={
+            stats
+              ? { value: stats.newUsersWeek, label: "last 7 days" }
+              : undefined
+          }
+        />
+        <StatsCard
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          }
+          label="New This Month"
+          value={statsLoading ? "..." : (stats?.newUsersMonth ?? 0)}
+          trend={
+            stats
+              ? { value: stats.newUsersMonth, label: "last 30 days" }
+              : undefined
+          }
+        />
+        <StatsCard
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728M9.172 15.828a4 4 0 010-5.656m5.656 0a4 4 0 010 5.656M12 12h.01" />
+            </svg>
+          }
+          label="Active Sessions"
+          value={statsLoading ? "..." : (stats?.activeSessions ?? 0)}
+        />
+      </div>
+
+      {/* Signups Chart */}
+      <div className="mb-8 rounded-xl border border-keel-gray-800 bg-keel-gray-900 p-6">
+        <h2 className="mb-4 text-lg font-semibold text-white">
+          User Signups (Last 30 Days)
+        </h2>
+        {statsLoading ? (
+          <div className="flex h-64 items-center justify-center">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-keel-gray-800 border-t-keel-blue" />
+          </div>
+        ) : (
+          <div className="h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#2a2a3e" />
+                <XAxis
+                  dataKey="date"
+                  stroke="#6b7280"
+                  fontSize={12}
+                  tickFormatter={(val: string) => {
+                    const d = new Date(val);
+                    return `${d.getMonth() + 1}/${d.getDate()}`;
+                  }}
+                />
+                <YAxis
+                  stroke="#6b7280"
+                  fontSize={12}
+                  allowDecimals={false}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "#1a1a2e",
+                    border: "1px solid #2a2a3e",
+                    borderRadius: "8px",
+                    color: "#fff",
+                    fontSize: "13px",
+                  }}
+                  labelFormatter={(label: string) => {
+                    return new Date(label).toLocaleDateString(undefined, {
+                      weekday: "short",
+                      month: "short",
+                      day: "numeric",
+                    });
+                  }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="signups"
+                  stroke="#3b82f6"
+                  strokeWidth={2}
+                  dot={{ r: 3, fill: "#3b82f6" }}
+                  activeDot={{ r: 5, fill: "#3b82f6" }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </div>
+
+      {/* Users Table */}
+      <div>
+        <h2 className="mb-4 text-lg font-semibold text-white">Users</h2>
+        <UsersTable
+          users={users}
+          pagination={pagination}
+          isLoading={usersLoading}
+          search={search}
+          onSearchChange={(val) => {
+            setSearch(val);
+            setPage(1);
+          }}
+          onPageChange={setPage}
+        />
+      </div>
+    </div>
+  );
+}

package/sails/admin-dashboard/files/frontend/pages/admin/UserDetail.tsx

@@ -0,0 +1,203 @@
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate } from "react-router";
+import { fetchUser, updateUser, deleteUser, type AdminUser } from "@/hooks/useAdmin.js";
+
+export default function UserDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [user, setUser] = useState<AdminUser | null>(null);
+  const [activeSessions, setActiveSessions] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    if (!id) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchUser(id);
+      setUser(data.user);
+      setActiveSessions(data.activeSessions);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load user");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleVerifyEmail = async () => {
+    if (!user) return;
+    setActionLoading("verify");
+    try {
+      const result = await updateUser(user.id, { emailVerified: true });
+      setUser(result.user);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to verify email");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!user) return;
+    const confirmed = window.confirm(
+      `Are you sure you want to delete ${user.name} (${user.email})? This action cannot be undone.`,
+    );
+    if (!confirmed) return;
+
+    setActionLoading("delete");
+    try {
+      await deleteUser(user.id);
+      navigate("/admin");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete user");
+      setActionLoading(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-keel-gray-800 border-t-keel-blue" />
+      </div>
+    );
+  }
+
+  if (error || !user) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="rounded-xl border border-red-500/20 bg-red-500/5 p-6 text-center">
+          <p className="text-sm text-red-400">{error ?? "User not found"}</p>
+          <button
+            onClick={() => navigate("/admin")}
+            className="mt-4 text-sm font-medium text-keel-blue hover:underline"
+          >
+            Back to dashboard
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Back button */}
+      <button
+        onClick={() => navigate("/admin")}
+        className="mb-6 flex items-center gap-1.5 text-sm font-medium text-keel-gray-400 transition-colors hover:text-white"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to dashboard
+      </button>
+
+      {/* User info card */}
+      <div className="rounded-xl border border-keel-gray-800 bg-keel-gray-900 p-6">
+        <div className="flex items-start gap-4">
+          {user.image ? (
+            <img
+              src={user.image}
+              alt={user.name}
+              className="h-16 w-16 rounded-full object-cover"
+            />
+          ) : (
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-keel-blue/20 text-xl font-bold text-keel-blue">
+              {user.name.charAt(0).toUpperCase()}
+            </div>
+          )}
+
+          <div className="min-w-0 flex-1">
+            <h1 className="text-xl font-bold text-white">{user.name}</h1>
+            <p className="text-sm text-keel-gray-400">{user.email}</p>
+
+            <div className="mt-3 flex flex-wrap gap-2">
+              {user.emailVerified ? (
+                <span className="inline-flex items-center rounded-full bg-green-500/10 px-2.5 py-0.5 text-xs font-medium text-green-400">
+                  Email Verified
+                </span>
+              ) : (
+                <span className="inline-flex items-center rounded-full bg-yellow-500/10 px-2.5 py-0.5 text-xs font-medium text-yellow-400">
+                  Email Not Verified
+                </span>
+              )}
+              <span className="inline-flex items-center rounded-full bg-keel-blue/10 px-2.5 py-0.5 text-xs font-medium text-keel-blue">
+                {activeSessions} active session{activeSessions !== 1 ? "s" : ""}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Details */}
+        <div className="mt-6 grid grid-cols-1 gap-4 border-t border-keel-gray-800 pt-6 sm:grid-cols-2">
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-keel-gray-400">
+              User ID
+            </p>
+            <p className="mt-1 font-mono text-sm text-keel-gray-200">{user.id}</p>
+          </div>
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-keel-gray-400">
+              Member Since
+            </p>
+            <p className="mt-1 text-sm text-keel-gray-200">
+              {new Date(user.createdAt).toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-keel-gray-400">
+              Last Updated
+            </p>
+            <p className="mt-1 text-sm text-keel-gray-200">
+              {new Date(user.updatedAt).toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-keel-gray-400">
+              Profile Image
+            </p>
+            <p className="mt-1 text-sm text-keel-gray-200">
+              {user.image ? "Custom image set" : "No image"}
+            </p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="mt-6 flex flex-wrap gap-3 border-t border-keel-gray-800 pt-6">
+          {!user.emailVerified && (
+            <button
+              onClick={handleVerifyEmail}
+              disabled={actionLoading === "verify"}
+              className="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {actionLoading === "verify" ? "Verifying..." : "Verify Email"}
+            </button>
+          )}
+          <button
+            onClick={handleDelete}
+            disabled={!!actionLoading}
+            className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {actionLoading === "delete" ? "Deleting..." : "Delete User"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/sails/admin-dashboard/install.ts

@@ -0,0 +1,305 @@
+/**
+ * Admin Dashboard Sail Installer
+ *
+ * Adds an admin dashboard for user management and basic metrics.
+ * Includes user listing, user detail, stats cards, and a signup chart.
+ *
+ * Usage:
+ *   npx tsx sails/admin-dashboard/install.ts
+ */
+
+import {
+  readFileSync,
+  writeFileSync,
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+} from "node:fs";
+import { resolve, dirname, join } from "node:path";
+import { execSync } from "node:child_process";
+import { input, confirm } from "@inquirer/prompts";
+
+// ---------------------------------------------------------------------------
+// Paths
+// ---------------------------------------------------------------------------
+
+const SAIL_DIR = dirname(new URL(import.meta.url).pathname);
+const PROJECT_ROOT = resolve(SAIL_DIR, "../..");
+const BACKEND_ROOT = join(PROJECT_ROOT, "packages/backend");
+const FRONTEND_ROOT = join(PROJECT_ROOT, "packages/frontend");
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface SailManifest {
+  name: string;
+  displayName: string;
+  version: string;
+  requiredEnvVars: { key: string; description: string }[];
+  dependencies: { backend: Record<string, string>; frontend: Record<string, string> };
+}
+
+function loadManifest(): SailManifest {
+  return JSON.parse(readFileSync(join(SAIL_DIR, "addon.json"), "utf-8"));
+}
+
+function insertAtMarker(filePath: string, marker: string, code: string): void {
+  if (!existsSync(filePath)) {
+    console.warn(`  Warning: File not found: ${filePath}`);
+    return;
+  }
+  let content = readFileSync(filePath, "utf-8");
+  if (!content.includes(marker)) {
+    console.warn(`  Warning: Marker "${marker}" not found in ${filePath}`);
+    return;
+  }
+  if (content.includes(code.trim())) {
+    console.log(`  Skipped (already present) -> ${filePath}`);
+    return;
+  }
+  content = content.replace(marker, `${marker}\n${code}`);
+  writeFileSync(filePath, content, "utf-8");
+  console.log(`  Modified -> ${filePath}`);
+}
+
+function copyFile(src: string, dest: string, label: string): void {
+  mkdirSync(dirname(dest), { recursive: true });
+  copyFileSync(src, dest);
+  console.log(`  Copied -> ${label}`);
+}
+
+function installDeps(deps: Record<string, string>, workspace: string): void {
+  const entries = Object.entries(deps);
+  if (entries.length === 0) return;
+  const packages = entries.map(([n, v]) => `${n}@${v}`).join(" ");
+  const cmd = `npm install ${packages} --workspace=${workspace}`;
+  console.log(`  Running: ${cmd}`);
+  execSync(cmd, { cwd: PROJECT_ROOT, stdio: "inherit" });
+}
+
+// ---------------------------------------------------------------------------
+// Email validation helper
+// ---------------------------------------------------------------------------
+
+function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+function validateAdminEmails(value: string): true | string {
+  if (!value || value.trim().length === 0) {
+    return "At least one admin email is required.";
+  }
+  const emails = value.split(",").map((e) => e.trim()).filter(Boolean);
+  if (emails.length === 0) {
+    return "At least one admin email is required.";
+  }
+  for (const email of emails) {
+    if (!isValidEmail(email)) {
+      return `Invalid email format: "${email}". Please provide valid email addresses separated by commas.`;
+    }
+  }
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main(): Promise<void> {
+  const manifest = loadManifest();
+
+  // -- Step 1: Welcome --------------------------------------------------------
+  console.log("\n------------------------------------------------------------");
+  console.log(`  Admin Dashboard Sail Installer (v${manifest.version})`);
+  console.log("------------------------------------------------------------");
+  console.log();
+  console.log("  This sail adds an admin dashboard to your project:");
+  console.log("    - Dashboard with stats cards and signup chart");
+  console.log("    - User management (list, search, view details)");
+  console.log("    - Admin actions (verify email, delete user)");
+  console.log("    - Access controlled via ADMIN_EMAILS env var");
+  console.log("    - Charts powered by recharts");
+  console.log();
+
+  const pkgPath = join(PROJECT_ROOT, "package.json");
+  if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    console.log(`  Template version: ${pkg.version ?? "unknown"}`);
+    console.log();
+  }
+
+  // -- Step 2: Collect admin emails -------------------------------------------
+  console.log("  The admin dashboard restricts access based on email addresses.");
+  console.log("  Only users whose email is in the ADMIN_EMAILS list can access");
+  console.log("  the /admin routes.");
+  console.log();
+
+  const adminEmails = await input({
+    message: "Admin email addresses (comma-separated):",
+    validate: validateAdminEmails,
+  });
+
+  const emails = adminEmails.split(",").map((e) => e.trim()).filter(Boolean);
+
+  console.log();
+  console.log(`  Admin emails: ${emails.join(", ")}`);
+  console.log();
+
+  // -- Step 3: Summary --------------------------------------------------------
+  console.log("  Summary of changes:");
+  console.log("  -------------------");
+  console.log("  Files to create (backend):");
+  console.log("    + packages/backend/src/middleware/admin.ts");
+  console.log("    + packages/backend/src/routes/admin.ts");
+  console.log();
+  console.log("  Files to create (frontend):");
+  console.log("    + packages/frontend/src/pages/admin/Dashboard.tsx");
+  console.log("    + packages/frontend/src/pages/admin/UserDetail.tsx");
+  console.log("    + packages/frontend/src/components/admin/StatsCard.tsx");
+  console.log("    + packages/frontend/src/components/admin/UsersTable.tsx");
+  console.log("    + packages/frontend/src/hooks/useAdmin.ts");
+  console.log();
+  console.log("  Files to modify:");
+  console.log("    ~ packages/backend/src/index.ts (add admin routes)");
+  console.log("    ~ packages/backend/src/env.ts (add ADMIN_EMAILS)");
+  console.log("    ~ packages/frontend/src/router.tsx (add admin pages)");
+  console.log("    ~ .env.example / .env");
+  console.log();
+  console.log("  Environment variables:");
+  console.log(`    ADMIN_EMAILS=${emails.join(",")}`);
+  console.log();
+
+  // -- Step 4: Confirm --------------------------------------------------------
+  const proceed = await confirm({ message: "Proceed with installation?", default: true });
+  if (!proceed) {
+    console.log("\n  Installation cancelled.\n");
+    process.exit(0);
+  }
+
+  console.log();
+  console.log("  Installing...");
+  console.log();
+
+  // -- Step 5: Copy files -----------------------------------------------------
+  console.log("  Copying backend files...");
+  const backendFiles = [
+    { src: "backend/middleware/admin.ts", dest: "src/middleware/admin.ts" },
+    { src: "backend/routes/admin.ts", dest: "src/routes/admin.ts" },
+  ];
+  for (const f of backendFiles) {
+    copyFile(join(SAIL_DIR, "files", f.src), join(BACKEND_ROOT, f.dest), f.dest);
+  }
+
+  console.log();
+  console.log("  Copying frontend files...");
+  const frontendFiles = [
+    { src: "frontend/pages/admin/Dashboard.tsx", dest: "src/pages/admin/Dashboard.tsx" },
+    { src: "frontend/pages/admin/UserDetail.tsx", dest: "src/pages/admin/UserDetail.tsx" },
+    { src: "frontend/components/admin/StatsCard.tsx", dest: "src/components/admin/StatsCard.tsx" },
+    { src: "frontend/components/admin/UsersTable.tsx", dest: "src/components/admin/UsersTable.tsx" },
+    { src: "frontend/hooks/useAdmin.ts", dest: "src/hooks/useAdmin.ts" },
+  ];
+  for (const f of frontendFiles) {
+    copyFile(join(SAIL_DIR, "files", f.src), join(FRONTEND_ROOT, f.dest), f.dest);
+  }
+
+  // -- Step 6: Modify existing files ------------------------------------------
+  console.log();
+  console.log("  Modifying backend files...");
+
+  insertAtMarker(
+    join(BACKEND_ROOT, "src/index.ts"),
+    "// [SAIL_IMPORTS]",
+    'import adminRoutes from "./routes/admin.js";',
+  );
+  insertAtMarker(
+    join(BACKEND_ROOT, "src/index.ts"),
+    "// [SAIL_ROUTES]",
+    'app.use("/api/admin", adminRoutes);',
+  );
+  insertAtMarker(
+    join(BACKEND_ROOT, "src/env.ts"),
+    "// [SAIL_ENV_VARS]",
+    '  ADMIN_EMAILS: z.string().min(1, "ADMIN_EMAILS is required (comma-separated admin emails)"),',
+  );
+
+  console.log();
+  console.log("  Modifying frontend files...");
+
+  const routerPath = join(FRONTEND_ROOT, "src/router.tsx");
+  if (existsSync(routerPath)) {
+    let routerContent = readFileSync(routerPath, "utf-8");
+
+    // Add imports if not present
+    if (!routerContent.includes("AdminDashboard")) {
+      routerContent = routerContent.replace(
+        "export function AppRouter() {",
+        'import AdminDashboard from "./pages/admin/Dashboard";\nimport AdminUserDetail from "./pages/admin/UserDetail";\n\nexport function AppRouter() {',
+      );
+    }
+
+    // Add admin routes before the SAIL_ROUTES marker
+    if (!routerContent.includes('path="/admin"')) {
+      routerContent = routerContent.replace(
+        "{/* [SAIL_ROUTES] */}",
+        `<Route element={<ProtectedRoute />}>
+          <Route path="/admin" element={<AdminDashboard />} />
+          <Route path="/admin/users/:id" element={<AdminUserDetail />} />
+        </Route>
+        {/* [SAIL_ROUTES] */}`,
+      );
+    }
+
+    writeFileSync(routerPath, routerContent, "utf-8");
+    console.log("  Modified -> src/router.tsx");
+  }
+
+  // -- Step 7: Update env files -----------------------------------------------
+  console.log();
+  console.log("  Updating environment files...");
+
+  for (const envFile of [".env.example", ".env"]) {
+    const envPath = join(PROJECT_ROOT, envFile);
+    if (!existsSync(envPath)) continue;
+
+    let content = readFileSync(envPath, "utf-8");
+    if (!content.includes("ADMIN_EMAILS")) {
+      content += `\n# Admin Dashboard\nADMIN_EMAILS=${emails.join(",")}\n`;
+      writeFileSync(envPath, content, "utf-8");
+      console.log(`  Updated ${envFile}`);
+    }
+  }
+
+  // -- Step 8: Install dependencies -------------------------------------------
+  console.log();
+  console.log("  Installing dependencies...");
+  installDeps(manifest.dependencies.backend, "packages/backend");
+  installDeps(manifest.dependencies.frontend, "packages/frontend");
+
+  // -- Step 9: Next steps -----------------------------------------------------
+  console.log();
+  console.log("------------------------------------------------------------");
+  console.log("  Admin Dashboard installed successfully!");
+  console.log("------------------------------------------------------------");
+  console.log();
+  console.log("  Next steps:");
+  console.log();
+  console.log("  1. Start your dev server:");
+  console.log("       npm run dev");
+  console.log();
+  console.log("  2. Navigate to /admin in your browser");
+  console.log("     (you must be logged in with an admin email)");
+  console.log();
+  console.log("  3. To add/remove admin users, update ADMIN_EMAILS in .env:");
+  console.log(`       ADMIN_EMAILS=${emails.join(",")}`);
+  console.log();
+  console.log("  4. Optionally add an admin link to your Header component");
+  console.log("     for users with admin privileges.");
+  console.log();
+}
+
+main().catch((err) => {
+  console.error("Installation failed:", err);
+  process.exit(1);
+});