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>
+  );
+};