page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useEffect, useMemo, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from '@/contexts/IconContext';
 
interface StocktakeRow {
  id: number;
  name: string;
  created?: string;
  snapshot?: string;
  finalised?: string;
  status: "New" | "Complete" | "Cancelled";
  store?: string;
  counted?: number;
  value?: number;
  rawFlags?: number;
}
 
interface StoreOption {
  id: number;
  name: string;
}
 
export default function StocktakePage() {
  const [rows, setRows] = useState<StocktakeRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>("");
  const [showCurrent, setShowCurrent] = useState(true);
  const [showCompleted, setShowCompleted] = useState(false);
  const [showAll, setShowAll] = useState(false);
  const [stores, setStores] = useState<StoreOption[]>([]);
  const [newStock, setNewStock] = useState({ description: "", storeId: "0", comments: "" });
  const [saving, setSaving] = useState(false);
  const [actionMsg, setActionMsg] = useState<string>("");
 
  useEffect(() => {
    loadStores();
  }, []);
 
  useEffect(() => {
    loadList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showCurrent, showCompleted, showAll]);
 
  const filterParam = useMemo(() => {
    if (showAll) return "all";
    if (showCurrent && !showCompleted) return "current";
    if (showCompleted && !showCurrent) return "complete";
    return "all";
  }, [showAll, showCurrent, showCompleted]);
 
  const loadStores = async () => {
    try {
      // Use new OpenAPI locations endpoint
      const result = await apiClient.getLocations({ source: 'openapi' });
      if (result.success) {
        const apiData = result.data as any;
        const locationData = apiData?.data?.Location;
        if (Array.isArray(locationData)) {
          setStores(
            locationData.map((loc: any) => ({ 
              id: Number(loc.Locid) || 0, 
              name: loc.Name || "" 
            }))
          );
        }
      }
    } catch (err) {
      console.error("Failed to load stores", err);
    }
  };
 
  const loadList = async () => {
    try {
      setLoading(true);
      setError("");
      
      // Use BUCK eLink API for stocktake list
      const filter = showAll ? 'all' : showCurrent ? 'current' : showCompleted ? 'complete' : 'all';
      const result = await apiClient.getBuckStocktakes({ filter });
      
      if (!result.success) {
        setRows([]);
        setLoading(false);
        return;
      }
      
      const appData = result.data?.APPD;
      if (!Array.isArray(appData)) {
        setRows([]);
        setLoading(false);
        return;
      }
      
      const mapped: StocktakeRow[] = appData.map((item: any) => {
        const flags = Number(item.f116) || 0;
        let status: StocktakeRow["status"] = "New";
        if (flags & 4) status = "Cancelled";
        else if (flags & 2) status = "Complete";
        return {
          id: Number(item.f110) || 0,
          name: item.f114 || "",
          created: item.f113 || "",
          snapshot: item.f112 || "",
          finalised: item.f111 || "",
          store: item.f1115 || "",
          counted: Number(item.f200) || 0,
          value: Number(item.f201) || 0,
          status,
          rawFlags: flags,
        };
      });
      setRows(mapped);
      setLoading(false);
    } catch (err) {
      console.error("Failed to load stocktake list", err);
      setError("Failed to load stocktakes. Check API connection.");
      setRows([]);
      setLoading(false);
    }
  };
 
  const formatDate = (value?: string) => {
    if (!value) return "";
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return value;
    return d.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };
 
  const formatMoney = (value?: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value || 0);
  };
 
  const runControlAction = async (id: number, action: "cancel" | "snapshot" | "finalise") => {
    const confirmText: Record<typeof action, string> = {
      cancel: `Cancel stocktake #${id}? All counts will be discarded.`,
      snapshot: `Snapshot stocktake #${id}? This records current levels for finalising later.`,
      finalise: `Finalise stocktake #${id}? Counts will become current stock on hand.`,
    };
    if (!window.confirm(confirmText[action])) return;
 
    const actionCode: Record<typeof action, number> = { cancel: 8, snapshot: 2, finalise: 4 };
    try {
      setActionMsg("");
      const xml = [
        "<DATI>",
        "<f8_s>retailmax.elink.stocktake.control</f8_s>",
        "<f11_B>E</f11_B>",
        `<f180_E>${actionCode[action]}</f180_E>`,
        `<f100_E>${id}</f100_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}`);
      setActionMsg(`${action.charAt(0).toUpperCase() + action.slice(1)} request sent.`);
      loadList();
    } catch (err) {
      console.error(`Failed to ${action} stocktake`, err);
      setActionMsg(`Failed to ${action} stocktake.`);
    }
  };
 
  const createStocktake = async () => {
    if (!newStock.description.trim()) {
      setActionMsg("Description is required.");
      return;
    }
    if (!newStock.storeId || newStock.storeId === "0") {
      setActionMsg("Please select a store.");
      return;
    }
    try {
      setSaving(true);
      setActionMsg("");
      const xml = [
        "<DATI>",
        "<f8_s>retailmax.elink.stocktake.control</f8_s>",
        "<f11_B>I</f11_B>",
        "<f180_E>1</f180_E>",
        `<f202_s>${escapeXml(newStock.description)}</f202_s>`,
        `<f207_E>${newStock.storeId}</f207_E>`,
        newStock.comments ? `<f209_s>${escapeXml(newStock.comments)}</f209_s>` : "",
        "</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}`);
      setActionMsg("Stocktake created.");
      setNewStock({ description: "", storeId: "0", comments: "" });
      loadList();
    } catch (err) {
      console.error("Failed to create stocktake", err);
      setActionMsg("Failed to create stocktake.");
    } finally {
      setSaving(false);
    }
  };
 
  const escapeXml = (v: string) =>
    v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 
  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-3xl font-bold text-text">Stocktake</h1>
          <p className="text-sm text-muted">Manage stock counts and formal stocktakes.</p>
        </div>
      </div>
 
      {actionMsg && <div className="text-sm text-text">{actionMsg}</div>}
      {error && <div className="text-sm text-red-700">{error}</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-center justify-between mb-4 gap-3">
            <h2 className="text-lg font-semibold text-text">Current Stocktakes</h2>
            <div className="flex items-center gap-4 text-sm text-text">
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={showCurrent} onChange={(e) => setShowCurrent(e.target.checked)} className="rounded" />
                Show Current
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={showCompleted} onChange={(e) => setShowCompleted(e.target.checked)} className="rounded" />
                Show Completed
              </label>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={showAll} onChange={(e) => setShowAll(e.target.checked)} className="rounded" />
                Show All
              </label>
              {loading && <span className="text-xs text-muted">Loading…</span>}
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm border border-border">
              <thead className="bg-surface-2 text-text">
                <tr>
                  <th className="px-3 py-2 border-b">Id</th>
                  <th className="px-3 py-2 border-b">Name</th>
                  <th className="px-3 py-2 border-b">Created</th>
                  <th className="px-3 py-2 border-b">Snapshot</th>
                  <th className="px-3 py-2 border-b">Finalised</th>
                  <th className="px-3 py-2 border-b">Store</th>
                  <th className="px-3 py-2 border-b text-right">Counted</th>
                  <th className="px-3 py-2 border-b text-right">Value</th>
                  <th className="px-3 py-2 border-b">Status</th>
                  <th className="px-3 py-2 border-b">Actions</th>
                </tr>
              </thead>
              <tbody>
                {rows.length === 0 ? (
                  <tr>
                    <td colSpan={10} className="text-center py-6 text-muted">
                      {loading ? "Loading stocktakes..." : "No stocktakes to show."}
                    </td>
                  </tr>
                ) : (
                  rows.map((row, idx) => (
                    <tr key={row.id} className={idx % 2 === 0 ? "bg-surface" : "bg-surface-2"}>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{row.id}</td>
                      <td className="px-3 py-2 border-b">{row.name}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{formatDate(row.created)}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{formatDate(row.snapshot)}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{formatDate(row.finalised)}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{row.store}</td>
                      <td className="px-3 py-2 border-b text-right">{row.counted ?? ""}</td>
                      <td className="px-3 py-2 border-b text-right">{formatMoney(row.value)}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">{row.status}</td>
                      <td className="px-3 py-2 border-b whitespace-nowrap">
                        <div className="flex gap-2">
                          <button
                            onClick={() => runControlAction(row.id, "snapshot")}
                            disabled={row.status !== "New"}
                            className="px-3 py-1 bg-info/10 text-info rounded text-xs disabled:bg-surface-2 disabled:text-muted"
                          >
                            Snapshot
                          </button>
                          <button
                            onClick={() => runControlAction(row.id, "finalise")}
                            disabled={row.status !== "New"}
                            className="px-3 py-1 bg-green-100 text-green-800 rounded text-xs disabled:bg-surface-2 disabled:text-muted"
                          >
                            Finalise
                          </button>
                          <button
                            onClick={() => runControlAction(row.id, "cancel")}
                            disabled={row.status !== "New"}
                            className="px-3 py-1 bg-red-100 text-red-800 rounded text-xs disabled:bg-surface-2 disabled:text-muted"
                          >
                            Cancel
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4 space-y-4">
          <div>
            <h2 className="text-lg font-semibold text-text">Create New Stocktake</h2>
            <p className="text-sm text-muted mb-3">Create a formal stocktake for a store.</p>
            <label className="block text-sm font-medium text-text mb-1">Description</label>
            <input
              type="text"
              value={newStock.description}
              onChange={(e) => setNewStock({ ...newStock, description: 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-brand/50"
              placeholder="EOY 2025 Stocktake"
            />
 
            <label className="block text-sm font-medium text-text mb-1 mt-3">Store</label>
            <select
              value={newStock.storeId}
              onChange={(e) => setNewStock({ ...newStock, storeId: 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-brand/50"
            >
              <option value="0">-- Select store --</option>
              {stores.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name}
                </option>
              ))}
            </select>
 
            <label className="block text-sm font-medium text-text mb-1 mt-3">Comments (optional)</label>
            <textarea
              value={newStock.comments}
              onChange={(e) => setNewStock({ ...newStock, comments: 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-brand/50"
              rows={3}
            />
 
            <div className="flex gap-3 mt-4">
              <button
                onClick={createStocktake}
                disabled={saving}
                className="px-4 py-2 bg-brand text-white rounded-md text-sm font-semibold hover:bg-brand/90 disabled:bg-muted disabled:cursor-not-allowed"
              >
                {saving ? "Saving..." : "Create Stocktake"}
              </button>
              <button
                onClick={() => setNewStock({ description: "", storeId: "0", comments: "" })}
                className="px-4 py-2 border border-border rounded-md text-sm text-text hover:bg-surface-2"
              >
                Clear
              </button>
            </div>
          </div>
 
          <div className="border-t pt-4 space-y-3 text-sm text-text">
            <h3 className="text-base font-semibold text-text">Stock Counting Tools</h3>
            <p className="text-xs text-muted">Choose the right tool for how you want to count.</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div className="border rounded-lg p-3 bg-surface shadow-sm">
                <h4 className="font-semibold text-text">Enter Counts</h4>
                <p className="text-xs text-muted mt-1">Quick, ad‑hoc counting of items on hand. Not tied to a formal stocktake.</p>
                <a
                  href="/pages/products/stocktake/simple-count"
                  className="inline-block mt-3 px-3 py-1.5 rounded-md text-xs font-semibold text-white bg-brand hover:bg-brand/90"
                >
                  Open Simple Counting
                </a>
              </div>
 
              <div className="border rounded-lg p-3 bg-surface shadow-sm">
                <h4 className="font-semibold text-text">Counting Review</h4>
                <p className="text-xs text-muted mt-1">Review and reconcile counts entered via simple counting. Fix mistakes before posting.</p>
                <a
                  href="/report/pos/stock/fieldpine/stock2countreview.htm"
                  className="inline-block mt-3 px-3 py-1.5 rounded-md text-xs font-semibold text-white bg-brand hover:bg-brand/90"
                >
                  Open Review
                </a>
              </div>
 
              <div className="border rounded-lg p-3 bg-surface shadow-sm">
                <h4 className="font-semibold text-text">Formal Stocktake Counts</h4>
                <p className="text-xs text-muted mt-1">Enter counts against a specific stocktake event. Supports sections and variance handling.</p>
                <a
                  href="/report/pos/stock/fieldpine/stocktakecount.htm"
                  className="inline-block mt-3 px-3 py-1.5 rounded-md text-xs font-semibold text-white bg-brand hover:bg-brand/90"
                >
                  Open Formal Counting
                </a>
              </div>
 
              <div className="border rounded-lg p-3 bg-surface shadow-sm">
                <h4 className="font-semibold text-text">Bulk Load Counts</h4>
                <p className="text-xs text-muted mt-1">Upload CSV or scanner files to import large counts in one go.</p>
                <a
                  href="/report/pos/stock/fieldpine/stocktakecountupload.htm"
                  className="inline-block mt-3 px-3 py-1.5 rounded-md text-xs font-semibold text-white bg-brand hover:bg-brand/90"
                >
                  Open Bulk Upload
                </a>
              </div>
 
              <div className="border rounded-lg p-3 bg-surface shadow-sm sm:col-span-2">
                <h4 className="font-semibold text-text">Spot Check (Tracked Items)</h4>
                <p className="text-xs text-muted mt-1">Quick verification for serial/batch tracked items and high‑value products.</p>
                <a
                  href="/report/pos/stock/fieldpine/spotcheck.htm"
                  className="inline-block mt-3 px-3 py-1.5 rounded-md text-xs font-semibold text-white bg-brand hover:bg-brand/90"
                >
                  Open Spot Check
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}