feat: move product catalog to new settings page

frontend/src/App.jsx

@@ -49,6 +49,7 @@ const GenerateLink = lazy(() => import("./page/GenerateLink"));
 const CreateInvoicesBatch = lazy(() => import("./page/CreateInvoicesBatch"));
 const BatchPayment = lazy(() => import("./page/BatchPayment"));
 const NotFound = lazy(() => import("./page/NotFound"));
+const Settings = lazy(() => import("./page/Settings"));
 
 function App() {
   return (
@@ -107,6 +108,7 @@ function App() {
                           path="batch-invoice"
                           element={<CreateInvoicesBatch />}
                         />
+                        <Route path="settings" element={<Settings />} />
                       </Route>
                       <Route path="feature" element={<Feature />} />
                       <Route path="about" element={<About />} />

frontend/src/page/CreateInvoice.jsx

@@ -51,7 +51,7 @@ import {
 } from "@/utils/invoiceValidation";
 import toast from "react-hot-toast";
 
-import ProductCatalogImport from "../components/ProductCatalogImport";
+
 import { AmountTypeToggle } from "../components/AmountTypeToggle";
 import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -1159,8 +1159,6 @@ function CreateInvoice() {
             </div>
           </div>
 
-          {/* Product Catalog Import Section */}
-          <ProductCatalogImport />
 
           {/* Invoice Items Section */}
           <div className="mb-6 sm:mb-8">

frontend/src/page/CreateInvoicesBatch.jsx

@@ -57,7 +57,7 @@ import {
   getClientAddressError,
   validateBatchInvoiceData,
 } from "@/utils/invoiceValidation";
-import ProductCatalogImport from "@/components/ProductCatalogImport";
+
 import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import {
@@ -1056,8 +1056,6 @@ function CreateInvoicesBatch() {
             </div>
           </div>
 
-          <ProductCatalogImport />
-
           {/* Clean Invoice Rows */}
           <div className="w-full mb-6 sm:mb-8 space-y-4">
             <div className="flex items-center justify-between">

frontend/src/page/Home.jsx

@@ -11,6 +11,7 @@ import MailOutlineIcon from "@mui/icons-material/MailOutline";
 import DraftsIcon from "@mui/icons-material/Drafts";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import LinkIcon from "@mui/icons-material/Link";
+import SettingsIcon from "@mui/icons-material/Settings";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
@@ -63,6 +64,12 @@ export default function Home() {
       route: "pending",
       color: "#60a5fa",
     },
+    {
+      text: "Settings",
+      icon: <SettingsIcon />,
+      route: "settings",
+      color: "#9ca3af",
+    },
   ];
 
   return (

frontend/src/page/Settings.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import ProductCatalogImport from "../components/ProductCatalogImport";
+
+function Settings() {
+  return (
+    <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6 py-6">
+      <div className="mb-6 sm:mb-8">
+        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
+          Settings
+        </h2>
+        <p className="text-sm sm:text-base text-gray-300">
+          Manage your account settings and product catalog
+        </p>
+      </div>
+
+      <div className="space-y-6 sm:space-y-8">
+        {/* Product Catalog Section */}
+        <section>
+          <div className="mb-4">
+            <h3 className="text-xl font-semibold text-white">Product Catalog</h3>
+            <p className="text-sm text-gray-400">
+              Manage your products for quick access when creating invoices.
+            </p>
+          </div>
+          <ProductCatalogImport />
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default Settings;