Skip to content

Implement Search and Filter Toolbar for Expense and Transaction Logs #380

Description

@Cjay-Cyber-2

Description — what to implement and the why/impact.

Add a robust search and filtering toolbar to the expense history and transaction logs, allowing users to quickly filter items by category, date range, participant, or settlement status.

Context & Requirements — background, constraints, design references, edge cases;

As groups accumulate expenses, finding specific transactions becomes difficult. A responsive search bar and filter chips styled in the neobrutalist aesthetic will greatly improve user experience.

Acceptance Criteria — a checklist ("- [ ] ...") of specific, testable conditions that define "done`.

  • Create src/components/expenses/ExpenseFilterBar.tsx.
  • Support text search across descriptions and memo codes (MP:CODE).
  • Support filtering by payment status (pending vs settled).

Implementation Guidance — likely files/modules to touch and a suggested approach

Touch component files in src/components/expenses/ and update state management for filter criteria.

Testing & Validation — how the contributor should prove it works

Validate filtering behavior through unit tests and manual checks across mobile and desktop viewports.

Submission Guidelines — must open a PR that includes "Closes #"; assignment is required before starting.


Wave complexity: Medium

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions