+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + | import { useEffect } from 'react';
+import { Alert, Card, CardContent, Typography } from '@mui/material';
+import { useBarcodeScanner } from '../hooks/useBarcodeScanner';
+
+interface BarcodeScannerViewProps {
+ onDetected?: (code: string) => void;
+}
+
+export const BarcodeScannerView = ({ onDetected }: BarcodeScannerViewProps) => {
+ const { videoRef, result } = useBarcodeScanner();
+
+ useEffect(() => {
+ if (result.code && onDetected) {
+ onDetected(result.code);
+ }
+ }, [onDetected, result.code]);
+
+ return (
+ <Card variant="outlined">
+ <CardContent>
+ <Typography variant="subtitle1" gutterBottom>
+ Scan Barcode
+ </Typography>
+ <video ref={videoRef} style={{ width: '100%', borderRadius: 8 }} />
+ {result.code ? <Alert severity="success">Detected {result.code}</Alert> : null}
+ {result.error ? <Alert severity="error">{result.error}</Alert> : null}
+ </CardContent>
+ </Card>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +24x + + + + + +2x +102x +102x +102x +102x + +102x +12x +12x + + +131x +34x +34x + + +102x +5x +5x +5x + + + + +1x +1x + +4x +2x +2x + +2x +2x +2x + + + + + +102x + + + + + +102x + + + + + + + + + + + + + + + + + + + + + +82x + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x + + +1x + + + + + + + + + + + + + + + + + + + + + | import {
+ Box,
+ Button,
+ Card,
+ CardContent,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ 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';
+import { BarcodeScannerView } from './BarcodeScannerView';
+
+interface ProductRowProps {
+ product: Product;
+ categories: string[];
+ onSave: (
+ productId: string,
+ updates: {
+ name: string;
+ category: string;
+ barcode?: string;
+ },
+ ) => Promise<void> | void;
+ onDelete: (productId: string) => Promise<void> | void;
+}
+
+interface ProductFormState {
+ name: string;
+ category: string;
+ barcode: string;
+}
+
+const getInitialFormState = (product: Product): ProductFormState => ({
+ name: product.name,
+ category: product.category,
+ barcode: product.barcode ?? '',
+});
+
+export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRowProps) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
+ const [isScannerOpen, setIsScannerOpen] = useState(false);
+ const [fieldErrors, setFieldErrors] = useState<{ name?: string; barcode?: string }>({});
+
+ useEffect(() => {
+ setFormState(getInitialFormState(product));
+ setFieldErrors({});
+ }, [product]);
+
+ const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
+ setFormState((prev) => ({ ...prev, [field]: event.target.value }));
+ setFieldErrors((prev) => ({ ...prev, [field]: undefined }));
+ };
+
+ const handleSave = async () => {
+ Iif (!formState.name) return;
+ try {
+ await onSave(product.id, {
+ name: formState.name,
+ category: formState.category,
+ barcode: formState.barcode || undefined,
+ });
+ setIsEditing(false);
+ setFieldErrors({});
+ } catch (error) {
+ if (error instanceof Error && error.name === 'DuplicateNameError') {
+ setFieldErrors({ name: 'A product with this name already exists.' });
+ return;
+ }
+ Eif (error instanceof Error && error.name === 'DuplicateBarcodeError') {
+ setFieldErrors({ barcode: 'This barcode is already assigned to another product.' });
+ return;
+ }
+ throw error;
+ }
+ };
+
+ const handleCancel = () => {
+ setIsEditing(false);
+ setFormState(getInitialFormState(product));
+ setFieldErrors({});
+ };
+
+ return (
+ <Card variant="outlined" sx={{ mb: 1 }}>
+ <CardContent sx={{ p: 1.25, '&:last-child': { pb: 1.25 } }}>
+ {isEditing ? (
+ <Stack spacing={1}>
+ <TextField
+ label="Name"
+ value={formState.name}
+ onChange={handleChange('name')}
+ size="small"
+ error={Boolean(fieldErrors.name)}
+ helperText={fieldErrors.name || undefined}
+ />
+ <TextField
+ select
+ SelectProps={{ native: true }}
+ label="Category"
+ value={formState.category}
+ onChange={handleChange('category')}
+ size="small"
+ >
+ {categories.map((cat) => (
+ <option key={cat} value={cat}>
+ {cat}
+ </option>
+ ))}
+ </TextField>
+ {formState.barcode ? (
+ <TextField
+ label="Barcode"
+ value={formState.barcode}
+ onChange={handleChange('barcode')}
+ size="small"
+ error={Boolean(fieldErrors.barcode)}
+ helperText={fieldErrors.barcode || undefined}
+ InputProps={{
+ endAdornment: (
+ <Button
+ size="small"
+ onClick={() => {
+ setFormState((prev) => ({ ...prev, barcode: '' }));
+ setFieldErrors((prev) => ({ ...prev, barcode: undefined }));
+ }}
+ >
+ Clear
+ </Button>
+ ),
+ }}
+ />
+ ) : (
+ <Button variant="outlined" onClick={() => setIsScannerOpen(true)}>
+ Scan Barcode
+ </Button>
+ )}
+ <Stack direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center">
+ <IconButton
+ aria-label={`Delete ${product.name}`}
+ onClick={() => onDelete(product.id)}
+ size="small"
+ color="error"
+ >
+ <DeleteIcon fontSize="small" />
+ </IconButton>
+ <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
+ <CheckIcon />
+ </IconButton>
+ <IconButton aria-label="Cancel edit" onClick={handleCancel}>
+ <CloseIcon />
+ </IconButton>
+ </Stack>
+ </Stack>
+ ) : (
+ <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
+ <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
+ <Stack spacing={0.25} sx={{ minWidth: 0 }}>
+ <Typography variant="subtitle1" noWrap>
+ {product.name}
+ </Typography>
+ <Typography variant="caption" color="text.secondary" noWrap>
+ {product.category}
+ </Typography>
+ </Stack>
+ {product.barcode ? (
+ <Typography variant="caption" color="text.secondary" noWrap>
+ Barcode: {product.barcode}
+ </Typography>
+ ) : null}
+ </Stack>
+ <Box display="flex" alignItems="center" gap={0.5} sx={{ ml: 1 }}>
+ <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)} size="small">
+ <EditIcon fontSize="small" />
+ </IconButton>
+ <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)} size="small">
+ <DeleteIcon fontSize="small" />
+ </IconButton>
+ </Box>
+ </Stack>
+ )}
+ </CardContent>
+ <Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>
+ <DialogTitle>Scan Barcode</DialogTitle>
+ <DialogContent>
+ <BarcodeScannerView
+ onDetected={(code) => {
+ setFormState((prev) => ({ ...prev, barcode: code }));
+ setIsScannerOpen(false);
+ }}
+ />
+ </DialogContent>
+ </Dialog>
+ </Card>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| BarcodeScannerView.tsx | +
+
+ |
+ 16.66% | +1/6 | +0% | +0/8 | +0% | +0/2 | +16.66% | +1/6 | +
| ProductRow.tsx | +
+
+ |
+ 77.55% | +38/49 | +87.5% | +21/24 | +71.42% | +15/21 | +77.5% | +31/40 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| useBarcodeScanner.ts | +
+
+ |
+ 2.27% | +1/44 | +0% | +0/20 | +0% | +0/8 | +2.5% | +1/40 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 | + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useRef, useState } from 'react';
+import { BrowserMultiFormatReader } from '@zxing/browser';
+
+type BarcodeDetection = { rawValue: string };
+type BarcodeDetectorClass = new () => { detect: (source: ImageBitmapSource) => Promise<BarcodeDetection[]> };
+
+export interface BarcodeResult {
+ code?: string;
+ error?: string;
+}
+
+export const useBarcodeScanner = () => {
+ const videoRef = useRef<HTMLVideoElement | null>(null);
+ const [result, setResult] = useState<BarcodeResult>({});
+
+ useEffect(() => {
+ const reader = new BrowserMultiFormatReader();
+ let active = true;
+ let stop: (() => void) | undefined;
+ let currentVideoElement: HTMLVideoElement | null = null;
+
+ const start = async () => {
+ try {
+ const detectorClass = (
+ window as typeof window & { BarcodeDetector?: BarcodeDetectorClass }
+ ).BarcodeDetector;
+ if (detectorClass) {
+ const detector = new detectorClass();
+ const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+ if (videoRef.current) {
+ videoRef.current.srcObject = stream;
+ await videoRef.current.play();
+ currentVideoElement = videoRef.current;
+ }
+ const scan = async () => {
+ if (!active || !videoRef.current) return;
+ const tracks = (videoRef.current.srcObject as MediaStream | null)?.getVideoTracks();
+ if (!tracks || tracks.length === 0) return;
+ const frame = await createImageBitmap(videoRef.current);
+ const codes = await detector.detect(frame);
+ if (codes.length > 0) {
+ setResult({ code: codes[0].rawValue });
+ } else {
+ requestAnimationFrame(scan);
+ }
+ };
+ void scan();
+ } else {
+ const controls = await reader.decodeFromVideoDevice(
+ undefined,
+ videoRef.current ?? undefined,
+ (decoded) => {
+ if (decoded) {
+ setResult({ code: decoded.getText() });
+ }
+ },
+ );
+ stop = () => controls.stop();
+ }
+ } catch (error) {
+ setResult({ error: (error as Error).message });
+ }
+ };
+
+ void start();
+ return () => {
+ active = false;
+ stop?.();
+ const stream = currentVideoElement?.srcObject as MediaStream | null;
+ if (stream) {
+ stream.getTracks().forEach((track) => track.stop());
+ }
+ };
+ }, []);
+
+ return { videoRef, result };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| components | +
+
+ |
+ 70.9% | +39/55 | +65.62% | +21/32 | +65.21% | +15/23 | +69.56% | +32/46 | +
| hooks | +
+
+ |
+ 2.27% | +1/44 | +0% | +0/20 | +0% | +0/8 | +2.5% | +1/40 | +
| models | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +0/0 | +100% | +2/2 | +
| modules | +
+
+ |
+ 80% | +16/20 | +86.36% | +19/22 | +66.66% | +2/3 | +88.23% | +15/17 | +
| screens | +
+
+ |
+ 83.33% | +240/288 | +72.72% | +112/154 | +88.31% | +68/77 | +87.07% | +229/263 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + + + + + + + +1x +1x + | export interface Product {
+ id: string;
+ name: string;
+ category: string;
+ unit_type: string;
+ bulk_name?: string;
+ barcode?: string;
+ archived: boolean;
+ created_at: number;
+ updated_at: number;
+}
+
+export const DEFAULT_UNIT_TYPE = 'unit';
+export const DEFAULT_BULK_NAME = 'carton';
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Product.ts | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +0/0 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| openFoodFacts.ts | +
+
+ |
+ 80% | +16/20 | +86.36% | +19/22 | +66.66% | +2/3 | +88.23% | +15/17 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | + + + + + + + +1x +1x + +2x + +1x +2x + + + +2x +2x + +2x +2x +2x + +2x + + + + + + + + + +2x +1x + + +1x + + + + + + + + + +2x + + + + | export interface ExternalProductInfo {
+ name: string | null;
+ brand?: string | null;
+ quantity?: string | null;
+ image?: string | null;
+ source: 'openfoodfacts';
+}
+
+const BASE_URL = 'https://world.openfoodfacts.org/api/v2/product';
+const REQUEST_TIMEOUT_MS = 5000;
+
+const isOffline = () => typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine;
+
+export const fetchProductFromOFF = async (barcode: string): Promise<ExternalProductInfo | null> => {
+ Iif (!barcode || isOffline()) {
+ return null;
+ }
+
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+
+ try {
+ const response = await fetch(`${BASE_URL}/${barcode}.json`, { signal: controller.signal });
+ Iif (!response.ok) return null;
+
+ const data = (await response.json()) as {
+ status?: number;
+ product?: {
+ product_name?: string | null;
+ brands?: string | null;
+ quantity?: string | null;
+ image_url?: string | null;
+ };
+ };
+
+ if (data?.status !== 1 || !data.product || !data.product.product_name) {
+ return null;
+ }
+
+ return {
+ name: data.product.product_name ?? null,
+ brand: data.product.brands ?? null,
+ quantity: data.product.quantity ?? null,
+ image: data.product.image_url ?? null,
+ source: 'openfoodfacts',
+ } satisfies ExternalProductInfo;
+ } catch {
+ return null;
+ } finally {
+ clearTimeout(timeout);
+ }
+};
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 | + + + + + + + + + + + + + + + + + + + + + +1x +28x +28x +28x +28x +28x +28x +28x + +28x +4x +4x +4x + + + +28x +2x +2x +2x +2x +1x +1x + +1x +1x +1x + + +28x +1x +1x +1x + + +28x +1x +1x +1x + +1x +1x + +1x +1x + +1x + + + + +1x +1x +1x + + + + + +1x +1x +1x + + +28x + + + + + +28x +1x +1x +1x + + + +1x + + + + + + + + +28x + + + + + + + + + + + +12x + + + + + + + +28x + + + + + + +7x + + + + + + + + + + + + + +1x + + + + + + +1x + + + + + + + + + + + + + + + + | 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();
+ Iif (!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 () => {
+ Iif (!editingCategoryId) return;
+ const trimmed = editName.trim();
+ Iif (!trimmed) return;
+
+ const category = categories.find((item) => item.id === editingCategoryId);
+ Iif (!category) return;
+
+ const nameExists = categories.some(
+ (item) => item.id !== editingCategoryId && item.name.toLowerCase() === trimmed.toLowerCase(),
+ );
+ Iif (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;
+ Eif (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>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 | + + + + + + + + + + + + + + + + + + + + + + + + + +1x +75x +75x +75x +75x +75x +75x +75x +75x +75x +75x +75x +75x +75x + + +75x +75x + +75x +3x + +3x +1x +1x +1x + + +2x +2x + +2x +1x +1x +1x +1x + + +1x +1x + + + +75x +10x +9x +9x + + +75x + +2x +3x + + + + +75x + +5x + +5x + +5x +5x + + + + + +75x + +3x + + +2x + + +2x +2x +2x + + + + + +75x + +5x +5x + +5x + +5x +2x +2x +2x + + + + + +75x + +1x +1x + +1x + + + + +1x + +1x + +1x + + + + + +1x + +1x + + + + + + + + + + + + + + + +75x +18x +18x +9x + + + +75x +10x + + + + +75x + +14x +13x + + +13x +13x + + + + +75x +14x + + + +75x +9x +9x + + + + + +75x +12x +9x +9x + +12x + + +75x +3x + +3x +3x +2x + +2x +1x +1x + +1x +1x +1x + + + +1x +1x +1x + + + + + + + + + + + +3x +1x +1x + +1x +1x +1x +1x + + +75x + + + + + + + +2x +1x + + + + + + + + + + + + + + + + + + + + + + +75x +1x +1x +1x + + + +1x + + + + + +75x + + + + + + + + + + + + + + + + + + + + +4x + + + + + + + +1x + + + + + +82x + + + + + + + + + + + +38x +38x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +82x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + + + + + + + + + + + + + +50x + + + + + + + + + + + + + + +3x +3x +3x + + + + + + + + | import {
+ Alert,
+ AlertColor,
+ Button,
+ Container,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ InputAdornment,
+ MenuItem,
+ Snackbar,
+ Stack,
+ TextField,
+ Typography,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { ProductRow } from '../components/ProductRow';
+import { useCategories, useProducts } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+import { BarcodeScannerView } from '../components/BarcodeScannerView';
+import { ExternalProductInfo, fetchProductFromOFF } from '../modules/openFoodFacts';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
+
+export const ManageProductsScreen = () => {
+ const db = useDatabase();
+ const products = useProducts();
+ const categories = useCategories();
+ const location = useLocation();
+ const [search, setSearch] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState<string>('all');
+ const [name, setName] = useState('');
+ const [category, setCategory] = useState('');
+ const [barcode, setBarcode] = useState('');
+ const [barcodeError, setBarcodeError] = useState('');
+ const [nameError, setNameError] = useState('');
+ const [scannerOpen, setScannerOpen] = useState(false);
+ const [lookupStatus, setLookupStatus] = useState<'idle' | 'loading' | 'found' | 'notfound' | 'offline'>(
+ 'idle',
+ );
+ const [externalProduct, setExternalProduct] = useState<ExternalProductInfo | null>(null);
+ const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
+
+ const lookupBarcode = useCallback(async (code: string) => {
+ Iif (!code) return;
+
+ if (typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine) {
+ setLookupStatus('offline');
+ setExternalProduct(null);
+ return;
+ }
+
+ setLookupStatus('loading');
+ const result = await fetchProductFromOFF(code);
+
+ if (result) {
+ setExternalProduct(result);
+ setLookupStatus('found');
+ Eif (result.name) {
+ setName((prev) => prev || result.name || '');
+ }
+ } else {
+ setExternalProduct(null);
+ setLookupStatus('notfound');
+ }
+ }, []);
+
+ 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]);
+
+ const findBarcodeConflict = useCallback(
+ (value?: string, productId?: string) =>
+ value
+ ? products.find((product) => product.barcode === value && product.id !== productId)
+ : undefined,
+ [products],
+ );
+
+ const findNameConflict = useCallback(
+ (value?: string, productId?: string) => {
+ Iif (!value) return undefined;
+
+ const normalizedValue = value.trim().toLowerCase();
+
+ return products.find(
+ (product) => product.id !== productId && product.name.trim().toLowerCase() === normalizedValue,
+ );
+ },
+ [products],
+ );
+
+ const assertUniqueBarcode = useCallback(
+ async (value?: string, productId?: string) => {
+ if (!value) return;
+
+ const conflict =
+ findBarcodeConflict(value, productId) ?? (await db.products.where('barcode').equals(value).first());
+
+ if (conflict && conflict.id !== productId) {
+ const error = new Error('This barcode is already assigned to another product.');
+ error.name = 'DuplicateBarcodeError';
+ throw error;
+ }
+ },
+ [db.products, findBarcodeConflict],
+ );
+
+ const assertUniqueName = useCallback(
+ async (value: string, productId?: string) => {
+ const normalized = value.trim().toLowerCase();
+ Iif (!normalized) return;
+
+ const conflict = findNameConflict(value, productId);
+
+ if (conflict) {
+ const error = new Error('A product with this name already exists.');
+ error.name = 'DuplicateNameError';
+ throw error;
+ }
+ },
+ [findNameConflict],
+ );
+
+ const addProductToAutoLists = useCallback(
+ async (product: Product, timestamp: number) => {
+ const pickLists = await db.pickLists.toArray();
+ const eligibleLists = pickLists.filter(
+ (pickList) =>
+ pickList.auto_add_new_products && Array.isArray(pickList.categories)
+ ? pickList.categories.includes(product.category)
+ : false,
+ );
+
+ Iif (eligibleLists.length === 0) return;
+
+ await Promise.all(
+ eligibleLists.map(async (pickList) => {
+ const existing = await db.pickItems
+ .where('pick_list_id')
+ .equals(pickList.id)
+ .filter((item) => item.product_id === product.id)
+ .first();
+
+ Iif (existing) return undefined;
+
+ return db.pickItems.add({
+ id: uuidv4(),
+ pick_list_id: pickList.id,
+ product_id: product.id,
+ quantity: 1,
+ is_carton: false,
+ status: 'pending',
+ created_at: timestamp,
+ updated_at: timestamp,
+ });
+ }),
+ );
+ },
+ [db.pickItems, db.pickLists],
+ );
+
+ useEffect(() => {
+ Iif (categoryOptions.length === 0) return;
+ if (!categoryOptions.includes(category)) {
+ setCategory(categoryOptions[0]);
+ }
+ }, [category, categoryOptions]);
+
+ useEffect(() => {
+ Iif (selectedCategory !== 'all' && !categoryOptions.includes(selectedCategory)) {
+ setSelectedCategory('all');
+ }
+ }, [categoryOptions, selectedCategory]);
+
+ const filtered = useMemo(
+ () =>
+ products.filter((p) => {
+ const matchesSearch = `${p.name} ${p.category}`
+ .toLowerCase()
+ .includes(search.toLowerCase());
+ const matchesCategory = selectedCategory === 'all' || p.category === selectedCategory;
+ return matchesSearch && matchesCategory;
+ }),
+ [products, search, selectedCategory],
+ );
+
+ const sortedFiltered = useMemo(
+ () => filtered.slice().sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())),
+ [filtered],
+ );
+
+ useEffect(() => {
+ const state = location.state as { newBarcode?: string } | null;
+ Iif (state?.newBarcode) {
+ setBarcode(state.newBarcode);
+ void lookupBarcode(state.newBarcode);
+ }
+ }, [location.state, lookupBarcode]);
+
+ useEffect(() => {
+ if (!barcode) {
+ setLookupStatus('idle');
+ setExternalProduct(null);
+ }
+ setBarcodeError('');
+ }, [barcode]);
+
+ const addProduct = async () => {
+ Iif (!name || !category) return;
+
+ try {
+ await assertUniqueName(name);
+ await assertUniqueBarcode(barcode || undefined);
+ } catch (error) {
+ if (error instanceof Error && error.name === 'DuplicateNameError') {
+ setNameError(error.message);
+ return;
+ }
+ Eif (error instanceof Error && error.name === 'DuplicateBarcodeError') {
+ setBarcodeError(error.message);
+ return;
+ }
+ throw error;
+ }
+ const timestamp = Date.now();
+ const productId = uuidv4();
+ const newProduct: Product = {
+ id: productId,
+ name,
+ category,
+ unit_type: DEFAULT_UNIT_TYPE,
+ bulk_name: DEFAULT_BULK_NAME,
+ barcode: barcode || undefined,
+ archived: false,
+ created_at: timestamp,
+ updated_at: timestamp,
+ };
+
+ await db.transaction('rw', db.products, db.pickLists, db.pickItems, async () => {
+ await db.products.add(newProduct);
+ await addProductToAutoLists(newProduct, timestamp);
+ });
+ setName('');
+ setBarcode('');
+ setNameError('');
+ setFeedback({ text: 'Product added.', severity: 'success' });
+ };
+
+ const updateProduct = async (
+ productId: string,
+ updates: {
+ name: string;
+ category: string;
+ barcode?: string;
+ },
+ ) => {
+ await assertUniqueName(updates.name, productId);
+ await assertUniqueBarcode(updates.barcode, productId);
+
+ const existing = await db.products.get(productId);
+ if (!existing) return;
+
+ const normalizedName = updates.name.trim();
+ const oldNameKey = existing.name.trim().toLowerCase();
+ const updatedProduct: Product = {
+ ...existing,
+ ...updates,
+ name: normalizedName,
+ unit_type: DEFAULT_UNIT_TYPE,
+ bulk_name: DEFAULT_BULK_NAME,
+ updated_at: Date.now(),
+ };
+
+ await db.products.put(updatedProduct);
+ await db.products
+ .filter((product) => product.id !== productId && product.name.trim().toLowerCase() === oldNameKey)
+ .delete();
+ setFeedback({ text: 'Product updated.', severity: 'success' });
+ };
+
+ const deleteProduct = async (productId: string) => {
+ const usageCount = await db.pickItems.where('product_id').equals(productId).count();
+ Eif (usageCount > 0) {
+ setFeedback({
+ text: `Cannot delete this product while ${usageCount} pick item(s) reference it. Remove those items first.`,
+ severity: 'error',
+ });
+ return;
+ }
+ await db.products.delete(productId);
+ setFeedback({ text: 'Product deleted.', severity: 'success' });
+ };
+
+ return (
+ <Container sx={{ py: 4 }}>
+ <Typography variant="h5" gutterBottom>
+ Manage Products
+ </Typography>
+ <Stack spacing={2}>
+ <Snackbar
+ open={Boolean(feedback)}
+ autoHideDuration={4000}
+ onClose={() => setFeedback(null)}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+ </Snackbar>
+ <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+ Edit Categories
+ </Button>
+ <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+ <TextField
+ placeholder="Search"
+ value={search}
+ onChange={(event) => setSearch(event.target.value)}
+ InputProps={{ startAdornment: <InputAdornment position="start">{<SearchIcon />}</InputAdornment> }}
+ fullWidth
+ />
+ <TextField
+ select
+ label="Filter by category"
+ value={selectedCategory}
+ onChange={(event) => setSelectedCategory(event.target.value)}
+ sx={{ minWidth: { sm: 180 } }}
+ inputProps={{ 'aria-label': 'Category filter' }}
+ >
+ <MenuItem value="all">All categories</MenuItem>
+ {categoryOptions.map((cat) => (
+ <MenuItem key={cat} value={cat}>
+ {cat}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Stack>
+ <Stack spacing={1}>
+ <Typography variant="subtitle1">Add Product</Typography>
+ <TextField
+ label="Name"
+ value={name}
+ onChange={(event) => {
+ setName(event.target.value);
+ setNameError('');
+ }}
+ error={Boolean(nameError)}
+ helperText={nameError || undefined}
+ InputProps={
+ name
+ ? {
+ endAdornment: (
+ <Button
+ onClick={() => {
+ setName('');
+ setNameError('');
+ }}
+ size="small"
+ >
+ Clear
+ </Button>
+ ),
+ }
+ : undefined
+ }
+ />
+ <TextField
+ select
+ label="Add product category"
+ value={category}
+ onChange={(event) => setCategory(event.target.value)}
+ disabled={categoryOptions.length === 0}
+ >
+ {categoryOptions.map((cat) => (
+ <MenuItem key={cat} value={cat}>
+ {cat}
+ </MenuItem>
+ ))}
+ </TextField>
+ {barcode ? (
+ <Stack spacing={1}>
+ <TextField
+ label="Barcode"
+ value={barcode}
+ onChange={(event) => setBarcode(event.target.value)}
+ error={Boolean(barcodeError)}
+ helperText={barcodeError || undefined}
+ InputProps={{
+ endAdornment: (
+ <Button onClick={() => setBarcode('')} size="small">
+ Clear
+ </Button>
+ ),
+ }}
+ />
+ {lookupStatus === 'loading' ? <Typography variant="body2">Looking up product…</Typography> : null}
+ {lookupStatus === 'found' && externalProduct ? (
+ <Typography variant="body2" color="text.secondary">
+ Found {externalProduct.name ?? 'product'} via Open Food Facts. Please confirm details.
+ </Typography>
+ ) : null}
+ {lookupStatus === 'notfound' ? (
+ <Typography variant="body2" color="text.secondary">
+ Product not found. Add it manually.
+ </Typography>
+ ) : null}
+ {lookupStatus === 'offline' ? (
+ <Typography variant="body2" color="text.secondary">
+ You are offline. Enter details manually.
+ </Typography>
+ ) : null}
+ </Stack>
+ ) : (
+ <Button variant="outlined" onClick={() => setScannerOpen(true)}>
+ Scan Barcode
+ </Button>
+ )}
+ <Button variant="contained" onClick={addProduct} disabled={!name || !category}>
+ Save Product
+ </Button>
+ </Stack>
+ {sortedFiltered.length === 0 ? (
+ <Typography variant="body2" color="text.secondary">
+ No products match your search and category filter.
+ </Typography>
+ ) : (
+ sortedFiltered.map((product) => (
+ <ProductRow
+ key={product.id}
+ product={product}
+ categories={categoryOptions}
+ onSave={updateProduct}
+ onDelete={deleteProduct}
+ />
+ ))
+ )}
+ </Stack>
+ <Dialog open={scannerOpen} onClose={() => setScannerOpen(false)} fullWidth>
+ <DialogTitle>Scan Barcode</DialogTitle>
+ <DialogContent>
+ <BarcodeScannerView
+ onDetected={(code) => {
+ setBarcode(code);
+ void lookupBarcode(code);
+ setScannerOpen(false);
+ }}
+ />
+ </DialogContent>
+ </Dialog>
+ </Container>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 | + + + + + + + + + + + + + + + + + + + + + + + +1x +22x +22x +22x +22x +22x +22x + +22x +4x +12x +4x + + +22x +4x +16x + + +4x +8x + + + +8x + + + + +66x + +22x +1x +1x +1x + + +22x +1x +1x +1x + + +22x +1x +1x +1x +1x +1x + + + + + +22x +1x +1x +1x +1x + + +22x + + + + + + + + + +66x + + + + + +1x +1x +1x + + + + + + + + +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + +51x + + + + + + + +15x + + + + + + + + + + + + + + + + + | import {
+ Button,
+ Container,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemText,
+ Stack,
+ TextField,
+ Typography,
+} from '@mui/material';
+import { Delete, Edit } from '@mui/icons-material';
+import { format } from 'date-fns';
+import { useMemo, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { usePickLists, useAreas } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+import { PickList } from '../models/PickList';
+
+export const PickListsScreen = () => {
+ const lists = usePickLists();
+ const areas = useAreas();
+ const db = useDatabase();
+ const [editingList, setEditingList] = useState<PickList | null>(null);
+ const [areaId, setAreaId] = useState('');
+ const [notes, setNotes] = useState('');
+
+ const areaNameById = useMemo(() => {
+ const map = new Map<string, string>();
+ areas.forEach((area) => map.set(area.id, area.name));
+ return map;
+ }, [areas]);
+
+ const sortedLists = useMemo(() => {
+ const locale = new Intl.Collator(undefined, { sensitivity: 'base' });
+ const normalizeAreaName = (areaId: string) =>
+ (areaNameById.get(areaId) ?? 'Unknown area').trim();
+
+ return [...lists].sort((a, b) => {
+ const nameComparison = locale.compare(
+ normalizeAreaName(a.area_id),
+ normalizeAreaName(b.area_id),
+ );
+ Eif (nameComparison !== 0) return nameComparison;
+ return a.created_at - b.created_at;
+ });
+ }, [areaNameById, lists]);
+
+ const getAreaName = (areaId: string) => areaNameById.get(areaId) ?? 'Unknown area';
+
+ const openEdit = (list: PickList) => {
+ setEditingList(list);
+ setAreaId(list.area_id);
+ setNotes(list.notes ?? '');
+ };
+
+ const closeEdit = () => {
+ setEditingList(null);
+ setAreaId('');
+ setNotes('');
+ };
+
+ const saveEdit = async () => {
+ Iif (!editingList || !areaId) return;
+ const listId = editingList.id;
+ const trimmedNotes = notes.trim() || undefined;
+ closeEdit();
+ await db.pickLists.update(listId, {
+ area_id: areaId,
+ notes: trimmedNotes,
+ });
+ };
+
+ const deleteList = async (list: PickList) => {
+ const confirmed = window.confirm('Remove this pick list and its items?');
+ Iif (!confirmed) return;
+ await db.pickItems.where('pick_list_id').equals(list.id).delete();
+ await db.pickLists.delete(list.id);
+ };
+
+ return (
+ <Container sx={{ py: 4 }}>
+ <Typography variant="h5" gutterBottom>
+ Pick Lists
+ </Typography>
+ <Button component={RouterLink} to="/start" variant="contained" sx={{ mb: 2 }}>
+ Add Pick List
+ </Button>
+ <List>
+ {sortedLists.map((list) => (
+ <ListItem key={list.id} divider secondaryAction={
+ <Stack direction="row" spacing={1}>
+ <IconButton
+ edge="end"
+ aria-label="Edit"
+ onClick={(event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ openEdit(list);
+ }}
+ >
+ <Edit />
+ </IconButton>
+ <IconButton
+ edge="end"
+ aria-label="Delete"
+ onClick={(event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ deleteList(list);
+ }}
+ >
+ <Delete />
+ </IconButton>
+ </Stack>
+ }>
+ <ListItemButton component={RouterLink} to={`/pick-lists/${list.id}`}>
+ <ListItemText
+ primary={getAreaName(list.area_id)}
+ secondary={
+ <Stack spacing={0.5}>
+ {list.notes ? <span>{list.notes}</span> : null}
+ <Typography variant="caption" color="text.secondary">
+ Created {format(list.created_at, 'PPpp')}
+ </Typography>
+ </Stack>
+ }
+ secondaryTypographyProps={{ component: 'div' }}
+ />
+ </ListItemButton>
+ </ListItem>
+ ))}
+ </List>
+
+ {editingList ? (
+ <Dialog open onClose={closeEdit} fullWidth>
+ <DialogTitle>Edit Pick List</DialogTitle>
+ <DialogContent sx={{ pt: 1 }}>
+ <Stack spacing={2} mt={1}>
+ <TextField
+ select
+ SelectProps={{ native: true }}
+ fullWidth
+ label="Area"
+ value={areaId}
+ onChange={(event) => setAreaId(event.target.value)}
+ >
+ {areas.map((area) => (
+ <option key={area.id} value={area.id}>
+ {area.name}
+ </option>
+ ))}
+ </TextField>
+ <TextField
+ label="Notes"
+ value={notes}
+ onChange={(event) => setNotes(event.target.value)}
+ multiline
+ minRows={2}
+ />
+ </Stack>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={closeEdit}>Cancel</Button>
+ <Button variant="contained" onClick={saveEdit} disabled={!areaId}>
+ Save Changes
+ </Button>
+ </DialogActions>
+ </Dialog>
+ ) : null}
+ </Container>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ManageCategoriesScreen.tsx | +
+
+ |
+ 80.88% | +55/68 | +60.71% | +17/28 | +94.11% | +16/17 | +85.48% | +53/62 | +
| ManageProductsScreen.tsx | +
+
+ |
+ 80.6% | +133/165 | +77.35% | +82/106 | +81.39% | +35/43 | +84.21% | +128/152 | +
| PickListsScreen.tsx | +
+
+ |
+ 94.54% | +52/55 | +65% | +13/20 | +100% | +17/17 | +97.95% | +48/49 | +