Show empty results message on product filters

src/screens/ManageProductsScreen.test.tsx

@@ -308,3 +308,41 @@ describe('ManageProductsScreen deletion safeguards', () => {
   });
 });
 
+describe('ManageProductsScreen filtering feedback', () => {
+  it('informs the user when no products match the search and category filter', async () => {
+    mockUseProducts.mockReturnValue([
+      {
+        id: 'prod-1',
+        name: 'Chips',
+        category: 'Snacks',
+        unit_type: 'unit',
+        bulk_name: 'pack',
+        archived: false,
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+    mockUseCategories.mockReturnValue([
+      { id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 },
+      { id: 'cat-2', name: 'Drinks', created_at: 0, updated_at: 0 },
+    ]);
+
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <ManageProductsScreen />
+      </MemoryRouter>,
+    );
+
+    await user.type(screen.getByPlaceholderText(/search/i), 'Soda');
+
+    const [filterSelect] = screen.getAllByLabelText(/category/i);
+    await user.click(filterSelect);
+    await user.click(screen.getByRole('option', { name: /drinks/i }));
+
+    expect(
+      await screen.findByText(/no products match your search and category filter\./i),
+    ).toBeVisible();
+  });
+});
+

src/screens/ManageProductsScreen.tsx

@@ -352,7 +352,12 @@ export const ManageProductsScreen = () => {
             Save Product
           </Button>
         </Stack>
-        {sortedFiltered.map((product) => (
+        {sortedFiltered.length === 0 ? (
+          <Typography variant="body2" color="text.secondary">
+            No products match your search and category filter.
+          </Typography>
+        ) : (
+          sortedFiltered.map((product) => (
             <ProductRow
               key={product.id}
               product={product}
@@ -360,7 +365,8 @@ export const ManageProductsScreen = () => {
               onSave={updateProduct}
               onDelete={deleteProduct}
             />
-        ))}
+          ))
+        )}
       </Stack>
       <Dialog open={scannerOpen} onClose={() => setScannerOpen(false)} fullWidth>
         <DialogTitle>Scan Barcode</DialogTitle>