inventory: barcode scanner in Add-item dialog

Add a camera barcode/QR scanner (components/scan/barcode-scanner.tsx,
@zxing/browser lazy-loaded) and a Barcode/NDC field to the pharmacy
Add-item dialog. Scanning a GS1 DataMatrix auto-fills expiry (AI 17) and
lot (AI 10 -> notes), with the GTIN (AI 01) as the barcode; plain 1D
barcodes drop straight into the field. Persists a nullable inventory
barcode column (migration 0036) through the type/validation/service, and
surfaces it on the item detail. i18n added to all locales.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/pharmacy/add-inventory-dialog.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { ScanLine } from "lucide-react";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { BarcodeScanner } from "@/components/scan/barcode-scanner";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -15,6 +17,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { parseGs1 } from "@/lib/gs1";
 import type { InventoryInput } from "@/lib/inventory";
 import { notify } from "@/lib/toast";
 
@@ -48,7 +51,12 @@ export function AddInventoryDialog({
   const [stockQuantity, setStockQuantity] = useState("0");
   const [reorderThreshold, setReorderThreshold] = useState("0");
   const [location, setLocation] = useState("");
+  const [barcode, setBarcode] = useState("");
   const [expiresAt, setExpiresAt] = useState("");
+  // Lot/batch parsed from a GS1 scan. No dedicated field, so it rides along in
+  // notes (surfaced on the item detail).
+  const [notes, setNotes] = useState("");
+  const [scannerOpen, setScannerOpen] = useState(false);
 
   const reset = () => {
     setName("");
@@ -58,7 +66,24 @@ export function AddInventoryDialog({
     setStockQuantity("0");
     setReorderThreshold("0");
     setLocation("");
+    setBarcode("");
     setExpiresAt("");
+    setNotes("");
+  };
+
+  // A scanned medication barcode: store the code, and when it's a GS1
+  // DataMatrix, auto-fill expiry (AI 17) and lot (AI 10, -> notes).
+  const handleScan = (raw: string) => {
+    setScannerOpen(false);
+    const gs1 = parseGs1(raw);
+    if (gs1) {
+      setBarcode(gs1.gtin ?? raw);
+      if (gs1.expiry) setExpiresAt(gs1.expiry);
+      if (gs1.lot) setNotes((n) => n || `Lot: ${gs1.lot}`);
+    } else {
+      setBarcode(raw.trim());
+    }
+    notify.success(t("inventory.dialog.scannedTitle"), gs1?.gtin ?? raw.trim());
   };
 
   const submit = (event: FormEvent) => {
@@ -79,7 +104,9 @@ export function AddInventoryDialog({
       stockQuantity: Number.parseInt(stockQuantity, 10) || 0,
       reorderThreshold: Number.parseInt(reorderThreshold, 10) || 0,
       location: location.trim(),
+      barcode: barcode.trim() || null,
       expiresAt: expiresAt || null,
+      notes: notes.trim() || null,
     });
     notify.success(t("inventory.dialog.addedTitle"), trimmed);
     reset();
@@ -87,6 +114,7 @@ export function AddInventoryDialog({
   };
 
   return (
+    <>
     <Dialog
       onOpenChange={(o) => {
         onOpenChange(o);
@@ -174,6 +202,26 @@ export function AddInventoryDialog({
                 />
               </Field>
             </div>
+
+            <Field label={t("inventory.dialog.barcode")}>
+              <div className="flex items-center gap-2">
+                <Input
+                  inputMode="numeric"
+                  onChange={(event) => setBarcode(event.target.value)}
+                  placeholder={t("inventory.dialog.barcodePlaceholder")}
+                  value={barcode}
+                />
+                <Button
+                  aria-label={t("inventory.dialog.scan")}
+                  onClick={() => setScannerOpen(true)}
+                  size="icon"
+                  type="button"
+                  variant="outline"
+                >
+                  <ScanLine className="size-4" />
+                </Button>
+              </div>
+            </Field>
           </DialogPanel>
 
           <DialogFooter>
@@ -187,5 +235,11 @@ export function AddInventoryDialog({
         </form>
       </DialogPopup>
     </Dialog>
+    <BarcodeScanner
+      onDetected={handleScan}
+      onOpenChange={setScannerOpen}
+      open={scannerOpen}
+    />
+    </>
   );
 }

frontend/components/pharmacy/inventory-detail-dialog.tsx

@@ -109,6 +109,10 @@ export function InventoryDetailDialog({
               label={t("inventory.dialog.expires")}
               value={item.expiresAt || "—"}
             />
+            <Row
+              label={t("inventory.dialog.barcode")}
+              value={item.barcode || "—"}
+            />
             {item.notes ? (
               <div className="flex flex-col gap-1 py-2">
                 <span className="text-muted-foreground text-sm">

frontend/components/scan/barcode-scanner.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+// Camera barcode/QR scanner in a dialog. Decoding uses @zxing/browser
+// (lazy-loaded so it stays out of the initial bundle), which reads 1D barcodes
+// (EAN/UPC/Code128) and 2D codes (QR, GS1 DataMatrix, PDF417) — the mix found
+// on medication packaging and patient wallet codes. Emits the decoded string
+// once, then the caller closes the dialog.
+export function BarcodeScanner({
+  open,
+  onOpenChange,
+  onDetected,
+  title,
+  description,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDetected: (value: string) => void;
+  title?: string;
+  description?: string;
+}) {
+  const { t } = useTranslation();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  // Keep the latest onDetected without restarting the camera on every render.
+  const onDetectedRef = useRef(onDetected);
+  onDetectedRef.current = onDetected;
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    let stopped = false;
+    let controls: { stop: () => void } | null = null;
+    setError(null);
+
+    (async () => {
+      const video = videoRef.current;
+      if (!video) return;
+      try {
+        const { BrowserMultiFormatReader } = await import("@zxing/browser");
+        const reader = new BrowserMultiFormatReader();
+        controls = await reader.decodeFromConstraints(
+          { video: { facingMode: "environment" } },
+          video,
+          (result) => {
+            if (result && !stopped) {
+              stopped = true;
+              controls?.stop();
+              onDetectedRef.current(result.getText());
+            }
+          },
+        );
+        // The dialog may have closed while getUserMedia was resolving.
+        if (stopped) controls.stop();
+      } catch (err) {
+        setError(
+          err instanceof DOMException && err.name === "NotAllowedError"
+            ? t("scan.permissionDenied")
+            : t("scan.unavailable"),
+        );
+      }
+    })();
+
+    return () => {
+      stopped = true;
+      controls?.stop();
+    };
+  }, [open, t]);
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogPopup className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title ?? t("scan.title")}</DialogTitle>
+          <DialogDescription>
+            {description ?? t("scan.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogPanel>
+          {error ? (
+            <p className="text-sm text-destructive">{error}</p>
+          ) : (
+            <div className="relative aspect-video overflow-hidden rounded-2xl border bg-black">
+              {/* biome-ignore lint/a11y/useMediaCaption: live camera preview */}
+              <video
+                className="size-full object-cover"
+                muted
+                playsInline
+                ref={videoRef}
+              />
+              <div className="pointer-events-none absolute inset-6 rounded-xl border-2 border-white/70" />
+            </div>
+          )}
+        </DialogPanel>
+
+        <DialogFooter>
+          <DialogClose render={<Button type="button" variant="outline" />}>
+            {t("scan.cancel")}
+          </DialogClose>
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}