Review Queue

Enterprise
Workflow

Items that need your attention before AI proceeds with suggested actions. Displays prioritized queue with search, filtering, sorting, and batch operations for efficient review workflows.

Preview

AI suggestions, team requests, and automations awaiting approval

Review Queue4

Marcus Johnson requested access to Marketing Strategy project
criticalin review92%
12/26/2025olivia.chenDue 05:00 PM
Task reorganization for next week
highpending85%
12/26/2025Due 05:00 PM
AI wants to create recurring task: Weekly team status update
mediumpending78%
12/25/2025Due 05:00 PM
AI-drafted LinkedIn post ready for approval
lowapproved91%
12/26/2025sofia.rodriguezDue 09:00 AM

Empty State

When all items have been reviewed

Review Queue0

All Clear!

No items need review right now.

Props

ReviewQueue component API reference

PropTypeDefaultDescription
itemsReviewQueueItem[][]Array of items to display
sortBy'priority' | 'date' | 'confidence''priority'Initial sort order
onItemClick(item: ReviewQueueItem) => void—Callback when item is clicked
onBatchAction(action: string, itemIds: string[]) => void—Callback for batch operations
batchActionsstring[]['Approve All', 'Reject All', 'Assign to Me']Available batch actions
enableBatchSelectbooleantrueEnable multi-select for batch operations
emptyState{ title?: string; description?: string }—Custom empty state content

ReviewQueueItem Type

PropTypeDefaultDescription
id*string—Unique identifier
type*string—Item type (ai_suggestion, team_request, etc.)
title*string—Item title
priority*'critical' | 'high' | 'medium' | 'low'—Priority level
status*'pending' | 'in_review' | 'approved' | 'rejected'—Current status
confidencenumber—AI confidence score (0-1)
assigneestring | null—Assigned reviewer
due_datestring | Date—Due date (ISO format)
created_at*string | Date—Creation timestamp

Usage

Import and implementation example

import { ReviewQueue } from '@/blocks/workflow/review-queue'

const items = [
  {
    id: 'item-1',
    type: 'ai_suggestion',
    title: 'Task reorganization for next week',
    priority: 'high',
    confidence: 0.85,
    status: 'pending',
    assignee: null,
    due_date: '2025-12-27T17:00:00Z',
    created_at: '2025-12-26T09:01:00Z'
  }
]

export default function Example() {
  return (
    <ReviewQueue
      items={items}
      sortBy="priority"
      enableBatchSelect={true}
      batchActions={['Approve All', 'Reject All']}
      onItemClick={(item) => console.log('Clicked:', item)}
      onBatchAction={(action, items) => console.log(action, items)}
    />
  )
}

Built With

3 components

This block uses the following UI components from the design system:

ButtonCheckboxInput

Features

Built-in functionality

  • Priority sorting: Color-coded priorities (critical, high, medium, low)
  • Real-time search: Filter items by title as you type
  • Sort options: Sort by priority, date, or confidence score
  • Batch selection: Select multiple items for bulk operations
  • Status indicators: Visual badges for pending, in review, approved, rejected
  • Assignee tracking: Shows who is assigned to each item
  • Due date warnings: Highlights overdue items in red
  • AI confidence scores: Displays confidence percentage per item
  • Empty state: Customizable message when queue is empty
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Checkbox selection uses native checkbox semanticsItems are clickable regions with keyboard supportSearch input has proper label association

Keyboard Navigation

KeyAction
TabNavigate between controls and items
Enter / SpaceSelect/deselect items or activate buttons

Notes

  • Priority indicated by color and text label
  • Status shown as readable text badge
  • Due dates formatted in readable date format
  • Confidence shown as percentage number

Related Components

Batch Actions ToolbarApproval GateWorkflow StatusAudit Log