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
  f208?: number; // Line cost
  f209?: number; // Gross profit
  f30012?: string; // Discount name
  f30006?: number; // Discount amount
  PROD?: any[]; // Product packet
  CUST?: any[]; // Customer packet
}
 
interface Location {
  Locid: string;
  Name: string;
}
 
interface Discount {
  DiscId?: number;
  f100?: number;
  Name?: string;
  f101?: string;
}
 
export default function SalesWithDiscountsPage() {
  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); // Yesterday
    return d.toISOString().split("T")[0];
  });
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1); // Tomorrow
    return d.toISOString().split("T")[0];
  });
  const [selectedStore, setSelectedStore] = useState("0");
  const [selectedDiscount, setSelectedDiscount] = 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 [discounts, setDiscounts] = useState<Discount[]>([]);
 
  // Load locations and discounts on mount
  useEffect(() => {
    Promise.all([
      apiClient.getLocations({ source: 'elink' }),
      apiClient.getDiscounts(),
    ])
      .then(([locData, discData]) => {
        if (locData.success && locData.data) {
          const locs = locData.data.map((d: any) => ({
            Locid: d.Locid || d.f100 || "",
            Name: d.Name || d.f101 || d.Locid || d.f100 || "",
          }));
          setLocations(locs);
        }
 
        if (discData.success && discData.data) {
          const discs = discData.data.map((d: any) => ({
            DiscId: d.DiscId || d.f100,
            f100: d.f100,
            Name: d.Name || d.f101,
            f101: d.f101,
          }));
          setDiscounts(discs);
        }
      })
      .catch((err) => console.error("Error loading dropdowns:", err));
  }, []);
 
  const formatDateForAPI = (dateStr: string) => {
    const [year, month, day] = dateStr.split("-");
    return `${day}-${month}-${year}`;
  };
 
  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 fromDateAPI = formatDateForAPI(fromDate);
    const toDateAPI = formatDateForAPI(toDate);
 
    const filters: string[] = [];
 
    // Store filter
    if (selectedStore !== "0" && selectedStore) {
      filters.push(`f105,0,${selectedStore}`);
    }
 
    // Discount filter
    if (selectedDiscount !== "0" && selectedDiscount) {
      filters.push(`f216,0,${selectedDiscount}`);
    } else {
      filters.push("f216,gt,0"); // Any discount
    }
 
    // Date filters
    filters.push(`f102,4,${fromDateAPI}`);
    filters.push(`f102,1,${toDateAPI}`);
 
    try {
      const response = await apiClient.getSalesList({
        limit: Number(maxRows),
        fields: "206,30005,30006,30012,!300-301",
        filters: [...filters, "103=1", "104=1"] // Include packets
      });
 
      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;
    }
  };
 
  return (
    <div className="min-h-screen bg-bg p-6">
      <div className="max-w-[1800px] mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2">
            Sales With Discounts Review
          </h1>
          <p className="text-muted">
            Review sales transactions that include discounts. Filter by date range, store,
            discount type, or specific products.
          </p>
        </div>
 
        {/* Filters */}
        <div className="bg-surface rounded-lg shadow p-6 mb-6">
          <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">
                Discount
              </label>
              <select
                value={selectedDiscount}
                onChange={(e) => setSelectedDiscount(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="0">Any</option>
                {discounts.map((disc, idx) => (
                  <option
                    key={idx}
                    value={disc.DiscId || disc.f100 || idx}
                  >
                    {disc.Name || disc.f101 || disc.DiscId || disc.f100}
                  </option>
                ))}
              </select>
            </div>
          </div>
 
          <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-brand2 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-blue-600"></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-gray-200">
                <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("f30012")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Disc Name
                      <SortIndicator column="f30012" />
                    </th>
                    <th
                      onClick={() => handleSort("f30006")}
                      className="px-4 py-3 text-right text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Disc$
                      <SortIndicator column="f30006" />
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-gray-200">
                  {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-text">
                        {row.f30012 || ""}
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {formatCurrency(row.f30006)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </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" : ""} with discounts
              </p>
            </div>
          </div>
        )}
 
        {/* No Results */}
        {!loading && data.length === 0 && (
          <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
            No sales with discounts found for the selected criteria. Click Display to load
            results.
          </div>
        )}
      </div>
    </div>
  );
}