Quality Dashboard
AI
Governance
New
Headline view of AI output quality: approval rate, composite quality score, compliance score, and the rejection patterns driving rework.
Interactive Demo
A typical week of marketing content review: 80% first-pass approval, tone is the most common rejection reason.
AI Output Quality Dashboard
Approval rates, quality scores, and rejection patterns across reviewed AI outputs.
Last 7 days
Reviewed
1,248
Total AI outputs
Approved (1st pass)
80%
998 approved
Rejected
7.7%
96 rejected
Avg review time
3m 12s
Per item
Quality Score
92/100+2.3
Compliance Score
98/100+0.4
Top Rejection Reasons
Most common
Tone mismatch
38 of 96 rejections (40%)
Tone mismatch38
Brand voice24
Factually incorrect17
Policy violation11
Off-topic6
Without Compliance Score
Drop the compliance card when it isn't tracked separately.
AI Output Quality Dashboard
Approval rates, quality scores, and rejection patterns across reviewed AI outputs.
Last 30 days
Reviewed
420
Total AI outputs
Approved (1st pass)
73.8%
310 approved
Rejected
21%
88 rejected
Avg review time
5m 04s
Per item
Quality Score
78/100-1.2
Top Rejection Reasons
Most common
Hallucinated facts
41 of 88 rejections (47%)
Hallucinated facts41
Tone mismatch28
Off-brand19
Empty State
No rejections yet — onboarding or quiet periods.
AI Output Quality Dashboard
Approval rates, quality scores, and rejection patterns across reviewed AI outputs.
This week
Reviewed
42
Total AI outputs
Approved (1st pass)
100%
42 approved
Rejected
0%
0 rejected
Pending
0
Awaiting review
Quality Score
100/100
Compliance Score
100/100
Top Rejection Reasons
No rejections recorded for this period.
Props
QualityDashboard component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
totalReviewed* | number | — | Total AI outputs reviewed in this period |
firstPassApproved* | number | — | Number approved on first pass (no rework) |
rejected* | number | — | Number rejected by reviewers |
pending | number | 0 | Number still awaiting review |
avgReviewTime | string | — | Pre-formatted average time to review (e.g. "3m 12s") |
qualityScore* | QualityDashboardScore | — | 0-100 composite quality score with optional change/trend |
complianceScore | QualityDashboardScore | — | 0-100 compliance score; hides the card when omitted |
rejectionReasons | RejectionReason[] | [] | Top reasons items were rejected; sorted automatically |
title | string | "AI Output Quality Dashboard" | Header title |
description | string | — | Header subtitle |
periodLabel | string | — | Context badge, e.g. "Last 7 days" |
className | string | — | Additional CSS classes |
QualityDashboardScore Type
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Score from 0 to 100 |
change | number | — | Delta vs previous period (e.g. +2.3) |
trend | "up" | "down" | "flat" | — | Override; auto-derived from change otherwise |
RejectionReason Type
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Reason text shown to reviewers |
count* | number | — | How many rejections this reason caused |
category | "tone" | "accuracy" | "compliance" | "brand" | "other" | — | Used for color coding the bar |
Usage
Import and implementation example
import { QualityDashboard } from '@/blocks/governance/quality-dashboard'
export default function ReviewQualityPage() { return ( <QualityDashboard totalReviewed={1248} firstPassApproved={998} rejected={96} pending={154} avgReviewTime="3m 12s" qualityScore={{ value: 92, change: 2.3 }} complianceScore={{ value: 98, change: 0.4 }} rejectionReasons={[ { label: 'Tone mismatch', count: 38, category: 'tone' }, { label: 'Brand voice', count: 24, category: 'brand' }, { label: 'Factually incorrect', count: 17, category: 'accuracy' }, ]} periodLabel="Last 7 days" /> )}Features
Built-in functionality
- Top-line metrics: Reviewed, approval rate, rejection rate, and avg review time at a glance
- Quality score: Composite 0-100 score with delta and trend arrow
- Optional compliance score: Track policy compliance separately from quality
- Rejection patterns: Top rejection reasons ranked by frequency with category coloring
- Most common callout: Surfaces the #1 rejection reason in an amber callout
- Auto-derived rates: Approval and rejection percentages computed from raw counts
- Dark mode: Full dark mode support via semantic color tokens
- Responsive layout: Metric strip and score grid stack down on small screens
Accessibility
Screen reader and keyboard support
ARIA Attributes
Score color is supplemented by numeric value and progress bar widthRejection reason bars include explicit count text alongside the bar visualizationTrend direction communicated via icon, color, and signed numeric deltaKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Move focus through the period badge and any embedded actions |
Notes
- No color-only signals: percentages, counts, and labels are always present
- Section headings are real h2/h4 elements for screen reader navigation
- Cards use semantic HTML so the dashboard is parseable as a document outline