Merge branch 'main' into codex/update-dependencies-to-latest-versions

playwright.config.ts

@@ -2,7 +2,8 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './e2e',
-  fullyParallel: true,
+  fullyParallel: false,
+  workers: 4,
   retries: process.env.CI ? 2 : 0,
   use: {
     baseURL: 'http://127.0.0.1:4173',

src/hooks/__tests__/useBarcodeScanner.test.tsx

@@ -2,12 +2,16 @@ import { renderHook, waitFor } from '@testing-library/react';
 import { describe, it, beforeEach, afterEach, expect, vi, type MockInstance } from 'vitest';
 import { useBarcodeScanner } from '../useBarcodeScanner';
 
-const decodeFromVideoDevice = vi.fn();
+const { decodeFromVideoDevice, MockBrowserMultiFormatReader } = vi.hoisted(() => {
+  const decodeSpy = vi.fn();
+  const Reader = vi.fn(function MockBrowserMultiFormatReader(this: { decodeFromVideoDevice: typeof decodeSpy }) {
+    this.decodeFromVideoDevice = decodeSpy;
+  });
+  return { decodeFromVideoDevice: decodeSpy, MockBrowserMultiFormatReader: Reader };
+});
 
 vi.mock('@zxing/browser', () => ({
-  BrowserMultiFormatReader: vi.fn(function MockBrowserMultiFormatReader() {
+  BrowserMultiFormatReader: MockBrowserMultiFormatReader,
-    return { decodeFromVideoDevice };
-  }),
 }));
 
 declare global {

src/screens/ActivePickListScreen.tsx

@@ -91,25 +91,17 @@ export const ActivePickListScreen = () => {
 
   const sortedItems = useMemo(() => {
     return [...itemsVisibleByStatus].sort((a, b) => {
-      const productA = productMap.get(a.product_id);
+      const timeA = a.created_at ?? a.updated_at ?? 0;
-      const productB = productMap.get(b.product_id);
+      const timeB = b.created_at ?? b.updated_at ?? 0;
 
-      const nameA = productA ? normalizeName(productA.name) : '';
+      if (timeA !== timeB) {
-      const nameB = productB ? normalizeName(productB.name) : '';
+        return timeA - timeB;
-
-      const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
-      if (nameComparison !== 0) {
-        return nameComparison;
       }
 
-      if (a.is_carton !== b.is_carton) {
+      const nameA = normalizeName(productMap.get(a.product_id)?.name ?? '');
-        return a.is_carton ? 1 : -1;
+      const nameB = normalizeName(productMap.get(b.product_id)?.name ?? '');
-      }
 
-      const timeA = a.updated_at ?? a.created_at;
+      return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
-      const timeB = b.updated_at ?? b.created_at;
-
-      return timeA - timeB;
     });
   }, [itemsVisibleByStatus, productMap]);
 

src/screens/ManageProductsScreen.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
   InputAdornment,
   MenuItem,
+  Snackbar,
   Stack,
   TextField,
   Typography,
@@ -301,7 +302,14 @@ export const ManageProductsScreen = () => {
         Manage Products
       </Typography>
       <Stack spacing={2}>
-        {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+        <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>