Merge branch 'main' of https://github.com/beatz174-bit/stockfill

.vscode/launch.json

@@ -3,19 +3,17 @@
   "configurations": [
     {
       "name": "Launch Vite Dev Server",
-      "type": "pwa-chrome",
+      "type": "node-terminal",
       "request": "launch",
-      "url": "http://localhost:5173/",
+      "command": "npm run dev",
-      "webRoot": "${workspaceFolder}/src",
+      "cwd": "${workspaceFolder}"
-      "preLaunchTask": "npm: dev server"
     },
     {
       "name": "Launch Preview (Test) Server",
-      "type": "pwa-chrome",
+      "type": "node-terminal",
       "request": "launch",
-      "url": "http://localhost:4173/",
+      "command": "npm run preview",
-      "webRoot": "${workspaceFolder}/src",
+      "cwd": "${workspaceFolder}"
-      "preLaunchTask": "npm: preview server"
     }
   ]
 }

src/App.tsx

@@ -1,6 +1,7 @@
 import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DBProvider } from './context/DBProvider';
+import { AppLayout } from './components/AppLayout';
 import { HomeScreen } from './screens/HomeScreen';
 import { StartPickListScreen } from './screens/StartPickListScreen';
 import { PickListsScreen } from './screens/PickListsScreen';
@@ -24,6 +25,7 @@ const AppRoutes = () => {
   useServiceWorker();
   return (
     <Routes>
+      <Route element={<AppLayout />}>
         <Route path="/" element={<HomeScreen />} />
         <Route path="/start" element={<StartPickListScreen />} />
         <Route path="/pick-lists" element={<PickListsScreen />} />
@@ -32,6 +34,7 @@ const AppRoutes = () => {
         <Route path="/products" element={<ManageProductsScreen />} />
         <Route path="/areas" element={<ManageAreasScreen />} />
         <Route path="/scan" element={<BarcodeScannerScreen />} />
+      </Route>
     </Routes>
   );
 };

src/components/AppLayout.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import { NavigationBar } from './NavigationBar';
+
+export const AppLayout = () => (
+  <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <NavigationBar />
+    <Box component="main" sx={{ flexGrow: 1 }}>
+      <Outlet />
+    </Box>
+  </Box>
+);

src/components/NavigationBar.tsx

@@ -0,0 +1,54 @@
+import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+
+const navLinks = [
+  { to: '/', label: 'Home' },
+  { to: '/start', label: 'Start' },
+  { to: '/pick-lists', label: 'Pick Lists' },
+  { to: '/products', label: 'Products' },
+  { to: '/areas', label: 'Areas' },
+  { to: '/scan', label: 'Scan' },
+];
+
+const isActivePath = (currentPath: string, target: string) =>
+  currentPath === target || currentPath.startsWith(`${target}/`);
+
+export const NavigationBar = () => {
+  const location = useLocation();
+
+  return (
+    <AppBar position="static" color="default" elevation={1}>
+      <Toolbar sx={{ gap: 2, overflowX: 'auto' }}>
+        <Typography
+          variant="h6"
+          component={RouterLink}
+          to="/"
+          sx={{ color: 'inherit', textDecoration: 'none', fontWeight: 700 }}
+        >
+          StockFill
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {navLinks.map((link) => {
+            const active = isActivePath(location.pathname, link.to);
+            return (
+              <Button
+                key={link.to}
+                component={RouterLink}
+                to={link.to}
+                color="inherit"
+                sx={{
+                  minWidth: 'fit-content',
+                  opacity: active ? 1 : 0.8,
+                  textTransform: 'none',
+                  fontWeight: active ? 700 : 500,
+                }}
+              >
+                {link.label}
+              </Button>
+            );
+          })}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};

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>