page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect, useRef } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface Sale {
  Sid: number;
  CompletedDt: string;
  LocationName: string;
  Total: number;
  TellerName: string;
  f2117?: string; // Customer name
  Cid?: number;
  Physkey?: string;
  _RowKey?: number;
}
 
interface SearchInfo {
  Text: string;
  IsError?: boolean;
}
 
export default function PastSalesFinderPage() {
  const [data, setData] = useState<Sale[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchText, setSearchText] = useState("sold today");
  const [searchInfo, setSearchInfo] = useState<SearchInfo[]>([]);
  const [showHelp, setShowHelp] = useState(false);
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const sequenceRef = useRef(1);
  
  const [sortColumn, setSortColumn] = useState<keyof Sale>("CompletedDt");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
 
  // Trigger initial search
  useEffect(() => {
    handleSearch();
  }, []);
 
  const handleSearchChange = (value: string) => {
    setSearchText(value);
    
    // Debounce search
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }
    
    searchTimeoutRef.current = setTimeout(() => {
      handleSearch(value);
    }, 300);
  };
 
  const handleSearch = async (query?: string) => {
    const searchQuery = query !== undefined ? query : searchText;
    
    if (!searchQuery.trim()) {
      setData([]);
      setSearchInfo([]);
      return;
    }
 
    setLoading(true);
    sequenceRef.current++;
    const currentSequence = sequenceRef.current;
 
    try {
      const response = await apiClient.searchSales({
        query: searchQuery,
        limit: 30,
        ref: currentSequence,
        inputMethod: 'keyboard'
      });
 
      if (!response.success) {
        console.error("Error searching sales:", response.error);
        setData([]);
        setSearchInfo([]);
        setLoading(false);
        return;
      }
 
      // Check if this is still the latest search
      const returnedSequence = response.data?.YourRef || 0;
      if (returnedSequence !== currentSequence) {
        return; // Ignore outdated responses
      }
 
      if (response.data?.Sale_Read && Array.isArray(response.data.Sale_Read)) {
        setData(response.data.Sale_Read);
      } else {
        setData([]);
      }
 
      // Handle search interpretation info
      if (response.data?.ASTX && Array.isArray(response.data.ASTX)) {
        setSearchInfo(response.data.ASTX);
      } else {
        setSearchInfo([]);
      }
    } catch (error) {
      console.error("Error searching sales:", error);
      setData([]);
      setSearchInfo([]);
    } finally {
      setLoading(false);
    }
  };
 
  const handleSort = (column: keyof Sale) => {
    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 Sale }) => {
    if (sortColumn !== column) return null;
    return <span className="ml-1">{sortDirection === "asc" ? "▲" : "▼"}</span>;
  };
 
  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 formatDateTime = (dateStr: string | undefined) => {
    if (!dateStr) return "";
    try {
      const date = new Date(dateStr);
      return date.toLocaleString();
    } catch {
      return dateStr;
    }
  };
 
  return (
    <div className="min-h-screen bg-bg p-6">
      <div className="max-w-[1600px] mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2">Past Sales Finder</h1>
          <p className="text-muted">
            To help you locate individual sales. You should not treat this page as a general
            purpose report, it is focused solely on finding sales.
          </p>
        </div>
 
        {/* Search Box */}
        <div className="bg-surface rounded-lg shadow p-6 mb-6">
          <div className="mb-4">
            <label className="block text-sm font-medium text-text mb-2">
              Search:
            </label>
            <textarea
              rows={3}
              value={searchText}
              onChange={(e) => handleSearchChange(e.target.value)}
              placeholder='Enter product, customer or sale # here. Try "sold today", "plu 1234", "customer bob", "phase void"'
              className="w-full px-4 py-3 border border-border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
 
          {/* Quick Tips */}
          <div className="text-sm text-muted bg-info/10 border border-info/30 rounded p-3">
            <strong>Quick Tips:</strong> Enter what you are searching for in simple english.
            Such as "PLU 1234" or "sold yesterday". You can combine multiple terms: "plu 1234
            sold yesterday".{" "}
            <button
              onClick={() => setShowHelp(true)}
              className="text-brand hover:underline ml-2"
            >
              Quick help
            </button>
          </div>
        </div>
 
        {/* Search Interpretation Info */}
        {searchInfo.length > 0 && (
          <div className="bg-surface rounded-lg shadow p-4 mb-6 border-l-4 border-brand">
            <p className="font-semibold text-text mb-2">Showing only:</p>
            {searchInfo.map((info, idx) => (
              <p
                key={idx}
                className={`ml-4 ${
                  info.IsError ? "text-red-600 font-bold" : "text-text"
                }`}
              >
                {idx > 0 && !info.IsError && <span className="italic">and </span>}
                {info.Text}
              </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-blue-600"></div>
              <span className="text-text">Searching...</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("CompletedDt")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Date
                      <SortIndicator column="CompletedDt" />
                    </th>
                    <th
                      onClick={() => handleSort("LocationName")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Store
                      <SortIndicator column="LocationName" />
                    </th>
                    <th
                      onClick={() => handleSort("Sid")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Sale#
                      <SortIndicator column="Sid" />
                    </th>
                    <th
                      onClick={() => handleSort("Total")}
                      className="px-4 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Total Sale
                      <SortIndicator column="Total" />
                    </th>
                    <th
                      onClick={() => handleSort("TellerName")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Teller
                      <SortIndicator column="TellerName" />
                    </th>
                    <th
                      onClick={() => handleSort("f2117")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                    >
                      Customer
                      <SortIndicator column="f2117" />
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {sortedData.map((row, idx) => (
                    <tr
                      key={`${row.Sid}-${idx}`}
                      className="hover:bg-surface-2"
                    >
                      <td className="px-4 py-3 text-sm text-text whitespace-nowrap">
                        {formatDateTime(row.CompletedDt)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.LocationName}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        <a
                          href={`/report/pos/sales/fieldpine/SingleSale.htm?sid=${row.Sid}`}
                          className="hover:underline"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {row.Sid}
                        </a>
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {formatCurrency(row.Total)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">{row.TellerName}</td>
                      <td className="px-4 py-3 text-sm text-brand">
                        {row.Cid ? (
                          <a
                            href={`/report/pos/Customer/Fieldpine/Customer_Single_Overview.htm?cid=${row.Cid}`}
                            className="hover:underline"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {row.f2117}
                          </a>
                        ) : (
                          row.f2117
                        )}
                      </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{data.length !== 1 ? "s" : ""}
              </p>
            </div>
          </div>
        )}
 
        {/* No Results */}
        {!loading && data.length === 0 && searchText.trim() && (
          <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
            No sales found matching "{searchText}". Try a different search term.
          </div>
        )}
 
        {/* Help Modal */}
        {showHelp && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-surface rounded-lg shadow-xl max-w-3xl max-h-[80vh] overflow-y-auto">
              <div className="p-6">
                <div className="flex justify-between items-start mb-4">
                  <h2 className="text-2xl font-bold text-text">Advanced Search Help</h2>
                  <button
                    onClick={() => setShowHelp(false)}
                    className="text-muted hover:text-text text-2xl"
                  >
                    ×
                  </button>
                </div>
 
                <div className="prose max-w-none">
                  <p className="text-text mb-4">
                    The search option on this screen works somewhat like a search engine and
                    attempts to understand what you are searching for. Rather than selecting
                    various selection controls you can simply type what you want.
                  </p>
 
                  <h3 className="text-lg font-semibold text-text mt-6 mb-3">Examples</h3>
                  <dl className="space-y-3">
                    <div>
                      <dt className="font-semibold text-text">sale 12345</dt>
                      <dd className="text-muted ml-4">
                        Only sales with the sale# 12345. Multiple sales can have the same
                        number.
                      </dd>
                    </div>
                    <div>
                      <dt className="font-semibold text-text">phase void</dt>
                      <dd className="text-muted ml-4">
                        Only show sales that were cancelled or voided
                      </dd>
                    </div>
                    <div>
                      <dt className="font-semibold text-text">voucher 104531</dt>
                      <dd className="text-muted ml-4">
                        Only show sales that referenced voucher# 104531
                      </dd>
                    </div>
                    <div>
                      <dt className="font-semibold text-text">plu 1234</dt>
                      <dd className="text-muted ml-4">
                        Only show sales that have the product(s) with PLU 1234
                      </dd>
                    </div>
                    <div>
                      <dt className="font-semibold text-text">price about 34.50</dt>
                      <dd className="text-muted ml-4">
                        Search for sales that are around $34.50 total price
                      </dd>
                    </div>
                  </dl>
 
                  <h3 className="text-lg font-semibold text-text mt-6 mb-3">Dates</h3>
                  <p className="text-text mb-2">
                    Dates can be entered in the following formats:
                  </p>
                  <ul className="list-disc list-inside text-muted space-y-1 ml-4">
                    <li>today</li>
                    <li>yesterday</li>
                    <li>last week</li>
                    <li>last month</li>
                    <li>this year</li>
                  </ul>
 
                  <h3 className="text-lg font-semibold text-text mt-6 mb-3">
                    Combining Searches
                  </h3>
                  <p className="text-text mb-2">
                    Simply type multiple criteria together:
                  </p>
                  <ul className="list-disc list-inside text-muted space-y-1 ml-4">
                    <li>sold this month plu 4567</li>
                    <li>phase void this month</li>
                    <li>phase void this year product 456</li>
                  </ul>
 
                  <p className="text-xs text-muted mt-6 pt-4 border-t border-border">
                    <strong>Doesn't work?</strong> Understanding english is quite hard for a
                    computer. If the text you enter isn't understood and you think it should
                    be, feel free to send the search text to support@fieldpine.com.
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}