web-app-launcher/plans/mvp-web-app-launcher/phase-6-admin-panel.md

Phase 6: Admin Panel

Status: ✅ Complete Parent plan: PLAN.md Domain: fullstack

Objective

Build the admin panel with user management, group management, app management, board management, and system settings configuration.

Tasks

• Task 1: Create src/routes/admin/+layout.server.ts — admin auth guard (role check)
• Task 2: Create src/routes/admin/+layout.svelte — admin layout with nav
• Task 3: Create src/routes/api/users/+server.ts — GET (list), POST (create user)
• Task 4: Create src/routes/api/users/[id]/+server.ts — GET, PATCH, DELETE
• Task 5: Create src/routes/api/groups/+server.ts — GET (list), POST (create group)
• Task 6: Create src/routes/api/groups/[id]/+server.ts — GET, PATCH, DELETE
• Task 7: Create src/routes/api/admin/settings/+server.ts — GET, PATCH system settings
• Task 8: Create src/routes/admin/users/+page.server.ts — load users
• Task 9: Create src/routes/admin/users/+page.svelte — user management page
• Task 10: Create src/routes/admin/groups/+page.server.ts — load groups
• Task 11: Create src/routes/admin/groups/+page.svelte — group management page
• Task 12: Create src/routes/admin/settings/+page.server.ts — load/update settings
• Task 13: Create src/routes/admin/settings/+page.svelte — system settings page
• Task 14: Create src/lib/components/admin/UserTable.svelte — user list with actions
• Task 15: Create src/lib/components/admin/GroupTable.svelte — group list with actions
• Task 16: Create src/lib/components/admin/SettingsForm.svelte — settings form
• Task 17: Create src/lib/components/admin/PermissionEditor.svelte — permission assignment UI
• Task 18: Create src/routes/api/search/+server.ts — global search endpoint (searches apps + boards)

Files to Modify/Create

• src/routes/admin/+layout.server.ts
• src/routes/admin/+layout.svelte
• src/routes/admin/users/+page.server.ts
• src/routes/admin/users/+page.svelte
• src/routes/admin/groups/+page.server.ts
• src/routes/admin/groups/+page.svelte
• src/routes/admin/settings/+page.server.ts
• src/routes/admin/settings/+page.svelte
• src/routes/api/users/+server.ts
• src/routes/api/users/[id]/+server.ts
• src/routes/api/groups/+server.ts
• src/routes/api/groups/[id]/+server.ts
• src/routes/api/admin/settings/+server.ts
• src/routes/api/search/+server.ts
• src/lib/components/admin/*.svelte

Acceptance Criteria

• Admin-only routes are protected (non-admin users get 403/redirect)
• Users can be created, edited, deleted, assigned to groups
• Groups can be created, edited, deleted
• System settings can be viewed and updated (auth mode, registration, theme defaults, healthcheck defaults)
• Search API returns matching apps and boards filtered by user permissions
• All forms use Superforms + Zod validation

Notes

• Admin role is checked in +layout.server.ts — redirect non-admins
• User creation by admin sets password directly (no email verification in MVP)
• OAuth config fields in settings are stored but non-functional until post-MVP Phase 2
• Permission editor UI: simple select dropdowns for entity + target + level
• ⚠️ Big Bang: functional but minimally styled until Phase 7

Review Checklist

• All tasks completed
• Code follows project conventions
• No unintended side effects
• Build passes
• Tests pass (new + existing)

Handoff to Next Phase

What was built:

• Admin layout with auth guard (requireAdmin) and navigation (Users/Groups/Settings + Back to Dashboard)
• User management: full CRUD via Superforms, inline role editing, group membership management (add/remove), delete with confirmation
• Group management: full CRUD via Superforms, inline editing, member count display, default group toggle
• System settings: auth mode selector (local/oauth/both), registration toggle, OAuth config fields (stored, non-functional), theme defaults (dark/light + hex color), healthcheck defaults (JSON)
• Permission editor: reusable component with entity type/entity, target type/target, and level selectors, grant/revoke actions, existing permissions table
• Search API: GET /api/search?q=term searches apps (name, description, category) and boards (name, description), filters results by user permissions (admins see all, regular users filtered via permissionService.checkPermission)
• All API routes use the existing response envelope (success/error from $lib/server/utils/response.ts) and Zod validation schemas
• Admin API routes: /api/users (GET/POST), /api/users/[id] (GET/PATCH/DELETE), /api/groups (GET/POST), /api/groups/[id] (GET/PATCH/DELETE), /api/admin/settings (GET/PATCH)
• Self-deletion protection: admin cannot delete their own account

Available for Phase 7:

• All admin components in src/lib/components/admin/ (UserTable, GroupTable, SettingsForm, PermissionEditor) — ready for UI polish
• Admin layout nav bar — can be styled with active states, icons
• PermissionEditor is a reusable client-side component with callback props (onGrant/onRevoke) — can be integrated into any admin page