Workflow Status

Enterprise
Workflow

Multi-step progress visualization with assignee tracking and SLA warnings

Horizontal Layout

Multi-step workflow with progress tracking

Progress1 of 4 complete
Submitted
AI Agent
10:30 AM
Manager Review
John Smith
35m left
Finance Approval
S
M
A
Executed

Vertical Layout

Timeline-style vertical display

Progress1 of 4 complete
Submitted
AI Agent
10:30 AM
Manager Review
John Smith
35m left
Finance Approval
S
M
A
Executed

Compact Mode

Space-efficient vertical layout

Submitted
Manager Review
Finance Approval
Executed

Failed Workflow

Showing failed and skipped states

Progress1 of 3 complete
Data Validation
10:00 AM
Security Check
Security System
10:05 AM
Deployment

Features

  • Multi-step progress visualization with status indicators
  • 5 status types: complete, active, failed, skipped, pending
  • Horizontal and vertical layout options
  • SLA warnings with time remaining
  • Assignee information with AI/human indicators
  • Parallel assignees display for multi-approval steps
  • Progress bar showing overall completion
  • Compact mode for space-constrained layouts

Usage

import { WorkflowStatus } from '@/components/ui/workflow-status'

const steps = [
  {
    label: 'Submitted',
    status: 'complete',
    timestamp: '2024-12-05T10:30:00Z',
    assignee: 'AI Agent'
  },
  {
    label: 'Manager Review',
    status: 'active',
    assignee: { name: 'John Smith' },
    sla_minutes: 60,
    elapsed_minutes: 25
  },
  {
    label: 'Finance Approval',
    status: 'pending',
    parallel_assignees: [
      { name: 'Sarah Chen' },
      { name: 'Mike Johnson' }
    ]
  }
]

<WorkflowStatus
  layout="horizontal"
  steps={steps}
  showProgress={true}
  showSLAWarnings={true}
  onStepClick={(step, idx) => console.log(step)}
/>