Skip to main content

Phase 3: Admin Portal Core

Build the authenticated admin portal shell at admin.redactedworld.com with navigation, a dashboard, theme support, and the initial integrations for chat, forum, and notification services.

Prerequisites

  • Phase 2 -- Login flow must be working so users can reach the admin portal with a valid session.
  • Phase 1 -- Keycloak, SpiceDB, and data stores must be running.

Blocks

IDBlockDescriptionAcceptance Criteria
3.1Admin portal shell (layout, nav, routing)Create the admin Angular app with a responsive sidebar, top bar (user avatar, notifications bell, theme toggle), and lazy-loaded route modules for each feature area.Navigating between routes renders the correct module; the sidebar highlights the active route; the layout is responsive down to 768 px.
3.2Dashboard pageBuild the default landing page of the admin portal showing summary cards: total domains, recent scans, active alerts, and quick-action buttons (new scan, add domain).Dashboard loads within 2 seconds; cards show real data from API calls (or graceful empty states if no data exists yet).
3.3Theme switcher in admin portalPort the theme switcher from the landing page into the admin portal, applying the selected theme to all admin components. Share theme tokens via a common library.Toggling themes in the admin portal updates colors, typography, and component styles instantly; the choice syncs with the landing page preference.
3.4Integrate chat serviceStand up the chat-service (NestJS + gRPC), create PostgreSQL tables for channels and messages, and build an admin UI panel for real-time messaging (WebSocket via NATS).Users can send and receive messages in real time; messages persist across page reloads; the chat panel is accessible from the sidebar.
3.5Integrate forum serviceStand up the forum-service (NestJS + gRPC), create PostgreSQL tables for categories, threads, and posts, index posts in Elasticsearch, and build a forum UI module.Users can create threads, post replies, and search posts by keyword; search results appear within 1 second.
3.6Integrate notificationsStand up the notification-service (NestJS + gRPC), subscribe to NATS events (scan complete, new chat message, forum reply), and deliver in-app notifications via WebSocket.Notifications appear in the bell dropdown in real time; clicking a notification navigates to the relevant page; notifications can be marked as read.
3.7Profile & account settingsBuild a profile page where users can update their display name, avatar, email, and password (delegated to Keycloak Account API).Changes save successfully and are reflected across the portal; password change triggers Keycloak re-authentication.

Estimated Scope

AreaFiles / Resources
Angular appadmin/src/app/ (shell, dashboard, chat, forum, notifications, profile modules)
Shared librarylibs/theme-tokens/ (SCSS variables and TypeScript constants)
Backend servicesservices/chat-service/, services/forum-service/, services/notification-service/
Proto filesproto/chat.proto, proto/forum.proto, proto/notification.proto
DatabasePostgreSQL schemas: chat, forum, notification
ElasticsearchIndex: forum-posts
NATS subjectsevents.scan.complete, events.chat.message, events.forum.reply
Kubernetesk8s/admin/, k8s/chat-service/, k8s/forum-service/, k8s/notification-service/