Bulk Approval Action Bar
Component Detail
Description
Sticky bottom action bar that appears when one or more claims are selected in the review queue. Displays the count of selected items and provides a single bulk-approve button. Hides automatically when the selection is cleared.
bulk-approval-bar
Summaries
The Bulk Approval Action Bar dramatically accelerates the expense approval process by allowing coordinators to approve multiple claims with a single tap rather than reviewing each one individually. For organizations with high claim volumes — such as those with frequent travel or recurring operational expenses — this capability can reduce the time coordinators spend on routine approvals by an order of magnitude. The visible count of selected items provides confidence that the right claims are selected before committing, while the clear-selection shortcut prevents accidental bulk actions. This efficiency gain translates directly into lower administrative costs and faster reimbursement turnaround for employees.
This is a low-complexity UI component with minimal development scope: show/hide visibility logic driven by selection count, a counter label, a single action button, and a clear-selection trigger. It depends on approval-workflow-service for the bulk action dispatch and is consumed by coordinator-review-queue-screen, which manages the selection state. The primary coordination risk is the interface contract between the bar and the queue screen — updateSelectionCount() must be called reactively whenever selection changes, and the bar must not own selection state itself. Testing requirements are straightforward: bar appears when count > 0, hides when count reaches 0, bulk approve triggers correctly with the full selectedIds list, and clear-selection emits the correct callback.
No pagination or async data fetching is required within this component, keeping QA scope small. Deliver alongside coordinator-review-queue-screen as they are tightly coupled.
The Bulk Approval Action Bar is a purely reactive, stateless display component. It exposes an updateSelectionCount(count) method (or accepts a count stream/prop) that drives show()/hide() visibility — the bar renders with AnimatedSlide or equivalent when count transitions from 0 to 1, and collapses when it returns to 0. onBulkApprove(selectedIds) delegates directly to approval-workflow-service.bulkApprove() and should emit a loading state on the button to prevent double-submission. onClearSelection() is a callback to the parent (coordinator-review-queue-screen) that clears the selection set — the bar does not mutate selection state directly.
Positioned as a Stack overlay or Scaffold bottomSheet in the parent screen to ensure it remains fixed at the bottom regardless of list scroll position. The component carries no local business logic beyond button disable state during async operations, making it straightforward to test with mock callbacks.
Responsibilities
- Display selected claim count
- Show and hide based on selection state
- Dispatch bulk approval action to service layer
- Provide clear-selection shortcut
Interfaces
updateSelectionCount(count)
onBulkApprove(selectedIds)
onClearSelection()
show()
hide()