Skip to content

Invoice Folder and Collection Grouping UI #553

Description

@Kingsman-99

Description

Users managing many invoices have no way to group or organize them beyond flat-list filtering. A folder/collection system lets users create named groups, assign invoices to one or more groups, and navigate the invoice list scoped to a selected group. This reduces cognitive overhead for teams that run concurrent projects or clients.

Technical Context

New route src/app/dashboard/folders/page.tsx and a FolderSidebar component in src/components/folders/. State managed via a Zustand slice or React Context in src/lib/store/foldersStore.ts. Invoice assignment stored in localStorage or a lightweight API route at src/app/api/folders/route.ts. The invoice list at src/app/dashboard/invoices/page.tsx gains a folderId query param to scope results. Tailwind accordion/disclosure pattern used for nested folder rendering.

Acceptance Criteria

  • Users can create, rename, and delete named folders from the dashboard sidebar
  • Any invoice can be assigned to one or more folders via a right-click context menu or an action in the multi-select toolbar
  • Selecting a folder in the sidebar filters the invoice list to show only invoices in that group
  • An "All Invoices" root item always shows the full unfiltered list
  • Folder membership persists across page reloads
  • All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

Activity

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

Metadata

Metadata

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