Skip to content

Multi-Select Action Toolbar for Invoice List #506

Description

@Kingsman-99

Description

Performing the same action (archive, tag, delete) on multiple invoices requires repeating the action individually for each one, which is slow for users managing dozens of invoices. A multi-select mode with a contextual bulk-action toolbar should allow operating on several invoices at once.

Technical Context

src/components/invoice/InvoiceList.tsx adds a checkbox to each card or row when multi-select mode is active. A src/hooks/useInvoiceSelection.ts hook maintains a Set<string> of selected IDs. src/components/invoice/BulkActionToolbar.tsx (new) renders a sticky bottom bar with "Archive", "Tag", and "Delete" actions when one or more invoices are selected. Actions call batch API endpoints: src/app/api/invoices/bulk/route.ts (new).

Acceptance Criteria

  • A "Select" button activates multi-select mode, adding checkboxes to all invoice cards or rows
  • Selecting at least one invoice reveals the bulk action toolbar at the bottom of the screen
  • The toolbar displays a count of selected invoices (e.g., "3 invoices selected")
  • Clicking "Archive" in the toolbar sends a PATCH to the bulk route and optimistically updates the list
  • A "Select all on this page" checkbox in the toolbar selects all visible invoice cards simultaneously
  • All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programcomplexity: highuiUI styling and visual changes

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions