appflare 0.2.30 → 0.2.31

package/cli/templates/dashboard/builders/table-routes/users/html/modals.ts

@@ -1,57 +1,57 @@
-/**
- * Builds the ban/unban confirmation modal HTML for a users table row.
- * Clean PocketBase-style modal.
- */
-export function buildBanUserModal(): string {
-	return `
-\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? '' : html\`
-\t\t\t\t\t\t\t\t<input type="checkbox" id="ban-user-modal-\${String((row as any).id)}" class="modal-toggle" />
-\t\t\t\t\t\t\t\t<div class="modal">
-\t\t\t\t\t\t\t\t\t<div class="modal-box max-w-sm">
-\t\t\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base">\${(row as any).banned ? 'Unban user' : 'Ban user'}</h3>
-\t\t\t\t\t\t\t\t\t\t<p class="py-3 text-sm text-base-content/60">\${(row as any).banned ? 'Restore access for' : 'Disable access for'} <span class="font-semibold">\${String((row as any).email ?? '')}</span>?</p>
-\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/\${(row as any).banned ? 'unban' : 'ban'}" hx-target="#main-content" hx-swap="outerHTML" class="space-y-3">
-\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
-\t\t\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\t\t<input type="hidden" name="search" value="\${search}" />
-\t\t\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\t\t<input type="hidden" name="order" value="\${order}" />
-\t\t\t\t\t\t\t\t\t\t\t<div class="modal-action">
-\t\t\t\t\t\t\t\t\t\t\t\t<label for="ban-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-sm">Cancel</label>
-\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-sm \${(row as any).banned ? 'btn-info' : 'btn-warning'}" type="submit">\${(row as any).banned ? 'Unban' : 'Ban'}</button>
-\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t</form>
-\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t<label class="modal-backdrop" for="ban-user-modal-\${String((row as any).id)}">Close</label>
-\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\`}`;
-}
-
-/**
- * Builds the delete confirmation modal HTML for a users table row.
- * Clean PocketBase-style modal.
- */
-export function buildDeleteUserModal(): string {
-	return `
-\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? '' : html\`
-\t\t\t\t\t\t\t\t<input type="checkbox" id="delete-user-modal-\${String((row as any).id)}" class="modal-toggle" />
-\t\t\t\t\t\t\t\t<div class="modal">
-\t\t\t\t\t\t\t\t\t<div class="modal-box max-w-sm">
-\t\t\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base text-error">Delete user</h3>
-\t\t\t\t\t\t\t\t\t\t<p class="py-3 text-sm text-base-content/60">Delete user <span class="font-semibold">\${String((row as any).email ?? '')}</span>? This action cannot be undone.</p>
-\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/delete" hx-target="#main-content" hx-swap="outerHTML">
-\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
-\t\t\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\t\t<input type="hidden" name="search" value="\${search}" />
-\t\t\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\t\t<input type="hidden" name="order" value="\${order}" />
-\t\t\t\t\t\t\t\t\t\t\t<div class="modal-action">
-\t\t\t\t\t\t\t\t\t\t\t\t<label for="delete-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-sm">Cancel</label>
-\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-error btn-sm" type="submit">Delete</button>
-\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t</form>
-\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t<label class="modal-backdrop" for="delete-user-modal-\${String((row as any).id)}">Close</label>
-\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\`}`;
-}
+/**
+ * Builds the ban/unban confirmation modal HTML for a users table row.
+ * Clean PocketBase-style modal.
+ */
+export function buildBanUserModal(): string {
+	return `
+\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? '' : html\`
+\t\t\t\t\t\t\t\t<input type="checkbox" id="ban-user-modal-\${String((row as any).id)}" class="modal-toggle" />
+\t\t\t\t\t\t\t\t<div class="modal">
+\t\t\t\t\t\t\t\t\t<div class="modal-box max-w-sm">
+\t\t\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base">\${(row as any).banned ? 'Unban user' : 'Ban user'}</h3>
+\t\t\t\t\t\t\t\t\t\t<p class="py-3 text-sm text-base-content/60">\${(row as any).banned ? 'Restore access for' : 'Disable access for'} <span class="font-semibold">\${String((row as any).email ?? '')}</span>?</p>
+\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/\${(row as any).banned ? 'unban' : 'ban'}" hx-target="#main-content" hx-swap="outerHTML" class="space-y-3">
+\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
+\t\t\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\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\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\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t\t\t\t<div class="modal-action">
+\t\t\t\t\t\t\t\t\t\t\t\t<label for="ban-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-sm">Cancel</label>
+\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-sm \${(row as any).banned ? 'btn-info' : 'btn-warning'}" type="submit">\${(row as any).banned ? 'Unban' : 'Ban'}</button>
+\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t<label class="modal-backdrop" for="ban-user-modal-\${String((row as any).id)}">Close</label>
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\`}`;
+}
+
+/**
+ * Builds the delete confirmation modal HTML for a users table row.
+ * Clean PocketBase-style modal.
+ */
+export function buildDeleteUserModal(): string {
+	return `
+\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? '' : html\`
+\t\t\t\t\t\t\t\t<input type="checkbox" id="delete-user-modal-\${String((row as any).id)}" class="modal-toggle" />
+\t\t\t\t\t\t\t\t<div class="modal">
+\t\t\t\t\t\t\t\t\t<div class="modal-box max-w-sm">
+\t\t\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base text-error">Delete user</h3>
+\t\t\t\t\t\t\t\t\t\t<p class="py-3 text-sm text-base-content/60">Delete user <span class="font-semibold">\${String((row as any).email ?? '')}</span>? This action cannot be undone.</p>
+\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/delete" hx-target="#main-content" hx-swap="outerHTML">
+\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
+\t\t\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\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\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\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t\t\t\t<div class="modal-action">
+\t\t\t\t\t\t\t\t\t\t\t\t<label for="delete-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-sm">Cancel</label>
+\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-error btn-sm" type="submit">Delete</button>
+\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t<label class="modal-backdrop" for="delete-user-modal-\${String((row as any).id)}">Close</label>
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\`}`;
+}

