page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useEffect, useMemo, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface AccountFinancialRow {
  id: number;
  name: string;
  balance: number;
  statementDate?: string;
  statementBalance?: number;
  recentSales?: number;
  recentPayments?: number;
  recentAdjustments?: number;
  recentNet?: number;
  lastPayment?: string;
  overdueDays?: number;
  currentDue?: number;
  due30?: number;
  due60?: number;
  due90?: number;
  phone?: string;
  reconDiff?: number;
}
 
export default function AgedDebtorsPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [rowLimit, setRowLimit] = useState("500");
  const [showZeroBalance, setShowZeroBalance] = useState(false);
  const [showRetired, setShowRetired] = useState(false);
  const [rows, setRows] = useState<AccountFinancialRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>("");
 
  useEffect(() => {
    const handle = setTimeout(() => {
      loadData();
    }, 200);
    return () => clearTimeout(handle);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchTerm, rowLimit, showZeroBalance, showRetired]);
 
  const loadData = async () => {
    try {
      setLoading(true);
      setError("");
 
      const limitNum = Number(rowLimit) || 0;
 
      const response = await apiClient.getAccountFinancialData({
        limit: limitNum > 0 ? limitNum : undefined,
        search: searchTerm.trim() || undefined,
        showZeroBalance,
        showRetired
      });
 
      if (!response.success || !response.data || !Array.isArray(response.data)) {
        setRows([]);
        setLoading(false);
        return;
      }
 
      const mapped: AccountFinancialRow[] = response.data.map((item: any) => {
        const balance = Number(item.f114) || 0;
        const stmtBal = Number(item.f260) || 0;
        const recentSales = Number(item.f220) || 0;
        const recentPayments = Number(item.f221) || 0;
        const recentAdjustments = Number(item.f226) || 0;
 
        const recentNet = recentSales - recentPayments - recentAdjustments;
        const reconDiff = balance - stmtBal - recentSales + recentPayments - recentAdjustments;
 
        return {
          id: Number(item.f100) || 0,
          name: item.f101 || "",
          balance,
          statementDate: item.f261 || "",
          statementBalance: stmtBal,
          recentNet,
          recentSales,
          recentPayments,
          recentAdjustments,
          lastPayment: item.f228 || "",
          overdueDays: Number(item.f229) || 0,
          currentDue: Number(item.f232) || 0,
          due30: Number(item.f233) || 0,
          due60: Number(item.f234) || 0,
          due90: Number(item.f235) || 0,
          phone: item.f136 || "",
          reconDiff,
        };
      });
 
      setRows(mapped);
      setLoading(false);
    } catch (err) {
      console.error("Failed to load aged debtors", err);
      setError("Failed to load aged debtors. Please try again.");
      setLoading(false);
    }
  };
 
  const totals = useMemo(() => {
    return rows.reduce(
      (acc, row) => {
        acc.balance += row.balance;
        acc.recentSales += row.recentSales || 0;
        acc.recentPayments += row.recentPayments || 0;
        acc.recentAdjustments += row.recentAdjustments || 0;
        acc.recentNet += (row.recentSales || 0) - (row.recentPayments || 0) + (row.recentAdjustments || 0);
        acc.currentDue += row.currentDue || 0;
        acc.due30 += row.due30 || 0;
        acc.due60 += row.due60 || 0;
        acc.due90 += row.due90 || 0;
        return acc;
      },
      {
        balance: 0,
        recentSales: 0,
        recentPayments: 0,
        recentAdjustments: 0,
        recentNet: 0,
        currentDue: 0,
        due30: 0,
        due60: 0,
        due90: 0,
      }
    );
  }, [rows]);
 
  const formatCurrency = (value: number | undefined) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value || 0);
  };
 
  const formatDate = (value?: string) => {
    if (!value) return "";
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return value;
    return d.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };
 
  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-3xl font-bold text-text">Aged Debtors</h1>
          <p className="text-sm text-muted">
            Financial listing of customer accounts including balances and aged buckets.
          </p>
        </div>
        <div className="flex items-center gap-3 text-sm text-text">
          <label className="flex items-center gap-2">
            Row Limit
            <input
              type="number"
              min={1}
              value={rowLimit}
              onChange={(e) => setRowLimit(e.target.value)}
              className="w-20 px-2 py-1 border border-border rounded"
            />
          </label>
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={showZeroBalance}
              onChange={(e) => setShowZeroBalance(e.target.checked)}
              className="rounded"
            />
            Show zero balance
          </label>
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={showRetired}
              onChange={(e) => setShowRetired(e.target.checked)}
              className="rounded"
            />
            Show retired
          </label>
        </div>
      </div>
 
      <div className="bg-surface rounded-lg shadow p-4 space-y-3">
        <div className="flex flex-wrap gap-3 items-center">
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Search by account name"
            className="px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 w-64"
          />
          {loading && <span className="text-sm text-muted">Loading...</span>}
          {error && <span className="text-sm text-red-600">{error}</span>}
          <div className="text-sm text-muted ml-auto">
            Showing {rows.length} account{rows.length === 1 ? "" : "s"}
          </div>
        </div>
 
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm border border-border">
            <thead className="bg-surface-2">
              <tr className="text-left text-text">
                <th className="px-3 py-2 border-b">Id</th>
                <th className="px-3 py-2 border-b">Name</th>
                <th className="px-3 py-2 border-b text-right">Balance</th>
                <th className="px-3 py-2 border-b">Statement Date</th>
                <th className="px-3 py-2 border-b text-right">Statement Balance</th>
                <th className="px-3 py-2 border-b text-right">Recent Net</th>
                <th className="px-3 py-2 border-b text-right">Recent Sales</th>
                <th className="px-3 py-2 border-b text-right">Recent Payments</th>
                <th className="px-3 py-2 border-b text-right">Recent Adjustments</th>
                <th className="px-3 py-2 border-b">Last Payment</th>
                <th className="px-3 py-2 border-b text-right">Overdue (days)</th>
                <th className="px-3 py-2 border-b text-right">Current</th>
                <th className="px-3 py-2 border-b text-right">30 Days</th>
                <th className="px-3 py-2 border-b text-right">60 Days</th>
                <th className="px-3 py-2 border-b text-right">90+ Days</th>
                <th className="px-3 py-2 border-b">Phone</th>
                <th className="px-3 py-2 border-b text-right">Recent Recon</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, idx) => {
                const overdueClass =
                  (row.overdueDays || 0) > 30
                    ? "bg-pink-100"
                    : (row.overdueDays || 0) > 0
                    ? "bg-yellow-100"
                    : "";
                return (
                  <tr key={row.id || idx} className={idx % 2 === 0 ? "bg-surface" : "bg-surface-2"}>
                    <td className="px-3 py-2 whitespace-nowrap border-b">{row.id}</td>
                    <td className="px-3 py-2 border-b">
                      {row.name}
                    </td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.balance)}</td>
                    <td className="px-3 py-2 border-b whitespace-nowrap">{formatDate(row.statementDate)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.statementBalance)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.recentNet)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.recentSales)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.recentPayments)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.recentAdjustments)}</td>
                    <td className="px-3 py-2 border-b whitespace-nowrap">{formatDate(row.lastPayment)}</td>
                    <td className={`px-3 py-2 border-b text-right ${overdueClass}`}>{row.overdueDays ?? ""}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.currentDue)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.due30)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.due60)}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.due90)}</td>
                    <td className="px-3 py-2 border-b whitespace-nowrap">{row.phone}</td>
                    <td className="px-3 py-2 border-b text-right">{formatCurrency(row.reconDiff)}</td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot className="bg-surface-2 font-semibold text-text">
              <tr>
                <td className="px-3 py-2 border-t" colSpan={2}>
                  Totals
                </td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.balance)}</td>
                <td className="px-3 py-2 border-t" />
                <td className="px-3 py-2 border-t" />
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.recentNet)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.recentSales)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.recentPayments)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.recentAdjustments)}</td>
                <td className="px-3 py-2 border-t" />
                <td className="px-3 py-2 border-t" />
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.currentDue)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.due30)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.due60)}</td>
                <td className="px-3 py-2 border-t text-right">{formatCurrency(totals.due90)}</td>
                <td className="px-3 py-2 border-t" />
                <td className="px-3 py-2 border-t" />
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  );
}