Update page.tsx

app/dashboard/products/page.tsx

@@ -4,8 +4,9 @@ import { useState, useEffect, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Product } from "@/models/products";
-import { Plus, Upload } from "lucide-react";
+import { Plus, Upload, Search, RefreshCw } from "lucide-react";
 import {
   fetchProductData,
   saveProductData,
@@ -26,6 +27,7 @@ export default function ProductsPage() {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [editing, setEditing] = useState<boolean>(false);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>("");
   const [productData, setProductData] = useState<Product>({
     name: "",
     description: "",
@@ -258,6 +260,25 @@ export default function ProductsPage() {
     return category.name;
   };
 
+  // Filter products based on search term
+  const filteredProducts = products.filter(product => {
+    if (!searchTerm) return true;
+    
+    const searchLower = searchTerm.toLowerCase();
+    
+    // Search in product name
+    if (product.name.toLowerCase().includes(searchLower)) return true;
+    
+    // Search in product description if it exists
+    if (product.description && product.description.toLowerCase().includes(searchLower)) return true;
+    
+    // Search in category name
+    const categoryName = getCategoryNameById(product.category).toLowerCase();
+    if (categoryName.includes(searchLower)) return true;
+    
+    return false;
+  });
+
   const handleModalClose = () => {
     setAddProductOpen(false);
     setEditing(false);
@@ -280,6 +301,26 @@ export default function ProductsPage() {
         <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">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search products..."
+                className="w-64 pl-8"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              {searchTerm && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-0 top-0 h-9 w-9"
+                  onClick={() => setSearchTerm("")}
+                >
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
             <Button 
               onClick={() => setImportModalOpen(true)} 
               variant="outline" 
@@ -296,7 +337,7 @@ export default function ProductsPage() {
         </div>
 
         <ProductTable
-          products={products}
+          products={filteredProducts}
           loading={loading}
           onEdit={handleEditProduct}
           onDelete={handleDeleteProduct}