How does the action stack work?
The action stack is the core UI pattern for managing disciplinary actions. Each action appears as a compact row that expands to show full detail.
Collapsed Summary Row
Each row shows at a glance:
- Chevron: Click to expand/collapse
- Action Type: Bold label (e.g., "Final Written Warning")
- Status Badge: Draft, Pending Approval, Approved, Rejected
- Date: When the action was issued
- Appeal Status: "Appeal: Upheld", "No appeal", etc.
- Quick Actions: Letter (document icon), Email (mail icon)
Expanded Detail
When expanded, the full action details appear:
- Issued date, issued by, effective date, expiry date (with days remaining)
- Description text
- Workflow buttons (Submit/Approve/Reject/Cancel)
- Nested appeals with their own status, grounds, and outcome
- "Submit Appeal" button (if no appeal exists)
Active Responsibility
The action needing attention is automatically expanded and highlighted with:
- Amber background tint
- Thicker amber left border
- "ACTION REQUIRED" label in the summary row
This applies when an action has pending approval or an open appeal.
Color-Coded Left Borders
Each action type has a distinct left-border color when expanded:
- Verbal Warning: Gray
- Written Warning: Blue
- Final Written Warning: Purple
- PIP: Teal
- Suspension: Amber
- Demotion: Orange
- Dismissal: Red