Merge pull request #82 from beatz174-bit/codex/add-no-products-found-message

Add empty state message for filtered products

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