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

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