inventory: hardware (keyboard-wedge) barcode scanner in Add-item

Replace the camera scanner in the Add inventory item dialog with support
for a USB barcode scanner attached to the computer. A wedge scanner types
the code as a fast keystroke burst ending in Enter; a global keydown
listener (active while the dialog is open) buffers the burst by timing and
routes it through the existing GS1 parser, so scanning a medication
auto-fills barcode/expiry/lot without focusing any field. The barcode
input also parses on Enter for manual entry. The camera BarcodeScanner
component stays (still used by patient wallet import). i18n: replace the
inventory.dialog.scan label with a scanHint across all five locales.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-19 20:42:00 +03:00
parent 75502ceb60
commit 65975177cf
6 changed files with 92 additions and 45 deletions
@@ -1,10 +1,14 @@
"use client"; "use client";
import { ScanLine } from "lucide-react"; import {
import { type FormEvent, type ReactNode, useState } from "react"; type FormEvent,
type ReactNode,
useCallback,
useEffect,
useState,
} from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { BarcodeScanner } from "@/components/scan/barcode-scanner";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -56,7 +60,6 @@ export function AddInventoryDialog({
// Lot/batch parsed from a GS1 scan. No dedicated field, so it rides along in // Lot/batch parsed from a GS1 scan. No dedicated field, so it rides along in
// notes (surfaced on the item detail). // notes (surfaced on the item detail).
const [notes, setNotes] = useState(""); const [notes, setNotes] = useState("");
const [scannerOpen, setScannerOpen] = useState(false);
const reset = () => { const reset = () => {
setName(""); setName("");
@@ -73,18 +76,68 @@ export function AddInventoryDialog({
// A scanned medication barcode: store the code, and when it's a GS1 // A scanned medication barcode: store the code, and when it's a GS1
// DataMatrix, auto-fill expiry (AI 17) and lot (AI 10, -> notes). // DataMatrix, auto-fill expiry (AI 17) and lot (AI 10, -> notes).
const handleScan = (raw: string) => { const handleScan = useCallback(
setScannerOpen(false); (raw: string) => {
const gs1 = parseGs1(raw); const gs1 = parseGs1(raw);
if (gs1) { if (gs1) {
setBarcode(gs1.gtin ?? raw); setBarcode(gs1.gtin ?? raw);
if (gs1.expiry) setExpiresAt(gs1.expiry); if (gs1.expiry) setExpiresAt(gs1.expiry);
if (gs1.lot) setNotes((n) => n || `Lot: ${gs1.lot}`); if (gs1.lot) setNotes((n) => n || `Lot: ${gs1.lot}`);
} else { } else {
setBarcode(raw.trim()); setBarcode(raw.trim());
} }
notify.success(t("inventory.dialog.scannedTitle"), gs1?.gtin ?? raw.trim()); notify.success(
}; t("inventory.dialog.scannedTitle"),
gs1?.gtin ?? raw.trim(),
);
},
[t],
);
// Hardware barcode scanners are keyboard wedges: they "type" the code as a
// fast burst of keystrokes terminated by Enter. While the dialog is open we
// watch keydowns globally and, when a fast burst ends in Enter, treat the
// buffer as a scan — so the pharmacist can just scan a medication without
// first focusing any field. The timing gate (keys < 50ms apart) keeps
// ordinary typing out of the buffer; once a burst is detected we swallow the
// characters so they don't leak into the focused input.
useEffect(() => {
if (!open) return;
let buffer = "";
let lastTime = 0;
const MAX_GAP_MS = 50;
const MIN_LEN = 6;
const onKeyDown = (event: KeyboardEvent) => {
const now = Date.now();
const fast = now - lastTime <= MAX_GAP_MS;
lastTime = now;
if (event.key === "Enter") {
if (fast && buffer.length >= MIN_LEN) {
event.preventDefault();
event.stopPropagation();
handleScan(buffer);
}
buffer = "";
return;
}
if (
event.key.length === 1 &&
!event.metaKey &&
!event.ctrlKey &&
!event.altKey
) {
buffer = fast ? buffer + event.key : event.key;
if (fast && buffer.length >= 2) event.preventDefault();
} else {
buffer = "";
}
};
window.addEventListener("keydown", onKeyDown, true);
return () => window.removeEventListener("keydown", onKeyDown, true);
}, [open, handleScan]);
const submit = (event: FormEvent) => { const submit = (event: FormEvent) => {
event.preventDefault(); event.preventDefault();
@@ -114,7 +167,6 @@ export function AddInventoryDialog({
}; };
return ( return (
<>
<Dialog <Dialog
onOpenChange={(o) => { onOpenChange={(o) => {
onOpenChange(o); onOpenChange(o);
@@ -204,23 +256,24 @@ export function AddInventoryDialog({
</div> </div>
<Field label={t("inventory.dialog.barcode")}> <Field label={t("inventory.dialog.barcode")}>
<div className="flex items-center gap-2"> <Input
<Input inputMode="numeric"
inputMode="numeric" onChange={(event) => setBarcode(event.target.value)}
onChange={(event) => setBarcode(event.target.value)} // A hardware scanner sends Enter after the code; parse it here
placeholder={t("inventory.dialog.barcodePlaceholder")} // (instead of submitting the form) so a scan into this field is
value={barcode} // handled like the global wedge burst.
/> onKeyDown={(event) => {
<Button if (event.key === "Enter") {
aria-label={t("inventory.dialog.scan")} event.preventDefault();
onClick={() => setScannerOpen(true)} if (barcode.trim()) handleScan(barcode);
size="icon" }
type="button" }}
variant="outline" placeholder={t("inventory.dialog.barcodePlaceholder")}
> value={barcode}
<ScanLine className="size-4" /> />
</Button> <span className="text-muted-foreground text-xs">
</div> {t("inventory.dialog.scanHint")}
</span>
</Field> </Field>
</DialogPanel> </DialogPanel>
@@ -235,11 +288,5 @@ export function AddInventoryDialog({
</form> </form>
</DialogPopup> </DialogPopup>
</Dialog> </Dialog>
<BarcodeScanner
onDetected={handleScan}
onOpenChange={setScannerOpen}
open={scannerOpen}
/>
</>
); );
} }
@@ -713,7 +713,7 @@
"expires": "تنتهي الصلاحية", "expires": "تنتهي الصلاحية",
"barcode": "الباركود / NDC", "barcode": "الباركود / NDC",
"barcodePlaceholder": "امسح أو اكتب رمزًا", "barcodePlaceholder": "امسح أو اكتب رمزًا",
"scan": "مسح الباركود", "scanHint": "وصّل ماسح باركود USB وامسح الدواء — أو اكتب الرمز.",
"scannedTitle": "تم مسح الباركود", "scannedTitle": "تم مسح الباركود",
"cancel": "إلغاء", "cancel": "إلغاء",
"submit": "إضافة عنصر", "submit": "إضافة عنصر",
@@ -697,7 +697,7 @@
"expires": "Verfällt", "expires": "Verfällt",
"barcode": "Barcode / NDC", "barcode": "Barcode / NDC",
"barcodePlaceholder": "Code scannen oder eingeben", "barcodePlaceholder": "Code scannen oder eingeben",
"scan": "Barcode scannen", "scanHint": "Schließen Sie einen USB-Barcode-Scanner an und scannen Sie das Medikament oder geben Sie den Code ein.",
"scannedTitle": "Barcode gescannt", "scannedTitle": "Barcode gescannt",
"cancel": "Abbrechen", "cancel": "Abbrechen",
"submit": "Artikel hinzufügen", "submit": "Artikel hinzufügen",
@@ -697,7 +697,7 @@
"expires": "Expires", "expires": "Expires",
"barcode": "Barcode / NDC", "barcode": "Barcode / NDC",
"barcodePlaceholder": "Scan or type a code", "barcodePlaceholder": "Scan or type a code",
"scan": "Scan barcode", "scanHint": "Connect a USB barcode scanner and scan the medication — or type the code.",
"scannedTitle": "Barcode scanned", "scannedTitle": "Barcode scanned",
"cancel": "Cancel", "cancel": "Cancel",
"submit": "Add item", "submit": "Add item",
@@ -697,7 +697,7 @@
"expires": "Expire le", "expires": "Expire le",
"barcode": "Code-barres / NDC", "barcode": "Code-barres / NDC",
"barcodePlaceholder": "Scanner ou saisir un code", "barcodePlaceholder": "Scanner ou saisir un code",
"scan": "Scanner le code-barres", "scanHint": "Branchez un lecteur de code-barres USB et scannez le médicament — ou saisissez le code.",
"scannedTitle": "Code-barres scanné", "scannedTitle": "Code-barres scanné",
"cancel": "Annuler", "cancel": "Annuler",
"submit": "Ajouter l'article", "submit": "Ajouter l'article",
@@ -697,7 +697,7 @@
"expires": "Dhacaya", "expires": "Dhacaya",
"barcode": "Barcode / NDC", "barcode": "Barcode / NDC",
"barcodePlaceholder": "Iskaan garee ama qor koodh", "barcodePlaceholder": "Iskaan garee ama qor koodh",
"scan": "Iskaan garee barcode", "scanHint": "Ku xir iskaanka barcode-ka USB oo iskaan garee daawada — ama qor koodhka.",
"scannedTitle": "Barcode la iskaan gareeyay", "scannedTitle": "Barcode la iskaan gareeyay",
"cancel": "Jooji", "cancel": "Jooji",
"submit": "Ku dar shay", "submit": "Ku dar shay",