Merge pull request #35 from mrteye/monolith-decomposition-phase-2-5222039191988798562

Phase 2 UI Admin Pages Decomposition

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 */}
-      <div
-        id="appFormCard"
-        class="card"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+      {/* Register / Edit App Modal */}
+      <AdminModal
+        id="appFormModal"
+        title="Register New Subsidiary Application"
+        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,42 +182,26 @@ export const AdminAppsPage = ({
             </button>
           </div>
         </form>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Table View (≥ 768px) */}
-      <div class="card desktop-only" style="display: none;">
-        <div class="table-container">
-          <table id="appsTable">
-            <thead>
-              <tr>
-                <th>Application Name</th>
-                <th>SPIFFE ID</th>
-                <th>Domain</th>
-                <th>Active Users</th>
-                <th>Description</th>
-                <th>Actions</th>
-              </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) => (
+      <AdminTable
+        id="appsTable"
+        headers={[
+          "Application Name",
+          "SPIFFE ID",
+          "Domain",
+          "Active Users",
+          "Description",
+          "Actions",
+        ]}
+        isEmpty={apps.length === 0}
+        emptyState="No connected applications registered yet."
+        desktopRows={apps.map((app) => (
           <tr
             key={app.id}
             class="app-row"
-                      data-search={`${app.name} ${
-                        app.domain || ""
-                      } ${app.spiffe_id}`.toLowerCase()}
+            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
+              .toLowerCase()}
           >
             <td>
               <strong style="color: var(--text-primary);">
@@ -267,29 +247,8 @@ export const AdminAppsPage = ({
               </div>
             </td>
           </tr>
-                  ))
-                )}
-            </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) => (
+        ))}
+        mobileCards={apps.map((app) => (
           <div
             class="card app-card"
             key={app.id}
@@ -350,9 +309,8 @@ export const AdminAppsPage = ({
               </button>
             </div>
           </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('appFormCard').scrollIntoView({ behavior: 'smooth' });
+            document.getElementById('appFormModal').style.display = 'flex';
           }
 
           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('appFormCard').scrollIntoView({ behavior: 'smooth' });
+            document.getElementById('appFormModal').style.display = 'flex';
           }
 
           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
-        id="create-invite-card"
-        class="card"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+      <AdminModal
+        id="createInviteModal"
+        title="Generate User Onboarding Token"
+        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,37 +246,22 @@ export const AdminInvitesPage = ({
             </button>
           </div>
         </div>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Ledger Table (≥ 768px) */}
-      <div class="card desktop-only" style="display: none;">
-        <div class="table-container">
-          <table id="invitesTable">
-            <thead>
-              <tr>
-                <th>Invite Code</th>
-                <th>Target App / Scope</th>
-                <th>Role</th>
-                <th>Capacity & Usage</th>
-                <th>Status</th>
-                <th>Expires</th>
-                <th>Actions</th>
-              </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) => {
+      <AdminTable
+        id="invitesTable"
+        headers={[
+          "Invite Code",
+          "Target App / Scope",
+          "Role",
+          "Capacity & Usage",
+          "Status",
+          "Expires",
+          "Actions",
+        ]}
+        isEmpty={invites.length === 0}
+        emptyState="No active or historical invite tokens found."
+        desktopRows={invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -289,63 +273,26 @@ export const AdminInvitesPage = ({
             <tr
               key={inv.id}
               class="invite-row"
-                        data-search={`${inv.code} ${
-                          inv.app_name || ""
-                        } ${inv.role}`.toLowerCase()}
+              data-search={`${inv.code} ${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>
-                          {inv.app_name
-                            ? (
-                              <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)
+              <td style="font-size: 0.85rem;">
+                {inv.app_name || (
+                  <span style="color: var(--text-muted); font-style: italic;">
+                    Global / Open
                   </span>
                 )}
               </td>
-                        <td>
-                          <span class="badge badge-info">{inv.role}</span>
+              <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
+                {inv.role}
               </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 style="font-size: 0.85rem;">
+                {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
               </td>
               <td>
                 {isExhausted && (
@@ -354,9 +301,7 @@ 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()}
@@ -397,20 +342,8 @@ export const AdminInvitesPage = ({
               </td>
             </tr>
           );
-                  })
-                )}
-            </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) => {
+        })}
+        mobileCards={invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -504,29 +437,20 @@ 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;"
-      >
-        <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);">
+        title={
+          <span>
             Users Claimed:{" "}
             <code id="modal-invite-code" style="color: var(--primary);">
             </code>
-            </h3>
-            <button
-              type="button"
-              onclick="closeRedemptionsModal()"
-              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
+          </span>
+        }
+        onClose="closeRedemptionsModal()"
       >
-              &times;
-            </button>
-          </div>
-
         <div
           id="modal-redemptions-content"
           style="max-height: 350px; overflow-y: auto;"
@@ -545,8 +469,7 @@ export const AdminInvitesPage = ({
             Close
           </button>
         </div>
-        </div>
-      </div>
+      </AdminModal>
 
       <style>
         {`
@@ -606,8 +529,11 @@ export const AdminInvitesPage = ({
           }
 
           function toggleCreateInviteForm() {
-            const el = document.getElementById('create-invite-card');
-            el.style.display = el.style.display === 'none' ? 'block' : 'none';
+            const el = document.getElementById('createInviteModal');
+            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
-        id="roleFormCard"
-        class="card"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+      <AdminModal
+        id="roleFormModal"
+        title="Create New Role"
+        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,32 +146,19 @@ export const AdminUserDetailsPage = ({
           </form>
         </div>
 
-        <div class="table-container" style="margin-top: 1.25rem;">
-          <table>
-            <thead>
-              <tr>
-                <th>Application Name</th>
-                <th>SPIFFE Workload ID</th>
-                <th>Assigned Role</th>
-                <th>Granted At</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {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) => (
+        <div style="margin-top: 1.25rem;">
+          <AdminTable
+            id="grantsTable"
+            headers={[
+              "Application Name",
+              "SPIFFE Workload ID",
+              "Assigned Role",
+              "Granted At",
+              "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);">
@@ -201,10 +189,34 @@ export const AdminUserDetailsPage = ({
                   </button>
                 </td>
               </tr>
-                  ))
-                )}
-            </tbody>
-          </table>
+            ))}
+            mobileCards={grants.map((grant) => (
+              <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;">
+                  <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

@@ -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>
+    </>
+  );
+};