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 { fieldpineApi } from "@/lib/client/fieldpineApi";
 
interface AccountResult {
  id: number;
  name: string;
  balance: number;
}
 
interface TransactionRow {
  id: string;
  date: string;
  dateValue: number;
  type: string;
  store?: string;
  saleId?: string;
  accountId?: number;
  accountName?: string;
  charges?: number;
  payments?: number;
  netEffect?: number;
  currentBalance?: number;
  comments?: string;
}
 
type TransactionFilter = "all" | "payoff" | "charge" | "adjustment";
 
export default function AccountTransactionsPage() {
  const [typeFilter, setTypeFilter] = useState<TransactionFilter>("all");
  const [startDate, setStartDate] = useState<string>(() => {
    const d = new Date();
    d.setDate(d.getDate() - 30);
    return d.toISOString().slice(0, 10);
  });
  const [endDate, setEndDate] = useState<string>(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().slice(0, 10);
  });
 
  const [accountSearch, setAccountSearch] = useState("");
  const [accountResults, setAccountResults] = useState<AccountResult[]>([]);
  const [accountSearchLoading, setAccountSearchLoading] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState<AccountResult | null>(null);
 
  const [rows, setRows] = useState<TransactionRow[]>([]);
  const [loading, setLoading] = useState(false);
 
  // Debounced account search
  useEffect(() => {
    if (accountSearch.trim().length < 2) {
      setAccountResults([]);
      return;
    }
 
    const handle = setTimeout(() => {
      const doSearch = async () => {
        setAccountSearchLoading(true);
        try {
          const response = await fieldpineApi({
            endpoint: `/buck?3=retailmax.elink.account.detail&9=f101,c,${encodeURIComponent(
              accountSearch.trim()
            )}&8=10`,
          });
          if (response?.DATS) {
            const mapped: AccountResult[] = response.DATS.map((item: any) => ({
              id: Number(item.f100),
              name: item.f101,
              balance: Number(item.f114) || 0,
            }));
            setAccountResults(mapped);
          }
        } catch (err) {
          console.error("Account search failed", err);
        } finally {
          setAccountSearchLoading(false);
        }
      };
 
      doSearch();
    }, 300);
 
    return () => clearTimeout(handle);
  }, [accountSearch]);
 
  const formatCurrency = (value?: number) => {
    if (value === undefined || value === null || Number.isNaN(value)) return "-";
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const loadTransactions = async () => {
    setLoading(true);
    try {
      const predicates: string[] = [];
      if (startDate) predicates.push(`&9=f101,ge,${startDate}`);
      if (endDate) predicates.push(`&9=f101,lt,${endDate}`);
      if (selectedAccount) predicates.push(`&9=f903,0,${selectedAccount.id}`);
      if (typeFilter === "payoff") predicates.push("&9=f505,0,3");
      if (typeFilter === "charge") predicates.push("&9=f505,0,5");
 
      const salesUrl = `/buck?3=retailmax.elink.sale.list&8=500&10=903,904,2125,117&13=completeddt${predicates.join("")}`;
 
      const [salesResponse, adjResponse] = await Promise.all([
        fieldpineApi({ endpoint: salesUrl }),
        typeFilter === "adjustment" || typeFilter === "all"
          ? fieldpineApi({
              endpoint: `/buck?3=retailmax.elink.account.transactionlist&9=f106,ge,${startDate}&9=f106,lt,${endDate}${selectedAccount ? `&9=f101,=,${selectedAccount.id}` : ""}`,
            })
          : Promise.resolve(null),
      ]);
 
      const collected: TransactionRow[] = [];
 
      if (salesResponse?.DATS) {
        salesResponse.DATS.forEach((item: any) => {
          const dt = item.f101 ? new Date(item.f101) : new Date();
          collected.push({
            id: `sale-${item.f100}`,
            date: dt.toLocaleString(),
            dateValue: dt.getTime(),
            type: "Sale",
            store: item.f2125,
            saleId: item.f100?.toString(),
            accountId: item.ACCO?.[0]?.f100,
            accountName: item.ACCO?.[0]?.f101,
            charges: Number(item.f909 ?? item.f904 ?? 0) || undefined,
            payments: Number(item.f908 ?? 0) || undefined,
            netEffect: Number(item.f904 ?? 0) || undefined,
            currentBalance: Number(item.ACCO?.[0]?.f114 ?? NaN),
          });
        });
      }
 
      if (adjResponse?.DATS) {
        adjResponse.DATS.forEach((item: any, idx: number) => {
          const dt = item.f106 ? new Date(item.f106) : new Date();
          const amt = Number(item.f103 ?? 0);
          collected.push({
            id: `adj-${idx}-${item.f101}-${item.f106}`,
            date: dt.toLocaleString(),
            dateValue: dt.getTime(),
            type: "Adjustment",
            store: item.ACCO?.[0]?.f2125,
            saleId: undefined,
            accountId: Number(item.f101) || item.ACCO?.[0]?.f100,
            accountName: item.ACCO?.[0]?.f101,
            charges: amt > 0 ? amt : undefined,
            payments: amt < 0 ? Math.abs(amt) : undefined,
            netEffect: amt,
            currentBalance: Number(item.ACCO?.[0]?.f114 ?? NaN),
            comments: item.f104,
          });
        });
      }
 
      collected.sort((a, b) => b.dateValue - a.dateValue);
      setRows(collected);
    } catch (err) {
      console.error("Failed to load transactions", err);
      setRows([]);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    loadTransactions();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [typeFilter, startDate, endDate, selectedAccount]);
 
  const selectedLabel = useMemo(() => {
    if (!selectedAccount) return "All accounts";
    return `${selectedAccount.name} (Id ${selectedAccount.id})`;
  }, [selectedAccount]);
 
  return (
    <div className="p-6 max-w-[1600px] mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-text mb-2">Account Transactions</h1>
        <p className="text-muted text-sm">
          List all transactions that involve accounts. Filter by date, transaction type, store, or account.
        </p>
      </div>
 
      {/* Filters */}
      <div className="bg-surface rounded-lg shadow p-4 space-y-3">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
          <div>
            <label className="block text-sm font-medium text-text mb-1">Type</label>
            <select
              value={typeFilter}
              onChange={(e) => setTypeFilter(e.target.value as TransactionFilter)}
              className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
            >
              <option value="all">Any / All</option>
              <option value="payoff">Paying off Account</option>
              <option value="charge">Charged to Account</option>
              <option value="adjustment">Adjustments</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">From</label>
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(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-green-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">To</label>
            <input
              type="date"
              value={endDate}
              onChange={(e) => setEndDate(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-green-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">Selected Account</label>
            <div className="text-sm text-text bg-surface-2 border border-border rounded-md px-3 py-2">
              {selectedLabel}
            </div>
          </div>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 items-end">
          <div>
            <label className="block text-sm font-medium text-text mb-1">Account Search</label>
            <div className="flex items-center gap-2">
              <input
                type="text"
                value={accountSearch}
                onChange={(e) => setAccountSearch(e.target.value)}
                placeholder="Search accounts by name"
                className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              />
              {accountSearchLoading && <span className="text-xs text-muted">Searching...</span>}
            </div>
            {accountResults.length > 0 && (
              <div className="mt-2 border border-border rounded-md divide-y max-h-60 overflow-y-auto">
                {accountResults.map((acc) => (
                  <button
                    key={acc.id}
                    onClick={() => {
                      setSelectedAccount(acc);
                      setAccountResults([]);
                      setAccountSearch(acc.name);
                    }}
                    className={`w-full text-left px-3 py-2 hover:bg-surface-2 flex items-center justify-between ${
                      selectedAccount?.id === acc.id ? "bg-green-50" : ""
                    }`}
                  >
                    <div>
                      <p className="text-sm font-medium text-text">{acc.name}</p>
                      <p className="text-xs text-muted">Id {acc.id}</p>
                    </div>
                    <div className="text-xs font-semibold text-text">{formatCurrency(acc.balance)}</div>
                  </button>
                ))}
              </div>
            )}
          </div>
 
          <div className="flex gap-2 justify-end">
            <button
              onClick={loadTransactions}
              className="px-4 py-2 bg-surface-2 text-text rounded-md text-sm font-medium hover:bg-surface-2"
            >
              Refresh
            </button>
            <button
              onClick={() => {
                setAccountSearch("");
                setAccountResults([]);
                setSelectedAccount(null);
              }}
              className="px-4 py-2 border border-border text-text rounded-md text-sm font-medium hover:bg-surface-2"
            >
              Clear Account
            </button>
          </div>
        </div>
      </div>
 
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        <div className="p-4 border-b border-border flex items-center justify-between">
          <div>
            <h2 className="text-xl font-bold text-text">Results</h2>
            <p className="text-sm text-muted">{rows.length} transactions</p>
          </div>
          {loading && (
            <div className="text-sm text-muted flex items-center gap-2">
              <span className="inline-block h-3 w-3 rounded-full border-2 border-gray-400 border-t-transparent animate-spin" />
              Loading...
            </div>
          )}
        </div>
 
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-surface-2 border-b border-border">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Account</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Date/Time</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Type</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Store</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Sale/Ref</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">Charges</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">Payments</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">Net Effect</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">Current Balance</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Comments</th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-gray-200">
              {rows.length === 0 && !loading && (
                <tr>
                  <td colSpan={10} className="px-4 py-8 text-center text-muted">
                    No transactions found for the selected filters.
                  </td>
                </tr>
              )}
 
              {rows.map((row) => (
                <tr key={row.id} className="hover:bg-surface-2">
                  <td className="px-4 py-3 text-sm">
                    <div className="font-medium text-text">{row.accountName ?? "-"}</div>
                    {row.accountId && (
                      <div className="text-xs text-muted">Id {row.accountId}</div>
                    )}
                  </td>
                  <td className="px-4 py-3 text-sm text-text whitespace-nowrap">{row.date}</td>
                  <td className="px-4 py-3 text-sm text-text">{row.type}</td>
                  <td className="px-4 py-3 text-sm text-text">{row.store ?? ""}</td>
                  <td className="px-4 py-3 text-sm text-text">{row.saleId ?? ""}</td>
                  <td className="px-4 py-3 text-sm text-right text-text">{formatCurrency(row.charges)}</td>
                  <td className="px-4 py-3 text-sm text-right text-text">{formatCurrency(row.payments)}</td>
                  <td className="px-4 py-3 text-sm text-right font-semibold text-text">{formatCurrency(row.netEffect)}</td>
                  <td className="px-4 py-3 text-sm text-right text-text">{formatCurrency(row.currentBalance)}</td>
                  <td className="px-4 py-3 text-sm text-text">{row.comments ?? ""}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}