package/cli/templates/dashboard/builders/table-routes/users/html/page.ts

@@ -1,27 +1,27 @@
-import { buildSearchBarHtml } from "../../common/search-bar";
-
-/**
- * Builds the full page content HTML (runtime template string) for the users management page.
- * PocketBase-style breadcrumb header with search filter.
- */
-export function buildUsersPageHtml(): string {
-	const searchBarHtml = buildSearchBarHtml("/admin/users", "Search users...");
-
-	return `
-\t\tconst content = html\`
-\t\t\t<div id="main-content">
-\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<div class="flex items-center gap-2 text-sm">
-\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<iconify-icon icon="mdi:chevron-right" width="14" height="14" class="opacity-30"></iconify-icon>
-\t\t\t\t\t\t<span class="font-semibold">users</span>
-\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<iconify-icon icon="mdi:refresh" width="14" height="14"></iconify-icon>
-\t\t\t\t\t\t</button>
-\t\t\t\t\t</div>
-\t\t\t\t\t${searchBarHtml}
-\t\t\t\t</div>
-\t\t\t\t\${tableHtml}
-\t\t\t</div>
-\t\t\`;`;
-}
+import { buildSearchBarHtml } from "../../common/search-bar";
+
+/**
+ * Builds the full page content HTML (runtime template string) for the users management page.
+ * PocketBase-style breadcrumb header with search filter.
+ */
+export function buildUsersPageHtml(): string {
+	const searchBarHtml = buildSearchBarHtml("/admin/users", "Search users...");
+
+	return `
+\t\tconst content = html\`
+\t\t\t<div id="main-content">
+\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<div class="flex items-center gap-2 text-sm">
+\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<iconify-icon icon="mdi:chevron-right" width="14" height="14" class="opacity-30"></iconify-icon>
+\t\t\t\t\t\t<span class="font-semibold">users</span>
+\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<iconify-icon icon="mdi:refresh" width="14" height="14"></iconify-icon>
+\t\t\t\t\t\t</button>
+\t\t\t\t\t</div>
+\t\t\t\t\t${searchBarHtml}
+\t\t\t\t</div>
+\t\t\t\t\${tableHtml}
+\t\t\t</div>
+\t\t\`;`;
+}

package/cli/templates/dashboard/builders/table-routes/users/html/table.ts

@@ -1,128 +1,128 @@
-import { buildBanUserModal, buildDeleteUserModal } from "./modals";
-import { buildPaginationHtml } from "../../common/pagination";
-
-const USER_SORT_COLUMNS = [
-	"id",
-	"name",
-	"email",
-	"role",
-	"createdAt",
-	"banned",
-] as const;
-type UserSortColumn = (typeof USER_SORT_COLUMNS)[number];
-
-/** Column type icon mapping for users table */
-const USER_COLUMN_ICONS: Record<UserSortColumn, string> = {
-	id: "mdi:pound",
-	name: "mdi:format-text",
-	email: "mdi:at",
-	role: "mdi:shield-account-outline",
-	createdAt: "mdi:calendar",
-	banned: "mdi:toggle-switch-outline",
-};
-
-/**
- * Builds the sortable column header anchor for a single user column.
- */
-function buildUserColumnHeader(column: UserSortColumn): string {
-	const icon = USER_COLUMN_ICONS[column] || "mdi:format-text";
-	return `<th><a href="#" hx-get="/admin/users?page=\${page}&search=\${search}&sort=${column}&order=\${sort === '${column}' && order === 'asc' ? 'desc' : 'asc'}" hx-target="#main-content" hx-push-url="true" class="hover:text-primary flex items-center gap-1.5 transition-colors whitespace-nowrap"><iconify-icon icon="${icon}" width="14" height="14" class="opacity-40"></iconify-icon>${column} <span class="text-[10px] opacity-30">\${sort === '${column}' ? (order === 'asc' ? '▲' : '▼') : ''}</span></a></th>`;
-}
-
-/**
- * Builds the complete users data table HTML block (runtime template string).
- * PocketBase-style clean table with icon headers and subtle actions.
- */
-export function buildUsersTableHtml(): string {
-	const headers = USER_SORT_COLUMNS.map(buildUserColumnHeader).join(
-		"\n\t\t\t\t\t\t\t",
-	);
-	const paginationHtml = buildPaginationHtml("/admin/users");
-
-	return `
-\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${headers}
-\t\t\t\t\t\t\t\t<th class="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) => html\`
-\t\t\t\t\t\t\t\t<tr class="hover:bg-base-200/30 transition-colors">
-\t\t\t\t\t\t\t\t\t<td><button type="button" class="truncate max-w-[220px] text-sm font-mono text-xs opacity-70 hover:opacity-100 cursor-copy text-left" title="Click to copy: \${String((row as any).id ?? '')}" data-copy-value="\${String((row as any).id ?? '')}" onclick="navigator.clipboard?.writeText(this.dataset.copyValue || '')">\${String((row as any).id ?? '')}</button></td>
-\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[220px] text-sm" title="\${String((row as any).name ?? '')}">\${String((row as any).name ?? '')}</div></td>
-\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[260px] text-sm" title="\${String((row as any).email ?? '')}">\${String((row as any).email ?? '')}</div></td>
-\t\t\t\t\t\t\t\t\t<td><span class="badge badge-sm \${String((row as any).role ?? '') === 'admin' ? 'badge-primary' : 'badge-ghost'}">\${String((row as any).role ?? '')}</span></td>
-\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[180px] text-xs opacity-50" title="\${String((row as any).createdAt ?? '')}">\${String((row as any).createdAt ?? '')}</div></td>
-\t\t\t\t\t\t\t\t\t<td>\${(row as any).banned ? html\`<span class="badge badge-sm badge-warning gap-1"><iconify-icon icon="mdi:block-helper" width="10" height="10"></iconify-icon>banned</span>\` : html\`<span class="text-xs opacity-30">—</span>\`}</td>
-\t\t\t\t\t\t\t\t\t<td class="text-right">
-\t\t\t\t\t\t\t\t\t\t<div class="drawer drawer-end">
-\t\t\t\t\t\t\t\t\t\t\t<input id="edit-user-drawer-\${String((row as any).id)}" type="checkbox" class="drawer-toggle" />
-\t\t\t\t\t\t\t\t\t\t\t<div class="drawer-content">
-\t\t\t\t\t\t\t\t\t\t\t\t<div class="flex justify-end gap-1">
-\t\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="Edit">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:pencil-outline" width="15" height="15" class="opacity-50"></iconify-icon>
-\t\t\t\t\t\t\t\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? html\`<button class="btn btn-ghost btn-xs btn-square btn-disabled" title="Ban"><iconify-icon icon="mdi:block-helper" width="15" height="15" class="opacity-20"></iconify-icon></button>\` : html\`<label for="ban-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="\${(row as any).banned ? 'Unban' : 'Ban'}"><iconify-icon icon="\${(row as any).banned ? 'mdi:lock-open-outline' : 'mdi:block-helper'}" width="15" height="15" class="opacity-50"></iconify-icon></label>\`}
-\t\t\t\t\t\t\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? html\`<button class="btn btn-ghost btn-xs btn-square btn-disabled" title="Delete"><iconify-icon icon="mdi:delete-outline" width="15" height="15" class="opacity-20"></iconify-icon></button>\` : html\`<label for="delete-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="Delete"><iconify-icon icon="mdi:delete-outline" width="15" height="15" class="opacity-50 hover:text-error"></iconify-icon></label>\`}
-\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t<div class="drawer-side z-50">
-\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" aria-label="close sidebar" class="drawer-overlay"></label>
-\t\t\t\t\t\t\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\t\t\t\t\t\t<div class="flex justify-between items-center mb-5">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class="text-base font-semibold">Edit user</h3>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" class="btn btn-sm btn-ghost btn-square">
-\t\t\t\t\t\t\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\t\t\t\t\t\t</label>
-\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/edit" hx-target="#main-content" hx-swap="outerHTML" class="flex flex-col gap-4">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
-\t\t\t\t\t\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\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
-\t\t\t\t\t\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\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Name</span></label>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input name="name" type="text" value="\${String((row as any).name ?? '')}" class="input input-bordered text-sm" required />
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Email</span></label>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input name="email" type="email" value="\${String((row as any).email ?? '')}" class="input input-bordered text-sm" required />
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Role</span></label>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<select name="role" class="select select-bordered text-sm" required>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\${String((row as any).role ?? '') === 'admin' ? html\`<option value="admin" selected>admin</option><option value="user">user</option>\` : html\`<option value="admin">admin</option><option value="user" selected>user</option>\`}
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</select>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-primary btn-sm mt-2" type="submit">Save changes</button>
-\t\t\t\t\t\t\t\t\t\t\t\t\t</form>
-\t\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t\t\t\t</div>
-${buildBanUserModal()}
-${buildDeleteUserModal()}
-\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\t\${data.length === 0 ? html\`<tr><td colspan="7" class="text-center py-12">
-\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<iconify-icon icon="mdi:account-off-outline" width="40" height="40" class="opacity-20"></iconify-icon>
-\t\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/40">No users found matching your query</p>
-\t\t\t\t\t\t\t\t</div>
-\t\t\t\t\t\t\t</td></tr>\` : ''}
-\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\`;
-`;
-}
+import { buildBanUserModal, buildDeleteUserModal } from "./modals";
+import { buildPaginationHtml } from "../../common/pagination";
+
+const USER_SORT_COLUMNS = [
+	"id",
+	"name",
+	"email",
+	"role",
+	"createdAt",
+	"banned",
+] as const;
+type UserSortColumn = (typeof USER_SORT_COLUMNS)[number];
+
+/** Column type icon mapping for users table */
+const USER_COLUMN_ICONS: Record<UserSortColumn, string> = {
+	id: "mdi:pound",
+	name: "mdi:format-text",
+	email: "mdi:at",
+	role: "mdi:shield-account-outline",
+	createdAt: "mdi:calendar",
+	banned: "mdi:toggle-switch-outline",
+};
+
+/**
+ * Builds the sortable column header anchor for a single user column.
+ */
+function buildUserColumnHeader(column: UserSortColumn): string {
+	const icon = USER_COLUMN_ICONS[column] || "mdi:format-text";
+	return `<th><a href="#" hx-get="/admin/users?page=\${page}&search=\${search}&sort=${column}&order=\${sort === '${column}' && order === 'asc' ? 'desc' : 'asc'}" hx-target="#main-content" hx-push-url="true" class="hover:text-primary flex items-center gap-1.5 transition-colors whitespace-nowrap"><iconify-icon icon="${icon}" width="14" height="14" class="opacity-40"></iconify-icon>${column} <span class="text-[10px] opacity-30">\${sort === '${column}' ? (order === 'asc' ? '▲' : '▼') : ''}</span></a></th>`;
+}
+
+/**
+ * Builds the complete users data table HTML block (runtime template string).
+ * PocketBase-style clean table with icon headers and subtle actions.
+ */
+export function buildUsersTableHtml(): string {
+	const headers = USER_SORT_COLUMNS.map(buildUserColumnHeader).join(
+		"\n\t\t\t\t\t\t\t",
+	);
+	const paginationHtml = buildPaginationHtml("/admin/users");
+
+	return `
+\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${headers}
+\t\t\t\t\t\t\t\t<th class="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) => html\`
+\t\t\t\t\t\t\t\t<tr class="hover:bg-base-200/30 transition-colors">
+\t\t\t\t\t\t\t\t\t<td><button type="button" class="truncate max-w-[220px] text-sm font-mono text-xs opacity-70 hover:opacity-100 cursor-copy text-left" title="Click to copy: \${String((row as any).id ?? '')}" data-copy-value="\${String((row as any).id ?? '')}" onclick="navigator.clipboard?.writeText(this.dataset.copyValue || '')">\${String((row as any).id ?? '')}</button></td>
+\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[220px] text-sm" title="\${String((row as any).name ?? '')}">\${String((row as any).name ?? '')}</div></td>
+\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[260px] text-sm" title="\${String((row as any).email ?? '')}">\${String((row as any).email ?? '')}</div></td>
+\t\t\t\t\t\t\t\t\t<td><span class="badge badge-sm \${String((row as any).role ?? '') === 'admin' ? 'badge-primary' : 'badge-ghost'}">\${String((row as any).role ?? '')}</span></td>
+\t\t\t\t\t\t\t\t\t<td><div class="truncate max-w-[180px] text-xs opacity-50" title="\${String((row as any).createdAt ?? '')}">\${String((row as any).createdAt ?? '')}</div></td>
+\t\t\t\t\t\t\t\t\t<td>\${(row as any).banned ? html\`<span class="badge badge-sm badge-warning gap-1"><iconify-icon icon="mdi:block-helper" width="10" height="10"></iconify-icon>banned</span>\` : html\`<span class="text-xs opacity-30">—</span>\`}</td>
+\t\t\t\t\t\t\t\t\t<td class="text-right">
+\t\t\t\t\t\t\t\t\t\t<div class="drawer drawer-end">
+\t\t\t\t\t\t\t\t\t\t\t<input id="edit-user-drawer-\${String((row as any).id)}" type="checkbox" class="drawer-toggle" />
+\t\t\t\t\t\t\t\t\t\t\t<div class="drawer-content">
+\t\t\t\t\t\t\t\t\t\t\t\t<div class="flex justify-end gap-1">
+\t\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="Edit">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:pencil-outline" width="15" height="15" class="opacity-50"></iconify-icon>
+\t\t\t\t\t\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? html\`<button class="btn btn-ghost btn-xs btn-square btn-disabled" title="Ban"><iconify-icon icon="mdi:block-helper" width="15" height="15" class="opacity-20"></iconify-icon></button>\` : html\`<label for="ban-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="\${(row as any).banned ? 'Unban' : 'Ban'}"><iconify-icon icon="\${(row as any).banned ? 'mdi:lock-open-outline' : 'mdi:block-helper'}" width="15" height="15" class="opacity-50"></iconify-icon></label>\`}
+\t\t\t\t\t\t\t\t\t\t\t\t\t\${(row as any).id === currentUserId ? html\`<button class="btn btn-ghost btn-xs btn-square btn-disabled" title="Delete"><iconify-icon icon="mdi:delete-outline" width="15" height="15" class="opacity-20"></iconify-icon></button>\` : html\`<label for="delete-user-modal-\${String((row as any).id)}" class="btn btn-ghost btn-xs btn-square" title="Delete"><iconify-icon icon="mdi:delete-outline" width="15" height="15" class="opacity-50 hover:text-error"></iconify-icon></label>\`}
+\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t<div class="drawer-side z-50">
+\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" aria-label="close sidebar" class="drawer-overlay"></label>
+\t\t\t\t\t\t\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\t\t\t\t\t\t<div class="flex justify-between items-center mb-5">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class="text-base font-semibold">Edit user</h3>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label for="edit-user-drawer-\${String((row as any).id)}" class="btn btn-sm btn-ghost btn-square">
+\t\t\t\t\t\t\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\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t\t\t<form hx-post="/admin/users/edit" hx-target="#main-content" hx-swap="outerHTML" class="flex flex-col gap-4">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input type="hidden" name="id" value="\${String((row as any).id)}" />
+\t\t\t\t\t\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\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\t\t\t\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\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Name</span></label>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input name="name" type="text" value="\${String((row as any).name ?? '')}" class="input input-bordered text-sm" required />
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Email</span></label>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input name="email" type="email" value="\${String((row as any).email ?? '')}" class="input input-bordered text-sm" required />
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-control">
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label class="label"><span class="label-text text-sm font-medium">Role</span></label>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<select name="role" class="select select-bordered text-sm" required>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\${String((row as any).role ?? '') === 'admin' ? html\`<option value="admin" selected>admin</option><option value="user">user</option>\` : html\`<option value="admin">admin</option><option value="user" selected>user</option>\`}
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</select>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class="btn btn-primary btn-sm mt-2" type="submit">Save changes</button>
+\t\t\t\t\t\t\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t\t\t</div>
+${buildBanUserModal()}
+${buildDeleteUserModal()}
+\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\t\${data.length === 0 ? html\`<tr><td colspan="7" class="text-center py-12">
+\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<iconify-icon icon="mdi:account-off-outline" width="40" height="40" class="opacity-20"></iconify-icon>
+\t\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/40">No users found matching your query</p>
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t</td></tr>\` : ''}
+\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\`;
+`;
+}

