# TASK METADATA

- **Target Files:** `ui/components/AdminInvitesPage.tsx`,
  `ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminRolesPage.tsx`,
  `ui/components/AdminAppsPage.tsx`, `ui/components/admin/AdminTable.tsx`,
  `ui/components/admin/AdminModal.tsx`, `ui/ui_scripts.test.ts`
- **Core Objective:** Phase 2 (UI Admin Pages Decomposition): Refactor large
  admin pages (each > 490 lines) by extracting repeated table structures, modal
  dialogs, and filters into reusable components under `ui/components/admin/`.
- **Dependencies:**
  `tasks/new/2026-0825.01.jul.story.arch.monolith-decomposition-roadmap-1845.md`
- **Additional Important Notes:** Must preserve 100% pure Hono SSR JSX layout
  styling, responsive mobile cards (< 768px), and pass `ui/ui_scripts.test.ts`.

---

### 2. Architectural Considerations & Risks

- **Risks:**
  - Breaking existing DOM event handlers or form submissions on user management,
    app creation, role binding, and invite creation.
- **Alternatives:**
  - Monolithic single-page components; rejected due to high cognitive complexity
    and code duplication across admin views.

### 3. Proposed Implementation

1. **Create Shared Admin Subcomponents (`ui/components/admin/`):**
   - `AdminTable.tsx`: Reusable data table component with desktop table and
     mobile card layout support.
   - `AdminModal.tsx`: Reusable modal wrapper with standard backdrop, header,
     and close bindings.
2. **Decompose Admin Pages:**
   - `AdminInvitesPage.tsx` (771 lines): Extract invite creation drawer and bulk
     action modals.
   - `AdminUserDetailsPage.tsx` (541 lines): Extract grant assignment table and
     session revocation panel.
   - `AdminRolesPage.tsx` (514 lines): Extract role definition forms and
     permission picker.
   - `AdminAppsPage.tsx` (493 lines): Extract app registration drawer and SPIFFE
     attestation card.
3. **Quality Gates & Validation:**
   - Run `deno fmt`, `deno task lint`, `deno task check`.
   - Run `deno test --allow-all` and verify `ui/ui_scripts.test.ts`.