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
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.tsxand aFolderSidebarcomponent insrc/components/folders/. State managed via a Zustand slice or React Context insrc/lib/store/foldersStore.ts. Invoice assignment stored inlocalStorageor a lightweight API route atsrc/app/api/folders/route.ts. The invoice list atsrc/app/dashboard/invoices/page.tsxgains afolderIdquery param to scope results. Tailwind accordion/disclosure pattern used for nested folder rendering.Acceptance Criteria