appflare 0.2.5 → 0.2.7

package/cli/commands/index.ts

@@ -159,3 +159,76 @@ export async function runMigrate(
 		);
 	}
 }
+
+export async function runAddAdmin(
+	configPath?: string,
+	options: {
+		name: string;
+		email: string;
+		password: string;
+		local?: boolean;
+		remote?: boolean;
+	} = { name: "", email: "", password: "" },
+): Promise<void> {
+	const loadedConfig = await loadConfig(configPath);
+	const npxCommand = process.platform === "win32" ? "npx.cmd" : "npx";
+
+	const selectedTargetCount = [
+		Boolean(options.local),
+		Boolean(options.remote),
+	].filter(Boolean).length;
+
+	if (selectedTargetCount > 1) {
+		throw new Error("Only one of --local or --remote can be set.");
+	}
+
+	const { hashPassword } = await import("better-auth/crypto");
+	const passwordHash = await hashPassword(options.password);
+
+	const userId = crypto.randomUUID();
+	const accountId = crypto.randomUUID();
+	const now = Date.now();
+
+	const safeName = options.name.replace(/'/g, "''");
+	const safeEmail = options.email.replace(/'/g, "''");
+
+	const sqlQuery = `
+		INSERT INTO users (id, name, email, email_verified, created_at, updated_at, role, banned)
+		VALUES ('${userId}', '${safeName}', '${safeEmail}', 1, ${now}, ${now}, 'admin', 0);
+		INSERT INTO accounts (id, account_id, provider_id, user_id, password, created_at, updated_at)
+		VALUES ('${accountId}', '${safeEmail}', 'credential', '${userId}', '${passwordHash}', ${now}, ${now});
+	`;
+
+	const databaseName = loadedConfig.config.database[0].databaseName;
+	const wranglerArgs = [
+		npxCommand,
+		"wrangler",
+		"d1",
+		"execute",
+		databaseName,
+		"--command",
+		sqlQuery,
+	];
+
+	if (options.local) {
+		wranglerArgs.push("--local");
+	} else if (options.remote) {
+		wranglerArgs.push("--remote");
+	}
+
+	const wranglerExecute = Bun.spawn(wranglerArgs, {
+		cwd: loadedConfig.configDir,
+		stdin: "inherit",
+		stdout: "inherit",
+		stderr: "inherit",
+	});
+
+	const wranglerExitCode = await wranglerExecute.exited;
+	if (wranglerExitCode !== 0) {
+		throw new Error(
+			`Failed to add admin user. wrangler d1 execute exited with code ${wranglerExitCode}`,
+		);
+	}
+
+	console.log("✅ Admin user " + options.email + " created successfully!");
+}

package/cli/generate.ts

@@ -6,6 +6,7 @@ import { generateDrizzleConfigSource } from "./templates/core/drizzle";
 import { generateHandlersArtifacts } from "./templates/core/handlers";
 import { generateServerSource } from "./templates/core/server";
 import { generateWranglerJson } from "./templates/core/wrangler";
+import { generateDashboardSource } from "./templates/dashboard/index";
 import { compileSchemaDsl } from "./schema-compiler";
 import type { LoadedAppflareConfig } from "./types";
 import { discoverHandlerOperations } from "./utils/handler-discovery";
@@ -85,6 +86,12 @@ export async function generateArtifacts(
 		: config.schema;
 	const drizzleConfigSource = generateDrizzleConfigSource(drizzleSchemaPaths);
 	const wranglerJson = generateWranglerJson(loadedConfig, discoveredHandlers);
+	const dashboardSource = generateDashboardSource(
+		schemaImport,
+		discoveredSchema,
+		discoveredHandlers,
+	);
+	const dashboardPath = resolve(outDirAbs, "admin.routes.ts");
 	const handlerWriteOperations = handlerArtifacts.map((artifact) => {
 		return Bun.write(
 			resolve(outDirAbs, artifact.relativePath),
@@ -107,6 +114,7 @@ export async function generateArtifacts(
 		Bun.write(authSchemaPath, ""),
 		Bun.write(drizzleConfigPath, drizzleConfigSource),
 		Bun.write(wranglerPath, `${JSON.stringify(wranglerJson, null, 2)}\n`),
+		Bun.write(dashboardPath, dashboardSource),
 	]);
 
 	const authConfigPathFromConfigDir = relative(

package/cli/index.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env bun
 import { Command } from "commander";
-import { runBuild, runDev, runMigrate } from "./commands/index";
+import { runBuild, runDev, runMigrate, runAddAdmin } from "./commands/index";
 
 const program = new Command();
 
@@ -74,4 +74,35 @@ program
 		},
 	);
 
+program
+	.command("add-admin")
+	.description("Add an admin user to the database")
+	.requiredOption("-n, --name <name>", "Admin's display name")
+	.requiredOption("-e, --email <email>", "Admin's email address")
+	.requiredOption("-p, --password <password>", "Admin's password")
+	.option(
+		"-c, --config <path>",
+		"Path to appflare.config.ts",
+		"appflare.config.ts",
+	)
+	.option(
+		"--local",
+		"Execute command against a local DB for use with wrangler dev",
+		false,
+	)
+	.option(
+		"--remote",
+		"Execute command against a remote DB for use with wrangler dev --remote",
+		false,
+	)
+	.action(async (options: any) => {
+		await runAddAdmin(options.config, {
+			name: options.name,
+			email: options.email,
+			password: options.password,
+			local: options.local,
+			remote: options.remote,
+		});
+	});
+
 await program.parseAsync(process.argv);

package/cli/templates/auth/config.ts

@@ -37,7 +37,6 @@ export const createAuth = (
 							db,
 							options: {
 								usePlural: true,
-								debugLogs: true,
 							},
 						}
 					: undefined,
@@ -51,7 +50,6 @@ export const createAuth = (
 					database: drizzleAdapter({} as D1Database, {
 						provider: "sqlite",
 						usePlural: true,
-						debugLogs: true,
 					}),
 			  }),
 	});

package/cli/templates/core/handlers.route.ts

@@ -19,5 +19,6 @@ export function generateHandlersRoute(
 };
 registerGeneratedHandlers(app, generatedHandlerOptions);
 registerGeneratedStorageRoutes(app, generatedHandlerOptions);
+registerAdminDashboard(app, generatedHandlerOptions);
 `;
 }

package/cli/templates/core/imports.ts

@@ -1,6 +1,7 @@
 export function generateImports(): string {
 	return `import { createAuth } from "./auth.config";
 import { AppflareRealtimeDurableObject, executeCronTriggers, executeScheduledBatch, registerGeneratedHandlers, registerGeneratedStorageRoutes } from "./handlers.routes";
+import { registerAdminDashboard } from "./admin.routes";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import type { D1Database, IncomingRequestCfProperties, KVNamespace } from "@cloudflare/workers-types";

package/cli/templates/dashboard/builders/functions/execute-handler.ts

@@ -0,0 +1,124 @@
+import { DiscoveredHandlerOperation } from "../../../../utils/handler-discovery";
+
+export function buildExecutionLogic(h: DiscoveredHandlerOperation): string {
+	return `
+		const body = await c.req.json();
+		let args = {};
+		let customHeaders: Record<string, string> = {};
+		let token = body.token || "";
+
+		try {
+			args = typeof body.args === 'string' && body.args.trim() ? JSON.parse(body.args) : body.args || {};
+		} catch (e) {}
+
+		try {
+			if (body.headers && typeof body.headers === 'string' && body.headers.trim()) {
+				customHeaders = JSON.parse(body.headers);
+			} else if (body.headers && typeof body.headers === 'object') {
+				customHeaders = body.headers;
+			}
+		} catch (e) {}
+
+		try {
+			// We'll perform a local fetch to the actual API endpoint for maximum compatibility
+			const protocol = c.req.raw.url.startsWith('https') ? 'https' : 'http';
+			const host = c.req.header('host');
+			const baseUrl = body.baseUrl || c.env?.APPFLARE_API_BASE || \`\${protocol}://\${host}\`;
+			const isQuery = ${h.kind === "query"};
+			const method = isQuery ? "GET" : "POST";
+
+			let pathWithQuery = \`${h.routePath}\`;
+			if (isQuery && args && typeof args === "object") {
+				const params = new URLSearchParams();
+				for (const [key, value] of Object.entries(args)) {
+					if (value !== undefined && value !== null) {
+						if (Array.isArray(value)) {
+							value.forEach(v => params.append(key, typeof v === "object" ? JSON.stringify(v) : String(v)));
+						} else if (typeof value === "object") {
+							params.append(key, JSON.stringify(value));
+						} else {
+							params.append(key, String(value));
+						}
+					}
+				}
+				const qs = params.toString();
+				if (qs) {
+					pathWithQuery += \`?\${qs}\`;
+				}
+			}
+
+			const targetUrl = \`\${baseUrl}\${pathWithQuery}\`;
+			const internalUrl = \`https://internal\${pathWithQuery}\`;
+			
+			const fetchHeaders: Record<string, string> = {
+				'Content-Type': 'application/json',
+				'Cookie': c.req.header('cookie') || '',
+				...customHeaders
+			};
+
+			if (token) {
+				fetchHeaders['Authorization'] = \`Bearer \${token}\`;
+			}
+
+			const requestInit: RequestInit = {
+				method,
+				headers: fetchHeaders,
+				body: method === "POST" ? JSON.stringify(args) : undefined
+			};
+
+			let res: Response;
+			let transport = "service-binding";
+			try {
+				if (!c.env?.INTERNAL_WORKER || typeof c.env.INTERNAL_WORKER.fetch !== "function") {
+					throw new Error("INTERNAL_WORKER binding not configured");
+				}
+				res = await c.env.INTERNAL_WORKER.fetch(internalUrl, requestInit);
+			} catch (bindingErr) {
+				transport = "url-fetch";
+				res = await fetch(targetUrl, requestInit);
+			}
+
+			console.log('Fetch transport:', transport, 'target:', transport === 'service-binding' ? internalUrl : targetUrl, 'status:', res.status, res.statusText);
+			const contentType = res.headers.get('content-type') || '';
+			const rawBody = await res.text();
+			let parsedBody: any = rawBody;
+			if (rawBody && contentType.includes('application/json')) {
+				try {
+					parsedBody = JSON.parse(rawBody);
+				} catch (parseErr: any) {
+					parsedBody = {
+						parseError: parseErr?.message || 'Failed to parse JSON',
+						body: rawBody
+					};
+				}
+			}
+
+			const result = {
+				transport,
+				method,
+				internalUrl,
+				targetUrl,
+				status: res.status,
+				statusText: res.statusText,
+				headers: Object.fromEntries(res.headers),
+				body: parsedBody
+			};
+			
+			return c.html(\`
+				<div class="p-5 font-mono text-sm h-full overflow-auto">
+					<pre class="text-success"><code class="language-json">\${JSON.stringify(result, null, 2)\}</code></pre>
+				</div>
+				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+				<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+				<script>hljs.highlightAll();</script>
+			\`);
+		} catch (err: any) {
+			return c.html(\`
+				<div class="p-5 font-mono text-sm h-full overflow-auto text-error bg-error/5">
+					<p class="font-bold mb-2">Execution Error:</p>
+					<pre>\${err.message}\\n\${err.stack}</pre>
+				</div>
+			\`);
+		}
+	`;
+}

package/cli/templates/dashboard/builders/functions/index.ts

@@ -0,0 +1,22 @@
+import { DiscoveredHandlerOperation } from "../../../../utils/handler-discovery";
+import { buildFunctionPage } from "./render-page";
+import { buildExecutionLogic } from "./execute-handler";
+
+export function buildFunctionRoutes(
+	handlers: DiscoveredHandlerOperation[],
+): string {
+	const routes = handlers.map((h) => {
+		if (h.kind !== "query" && h.kind !== "mutation") return "";
+
+		return `
+	adminApp.get('/functions${h.routePath}', (c) => {
+        ${buildFunctionPage(h)}
+	});
+
+	adminApp.post('/functions/execute${h.routePath}', async (c) => {
+        ${buildExecutionLogic(h)}
+	});`;
+	});
+
+	return routes.join("\n");
+}

package/cli/templates/dashboard/builders/functions/render-page/header.ts

@@ -0,0 +1,20 @@
+import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+
+export function renderHeader(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-3">
+				<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
+					<iconify-icon icon="${h.kind === "query" ? "solar:reorder-bold-duotone" : "solar:bolt-bold-duotone"}" width="24" height="24" class="text-primary"></iconify-icon>
+				</div>
+				<div>
+					<h1 class="text-xl font-bold tracking-tight">${h.exportName}</h1>
+					<p class="text-xs opacity-50 font-medium uppercase tracking-wider">${h.kind}</p>
+				</div>
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="badge badge-sm badge-ghost font-mono opacity-50 px-2 py-3">/api${h.routePath}</span>
+			</div>
+		</div>
+	`;
+}

package/cli/templates/dashboard/builders/functions/render-page/index.ts

@@ -0,0 +1,33 @@
+import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+import { renderHeader } from "./header";
+import { renderRequestPanel } from "./request-panel";
+import { renderResultPanel } from "./result-panel";
+import { renderScripts } from "./scripts";
+
+export function buildFunctionPage(h: DiscoveredHandlerOperation): string {
+	return `
+				const content = html\`
+				<div class="flex flex-col gap-6 max-w-5xl mx-auto"  id="main-content">
+					${renderHeader(h)}
+
+					<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+						<!-- Request Panel -->
+						${renderRequestPanel(h)}
+
+						<!-- Result Panel -->
+						${renderResultPanel()}
+					</div>
+				</div>
+
+				${renderScripts()}
+			\`;
+
+		if (c.req.header('hx-request')) {
+			return c.html(content);
+		}
+
+		return c.html(Layout({
+			title: "${h.exportName} - Functions",
+			children: content
+		}));`;
+}

package/cli/templates/dashboard/builders/functions/render-page/request-panel.ts

@@ -0,0 +1,67 @@
+import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+
+export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden">
+			<div class="px-5 py-4 border-b border-base-200 bg-base-200/20 flex items-center justify-between">
+				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request Parameters</h3>
+				<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
+			</div>
+			<div class="p-5">
+				<form hx-post="/admin/functions/execute${h.routePath}" hx-target="#execution-result" hx-ext="json-enc" class="flex flex-col gap-5">
+					<div class="form-control">
+						<label class="label pt-0">
+							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments (JSON)</span>
+						</label>
+						<div class="relative group">
+							<textarea
+								name="args"
+								class="textarea textarea-bordered font-mono text-sm w-full min-h-[160px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
+								placeholder='{ }'
+							>{}</textarea>
+							<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
+								<iconify-icon icon="solar:code-file-linear" width="18" height="18"></iconify-icon>
+							</div>
+						</div>
+						<label class="label">
+							<span class="label-text-alt opacity-40 italic">Provide the JSON arguments for this ${h.kind}</span>
+						</label>
+					</div>
+
+					<div class="form-control">
+						<label class="label pt-0">
+							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Bearer Token (Optional)</span>
+						</label>
+						<div class="relative group">
+							<input type="text" name="token" class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200" placeholder="e.g. eyJhbGciOi..." />
+							<div class="absolute right-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
+								<iconify-icon icon="solar:key-linear" width="16" height="16"></iconify-icon>
+							</div>
+						</div>
+					</div>
+
+					<div class="form-control">
+						<label class="label pt-0">
+							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers (JSON)</span>
+						</label>
+						<div class="relative group">
+							<textarea
+								name="headers"
+								class="textarea textarea-bordered font-mono text-sm w-full min-h-[80px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
+								placeholder='{ "x-custom-header": "value" }'
+							></textarea>
+							<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
+								<iconify-icon icon="solar:list-linear" width="18" height="18"></iconify-icon>
+							</div>
+						</div>
+					</div>
+
+					<button type="submit" class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold">
+						<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
+						Run ${h.kind}
+					</button>
+				</form>
+			</div>
+		</div>
+	`;
+}

package/cli/templates/dashboard/builders/functions/render-page/result-panel.ts

@@ -0,0 +1,19 @@
+export function renderResultPanel(): string {
+	return `
+		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col">
+			<div class="px-5 py-4 border-b border-base-200 bg-base-200/20 flex items-center justify-between">
+				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Result</h3>
+				<div class="flex items-center gap-2">
+					<div class="w-1.5 h-1.5 rounded-full bg-success animate-pulse opacity-0" id="execution-indicator"></div>
+					<iconify-icon icon="solar:box-minimalistic-linear" width="16" height="16" class="opacity-30"></iconify-icon>
+				</div>
+			</div>
+			<div class="flex-1 p-0 relative min-h-[300px] bg-neutral/5" id="execution-result">
+				<div class="absolute inset-0 flex flex-col items-center justify-center opacity-20 pointer-events-none p-10 text-center">
+					<iconify-icon icon="solar:course-down-bold-duotone" width="48" height="48" class="mb-3"></iconify-icon>
+					<p class="text-xs font-semibold uppercase tracking-widest">Execute To See Output</p>
+				</div>
+			</div>
+		</div>
+	`;
+}

package/cli/templates/dashboard/builders/functions/render-page/scripts.ts

@@ -0,0 +1,17 @@
+export function renderScripts(): string {
+	return `
+		<script>
+			document.body.addEventListener('htmx:beforeRequest', function(e) {
+				if (e.detail.target.id === 'execution-result') {
+					document.getElementById('execution-indicator')?.classList.remove('opacity-0');
+					e.detail.target.innerHTML = '<div class="absolute inset-0 flex items-center justify-center bg-base-100/50 backdrop-blur-[2px] z-10"><span class="loading loading-ring loading-md text-primary"></span></div>';
+				}
+			});
+			document.body.addEventListener('htmx:afterRequest', function(e) {
+				if (e.detail.target.id === 'execution-result') {
+					document.getElementById('execution-indicator')?.classList.add('opacity-0');
+				}
+			});
+		</script>
+	`;
+}

package/cli/templates/dashboard/builders/navigation.ts

@@ -0,0 +1,122 @@
+import { DiscoveredSchema } from "../../../utils/schema-discovery";
+import { DiscoveredHandlerOperation } from "../../../utils/handler-discovery";
+import { TableInfo } from "../types";
+
+export function collectTablesInfo(schema: DiscoveredSchema): TableInfo[] {
+	return schema.tables.map((table) => ({
+		exportName: table.exportName,
+		tableName: table.tableName,
+		columns: table.columns.map((column) => column.name),
+	}));
+}
+
+/** Generates the right-pane list items: users entry first, then schema tables */
+export function buildSidebarTableList(tablesInfo: TableInfo[]): string {
+	const tableItems = tablesInfo
+		.map(
+			(table) =>
+				`<li data-name="${table.tableName}">
+\t\t\t\t\t\t<a href="/admin/table/${table.exportName}" hx-get="/admin/table/${table.exportName}" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link flex items-center gap-2 px-3 py-2 text-sm rounded-lg w-full">
+\t\t\t\t\t\t\t<iconify-icon icon="mdi:table" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon>
+\t\t\t\t\t\t\t<span class="truncate">${table.tableName}</span>
+\t\t\t\t\t\t</a>
+\t\t\t\t\t</li>`,
+		)
+		.join("\n\t\t\t\t\t");
+
+	return `<li data-name="users">
+\t\t\t\t\t\t<a href="/admin/users" hx-get="/admin/users" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link flex items-center gap-2 px-3 py-2 text-sm rounded-lg w-full">
+\t\t\t\t\t\t\t<iconify-icon icon="mdi:account-group" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon>
+\t\t\t\t\t\t\t<span class="truncate">users</span>
+\t\t\t\t\t\t</a>
+\t\t\t\t\t</li>
+\t\t\t\t\t${tableItems}`;
+}
+
+export function buildSidebarFunctionList(
+	handlers: DiscoveredHandlerOperation[],
+): string {
+	const queries = handlers.filter((h) => h.kind === "query");
+	const mutations = handlers.filter((h) => h.kind === "mutation");
+
+	const queryItems = queries
+		.map(
+			(h) => `
+		<li data-name="${h.exportName}">
+			<a href="/admin/functions${h.routePath}" hx-get="/admin/functions${h.routePath}" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link flex items-center gap-2 px-3 py-2 text-sm rounded-lg w-full">
+				<iconify-icon icon="solar:reorder-linear" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon>
+				<span class="truncate">${h.exportName}</span>
+			</a>
+		</li>`,
+		)
+		.join("");
+
+	const mutationItems = mutations
+		.map(
+			(h) => `
+		<li data-name="${h.exportName}">
+			<a href="/admin/functions${h.routePath}" hx-get="/admin/functions${h.routePath}" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link flex items-center gap-2 px-3 py-2 text-sm rounded-lg w-full">
+				<iconify-icon icon="solar:bolt-linear" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon>
+				<span class="truncate">${h.exportName}</span>
+			</a>
+		</li>`,
+		)
+		.join("");
+
+	return `
+		<div id="pane-functions" class="flex flex-col h-full hidden">
+			<div class="px-3 pt-5 pb-3">
+				<p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Functions</p>
+				<div class="relative">
+					<iconify-icon icon="solar:magnifer-linear" width="13" height="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-35 pointer-events-none"></iconify-icon>
+					<input
+						type="text"
+						id="function-search"
+						placeholder="Search functions..."
+						class="input input-sm border border-base-200 bg-base-200/50 focus:bg-base-100 focus:border-primary focus:outline-none w-full pl-7 text-xs rounded-lg h-8"
+						onkeyup="filterFunctions(this.value)"
+					/>
+				</div>
+			</div>
+			<nav class="flex-1 overflow-y-auto px-2 pb-4">
+				${
+					queries.length > 0
+						? `<p class="text-[9px] font-bold uppercase tracking-wider opacity-25 mt-4 mb-1 px-2">Queries</p>
+				<ul class="flex flex-col gap-0.5">${queryItems}</ul>`
+						: ""
+				}
+				${
+					mutations.length > 0
+						? `<p class="text-[9px] font-bold uppercase tracking-wider opacity-25 mt-4 mb-1 px-2">Mutations</p>
+				<ul class="flex flex-col gap-0.5">${mutationItems}</ul>`
+						: ""
+				}
+			</nav>
+		</div>
+	`;
+}
+
+export function buildDashboardCards(tablesInfo: TableInfo[]): string {
+	return tablesInfo
+		.map((table) =>
+			`
+				<a
+					href="/admin/table/${table.exportName}"
+					class="card bg-base-100 border border-base-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer group"
+				>
+					<div class="card-body p-5">
+						<div class="flex items-center gap-3">
+							<div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
+								<iconify-icon icon="mdi:table" width="20" height="20" class="text-primary"></iconify-icon>
+							</div>
+							<div>
+								<h2 class="font-semibold text-sm capitalize group-hover:text-primary transition-colors">${table.tableName}</h2>
+								<p class="text-xs opacity-40 mt-0.5">Manage records</p>
+							</div>
+						</div>
+					</div>
+				</a>
+			`.replace(/\n/g, "\\n"),
+		)
+		.join("");
+}

package/cli/templates/dashboard/builders/storage/index.ts

@@ -0,0 +1,13 @@
+import { buildStorageRuntimeHelpers } from "./runtime/helpers";
+import { buildStoragePageRuntime } from "./runtime/storage-page";
+import { buildStorageRouteHandlers } from "./routes";
+
+export function buildStorageRoutes(): string {
+	return `
+	${buildStorageRuntimeHelpers()}
+
+	${buildStoragePageRuntime()}
+
+	${buildStorageRouteHandlers()}
+	`;
+}

package/cli/templates/dashboard/builders/storage/routes/create-directory-route.ts

@@ -0,0 +1,29 @@
+export function buildStorageCreateDirectoryRoute(): string {
+	return `
+	adminApp.post('/storage/directory', async (c) => {
+		const bucket = getStorageBucket(c);
+		if (!bucket) return c.text("Storage not configured", 400);
+
+		const body = await c.req.parseBody();
+		const prefix = normalizePrefix((body['prefix'] as string) || '');
+		const directory = ((body['directory'] as string) || '').trim();
+
+		if (directory) {
+			const normalizedDirectory = directory
+				.split('/')
+				.map((part) => part.trim())
+				.filter(Boolean)
+				.join('/');
+
+			if (normalizedDirectory) {
+				const markerKey = prefix + normalizedDirectory + '/.keep';
+				await bucket.put(markerKey, '', {
+					httpMetadata: { contentType: 'text/plain; charset=utf-8' },
+				});
+			}
+		}
+
+		return c.redirect(prefixToStoragePath(prefix));
+	});
+	`;
+}