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 Account {
  id: number;
  name: string;
  balance: number;
  email?: string;
  paymentHistory?: string;
  lastStatement?: string;
}
 
export default function AccountAdjustmentPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState<Account[]>([]);
  const [searchLoading, setSearchLoading] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
 
  const [amount, setAmount] = useState<string>("");
  const [adjustmentDate, setAdjustmentDate] = useState<string>(() => {
    const d = new Date();
    return d.toISOString().slice(0, 10);
  });
  const [comments, setComments] = useState<string>("Adjustment");
 
  const [saving, setSaving] = useState(false);
  const [statusMessage, setStatusMessage] = useState<string>("");
  const [statusVariant, setStatusVariant] = useState<"success" | "error" | "info" | "">("");
 
  useEffect(() => {
    if (searchTerm.trim().length < 2) {
      setSearchResults([]);
      return;
    }
 
    const handle = setTimeout(() => {
      const doSearch = async () => {
        setSearchLoading(true);
        try {
          // Search accounts via API
          const response = await apiClient.request(`/v1/buck/accounts?search=${encodeURIComponent(searchTerm.trim())}&limit=10`);
          if (response?.data?.DATS) {
            const mapped: Account[] = response.data.DATS.map((item: any) => ({
              id: Number(item.f100),
              name: item.f101,
              balance: Number(item.f114) || 0,
              email: item.f152,
              paymentHistory: item.f1105,
              lastStatement: item.f1106,
            }));
            setSearchResults(mapped);
          }
        } catch (err) {
          console.error("Account search failed", err);
        } finally {
          setSearchLoading(false);
        }
      };
 
      doSearch();
    }, 300);
 
    return () => clearTimeout(handle);
  }, [searchTerm]);
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const projectedBalance = useMemo(() => {
    if (!selectedAccount) return null;
    const delta = Number(amount);
    if (Number.isNaN(delta)) return selectedAccount.balance;
    return selectedAccount.balance + delta;
  }, [selectedAccount, amount]);
 
  const canSubmit = useMemo(() => {
    return !!selectedAccount && Number(amount) !== 0 && !Number.isNaN(Number(amount)) && !saving;
  }, [selectedAccount, amount, saving]);
 
  const handleSelectAccount = (account: Account) => {
    setSelectedAccount(account);
    setStatusMessage("");
  };
 
  const handleSubmit = async () => {
    if (!selectedAccount) {
      setStatusMessage("Please select an account");
      setStatusVariant("error");
      return;
    }
 
    const delta = Number(amount);
    if (Number.isNaN(delta) || delta === 0) {
      setStatusMessage("Enter an adjustment amount (positive or negative, not zero)");
      setStatusVariant("error");
      return;
    }
 
    setSaving(true);
    setStatusMessage("Saving adjustment...");
    setStatusVariant("info");
 
    const xml = [
      "<DATI>",
      "<f8_s>retailmax.elink.account.request</f8_s>",
      "<f11_B>I</f11_B>",
      `<f100_E>${selectedAccount.id}</f100_E>`,
      "<f101_E>121</f101_E>",
      `<f151_s>${amount}</f151_s>`,
      `<f152_s>${adjustmentDate}</f152_s>`,
      comments ? `<f153_s>${comments}</f153_s>` : "",
      "</DATI>",
    ].join("");
 
    try {
      const response = await fetch("/DATI", {
        method: "POST",
        headers: {
          "Content-Type": "application/xml",
          Accept: "application/json",
        },
        credentials: "include",
        body: xml,
      });
 
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
 
      setStatusMessage("Adjustment saved successfully.");
      setStatusVariant("success");
      setSaving(false);
    } catch (err) {
      console.error("Failed to save adjustment", err);
      setStatusMessage("Adjustment failed. Please try again.");
      setStatusVariant("error");
      setSaving(false);
    }
  };
 
  return (
    <div className="p-6 max-w-6xl mx-auto space-y-6">
      <div className="mb-2">
        <h1 className="text-3xl font-bold text-text mb-2">Record Account Adjustment</h1>
        <p className="text-muted text-sm">
          Apply an adjustment to an account balance. Positive amounts increase the balance owing; negative amounts decrease it.
        </p>
      </div>
 
      {statusMessage && (
        <div
          className={`rounded-lg px-4 py-3 text-sm border ${
            statusVariant === "success"
              ? "bg-green-50 border-green-200 text-green-800"
              : statusVariant === "error"
              ? "bg-red-50 border-red-200 text-red-800"
              : "bg-info/10 border-info/30 text-info"
          }`}
        >
          {statusMessage}
        </div>
      )}
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-4">
          <div className="bg-surface rounded-lg shadow p-4">
            <h2 className="text-lg font-semibold text-text mb-3">Select Account</h2>
            <div className="flex items-center gap-3">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search account 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"
              />
              {searchLoading && <span className="text-sm text-muted">Searching...</span>}
            </div>
            {searchResults.length > 0 && (
              <div className="mt-3 border border-border rounded-md divide-y max-h-64 overflow-y-auto">
                {searchResults.map((acc) => (
                  <button
                    key={acc.id}
                    onClick={() => handleSelectAccount(acc)}
                    className={`w-full text-left px-3 py-2 hover:bg-surface-2 flex justify-between items-center ${
                      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-sm font-semibold text-text">{formatCurrency(acc.balance)}</div>
                  </button>
                ))}
              </div>
            )}
          </div>
 
          <div className="bg-surface rounded-lg shadow p-4 space-y-4">
            <h2 className="text-lg font-semibold text-text">Adjustment Details</h2>
 
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-text mb-1">Amount</label>
                <input
                  type="number"
                  step="0.01"
                  value={amount}
                  onChange={(e) => setAmount(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"
                  placeholder="Use positive or negative values"
                />
              </div>
 
              <div>
                <label className="block text-sm font-medium text-text mb-1">Date</label>
                <input
                  type="date"
                  value={adjustmentDate}
                  onChange={(e) => setAdjustmentDate(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 className="md:col-span-2">
                <label className="block text-sm font-medium text-text mb-1">Comments (shown to account holder)</label>
                <input
                  type="text"
                  value={comments}
                  onChange={(e) => setComments(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"
                  placeholder="Adjustment description"
                />
              </div>
            </div>
 
            <div className="flex gap-3 pt-2">
              <button
                onClick={handleSubmit}
                disabled={!canSubmit}
                className="px-5 py-2 bg-[#00543b] text-white rounded-md font-semibold hover:bg-[#003d2b] disabled:bg-surface-2 disabled:cursor-not-allowed"
              >
                {saving ? "Saving..." : "Save Adjustment"}
              </button>
              <button
                onClick={() => {
                  setSelectedAccount(null);
                  setSearchTerm("");
                  setAmount("");
                  setComments("Adjustment");
                  setStatusMessage("");
                  setStatusVariant("");
                }}
                className="px-4 py-2 border border-border rounded-md text-sm text-text hover:bg-surface-2"
              >
                Clear
              </button>
            </div>
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4">
          <h2 className="text-lg font-semibold text-text mb-3">Account Summary</h2>
          {selectedAccount ? (
            <div className="space-y-3">
              <div>
                <p className="text-sm text-muted">Account</p>
                <p className="text-lg font-semibold text-text">{selectedAccount.name}</p>
                <p className="text-sm text-muted">Id: {selectedAccount.id}</p>
              </div>
 
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted">Current Balance</span>
                <span className="text-lg font-bold text-text">{formatCurrency(selectedAccount.balance)}</span>
              </div>
 
              {typeof projectedBalance === "number" && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted">New Balance (after adjustment)</span>
                  <span className="text-lg font-bold text-text">{formatCurrency(projectedBalance)}</span>
                </div>
              )}
 
              {selectedAccount.email && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted">Email</span>
                  <a href={`mailto:${selectedAccount.email}`} className="text-sm text-[#00543b] hover:underline">
                    {selectedAccount.email}
                  </a>
                </div>
              )}
 
              {selectedAccount.lastStatement && (
                <div className="flex items-center justify-between text-sm text-muted">
                  <span>Last Statement</span>
                  <span>{selectedAccount.lastStatement}</span>
                </div>
              )}
 
              {selectedAccount.paymentHistory && (
                <div>
                  <p className="text-sm text-muted mb-1">Payment History</p>
                  <div
                    className="text-sm text-text bg-surface-2 rounded p-3"
                    dangerouslySetInnerHTML={{ __html: selectedAccount.paymentHistory }}
                  />
                </div>
              )}
            </div>
          ) : (
            <p className="text-sm text-muted">Select an account to see details.</p>
          )}
        </div>
      </div>
    </div>
  );
}