page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface SaleRow {
  f101: number; // Sale ID
  f102: string; // Date
  f106: string; // Store name
  f107: number; // Total sale
  f104: string; // Teller name
  f200: number; // Product ID
  f201: string; // Product name
  f202: number; // Qty
  f203: number; // Line price
  f206?: number; // Price cause code
  f301?: string; // Paid by
  f208?: number; // Line cost
  f209?: number; // Gross profit
  f219?: number; // GP%
  f121?: number; // Original sale ID
  f190?: string; // Cash item name
  PROD?: any[]; // Product packet
  CUST?: any[]; // Customer packet
}
 
interface Location {
  Locid: string;
  Name: string;
}
 
interface Department {
  Depid: string;
  Description: string;
}
 
interface PaymentType {
  Code: number;
  CustSpell: string;
}
 
export default function SaleItemsReviewPage() {
  const [data, setData] = useState<SaleRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof SaleRow>("f102");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
 
  // Filter states
  const [fromDate, setFromDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() - 1);
    return d.toISOString().split("T")[0];
  });
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().split("T")[0];
  });
  const [selectedStore, setSelectedStore] = useState("0");
  const [selectedTax, setSelectedTax] = useState("-1");
  const [selectedSupplier, setSelectedSupplier] = useState("");
  const [selectedPaymentType, setSelectedPaymentType] = useState("0");
  const [selectedDepartment, setSelectedDepartment] = useState("0");
  const [selectedPhase, setSelectedPhase] = useState("1");
  const [lineQtyOp, setLineQtyOp] = useState("0");
  const [lineQty, setLineQty] = useState("");
  const [basketQtyOp, setBasketQtyOp] = useState("0");
  const [basketQty, setBasketQty] = useState("");
  const [saleLinesOp, setSaleLinesOp] = useState("0");
  const [saleLines, setSaleLines] = useState("");
  const [totalPrice, setTotalPrice] = useState("0");
  const [tellerFilter, setTellerFilter] = useState("");
  const [customerFilter, setCustomerFilter] = useState("");
  const [productFilter, setProductFilter] = useState("");
  const [maxRows, setMaxRows] = useState("200");
 
  // Dropdown data
  const [locations, setLocations] = useState<Location[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [paymentTypes, setPaymentTypes] = useState<PaymentType[]>([]);
 
  // Load dropdowns on mount
  useEffect(() => {
    Promise.all([
      apiClient.getLocations({ want: 'name,id' }),
      apiClient.getDepartments(),
      apiClient.getPaymentTypes(),
    ])
      .then(([locData, deptData, pmtData]) => {
        if (locData.success && (locData.data as any)?.data?.Location) {
          setLocations((locData.data as any).data.Location);
        }
        if (deptData.success && (deptData.data as any)?.data?.Department) {
          setDepartments((deptData.data as any).data.Department);
        }
        if (pmtData.success && (pmtData.data as any)?.data?.PaymentType) {
          setPaymentTypes((pmtData.data as any).data.PaymentType);
        }
      })
      .catch((err) => console.error("Error loading dropdowns:", err));
  }, []);
 
  const formatDateForAPI = (dateStr: string) => {
    const [year, month, day] = dateStr.split("-");
    return `${day}-${month}-${year}`;
  };
 
  const getPriceCause = (code: number | undefined): string => {
    if (!code || code === 0) return "";
    const causes: Record<number, string> = {
      1: "SpecOffer",
      2: "Reward",
      3: "Combo",
      4: "QtyDisc",
      5: "StoreDisc",
      6: "DiscManual",
      7: "PriceMap",
      8: "CustDisc",
      9: "TellerAction",
      10: "Discount",
      11: "DiscountVoucher",
      12: "ManuallySet",
      13: "TicketPrice",
      14: "PriceMap",
      15: "PriceOptions",
      16: "Markdown",
      17: "VariantPrice",
      18: "ModifierPriced",
      19: "ProgramSet",
      20: "Scales",
      256: "02Barcode",
      257: "ModifierItem",
      267: "PriceBand",
      268: "PriceBand",
      269: "PriceBand",
      270: "PriceBand",
    };
    if (code >= 257 && code <= 511) return "";
    return causes[code] || String(code);
  };
 
  const handleSort = (column: keyof SaleRow) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortColumn(column);
      setSortDirection("asc");
    }
  };
 
  const sortedData = [...data].sort((a, b) => {
    const aVal = a[sortColumn];
    const bVal = b[sortColumn];
 
    if (aVal === undefined || bVal === undefined) return 0;
 
    if (typeof aVal === "number" && typeof bVal === "number") {
      return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
    }
 
    const aStr = String(aVal);
    const bStr = String(bVal);
    return sortDirection === "asc"
      ? aStr.localeCompare(bStr)
      : bStr.localeCompare(aStr);
  });
 
  const SortIndicator = ({ column }: { column: keyof SaleRow }) => {
    if (sortColumn !== column) return null;
    return <span className="ml-1">{sortDirection === "asc" ? "▲" : "▼"}</span>;
  };
 
  const loadReport = async () => {
    setLoading(true);
    setData([]);
 
    const apiKey = sessionStorage.getItem("fieldpine_apikey") || "";
    const fromDateAPI = formatDateForAPI(fromDate);
    const toDateAPI = formatDateForAPI(toDate);
 
    let exPreds = "";
 
    // Store filter
    if (selectedStore !== "0" && selectedStore) {
      exPreds += `&9=f105,0,${selectedStore}`;
    }
 
    // Payment type filter
    if (selectedPaymentType !== "0" && selectedPaymentType) {
      exPreds += `&9=f300,0,${selectedPaymentType}`;
    }
 
    // Department filter
    if (selectedDepartment !== "0" && selectedDepartment) {
      if (selectedDepartment === "without") {
        // Without department - need special handling
        exPreds += "&9=f801,0,0";
      } else {
        exPreds += `&9=f801,0,${selectedDepartment}`;
      }
    }
 
    // Sale phase filter
    if (Number(selectedPhase) > 1) {
      exPreds += `&9=f109,0,${selectedPhase}`;
    }
 
    // Tax filter
    const taxVal = Number(selectedTax);
    if (taxVal === 1) {
      exPreds += "&9=f204,0,z";
    } else if (taxVal === 2) {
      exPreds += "&9=f204,0,0";
    }
 
    // Date filters
    exPreds += `&9=f102,4,${fromDateAPI}`;
    exPreds += `&9=f102,1,${toDateAPI}`;
 
    // Line quantity filter
    const lqty = Number(lineQty);
    const lqtyOp = Number(lineQtyOp);
    if (lqty !== 0 || lqtyOp !== 0) {
      exPreds += `&9=f202,${lqtyOp},${lqty}`;
    }
 
    // Basket quantity filter
    const bqty = Number(basketQty);
    const bqtyOp = Number(basketQtyOp);
    if (bqty !== 0 || bqtyOp !== 0) {
      exPreds += `&9=f111,${bqtyOp},${bqty}`;
    }
 
    // Sale lines count filter
    const slc = Number(saleLines);
    const slcOp = Number(saleLinesOp);
    if (slc !== 0 || slcOp !== 0) {
      exPreds += `&9=f113,${slcOp},${slc}`;
    }
 
    // Total price filter
    const tpOp = Number(totalPrice);
    if (tpOp === 1) {
      exPreds += "&9=f210,1,0";
    } else if (tpOp === 2) {
      exPreds += "&9=f210,3,0";
    }
 
    const filters = exPreds.split('&9=').filter(f => f).map(f => f.replace(/^9=/, ''));
    filters.push("103=1"); // Full product packet
    filters.push("104=1"); // Customer packet
 
    try {
      const response = await apiClient.getSalesList({
        limit: Number(maxRows),
        filters
      });
 
      if (response.success && response.data?.APPT && Array.isArray(response.data.APPT)) {
        setData(response.data.APPT);
      } else {
        setData([]);
      }
    } catch (error) {
      console.error("Error loading report:", error);
      setData([]);
    } finally {
      setLoading(false);
    }
  };
 
  const formatCurrency = (value: number | undefined) => {
    if (value === undefined || value === null) return "";
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const formatDate = (dateStr: string | undefined) => {
    if (!dateStr) return "";
    try {
      const date = new Date(dateStr);
      return date.toLocaleDateString();
    } catch {
      return dateStr;
    }
  };
 
  // Calculate totals
  const totalQty = data.reduce((sum, row) => sum + (row.f202 || 0), 0);
  const totalLinePrice = data.reduce((sum, row) => sum + (row.f203 || 0), 0);
 
  return (
    <div className="min-h-screen bg-surface-2 p-6">
      <div className="max-w-[1800px] mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2">Sale Items Review</h1>
          <p className="text-muted">
            Shows details of individual sale items sold. Filter by date, store, department,
            payment type, and more.
          </p>
        </div>
 
        {/* Filters */}
        <div className="bg-surface rounded-lg shadow p-6 mb-6">
          {/* Row 1 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                From (including)
              </label>
              <input
                type="date"
                value={fromDate}
                onChange={(e) => setFromDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                To (excluding)
              </label>
              <input
                type="date"
                value={toDate}
                onChange={(e) => setToDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">Store</label>
              <select
                value={selectedStore}
                onChange={(e) => setSelectedStore(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="0">All Stores</option>
                {locations.map((loc) => (
                  <option key={loc.Locid} value={loc.Locid}>
                    {loc.Name}
                  </option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">Tax</label>
              <select
                value={selectedTax}
                onChange={(e) => setSelectedTax(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="-1">Any/All</option>
                <option value="1">TaxFree Products</option>
                <option value="2">TaxFree Sales</option>
              </select>
            </div>
          </div>
 
          {/* Row 2 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Supplier (optional)
              </label>
              <input
                type="text"
                value={selectedSupplier}
                onChange={(e) => setSelectedSupplier(e.target.value)}
                placeholder="Autocomplete disabled"
                className="w-full px-3 py-2 border border-border rounded-md"
                disabled
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Payment Type
              </label>
              <select
                value={selectedPaymentType}
                onChange={(e) => setSelectedPaymentType(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="0">--Select--</option>
                {paymentTypes.map((pmt) => (
                  <option key={pmt.Code} value={pmt.Code}>
                    {pmt.CustSpell}
                  </option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Department
              </label>
              <select
                value={selectedDepartment}
                onChange={(e) => setSelectedDepartment(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="0" className="bg-surface-2">
                  Any/All
                </option>
                <option value="without" className="bg-surface-2">
                  Without Department
                </option>
                {departments.map((dept) => (
                  <option key={dept.Depid} value={dept.Depid}>
                    {dept.Description}
                  </option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">State</label>
              <select
                value={selectedPhase}
                onChange={(e) => setSelectedPhase(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="1">Normal</option>
                <option value="3">Current Layby</option>
                <option value="10000">Void (a)</option>
                <option value="10002">Void (b)</option>
              </select>
            </div>
          </div>
 
          {/* Row 3 - Quantity filters */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Line Quantity
              </label>
              <div className="flex gap-2">
                <select
                  value={lineQtyOp}
                  onChange={(e) => setLineQtyOp(e.target.value)}
                  className="w-24 px-2 py-2 border border-border rounded-md"
                >
                  <option value="0">=</option>
                  <option value="3">&gt;</option>
                  <option value="1">&lt;</option>
                  <option value="4">&gt;=</option>
                  <option value="2">&lt;=</option>
                  <option value="5">&lt;&gt;</option>
                </select>
                <input
                  type="number"
                  value={lineQty}
                  onChange={(e) => setLineQty(e.target.value)}
                  className="flex-1 px-3 py-2 border border-border rounded-md"
                />
              </div>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Total Basket Qty
              </label>
              <div className="flex gap-2">
                <select
                  value={basketQtyOp}
                  onChange={(e) => setBasketQtyOp(e.target.value)}
                  className="w-24 px-2 py-2 border border-border rounded-md"
                >
                  <option value="0">=</option>
                  <option value="3">&gt;</option>
                  <option value="1">&lt;</option>
                  <option value="4">&gt;=</option>
                  <option value="2">&lt;=</option>
                  <option value="5">&lt;&gt;</option>
                </select>
                <input
                  type="number"
                  value={basketQty}
                  onChange={(e) => setBasketQty(e.target.value)}
                  className="flex-1 px-3 py-2 border border-border rounded-md"
                />
              </div>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Number of Salelines
              </label>
              <div className="flex gap-2">
                <select
                  value={saleLinesOp}
                  onChange={(e) => setSaleLinesOp(e.target.value)}
                  className="w-24 px-2 py-2 border border-border rounded-md"
                >
                  <option value="0">=</option>
                  <option value="3">&gt;</option>
                  <option value="1">&lt;</option>
                  <option value="4">&gt;=</option>
                  <option value="2">&lt;=</option>
                  <option value="5">&lt;&gt;</option>
                </select>
                <input
                  type="number"
                  value={saleLines}
                  onChange={(e) => setSaleLines(e.target.value)}
                  className="flex-1 px-3 py-2 border border-border rounded-md"
                />
              </div>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Total Price
              </label>
              <select
                value={totalPrice}
                onChange={(e) => setTotalPrice(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="0">Any</option>
                <option value="1">Below expected</option>
                <option value="2">Above expected</option>
              </select>
            </div>
          </div>
 
          {/* Row 4 - Search fields */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Teller (optional)
              </label>
              <input
                type="text"
                value={tellerFilter}
                onChange={(e) => setTellerFilter(e.target.value)}
                placeholder="Autocomplete disabled"
                className="w-full px-3 py-2 border border-border rounded-md"
                disabled
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Customer (optional)
              </label>
              <input
                type="text"
                value={customerFilter}
                onChange={(e) => setCustomerFilter(e.target.value)}
                placeholder="Autocomplete disabled"
                className="w-full px-3 py-2 border border-border rounded-md"
                disabled
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Product (optional)
              </label>
              <input
                type="text"
                value={productFilter}
                onChange={(e) => setProductFilter(e.target.value)}
                placeholder="Autocomplete disabled"
                className="w-full px-3 py-2 border border-border rounded-md"
                disabled
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                Max Rows
              </label>
              <div className="flex gap-2">
                <input
                  type="number"
                  value={maxRows}
                  onChange={(e) => setMaxRows(e.target.value)}
                  className="flex-1 px-3 py-2 border border-border rounded-md"
                />
                <button
                  onClick={loadReport}
                  disabled={loading}
                  className="px-6 py-2 bg-brand text-white rounded-md hover:bg-brand/90 disabled:bg-muted/50 whitespace-nowrap"
                >
                  {loading ? "Loading..." : "Display"}
                </button>
              </div>
            </div>
          </div>
        </div>
 
        {/* Loading State */}
        {loading && (
          <div className="bg-surface rounded-lg shadow p-8 text-center">
            <div className="inline-flex items-center gap-2">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-info"></div>
              <span className="text-text">Loading...</span>
            </div>
          </div>
        )}
 
        {/* Results Table */}
        {!loading && data.length > 0 && (
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-surface-2">
                  <tr>
                    <th
                      onClick={() => handleSort("f102")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Date
                      <SortIndicator column="f102" />
                    </th>
                    <th
                      onClick={() => handleSort("f106")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Store
                      <SortIndicator column="f106" />
                    </th>
                    <th
                      onClick={() => handleSort("f101")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Sale#
                      <SortIndicator column="f101" />
                    </th>
                    <th
                      onClick={() => handleSort("f107")}
                      className="px-4 py-3 text-right text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Total Sale
                      <SortIndicator column="f107" />
                    </th>
                    <th
                      onClick={() => handleSort("f104")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Teller
                      <SortIndicator column="f104" />
                    </th>
                    <th
                      onClick={() => handleSort("f201")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Product
                      <SortIndicator column="f201" />
                    </th>
                    <th
                      onClick={() => handleSort("f202")}
                      className="px-4 py-3 text-right text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Qty
                      <SortIndicator column="f202" />
                    </th>
                    <th
                      onClick={() => handleSort("f203")}
                      className="px-4 py-3 text-right text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Line Price
                      <SortIndicator column="f203" />
                    </th>
                    <th
                      onClick={() => handleSort("f206")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      C
                      <SortIndicator column="f206" />
                    </th>
                    <th
                      onClick={() => handleSort("f301")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Paid By
                      <SortIndicator column="f301" />
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {sortedData.map((row, idx) => (
                    <tr
                      key={`${row.f101}-${row.f200}-${idx}`}
                      className={idx % 2 === 0 ? "bg-surface" : "bg-surface-2"}
                    >
                      <td className="px-4 py-3 text-sm text-text whitespace-nowrap">
                        {formatDate(row.f102)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.f106}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        <a
                          href={`/report/pos/sales/fieldpine/SingleSale.htm?sid=${row.f101}`}
                          className="hover:underline"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {row.f101}
                        </a>
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {formatCurrency(row.f107)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.f104}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        <a
                          href={`/report/pos/stock/fieldpine/singlepid.htm?pid=${row.f200}`}
                          className="hover:underline"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {row.f201}
                        </a>
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {row.f202}
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {formatCurrency(row.f203)}
                      </td>
                      <td className="px-4 py-3 text-sm text-muted">
                        {getPriceCause(row.f206)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.f301 || ""}</td>
                    </tr>
                  ))}
                </tbody>
                {/* Totals Footer */}
                <tfoot className="bg-text text-white">
                  <tr>
                    <td className="px-4 py-3 text-sm font-bold">Totals</td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3 text-sm font-bold text-right">{totalQty}</td>
                    <td className="px-4 py-3 text-sm font-bold text-right">
                      {formatCurrency(totalLinePrice)}
                    </td>
                    <td className="px-4 py-3"></td>
                    <td className="px-4 py-3"></td>
                  </tr>
                </tfoot>
              </table>
            </div>
 
            {/* Footer */}
            <div className="px-6 py-4 bg-surface-2 border-t border-border">
              <p className="text-sm text-muted">
                Showing {data.length} sale line{data.length !== 1 ? "s" : ""}
              </p>
            </div>
          </div>
        )}
 
        {/* No Results */}
        {!loading && data.length === 0 && (
          <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
            No sale items found for the selected criteria. Click Display to load results.
          </div>
        )}
      </div>
    </div>
  );
}