Add edit and delete controls for areas and products

src/components/ProductRow.tsx

@@ -1,13 +1,125 @@
-import { Card, CardContent, Stack, Typography } from '@mui/material';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  IconButton,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { Product } from '../models/Product';
 
 interface ProductRowProps {
   product: Product;
+  categories: string[];
+  onSave: (
+    productId: string,
+    updates: {
+      name: string;
+      category: string;
+      unit_type: string;
+      bulk_name?: string;
+      units_per_bulk?: number;
+    },
+  ) => Promise<void> | void;
+  onDelete: (productId: string) => Promise<void> | void;
 }
 
-export const ProductRow = ({ product }: ProductRowProps) => (
+interface ProductFormState {
+  name: string;
+  category: string;
+  unitType: string;
+  bulkName: string;
+  unitsPerBulk: string;
+}
+
+const getInitialFormState = (product: Product): ProductFormState => ({
+  name: product.name,
+  category: product.category,
+  unitType: product.unit_type,
+  bulkName: product.bulk_name ?? '',
+  unitsPerBulk: product.units_per_bulk?.toString() ?? '',
+});
+
+export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRowProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
+
+  useEffect(() => {
+    setFormState(getInitialFormState(product));
+  }, [product]);
+
+  const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
+    setFormState((prev) => ({ ...prev, [field]: event.target.value }));
+  };
+
+  const handleSave = async () => {
+    if (!formState.name) return;
+    await onSave(product.id, {
+      name: formState.name,
+      category: formState.category,
+      unit_type: formState.unitType,
+      bulk_name: formState.bulkName || undefined,
+      units_per_bulk: formState.unitsPerBulk ? Number(formState.unitsPerBulk) : undefined,
+    });
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setFormState(getInitialFormState(product));
+  };
+
+  return (
     <Card variant="outlined" sx={{ mb: 1 }}>
       <CardContent>
+        {isEditing ? (
+          <Stack spacing={1}>
+            <TextField label="Name" value={formState.name} onChange={handleChange('name')} size="small" />
+            <TextField
+              select
+              label="Category"
+              value={formState.category}
+              onChange={handleChange('category')}
+              size="small"
+            >
+              {categories.map((cat) => (
+                <MenuItem key={cat} value={cat}>
+                  {cat}
+                </MenuItem>
+              ))}
+            </TextField>
+            <Stack direction="row" spacing={1}>
+              <TextField
+                label="Unit Type"
+                value={formState.unitType}
+                onChange={handleChange('unitType')}
+                size="small"
+                fullWidth
+              />
+              <TextField
+                label="Units per Bulk"
+                type="number"
+                value={formState.unitsPerBulk}
+                onChange={handleChange('unitsPerBulk')}
+                size="small"
+                fullWidth
+              />
+            </Stack>
+            <TextField
+              label="Bulk Name"
+              value={formState.bulkName}
+              onChange={handleChange('bulkName')}
+              size="small"
+            />
+          </Stack>
+        ) : (
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <div>
               <Typography variant="subtitle1">{product.name}</Typography>
@@ -21,6 +133,29 @@ export const ProductRow = ({ product }: ProductRowProps) => (
               </Typography>
             ) : null}
           </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>
     </Card>
   );
+};

src/screens/ManageAreasScreen.tsx

@@ -1,4 +1,18 @@
-import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
+import {
+  Button,
+  Container,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useAreas } from '../hooks/dataHooks';
@@ -8,6 +22,8 @@ export const ManageAreasScreen = () => {
   const db = useDatabase();
   const areas = useAreas();
   const [name, setName] = useState('');
+  const [editingAreaId, setEditingAreaId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
 
   const addArea = async () => {
     if (!name) return;
@@ -15,6 +31,30 @@ export const ManageAreasScreen = () => {
     setName('');
   };
 
+  const startEditing = (areaId: string, currentName: string) => {
+    setEditingAreaId(areaId);
+    setEditName(currentName);
+  };
+
+  const saveArea = async () => {
+    if (!editingAreaId || !editName) return;
+    await db.areas.update(editingAreaId, { name: editName, updated_at: Date.now() });
+    setEditingAreaId(null);
+    setEditName('');
+  };
+
+  const cancelEditing = () => {
+    setEditingAreaId(null);
+    setEditName('');
+  };
+
+  const deleteArea = async (areaId: string) => {
+    await db.areas.delete(areaId);
+    if (editingAreaId === areaId) {
+      cancelEditing();
+    }
+  };
+
   return (
     <Container sx={{ py: 4 }}>
       <Typography variant="h5" gutterBottom>
@@ -30,7 +70,42 @@ export const ManageAreasScreen = () => {
         <List>
           {areas.map((area) => (
             <ListItem key={area.id} divider>
+              {editingAreaId === area.id ? (
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
+                  <TextField
+                    size="small"
+                    fullWidth
+                    value={editName}
+                    onChange={(event) => setEditName(event.target.value)}
+                  />
+                  <IconButton color="primary" onClick={saveArea} disabled={!editName} aria-label="Save area">
+                    <CheckIcon />
+                  </IconButton>
+                  <IconButton onClick={cancelEditing} aria-label="Cancel editing">
+                    <CloseIcon />
+                  </IconButton>
+                </Stack>
+              ) : (
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
                   <ListItemText primary={area.name} />
+                  <Stack direction="row" spacing={0.5}>
+                    <IconButton
+                      onClick={() => startEditing(area.id, area.name)}
+                      aria-label={`Edit ${area.name}`}
+                      size="small"
+                    >
+                      <EditIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => deleteArea(area.id)}
+                      aria-label={`Delete ${area.name}`}
+                      size="small"
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Stack>
+                </Stack>
+              )}
             </ListItem>
           ))}
         </List>

src/screens/ManageProductsScreen.tsx

@@ -50,6 +50,23 @@ export const ManageProductsScreen = () => {
     setName('');
   };
 
+  const updateProduct = async (
+    productId: string,
+    updates: {
+      name: string;
+      category: string;
+      unit_type: string;
+      bulk_name?: string;
+      units_per_bulk?: number;
+    },
+  ) => {
+    await db.products.update(productId, { ...updates, updated_at: Date.now() });
+  };
+
+  const deleteProduct = async (productId: string) => {
+    await db.products.delete(productId);
+  };
+
   return (
     <Container sx={{ py: 4 }}>
       <Typography variant="h5" gutterBottom>
@@ -85,7 +102,13 @@ export const ManageProductsScreen = () => {
           </Button>
         </Stack>
         {filtered.map((product) => (
-          <ProductRow key={product.id} product={product} />
+          <ProductRow
+            key={product.id}
+            product={product}
+            categories={categories}
+            onSave={updateProduct}
+            onDelete={deleteProduct}
+          />
         ))}
       </Stack>
     </Container>