ui/components/AdminAppsPage.tsx

@@ -1,6 +1,4 @@
 import { AdminLayout } from "./AdminLayout.tsx";
-import { AdminTable } from "./admin/AdminTable.tsx";
-import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminAppsPage = ({
   apps,
@@ -60,12 +58,18 @@ export const AdminAppsPage = ({
         </div>
       </div>
 
-      {/* Register / Edit App Modal */}
+      {/* Register / Edit App Drawer */}
-      <AdminModal
+      <div
-        id="appFormModal"
+        id="appFormCard"
-        title="Register New Subsidiary Application"
+        class="card"
-        onClose="closeAppDrawer()"
+        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
       >
+        <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.
@@ -182,26 +186,42 @@ export const AdminAppsPage = ({
             </button>
           </div>
         </form>
-      </AdminModal>
+      </div>
 
-      <AdminTable
+      {/* Desktop Table View (≥ 768px) */}
-        id="appsTable"
+      <div class="card desktop-only" style="display: none;">
-        headers={[
+        <div class="table-container">
-          "Application Name",
+          <table id="appsTable">
-          "SPIFFE ID",
+            <thead>
-          "Domain",
+              <tr>
-          "Active Users",
+                <th>Application Name</th>
-          "Description",
+                <th>SPIFFE ID</th>
-          "Actions",
+                <th>Domain</th>
-        ]}
+                <th>Active Users</th>
-        isEmpty={apps.length === 0}
+                <th>Description</th>
-        emptyState="No connected applications registered yet."
+                <th>Actions</th>
-        desktopRows={apps.map((app) => (
+              </tr>
+            </thead>
+            <tbody>
+              {apps.length === 0
+                ? (
+                  <tr>
+                    <td
+                      colSpan={6}
+                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
+                    >
+                      No connected applications registered yet.
+                    </td>
+                  </tr>
+                )
+                : (
+                  apps.map((app) => (
                     <tr
                       key={app.id}
                       class="app-row"
-            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
+                      data-search={`${app.name} ${
-              .toLowerCase()}
+                        app.domain || ""
+                      } ${app.spiffe_id}`.toLowerCase()}
                     >
                       <td>
                         <strong style="color: var(--text-primary);">
@@ -247,8 +267,29 @@ export const AdminAppsPage = ({
                         </div>
                       </td>
                     </tr>
-        ))}
+                  ))
-        mobileCards={apps.map((app) => (
+                )}
+            </tbody>
+          </table>
+        </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}
@@ -309,8 +350,9 @@ export const AdminAppsPage = ({
                   </button>
                 </div>
               </div>
-        ))}
+            ))
-      />
+          )}
+      </div>
 
       <style>
         {`
@@ -352,7 +394,7 @@ export const AdminAppsPage = ({
 
           function openCreateAppDrawer() {
             document.getElementById('editAppId').value = '';
-            document.querySelector('#appFormModal h3').textContent = 'Register New Subsidiary Application';
+            document.getElementById('appFormTitle').textContent = 'Register New Subsidiary Application';
             document.getElementById('appName').value = '';
             document.getElementById('appSpiffeId').value = '';
             document.getElementById('appSpiffeId').readOnly = false;
@@ -362,13 +404,14 @@ export const AdminAppsPage = ({
             document.getElementById('appIsPublic').checked = false;
             document.getElementById('appBypassPaths').value = '';
             document.getElementById('appAllowedCidrs').value = '';
-            document.getElementById('appFormModal').style.display = 'flex';
+            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function openEditAppDrawer(appJson) {
             const app = JSON.parse(appJson);
             document.getElementById('editAppId').value = app.id;
-            document.querySelector('#appFormModal h3').textContent = 'Edit Application: ' + app.name;
+            document.getElementById('appFormTitle').textContent = 'Edit Application: ' + app.name;
             document.getElementById('appName').value = app.name || '';
             document.getElementById('appSpiffeId').value = app.spiffe_id || '';
             document.getElementById('appSpiffeId').readOnly = true;
@@ -377,11 +420,12 @@ 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('appFormModal').style.display = 'flex';
+            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function closeAppDrawer() {
-            document.getElementById('appFormModal').style.display = 'none';
+            document.getElementById('appFormCard').style.display = 'none';
           }
 
           async function handleSaveApp(e) {

ui/components/AdminInvitesPage.tsx

@@ -1,6 +1,4 @@
 import { AdminLayout } from "./AdminLayout.tsx";
-import { AdminTable } from "./admin/AdminTable.tsx";
-import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminInvitesPage = ({
   invites,
@@ -66,11 +64,14 @@ export const AdminInvitesPage = ({
         </div>
       </div>
 
-      <AdminModal
+      <div
-        id="createInviteModal"
+        id="create-invite-card"
-        title="Generate User Onboarding Token"
+        class="card"
-        onClose="toggleCreateInviteForm()"
+        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
       >
+        <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.
@@ -246,22 +247,37 @@ export const AdminInvitesPage = ({
             </button>
           </div>
         </div>
-      </AdminModal>
+      </div>
 
-      <AdminTable
+      {/* Desktop Ledger Table (≥ 768px) */}
-        id="invitesTable"
+      <div class="card desktop-only" style="display: none;">
-        headers={[
+        <div class="table-container">
-          "Invite Code",
+          <table id="invitesTable">
-          "Target App / Scope",
+            <thead>
-          "Role",
+              <tr>
-          "Capacity & Usage",
+                <th>Invite Code</th>
-          "Status",
+                <th>Target App / Scope</th>
-          "Expires",
+                <th>Role</th>
-          "Actions",
+                <th>Capacity & Usage</th>
-        ]}
+                <th>Status</th>
-        isEmpty={invites.length === 0}
+                <th>Expires</th>
-        emptyState="No active or historical invite tokens found."
+                <th>Actions</th>
-        desktopRows={invites.map((inv) => {
+              </tr>
+            </thead>
+            <tbody>
+              {invites.length === 0
+                ? (
+                  <tr>
+                    <td
+                      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;
@@ -273,26 +289,63 @@ export const AdminInvitesPage = ({
                       <tr
                         key={inv.id}
                         class="invite-row"
-              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
+                        data-search={`${inv.code} ${
-                .toLowerCase()}
+                          inv.app_name || ""
+                        } ${inv.role}`.toLowerCase()}
                       >
                         <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);">
                             {inv.code}
                           </code>
                         </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);">
+                                {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 style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
+                        <td>
-                {inv.role}
+                          <span class="badge badge-info">{inv.role}</span>
                         </td>
-              <td style="font-size: 0.85rem;">
+                        <td>
-                {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
+                          <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 && (
@@ -301,7 +354,9 @@ export const AdminInvitesPage = ({
                           {isExpired && !isExhausted && (
                             <span class="badge badge-danger">Expired</span>
                           )}
-                {isActive && <span class="badge badge-success">Active</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()}
@@ -342,8 +397,20 @@ export const AdminInvitesPage = ({
                         </td>
                       </tr>
                     );
-        })}
+                  })
-        mobileCards={invites.map((inv) => {
+                )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Mobile Adaptive Cards View (< 768px) */}
+      <div
+        id="invitesMobileDeck"
+        class="mobile-only"
+        style="display: flex; flex-direction: column; gap: 0.75rem;"
+      >
+        {invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -437,20 +504,29 @@ export const AdminInvitesPage = ({
             </div>
           );
         })}
-      />
+      </div>
 
       {/* Redemptions Modal */}
-      <AdminModal
+      <div
         id="redemptions-modal"
-        title={
+        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;"
-          <span>
+      >
+        <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 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);">
               Users Claimed:{" "}
               <code id="modal-invite-code" style="color: var(--primary);">
               </code>
-          </span>
+            </h3>
-        }
+            <button
-        onClose="closeRedemptionsModal()"
+              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;"
@@ -469,7 +545,8 @@ export const AdminInvitesPage = ({
               Close
             </button>
           </div>
-      </AdminModal>
+        </div>
+      </div>
 
       <style>
         {`
@@ -529,11 +606,8 @@ export const AdminInvitesPage = ({
           }
 
           function toggleCreateInviteForm() {
-            const el = document.getElementById('createInviteModal');
+            const el = document.getElementById('create-invite-card');
-            el.style.display = el.style.display === 'none' ? 'flex' : 'none';
+            el.style.display = el.style.display === 'none' ? 'block' : 'none';
-            if (el.style.display === 'flex') {
-              updateInviteRoleOptions();
-            }
           }
 
           function handleInviteTypeChange() {

ui/components/AdminRolesPage.tsx

@@ -1,10 +1,4 @@
 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,
@@ -41,11 +35,17 @@ export const AdminRolesPage = ({
       </div>
 
       {/* Create / Edit Role Drawer */}
-      <AdminModal
+      <div
-        id="roleFormModal"
+        id="roleFormCard"
-        title="Create New Role"
+        class="card"
-        onClose="closeRoleDrawer()"
+        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
       >
+        <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>
-      </AdminModal>
+      </div>
 
       <div class="card">
         {/* Instant Search and Scope Filters */}
@@ -410,7 +410,7 @@ export const AdminRolesPage = ({
           }
 
           function closeRoleDrawer() {
-            document.getElementById('roleFormModal').style.display = 'none';
+            document.getElementById('roleFormCard').style.display = 'none';
           }
 
           function handleScopeChange() {

ui/components/AdminUserDetailsPage.tsx

@@ -1,5 +1,4 @@
 import { AdminLayout } from "./AdminLayout.tsx";
-import { AdminTable } from "./admin/AdminTable.tsx";
 
 export const AdminUserDetailsPage = ({
   user,
@@ -146,19 +145,32 @@ export const AdminUserDetailsPage = ({
           </form>
         </div>
 
-        <div style="margin-top: 1.25rem;">
+        <div class="table-container" style="margin-top: 1.25rem;">
-          <AdminTable
+          <table>
-            id="grantsTable"
+            <thead>
-            headers={[
+              <tr>
-              "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</th>
-            ]}
+              </tr>
-            isEmpty={grants.length === 0}
+            </thead>
-            emptyState="No application permissions granted (User is blocked from all subsidiary apps)."
+            <tbody>
-            desktopRows={grants.map((grant) => (
+              {grants.length === 0
+                ? (
+                  <tr>
+                    <td
+                      colSpan={5}
+                      style="text-align: center; color: var(--danger); padding: 1.5rem;"
+                    >
+                      No application permissions granted (User is blocked from
+                      all subsidiary apps).
+                    </td>
+                  </tr>
+                )
+                : (
+                  grants.map((grant) => (
                     <tr key={grant.id}>
                       <td>
                         <strong style="color: var(--text-primary);">
@@ -189,34 +201,10 @@ export const AdminUserDetailsPage = ({
                         </button>
                       </td>
                     </tr>
-            ))}
+                  ))
-            mobileCards={grants.map((grant) => (
+                )}
-              <div class="card" key={grant.id} style="margin-bottom: 0;">
+            </tbody>
-                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
+          </table>
-                  <strong style="color: var(--text-primary);">
-                    {grant.app_name}
-                  </strong>
-                  <span class="badge badge-info">{grant.role}</span>
-                </div>
-                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; font-family: monospace;">
-                  {grant.spiffe_id}
-                </div>
-                <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()}
-                  </span>
-                  <button
-                    type="button"
-                    class="btn-danger"
-                    style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
-                    onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
-                  >
-                    Revoke Access
-                  </button>
-                </div>
-              </div>
-            ))}
-          />
         </div>
       </div>
 

ui/components/admin/AdminModal.tsx

@@ -1,40 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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>
-    </>
-  );
-};