uwu rawr :3

app/dashboard/products/page.tsx

@@ -5,16 +5,17 @@ import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Product } from "@/models/products";
-import { Plus } from "lucide-react";
+import { Plus, Upload } from "lucide-react";
 import {
   fetchProductData,
   saveProductData,
   saveProductImage,
   deleteProductData,
 } from "@/lib/productData";
-import { ProductModal } from "@/components/modals/product-modal";
 import ProductTable from "@/components/tables/product-table";
-import { Category } from "@/models/categories"
+import { Category } from "@/models/categories";
+import ImportProductsModal from "@/components/modals/import-products-modal";
+import { ProductModal } from "@/components/modals/product-modal";
 
 
 export default function ProductsPage() {
@@ -33,6 +34,8 @@ export default function ProductsPage() {
     pricing: [{ minQuantity: 1, pricePerUnit: 0 }],
     image: null,
   });
+  const [importModalOpen, setImportModalOpen] = useState(false);
+  const [addProductOpen, setAddProductOpen] = useState(false);
 
   // Fetch products and categories
   useEffect(() => {
@@ -214,14 +217,23 @@ export default function ProductsPage() {
   return (
     <Layout>
       <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
-            Product Inventory
-          </h1>
-          <Button onClick={handleAddNewProduct}>
-            <Plus className="mr-2 h-5 w-5" />
-            Add Product
-          </Button>
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-2xl font-semibold">Product Inventory</h1>
+          <div className="flex items-center gap-3">
+            <Button 
+              onClick={() => setImportModalOpen(true)} 
+              variant="outline" 
+              className="gap-2"
+              disabled={true}
+            >
+              <Upload className="h-4 w-4" />
+              Import Products
+            </Button>
+            <Button onClick={() => setAddProductOpen(true)} className="gap-2">
+              <Plus className="h-4 w-4" />
+              Add Product
+            </Button>
+          </div>
         </div>
 
         <ProductTable
@@ -233,18 +245,26 @@ export default function ProductsPage() {
         />
 
         <ProductModal
-          open={modalOpen}
-          onClose={() => setModalOpen(false)}
+          open={addProductOpen}
+          onClose={() => setAddProductOpen(false)}
           onSave={handleSaveProduct}
           productData={productData}
           categories={categories}
           editing={editing}
           handleChange={handleChange}
           handleTieredPricingChange={handleTieredPricingChange}
-          handleAddTier={handleAddTier} // ✅ Ensure this is passed
-          handleRemoveTier={handleRemoveTier} // ✅ Ensure this is passed
+          handleAddTier={handleAddTier}
+          handleRemoveTier={handleRemoveTier}
           setProductData={setProductData}
         />
+
+        <ImportProductsModal
+          open={importModalOpen}
+          setOpen={setImportModalOpen}
+          onImportComplete={() => {
+            setProducts(products);
+          }}
+        />
       </div>
     </Layout>
   );