feat: move product catalog to new settings page

[Atharva0506]

Addressed Issues:

Fixes #(TODO:issue number)

Screenshots/Recordings:

freecompress-setting.page.mp4

Additional Notes:

This PR introduces a new Settings page to the dashboard and extracts the ProductCatalogImport component from the invoice creation pages (CreateInvoice.jsx and CreateInvoicesBatch.jsx).

Previously, the product catalog management interface cluttered the invoice forms. By migrating this to a dedicated Settings page, we provide a cleaner and more focused user experience. Users can now manage their product catalog independently, while the autocomplete functionality on the invoice forms continues to pull data seamlessly from the catalog.

Changes Made

• New Feature*: Added Settings.jsx to serve as a centralized place for managing user settings and the product catalog.
• Routing: Configured /dashboard/settings with React lazy loading in App.jsx.
• Navigation: Added a new "Settings" entry to the sidebar menu in Home.jsx.
• Refactor: Removed the ProductCatalogImport component from CreateInvoice.jsx and CreateInvoicesBatch.jsx to reduce visual clutter.

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• New Features
  • Added a new Settings page, accessible from the main navigation and dashboard area.
  • Introduced a Product Catalog section within Settings.
• UI Updates
  • Added a Settings menu item to both mobile and desktop navigation.
• Bug Fixes
  • Simplified invoice creation screens by removing the Product Catalog Import section from invoice flows.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e9701863-c3a0-4dca-8369-c17cdb093271

📥 Commits

Reviewing files that changed from the base of the PR and between 584c0dc and 300bf20.

📒 Files selected for processing (5)

• frontend/src/App.jsx
• frontend/src/page/CreateInvoice.jsx
• frontend/src/page/CreateInvoicesBatch.jsx
• frontend/src/page/Home.jsx
• frontend/src/page/Settings.jsx

---

Walkthrough

A new Settings page is introduced with a Product Catalog section, registered as a lazy-loaded nested route under the dashboard path, and linked from the Home menu. ProductCatalogImport rendering is removed from CreateInvoice and CreateInvoicesBatch pages.

Changes

Settings Page Introduction and Product Catalog Relocation

Layer / File(s)	Summary
New Settings page frontend/src/page/Settings.jsx	New Settings component renders a header and a Product Catalog section containing ProductCatalogImport, exported as default.
Route and menu wiring frontend/src/App.jsx, frontend/src/page/Home.jsx	Settings is lazily imported and registered as a nested route under dashboard/settings; a new "Settings" menu item with icon and route is added to Home's menu items.
Product Catalog removal from invoice pages frontend/src/page/CreateInvoice.jsx, frontend/src/page/CreateInvoicesBatch.jsx	ProductCatalogImport import and its JSX rendering are removed from both invoice creation pages.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Home
  participant App
  participant Settings
  User->>Home: click Settings menu item
  Home->>App: navigate to /dashboard/settings
  App->>Settings: lazy load and render Settings
  Settings-->>User: display Product Catalog section

Loading

Possibly related PRs

• StabilityNexus/Chainvoice#6: Both PRs modify frontend/src/App.jsx's routing structure, adding/refactoring nested dashboard routes.
• StabilityNexus/Chainvoice#157: Main PR relocates ProductCatalogImport from invoice pages into the new Settings page, building directly on the integration introduced in this PR.

Suggested labels: Typescript Lang

Poem

A hop, a click, a settings gleam,
Catalogs moved to their own dream,
Invoices lighter, tidy, neat,
A rabbit's work is now complete. 🐇⚙️
Thump-thump — ship it clean!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: moving product catalog management to a new Settings page.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}