package/cli/templates/dashboard/builders/table-routes/users/index.ts

@@ -1,32 +1,32 @@
-import { buildUsersRedirectHelper } from "./redirect";
-import { buildUsersGetRoute } from "./get-route";
-import { buildUsersPostRoutes } from "./post-routes";
-
-/**
- * Builds the complete users route code string, including:
- * - Runtime helper: buildUsersRedirect
- * - Runtime helper: requireAdminSession
- * - GET /admin/users
- * - POST /admin/users/edit
- * - POST /admin/users/ban
- * - POST /admin/users/unban
- * - POST /admin/users/delete
- */
-export function buildUsersRoute(): string {
-	return `
-\t${buildUsersRedirectHelper()}
-
-\tconst requireAdminSession = async (c: any) => {
-\t\tconst auth = createAuth({ DATABASE: c.env[options.databaseBinding] } as any, c.req.raw.cf as any);
-\t\tconst session = await auth.api.getSession({ headers: c.req.raw.headers });
-\t\tif (!session?.user || (session.user as any).role !== 'admin') {
-\t\t\treturn null;
-\t\t}
-\t\treturn session;
-\t};
-
-\t${buildUsersGetRoute()}
-
-\t${buildUsersPostRoutes()}
-\t`;
-}
+import { buildUsersRedirectHelper } from "./redirect";
+import { buildUsersGetRoute } from "./get-route";
+import { buildUsersPostRoutes } from "./post-routes";
+
+/**
+ * Builds the complete users route code string, including:
+ * - Runtime helper: buildUsersRedirect
+ * - Runtime helper: requireAdminSession
+ * - GET /admin/users
+ * - POST /admin/users/edit
+ * - POST /admin/users/ban
+ * - POST /admin/users/unban
+ * - POST /admin/users/delete
+ */
+export function buildUsersRoute(): string {
+	return `
+\t${buildUsersRedirectHelper()}
+
+\tconst requireAdminSession = async (c: any) => {
+\t\tconst auth = createAuth({ DATABASE: c.env[options.databaseBinding] } as any, c.req.raw.cf as any);
+\t\tconst session = await auth.api.getSession({ headers: c.req.raw.headers });
+\t\tif (!session?.user || (session.user as any).role !== 'admin') {
+\t\t\treturn null;
+\t\t}
+\t\treturn session;
+\t};
+
+\t${buildUsersGetRoute()}
+
+\t${buildUsersPostRoutes()}
+\t`;
+}