Workflow & tasks
Workflow components track multi-step processes — renewals, claim handling, onboarding — with visual progress through stages. Task cards surface individual action items from those workflows, both in compact right rail format and wider list format for task-focused pages.
Workflow card
The workflow card represents a complete workflow — a renewal process, a claim workflow, an onboarding checklist. It shows the workflow name, current stage, overall progress (as a bar), and a condensed task list showing next steps. Cards appear in grid layouts on dashboard and workflow overview pages.
Workflow status bar
The status bar provides a color-coded timeline view across all workflow stages. Segments are sized proportionally to the number of tasks in each state. It appears at the top of workflow detail pages and in claim overview headers.
Independent task cards — condensed
Condensed task cards appear in the right rail To-Do module and workflow sidebars. They show the task name, due date, assignee, and a status pill at minimum footprint.
Task cards — wide / list view
Wide task cards appear in the Tasks tab on claim and account detail pages. They provide more space for task description and surface hover-state action buttons (edit, reassign, delete).
Claim workflow strip
The claim workflow strip shows all tasks for a specific claim in a compact list with colored state indicators. It appears inside claim workflow content modules in the right rail and in claim task panels.
Claim CL-2024-01821 — Task Checklist
Design tokens
| Token | Value | Usage |
|---|---|---|
--ws-green-01 | #319B42 | Complete / done state: check, progress bar fill |
--amber-500 | #FFB900 | In-progress / due-soon state: status bar segment, pill |
--red-500 | #DB3131 | Blocked / overdue state: status bar segment, border, text |
--gray-300 | #D3D3DB | Not-started / pending state: status bar segment |
--color-border-subtle | gray-200 | Default task card border; divider lines |
--radius-md | 8px | Workflow card, task card corner radius |
Usage guidance
- Show the progress bar on every workflow card so users can assess completion at a glance.
- Surface overdue tasks prominently with red borders and status pills.
- Reveal action buttons (edit, reassign, delete) on hover only — don't crowd the default state.
- Link workflow cards to the full workflow detail page.
- Don't show more than 5 tasks in the condensed workflow card — use "View all" for the rest.
- Don't allow deletion of tasks that are referenced in audit history — archive instead.
- Don't use the workflow status bar as a step indicator — use it for proportional state visualization.
- Don't auto-advance workflow stages without user confirmation when tasks are marked complete.