page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { fieldpineApi } from "@/lib/client/fieldpineApi";
 
interface StatementAccount {
  Accid: number;
  Name?: string;
  Terms?: string;
  TotalDebits: number;
  TotalCredits: number;
  BalanceDue: number;
  BillingRun: number;
}
 
interface StatementRun {
  Jobid: number;
  MinDt: string;
  Count: number;
  TotalDebits?: number;
  TotalCredits?: number;
  TotalDue?: number;
  accounts?: StatementAccount[];
  loading?: boolean;
}
 
export default function ViewStatementsPage() {
  const [statementRuns, setStatementRuns] = useState<StatementRun[]>([]);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    loadStatementRuns();
  }, []);
 
  const loadStatementRuns = async () => {
    setLoading(true);
    try {
      const response = await fieldpineApi({
        endpoint: "/buck?3=retailmax.elink.account.statementrun&201=1",
      });
 
      if (response?.DATS) {
        const runs: StatementRun[] = response.DATS.map((run: any) => ({
          ...run,
          accounts: [],
          loading: false,
        }));
        
        setStatementRuns(runs);
        
        // Load account details for runs with fewer than 5000 accounts
        runs.forEach((run, index) => {
          if (run.Count < 5000) {
            loadAccountDetails(run.Jobid, index);
          }
        });
      }
    } catch (error) {
      console.error("Failed to load statement runs:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const loadAccountDetails = async (jobId: number, runIndex: number) => {
    // Mark as loading
    setStatementRuns(prev => {
      const updated = [...prev];
      updated[runIndex] = { ...updated[runIndex], loading: true };
      return updated;
    });
 
    try {
      const response = await fieldpineApi({
        endpoint: `/buck?3=retailmax.elink.account.statementrun&201=2&9=f106,0,${jobId}`,
      });
 
      if (response?.DATS) {
        setStatementRuns(prev => {
          const updated = [...prev];
          updated[runIndex] = {
            ...updated[runIndex],
            accounts: response.DATS,
            loading: false,
          };
          return updated;
        });
      }
    } catch (error) {
      console.error("Failed to load account details:", error);
      setStatementRuns(prev => {
        const updated = [...prev];
        updated[runIndex] = { ...updated[runIndex], loading: false };
        return updated;
      });
    }
  };
 
  const viewPdf = (billingRun: number) => {
    window.open(
      `/openapi/documentrequest?options=2&formatid=-108&output=pdf&billingrun=${billingRun}`,
      "_blank"
    );
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const formatDateTime = (dateStr: string) => {
    if (!dateStr) return "";
    return new Date(dateStr).toLocaleString("en-US", {
      day: "2-digit",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  };
 
  return (
    <div className="p-6 max-w-[1600px] mx-auto">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2">Historic Statements</h1>
        <p className="text-sm text-muted">
          This screen reviews statements that have been issued. It only shows statements generated 
          using the web page option. Statements created directly in PosGreen cannot be shown here.
        </p>
        <p className="text-sm text-muted mt-2">
          If you need bulk access to individual statements, these are stored in the folder 
          <code className="bg-surface-2 px-2 py-1 rounded text-xs mx-1">\fieldpine\pos\statements</code> 
          for direct access by external programs.
        </p>
      </div>
 
      {/* Loading State */}
      {loading && (
        <div className="text-center py-12">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
          <p className="mt-4 text-muted">Loading statement runs...</p>
        </div>
      )}
 
      {/* Statement Runs */}
      {!loading && statementRuns.length === 0 && (
        <div className="bg-surface rounded-lg shadow p-8 text-center">
          <p className="text-muted">No statement runs found</p>
        </div>
      )}
 
      {!loading && statementRuns.length > 0 && (
        <div className="space-y-8">
          {statementRuns.map((run, index) => (
            <div key={run.Jobid} className="bg-surface rounded-lg shadow">
              {/* Run Header */}
              <div className="border-b-2 border-border p-6">
                <h2 className="text-2xl font-bold text-text mb-2">
                  {formatDateTime(run.MinDt)}
                </h2>
                <p className="text-text">
                  Number of Accounts in Run: <span className="font-bold">{run.Count}</span>
                </p>
              </div>
 
              {/* Account Details */}
              <div className="p-6">
                {run.Count >= 5000 ? (
                  <p className="text-sm text-muted italic">
                    Too many statements to show details. View Windows folder directly to see statements.
                  </p>
                ) : run.loading ? (
                  <div className="flex items-center justify-center py-8">
                    <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 mr-3"></div>
                    <span className="text-muted">Loading account details...</span>
                  </div>
                ) : run.accounts && run.accounts.length > 0 ? (
                  <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 Id
                          </th>
                          <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">
                            Name
                          </th>
                          <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">
                            Terms
                          </th>
                          <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">
                            Debits
                          </th>
                          <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">
                            Credits
                          </th>
                          <th className="px-4 py-3 text-right text-xs font-medium text-muted uppercase">
                            Balance
                          </th>
                          <th className="px-4 py-3 text-center text-xs font-medium text-muted uppercase">
                            Options
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-surface divide-y divide-gray-200">
                        {run.accounts.map((account) => (
                          <tr key={`${run.Jobid}-${account.Accid}`} className="hover:bg-surface-2">
                            <td className="px-4 py-3 text-sm font-medium text-text">
                              {account.Accid}
                            </td>
                            <td className="px-4 py-3 text-sm text-text">
                              {account.Name ? (
                                account.Name
                              ) : (
                                <span className="text-red-500">No Name</span>
                              )}
                            </td>
                            <td className="px-4 py-3 text-sm text-muted">
                              {account.Terms || ""}
                            </td>
                            <td className="px-4 py-3 text-sm text-right text-text">
                              {formatCurrency(account.TotalDebits)}
                            </td>
                            <td className="px-4 py-3 text-sm text-right text-text">
                              {formatCurrency(account.TotalCredits)}
                            </td>
                            <td className="px-4 py-3 text-sm text-right font-medium text-text">
                              {formatCurrency(account.BalanceDue)}
                            </td>
                            <td className="px-4 py-3 text-center">
                              <button
                                onClick={() => viewPdf(account.BillingRun)}
                                className="px-4 py-1.5 bg-[#00543b] text-white text-sm rounded hover:bg-[#003d2b] transition-colors"
                              >
                                View
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <p className="text-sm text-muted">No accounts found in this run</p>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}