appflare 0.2.25 → 0.2.27

package/cli/templates/dashboard/builders/table-routes/table/get-route.ts

@@ -1,291 +1,291 @@
-import { DiscoveredTable } from "../../../types";
-import { buildPaginationHtml } from "../common/pagination";
-import { buildSearchBarHtml } from "../common/search-bar";
-
-/**
- * Builds the GET route handler code string for /admin/table/:tableName
- * PocketBase-style layout with breadcrumb header, filter bar, and clean table.
- */
-export function buildTableGetRoute(
-	table: DiscoveredTable,
-	defaultSort: string,
-	primaryKey: string,
-	hasPrimaryKey: boolean,
-	columns: string[],
-	searchConditions: string,
-	headers: string,
-	rowCells: string,
-	actionsCell: string,
-	createInputs: string,
-): string {
-	const paginationHtml = buildPaginationHtml(
-		`/admin/table/${table.exportName}`,
-	);
-	const searchBarHtml = buildSearchBarHtml(
-		`/admin/table/${table.exportName}`,
-		"Search term or filter...",
-	);
-	const headerSelectionCell = hasPrimaryKey
-		? `<th class="w-10"><input id="select-all-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" /></th>`
-		: `<th class="w-10"><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></th>`;
-	const rowSelectionCell = hasPrimaryKey
-		? `<td><input type="checkbox" class="checkbox checkbox-xs row-select-checkbox" value="\${String((row as any).${primaryKey} ?? '')}" /></td>`
-		: `<td><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></td>`;
-	const bulkDeleteUi = hasPrimaryKey
-		? `
-\t\t\t\t\t\t<div id="bulk-delete-bar-${table.exportName}" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 hidden">
-\t\t\t\t\t\t\t<div class="bg-base-100 border border-base-200 rounded-xl shadow-lg px-3 py-2 flex items-center gap-3">
-\t\t\t\t\t\t\t\t<div class="text-xs text-base-content/70">
-\t\t\t\t\t\t\t\t\t<span id="bulk-selected-count-${table.exportName}" class="font-medium text-base-content">0</span> selected
-\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t<label class="label cursor-pointer gap-2 py-0 px-1">
-\t\t\t\t\t\t\t\t\t<span class="label-text text-xs">All matching (\${total})</span>
-\t\t\t\t\t\t\t\t\t<input id="bulk-all-matching-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" />
-\t\t\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t\t<button id="bulk-delete-trigger-${table.exportName}" type="button" class="btn btn-error btn-xs gap-1">
-\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:delete-outline" width="14" height="14"></iconify-icon>
-\t\t\t\t\t\t\t\t\tDelete selected
-\t\t\t\t\t\t\t\t</button>
-\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t</div>
-
-\t\t\t\t\t\t<dialog id="bulk-delete-modal-${table.exportName}" class="modal">
-\t\t\t\t\t\t\t<div class="modal-box max-w-sm p-6 space-y-4">
-\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base">Delete selected rows?</h3>
-\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/70" id="bulk-delete-description-${table.exportName}">This action cannot be undone.</p>
-\t\t\t\t\t\t\t\t<form id="bulk-delete-form-${table.exportName}" hx-post="/admin/table/${table.exportName}/delete-bulk" hx-target="#main-content" hx-swap="outerHTML" class="space-y-3">
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="bulkMode" id="bulk-delete-mode-${table.exportName}" value="selected" />
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="selectedIds" id="bulk-delete-ids-${table.exportName}" value="" />
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="sort" value="\${sort}" />
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
-\t\t\t\t\t\t\t\t\t<input type="hidden" name="page" value="\${page}" />
-\t\t\t\t\t\t\t\t\t<div class="flex justify-end gap-2 pt-1">
-\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog')?.close()">Cancel</button>
-\t\t\t\t\t\t\t\t\t\t<button type="submit" class="btn btn-error btn-sm">Delete</button>
-\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t</form>
-\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t<form method="dialog" class="modal-backdrop"><button>close</button></form>
-\t\t\t\t\t\t</dialog>
-
-\t\t\t\t\t\t<script>
-\t\t\t\t\t\t\t(() => {
-\t\t\t\t\t\t\t\tconst container = document.querySelector('#main-content');
-\t\t\t\t\t\t\t\tif (!container) return;
-
-\t\t\t\t\t\t\t\tconst rowCheckboxes = Array.from(container.querySelectorAll('.row-select-checkbox')).filter((node) => node instanceof HTMLInputElement);
-\t\t\t\t\t\t\t\tif (rowCheckboxes.length === 0) return;
-
-\t\t\t\t\t\t\t\tconst selectAll = container.querySelector('#select-all-${table.exportName}');
-\t\t\t\t\t\t\t\tconst bar = container.querySelector('#bulk-delete-bar-${table.exportName}');
-\t\t\t\t\t\t\t\tconst selectedCount = container.querySelector('#bulk-selected-count-${table.exportName}');
-\t\t\t\t\t\t\t\tconst allMatching = container.querySelector('#bulk-all-matching-${table.exportName}');
-\t\t\t\t\t\t\t\tconst trigger = container.querySelector('#bulk-delete-trigger-${table.exportName}');
-\t\t\t\t\t\t\t\tconst modal = container.querySelector('#bulk-delete-modal-${table.exportName}');
-\t\t\t\t\t\t\t\tconst modeInput = container.querySelector('#bulk-delete-mode-${table.exportName}');
-\t\t\t\t\t\t\t\tconst idsInput = container.querySelector('#bulk-delete-ids-${table.exportName}');
-\t\t\t\t\t\t\t\tconst description = container.querySelector('#bulk-delete-description-${table.exportName}');
-
-\t\t\t\t\t\t\t\tif (!(selectAll instanceof HTMLInputElement) ||
-\t\t\t\t\t\t\t\t\t!(bar instanceof HTMLElement) ||
-\t\t\t\t\t\t\t\t\t!(selectedCount instanceof HTMLElement) ||
-\t\t\t\t\t\t\t\t\t!(allMatching instanceof HTMLInputElement) ||
-\t\t\t\t\t\t\t\t\t!(trigger instanceof HTMLButtonElement) ||
-\t\t\t\t\t\t\t\t\t!(modal instanceof HTMLDialogElement) ||
-\t\t\t\t\t\t\t\t\t!(modeInput instanceof HTMLInputElement) ||
-\t\t\t\t\t\t\t\t\t!(idsInput instanceof HTMLInputElement) ||
-\t\t\t\t\t\t\t\t\t!(description instanceof HTMLElement)) {
-\t\t\t\t\t\t\t\t\treturn;
-\t\t\t\t\t\t\t\t}
-
-\t\t\t\t\t\t\t\tconst totalRows = Number(\${total});
-\t\t\t\t\t\t\t\tconst getSelectedIds = () => rowCheckboxes.filter((checkbox) => checkbox.checked).map((checkbox) => checkbox.value).filter((value) => value.length > 0);
-
-\t\t\t\t\t\t\t\tconst updateUi = () => {
-\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
-\t\t\t\t\t\t\t\t\tconst selected = allMatching.checked ? totalRows : ids.length;
-\t\t\t\t\t\t\t\t\tselectedCount.textContent = String(selected);
-\t\t\t\t\t\t\t\t\tbar.classList.toggle('hidden', selected === 0);
-\t\t\t\t\t\t\t\t\tconst checkedCount = ids.length;
-\t\t\t\t\t\t\t\t\tselectAll.checked = checkedCount > 0 && checkedCount === rowCheckboxes.length;
-\t\t\t\t\t\t\t\t\tselectAll.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;
-\t\t\t\t\t\t\t\t};
-
-\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
-\t\t\t\t\t\t\t\t\tcheckbox.addEventListener('change', () => {
-\t\t\t\t\t\t\t\t\t\tif (allMatching.checked) allMatching.checked = false;
-\t\t\t\t\t\t\t\t\t\tupdateUi();
-\t\t\t\t\t\t\t\t\t});
-\t\t\t\t\t\t\t\t});
-
-\t\t\t\t\t\t\t\tselectAll.addEventListener('change', () => {
-\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
-\t\t\t\t\t\t\t\t\t\tcheckbox.checked = selectAll.checked;
-\t\t\t\t\t\t\t\t\t});
-\t\t\t\t\t\t\t\t\tif (allMatching.checked && !selectAll.checked) allMatching.checked = false;
-\t\t\t\t\t\t\t\t\tupdateUi();
-\t\t\t\t\t\t\t\t});
-
-\t\t\t\t\t\t\t\tallMatching.addEventListener('change', () => {
-\t\t\t\t\t\t\t\t\tif (allMatching.checked) {
-\t\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
-\t\t\t\t\t\t\t\t\t\t\tcheckbox.checked = true;
-\t\t\t\t\t\t\t\t\t\t});
-\t\t\t\t\t\t\t\t\t}
-\t\t\t\t\t\t\t\t\tupdateUi();
-\t\t\t\t\t\t\t\t});
-
-\t\t\t\t\t\t\t\ttrigger.addEventListener('click', () => {
-\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
-\t\t\t\t\t\t\t\t\tif (!allMatching.checked && ids.length === 0) return;
-\t\t\t\t\t\t\t\t\tmodeInput.value = allMatching.checked ? 'all-matching' : 'selected';
-\t\t\t\t\t\t\t\t\tidsInput.value = ids.join(',');
-\t\t\t\t\t\t\t\t\tdescription.textContent = allMatching.checked
-\t\t\t\t\t\t\t\t\t\t? 'This will permanently delete all rows matching the current search context.'
-\t\t\t\t\t\t\t\t\t\t: 'This action cannot be undone.';
-\t\t\t\t\t\t\t\t\tmodal.showModal();
-\t\t\t\t\t\t\t\t});
-
-\t\t\t\t\t\t\t\tupdateUi();
-\t\t\t\t\t\t\t})();
-\t\t\t\t\t\t</script>
-`
-		: "";
-
-	return `
-\tadminApp.get('/table/${table.exportName}', async (c) => {
-\t\tconst db = drizzle(c.env[options.databaseBinding], { schema });
-\t\tconst page = parseInt(c.req.query('page') || '1');
-\t\tconst limit = 20;
-\t\tconst offset = (page - 1) * limit;
-\t\tconst sort = c.req.query('sort') || '${defaultSort}';
-\t\tconst order = c.req.query('order') || 'desc';
-\t\tconst search = c.req.query('search') || '';
-
-\t\tlet tableSchema = (schema as any).${table.exportName};
-\t\tif (!tableSchema) return c.text("Table missing", 404);
-
-\t\tlet query = db.select().from(tableSchema);
-\t\tlet countQuery = db.select({ count: sql\`count(*)\` }).from(tableSchema);
-
-\t\tif (search) {
-			const searchConditions: any[] = [];
-\t\t\t${searchConditions}
-\t\t\tif (searchConditions.length > 0) {
-\t\t\t\tquery = query.where(or(...searchConditions)) as any;
-\t\t\t\tcountQuery = countQuery.where(or(...searchConditions)) as any;
-\t\t\t}
-\t\t}
-
-\t\tif (sort && tableSchema[sort]) {
-\t\t\tquery = query.orderBy(order === 'asc' ? asc(tableSchema[sort]) : desc(tableSchema[sort])) as any;
-\t\t}
-
-\t\tconst data = await query.limit(limit).offset(offset).execute();
-\t\tconst totalResult = await countQuery.execute();
-\t\tconst total = Number(totalResult[0]?.count || 0);
-\t\tconst totalPages = Math.ceil(total / limit);
-
-\t\tconst tableHtml = html\`
-\t\t\t<div class="bg-base-100 rounded-xl border border-base-200 overflow-hidden">
-\t\t\t\t<div class="overflow-x-auto">
-\t\t\t\t\t<table class="table table-sm md:table-md w-full">
-\t\t\t\t\t\t<thead>
-\t\t\t\t\t\t\t<tr class="border-b border-base-200">
-\t\t\t\t\t\t\t\t${headerSelectionCell}
-\t\t\t\t\t\t\t\t${headers}
-\t\t\t\t\t\t\t\t<th class="w-[100px] text-right">
-\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:dots-horizontal" width="16" height="16" class="opacity-30"></iconify-icon>
-\t\t\t\t\t\t\t\t</th>
-\t\t\t\t\t\t\t</tr>
-\t\t\t\t\t\t</thead>
-\t\t\t\t\t\t<tbody>
-\t\t\t\t\t\t\t\${data.map((row, rowIndex) => html\`
-\t\t\t\t\t\t\t<tr class="hover:bg-base-200/30 transition-colors">
-\t\t\t\t\t\t\t\t${rowSelectionCell}
-\t\t\t\t\t\t\t\t${rowCells}
-\t\t\t\t\t\t\t\t${actionsCell}
-\t\t\t\t\t\t\t</tr>
-\t\t\t\t\t\t\t\`)}
-\t\t\t\t\t\t\t\${data.length === 0 ? html\`
-\t\t\t\t\t\t\t\t<tr>
-\t\t\t\t\t\t\t\t\t<td colspan="${columns.length + 2}" class="text-center py-12">
-\t\t\t\t\t\t\t\t\t\t<div class="flex flex-col items-center gap-3">
-\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:database-off-outline" width="40" height="40" class="opacity-20"></iconify-icon>
-\t\t\t\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/40">No records found.</p>
-\t\t\t\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-sm btn-primary gap-1">
-\t\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:plus" width="16" height="16"></iconify-icon>
-\t\t\t\t\t\t\t\t\t\t\t\tNew record
-\t\t\t\t\t\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t</td>
-\t\t\t\t\t\t\t\t</tr>
-\t\t\t\t\t\t\t\` : ''}
-\t\t\t\t\t\t</tbody>
-\t\t\t\t\t</table>
-\t\t\t\t</div>
-\t\t\t\t${paginationHtml}
-\t\t\t</div>
-\t\t\`;
-
-\t\tconst content = html\`
-\t\t\t<div id="main-content">
-\t\t\t\t<div class="drawer drawer-end">
-\t\t\t\t\t<input id="create-drawer-${table.exportName}" type="checkbox" class="drawer-toggle" />
-\t\t\t\t\t<div class="drawer-content">
-\t\t\t\t\t\t<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-5 gap-3">
-\t\t\t\t\t\t\t<div class="flex items-center gap-2 text-sm">
-\t\t\t\t\t\t\t\t<a href="/admin" class="text-base-content/40 hover:text-primary transition-colors">Collections</a>
-\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-right" width="14" height="14" class="opacity-30"></iconify-icon>
-\t\t\t\t\t\t\t\t<span class="font-semibold capitalize">${table.tableName}</span>
-\t\t\t\t\t\t\t\t<button class="btn btn-ghost btn-xs btn-square opacity-40 hover:opacity-100" onclick="window.location.reload()">
-\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:refresh" width="14" height="14"></iconify-icon>
-\t\t\t\t\t\t\t\t</button>
-\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t<div class="flex items-center gap-2 w-full md:w-auto">
-\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-primary btn-sm gap-1">
-\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:plus" width="16" height="16"></iconify-icon>
-\t\t\t\t\t\t\t\t\tNew record
-\t\t\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t</div>
-\t\t\t\t\t\t<div class="mb-4">
-\t\t\t\t\t\t\t${searchBarHtml}
-\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\${tableHtml}
-\t\t\t\t\t\t${bulkDeleteUi}
-\t\t\t\t\t</div>
-\t\t\t\t\t<div class="drawer-side z-50">
-\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" aria-label="close sidebar" class="drawer-overlay"></label>
-\t\t\t\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\t\t\t<div class="flex justify-between items-center mb-5">
-\t\t\t\t\t\t\t\t<h3 class="text-base font-semibold">Create ${table.tableName}</h3>
-\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-sm btn-ghost btn-square">
-\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:close" width="18" height="18"></iconify-icon>
-\t\t\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t<form hx-post="/admin/table/${table.exportName}/create" hx-target="#main-content" hx-swap="outerHTML" class="flex flex-col gap-4">
-\t\t\t\t\t\t\t\t<input type="hidden" name="sort" value="\${sort}" />
-\t\t\t\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
-\t\t\t\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
-\t\t\t\t\t\t\t\t<input type="hidden" name="page" value="\${page}" />
-\t\t\t\t\t\t\t\t${createInputs}
-\t\t\t\t\t\t\t\t<button type="submit" class="btn btn-primary btn-sm mt-2">Create record</button>
-\t\t\t\t\t\t\t</form>
-\t\t\t\t\t\t</div>
-\t\t\t\t\t</div>
-\t\t\t\t</div>
-\t\t\t</div>
-\t\t\`;
-
-\t\tif (c.req.header('hx-request')) {
-\t\t\treturn c.html(content);
-\t\t}
-
-\t\treturn c.html(Layout({
-\t\t\ttitle: "${table.tableName} - Admin Dashboard",
-\t\t\tchildren: content
-\t\t}));
-\t});`;
-}
+import { DiscoveredTable } from "../../../types";
+import { buildPaginationHtml } from "../common/pagination";
+import { buildSearchBarHtml } from "../common/search-bar";
+
+/**
+ * Builds the GET route handler code string for /admin/table/:tableName
+ * PocketBase-style layout with breadcrumb header, filter bar, and clean table.
+ */
+export function buildTableGetRoute(
+	table: DiscoveredTable,
+	defaultSort: string,
+	primaryKey: string,
+	hasPrimaryKey: boolean,
+	columns: string[],
+	searchConditions: string,
+	headers: string,
+	rowCells: string,
+	actionsCell: string,
+	createInputs: string,
+): string {
+	const paginationHtml = buildPaginationHtml(
+		`/admin/table/${table.exportName}`,
+	);
+	const searchBarHtml = buildSearchBarHtml(
+		`/admin/table/${table.exportName}`,
+		"Search term or filter...",
+	);
+	const headerSelectionCell = hasPrimaryKey
+		? `<th class="w-10"><input id="select-all-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" /></th>`
+		: `<th class="w-10"><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></th>`;
+	const rowSelectionCell = hasPrimaryKey
+		? `<td><input type="checkbox" class="checkbox checkbox-xs row-select-checkbox" value="\${String((row as any).${primaryKey} ?? '')}" /></td>`
+		: `<td><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></td>`;
+	const bulkDeleteUi = hasPrimaryKey
+		? `
+\t\t\t\t\t\t<div id="bulk-delete-bar-${table.exportName}" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 hidden">
+\t\t\t\t\t\t\t<div class="bg-base-100 border border-base-200 rounded-xl shadow-lg px-3 py-2 flex items-center gap-3">
+\t\t\t\t\t\t\t\t<div class="text-xs text-base-content/70">
+\t\t\t\t\t\t\t\t\t<span id="bulk-selected-count-${table.exportName}" class="font-medium text-base-content">0</span> selected
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t<label class="label cursor-pointer gap-2 py-0 px-1">
+\t\t\t\t\t\t\t\t\t<span class="label-text text-xs">All matching (\${total})</span>
+\t\t\t\t\t\t\t\t\t<input id="bulk-all-matching-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" />
+\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t\t<button id="bulk-delete-trigger-${table.exportName}" type="button" class="btn btn-error btn-xs gap-1">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:delete-outline" width="14" height="14"></iconify-icon>
+\t\t\t\t\t\t\t\t\tDelete selected
+\t\t\t\t\t\t\t\t</button>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t</div>
+
+\t\t\t\t\t\t<dialog id="bulk-delete-modal-${table.exportName}" class="modal">
+\t\t\t\t\t\t\t<div class="modal-box max-w-sm p-6 space-y-4">
+\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base">Delete selected rows?</h3>
+\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/70" id="bulk-delete-description-${table.exportName}">This action cannot be undone.</p>
+\t\t\t\t\t\t\t\t<form id="bulk-delete-form-${table.exportName}" hx-post="/admin/table/${table.exportName}/delete-bulk" hx-target="#main-content" hx-swap="outerHTML" class="space-y-3">
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="bulkMode" id="bulk-delete-mode-${table.exportName}" value="selected" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="selectedIds" id="bulk-delete-ids-${table.exportName}" value="" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="sort" value="\${sort}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="page" value="\${page}" />
+\t\t\t\t\t\t\t\t\t<div class="flex justify-end gap-2 pt-1">
+\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog')?.close()">Cancel</button>
+\t\t\t\t\t\t\t\t\t\t<button type="submit" class="btn btn-error btn-sm">Delete</button>
+\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t<form method="dialog" class="modal-backdrop"><button>close</button></form>
+\t\t\t\t\t\t</dialog>
+
+\t\t\t\t\t\t<script>
+\t\t\t\t\t\t\t(() => {
+\t\t\t\t\t\t\t\tconst container = document.querySelector('#main-content');
+\t\t\t\t\t\t\t\tif (!container) return;
+
+\t\t\t\t\t\t\t\tconst rowCheckboxes = Array.from(container.querySelectorAll('.row-select-checkbox')).filter((node) => node instanceof HTMLInputElement);
+\t\t\t\t\t\t\t\tif (rowCheckboxes.length === 0) return;
+
+\t\t\t\t\t\t\t\tconst selectAll = container.querySelector('#select-all-${table.exportName}');
+\t\t\t\t\t\t\t\tconst bar = container.querySelector('#bulk-delete-bar-${table.exportName}');
+\t\t\t\t\t\t\t\tconst selectedCount = container.querySelector('#bulk-selected-count-${table.exportName}');
+\t\t\t\t\t\t\t\tconst allMatching = container.querySelector('#bulk-all-matching-${table.exportName}');
+\t\t\t\t\t\t\t\tconst trigger = container.querySelector('#bulk-delete-trigger-${table.exportName}');
+\t\t\t\t\t\t\t\tconst modal = container.querySelector('#bulk-delete-modal-${table.exportName}');
+\t\t\t\t\t\t\t\tconst modeInput = container.querySelector('#bulk-delete-mode-${table.exportName}');
+\t\t\t\t\t\t\t\tconst idsInput = container.querySelector('#bulk-delete-ids-${table.exportName}');
+\t\t\t\t\t\t\t\tconst description = container.querySelector('#bulk-delete-description-${table.exportName}');
+
+\t\t\t\t\t\t\t\tif (!(selectAll instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(bar instanceof HTMLElement) ||
+\t\t\t\t\t\t\t\t\t!(selectedCount instanceof HTMLElement) ||
+\t\t\t\t\t\t\t\t\t!(allMatching instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(trigger instanceof HTMLButtonElement) ||
+\t\t\t\t\t\t\t\t\t!(modal instanceof HTMLDialogElement) ||
+\t\t\t\t\t\t\t\t\t!(modeInput instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(idsInput instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(description instanceof HTMLElement)) {
+\t\t\t\t\t\t\t\t\treturn;
+\t\t\t\t\t\t\t\t}
+
+\t\t\t\t\t\t\t\tconst totalRows = Number(\${total});
+\t\t\t\t\t\t\t\tconst getSelectedIds = () => rowCheckboxes.filter((checkbox) => checkbox.checked).map((checkbox) => checkbox.value).filter((value) => value.length > 0);
+
+\t\t\t\t\t\t\t\tconst updateUi = () => {
+\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
+\t\t\t\t\t\t\t\t\tconst selected = allMatching.checked ? totalRows : ids.length;
+\t\t\t\t\t\t\t\t\tselectedCount.textContent = String(selected);
+\t\t\t\t\t\t\t\t\tbar.classList.toggle('hidden', selected === 0);
+\t\t\t\t\t\t\t\t\tconst checkedCount = ids.length;
+\t\t\t\t\t\t\t\t\tselectAll.checked = checkedCount > 0 && checkedCount === rowCheckboxes.length;
+\t\t\t\t\t\t\t\t\tselectAll.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;
+\t\t\t\t\t\t\t\t};
+
+\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\tcheckbox.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\t\tif (allMatching.checked) allMatching.checked = false;
+\t\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tselectAll.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\t\tcheckbox.checked = selectAll.checked;
+\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t\tif (allMatching.checked && !selectAll.checked) allMatching.checked = false;
+\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tallMatching.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\tif (allMatching.checked) {
+\t\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\t\t\tcheckbox.checked = true;
+\t\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t\t}
+\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\ttrigger.addEventListener('click', () => {
+\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
+\t\t\t\t\t\t\t\t\tif (!allMatching.checked && ids.length === 0) return;
+\t\t\t\t\t\t\t\t\tmodeInput.value = allMatching.checked ? 'all-matching' : 'selected';
+\t\t\t\t\t\t\t\t\tidsInput.value = ids.join(',');
+\t\t\t\t\t\t\t\t\tdescription.textContent = allMatching.checked
+\t\t\t\t\t\t\t\t\t\t? 'This will permanently delete all rows matching the current search context.'
+\t\t\t\t\t\t\t\t\t\t: 'This action cannot be undone.';
+\t\t\t\t\t\t\t\t\tmodal.showModal();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t})();
+\t\t\t\t\t\t</script>
+`
+		: "";
+
+	return `
+\tadminApp.get('/table/${table.exportName}', async (c) => {
+\t\tconst db = drizzle(c.env[options.databaseBinding], { schema });
+\t\tconst page = parseInt(c.req.query('page') || '1');
+\t\tconst limit = 20;
+\t\tconst offset = (page - 1) * limit;
+\t\tconst sort = c.req.query('sort') || '${defaultSort}';
+\t\tconst order = c.req.query('order') || 'desc';
+\t\tconst search = c.req.query('search') || '';
+
+\t\tlet tableSchema = (schema as any).${table.exportName};
+\t\tif (!tableSchema) return c.text("Table missing", 404);
+
+\t\tlet query = db.select().from(tableSchema);
+\t\tlet countQuery = db.select({ count: sql\`count(*)\` }).from(tableSchema);
+
+\t\tif (search) {
+			const searchConditions: any[] = [];
+\t\t\t${searchConditions}
+\t\t\tif (searchConditions.length > 0) {
+\t\t\t\tquery = query.where(or(...searchConditions)) as any;
+\t\t\t\tcountQuery = countQuery.where(or(...searchConditions)) as any;
+\t\t\t}
+\t\t}
+
+\t\tif (sort && tableSchema[sort]) {
+\t\t\tquery = query.orderBy(order === 'asc' ? asc(tableSchema[sort]) : desc(tableSchema[sort])) as any;
+\t\t}
+
+\t\tconst data = await query.limit(limit).offset(offset).execute();
+\t\tconst totalResult = await countQuery.execute();
+\t\tconst total = Number(totalResult[0]?.count || 0);
+\t\tconst totalPages = Math.ceil(total / limit);
+
+\t\tconst tableHtml = html\`
+\t\t\t<div class="bg-base-100 rounded-xl border border-base-200 overflow-hidden">
+\t\t\t\t<div class="overflow-x-auto">
+\t\t\t\t\t<table class="table table-sm md:table-md w-full">
+\t\t\t\t\t\t<thead>
+\t\t\t\t\t\t\t<tr class="border-b border-base-200">
+\t\t\t\t\t\t\t\t${headerSelectionCell}
+\t\t\t\t\t\t\t\t${headers}
+\t\t\t\t\t\t\t\t<th class="w-[100px] text-right">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:dots-horizontal" width="16" height="16" class="opacity-30"></iconify-icon>
+\t\t\t\t\t\t\t\t</th>
+\t\t\t\t\t\t\t</tr>
+\t\t\t\t\t\t</thead>
+\t\t\t\t\t\t<tbody>
+\t\t\t\t\t\t\t\${data.map((row, rowIndex) => html\`
+\t\t\t\t\t\t\t<tr class="hover:bg-base-200/30 transition-colors">
+\t\t\t\t\t\t\t\t${rowSelectionCell}
+\t\t\t\t\t\t\t\t${rowCells}
+\t\t\t\t\t\t\t\t${actionsCell}
+\t\t\t\t\t\t\t</tr>
+\t\t\t\t\t\t\t\`)}
+\t\t\t\t\t\t\t\${data.length === 0 ? html\`
+\t\t\t\t\t\t\t\t<tr>
+\t\t\t\t\t\t\t\t\t<td colspan="${columns.length + 2}" class="text-center py-12">
+\t\t\t\t\t\t\t\t\t\t<div class="flex flex-col items-center gap-3">
+\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:database-off-outline" width="40" height="40" class="opacity-20"></iconify-icon>
+\t\t\t\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/40">No records found.</p>
+\t\t\t\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-sm btn-primary gap-1">
+\t\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:plus" width="16" height="16"></iconify-icon>
+\t\t\t\t\t\t\t\t\t\t\t\tNew record
+\t\t\t\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t</td>
+\t\t\t\t\t\t\t\t</tr>
+\t\t\t\t\t\t\t\` : ''}
+\t\t\t\t\t\t</tbody>
+\t\t\t\t\t</table>
+\t\t\t\t</div>
+\t\t\t\t${paginationHtml}
+\t\t\t</div>
+\t\t\`;
+
+\t\tconst content = html\`
+\t\t\t<div id="main-content">
+\t\t\t\t<div class="drawer drawer-end">
+\t\t\t\t\t<input id="create-drawer-${table.exportName}" type="checkbox" class="drawer-toggle" />
+\t\t\t\t\t<div class="drawer-content">
+\t\t\t\t\t\t<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-5 gap-3">
+\t\t\t\t\t\t\t<div class="flex items-center gap-2 text-sm">
+\t\t\t\t\t\t\t\t<a href="/admin" class="text-base-content/40 hover:text-primary transition-colors">Collections</a>
+\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:chevron-right" width="14" height="14" class="opacity-30"></iconify-icon>
+\t\t\t\t\t\t\t\t<span class="font-semibold capitalize">${table.tableName}</span>
+\t\t\t\t\t\t\t\t<button class="btn btn-ghost btn-xs btn-square opacity-40 hover:opacity-100" onclick="window.location.reload()">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:refresh" width="14" height="14"></iconify-icon>
+\t\t\t\t\t\t\t\t</button>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t<div class="flex items-center gap-2 w-full md:w-auto">
+\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-primary btn-sm gap-1">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:plus" width="16" height="16"></iconify-icon>
+\t\t\t\t\t\t\t\t\tNew record
+\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t</div>
+\t\t\t\t\t\t<div class="mb-4">
+\t\t\t\t\t\t\t${searchBarHtml}
+\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\${tableHtml}
+\t\t\t\t\t\t${bulkDeleteUi}
+\t\t\t\t\t</div>
+\t\t\t\t\t<div class="drawer-side z-50">
+\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" aria-label="close sidebar" class="drawer-overlay"></label>
+\t\t\t\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\t\t\t<div class="flex justify-between items-center mb-5">
+\t\t\t\t\t\t\t\t<h3 class="text-base font-semibold">Create ${table.tableName}</h3>
+\t\t\t\t\t\t\t\t<label for="create-drawer-${table.exportName}" class="btn btn-sm btn-ghost btn-square">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:close" width="18" height="18"></iconify-icon>
+\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t<form hx-post="/admin/table/${table.exportName}/create" hx-target="#main-content" hx-swap="outerHTML" class="flex flex-col gap-4">
+\t\t\t\t\t\t\t\t<input type="hidden" name="sort" value="\${sort}" />
+\t\t\t\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\t\t\t\t\t\t<input type="hidden" name="page" value="\${page}" />
+\t\t\t\t\t\t\t\t${createInputs}
+\t\t\t\t\t\t\t\t<button type="submit" class="btn btn-primary btn-sm mt-2">Create record</button>
+\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t</div>
+\t\t\t\t\t</div>
+\t\t\t\t</div>
+\t\t\t</div>
+\t\t\`;
+
+\t\tif (c.req.header('hx-request')) {
+\t\t\treturn c.html(content);
+\t\t}
+
+\t\treturn c.html(Layout({
+\t\t\ttitle: "${table.tableName} - Admin Dashboard",
+\t\t\tchildren: content
+\t\t}));
+\t});`;
+}