Escalation Timer

Enterprise
Workflow

Countdown timer with urgency indicators and SLA tracking for time-sensitive approvals

Timer States

Different urgency levels based on elapsed time

Normal State (35% elapsed)

1h 18m remaining
65% of SLA
0%75%90%100%
Escalates to Sarah Chen (Senior Manager) in 1h 18m
50% alert
75% alert
90% alert

Warning State (80% elapsed)

24m remaining
20% of SLA
0%75%90%100%
Escalates to Mike Johnson (CFO) in 24m
50% alert
75% alert
90% alert

Critical State (95% elapsed)

6m remaining
5% of SLA
0%75%90%100%
Escalates to Alex Rivera (CEO) in 6m
50% alert
75% alert
90% alert

Sizes

Small, medium, and large variants

Small

15m remaining
25% of SLA
0%75%90%100%
Escalates to John Doe (Manager) in 15m

Medium (default)

15m remaining
25% of SLA
0%75%90%100%
Escalates to John Doe (Manager) in 15m

Large

15m remaining
25% of SLA
0%75%90%100%
Escalates to John Doe (Manager) in 15m

Expired State

Timer shows when SLA has been exceeded

SLA Expired
Escalation triggered
0%75%90%100%

Features

  • Visual countdown display with time remaining
  • Urgency indicators with color-coded states (normal, warning, critical, expired)
  • Progress bar with threshold markers
  • Next escalation level and timing information
  • Notification status tracking
  • Pause/resume functionality
  • Multiple size options

Usage

import { EscalationTimer } from '@/components/ui/escalation-timer'

<EscalationTimer
  slaMinutes={120}
  elapsedMinutes={96}
  warningThreshold={0.75}
  criticalThreshold={0.9}
  nextEscalation={{
    level: 'CFO',
    name: 'Mike Johnson',
    triggerAt: 120
  }}
  notifications={[
    { at: 0.5, sent: true },
    { at: 0.75, sent: true },
    { at: 0.9, sent: false }
  ]}
  pausable={true}
  onPause={() => console.log('Paused')}
  onResume={() => console.log('Resumed')}
/>