Merge branch 'main' into codex/update-read-only-view-in-productrow-a6vr8p

src/components/ProductRow.tsx

@@ -1,6 +1,7 @@
 import {
+  Box,
+  Button,
   Card,
-  CardActions,
   CardContent,
   Dialog,
   DialogContent,
@@ -10,7 +11,6 @@ import {
   Stack,
   TextField,
   Typography,
-  Button,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
@@ -50,16 +50,16 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
   const [isEditing, setIsEditing] = useState(false);
   const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
   const [isScannerOpen, setIsScannerOpen] = useState(false);
-  const [saveError, setSaveError] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<{ name?: string; barcode?: string }>({});
 
   useEffect(() => {
     setFormState(getInitialFormState(product));
-    setSaveError('');
+    setFieldErrors({});
   }, [product]);
 
   const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
     setFormState((prev) => ({ ...prev, [field]: event.target.value }));
-    setSaveError('');
+    setFieldErrors((prev) => ({ ...prev, [field]: undefined }));
   };
 
   const handleSave = async () => {
@@ -71,10 +71,14 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
         barcode: formState.barcode || undefined,
       });
       setIsEditing(false);
-      setSaveError('');
+      setFieldErrors({});
     } catch (error) {
+      if (error instanceof Error && error.name === 'DuplicateNameError') {
+        setFieldErrors({ name: 'A product with this name already exists.' });
+        return;
+      }
       if (error instanceof Error && error.name === 'DuplicateBarcodeError') {
-        setSaveError('This barcode is already assigned to another product.');
+        setFieldErrors({ barcode: 'This barcode is already assigned to another product.' });
         return;
       }
       throw error;
@@ -84,15 +88,22 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
   const handleCancel = () => {
     setIsEditing(false);
     setFormState(getInitialFormState(product));
-    setSaveError('');
+    setFieldErrors({});
   };
 
   return (
     <Card variant="outlined" sx={{ mb: 1 }}>
-      <CardContent>
+      <CardContent sx={{ p: 1.25, '&:last-child': { pb: 1.25 } }}>
         {isEditing ? (
           <Stack spacing={1}>
-            <TextField label="Name" value={formState.name} onChange={handleChange('name')} size="small" />
+            <TextField
+              label="Name"
+              value={formState.name}
+              onChange={handleChange('name')}
+              size="small"
+              error={Boolean(fieldErrors.name)}
+              helperText={fieldErrors.name || undefined}
+            />
             <TextField
               select
               label="Category"
@@ -112,15 +123,15 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
                 value={formState.barcode}
                 onChange={handleChange('barcode')}
                 size="small"
-                error={Boolean(saveError)}
-                helperText={saveError || undefined}
+                error={Boolean(fieldErrors.barcode)}
+                helperText={fieldErrors.barcode || undefined}
                 InputProps={{
                   endAdornment: (
                     <Button
                       size="small"
                       onClick={() => {
                         setFormState((prev) => ({ ...prev, barcode: '' }));
-                        setSaveError('');
+                        setFieldErrors((prev) => ({ ...prev, barcode: undefined }));
                       }}
                     >
                       Clear
@@ -133,6 +144,14 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
                 Scan Barcode
               </Button>
             )}
+            <Stack direction="row" spacing={0.5} justifyContent="flex-end">
+              <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
+                <CheckIcon />
+              </IconButton>
+              <IconButton aria-label="Cancel edit" onClick={handleCancel}>
+                <CloseIcon />
+              </IconButton>
+            </Stack>
           </Stack>
         ) : (
           <Stack direction="row" justifyContent="space-between" alignItems="center">
@@ -150,27 +169,6 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
           </Stack>
         )}
       </CardContent>
-      <CardActions sx={{ justifyContent: 'flex-end', pt: 0 }}>
-        {isEditing ? (
-          <>
-            <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
-              <CheckIcon />
-            </IconButton>
-            <IconButton aria-label="Cancel edit" onClick={handleCancel}>
-              <CloseIcon />
-            </IconButton>
-          </>
-        ) : (
-          <>
-            <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)}>
-              <EditIcon />
-            </IconButton>
-            <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)}>
-              <DeleteIcon />
-            </IconButton>
-          </>
-        )}
-      </CardActions>
       <Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>
         <DialogTitle>Scan Barcode</DialogTitle>
         <DialogContent>