appflare 0.2.25 → 0.2.27

package/cli/templates/dashboard/builders/storage/runtime/helpers.ts

@@ -1,72 +1,72 @@
-export function buildStorageRuntimeHelpers(): string {
-	return `
-	const getStorageBucket = (c: any): R2Bucket | null => {
-		const r2Binding = (options as any).r2Binding;
-		if (!r2Binding || !c.env[r2Binding]) return null;
-		return c.env[r2Binding] as R2Bucket;
-	};
-
-	const renderStoragePage = (c: any, content: any) => {
-		return c.req.header('hx-request')
-			? c.html(content)
-			: c.html(Layout({ title: "Storage - Admin Dashboard", children: content }));
-	};
-
-	const normalizePrefix = (value: string) => {
-		if (!value) return '';
-		const normalized = value
-			.split('/')
-			.map((part) => part.trim())
-			.filter(Boolean)
-			.join('/');
-		return normalized ? normalized + '/' : '';
-	};
-
-	const decodeStoragePathSegment = (segment: string) => {
-		try {
-			return decodeURIComponent(segment);
-		} catch {
-			return segment;
-		}
-	};
-
-	const storagePathToPrefix = (path: string) => {
-		const raw = path.replace(/^\\/admin\\/storage\\/?/, '');
-		if (!raw) return '';
-		const decoded = raw
-			.split('/')
-			.filter(Boolean)
-			.map(decodeStoragePathSegment)
-			.join('/');
-		return normalizePrefix(decoded);
-	};
-
-	const prefixToStoragePath = (prefix: string) => {
-		const cleanPrefix = normalizePrefix(prefix);
-		if (!cleanPrefix) return '/admin/storage';
-		const encoded = cleanPrefix
-			.split('/')
-			.filter(Boolean)
-			.map((part) => encodeURIComponent(part))
-			.join('/');
-		return '/admin/storage/' + encoded;
-	};
-
-	const buildStorageNotConfiguredContent = () => html\`
-		<div class="flex flex-col items-center justify-center h-full gap-4 text-center">
-			<iconify-icon icon="solar:danger-triangle-bold-duotone" width="64" height="64" class="text-warning opacity-50"></iconify-icon>
-			<div>
-				<h3 class="text-lg font-semibold">Storage Not Configured</h3>
-				<p class="text-sm opacity-70 max-w-md mt-2">
-					R2 binding is not configured. Configure r2 in appflare.config.ts and regenerate artifacts to enable the Storage Manager.
-				</p>
-			</div>
-		</div>
-	\`;
-
-	const getParentPrefix = (prefix: string) => {
-		const parts = prefix.split('/').filter(Boolean);
-		return parts.slice(0, -1).join('/') + (parts.length > 1 ? '/' : '');
-	};
-	`;
-}
+export function buildStorageRuntimeHelpers(): string {
+	return `
+	const getStorageBucket = (c: any): R2Bucket | null => {
+		const r2Binding = (options as any).r2Binding;
+		if (!r2Binding || !c.env[r2Binding]) return null;
+		return c.env[r2Binding] as R2Bucket;
+	};
+
+	const renderStoragePage = (c: any, content: any) => {
+		return c.req.header('hx-request')
+			? c.html(content)
+			: c.html(Layout({ title: "Storage - Admin Dashboard", children: content }));
+	};
+
+	const normalizePrefix = (value: string) => {
+		if (!value) return '';
+		const normalized = value
+			.split('/')
+			.map((part) => part.trim())
+			.filter(Boolean)
+			.join('/');
+		return normalized ? normalized + '/' : '';
+	};
+
+	const decodeStoragePathSegment = (segment: string) => {
+		try {
+			return decodeURIComponent(segment);
+		} catch {
+			return segment;
+		}
+	};
+
+	const storagePathToPrefix = (path: string) => {
+		const raw = path.replace(/^\\/admin\\/storage\\/?/, '');
+		if (!raw) return '';
+		const decoded = raw
+			.split('/')
+			.filter(Boolean)
+			.map(decodeStoragePathSegment)
+			.join('/');
+		return normalizePrefix(decoded);
+	};
+
+	const prefixToStoragePath = (prefix: string) => {
+		const cleanPrefix = normalizePrefix(prefix);
+		if (!cleanPrefix) return '/admin/storage';
+		const encoded = cleanPrefix
+			.split('/')
+			.filter(Boolean)
+			.map((part) => encodeURIComponent(part))
+			.join('/');
+		return '/admin/storage/' + encoded;
+	};
+
+	const buildStorageNotConfiguredContent = () => html\`
+		<div class="flex flex-col items-center justify-center h-full gap-4 text-center">
+			<iconify-icon icon="solar:danger-triangle-bold-duotone" width="64" height="64" class="text-warning opacity-50"></iconify-icon>
+			<div>
+				<h3 class="text-lg font-semibold">Storage Not Configured</h3>
+				<p class="text-sm opacity-70 max-w-md mt-2">
+					R2 binding is not configured. Configure r2 in appflare.config.ts and regenerate artifacts to enable the Storage Manager.
+				</p>
+			</div>
+		</div>
+	\`;
+
+	const getParentPrefix = (prefix: string) => {
+		const parts = prefix.split('/').filter(Boolean);
+		return parts.slice(0, -1).join('/') + (parts.length > 1 ? '/' : '');
+	};
+	`;
+}

