diff --git a/src/screens/ManageProductsScreen.tsx b/src/screens/ManageProductsScreen.tsx index 6896949..a781b3d 100644 --- a/src/screens/ManageProductsScreen.tsx +++ b/src/screens/ManageProductsScreen.tsx @@ -29,6 +29,7 @@ export const ManageProductsScreen = () => { const categories = useCategories(); const location = useLocation(); const [search, setSearch] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('all'); const [name, setName] = useState(''); const [category, setCategory] = useState(''); const [barcode, setBarcode] = useState(''); @@ -139,12 +140,22 @@ export const ManageProductsScreen = () => { } }, [category, categoryOptions]); + useEffect(() => { + if (selectedCategory !== 'all' && !categoryOptions.includes(selectedCategory)) { + setSelectedCategory('all'); + } + }, [categoryOptions, selectedCategory]); + const filtered = useMemo( () => - products.filter((p) => - `${p.name} ${p.category}`.toLowerCase().includes(search.toLowerCase()), - ), - [products, search], + products.filter((p) => { + const matchesSearch = `${p.name} ${p.category}` + .toLowerCase() + .includes(search.toLowerCase()); + const matchesCategory = selectedCategory === 'all' || p.category === selectedCategory; + return matchesSearch && matchesCategory; + }), + [products, search, selectedCategory], ); const sortedFiltered = useMemo( @@ -245,12 +256,29 @@ export const ManageProductsScreen = () => { - setSearch(event.target.value)} - InputProps={{ startAdornment: {} }} - /> + + setSearch(event.target.value)} + InputProps={{ startAdornment: {} }} + fullWidth + /> + setSelectedCategory(event.target.value)} + sx={{ minWidth: { sm: 180 } }} + > + All categories + {categoryOptions.map((cat) => ( + + {cat} + + ))} + + Add Product