Approval Gate

Enterprise

Workflow

Block

Priority-based approval interface for AI actions with confidence scores, reasoning, and escalation timers. Features approve/reject/modify workflows with multi-approver support.

Preview

AI task reorganization requiring approval

Approval Required

bulk reschedule

high

35m remaining

58% of deadline

0%75%90%100%

Escalates to No changes made (Auto-expire) in 35m

Move 4 tasks to next week

Amount

4 tasks

Recipient

Monday, Jan 6

AI Recommendation

85%

Approve - this matches your past scheduling preferences and protects focus time

Context

high priority hours12 hours

tasks affected4

focus time gained6 hours

Comment / Rationale (optional)

Approvers

Olivia Chen

Task owner

REQUIRED

Notifications via:emailpush

Priority Levels

Four priority levels with color-coded styling

Approval Required

critical action

critical

5m remaining

33% of deadline

0%75%90%100%

Critical priority action

AI Recommendation

92%

Requires immediate attention

Comment / Rationale (optional)

Notifications via:email

Approval Required

medium action

medium

1h 30m remaining

75% of deadline

0%75%90%100%

Medium priority action

AI Recommendation

78%

Review when convenient

Comment / Rationale (optional)

Notifications via:email

Content Approval

AI-generated content awaiting review

Approval Required

content generation

medium

1h 15m remaining

63% of deadline

0%75%90%100%

Escalates to Post will not be published (Skip) in 1h 15m

Social media post ready for LinkedIn

AI Recommendation

78%

Review recommended - content generated from Q1 campaign data

Comment / Rationale (optional)

Approvers

Sofia Rodriguez

Content Manager

REQUIRED

Olivia Chen

Marketing Manager

Notifications via:email

Props

ApprovalGate component API reference

Prop	Type	Default	Description
`action*`	`ApprovalAction`	—	The action requiring approval with details
`context`	`Record<string, any>`	—	Additional context information to display
`approvers`	`Approver[]`	`[]`	List of approvers with roles and requirements
`slaMinutes`	`number`	`60`	Time limit before escalation (in minutes)
`elapsedMinutes`	`number`	`0`	Time already elapsed since request
`escalatesTo`	`{ level: string; name: string }`	—	Escalation target when SLA expires
`onApprove`	`(data: { comment: string; action: ApprovalAction }) => void`	—	Callback when approved
`onReject`	`(data: { comment: string }) => void`	—	Callback when rejected
`onModify`	`(data: { action: ApprovalAction }) => void`	—	Callback when modifications are requested
`notificationChannels`	`string[]`	`['email']`	Channels for sending notifications
`showContext`	`boolean`	`true`	Show the context information panel

ApprovalAction Type

Prop	Type	Default	Description
`type`	`string`	—	Action type identifier
`title*`	`string`	—	Action title
`amount`	`string`	—	Amount or quantity involved
`recipient`	`string`	—	Target or recipient
`reason`	`string`	—	Reason for the action
`priority`	`'critical' \| 'high' \| 'medium' \| 'low'`	—	Priority level
`ai_confidence`	`number`	—	AI confidence score (0-1)
`ai_recommendation`	`string`	—	AI recommendation text

Approver Type

Prop	Type	Default	Description
`name*`	`string`	—	Approver name
`role*`	`string`	—	Approver role
`required`	`boolean`	—	Whether approval is required

Usage

Import and implementation example

import { ApprovalGate } from '@/blocks/workflow/approval-gate'

export default function Example() {
  const handleApprove = (data) => {
    console.log('Approved:', data.action, 'Comment:', data.comment)
    // Process approval
  }

  const handleReject = (data) => {
    console.log('Rejected with comment:', data.comment)
    // Handle rejection
  }

  return (
    <ApprovalGate
      action={{
        type: 'bulk_reschedule',
        title: 'Move 4 tasks to next week',
        amount: '4 tasks',
        recipient: 'Monday, Jan 6',
        priority: 'high',
        ai_confidence: 0.85,
        ai_recommendation: 'Approve - matches your scheduling preferences'
      }}
      context={{
        high_priority_hours: '12 hours',
        tasks_affected: 4,
        focus_time_gained: '6 hours'
      }}
      approvers={[
        { name: 'Olivia Chen', role: 'Task owner', required: true }
      ]}
      slaMinutes={60}
      elapsedMinutes={25}
      escalatesTo={{ level: 'Auto-expire', name: 'No changes made' }}
      notificationChannels={['email', 'push']}
      onApprove={handleApprove}
      onReject={handleReject}
    />
  )
}

Built With

1 component

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

Button

Features

Built-in functionality

Approve/reject/modify: Three action buttons for complete workflow control
Priority levels: Critical, high, medium, low with color-coded badges
Escalation timer: Integrated countdown with deadline warnings
AI recommendations: Display AI confidence and recommendation text
Context panel: Show relevant context information for decisions
Comment input: Add rationale for approval or rejection
Multiple approvers: Support required and optional approvers
Notification channels: Show notification methods (email, push, etc.)
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Approve, modify, and reject are native button elementsComment textarea is a native form elementPriority badge uses color and text for status

Keyboard Navigation

Key	Action
`Tab`	Navigate between comment input and action buttons
`Enter / Space`	Activate focused button

Notes

Priority is communicated through both color and text label
AI confidence score is displayed numerically
Timer shows remaining time visually and numerically
Required approvers are marked with badge
Consider adding aria-live for timer updates

Related Components

Escalation Timer AI Confidence Indicator Button Badge