page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface SaleHeader {
  f100: number; // Sale ID
  f101: string; // Date
  f102: number; // Total sale
  f2115?: string; // Teller name
  f2117?: string; // Customer name
  f2125?: string; // Store name
  f117?: number; // Customer ID
  f900?: string; // Email
  f130?: string; // External ID
  f301?: string; // Internal comments
  f133?: string; // Comments
  f148?: string; // Delivery country
  f185?: string; // Order no
  f139?: string; // Internal physkey
  f121?: number; // Original sale ID
  f7102?: number; // Picking assigned store
  f7120?: string; // Picking quick comments
  f7123?: string; // Picking customer comments
  f7140?: string; // Picking error reason
  f7141?: string; // Picking error detail
  f7142?: string; // Picking error message
  CUST?: any[]; // Customer packet
}
 
interface Location {
  Locid: string;
  Name: string;
}
 
export default function SaleHeaderReviewPage() {
  const [data, setData] = useState<SaleHeader[]>([]);
  const [loading, setLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof SaleHeader>("f101");
  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 [tellerFilter, setTellerFilter] = useState("");
  const [customerFilter, setCustomerFilter] = useState("");
  const [customerFilterType, setCustomerFilterType] = useState("0"); // 0=Show Only, 5=Exclude
  const [excludeUnknown, setExcludeUnknown] = useState(false);
  const [onlyLayby, setOnlyLayby] = useState(false);
  const [advancedSearch, setAdvancedSearch] = useState("");
  const [maxRows, setMaxRows] = useState("2000");
  const [advancedSearchInfo, setAdvancedSearchInfo] = useState<string[]>([]);
 
  // Dropdown data
  const [locations, setLocations] = useState<Location[]>([]);
 
  // Load locations on mount
  useEffect(() => {
    apiClient.getLocations({ want: 'name,id' })
      .then((locData) => {
        if (locData.success && (locData.data as any)?.data?.Location) {
          setLocations((locData.data as any).data.Location);
        }
      })
      .catch((err) => console.error("Error loading locations:", err));
  }, []);
 
  const formatDateForAPI = (dateStr: string) => {
    const [year, month, day] = dateStr.split("-");
    return `${day}-${month}-${year}`;
  };
 
  const handleSort = (column: keyof SaleHeader) => {
    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 SaleHeader }) => {
    if (sortColumn !== column) return null;
    return <span className="ml-1">{sortDirection === "asc" ? "▲" : "▼"}</span>;
  };
 
  const loadReport = async () => {
    setLoading(true);
    setData([]);
    setAdvancedSearchInfo([]);
 
    const apiKey = sessionStorage.getItem("fieldpine_apikey") || "";
    const fromDateAPI = formatDateForAPI(fromDate);
    const toDateAPI = formatDateForAPI(toDate);
 
    const filters: string[] = [
      "f108,0,1" // Some base filter
    ];
 
    // Store filter
    if (selectedStore !== "0" && selectedStore) {
      filters.push(`f125,0,${selectedStore}`);
    }
 
    // Layby filter
    if (onlyLayby) {
      filters.push("f110,0,layby");
    }
 
    // Exclude unknown customer
    if (excludeUnknown) {
      filters.push("f117,3,0");
    }
 
    // Date filters
    filters.push(`f101,4,${fromDateAPI}`);
    filters.push(`f101,1,${toDateAPI}`);
 
    // Advanced search
    if (advancedSearch.trim()) {
      filters.push(`f504,0,${encodeURIComponent(advancedSearch)}`);
    }
 
    try {
      const response = await apiClient.getSalesList({
        limit: Number(maxRows),
        fields: "2115,2117,2125",
        filters
      });
 
      if (response.success && response.data?.DATS && Array.isArray(response.data.DATS)) {
        setData(response.data.DATS);
      } else {
        setData([]);
      }
 
      // Handle advanced search display info
      if (response.success && response.data?.F504 && Array.isArray(response.data.F504)) {
        const searchInfo = response.data.F504.map((rec: any) => rec.f110 || "").filter(
          (s: string) => s
        );
        setAdvancedSearchInfo(searchInfo);
      }
    } 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 totalSales = data.reduce((sum, row) => sum + (row.f102 || 0), 0);
 
  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">Sale Header Review</h1>
          <p className="text-muted">
            Shows summary of sales transactions - one line per sale. Filter by date, store,
            customer, 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-3 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>
 
          {/* Row 2 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-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>
              <div className="flex gap-2">
                <select
                  value={customerFilterType}
                  onChange={(e) => setCustomerFilterType(e.target.value)}
                  className="w-32 px-2 py-2 border border-border rounded-md"
                >
                  <option value="0">Show Only</option>
                  <option value="5">Exclude</option>
                </select>
                <input
                  type="text"
                  value={customerFilter}
                  onChange={(e) => setCustomerFilter(e.target.value)}
                  placeholder="Autocomplete disabled"
                  className="flex-1 px-3 py-2 border border-border rounded-md"
                  disabled
                />
              </div>
              <div className="mt-2">
                <label className="flex items-center text-sm text-text">
                  <input
                    type="checkbox"
                    checked={excludeUnknown}
                    onChange={(e) => setExcludeUnknown(e.target.checked)}
                    className="mr-2"
                  />
                  Exclude Unknown Customer
                </label>
              </div>
            </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>
 
          {/* Row 3 - Additional options */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="flex items-center text-sm text-text">
                <input
                  type="checkbox"
                  checked={onlyLayby}
                  onChange={(e) => setOnlyLayby(e.target.checked)}
                  className="mr-2"
                />
                Only Layby
              </label>
            </div>
 
            <div className="border border-orange-300 rounded p-3">
              <label className="block text-sm font-medium text-text mb-1">
                Advanced Search
                <span
                  className="ml-2 text-brand cursor-pointer text-xs"
                  title="Advanced search allows natural language queries like 'referred by john', 'rep sue', 'void', 'sold in stratford'"
                >
                  ℹ️ Help
                </span>
              </label>
              <input
                type="text"
                value={advancedSearch}
                onChange={(e) => setAdvancedSearch(e.target.value)}
                placeholder="e.g., 'void', 'referred by john', 'rep sue'"
                className="w-full px-3 py-2 border border-border rounded-md"
              />
            </div>
          </div>
        </div>
 
        {/* Advanced Search Info */}
        {advancedSearchInfo.length > 0 && (
          <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
            <p className="font-semibold text-info mb-2">Showing only:</p>
            {advancedSearchInfo.map((info, idx) => (
              <p key={idx} className="text-info ml-4">
                {idx > 0 && <span className="italic">and </span>}
                {info}
              </p>
            ))}
          </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("f101")}
                      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="f101" />
                    </th>
                    <th
                      onClick={() => handleSort("f2125")}
                      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="f2125" />
                    </th>
                    <th
                      onClick={() => handleSort("f100")}
                      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="f100" />
                    </th>
                    <th
                      onClick={() => handleSort("f102")}
                      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="f102" />
                    </th>
                    <th
                      onClick={() => handleSort("f2115")}
                      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="f2115" />
                    </th>
                    <th
                      onClick={() => handleSort("f2117")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Customer
                      <SortIndicator column="f2117" />
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {sortedData.map((row, idx) => (
                    <tr
                      key={`${row.f100}-${idx}`}
                      className={idx % 2 === 0 ? "bg-surface" : "bg-surface-2"}
                    >
                      <td className="px-4 py-3 text-sm text-text whitespace-nowrap">
                        {formatDate(row.f101)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.f2125}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        <a
                          href={`/report/pos/sales/fieldpine/SingleSale.htm?sid=${row.f100}`}
                          className="hover:underline"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {row.f100}
                        </a>
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {formatCurrency(row.f102)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.f2115}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        {row.f117 ? (
                          <a
                            href={`/report/pos/Customer/Fieldpine/Customer_Single_Overview.htm?cid=${row.f117}`}
                            className="hover:underline"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {row.f2117}
                          </a>
                        ) : (
                          row.f2117
                        )}
                      </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 text-sm font-bold text-right">
                      {formatCurrency(totalSales)}
                    </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{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 sales found for the selected criteria. Click Display to load results.
          </div>
        )}
      </div>
    </div>
  );
}