Add category management screen

src/screens/ManageCategoriesScreen.tsx

@@ -0,0 +1,172 @@
+import {
+  Alert,
+  AlertColor,
+  Button,
+  Container,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useDatabase } from '../context/DBProvider';
+import { useCategories, useProducts } from '../hooks/dataHooks';
+
+export const ManageCategoriesScreen = () => {
+  const db = useDatabase();
+  const categories = useCategories();
+  const products = useProducts();
+  const [name, setName] = useState('');
+  const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
+
+  const usageByCategory = useMemo(() => {
+    return products.reduce<Record<string, number>>((acc, product) => {
+      acc[product.category] = (acc[product.category] ?? 0) + 1;
+      return acc;
+    }, {});
+  }, [products]);
+
+  const addCategory = async () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const exists = categories.some((category) => category.name.toLowerCase() === trimmed.toLowerCase());
+    if (exists) {
+      setFeedback({ text: 'A category with this name already exists.', severity: 'error' });
+      return;
+    }
+    await db.categories.add({ id: uuidv4(), name: trimmed, created_at: Date.now(), updated_at: Date.now() });
+    setName('');
+    setFeedback({ text: 'Category added.', severity: 'success' });
+  };
+
+  const startEditing = (categoryId: string, currentName: string) => {
+    setEditingCategoryId(categoryId);
+    setEditName(currentName);
+    setFeedback(null);
+  };
+
+  const saveCategory = async () => {
+    if (!editingCategoryId) return;
+    const trimmed = editName.trim();
+    if (!trimmed) return;
+
+    const category = categories.find((item) => item.id === editingCategoryId);
+    if (!category) return;
+
+    const nameExists = categories.some(
+      (item) => item.id !== editingCategoryId && item.name.toLowerCase() === trimmed.toLowerCase(),
+    );
+    if (nameExists) {
+      setFeedback({ text: 'A category with this name already exists.', severity: 'error' });
+      return;
+    }
+
+    await db.transaction('rw', db.categories, db.products, async () => {
+      await db.categories.update(editingCategoryId, { name: trimmed, updated_at: Date.now() });
+      await db.products
+        .where('category')
+        .equals(category.name)
+        .modify({ category: trimmed, updated_at: Date.now() });
+    });
+
+    setEditingCategoryId(null);
+    setEditName('');
+    setFeedback({ text: 'Category updated. Linked products were refreshed.', severity: 'success' });
+  };
+
+  const cancelEditing = () => {
+    setEditingCategoryId(null);
+    setEditName('');
+    setFeedback(null);
+  };
+
+  const deleteCategory = async (categoryId: string, categoryName: string) => {
+    const usageCount = usageByCategory[categoryName] ?? 0;
+    if (usageCount > 0) {
+      setFeedback({
+        text: `Cannot delete '${categoryName}' while ${usageCount} product(s) use it. Update those products first.`,
+        severity: 'error',
+      });
+      return;
+    }
+    await db.categories.delete(categoryId);
+    if (editingCategoryId === categoryId) {
+      cancelEditing();
+    }
+    setFeedback({ text: 'Category deleted.', severity: 'success' });
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Manage Categories
+      </Typography>
+      <Stack spacing={2}>
+        {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+        <Stack direction="row" spacing={1}>
+          <TextField
+            fullWidth
+            label="Category name"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+          <Button variant="contained" onClick={addCategory} disabled={!name.trim()}>
+            Add
+          </Button>
+        </Stack>
+        <List>
+          {categories.map((category) => (
+            <ListItem key={category.id} divider>
+              {editingCategoryId === category.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={saveCategory} disabled={!editName.trim()} aria-label="Save category">
+                    <CheckIcon />
+                  </IconButton>
+                  <IconButton onClick={cancelEditing} aria-label="Cancel editing">
+                    <CloseIcon />
+                  </IconButton>
+                </Stack>
+              ) : (
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
+                  <ListItemText primary={category.name} secondary={`Used by ${usageByCategory[category.name] ?? 0} product(s)`} />
+                  <Stack direction="row" spacing={0.5}>
+                    <IconButton
+                      onClick={() => startEditing(category.id, category.name)}
+                      aria-label={`Edit ${category.name}`}
+                      size="small"
+                    >
+                      <EditIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => deleteCategory(category.id, category.name)}
+                      aria-label={`Delete ${category.name}`}
+                      size="small"
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Stack>
+                </Stack>
+              )}
+            </ListItem>
+          ))}
+        </List>
+      </Stack>
+    </Container>
+  );
+};

