Mobile view overhaul: bottom nav, card inventory, camera scanner, PWA

Replace the cramped horizontal sidebar with a 5-tab bottom nav (Home, Inventory, Scan, Custody, More) with an elevated scan button. Convert the 10-column inventory table to card-based list on mobile with scrollable filter pills and long-press selection. Add full-screen camera barcode scanner using html5-qrcode with post-scan action sheet. Set up PWA with vite-plugin-pwa for add-to-home-screen. Convert modals to bottom sheets, add pull-to-refresh, safe-area padding, and iOS input zoom fix. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-06 10:23:43 -04:00
parent 52564d1e2f
commit 11f4c0537d
24 changed files with 6160 additions and 344 deletions
@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from "react";
+import { Html5Qrcode } from "html5-qrcode";
+import { Icon } from "./primitives/index.js";
+
+export function CameraScanner({
+  onScan,
+  onClose,
+}: {
+  onScan: (decodedText: string) => void;
+  onClose: () => void;
+}) {
+  const scannerRef = useRef<Html5Qrcode | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [torchOn, setTorchOn] = useState(false);
+  const [torchAvailable, setTorchAvailable] = useState(false);
+  const lastScan = useRef("");
+  const lastScanTime = useRef(0);
+
+  useEffect(() => {
+    const id = "apothecary-scanner";
+    const scanner = new Html5Qrcode(id, { verbose: false });
+    scannerRef.current = scanner;
+
+    scanner
+      .start(
+        { facingMode: "environment" },
+        { fps: 10, qrbox: (w, h) => ({ width: Math.min(w - 40, 280), height: Math.min(h - 40, 280) }) },
+        (text) => {
+          const now = Date.now();
+          if (text === lastScan.current && now - lastScanTime.current < 3000) return;
+          lastScan.current = text;
+          lastScanTime.current = now;
+          onScan(text);
+        },
+        () => {},
+      )
+      .then(() => {
+        try {
+          const caps = scanner.getRunningTrackCameraCapabilities();
+          if (caps.torchFeature().isSupported()) {
+            setTorchAvailable(true);
+          }
+        } catch {
+          // torch check can fail on some browsers
+        }
+      })
+      .catch((err: Error) => {
+        setError(err.message || "Camera access denied");
+      });
+
+    return () => {
+      if (scanner.isScanning) {
+        scanner.stop().catch(() => {});
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const toggleTorch = () => {
+    try {
+      const caps = scannerRef.current?.getRunningTrackCameraCapabilities();
+      if (caps?.torchFeature().isSupported()) {
+        const next = !torchOn;
+        caps.torchFeature().apply(next);
+        setTorchOn(next);
+      }
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        background: "#000",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {/* Top bar */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "env(safe-area-inset-top, 12px) 16px 12px",
+          position: "relative",
+          zIndex: 2,
+        }}
+      >
+        <button
+          onClick={onClose}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 44,
+            height: 44,
+            borderRadius: "50%",
+            background: "rgba(0,0,0,0.5)",
+            border: "none",
+            cursor: "pointer",
+            color: "#fff",
+          }}
+        >
+          <Icon name="close" size={22} color="#fff" />
+        </button>
+        <div
+          className="serif"
+          style={{ color: "#fff", fontSize: 18, fontWeight: 500 }}
+        >
+          Scan
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          {torchAvailable && (
+            <button
+              onClick={toggleTorch}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 44,
+                height: 44,
+                borderRadius: "50%",
+                background: torchOn ? "var(--sage)" : "rgba(0,0,0,0.5)",
+                border: "none",
+                cursor: "pointer",
+                color: "#fff",
+              }}
+            >
+              <Icon name="flash" size={20} color="#fff" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Camera viewport */}
+      <div
+        ref={containerRef}
+        style={{ flex: 1, position: "relative", overflow: "hidden" }}
+      >
+        <div
+          id="apothecary-scanner"
+          style={{ width: "100%", height: "100%" }}
+        />
+        {error && (
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 16,
+              padding: 32,
+              color: "#fff",
+              textAlign: "center",
+            }}
+          >
+            <Icon name="camera" size={48} color="rgba(255,255,255,0.5)" />
+            <div style={{ fontSize: 16, fontWeight: 500 }}>Camera unavailable</div>
+            <div style={{ fontSize: 13, opacity: 0.7, maxWidth: 300 }}>{error}</div>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom hint */}
+      <div
+        style={{
+          padding: "16px 24px",
+          paddingBottom: "calc(16px + env(safe-area-inset-bottom, 0px))",
+          textAlign: "center",
+          color: "rgba(255,255,255,0.7)",
+          fontSize: 14,
+        }}
+      >
+        Point at a barcode or QR code
+      </div>
+    </div>
+  );
+}