package/cli/templates/dashboard/builders/storage/runtime/storage-page.ts

@@ -1,130 +1,130 @@
-export function buildStoragePageRuntime(): string {
-	return `
-	const buildStorageListingContent = (listed: any, prefix: string) => {
-		const parts = prefix.split('/').filter(Boolean);
-		const breadcrumbs: any[] = [];
-		let currentPath = '';
-		const visibleObjects = listed.objects.filter((obj: any) => !obj.key.endsWith('/.keep'));
-
-		breadcrumbs.push(html\`<li><a href="/admin/storage" hx-get="/admin/storage" hx-target="#main-content" hx-push-url="true">Root</a></li>\`);
-		for (const part of parts) {
-			currentPath += part + '/';
-			const partPath = prefixToStoragePath(currentPath);
-			breadcrumbs.push(html\`<li><a href="\${partPath}" hx-get="\${partPath}" hx-target="#main-content" hx-push-url="true">\${part}</a></li>\`);
-		}
-
-		const formatBytes = (bytes: number) => {
-			if (bytes === 0) return '0 B';
-			const k = 1024;
-			const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-			const i = Math.floor(Math.log(bytes) / Math.log(k));
-			return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-		};
-
-		return html\`
-			<div id="main-content" class="h-full flex flex-col">
-				<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-5 gap-3">
-					<div class="text-sm breadcrumbs p-0">
-						<ul>\${breadcrumbs}</ul>
-					</div>
-					<div class="flex items-center gap-2">
-						<form hx-post="/admin/storage/upload" hx-encoding="multipart/form-data" hx-target="#main-content" hx-swap="outerHTML" class="flex items-center gap-2">
-							<input type="hidden" name="prefix" value="\${prefix}" />
-							<input type="file" name="file" id="file-upload" class="hidden" onchange="this.form.requestSubmit()" />
-							<label for="file-upload" class="btn btn-primary btn-sm gap-1 cursor-pointer">
-								<iconify-icon icon="solar:upload-minimalistic-bold-duotone" width="16" height="16"></iconify-icon>
-								Upload File
-							</label>
-						</form>
-						<form hx-post="/admin/storage/directory" hx-target="#main-content" hx-swap="outerHTML" class="flex items-center gap-2">
-							<input type="hidden" name="prefix" value="\${prefix}" />
-							<input type="text" name="directory" placeholder="New folder" class="input input-sm input-bordered w-32 md:w-44" required />
-							<button type="submit" class="btn btn-outline btn-sm gap-1">
-								<iconify-icon icon="solar:add-folder-bold-duotone" width="16" height="16"></iconify-icon>
-								Create
-							</button>
-						</form>
-					</div>
-				</div>
-
-				<div class="bg-base-100 flex-1 rounded-xl border border-base-200 overflow-hidden flex flex-col pt-1">
-					<div class="overflow-x-auto">
-						<table class="table table-sm md:table-md w-full">
-							<thead>
-								<tr class="border-b border-base-200">
-									<th>Name</th>
-									<th class="w-32">Size</th>
-									<th class="w-48 text-right">Modified</th>
-									<th class="w-32 text-right">Actions</th>
-								</tr>
-							</thead>
-							<tbody>
-								\${prefix ? html\`
-									<tr class="hover:bg-base-200/30 transition-colors">
-										<td colspan="4">
-											<a href="\${prefixToStoragePath(getParentPrefix(prefix))}" hx-get="\${prefixToStoragePath(getParentPrefix(prefix))}" hx-target="#main-content" hx-push-url="true" class="flex items-center gap-2 text-sm">
-												<iconify-icon icon="solar:folder-bold-duotone" width="20" height="20" class="text-primary opacity-60"></iconify-icon>
-												..
-											</a>
-										</td>
-									</tr>
-								\` : ''}
-								\${listed.delimitedPrefixes.map((dir: string) => html\`
-									<tr class="hover:bg-base-200/30 transition-colors">
-										<td>
-											<a href="\${prefixToStoragePath(dir)}" hx-get="\${prefixToStoragePath(dir)}" hx-target="#main-content" hx-push-url="true" class="flex items-center gap-2 text-sm font-medium" data-storage-dir-link>
-												<iconify-icon icon="solar:folder-bold-duotone" width="20" height="20" class="text-primary"></iconify-icon>
-												\${dir.slice(prefix.length, -1)}
-											</a>
-										</td>
-										<td class="text-xs opacity-50">-</td>
-										<td class="text-xs opacity-50 text-right">-</td>
-										<td></td>
-									</tr>
-								\`)}
-								\${visibleObjects.map((obj: any) => html\`
-									<tr class="hover:bg-base-200/30 transition-colors group">
-										<td>
-											<div class="flex items-center gap-2">
-												\${obj.key.match(/\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i)
-													? html\`<div class="w-8 h-8 rounded shrink-0 bg-base-200 overflow-hidden object-cover bg-center" style="background-image: url('/admin/storage/preview?key=\${encodeURIComponent(obj.key)}')"></div>\`
-													: html\`<iconify-icon icon="solar:document-bold-duotone" width="20" height="20" class="text-base-content opacity-40"></iconify-icon>\`}
-												<span class="text-sm truncate max-w-[200px] md:max-w-md" title="\${obj.key.slice(prefix.length)}">\${obj.key.slice(prefix.length)}</span>
-											</div>
-										</td>
-										<td class="text-xs opacity-60">\${formatBytes(obj.size)}</td>
-										<td class="text-xs opacity-60 text-right">\${new Date(obj.uploaded).toLocaleString()}</td>
-										<td class="text-right">
-											<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-												<a href="/admin/storage/preview?key=\${encodeURIComponent(obj.key)}" target="_blank" class="btn btn-ghost btn-xs btn-square" title="Preview">
-													<iconify-icon icon="solar:eye-linear" width="16" height="16"></iconify-icon>
-												</a>
-												<a href="/admin/storage/download?key=\${encodeURIComponent(obj.key)}" target="_blank" class="btn btn-ghost btn-xs btn-square" title="Download">
-													<iconify-icon icon="solar:download-linear" width="16" height="16"></iconify-icon>
-												</a>
-												<button hx-delete="/admin/storage/delete?key=\${encodeURIComponent(obj.key)}&prefix=\${encodeURIComponent(prefix)}" hx-target="#main-content" hx-swap="outerHTML" hx-confirm="Are you sure you want to delete this file?" class="btn btn-ghost btn-xs btn-square text-error" title="Delete">
-													<iconify-icon icon="solar:trash-bin-trash-linear" width="16" height="16"></iconify-icon>
-												</button>
-											</div>
-										</td>
-									</tr>
-								\`)}
-								\${listed.delimitedPrefixes.length === 0 && visibleObjects.length === 0 ? html\`
-									<tr>
-										<td colspan="4" class="text-center py-12">
-											<div class="flex flex-col items-center gap-2 opacity-40">
-												<iconify-icon icon="solar:folder-open-bold-duotone" width="48" height="48"></iconify-icon>
-												<p class="text-sm">This folder is empty</p>
-											</div>
-										</td>
-									</tr>
-								\` : ''}
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		\`;
-	};
-	`;
-}
+export function buildStoragePageRuntime(): string {
+	return `
+	const buildStorageListingContent = (listed: any, prefix: string) => {
+		const parts = prefix.split('/').filter(Boolean);
+		const breadcrumbs: any[] = [];
+		let currentPath = '';
+		const visibleObjects = listed.objects.filter((obj: any) => !obj.key.endsWith('/.keep'));
+
+		breadcrumbs.push(html\`<li><a href="/admin/storage" hx-get="/admin/storage" hx-target="#main-content" hx-push-url="true">Root</a></li>\`);
+		for (const part of parts) {
+			currentPath += part + '/';
+			const partPath = prefixToStoragePath(currentPath);
+			breadcrumbs.push(html\`<li><a href="\${partPath}" hx-get="\${partPath}" hx-target="#main-content" hx-push-url="true">\${part}</a></li>\`);
+		}
+
+		const formatBytes = (bytes: number) => {
+			if (bytes === 0) return '0 B';
+			const k = 1024;
+			const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+			return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+		};
+
+		return html\`
+			<div id="main-content" class="h-full flex flex-col">
+				<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-5 gap-3">
+					<div class="text-sm breadcrumbs p-0">
+						<ul>\${breadcrumbs}</ul>
+					</div>
+					<div class="flex items-center gap-2">
+						<form hx-post="/admin/storage/upload" hx-encoding="multipart/form-data" hx-target="#main-content" hx-swap="outerHTML" class="flex items-center gap-2">
+							<input type="hidden" name="prefix" value="\${prefix}" />
+							<input type="file" name="file" id="file-upload" class="hidden" onchange="this.form.requestSubmit()" />
+							<label for="file-upload" class="btn btn-primary btn-sm gap-1 cursor-pointer">
+								<iconify-icon icon="solar:upload-minimalistic-bold-duotone" width="16" height="16"></iconify-icon>
+								Upload File
+							</label>
+						</form>
+						<form hx-post="/admin/storage/directory" hx-target="#main-content" hx-swap="outerHTML" class="flex items-center gap-2">
+							<input type="hidden" name="prefix" value="\${prefix}" />
+							<input type="text" name="directory" placeholder="New folder" class="input input-sm input-bordered w-32 md:w-44" required />
+							<button type="submit" class="btn btn-outline btn-sm gap-1">
+								<iconify-icon icon="solar:add-folder-bold-duotone" width="16" height="16"></iconify-icon>
+								Create
+							</button>
+						</form>
+					</div>
+				</div>
+
+				<div class="bg-base-100 flex-1 rounded-xl border border-base-200 overflow-hidden flex flex-col pt-1">
+					<div class="overflow-x-auto">
+						<table class="table table-sm md:table-md w-full">
+							<thead>
+								<tr class="border-b border-base-200">
+									<th>Name</th>
+									<th class="w-32">Size</th>
+									<th class="w-48 text-right">Modified</th>
+									<th class="w-32 text-right">Actions</th>
+								</tr>
+							</thead>
+							<tbody>
+								\${prefix ? html\`
+									<tr class="hover:bg-base-200/30 transition-colors">
+										<td colspan="4">
+											<a href="\${prefixToStoragePath(getParentPrefix(prefix))}" hx-get="\${prefixToStoragePath(getParentPrefix(prefix))}" hx-target="#main-content" hx-push-url="true" class="flex items-center gap-2 text-sm">
+												<iconify-icon icon="solar:folder-bold-duotone" width="20" height="20" class="text-primary opacity-60"></iconify-icon>
+												..
+											</a>
+										</td>
+									</tr>
+								\` : ''}
+								\${listed.delimitedPrefixes.map((dir: string) => html\`
+									<tr class="hover:bg-base-200/30 transition-colors">
+										<td>
+											<a href="\${prefixToStoragePath(dir)}" hx-get="\${prefixToStoragePath(dir)}" hx-target="#main-content" hx-push-url="true" class="flex items-center gap-2 text-sm font-medium" data-storage-dir-link>
+												<iconify-icon icon="solar:folder-bold-duotone" width="20" height="20" class="text-primary"></iconify-icon>
+												\${dir.slice(prefix.length, -1)}
+											</a>
+										</td>
+										<td class="text-xs opacity-50">-</td>
+										<td class="text-xs opacity-50 text-right">-</td>
+										<td></td>
+									</tr>
+								\`)}
+								\${visibleObjects.map((obj: any) => html\`
+									<tr class="hover:bg-base-200/30 transition-colors group">
+										<td>
+											<div class="flex items-center gap-2">
+												\${obj.key.match(/\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i)
+													? html\`<div class="w-8 h-8 rounded shrink-0 bg-base-200 overflow-hidden object-cover bg-center" style="background-image: url('/admin/storage/preview?key=\${encodeURIComponent(obj.key)}')"></div>\`
+													: html\`<iconify-icon icon="solar:document-bold-duotone" width="20" height="20" class="text-base-content opacity-40"></iconify-icon>\`}
+												<span class="text-sm truncate max-w-[200px] md:max-w-md" title="\${obj.key.slice(prefix.length)}">\${obj.key.slice(prefix.length)}</span>
+											</div>
+										</td>
+										<td class="text-xs opacity-60">\${formatBytes(obj.size)}</td>
+										<td class="text-xs opacity-60 text-right">\${new Date(obj.uploaded).toLocaleString()}</td>
+										<td class="text-right">
+											<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+												<a href="/admin/storage/preview?key=\${encodeURIComponent(obj.key)}" target="_blank" class="btn btn-ghost btn-xs btn-square" title="Preview">
+													<iconify-icon icon="solar:eye-linear" width="16" height="16"></iconify-icon>
+												</a>
+												<a href="/admin/storage/download?key=\${encodeURIComponent(obj.key)}" target="_blank" class="btn btn-ghost btn-xs btn-square" title="Download">
+													<iconify-icon icon="solar:download-linear" width="16" height="16"></iconify-icon>
+												</a>
+												<button hx-delete="/admin/storage/delete?key=\${encodeURIComponent(obj.key)}&prefix=\${encodeURIComponent(prefix)}" hx-target="#main-content" hx-swap="outerHTML" hx-confirm="Are you sure you want to delete this file?" class="btn btn-ghost btn-xs btn-square text-error" title="Delete">
+													<iconify-icon icon="solar:trash-bin-trash-linear" width="16" height="16"></iconify-icon>
+												</button>
+											</div>
+										</td>
+									</tr>
+								\`)}
+								\${listed.delimitedPrefixes.length === 0 && visibleObjects.length === 0 ? html\`
+									<tr>
+										<td colspan="4" class="text-center py-12">
+											<div class="flex flex-col items-center gap-2 opacity-40">
+												<iconify-icon icon="solar:folder-open-bold-duotone" width="48" height="48"></iconify-icon>
+												<p class="text-sm">This folder is empty</p>
+											</div>
+										</td>
+									</tr>
+								\` : ''}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		\`;
+	};
+	`;
+}

