Coordinator Review Queue Screen - Likepersonsapp

Description

Paginated list screen displaying all pending expense claims awaiting coordinator review. Supports multi-select for bulk approval and provides filtering and sorting controls. Each list item shows submitter, claim total, expense types, and submission date at a glance.

Feature: Threshold-Based Expense Approval Workflow

coordinator-review-queue-screen

Summaries

The Coordinator Review Queue Screen is the primary workspace where expense coordinators manage and approve employee reimbursement requests. By providing a paginated, filterable, and bulk-actionable interface, it enables coordinators to process high volumes of claims efficiently without reviewing each one individually when batch approval is appropriate. This directly reduces the administrative overhead associated with expense management, shortening approval cycle times and accelerating cash flow for employees awaiting reimbursement. The screen's design supports organizational governance by surfacing the submitter, amount, expense categories, and submission date at a glance, allowing coordinators to make informed decisions quickly and maintain audit-ready records.

This is the highest-complexity UI component in the approval workflow and carries significant delivery risk. It depends on four other components — bulk-approval-bar, claim-status-badge, approval-workflow-service, and claim-approval-repository — all of which must be complete and stable before integration testing can begin. The paginated multi-select state machine is non-trivial: selection must persist correctly across page loads, and the selectAll() action must be scoped to the current filter context to avoid unintended bulk actions. Testing requirements are extensive: pagination boundary conditions, filter/sort combinations, multi-select state consistency, bulk approve success and partial-failure scenarios, and navigation to claim detail.

Plan for two development sprints minimum and allocate dedicated QA cycles on both mobile and frontend execution contexts. Accessibility testing for the multi-select pattern is also required.

The screen is a stateful widget (or equivalent BLoC/Riverpod provider) managing three orthogonal state slices: paginated claim list, selection set (Set of claimIds), and active filter/sort options. loadPendingClaims() paginates via claim-approval-repository with cursor or offset pagination; the selection set must survive page transitions, requiring the full selection to live outside the page-local widget tree. selectAll() must select only claims matching the current filter, not all claims in the database — this requires either fetching all matching IDs or server-side select-all semantics. triggerBulkApprove() delegates to approval-workflow-service and must handle partial failures gracefully (some claims approved, others failed), updating the list and selection state accordingly.

applyFilter() and applySortOrder() reset pagination to page 0 and clear selection to prevent stale state. Integrates with bulk-approval-bar via a reactive count stream and claim-status-badge as a pure display subcomponent.

Responsibilities

Render paginated list of pending claims with summary info
Manage bulk-select checkbox state across pages
Trigger bulk approve action for selected claims
Navigate to individual claim detail for single-claim review

Interfaces

loadPendingClaims(page, pageSize)

selectClaim(claimId)

deselectClaim(claimId)

selectAll()

clearSelection()

openClaimDetail(claimId)

triggerBulkApprove(selectedIds)

refreshQueue()

applyFilter(filterOptions)

applySortOrder(sortOption)

Relationships

Dependencies (4)

Components this component depends on

data Claim Approval Decision Repository service Approval Workflow Service ui Bulk Approval Action Bar ui Claim Status Badge Shared

Related Data Entities (2)

Data entities managed by this component

Claim Event 8 fields audit Expense Claim 18 fields core