Admin Dashboard Structure
Relevant source files
The following files were used as context for generating this wiki page:
- frontend/src/components/admin/AdminLayout.jsx
- frontend/src/components/admin/AdminSidebar.jsx
- frontend/src/pages/AdminHome.jsx
- frontend/src/components/admin/InteractionDetail.jsx
- frontend/src/components/admin/AnomalyBreakdown.jsx
- frontend/src/pages/admin/InteractionDetail.jsx
- frontend/src/components/admin/ReviewInterface.jsx
The Admin Dashboard serves as the central monitoring and auditing hub for the AI anomaly detection system. Its primary purpose is to provide administrators and medical safety analysts with a production-grade interface to monitor safety signals, review flagged AI interactions, and perform expert verification on medical LLM outputs. The structure is designed to transition from high-level system metrics to granular, multi-stage analysis of individual conversations.
Architecturally, the dashboard follows a "Clinical Intelligence" design philosophy, utilizing a layered approach that integrates real-time metrics, automated risk scoring, and a human-in-the-loop review workflow. It is built using a component-based React architecture, leveraging a shared layout system and specialized services for metrics and administration.
Sources: frontend/src/pages/AdminHome.jsx:11-15, frontend/src/styles/variables.css:1-10, frontend/src/components/admin/AdminSidebar.jsx:1-10
Layout and Navigation
The dashboard utilizes a persistent structural framework defined by the AdminLayout component. This layout manages the spatial composition of the interface, separating navigation from the main content area.
Core Layout Components
- AdminSidebar: A vertical navigation bar providing access to core modules: Admin Home, All Interactions, Customer Lookup, and Flagged Review. It includes a live monitoring status badge and branding for "MediGuard AI".
- Navbar: A top-level component for global actions and user context.
- AdminMain: The primary scrollable area containing the page header (title/subtitle) and the dynamic content body.
Sources: frontend/src/components/admin/AdminLayout.jsx:6-26, frontend/src/components/admin/AdminSidebar.jsx:7-78
The diagram shows the hierarchical relationship between the layout wrapper and its navigational/content sub-components. Sources: frontend/src/components/admin/AdminLayout.jsx, frontend/src/components/admin/AdminSidebar.jsx
Admin Home and Metrics
The AdminHome page acts as a high-level command center, displaying system-wide health through a metrics grid and anomaly breakdowns.
Metrics Tracking
The dashboard tracks several key performance and safety indicators:
| Metric | Description | Source |
|---|---|---|
| Total Interactions | Cumulative count of all processed AI conversations. | metricsService.getMetrics() |
| Flag Rate | Percentage of interactions flagged for potential safety risks. | metrics.flagged_rate |
| Reviewed Items | Total count of interactions verified by human reviewers. | metrics.reviewed_count |
| Avg Review Time | Mean time taken for a human analyst to complete a review. | metrics.avg_review_time_seconds |
| Volume (24h/7d) | Throughput of interactions over specific time windows. | metrics.volume |
Sources: frontend/src/pages/AdminHome.jsx:13-71, frontend/src/components/admin/AnomalyBreakdown.jsx:1-30
Anomaly Classification
The AnomalyBreakdown component categorizes detected issues into five primary dimensions.
Visual breakdown of the anomaly categories tracked by the system. Sources: frontend/src/components/admin/AnomalyBreakdown.jsx:21-28
Interaction Detail Pipeline
The most granular level of the dashboard is the InteractionDetail view, which implements a multi-stage pipeline representing the lifecycle of an interaction through the ML processing system.
Pipeline Stages
- L1: Interaction Log: Ingests raw data, including the user prompt and the AI's original response.
- L2: Record Analysis: Performs feature extraction to identify medical topics and set risk context flags (e.g., missing disclaimers, emergency cases).
- L3: Risk Scoring: Executes ML model inference to generate specific risk scores (0.0 to 1.0) for safety, factuality, triage, medication dosing, and anxiety.
- L4: Explainability Layer: Uses RAG (Retrieval-Augmented Generation) to generate natural language explanations and cite specific medical guidelines.
- L5: Human Review: The final quality assurance stage where an expert provides a manual label (SAFE, UNSAFE, BORDERLINE).
Sources: frontend/src/components/admin/InteractionDetail.jsx:116-368, frontend/src/pages/admin/InteractionDetail.jsx:45-75
The sequence diagram illustrates the data flow through the analytical stages of the Interaction Detail view. Sources: frontend/src/components/admin/InteractionDetail.jsx
Review Interface
The ReviewInterface component facilitates the human-in-the-loop workflow. It allows authorized reviewers to override or confirm automated flags and provide corrective data.
- Human Labeling: Options to mark interactions as
SAFE,UNSAFE, orBORDERLINE. - Corrected Response: A text area for reviewers to provide a gold-standard response if the original AI output was deficient.
- Reviewer Comments: A section for qualitative notes regarding the audit decision.
- State Management: The interface handles submission states, locking fields after submission unless an "Edit Review" action is triggered.
Sources: frontend/src/components/admin/ReviewInterface.jsx:5-125, frontend/src/pages/AdminReviewPage.jsx:38-51
Summary
The Admin Dashboard structure provides a robust framework for managing AI safety in medical contexts. By combining high-level metric monitoring on the Admin Home with a rigorous, five-level Interaction Detail pipeline, the system ensures that automated anomaly detection is backed by transparent explanations and expert human oversight. This tiered architecture enables a scalable audit trail that maintains clinical standards and transparency across all AI-patient interactions.