package/cli/templates/dashboard/builders/table-routes/common/drawer-panel.ts

@@ -1,27 +1,27 @@
-/**
- * Wraps content inside a DaisyUI drawer-side panel.
- * Clean PocketBase-style side panel.
- *
- * @param drawerId - the checkbox input id used for toggling the drawer
- * @param title    - heading shown at the top of the panel
- * @param body    - raw HTML string to embed inside the panel body
- */
-export function buildDrawerPanel(
-	drawerId: string,
-	title: string,
-	body: string,
-): string {
-	return `
-\t\t<div class="drawer-side z-50">
-\t\t\t<label for="${drawerId}" aria-label="close sidebar" class="drawer-overlay"></label>
-\t\t\t<div class="w-full max-w-md min-h-full bg-base-100 p-6 border-l border-base-200 overflow-y-auto shadow-lg">
-\t\t\t\t<div class="flex justify-between items-center mb-5">
-\t\t\t\t\t<h3 class="text-base font-semibold">${title}</h3>
-\t\t\t\t\t<label for="${drawerId}" class="btn btn-sm btn-ghost btn-square">
-\t\t\t\t\t\t<iconify-icon icon="mdi:close" width="18" height="18"></iconify-icon>
-\t\t\t\t\t</label>
-\t\t\t\t</div>
-\t\t\t\t${body}
-\t\t\t</div>
-\t\t</div>`;
-}
+/**
+ * Wraps content inside a DaisyUI drawer-side panel.
+ * Clean PocketBase-style side panel.
+ *
+ * @param drawerId - the checkbox input id used for toggling the drawer
+ * @param title    - heading shown at the top of the panel
+ * @param body    - raw HTML string to embed inside the panel body
+ */
+export function buildDrawerPanel(
+	drawerId: string,
+	title: string,
+	body: string,
+): string {
+	return `
+\t\t<div class="drawer-side z-50">
+\t\t\t<label for="${drawerId}" aria-label="close sidebar" class="drawer-overlay"></label>
+\t\t\t<div class="w-full max-w-md min-h-full bg-base-100 p-6 border-l border-base-200 overflow-y-auto shadow-lg">
+\t\t\t\t<div class="flex justify-between items-center mb-5">
+\t\t\t\t\t<h3 class="text-base font-semibold">${title}</h3>
+\t\t\t\t\t<label for="${drawerId}" class="btn btn-sm btn-ghost btn-square">
+\t\t\t\t\t\t<iconify-icon icon="mdi:close" width="18" height="18"></iconify-icon>
+\t\t\t\t\t</label>
+\t\t\t\t</div>
+\t\t\t\t${body}
+\t\t\t</div>
+\t\t</div>`;
+}

