tylerg/auth-yes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
auth-yes/tasks/new/2026-0824.07.gem.feat.ui-admin.mobile-admin-cards-and-filters-2218.md

2.9 KiB
Raw Blame History

TASK METADATA

  • Target Files: ui/components/AdminUsersPage.tsx, ui/components/AdminUserDetailsPage.tsx, ui/components/AdminAppsPage.tsx, ui/components/AdminInvitesPage.tsx, ui/components/AdminRolesPage.tsx, ui/components/AuditLogPage.tsx
  • Core Objective: Adapt admin management screens (Users, Invites, Apps, Roles, Audit Logs) into responsive mobile card lists with horizontal sub-navigation and quick search filters.
  • Dependencies: tasks/new/2026-0824.04.gem.feat.ui-shell.design-tokens-and-adaptive-nav-2215.md
  • Additional Important Notes: Must preserve high-density table views on wide screens while providing seamless mobile card layouts for system administrators on mobile devices.

1. TASK METADATA

The header block specifies target admin templates, core objective, dependencies, and constraints.

2. Architectural Considerations & Risks

Risks

  • Audit Log Volume on Mobile: Large audit log event streams can degrade mobile rendering performance if loaded all at once.
    • Mitigation: Implement pagination / limit query rendering to recent events with an expandable JSON detail drawer for raw event metadata.
  • Admin Action Mis-triggers: Role modifications or user deletions on mobile touchscreens need clear danger boundaries.
    • Mitigation: Use color-coded danger buttons (btn-danger) with confirmation prompts on high-impact administrative actions.

Alternatives

  • Separate Mobile Admin App vs Adaptive SSR Views: Building a separate mobile admin view duplicates route handlers. Using adaptive CSS @media (max-width: 768px) card transformations preserves a single unified codebase in pure Hono SSR JSX.

3. Proposed Implementation

Phase 1: Mobile User & Invite Management

  1. In ui/components/AdminUsersPage.tsx and ui/components/AdminUserDetailsPage.tsx:
    • Render user cards on mobile with avatar initials, username, creation date, role grant badges, and 1-tap action buttons (Edit Roles, Revoke).
    • Add responsive top search filter input.
  2. In ui/components/AdminInvitesPage.tsx:
    • Render active invite codes as copy-ready cards with 1-tap clipboard action and expiration countdown badges.

Phase 2: App Registry & Role Grants

  1. In ui/components/AdminAppsPage.tsx and ui/components/AdminRolesPage.tsx:
    • Transform apps list into responsive cards showing domain, bypass paths, SPIFFE ID, and assigned user roles.

Phase 3: Audit Log Event Feed

  1. In ui/components/AuditLogPage.tsx:
    • Implement responsive timeline card feed with color-coded event chips (login_success in green, login_failed in red, grant_revoked in amber).
    • Add expandable JSON detail viewer for raw event payloads.

Phase 4: Verification & Quality Gates

  1. Run deno fmt ui/**/*.tsx.
  2. Run deno task lint and deno task check.
  3. Run deno task test to ensure all admin routes and SSR components pass cleanly.