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 Account {
  f100: number; // Account ID
  f101: string; // Name
  f114: number; // Current Balance
  f152?: string; // Email
  f2001?: string; // Payment History HTML
  LastStatementDt?: string;
  NextStatementDt?: string;
  BillFreqStr?: string;
  StatementRunActive?: number;
  PaymentOverdueDays?: number;
  _RunStatement?: boolean;
}
 
export default function RunStatementsPage() {
  const [accountsDue, setAccountsDue] = useState<Account[]>([]);
  const [accountsSoon, setAccountsSoon] = useState<Account[]>([]);
  const [selectedAccounts, setSelectedAccounts] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [showAll, setShowAll] = useState(false);
  const [showRetired, setShowRetired] = useState(false);
  const [processing, setProcessing] = useState(false);
 
  // Statement run options
  const [endDate, setEndDate] = useState("");
  const [endByFrequency, setEndByFrequency] = useState(true);
  const [emailControl, setEmailControl] = useState("4"); // Send Immediately
 
  useEffect(() => {
    loadAccounts();
  }, [showAll, showRetired]);
 
  const loadAccounts = async () => {
    setLoading(true);
    try {
      let url = "/buck?3=retailmax.elink.account.financial&9=f100,ne,0&10=112,9000&100=statementrun";
      
      if (showRetired) url += "&9=f147,0,1";
      if (showAll) url += "&101=1";
 
      const response = await fieldpineApi({ endpoint: url });
      
      if (response?.DATS) {
        const now = new Date();
        now.setDate(now.getDate() + 1);
        
        const due: Account[] = [];
        const soon: Account[] = [];
        const autoSelected: number[] = [];
 
        response.DATS.forEach((account: any) => {
          const nextStatementDate = account.NextStatementDt ? new Date(account.NextStatementDt) : null;
          
          // Filter by search term if present
          if (searchTerm && !account.f101?.toLowerCase().includes(searchTerm.toLowerCase())) {
            return;
          }
 
          if (nextStatementDate && nextStatementDate > now) {
            soon.push(account);
          } else {
            // Auto-select accounts that are due and not already in progress
            if (!account.StatementRunActive) {
              account._RunStatement = true;
              autoSelected.push(account.f100);
            }
            due.push(account);
          }
        });
 
        setAccountsDue(due);
        setAccountsSoon(soon);
        setSelectedAccounts(autoSelected);
      }
    } catch (error) {
      console.error("Failed to load accounts:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const toggleAccount = (accountId: number) => {
    if (processing) return;
    
    setSelectedAccounts(prev => {
      if (prev.includes(accountId)) {
        return prev.filter(id => id !== accountId);
      } else {
        return [...prev, accountId];
      }
    });
  };
 
  const selectAll = () => {
    if (processing) return;
    const allDueIds = accountsDue
      .filter(acc => !acc.StatementRunActive)
      .map(acc => acc.f100);
    setSelectedAccounts(allDueIds);
  };
 
  const selectNone = () => {
    if (processing) return;
    setSelectedAccounts([]);
  };
 
  const runStatements = async () => {
    if (!window.confirm("Do you really want to run these statements?")) {
      return;
    }
 
    setProcessing(true);
    try {
      const payload = {
        f8_s: "retailmax.elink.account.request",
        f101_E: 140,
        f100_s: selectedAccounts.join(","),
        f300_s: endDate,
        f301_E: endByFrequency ? 1 : 0,
        f302_E: parseInt(emailControl),
      };
 
      await fetch("/DATI", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
        credentials: "include",
      });
 
      // Reload the page after successful submission
      window.location.reload();
    } catch (error) {
      console.error("Failed to run statements:", error);
      alert("Failed to run statements. Please try again.");
      setProcessing(false);
    }
  };
 
  const getOverdueStyle = (account: Account) => {
    const overdueDays = account.PaymentOverdueDays || 0;
    if (overdueDays > 30) return "bg-pink-300";
    if (overdueDays > 0) return "bg-yellow-200";
    return "";
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const formatDate = (dateStr?: string) => {
    if (!dateStr) return "";
    return new Date(dateStr).toLocaleDateString("en-US", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };
 
  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">Run Account Statements</h1>
        <p className="text-muted">
          If you need bulk access to individual statements, these are stored in the folder
          \fieldpine\pos\statements for direct access by external programs.
        </p>
      </div>
 
      {/* Search and Filters */}
      <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <div className="flex flex-wrap gap-4 items-center">
          <div className="flex gap-2">
            <input
              type="text"
              placeholder="Search accounts..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
            />
            <button
              onClick={loadAccounts}
              className="px-4 py-2 bg-surface-2 text-text rounded-md hover:bg-surface-2"
            >
              Search
            </button>
          </div>
          
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={showAll}
              onChange={(e) => setShowAll(e.target.checked)}
              className="rounded"
            />
            Show All Accounts
          </label>
          
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={showRetired}
              onChange={(e) => setShowRetired(e.target.checked)}
              className="rounded"
            />
            Show retired/disabled accounts
          </label>
          
          {loading && (
            <span className="text-sm text-muted">Loading from server...</span>
          )}
        </div>
      </div>
 
      {/* Statements Due Now */}
      <div className="bg-surface rounded-lg shadow mb-6">
        <div className="p-4 border-b border-border">
          <h2 className="text-xl font-bold text-text mb-4">Statements Due Now</h2>
          
          <div className="flex flex-wrap gap-3 items-center mb-4">
            <button
              onClick={selectAll}
              disabled={processing}
              className="px-4 py-2 bg-surface-2 text-text rounded-md hover:bg-surface-2 disabled:opacity-50"
            >
              Select All Due
            </button>
            <button
              onClick={selectNone}
              disabled={processing}
              className="px-4 py-2 bg-surface-2 text-text rounded-md hover:bg-surface-2 disabled:opacity-50"
            >
              Select None
            </button>
            <span className="text-sm font-medium text-text">
              Selected {selectedAccounts.length} account{selectedAccounts.length !== 1 ? "s" : ""}
            </span>
            <button
              onClick={runStatements}
              disabled={selectedAccounts.length === 0 || processing}
              className="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-surface-2 disabled:cursor-not-allowed font-semibold"
            >
              {processing ? "Processing..." : "Run Statements Now"}
            </button>
          </div>
 
          {/* Statement Run Options */}
          <div className="border border-border rounded-lg p-4 bg-surface-2">
            <p className="font-bold text-text mb-3">Statement Run Options</p>
            
            <div className="space-y-2 text-sm">
              <div className="flex items-center gap-3">
                <span className="text-text">Include transactions until</span>
                <input
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                  className="px-3 py-1 border border-border rounded-md"
                />
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={endByFrequency}
                    onChange={(e) => setEndByFrequency(e.target.checked)}
                    className="rounded"
                  />
                  Also stop based on statement frequency
                </label>
              </div>
              
              <div className="flex items-center gap-3">
                <span className="text-text w-20">Email</span>
                <select
                  value={emailControl}
                  onChange={(e) => setEmailControl(e.target.value)}
                  className="px-3 py-1 border border-border rounded-md"
                >
                  <option value="4">Send Immediately</option>
                  <option value="1">Queue, but do not send</option>
                </select>
              </div>
            </div>
          </div>
        </div>
 
        {/* Table */}
        <div className="overflow-x-auto" style={{ opacity: processing ? 0.5 : 1 }}>
          <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">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-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">Last Statement</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Statement Frequency</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Next Statement</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-muted uppercase">Options</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Email</th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-gray-200">
              {accountsDue.length === 0 ? (
                <tr>
                  <td colSpan={8} className="px-4 py-8 text-center text-muted">
                    No statements due at this time
                  </td>
                </tr>
              ) : (
                accountsDue.map((account) => (
                  <tr key={account.f100} className="hover:bg-surface-2">
                    <td className="px-4 py-3 text-sm">{account.f100}</td>
                    <td className="px-4 py-3 text-sm">
                      <a
                        href={`/report/pos/customer/fieldpine/account_single_overview.htm?accid=${account.f100}`}
                        className="text-[#00543b] hover:underline font-medium"
                      >
                        {account.f101}
                      </a>
                    </td>
                    <td
                      className={`px-4 py-3 text-sm text-right font-medium ${getOverdueStyle(account)}`}
                      title={
                        account.PaymentOverdueDays
                          ? `This account is overdue ${account.PaymentOverdueDays} days`
                          : ""
                      }
                    >
                      {formatCurrency(account.f114)}
                    </td>
                    <td className="px-4 py-3 text-sm whitespace-nowrap">{formatDate(account.LastStatementDt)}</td>
                    <td className="px-4 py-3 text-sm">{account.BillFreqStr || ""}</td>
                    <td className="px-4 py-3 text-sm whitespace-nowrap">{formatDate(account.NextStatementDt)}</td>
                    <td className="px-4 py-3 text-sm text-center">
                      {account.StatementRunActive ? (
                        <span className="text-brand font-medium">In Progress</span>
                      ) : processing ? (
                        <span className="text-muted">Processing</span>
                      ) : (
                        <label className="flex items-center justify-center gap-2">
                          <input
                            type="checkbox"
                            checked={selectedAccounts.includes(account.f100)}
                            onChange={() => toggleAccount(account.f100)}
                            className="rounded"
                          />
                          Run
                        </label>
                      )}
                    </td>
                    <td className="px-4 py-3 text-sm">
                      {account.f152 && (
                        <a href={`mailto:${account.f152}`} className="text-[#00543b] hover:underline">
                          {account.f152}
                        </a>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
 
      {/* Statements Not Yet Due */}
      <div className="bg-surface rounded-lg shadow">
        <div className="p-4 border-b border-border">
          <h2 className="text-xl font-bold text-text">Statements Not Yet Due</h2>
        </div>
        
        <div className="overflow-x-auto" style={{ opacity: processing ? 0.5 : 1 }}>
          <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">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-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">Last Statement</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Statement Frequency</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Next Statement</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase">Email</th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-gray-200">
              {accountsSoon.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-4 py-8 text-center text-muted">
                    No upcoming statements
                  </td>
                </tr>
              ) : (
                accountsSoon.map((account) => (
                  <tr key={account.f100} className="hover:bg-surface-2">
                    <td className="px-4 py-3 text-sm">{account.f100}</td>
                    <td className="px-4 py-3 text-sm">
                      <a
                        href={`/report/pos/customer/fieldpine/account_single_overview.htm?accid=${account.f100}`}
                        className="text-[#00543b] hover:underline font-medium"
                      >
                        {account.f101}
                      </a>
                    </td>
                    <td className="px-4 py-3 text-sm text-right font-medium">
                      {formatCurrency(account.f114)}
                    </td>
                    <td className="px-4 py-3 text-sm whitespace-nowrap">{formatDate(account.LastStatementDt)}</td>
                    <td className="px-4 py-3 text-sm">{account.BillFreqStr || ""}</td>
                    <td className="px-4 py-3 text-sm whitespace-nowrap">{formatDate(account.NextStatementDt)}</td>
                    <td className="px-4 py-3 text-sm">
                      {account.f152 && (
                        <a href={`mailto:${account.f152}`} className="text-[#00543b] hover:underline">
                          {account.f152}
                        </a>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}