package/cli/templates/dashboard/builders/table-routes/common/pagination.ts

@@ -1,30 +1,30 @@
-/**
- * Builds the pagination HTML string (runtime template literal) for a given route prefix.
- * PocketBase-style minimal footer with total count.
- * @param routePrefix - e.g. "/admin/users" or "/admin/table/myTable"
- */
-export function buildPaginationHtml(routePrefix: string): string {
-	return `
-\t\t<div class="flex flex-col sm:flex-row justify-between items-center mt-4 gap-3 py-3 px-1">
-\t\t\t<div class="text-xs text-base-content/40">
-\t\t\t\tTotal found: <span class="font-medium text-base-content/60">\${total}</span>
-\t\t\t</div>
-\t\t\t\${totalPages > 1 ? html\`
-\t\t\t<div class="join border border-base-200 rounded-lg">
-\t\t\t\t\${page > 1 ? html\`
-\t\t\t\t\t<button hx-get="${routePrefix}?page=\${page - 1}&search=\${search}&sort=\${sort}&order=\${order}" hx-target="#main-content" hx-push-url="true" class="join-item btn btn-sm btn-ghost">
-\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-left" width="16" height="16"></iconify-icon>
-\t\t\t\t\t</button>
-\t\t\t\t\` : html\`<button class="join-item btn btn-sm btn-ghost btn-disabled"><iconify-icon icon="mdi:chevron-left" width="16" height="16"></iconify-icon></button>\`}
-
-\t\t\t\t<button class="join-item btn btn-sm btn-ghost no-animation pointer-events-none text-xs">\${page} / \${totalPages}</button>
-
-\t\t\t\t\${page < totalPages ? html\`
-\t\t\t\t\t<button hx-get="${routePrefix}?page=\${page + 1}&search=\${search}&sort=\${sort}&order=\${order}" hx-target="#main-content" hx-push-url="true" class="join-item btn btn-sm btn-ghost">
-\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-right" width="16" height="16"></iconify-icon>
-\t\t\t\t\t</button>
-\t\t\t\t\` : html\`<button class="join-item btn btn-sm btn-ghost btn-disabled"><iconify-icon icon="mdi:chevron-right" width="16" height="16"></iconify-icon></button>\`}
-\t\t\t</div>
-\t\t\t\` : ''}
-\t\t</div>`;
-}
+/**
+ * Builds the pagination HTML string (runtime template literal) for a given route prefix.
+ * PocketBase-style minimal footer with total count.
+ * @param routePrefix - e.g. "/admin/users" or "/admin/table/myTable"
+ */
+export function buildPaginationHtml(routePrefix: string): string {
+	return `
+\t\t<div class="flex flex-col sm:flex-row justify-between items-center mt-4 gap-3 py-3 px-1">
+\t\t\t<div class="text-xs text-base-content/40">
+\t\t\t\tTotal found: <span class="font-medium text-base-content/60">\${total}</span>
+\t\t\t</div>
+\t\t\t\${totalPages > 1 ? html\`
+\t\t\t<div class="join border border-base-200 rounded-lg">
+\t\t\t\t\${page > 1 ? html\`
+\t\t\t\t\t<button hx-get="${routePrefix}?page=\${page - 1}&search=\${search}&sort=\${sort}&order=\${order}" hx-target="#main-content" hx-push-url="true" class="join-item btn btn-sm btn-ghost">
+\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-left" width="16" height="16"></iconify-icon>
+\t\t\t\t\t</button>
+\t\t\t\t\` : html\`<button class="join-item btn btn-sm btn-ghost btn-disabled"><iconify-icon icon="mdi:chevron-left" width="16" height="16"></iconify-icon></button>\`}
+
+\t\t\t\t<button class="join-item btn btn-sm btn-ghost no-animation pointer-events-none text-xs">\${page} / \${totalPages}</button>
+
+\t\t\t\t\${page < totalPages ? html\`
+\t\t\t\t\t<button hx-get="${routePrefix}?page=\${page + 1}&search=\${search}&sort=\${sort}&order=\${order}" hx-target="#main-content" hx-push-url="true" class="join-item btn btn-sm btn-ghost">
+\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-right" width="16" height="16"></iconify-icon>
+\t\t\t\t\t</button>
+\t\t\t\t\` : html\`<button class="join-item btn btn-sm btn-ghost btn-disabled"><iconify-icon icon="mdi:chevron-right" width="16" height="16"></iconify-icon></button>\`}
+\t\t\t</div>
+\t\t\t\` : ''}
+\t\t</div>`;
+}

