Merge branch 'main' into codex/fix-duplicate-barcode-addition-in-product-table

src/screens/ManageProductsScreen.tsx

@@ -1,14 +1,16 @@
 import {
+  Alert,
+  AlertColor,
   Button,
   Container,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  InputAdornment,
   MenuItem,
   Stack,
   TextField,
   Typography,
-  InputAdornment,
-  Dialog,
-  DialogTitle,
-  DialogContent,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
@@ -36,6 +38,7 @@ export const ManageProductsScreen = () => {
     'idle',
   );
   const [externalProduct, setExternalProduct] = useState<ExternalProductInfo | null>(null);
+  const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
 
   const lookupBarcode = useCallback(async (code: string) => {
     if (!code) return;
@@ -148,6 +151,7 @@ export const ManageProductsScreen = () => {
     });
     setName('');
     setBarcode('');
+    setFeedback({ text: 'Product added.', severity: 'success' });
   };
 
   const updateProduct = async (
@@ -166,10 +170,20 @@ export const ManageProductsScreen = () => {
       bulk_name: DEFAULT_BULK_NAME,
       updated_at: Date.now(),
     });
+    setFeedback({ text: 'Product updated.', severity: 'success' });
   };
 
   const deleteProduct = async (productId: string) => {
+    const usageCount = await db.pickItems.where('product_id').equals(productId).count();
+    if (usageCount > 0) {
+      setFeedback({
+        text: `Cannot delete this product while ${usageCount} pick item(s) reference it. Remove those items first.`,
+        severity: 'error',
+      });
+      return;
+    }
     await db.products.delete(productId);
+    setFeedback({ text: 'Product deleted.', severity: 'success' });
   };
 
   return (
@@ -178,6 +192,7 @@ export const ManageProductsScreen = () => {
         Manage Products
       </Typography>
       <Stack spacing={2}>
+        {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
         <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
           Edit Categories
         </Button>