diff --git a/app/dashboard/products/page.tsx b/app/dashboard/products/page.tsx index 1929beb..fa00d59 100644 --- a/app/dashboard/products/page.tsx +++ b/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(false); const [editing, setEditing] = useState(false); const [imagePreview, setImagePreview] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); const [productData, setProductData] = useState({ 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() {

Product Inventory

+
+ + setSearchTerm(e.target.value)} + /> + {searchTerm && ( + + )} +