package/cli/templates/dashboard/builders/table-routes/common/search-bar.ts

@@ -1,23 +1,23 @@
-/**
- * Builds the search input HTML string (runtime template literal) for a given route prefix.
- * PocketBase-style full-width filter bar.
- * @param routePrefix - e.g. "/admin/users" or "/admin/table/myTable"
- * @param placeholder - placeholder text for the input
- */
-export function buildSearchBarHtml(
-	routePrefix: string,
-	placeholder = "Search term or filter...",
-): string {
-	return `
-\t\t\t<div class="form-control w-full md:w-auto relative">
-\t\t\t\t<iconify-icon icon="mdi:magnify" width="18" height="18" class="absolute left-3 top-1/2 -translate-y-1/2 opacity-40"></iconify-icon>
-\t\t\t\t<input type="text"
-\t\t\t\t\tname="search"
-\t\t\t\t\tplaceholder="${placeholder}"
-\t\t\t\t\tvalue="\${search}"
-\t\t\t\t\thx-get="${routePrefix}?sort=\${sort}&order=\${order}"
-\t\t\t\t\thx-trigger="keyup changed delay:500ms, search"
-\t\t\t\t\thx-target="#main-content"
-\t\t\t\t\tclass="input input-sm md:input-md input-bordered pl-9 w-full md:w-72 bg-base-200/50 border-base-200 focus:bg-base-100 focus:border-primary transition-all text-sm" />
-\t\t\t</div>`;
-}
+/**
+ * Builds the search input HTML string (runtime template literal) for a given route prefix.
+ * PocketBase-style full-width filter bar.
+ * @param routePrefix - e.g. "/admin/users" or "/admin/table/myTable"
+ * @param placeholder - placeholder text for the input
+ */
+export function buildSearchBarHtml(
+	routePrefix: string,
+	placeholder = "Search term or filter...",
+): string {
+	return `
+\t\t\t<div class="form-control w-full md:w-auto relative">
+\t\t\t\t<iconify-icon icon="mdi:magnify" width="18" height="18" class="absolute left-3 top-1/2 -translate-y-1/2 opacity-40"></iconify-icon>
+\t\t\t\t<input type="text"
+\t\t\t\t\tname="search"
+\t\t\t\t\tplaceholder="${placeholder}"
+\t\t\t\t\tvalue="\${search}"
+\t\t\t\t\thx-get="${routePrefix}?sort=\${sort}&order=\${order}"
+\t\t\t\t\thx-trigger="keyup changed delay:500ms, search"
+\t\t\t\t\thx-target="#main-content"
+\t\t\t\t\tclass="input input-sm md:input-md input-bordered pl-9 w-full md:w-72 bg-base-200/50 border-base-200 focus:bg-base-100 focus:border-primary transition-all text-sm" />
+\t\t\t</div>`;
+}