page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useEffect, useMemo, useRef, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface HistoryEntry {
  id: string;
  barcode: string;
  qty: number;
  desc: string;
  state: "Pending" | "Saving" | "Recorded" | "Error";
  time: number;
}
 
interface StoreOption {
  id: number;
  name: string;
}
 
const LS_FLAGS_KEY = "PageStock2Count.Flags";
 
// Bit flags (to mirror legacy toggles)
// 1: Speak Product Descriptions
// 2: Buzzer for Errors
// 4: Speak Errors
// 8: Speak Quantities
// 16: Display Image
function flagsFromStorage(): number {
  if (typeof window === "undefined") return 0;
  const raw = window.localStorage.getItem(LS_FLAGS_KEY);
  return raw ? Number(raw) || 0 : 0;
}
 
function saveFlagsToStorage(n: number) {
  try {
    window.localStorage.setItem(LS_FLAGS_KEY, String(n));
  } catch {}
}
 
export default function SimpleCountPage() {
  const [barcode, setBarcode] = useState("");
  const [qty, setQty] = useState<number>(1);
  const [flags, setFlags] = useState<number>(0);
  const [currentDesc, setCurrentDesc] = useState<string>("");
  const [imageUrl, setImageUrl] = useState<string>("");
  const [history, setHistory] = useState<HistoryEntry[]>([]);
  const [saving, setSaving] = useState(false);
  const [stores, setStores] = useState<StoreOption[]>([]);
  const [storeId, setStoreId] = useState<string>("0");
  const [reference, setReference] = useState<string>("");
  const [linking, setLinking] = useState(false);
  const [linkedStocktakeId, setLinkedStocktakeId] = useState<number | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const audioRef = useRef<HTMLAudioElement>(null);
 
  useEffect(() => {
    setFlags(flagsFromStorage());
  }, []);
 
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
 
  useEffect(() => {
    // load stores for optional linkage to overview
    const loadStores = async () => {
      try {
        const resp = await apiClient.getLocations({ source: 'elink' });
        if (resp.success && (resp.data as any)?.DATS) {
          setStores((resp.data as any).DATS.map((r: any) => ({ id: Number(r.f100) || 0, name: r.f101 || "" })));
        }
      } catch (e) {
        // ignore
      }
    };
    loadStores();
  }, []);
 
  const speakDesc = useMemo(() => Boolean(flags & 1), [flags]);
  const buzzerOnError = useMemo(() => Boolean(flags & 2), [flags]);
  const speakErrors = useMemo(() => Boolean(flags & 4), [flags]);
  const speakQty = useMemo(() => Boolean(flags & 8), [flags]);
  const showImage = useMemo(() => Boolean(flags & 16), [flags]);
 
  const toggleFlag = (bit: number) => {
    const next = flags ^ bit;
    setFlags(next);
    saveFlagsToStorage(next);
  };
 
  const playVoice = (text: string) => {
    const el = audioRef.current;
    if (!el) return;
    el.src = "/geni/audio_|" + encodeURIComponent(text) + "|";
    el.load();
    el.play().catch(() => {});
  };
 
  const playBuzzer = () => {
    const el = audioRef.current;
    if (!el) return;
    el.src = "/geni/audio_buzzer";
    el.load();
    el.play().catch(() => {});
  };
 
  const lookupProductByBarcode = async (bc: string): Promise<{ pid?: number; desc?: string; img?: string } | null> => {
    try {
      const resp = await apiClient.lookupProductByBarcode(bc);
      if (resp.success && resp.data?.DATS) {
        const d = resp.data.DATS;
        if (Array.isArray(d) && d.length === 1) {
          const r = d[0];
          let img = "";
          const f199 = r?.f199;
          if (Array.isArray(f199) && f199.length > 0) img = f199[0];
          else if (typeof f199 === "string") img = f199;
          return { pid: Number(r?.f100) || undefined, desc: r?.f101 || "", img };
        }
      }
      return null;
    } catch (e) {
      return null;
    }
  };
 
  const pushHistory = (h: Omit<HistoryEntry, "id" | "time">) => {
    const entry: HistoryEntry = { id: crypto.randomUUID(), time: Date.now(), ...h };
    setHistory((prev) => [entry, ...prev].slice(0, 50));
  };
 
  const handleSave = async () => {
    const bc = barcode.trim();
    if (!bc) return;
 
    const thisQty = Number(qty) || 1;
 
    // If last pending and same barcode, increment qty locally
    const last = history[0];
    if (last && last.state === "Pending" && last.barcode === bc) {
      const upd = { ...last, qty: last.qty + thisQty } as HistoryEntry;
      setHistory((prev) => [upd, ...prev.slice(1)]);
      if (speakQty) playVoice(String(upd.qty));
      setBarcode("");
      inputRef.current?.focus();
      return;
    }
 
    // Lookup product
    const found = await lookupProductByBarcode(bc);
    if (!found?.pid) {
      if (buzzerOnError) playBuzzer();
      if (speakErrors) playVoice("Unknown barcode");
      setCurrentDesc(`Unrecognised: ${bc}`);
      setImageUrl("");
      pushHistory({ barcode: bc, qty: thisQty, desc: "Unknown barcode", state: "Error" });
      setBarcode("");
      inputRef.current?.focus();
      return;
    }
 
    const desc = found.desc || "";
    setCurrentDesc(desc);
    if (showImage) setImageUrl(found.img || ""); else setImageUrl("");
    if (speakDesc && desc) playVoice(desc);
    else if (speakQty) playVoice(String(thisQty));
 
    const pending: HistoryEntry = {
      id: crypto.randomUUID(),
      barcode: bc,
      qty: thisQty,
      desc: desc,
      state: "Saving",
      time: Date.now(),
    };
    setHistory((prev) => [pending, ...prev].slice(0, 50));
 
    setSaving(true);
    try {
      const resp = await apiClient.recordStocktakeCount({
        productId: found.pid,
        quantity: thisQty,
        barcode: bc,
        storeId: storeId !== "0" ? storeId : undefined
      });
 
      if (!resp.success) throw new Error(resp.error || 'Failed to record stocktake');
 
      // Mark recorded
      setHistory((prev) => prev.map((e) => (e.id === pending.id ? { ...e, state: "Recorded" } : e)));
    } catch (e) {
      if (buzzerOnError) playBuzzer();
      setHistory((prev) => prev.map((e) => (e.id === pending.id ? { ...e, state: "Error" } : e)));
    } finally {
      setSaving(false);
      setBarcode("");
      inputRef.current?.focus();
    }
  };
 
  const escapeXml = (v: string) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 
  const createOverviewEntry = async () => {
    if (!reference.trim()) return;
    if (!storeId || storeId === "0") return;
    try {
      setLinking(true);
      const xml = [
        "<DATI>",
        "<f8_s>retailmax.elink.stocktake.control</f8_s>",
        "<f11_B>I</f11_B>",
        "<f180_E>1</f180_E>",
        `<f202_s>${escapeXml(reference)}</f202_s>`,
        `<f207_E>${storeId}</f207_E>`,
        "</DATI>",
      ].join("");
      const resp = await fetch("/dati", {
        method: "POST",
        headers: { "Content-Type": "application/xml", Accept: "application/json" },
        credentials: "include",
        body: xml,
      });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      // Best effort: try parse JSON to get new id if available
      let id: number | null = null;
      try {
        const data = await resp.json();
        const nid = Number(data?.f100 || data?.DATS?.[0]?.f100 || 0);
        if (nid > 0) id = nid;
      } catch {}
      setLinkedStocktakeId(id);
    } catch (e) {
      // swallow; user can retry
    } finally {
      setLinking(false);
    }
  };
 
  return (
    <div className="p-6 max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-text">Simple Counting</h1>
          <p className="text-sm text-muted">Quick, ad-hoc item counting with barcode or keyboard entry.</p>
        </div>
      </div>
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 bg-surface rounded-lg shadow p-4">
          <div className="flex items-end gap-3 flex-wrap">
            <div className="grow">
              <label className="block text-sm font-medium text-text mb-1">Barcode</label>
              <input
                ref={inputRef}
                value={barcode}
                onChange={(e) => setBarcode(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") handleSave();
                }}
                className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                placeholder="Scan or type barcode"
                autoFocus
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text mb-1">Qty</label>
              <input
                type="number"
                value={qty}
                min={1}
                onChange={(e) => setQty(Math.max(1, Number(e.target.value || 1)))}
                className="w-24 px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              />
            </div>
            <div className="self-start">
              <button
                onClick={handleSave}
                disabled={saving || !barcode.trim()}
                className="mt-6 px-4 py-2 bg-[#00543b] text-white rounded-md text-sm font-semibold hover:bg-[#003d2b] disabled:bg-surface-2 disabled:cursor-not-allowed"
              >
                {saving ? "Saving..." : "Save Barcode"}
              </button>
            </div>
          </div>
 
          <div className="mt-4 text-sm text-text">
            <div className="flex items-center gap-4 flex-wrap">
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={speakDesc} onChange={() => toggleFlag(1)} className="rounded" />
                Speak Product Descriptions
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={buzzerOnError} onChange={() => toggleFlag(2)} className="rounded" />
                Buzzer for Errors
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={speakErrors} onChange={() => toggleFlag(4)} className="rounded" />
                Speak Errors
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={speakQty} onChange={() => toggleFlag(8)} className="rounded" />
                Speak Quantities
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={showImage} onChange={() => toggleFlag(16)} className="rounded" />
                Display Image
              </label>
            </div>
          </div>
 
          <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <label className="block text-sm font-medium text-text mb-1">Reference (shows on overview)</label>
              <input
                value={reference}
                onChange={(e) => setReference(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                placeholder="e.g. Cycle Count Aisle 3"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text mb-1">Store</label>
              <select
                value={storeId}
                onChange={(e) => setStoreId(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              >
                <option value="0">-- Select store --</option>
                {stores.map((s) => (
                  <option key={s.id} value={s.id}>{s.name}</option>
                ))}
              </select>
            </div>
            <div className="flex items-end">
              {linkedStocktakeId ? (
                <div className="text-sm text-text">
                  Linked to stocktake {linkedStocktakeId > 0 ? `#${linkedStocktakeId}` : "(created)"}. 
                  <a href="/pages/products/stocktake" className="text-[#00543b] hover:underline ml-1">Open overview</a>
                </div>
              ) : (
                <button
                  onClick={createOverviewEntry}
                  disabled={linking || !reference.trim() || storeId === "0"}
                  className="px-4 py-2 bg-brand text-white rounded-md text-sm font-semibold hover:bg-brand/90 disabled:bg-surface-2 disabled:cursor-not-allowed"
                >
                  {linking ? "Creating…" : "Create Overview Entry"}
                </button>
              )}
            </div>
          </div>
 
          <div className="mt-6">
            <h3 className="text-base font-semibold text-text mb-2">History</h3>
            {history.length === 0 ? (
              <div className="text-sm text-muted">No scans yet.</div>
            ) : (
              <div className="space-y-2">
                {history.map((h) => (
                  <div key={h.id} className="border rounded p-2 text-sm flex items-start justify-between gap-3">
                    <div>
                      <div className="font-medium text-text">{h.desc || "(no description)"}</div>
                      <div className="text-muted">Barcode: {h.barcode}</div>
                      <div className="text-muted">Qty: {h.qty}</div>
                    </div>
                    <div className="text-right text-muted">
                      <div>{new Date(h.time).toLocaleTimeString()}</div>
                      <div className="mt-1">
                        {h.state === "Recorded" ? (
                          <span className="inline-block px-2 py-0.5 text-xs rounded bg-green-100 text-green-800">Recorded</span>
                        ) : h.state === "Saving" ? (
                          <span className="inline-block px-2 py-0.5 text-xs rounded bg-info/10 text-info">Saving…</span>
                        ) : h.state === "Error" ? (
                          <span className="inline-block px-2 py-0.5 text-xs rounded bg-red-100 text-red-800">Error</span>
                        ) : (
                          <span className="inline-block px-2 py-0.5 text-xs rounded bg-surface-2 text-text">Pending</span>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4">
          <div className="text-sm text-text">
            <h3 className="text-base font-semibold text-text">Product</h3>
            <div className="mt-2">
              <div className="text-sm text-text min-h-[1.5rem]" id="proddetail">{currentDesc}</div>
              {showImage && imageUrl ? (
                <img src={imageUrl} alt="Product" className="mt-3 max-h-48 object-contain" />
              ) : null}
            </div>
          </div>
        </div>
      </div>
 
      <audio ref={audioRef} />
    </div>
  );
}