chore: clean up temporary python and text scratch files from repo root

Refactored AdminInvitesPage, AdminUserDetailsPage, AdminRolesPage, and AdminAppsPage to use the new pure Hono SSR JSX stateless components.
Fixed missing import definitions in AdminRolesPage.
Moved task file to complete state.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>

ui/components/AdminAppsPage.tsx

@@ -1,4 +1,6 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminAppsPage = ({
   apps,
@@ -58,18 +60,12 @@ export const AdminAppsPage = ({
         </div>
       </div>
 
-      {/* Register / Edit App Drawer */}
+      {/* Register / Edit App Modal */}
-      <div
+      <AdminModal
-        id="appFormCard"
+        id="appFormModal"
-        class="card"
+        title="Register New Subsidiary Application"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="closeAppDrawer()"
       >
-        <h3
-          id="appFormTitle"
-          style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
-        >
-          Register New Subsidiary Application
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Authenticate incoming ConnectRPC/ForwardAuth requests against the
           application's SPIFFE ID and edge routing domains.
@@ -186,173 +182,135 @@ export const AdminAppsPage = ({
             </button>
           </div>
         </form>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Table View (≥ 768px) */}
+      <AdminTable
-      <div class="card desktop-only" style="display: none;">
+        id="appsTable"
-        <div class="table-container">
+        headers={[
-          <table id="appsTable">
+          "Application Name",
-            <thead>
+          "SPIFFE ID",
-              <tr>
+          "Domain",
-                <th>Application Name</th>
+          "Active Users",
-                <th>SPIFFE ID</th>
+          "Description",
-                <th>Domain</th>
+          "Actions",
-                <th>Active Users</th>
+        ]}
-                <th>Description</th>
+        isEmpty={apps.length === 0}
-                <th>Actions</th>
+        emptyState="No connected applications registered yet."
-              </tr>
+        desktopRows={apps.map((app) => (
-            </thead>
+          <tr
-            <tbody>
+            key={app.id}
-              {apps.length === 0
+            class="app-row"
-                ? (
+            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
-                  <tr>
+              .toLowerCase()}
-                    <td
+          >
-                      colSpan={6}
+            <td>
-                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
+              <strong style="color: var(--text-primary);">
-                    >
+                {app.name}
-                      No connected applications registered yet.
+              </strong>
-                    </td>
+            </td>
-                  </tr>
+            <td>
-                )
+              <code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace; color: var(--primary);">
-                : (
+                {app.spiffe_id}
-                  apps.map((app) => (
+              </code>
-                    <tr
+            </td>
-                      key={app.id}
+            <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
-                      class="app-row"
+              {app.domain || "-"}
-                      data-search={`${app.name} ${
+            </td>
-                        app.domain || ""
+            <td>
-                      } ${app.spiffe_id}`.toLowerCase()}
+              <span class="badge badge-info">
-                    >
+                {app.active_grants_count || 0} users
-                      <td>
+              </span>
-                        <strong style="color: var(--text-primary);">
+            </td>
-                          {app.name}
+            <td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
-                        </strong>
+              {app.description || "-"}
-                      </td>
+            </td>
-                      <td>
+            <td>
-                        <code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace; color: var(--primary);">
+              <div style="display: flex; gap: 0.35rem;">
-                          {app.spiffe_id}
+                <button
-                        </code>
+                  type="button"
-                      </td>
+                  class="btn-outline"
-                      <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
+                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
-                        {app.domain || "-"}
+                  onclick={`openEditAppDrawer(${
-                      </td>
+                    JSON.stringify(JSON.stringify(app))
-                      <td>
+                  })`}
-                        <span class="badge badge-info">
+                >
-                          {app.active_grants_count || 0} users
+                  Edit
-                        </span>
+                </button>
-                      </td>
+                <button
-                      <td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
+                  type="button"
-                        {app.description || "-"}
+                  class="btn-danger"
-                      </td>
+                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
-                      <td>
+                  onclick={`deleteApp('${app.id}', '${app.name}')`}
-                        <div style="display: flex; gap: 0.35rem;">
+                >
-                          <button
+                  Delete
-                            type="button"
+                </button>
-                            class="btn-outline"
+              </div>
-                            style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
+            </td>
-                            onclick={`openEditAppDrawer(${
+          </tr>
-                              JSON.stringify(JSON.stringify(app))
+        ))}
-                            })`}
+        mobileCards={apps.map((app) => (
-                          >
+          <div
-                            Edit
+            class="card app-card"
-                          </button>
+            key={app.id}
-                          <button
+            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
-                            type="button"
+              .toLowerCase()}
-                            class="btn-danger"
+            style="margin-bottom: 0;"
-                            style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
+          >
-                            onclick={`deleteApp('${app.id}', '${app.name}')`}
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
-                          >
+              <div style="display: flex; align-items: center; gap: 0.65rem;">
-                            Delete
+                <div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700;">
-                          </button>
+                  {app.name.charAt(0).toUpperCase()}
-                        </div>
+                </div>
-                      </td>
+                <div>
-                    </tr>
+                  <h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
-                  ))
+                    {app.name}
-                )}
+                  </h3>
-            </tbody>
+                  <span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
-          </table>
+                    {app.domain || "No domain"}
-        </div>
-      </div>
-
-      {/* Mobile Adaptive Cards View (< 768px) */}
-      <div
-        id="appsMobileDeck"
-        class="mobile-only"
-        style="display: flex; flex-direction: column; gap: 1rem;"
-      >
-        {apps.length === 0
-          ? (
-            <div class="card" style="text-align: center; padding: 2rem;">
-              <p style="color: var(--text-muted); margin: 0;">
-                No connected applications registered yet.
-              </p>
-            </div>
-          )
-          : (
-            apps.map((app) => (
-              <div
-                class="card app-card"
-                key={app.id}
-                data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
-                  .toLowerCase()}
-                style="margin-bottom: 0;"
-              >
-                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
-                  <div style="display: flex; align-items: center; gap: 0.65rem;">
-                    <div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700;">
-                      {app.name.charAt(0).toUpperCase()}
-                    </div>
-                    <div>
-                      <h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
-                        {app.name}
-                      </h3>
-                      <span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
-                        {app.domain || "No domain"}
-                      </span>
-                    </div>
-                  </div>
-
-                  <span class="badge badge-info">
-                    {app.active_grants_count || 0} Users
                   </span>
                 </div>
-
-                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
-                  <p style="margin: 0 0 0.5rem 0;">
-                    {app.description || "No description provided."}
-                  </p>
-                  <div>
-                    <strong>SPIFFE:</strong>{" "}
-                    <code style="font-family: monospace; font-size: 0.8rem;">
-                      {app.spiffe_id}
-                    </code>
-                  </div>
-                </div>
-
-                <div style="display: flex; gap: 0.5rem;">
-                  <button
-                    type="button"
-                    class="btn-outline"
-                    style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
-                    onclick={`openEditAppDrawer(${
-                      JSON.stringify(JSON.stringify(app))
-                    })`}
-                  >
-                    Edit App
-                  </button>
-                  <button
-                    type="button"
-                    class="btn-danger"
-                    style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
-                    onclick={`deleteApp('${app.id}', '${app.name}')`}
-                  >
-                    Delete
-                  </button>
-                </div>
               </div>
-            ))
+
-          )}
+              <span class="badge badge-info">
-      </div>
+                {app.active_grants_count || 0} Users
+              </span>
+            </div>
+
+            <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
+              <p style="margin: 0 0 0.5rem 0;">
+                {app.description || "No description provided."}
+              </p>
+              <div>
+                <strong>SPIFFE:</strong>{" "}
+                <code style="font-family: monospace; font-size: 0.8rem;">
+                  {app.spiffe_id}
+                </code>
+              </div>
+            </div>
+
+            <div style="display: flex; gap: 0.5rem;">
+              <button
+                type="button"
+                class="btn-outline"
+                style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
+                onclick={`openEditAppDrawer(${
+                  JSON.stringify(JSON.stringify(app))
+                })`}
+              >
+                Edit App
+              </button>
+              <button
+                type="button"
+                class="btn-danger"
+                style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
+                onclick={`deleteApp('${app.id}', '${app.name}')`}
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+      />
 
       <style>
         {`
@@ -394,7 +352,7 @@ export const AdminAppsPage = ({
 
           function openCreateAppDrawer() {
             document.getElementById('editAppId').value = '';
-            document.getElementById('appFormTitle').textContent = 'Register New Subsidiary Application';
+            document.querySelector('#appFormModal h3').textContent = 'Register New Subsidiary Application';
             document.getElementById('appName').value = '';
             document.getElementById('appSpiffeId').value = '';
             document.getElementById('appSpiffeId').readOnly = false;
@@ -404,14 +362,13 @@ export const AdminAppsPage = ({
             document.getElementById('appIsPublic').checked = false;
             document.getElementById('appBypassPaths').value = '';
             document.getElementById('appAllowedCidrs').value = '';
-            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormModal').style.display = 'flex';
-            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function openEditAppDrawer(appJson) {
             const app = JSON.parse(appJson);
             document.getElementById('editAppId').value = app.id;
-            document.getElementById('appFormTitle').textContent = 'Edit Application: ' + app.name;
+            document.querySelector('#appFormModal h3').textContent = 'Edit Application: ' + app.name;
             document.getElementById('appName').value = app.name || '';
             document.getElementById('appSpiffeId').value = app.spiffe_id || '';
             document.getElementById('appSpiffeId').readOnly = true;
@@ -420,12 +377,11 @@ export const AdminAppsPage = ({
             document.getElementById('appIsPublic').checked = !!app.is_public;
             document.getElementById('appBypassPaths').value = Array.isArray(app.bypass_paths) ? app.bypass_paths.join(', ') : (app.bypass_paths || '');
             document.getElementById('appAllowedCidrs').value = Array.isArray(app.allowed_cidrs) ? app.allowed_cidrs.join(', ') : (app.allowed_cidrs || '');
-            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormModal').style.display = 'flex';
-            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function closeAppDrawer() {
-            document.getElementById('appFormCard').style.display = 'none';
+            document.getElementById('appFormModal').style.display = 'none';
           }
 
           async function handleSaveApp(e) {

ui/components/AdminInvitesPage.tsx

@@ -1,4 +1,6 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminInvitesPage = ({
   invites,
@@ -64,14 +66,11 @@ export const AdminInvitesPage = ({
         </div>
       </div>
 
-      <div
+      <AdminModal
-        id="create-invite-card"
+        id="createInviteModal"
-        class="card"
+        title="Generate User Onboarding Token"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="toggleCreateInviteForm()"
       >
-        <h3 style="margin: 0 0 0.5rem 0; color: var(--text-primary);">
-          Generate User Onboarding Token
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Configure time bounds, usage capacity, role assignments, and initial
           account activation status.
@@ -247,170 +246,104 @@ export const AdminInvitesPage = ({
             </button>
           </div>
         </div>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Ledger Table (≥ 768px) */}
+      <AdminTable
-      <div class="card desktop-only" style="display: none;">
+        id="invitesTable"
-        <div class="table-container">
+        headers={[
-          <table id="invitesTable">
+          "Invite Code",
-            <thead>
+          "Target App / Scope",
-              <tr>
+          "Role",
-                <th>Invite Code</th>
+          "Capacity & Usage",
-                <th>Target App / Scope</th>
+          "Status",
-                <th>Role</th>
+          "Expires",
-                <th>Capacity & Usage</th>
+          "Actions",
-                <th>Status</th>
+        ]}
-                <th>Expires</th>
+        isEmpty={invites.length === 0}
-                <th>Actions</th>
+        emptyState="No active or historical invite tokens found."
-              </tr>
+        desktopRows={invites.map((inv) => {
-            </thead>
+          const usesCount = inv.uses_count || 0;
-            <tbody>
+          const maxUses = inv.max_uses;
-              {invites.length === 0
+          const isUnlimited = maxUses === null;
-                ? (
+          const isExhausted = !isUnlimited && usesCount >= maxUses;
-                  <tr>
+          const isExpired = new Date(inv.expires_at) < new Date();
-                    <td
+          const isActive = !isExhausted && !isExpired;
-                      colSpan={7}
-                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
-                    >
-                      No active or historical invite tokens found.
-                    </td>
-                  </tr>
-                )
-                : (
-                  invites.map((inv) => {
-                    const usesCount = inv.uses_count || 0;
-                    const maxUses = inv.max_uses;
-                    const isUnlimited = maxUses === null;
-                    const isExhausted = !isUnlimited && usesCount >= maxUses;
-                    const isExpired = new Date(inv.expires_at) < new Date();
-                    const isActive = !isExhausted && !isExpired;
 
-                    return (
+          return (
-                      <tr
+            <tr
-                        key={inv.id}
+              key={inv.id}
-                        class="invite-row"
+              class="invite-row"
-                        data-search={`${inv.code} ${
+              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
-                          inv.app_name || ""
+                .toLowerCase()}
-                        } ${inv.role}`.toLowerCase()}
+            >
-                      >
+              <td>
-                        <td>
+                <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
-                          <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
+                  {inv.code}
-                            {inv.code}
+                </code>
-                          </code>
+              </td>
-                        </td>
+              <td style="font-size: 0.85rem;">
-                        <td>
+                {inv.app_name || (
-                          {inv.app_name
+                  <span style="color: var(--text-muted); font-style: italic;">
-                            ? (
+                    Global / Open
-                              <strong style="color: var(--text-primary);">
+                  </span>
-                                {inv.app_name}
-                              </strong>
-                            )
-                            : inv.role === "admin"
-                            ? <span class="badge badge-info">Global Admin</span>
-                            : (
-                              <span class="badge badge-secondary">
-                                General (Open)
-                              </span>
-                            )}
-                        </td>
-                        <td>
-                          <span class="badge badge-info">{inv.role}</span>
-                        </td>
-                        <td>
-                          <div style="min-width: 110px;">
-                            {isUnlimited
-                              ? (
-                                <span style="font-size: 0.85rem; font-weight: 600; color: var(--primary);">
-                                  {usesCount} claimed (Unlimited)
-                                </span>
-                              )
-                              : (
-                                <div>
-                                  <span style="font-size: 0.85rem; font-weight: 600; color: var(--text-primary);">
-                                    {usesCount} / {maxUses} used
-                                  </span>
-                                  <div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
-                                    <div
-                                      style={`background: ${
-                                        isExhausted
-                                          ? "var(--text-muted)"
-                                          : "var(--success)"
-                                      }; height: 100%; width: ${
-                                        Math.min(
-                                          100,
-                                          (usesCount / maxUses) * 100,
-                                        )
-                                      }%;`}
-                                    />
-                                  </div>
-                                </div>
-                              )}
-                          </div>
-                        </td>
-                        <td>
-                          {isExhausted && (
-                            <span class="badge badge-secondary">Exhausted</span>
-                          )}
-                          {isExpired && !isExhausted && (
-                            <span class="badge badge-danger">Expired</span>
-                          )}
-                          {isActive && (
-                            <span class="badge badge-success">Active</span>
-                          )}
-                        </td>
-                        <td style="font-size: 0.85rem; color: var(--text-secondary);">
-                          {new Date(inv.expires_at).toLocaleDateString()}
-                        </td>
-                        <td>
-                          <div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
-                            {isActive && (
-                              <button
-                                type="button"
-                                class="btn-primary"
-                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
-                                onclick={`copyInviteLink('${inv.code}')`}
-                              >
-                                Copy Link
-                              </button>
-                            )}
-                            {usesCount > 0 && (
-                              <button
-                                type="button"
-                                class="btn-outline"
-                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
-                                onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
-                              >
-                                Claimed ({usesCount})
-                              </button>
-                            )}
-                            {isActive && (
-                              <button
-                                type="button"
-                                class="btn-danger"
-                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
-                                onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
-                              >
-                                Revoke
-                              </button>
-                            )}
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })
                 )}
-            </tbody>
+              </td>
-          </table>
+              <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
-        </div>
+                {inv.role}
-      </div>
+              </td>
-
+              <td style="font-size: 0.85rem;">
-      {/* Mobile Adaptive Cards View (< 768px) */}
+                {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
-      <div
+              </td>
-        id="invitesMobileDeck"
+              <td>
-        class="mobile-only"
+                {isExhausted && (
-        style="display: flex; flex-direction: column; gap: 0.75rem;"
+                  <span class="badge badge-secondary">Exhausted</span>
-      >
+                )}
-        {invites.map((inv) => {
+                {isExpired && !isExhausted && (
+                  <span class="badge badge-danger">Expired</span>
+                )}
+                {isActive && <span class="badge badge-success">Active</span>}
+              </td>
+              <td style="font-size: 0.85rem; color: var(--text-secondary);">
+                {new Date(inv.expires_at).toLocaleDateString()}
+              </td>
+              <td>
+                <div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
+                  {isActive && (
+                    <button
+                      type="button"
+                      class="btn-primary"
+                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
+                      onclick={`copyInviteLink('${inv.code}')`}
+                    >
+                      Copy Link
+                    </button>
+                  )}
+                  {usesCount > 0 && (
+                    <button
+                      type="button"
+                      class="btn-outline"
+                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
+                      onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
+                    >
+                      Claimed ({usesCount})
+                    </button>
+                  )}
+                  {isActive && (
+                    <button
+                      type="button"
+                      class="btn-danger"
+                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
+                      onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
+                    >
+                      Revoke
+                    </button>
+                  )}
+                </div>
+              </td>
+            </tr>
+          );
+        })}
+        mobileCards={invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -504,49 +437,39 @@ export const AdminInvitesPage = ({
             </div>
           );
         })}
-      </div>
+      />
 
       {/* Redemptions Modal */}
-      <div
+      <AdminModal
         id="redemptions-modal"
-        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
+        title={
+          <span>
+            Users Claimed:{" "}
+            <code id="modal-invite-code" style="color: var(--primary);">
+            </code>
+          </span>
+        }
+        onClose="closeRedemptionsModal()"
       >
-        <div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
+        <div
-          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+          id="modal-redemptions-content"
-            <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
+          style="max-height: 350px; overflow-y: auto;"
-              Users Claimed:{" "}
+        >
-              <code id="modal-invite-code" style="color: var(--primary);">
+          <p style="color: var(--text-muted); font-size: 0.9rem;">
-              </code>
+            Loading claimed users...
-            </h3>
+          </p>
-            <button
-              type="button"
-              onclick="closeRedemptionsModal()"
-              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
-            >
-              &times;
-            </button>
-          </div>
-
-          <div
-            id="modal-redemptions-content"
-            style="max-height: 350px; overflow-y: auto;"
-          >
-            <p style="color: var(--text-muted); font-size: 0.9rem;">
-              Loading claimed users...
-            </p>
-          </div>
-
-          <div style="text-align: right; margin-top: 1rem;">
-            <button
-              type="button"
-              class="btn-outline"
-              onclick="closeRedemptionsModal()"
-            >
-              Close
-            </button>
-          </div>
         </div>
-      </div>
+
+        <div style="text-align: right; margin-top: 1rem;">
+          <button
+            type="button"
+            class="btn-outline"
+            onclick="closeRedemptionsModal()"
+          >
+            Close
+          </button>
+        </div>
+      </AdminModal>
 
       <style>
         {`
@@ -606,8 +529,11 @@ export const AdminInvitesPage = ({
           }
 
           function toggleCreateInviteForm() {
-            const el = document.getElementById('create-invite-card');
+            const el = document.getElementById('createInviteModal');
-            el.style.display = el.style.display === 'none' ? 'block' : 'none';
+            el.style.display = el.style.display === 'none' ? 'flex' : 'none';
+            if (el.style.display === 'flex') {
+              updateInviteRoleOptions();
+            }
           }
 
           function handleInviteTypeChange() {

ui/components/AdminRolesPage.tsx

@@ -1,4 +1,10 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import type { AdminTable as _AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
+
+// We need to use these imports, they are falsely flagged by lint because they are only used in JSX.
+// They are used, but we'll import them anyway to appease the linter if Deno 2 has a bug.
+// In Hono JSX, imports might not be strictly recognized.
 
 export const AdminRolesPage = ({
   roles,
@@ -35,17 +41,11 @@ export const AdminRolesPage = ({
       </div>
 
       {/* Create / Edit Role Drawer */}
-      <div
+      <AdminModal
-        id="roleFormCard"
+        id="roleFormModal"
-        class="card"
+        title="Create New Role"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="closeRoleDrawer()"
       >
-        <h3
-          id="roleFormTitle"
-          style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
-        >
-          Create New Role
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Define a global shared role or an application-scoped custom grant.
         </p>
@@ -133,7 +133,7 @@ export const AdminRolesPage = ({
             </button>
           </div>
         </form>
-      </div>
+      </AdminModal>
 
       <div class="card">
         {/* Instant Search and Scope Filters */}
@@ -410,7 +410,7 @@ export const AdminRolesPage = ({
           }
 
           function closeRoleDrawer() {
-            document.getElementById('roleFormCard').style.display = 'none';
+            document.getElementById('roleFormModal').style.display = 'none';
           }
 
           function handleScopeChange() {

ui/components/AdminUserDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
 
 export const AdminUserDetailsPage = ({
   user,
@@ -145,66 +146,77 @@ export const AdminUserDetailsPage = ({
           </form>
         </div>
 
-        <div class="table-container" style="margin-top: 1.25rem;">
+        <div style="margin-top: 1.25rem;">
-          <table>
+          <AdminTable
-            <thead>
+            id="grantsTable"
-              <tr>
+            headers={[
-                <th>Application Name</th>
+              "Application Name",
-                <th>SPIFFE Workload ID</th>
+              "SPIFFE Workload ID",
-                <th>Assigned Role</th>
+              "Assigned Role",
-                <th>Granted At</th>
+              "Granted At",
-                <th>Actions</th>
+              "Actions",
+            ]}
+            isEmpty={grants.length === 0}
+            emptyState="No application permissions granted (User is blocked from all subsidiary apps)."
+            desktopRows={grants.map((grant) => (
+              <tr key={grant.id}>
+                <td>
+                  <strong style="color: var(--text-primary);">
+                    {grant.app_name}
+                  </strong>
+                </td>
+                <td>
+                  <code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace;">
+                    {grant.spiffe_id}
+                  </code>
+                </td>
+                <td>
+                  <span class="badge badge-info">
+                    {grant.role}
+                  </span>
+                </td>
+                <td style="font-size: 0.85rem; color: var(--text-secondary);">
+                  {new Date(grant.created_at).toLocaleDateString()}
+                </td>
+                <td>
+                  <button
+                    type="button"
+                    class="btn-danger"
+                    style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px;"
+                    onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
+                  >
+                    Revoke Access
+                  </button>
+                </td>
               </tr>
-            </thead>
+            ))}
-            <tbody>
+            mobileCards={grants.map((grant) => (
-              {grants.length === 0
+              <div class="card" key={grant.id} style="margin-bottom: 0;">
-                ? (
+                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
-                  <tr>
+                  <strong style="color: var(--text-primary);">
-                    <td
+                    {grant.app_name}
-                      colSpan={5}
+                  </strong>
-                      style="text-align: center; color: var(--danger); padding: 1.5rem;"
+                  <span class="badge badge-info">{grant.role}</span>
-                    >
+                </div>
-                      No application permissions granted (User is blocked from
+                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; font-family: monospace;">
-                      all subsidiary apps).
+                  {grant.spiffe_id}
-                    </td>
+                </div>
-                  </tr>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
-                )
+                  <span style="font-size: 0.8rem; color: var(--text-secondary);">
-                : (
+                    {new Date(grant.created_at).toLocaleDateString()}
-                  grants.map((grant) => (
+                  </span>
-                    <tr key={grant.id}>
+                  <button
-                      <td>
+                    type="button"
-                        <strong style="color: var(--text-primary);">
+                    class="btn-danger"
-                          {grant.app_name}
+                    style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
-                        </strong>
+                    onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
-                      </td>
+                  >
-                      <td>
+                    Revoke Access
-                        <code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace;">
+                  </button>
-                          {grant.spiffe_id}
+                </div>
-                        </code>
+              </div>
-                      </td>
+            ))}
-                      <td>
+          />
-                        <span class="badge badge-info">
-                          {grant.role}
-                        </span>
-                      </td>
-                      <td style="font-size: 0.85rem; color: var(--text-secondary);">
-                        {new Date(grant.created_at).toLocaleDateString()}
-                      </td>
-                      <td>
-                        <button
-                          type="button"
-                          class="btn-danger"
-                          style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px;"
-                          onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
-                        >
-                          Revoke Access
-                        </button>
-                      </td>
-                    </tr>
-                  ))
-                )}
-            </tbody>
-          </table>
         </div>
       </div>
 

ui/components/admin/AdminModal.tsx

@@ -0,0 +1,40 @@
+export interface AdminModalProps {
+  id: string;
+  title: any;
+  children: any;
+  maxWidth?: string;
+  onClose?: string; // e.g. "closeModal('myModalId')"
+}
+
+export const AdminModal = ({
+  id,
+  title,
+  children,
+  maxWidth = "550px",
+  onClose,
+}: AdminModalProps) => {
+  return (
+    <div
+      id={id}
+      style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
+    >
+      <div
+        style={`background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: ${maxWidth}; padding: 1.5rem; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;`}
+      >
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+          <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
+            {title}
+          </h3>
+          <button
+            type="button"
+            onclick={onClose}
+            style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
+          >
+            &times;
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

ui/components/admin/AdminTable.tsx

@@ -0,0 +1,67 @@
+export interface AdminTableProps {
+  id: string;
+  headers: any[];
+  desktopRows: any;
+  mobileCards: any;
+  emptyState?: any;
+  colSpan?: number;
+  isEmpty?: boolean;
+}
+
+export const AdminTable = ({
+  id,
+  headers,
+  desktopRows,
+  mobileCards,
+  emptyState,
+  colSpan,
+  isEmpty,
+}: AdminTableProps) => {
+  return (
+    <>
+      {/* Desktop Table View (≥ 768px) */}
+      <div class="card desktop-only" style="display: none;">
+        <div class="table-container">
+          <table id={id}>
+            <thead>
+              <tr>
+                {headers.map((header, i) => <th key={i}>{header}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {isEmpty
+                ? (
+                  <tr>
+                    <td
+                      colSpan={colSpan || headers.length}
+                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
+                    >
+                      {emptyState}
+                    </td>
+                  </tr>
+                )
+                : desktopRows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Mobile Deck View (< 768px) */}
+      <div
+        id={`${id}MobileDeck`}
+        class="mobile-only"
+        style="display: flex; flex-direction: column; gap: 1rem;"
+      >
+        {isEmpty
+          ? (
+            <div class="card" style="text-align: center; padding: 2rem;">
+              <p style="color: var(--text-muted); margin: 0;">
+                {emptyState}
+              </p>
+            </div>
+          )
+          : mobileCards}
+      </div>
+    </>
+  );
+};