src/screens/ManageProductsScreen.tsx

@@ -8,24 +8,37 @@ import {
   InputAdornment,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import { useMemo, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { ProductRow } from '../components/ProductRow';
-import { useProducts } from '../hooks/dataHooks';
+import { useCategories, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 
-const categories = ['Drinks', 'Snacks', 'Dairy', 'Confectionery'];
-
 export const ManageProductsScreen = () => {
   const db = useDatabase();
   const products = useProducts();
+  const categories = useCategories();
   const [search, setSearch] = useState('');
   const [name, setName] = useState('');
-  const [category, setCategory] = useState(categories[0]);
+  const [category, setCategory] = useState('');
   const [unitType, setUnitType] = useState('unit');
   const [bulkName, setBulkName] = useState('case');
   const [unitsPerBulk, setUnitsPerBulk] = useState(6);
 
+  const categoryOptions = useMemo(() => {
+    const categoryNames = categories.map((item) => item.name);
+    const productCategories = products.map((product) => product.category);
+    return Array.from(new Set([...categoryNames, ...productCategories]));
+  }, [categories, products]);
+
+  useEffect(() => {
+    if (categoryOptions.length === 0) return;
+    if (!categoryOptions.includes(category)) {
+      setCategory(categoryOptions[0]);
+    }
+  }, [category, categoryOptions]);
+
   const filtered = useMemo(
     () =>
       products.filter((p) =>
@@ -35,7 +48,7 @@ export const ManageProductsScreen = () => {
   );
 
   const addProduct = async () => {
-    if (!name) return;
+    if (!name || !category) return;
     await db.products.add({
       id: uuidv4(),
       name,
@@ -73,6 +86,9 @@ export const ManageProductsScreen = () => {
         Manage Products
       </Typography>
       <Stack spacing={2}>
+        <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+          Edit Categories
+        </Button>
         <TextField
           placeholder="Search"
           value={search}
@@ -82,8 +98,14 @@ export const ManageProductsScreen = () => {
         <Stack spacing={1}>
           <Typography variant="subtitle1">Add Product</Typography>
           <TextField label="Name" value={name} onChange={(event) => setName(event.target.value)} />
-          <TextField select label="Category" value={category} onChange={(event) => setCategory(event.target.value)}>
-            {categories.map((cat) => (
+          <TextField
+            select
+            label="Category"
+            value={category}
+            onChange={(event) => setCategory(event.target.value)}
+            disabled={categoryOptions.length === 0}
+          >
+            {categoryOptions.map((cat) => (
               <MenuItem key={cat} value={cat}>
                 {cat}
               </MenuItem>
@@ -97,7 +119,7 @@ export const ManageProductsScreen = () => {
             value={unitsPerBulk}
             onChange={(event) => setUnitsPerBulk(Number(event.target.value))}
           />
-          <Button variant="contained" onClick={addProduct} disabled={!name}>
+          <Button variant="contained" onClick={addProduct} disabled={!name || !category}>
             Save Product
           </Button>
         </Stack>
@@ -105,7 +127,7 @@ export const ManageProductsScreen = () => {
           <ProductRow
             key={product.id}
             product={product}
-            categories={categories}
+            categories={categoryOptions}
             onSave={updateProduct}
             onDelete={deleteProduct}
           />