Restructure project to root layout

2025-11-21 16:10:41 +10:00
1 parent e0e26a34ab
commit 3ffe9bbf99
@@ -0,0 +1,84 @@
+import { Button, Container, Stack, Typography } from '@mui/material';
+import { useParams, useNavigate, Link as RouterLink } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { useAreas, usePickItems, usePickList, useProducts } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+import { PickItemRow } from '../components/PickItemRow';
+
+export const ActivePickListScreen = () => {
+  const { id } = useParams();
+  const pickList = usePickList(id);
+  const items = usePickItems(id);
+  const products = useProducts();
+  const areas = useAreas();
+  const db = useDatabase();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!id || !pickList) return;
+  }, [id, pickList]);
+
+  const areaName = useMemo(
+    () => areas.find((area) => area.id === pickList?.area_id)?.name ?? 'Area',
+    [areas, pickList?.area_id],
+  );
+
+  const handleIncrementUnit = async (itemId: string) => {
+    const existing = await db.pickItems.get(itemId);
+    if (!existing) return;
+    await db.pickItems.update(itemId, {
+      quantity_units: existing.quantity_units + 1,
+      updated_at: Date.now(),
+    });
+  };
+
+  const handleIncrementBulk = async (itemId: string) => {
+    const existing = await db.pickItems.get(itemId);
+    if (!existing) return;
+    await db.pickItems.update(itemId, {
+      quantity_bulk: existing.quantity_bulk + 1,
+      updated_at: Date.now(),
+    });
+  };
+
+  const handleSwipeLeft = async (itemId: string) => {
+    await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() });
+  };
+
+  const handleSwipeRight = async (itemId: string) => {
+    await db.pickItems.delete(itemId);
+  };
+
+  const completeList = async () => {
+    if (!id) return;
+    await db.pickLists.update(id, { completed_at: Date.now() });
+    navigate('/pick-lists');
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" mb={2}>
+        <Typography variant="h5">{areaName} List</Typography>
+        <Button component={RouterLink} to={`/pick-lists/${id}/add-item`} variant="contained">
+          Add Item
+        </Button>
+      </Stack>
+      <Stack spacing={1}>
+        {items.map((item) => (
+          <PickItemRow
+            key={item.id}
+            item={item}
+            product={products.find((p) => p.id === item.product_id)}
+            onIncrementUnit={() => handleIncrementUnit(item.id)}
+            onIncrementBulk={() => handleIncrementBulk(item.id)}
+            onSwipeLeft={() => handleSwipeLeft(item.id)}
+            onSwipeRight={() => handleSwipeRight(item.id)}
+          />
+        ))}
+      </Stack>
+      <Button fullWidth sx={{ mt: 3 }} variant="outlined" onClick={completeList}>
+        Complete List
+      </Button>
+    </Container>
+  );
+};
@@ -0,0 +1,84 @@
+import {
+  Button,
+  Container,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+  InputAdornment,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { NumericStepper } from '../components/NumericStepper';
+import { useProducts } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+
+export const AddItemScreen = () => {
+  const { id } = useParams();
+  const db = useDatabase();
+  const products = useProducts();
+  const [productId, setProductId] = useState('');
+  const [query, setQuery] = useState('');
+  const [units, setUnits] = useState(1);
+  const [bulk, setBulk] = useState(0);
+  const navigate = useNavigate();
+
+  const filteredProducts = useMemo(
+    () =>
+      products.filter((product) =>
+        `${product.name} ${product.category}`.toLowerCase().includes(query.toLowerCase()),
+      ),
+    [products, query],
+  );
+
+  const addItem = async () => {
+    if (!id || !productId) return;
+    await db.pickItems.add({
+      id: uuidv4(),
+      pick_list_id: id,
+      product_id: productId,
+      quantity_units: units,
+      quantity_bulk: bulk,
+      status: 'pending',
+      created_at: Date.now(),
+      updated_at: Date.now(),
+    });
+    navigate(`/pick-lists/${id}`);
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Add Item
+      </Typography>
+      <Stack spacing={2}>
+        <TextField
+          placeholder="Search products"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          InputProps={{ startAdornment: <InputAdornment position="start">{<SearchIcon />}</InputAdornment> }}
+        />
+        <TextField
+          select
+          label="Product"
+          fullWidth
+          value={productId}
+          onChange={(event) => setProductId(event.target.value)}
+        >
+          {filteredProducts.map((product) => (
+            <MenuItem key={product.id} value={product.id}>
+              {product.name} ({product.category})
+            </MenuItem>
+          ))}
+        </TextField>
+        <NumericStepper label="Units" value={units} onChange={setUnits} />
+        <NumericStepper label="Bulk" value={bulk} onChange={setBulk} />
+        <Button variant="contained" disabled={!productId} onClick={addItem}>
+          Add to List
+        </Button>
+      </Stack>
+    </Container>
+  );
+};
@@ -0,0 +1,21 @@
+import { Container, Typography } from '@mui/material';
+import { useState } from 'react';
+import { BarcodeScannerView } from '../components/BarcodeScannerView';
+
+export const BarcodeScannerScreen = () => {
+  const [lastCode, setLastCode] = useState('');
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Barcode Scanner
+      </Typography>
+      <BarcodeScannerView onDetected={(code) => setLastCode(code)} />
+      {lastCode ? (
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+          Last detected: {lastCode}
+        </Typography>
+      ) : null}
+    </Container>
+  );
+};
@@ -0,0 +1,27 @@
+import { Button, Container, Stack, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const HomeScreen = () => (
+  <Container sx={{ py: 4 }}>
+    <Typography variant="h4" gutterBottom>
+      StockFill
+    </Typography>
+    <Stack spacing={2}>
+      <Button component={RouterLink} to="/start" variant="contained">
+        Start New Pick List
+      </Button>
+      <Button component={RouterLink} to="/pick-lists" variant="outlined">
+        View Pick Lists
+      </Button>
+      <Button component={RouterLink} to="/products" variant="outlined">
+        Manage Products
+      </Button>
+      <Button component={RouterLink} to="/areas" variant="outlined">
+        Manage Areas
+      </Button>
+      <Button component={RouterLink} to="/scan" variant="outlined">
+        Scan Barcode
+      </Button>
+    </Stack>
+  </Container>
+);
@@ -0,0 +1,40 @@
+import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useAreas } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+
+export const ManageAreasScreen = () => {
+  const db = useDatabase();
+  const areas = useAreas();
+  const [name, setName] = useState('');
+
+  const addArea = async () => {
+    if (!name) return;
+    await db.areas.add({ id: uuidv4(), name, created_at: Date.now(), updated_at: Date.now() });
+    setName('');
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Manage Areas
+      </Typography>
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1}>
+          <TextField fullWidth label="Area name" value={name} onChange={(event) => setName(event.target.value)} />
+          <Button variant="contained" onClick={addArea} disabled={!name}>
+            Add
+          </Button>
+        </Stack>
+        <List>
+          {areas.map((area) => (
+            <ListItem key={area.id} divider>
+              <ListItemText primary={area.name} />
+            </ListItem>
+          ))}
+        </List>
+      </Stack>
+    </Container>
+  );
+};
@@ -0,0 +1,93 @@
+import {
+  Button,
+  Container,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+  InputAdornment,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { ProductRow } from '../components/ProductRow';
+import { 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 [search, setSearch] = useState('');
+  const [name, setName] = useState('');
+  const [category, setCategory] = useState(categories[0]);
+  const [unitType, setUnitType] = useState('unit');
+  const [bulkName, setBulkName] = useState('case');
+  const [unitsPerBulk, setUnitsPerBulk] = useState(6);
+
+  const filtered = useMemo(
+    () =>
+      products.filter((p) =>
+        `${p.name} ${p.category}`.toLowerCase().includes(search.toLowerCase()),
+      ),
+    [products, search],
+  );
+
+  const addProduct = async () => {
+    if (!name) return;
+    await db.products.add({
+      id: uuidv4(),
+      name,
+      category,
+      unit_type: unitType,
+      bulk_name: bulkName,
+      units_per_bulk: unitsPerBulk,
+      archived: false,
+      created_at: Date.now(),
+      updated_at: Date.now(),
+    });
+    setName('');
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Manage Products
+      </Typography>
+      <Stack spacing={2}>
+        <TextField
+          placeholder="Search"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          InputProps={{ startAdornment: <InputAdornment position="start">{<SearchIcon />}</InputAdornment> }}
+        />
+        <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) => (
+              <MenuItem key={cat} value={cat}>
+                {cat}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField label="Unit Type" value={unitType} onChange={(event) => setUnitType(event.target.value)} />
+          <TextField label="Bulk Name" value={bulkName} onChange={(event) => setBulkName(event.target.value)} />
+          <TextField
+            label="Units per Bulk"
+            type="number"
+            value={unitsPerBulk}
+            onChange={(event) => setUnitsPerBulk(Number(event.target.value))}
+          />
+          <Button variant="contained" onClick={addProduct} disabled={!name}>
+            Save Product
+          </Button>
+        </Stack>
+        {filtered.map((product) => (
+          <ProductRow key={product.id} product={product} />
+        ))}
+      </Stack>
+    </Container>
+  );
+};
@@ -0,0 +1,32 @@
+import { Button, Container, List, ListItemButton, ListItemText, Typography } from '@mui/material';
+import { format } from 'date-fns';
+import { Link as RouterLink } from 'react-router-dom';
+import { usePickLists, useAreas } from '../hooks/dataHooks';
+
+export const PickListsScreen = () => {
+  const lists = usePickLists();
+  const areas = useAreas();
+
+  const getAreaName = (areaId: string) => areas.find((a) => a.id === areaId)?.name ?? 'Unknown area';
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Pick Lists
+      </Typography>
+      <Button component={RouterLink} to="/start" variant="contained" sx={{ mb: 2 }}>
+        Start New
+      </Button>
+      <List>
+        {lists.map((list) => (
+          <ListItemButton key={list.id} component={RouterLink} to={`/pick-lists/${list.id}`} divider>
+            <ListItemText
+              primary={getAreaName(list.area_id)}
+              secondary={format(list.created_at, 'PPpp')}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    </Container>
+  );
+};
@@ -0,0 +1,46 @@
+import { Button, Container, MenuItem, Stack, TextField, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { useAreas } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+
+export const StartPickListScreen = () => {
+  const areas = useAreas();
+  const db = useDatabase();
+  const navigate = useNavigate();
+  const [areaId, setAreaId] = useState('');
+
+  const start = async () => {
+    if (!areaId) return;
+    const pickListId = uuidv4();
+    await db.pickLists.add({ id: pickListId, area_id: areaId, created_at: Date.now() });
+    navigate(`/pick-lists/${pickListId}`);
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Start Pick List
+      </Typography>
+      <Stack spacing={2}>
+        <TextField
+          select
+          fullWidth
+          label="Area"
+          value={areaId}
+          onChange={(event) => setAreaId(event.target.value)}
+        >
+          {areas.map((area) => (
+            <MenuItem key={area.id} value={area.id}>
+              {area.name}
+            </MenuItem>
+          ))}
+        </TextField>
+        <Button variant="contained" disabled={!areaId} onClick={start}>
+          Start
+        </Button>
+      </Stack>
+    </Container>
+  );
+};