Approval Gate

Enterprise
Workflow

Priority-based approval interface with AI recommendations and SLA tracking

Financial Approval

High priority vendor payment approval

Approval Required
financial transaction
high
35m remaining
58% of SLA
0%75%90%100%
Escalates to Sarah Chen (CFO) in 35m

Vendor Payment - Acme Corporation

Amount
$25,000
Recipient
Acme Corporation
AI Recommendation92% confidence
Approve - within budget and matches contract terms
Context
contract value$100,000
previous payments3
budget remaining$50,000
Approvers
John Smith
Finance Manager
REQUIRED
Notifications via:emailslack

Critical Priority

Urgent approval requiring immediate attention

Approval Required
security incident
critical
10m remaining
33% of SLA
0%75%90%100%
Escalates to Alex Rivera (CEO) in 10m

Emergency Access Grant - Production Database

AI Recommendation78% confidence
Requires manual review - unusual access pattern detected
Approvers
Security Team
Security Officer
REQUIRED
CTO
Chief Technology Officer
REQUIRED
Notifications via:email

Features

  • Approve/reject/modify action buttons
  • Priority levels (critical, high, medium, low) with color coding
  • Integrated SLA countdown timer with escalation warnings
  • AI recommendation display with confidence scores
  • Contextual information panel
  • Comment/rationale text input
  • Multiple approvers with required/optional flags
  • Notification channel indicators

Usage

import { ApprovalGate } from '@/components/ui/approval-gate'

<ApprovalGate
  action={{
    type: 'financial_transaction',
    title: 'Vendor Payment - Acme Corporation',
    amount: '$25,000',
    recipient: 'Acme Corporation',
    priority: 'high',
    ai_confidence: 0.92,
    ai_recommendation: 'Approve - within budget'
  }}
  context={{
    contract_value: '$100,000',
    previous_payments: 3
  }}
  approvers={[
    { name: 'John Smith', role: 'Finance Manager', required: true }
  ]}
  slaMinutes={60}
  elapsedMinutes={25}
  escalatesTo={{ level: 'CFO', name: 'Sarah Chen' }}
  notificationChannels={['email', 'slack']}
  onApprove={(data) => console.log('Approved:', data)}
  onReject={(data) => console.log('Rejected:', data)}
/>