feat: integrate barcode scanning functionality and enhance Appwrite setup

- Added a new `barcode_products` collection to the Appwrite setup for managing barcode data. - Implemented barcode scanning feature with a dedicated modal for scanning and adding products. - Introduced new components for barcode product preview and management. - Updated the setup script to seed verified barcode products from a JSON file. - Enhanced the application state management to handle barcode-related actions and user interactions.
2026-05-27 14:29:22 +01:00
parent a7993af1d2
commit 023ec1096f
19 changed files with 2033 additions and 164 deletions
@@ -0,0 +1,60 @@
+import { Edit3, Plus, X } from "lucide-react";
+import { currency, wholeNumber } from "../lib/metrics";
+import { productCaffeineMg } from "../lib/barcodeLookup";
+import type { ResolvedBarcodeProduct } from "../types";
+
+export function BarcodeProductPreview({
+  barcode,
+  busy,
+  product,
+  onAddNow,
+  onCancel,
+  onEdit,
+}: {
+  barcode: string;
+  busy: boolean;
+  product: ResolvedBarcodeProduct;
+  onAddNow: () => void;
+  onCancel: () => void;
+  onEdit: () => void;
+}) {
+  const caffeineMg = productCaffeineMg(product);
+
+  return (
+    <section
+      className="rounded-3xl border border-cyan-200/20 bg-cyan-200/10 p-4 shadow-sm"
+      aria-labelledby="barcode-product-title"
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className="mt-1 h-4 w-4 shrink-0 rounded-full shadow-sm"
+          style={{ backgroundColor: product.flavourAccent }}
+          aria-hidden="true"
+        />
+        <div className="min-w-0">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-100">Barcode matched</p>
+          <h3 id="barcode-product-title" className="mt-1 text-xl font-semibold tracking-tight text-white">
+            Found: Red Bull {product.flavourName}, {product.sizeMl}ml, {currency.format(product.pricePerCan)},{" "}
+            {wholeNumber.format(caffeineMg)}mg caffeine
+          </h3>
+          <p className="mt-2 break-all text-sm text-slate-300">Barcode {barcode}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-2 sm:grid-cols-3">
+        <button className="primary-button justify-center" type="button" onClick={onAddNow} disabled={busy}>
+          <Plus size={17} aria-hidden="true" />
+          Add now
+        </button>
+        <button className="secondary-button justify-center" type="button" onClick={onEdit} disabled={busy}>
+          <Edit3 size={17} aria-hidden="true" />
+          Edit before adding
+        </button>
+        <button className="secondary-button justify-center" type="button" onClick={onCancel} disabled={busy}>
+          <X size={17} aria-hidden="true" />
+          Cancel
+        </button>
+      </div>
+    </section>
+  );
+}