page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect, useRef } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from '@/contexts/IconContext';
 
interface Account {
  id: number;
  name: string;
  balance: number;
  creditLimit: number;
  floorLimit: number;
}
 
interface Sale {
  saleId: number;
  accountId: number;
  accountName: string;
  accountBalance: number;
  date: string;
  time: string;
  phase: number;
  status: string;
  statusColor: string;
  effect: string;
}
 
interface QuickStats {
  outstanding: number;
  outstandingPos: number;
  outstandingNeg: number;
  count: number;
  countActive: number;
  averageBalance: number;
  costOfCredit: number;
  top5Accounts: Array<{ name: string; balance: number }>;
  top5Percentage: number;
  riskAccounts: Array<{ id: number; name: string; balance: number }>;
}
 
interface Customer {
  id: number;
  name: string;
}
 
interface AccountListItem {
  id: number;
  name: string;
  numCustomers: number;
  balance: number;
  email: string;
  lastSale: string;
  paymentHistory: string;
  lastStatement: string;
  receiptFormat: string;
  externalId: string;
  myobId: string;
  xeroId: string;
}
 
export default function CustomerAccountsPage() {
  const [quickStats, setQuickStats] = useState<QuickStats>({
    outstanding: 0,
    outstandingPos: 0,
    outstandingNeg: 0,
    count: 0,
    countActive: 0,
    averageBalance: 0,
    costOfCredit: 0,
    top5Accounts: [],
    top5Percentage: 0,
    riskAccounts: [],
  });
  const [recentSales, setRecentSales] = useState<Sale[]>([]);
  const [loading, setLoading] = useState(true);
  const [salesLoading, setSalesLoading] = useState(true);
  const [showNewAccountModal, setShowNewAccountModal] = useState(false);
  const [showUnlinkModal, setShowUnlinkModal] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
  const [linkedCustomers, setLinkedCustomers] = useState<Customer[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState<Account[]>([]);
  const [showSearchResults, setShowSearchResults] = useState(false);
  const searchTimeout = useRef<NodeJS.Timeout | null>(null);
 
  // Account list state
  const [accounts, setAccounts] = useState<AccountListItem[]>([]);
  const [allAccounts, setAllAccounts] = useState<AccountListItem[]>([]);
  const [accountsLoading, setAccountsLoading] = useState(true);
  const [listSearchTerm, setListSearchTerm] = useState("");
  const [showZeroBalance, setShowZeroBalance] = useState(true);
  const [showRetired, setShowRetired] = useState(false);
  const [accountSortField, setAccountSortField] = useState<string>("id");
  const [accountSortDirection, setAccountSortDirection] = useState<"asc" | "desc">("asc");
 
  const gnapBase = (process.env.NEXT_PUBLIC_FIELDPINE_BASE_URL || "").replace(/\/$/, "");
  const excelExportUrl = `${gnapBase ? `${gnapBase}` : ""}/gnap/o/[xl,100,Accounts.xlsx]/buck?3=retailmax.elink.account.detail&9=f100,4,0`;
 
  // New account form
  const [newAccountForm, setNewAccountForm] = useState({
    name: "",
    creditLimit: "",
    floorLimit: "",
    goToEdit: true,
  });
 
  // Sort state
  const [sortField, setSortField] = useState<string>("date");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
 
  // Tab state
  const [activeTab, setActiveTab] = useState<"dashboard" | "accounts" | "actions">("dashboard");
 
  useEffect(() => {
    loadQuickStats();
    loadRecentSales();
    loadAccountList();
  }, []);
 
  useEffect(() => {
    loadAccountList();
  }, [showZeroBalance, showRetired]);
 
  // Account search
  useEffect(() => {
    if (searchTimeout.current) {
      clearTimeout(searchTimeout.current);
    }
 
    if (searchTerm.length >= 2) {
      searchTimeout.current = setTimeout(() => {
        searchAccounts();
      }, 300);
    } else {
      setSearchResults([]);
      setShowSearchResults(false);
      setSelectedAccount(null);
    }
 
    return () => {
      if (searchTimeout.current) {
        clearTimeout(searchTimeout.current);
      }
    };
  }, [searchTerm]);
 
  const searchAccounts = async () => {
    try {
      const result = await apiClient.getAccounts({ type: 'search', search: searchTerm });
      const results: Account[] = [];
      if (result.success && result.data) {
        result.data.forEach((item: any) => {
          results.push({
            id: item.f100 || 0,
            name: item.f101 || "",
            balance: item.f114 || 0,
            creditLimit: item.f106 || 0,
            floorLimit: item.f107 || 0,
          });
        });
      }
      setSearchResults(results);
      setShowSearchResults(true);
    } catch (error) {
      console.error("Error searching accounts:", error);
    }
  };
 
  const selectAccount = (account: Account) => {
    setSelectedAccount(account);
    setSearchTerm(account.name);
    setShowSearchResults(false);
  };
 
  const loadQuickStats = async () => {
    try {
      const result = await apiClient.getAccounts({ type: 'summary' });
      const response = result.success && result.data && result.data[0] ? result.data[0] : {};
 
      const top5: Array<{ name: string; balance: number }> = [];
      for (let i = 0; i < 5; i++) {
        const name = response[`f${120 + i * 10 + 2}`] || "";
        const balance = response[`f${120 + i * 10}`] || 0;
        if (name) {
          top5.push({ name, balance });
        }
      }
 
      const riskAccounts: Array<{ id: number; name: string; balance: number }> =
        [];
      for (let i = 0; i < 5; i++) {
        const id = response[`f${600 + i * 10}`] || 0;
        const name = response[`f${600 + i * 10 + 2}`] || "";
        const balance = response[`f${600 + i * 10 + 3}`] || 0;
        if (id && name) {
          riskAccounts.push({ id, name, balance });
        }
      }
 
      const outstanding = response.f111 || 0;
      const outstandingPos = response.f112 || 0;
      const outstandingNeg = response.f114 || 0;
      const count = response.f110 || 0;
      const countActive = (response.f110 || 0) - (response.f116 || 0);
      const avgBal = response.f112 || 0;
      const avgCount = response.f113 || 1;
 
      const top5Total = top5.reduce((sum, acc) => sum + acc.balance, 0);
      const top5Pct =
        outstanding === 0 ? 0 : Math.floor((top5Total * 100) / outstanding);
 
      setQuickStats({
        outstanding,
        outstandingPos,
        outstandingNeg,
        count,
        countActive,
        averageBalance: avgBal / avgCount,
        costOfCredit: (outstanding * 0.1) / 12,
        top5Accounts: top5,
        top5Percentage: top5Pct,
        riskAccounts,
      });
      setLoading(false);
    } catch (error) {
      console.error("Error loading quick stats:", error);
      setLoading(false);
    }
  };
 
  const loadRecentSales = async () => {
    try {
      const result = await apiClient.getRecentAccountSales();
 
      const sales: Sale[] = [];
      if (result.success && result.data) {
        result.data.forEach((item: any) => {
          const dateStr = item.f101 || "";
          const date = new Date(dateStr);
          const dateFormatted = date.toLocaleDateString("en-GB", {
            day: "2-digit",
            month: "short",
            year: "numeric",
          });
          const timeFormatted = date.toLocaleTimeString("en-US", {
            hour: "2-digit",
            minute: "2-digit",
            hour12: false,
          });
 
          const phase = item.f108 || 0;
          let status = "Normal";
          let statusColor = "";
          if (phase === 0) {
            status = "Still Active";
            statusColor = "bg-info";
          } else if (phase === 200) {
            status = "Picking";
            statusColor = "bg-warn";
          } else if (phase === 10000 || phase === 10002) {
            status = "Void";
            statusColor = "bg-brand/30";
          } else if (phase !== 1) {
            status = String(phase);
            statusColor = "bg-info";
          }
 
          sales.push({
            saleId: item.f100 || 0,
            accountId: item.ACCO?.[0]?.f100 || 0,
            accountName: item.ACCO?.[0]?.f101 || "",
            accountBalance: item.ACCO?.[0]?.f114 || 0,
            date: dateFormatted,
            time: timeFormatted,
            phase,
            status,
            statusColor,
            effect: item.f904 || "",
          });
        });
      }
 
      setRecentSales(sales);
      setSalesLoading(false);
    } catch (error) {
      console.error("Error loading recent sales:", error);
      setSalesLoading(false);
    }
  };
 
  const loadAccountList = async () => {
    try {
      setAccountsLoading(true);
      let url = "/buck?3=retailmax.elink.account.detail&9=f100,4,0&10=1003,184,1100,1105,1107";
      
      if (!showZeroBalance) {
        url += "&9=f114,5,0";
      }
      if (showRetired) {
        url += "&9=f147,0,1";
      }
 
      const result = await apiClient.getAccounts({ type: 'list' });
 
      const accountList: AccountListItem[] = [];
      if (result.success && result.data) {
        result.data.forEach((item: any) => {
          accountList.push({
            id: item.f100 || 0,
            name: item.f101 || "",
            numCustomers: item.f1000 || 0,
            balance: item.f114 || 0,
            email: item.f152 || "",
            lastSale: item.f1100 || "",
            paymentHistory: item.f1105 || "",
            lastStatement: item.f1107 || "",
            receiptFormat: item.f111 || "",
            externalId: item.f183 || "",
            myobId: item.MYOB?.[0]?.f110 || "",
            xeroId: item.XERO?.[0]?.f110 || "",
          });
        });
      }
 
      setAllAccounts(accountList);
      setAccounts(accountList);
      setAccountsLoading(false);
    } catch (error) {
      console.error("Error loading account list:", error);
      setAccountsLoading(false);
    }
  };
 
  const handleListSearch = () => {
    if (!listSearchTerm) {
      setAccounts(allAccounts);
      return;
    }
 
    const searchLower = listSearchTerm.toLowerCase();
    const filtered = allAccounts.filter((acc) => {
      return (
        acc.name.toLowerCase().includes(searchLower) ||
        String(acc.id).includes(searchLower) ||
        acc.email.toLowerCase().includes(searchLower)
      );
    });
    setAccounts(filtered);
  };
 
  useEffect(() => {
    handleListSearch();
  }, [listSearchTerm, allAccounts]);
 
  const handleAccountSort = (field: string) => {
    if (accountSortField === field) {
      setAccountSortDirection(accountSortDirection === "asc" ? "desc" : "asc");
    } else {
      setAccountSortField(field);
      setAccountSortDirection("asc");
    }
  };
 
  const handleSort = (field: string) => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortDirection("asc");
    }
  };
 
  const sortedSales = [...recentSales].sort((a, b) => {
    let aVal: any = a[sortField as keyof Sale];
    let bVal: any = b[sortField as keyof Sale];
 
    if (sortField === "date") {
      aVal = `${a.date} ${a.time}`;
      bVal = `${b.date} ${b.time}`;
    }
 
    if (typeof aVal === "string") {
      return sortDirection === "asc"
        ? aVal.localeCompare(bVal)
        : bVal.localeCompare(aVal);
    }
    return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
  });
 
  const sortedAccounts = [...accounts].sort((a, b) => {
    let aVal: any = a[accountSortField as keyof AccountListItem];
    let bVal: any = b[accountSortField as keyof AccountListItem];
 
    if (typeof aVal === "string") {
      return accountSortDirection === "asc"
        ? aVal.localeCompare(bVal)
        : bVal.localeCompare(aVal);
    }
    return accountSortDirection === "asc" ? aVal - bVal : bVal - aVal;
  });
 
  const handleNewAccount = () => {
    setNewAccountForm({
      name: "",
      creditLimit: "",
      floorLimit: "",
      goToEdit: true,
    });
    setShowNewAccountModal(true);
  };
 
  const saveNewAccount = async () => {
    try {
      let xml = "<DATI><f8_s>retailmax.elink.account.edit</f8_s>";
      xml += "<f11_B>I</f11_B>";
      xml += `<f101_s>${newAccountForm.name.replace(/[<>&'"]/g, (c) => {
        return {
          "<": "&lt;",
          ">": "&gt;",
          "&": "&amp;",
          "'": "&apos;",
          '"': "&quot;",
        }[c] as string;
      })}</f101_s>`;
      if (newAccountForm.creditLimit) {
        xml += `<f106_s>${newAccountForm.creditLimit}</f106_s>`;
      }
      if (newAccountForm.floorLimit) {
        xml += `<f107_s>${newAccountForm.floorLimit}</f107_s>`;
      }
      xml += "</DATI>";
 
      const response = await fetch("/DATI", {
        method: "POST",
        headers: { "Content-Type": "application/xml" },
        body: xml,
      });
 
      if (response.ok) {
        const result = await response.json();
        const newAccId =
          result.APPD?.[0]?.f100 || result.DATS?.[0]?.f100 || 0;
 
        setShowNewAccountModal(false);
        loadQuickStats();
 
        if (newAccountForm.goToEdit && newAccId !== 0) {
          window.location.href = `/report/pos/customer/fieldpine/account_edit.htm?accid=${newAccId}`;
        }
      }
    } catch (error) {
      console.error("Error creating account:", error);
      alert("Failed to create account");
    }
  };
 
  const handleUnlinkCustomers = async () => {
    if (!selectedAccount) return;
 
    try {
      const result = await apiClient.getAccountCustomers(selectedAccount.id);
 
      const customers: Customer[] = [];
      if (result.success && result.data) {
        result.data.forEach((item: any) => {
          if (item.f100 && item.f100 !== 0) {
            customers.push({
              id: item.f100,
              name: item.f101 || "",
            });
          }
        });
      }
 
      setLinkedCustomers(customers);
      setShowUnlinkModal(true);
    } catch (error) {
      console.error("Error loading customers:", error);
      alert("Failed to load linked customers");
    }
  };
 
  const unlinkCustomer = async (customerId: number) => {
    try {
      let xml = "<DATI><f8_s>retailmax.elink.customers.edit</f8_s>";
      xml += "<f11_B>E</f11_B>";
      xml += `<f100_E>${customerId}</f100_E>`;
      xml += "<f132_E>0</f132_E>";
      xml += "</DATI>";
 
      const response = await fetch("/DATI", {
        method: "POST",
        headers: { "Content-Type": "application/xml" },
        body: xml,
      });
 
      if (response.ok) {
        setLinkedCustomers(
          linkedCustomers.filter((c) => c.id !== customerId)
        );
        if (linkedCustomers.length <= 1) {
          setShowUnlinkModal(false);
        }
      }
    } catch (error) {
      console.error("Error unlinking customer:", error);
      alert("Failed to unlink customer");
    }
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value);
  };
 
  const getTop5Color = () => {
    if (quickStats.top5Percentage > 70) return "bg-danger text-surface";
    if (quickStats.top5Percentage > 20) return "bg-warn text-surface";
    return "";
  };
 
  return (
    <div className="p-6 bg-surface-2 min-h-screen">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2">
          <Icon name="account_balance" size={32} className="text-brand" />
          Customer Accounts
        </h1>
        <p className="text-muted">
          Charge accounts are credit accounts you give to customers and allow
          them to pay later
        </p>
        <p className="text-sm text-muted mt-2">
          A customer cannot have a credit limit alone - they must belong to a
          customer account. Think "XYZ Appliances" (account) → "XYZ Appliances
          Brisbane" (customer).
        </p>
      </div>
 
      {/* Tabs */}
      <div className="mb-6 bg-surface rounded-lg shadow-sm border border-border p-1">
        <nav className="flex gap-2">
          <button
            onClick={() => setActiveTab("dashboard")}
            className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
              activeTab === "dashboard"
                ? "bg-brand text-surface shadow-md"
                : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
            }`}
          >
            <Icon name="bar_chart" size={20} className="inline mr-2" />
            Dashboard
          </button>
          <button
            onClick={() => setActiveTab("accounts")}
            className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
              activeTab === "accounts"
                ? "bg-brand text-surface shadow-md"
                : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
            }`}
          >
            <Icon name="list_alt" size={20} className="inline mr-2" />
            All Accounts
            <span className={`ml-2 px-2 py-0.5 text-xs rounded-full ${
              activeTab === "accounts" 
                ? "bg-surface/20 text-surface" 
                : "bg-surface-2 text-text"
            }`}>
              {accounts.length}
            </span>
          </button>
          <button
            onClick={() => setActiveTab("actions")}
            className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
              activeTab === "actions"
                ? "bg-brand text-surface shadow-md"
                : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
            }`}
          >
            <Icon name="settings" size={20} className="inline mr-2" />
            Actions & Reports
          </button>
        </nav>
      </div>
 
      {/* Tab Content */}
      {activeTab === "dashboard" && (
        <div className="flex gap-6">
          {/* Main Content */}
          <div className="flex-1">
          {/* Key Actions */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            <button
              onClick={handleNewAccount}
              className="bg-success text-surface p-6 rounded-lg shadow hover:shadow-lg transition-all hover:bg-success/80 text-center"
            >
              <div className="text-4xl mb-2"><Icon name="person_add" size={40} /></div>
              <div className="font-semibold">New Account</div>
            </button>
 
            <a
              href="/pages/customers/customer-accounts/enter-payment"
              className="bg-surface p-6 rounded-lg shadow hover:shadow-lg transition-shadow text-center border-2 border-success"
            >
              <div className="text-4xl mb-2"><Icon name="payments" size={40} /></div>
              <div className="font-semibold text-text">Enter Payment</div>
            </a>
 
            <a
              href="/pages/reports/sales-reports/sales-by-account"
              className="bg-surface p-6 rounded-lg shadow hover:shadow-lg transition-shadow text-center"
            >
              <div className="text-4xl mb-2"><Icon name="trending_up" size={40} /></div>
              <div className="font-semibold text-text">Sales Summary</div>
            </a>
 
            <a
              href="/pages/customers/customer-accounts/transactions"
              className="bg-surface p-6 rounded-lg shadow hover:shadow-lg transition-shadow text-center"
            >
              <div className="text-4xl mb-2"><Icon name="credit_card" size={40} /></div>
              <div className="font-semibold text-text">Transactions</div>
            </a>
          </div>
 
          {/* Selected Account */}
          {selectedAccount && (
            <div className="bg-gradient-to-r from-brand to-brand/80 text-surface rounded-lg shadow-lg p-6 mb-8">
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <div className="text-sm opacity-90 mb-1">Selected Account</div>
                  <h3 className="text-2xl font-bold mb-2">{selectedAccount.name}</h3>
                  <div className="flex gap-6 text-sm">
                    <div>
                      <div className="opacity-90">Account #</div>
                      <div className="font-semibold">{selectedAccount.id}</div>
                    </div>
                    <div>
                      <div className="opacity-90">Balance</div>
                      <div className="font-semibold">{formatCurrency(selectedAccount.balance)}</div>
                    </div>
                    <div>
                      <div className="opacity-90">Credit Limit</div>
                      <div className="font-semibold">{formatCurrency(selectedAccount.creditLimit)}</div>
                    </div>
                  </div>
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() =>
                      window.location.href = `/report/pos/customer/fieldpine/account_edit.htm?accid=${selectedAccount.id}`
                    }
                    className="px-4 py-2 bg-surface text-brand rounded-lg hover:bg-surface-2 transition-colors font-semibold"
                  >
                    Edit
                  </button>
                  <button
                    onClick={handleUnlinkCustomers}
                    className="px-4 py-2 bg-surface/20 hover:bg-surface/30 rounded-lg transition-colors"
                  >
                    Unlink Customers
                  </button>
                  <button
                    onClick={() => {
                      setSelectedAccount(null);
                      setSearchTerm("");
                    }}
                    className="px-3 py-2 bg-surface/20 hover:bg-surface/30 rounded-lg transition-colors"
                  >
                    ✕
                  </button>
                </div>
              </div>
            </div>
          )}
 
          {/* Quick Account Search */}
          <div className="bg-surface rounded-lg shadow p-6 mb-8">
            <div className="flex gap-4 items-end">
              <div className="flex-1 relative">
                <label className="block text-sm font-medium text-text mb-2">
                  Quick Account Search
                </label>
                <input
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onFocus={() => {
                    if (searchResults.length > 0) setShowSearchResults(true);
                  }}
                  placeholder="Type to search accounts..."
                  className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-brand/50 focus:border-transparent text-lg"
                />
 
                {/* Search Results Dropdown */}
                {showSearchResults && searchResults.length > 0 && (
                  <div className="absolute z-10 w-full mt-1 bg-surface border border-border rounded-lg shadow-xl max-h-96 overflow-y-auto">
                    {searchResults.map((account) => (
                      <div
                        key={account.id}
                        onClick={() => selectAccount(account)}
                        className="px-4 py-3 hover:bg-brand hover:text-surface cursor-pointer border-b border-border last:border-b-0 transition-colors"
                      >
                        <div className="font-semibold">
                          {account.name}
                        </div>
                        <div className="text-sm opacity-75">
                          #{account.id} • Balance: {formatCurrency(account.balance)}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
 
          {/* Recent Sales - Top 10 */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">
              Recent Sales
            </h2>
 
            {salesLoading ? (
              <div className="text-center py-8 text-muted">
                Loading sales...
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-[var(--brand)] text-surface">
                    <tr>
                      <th
                        onClick={() => handleSort("accountId")}
                        className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                      >
                        Account#
                        {sortField === "accountId" && (
                          <span className="ml-1">
                            {sortDirection === "asc" ? "↑" : "↓"}
                          </span>
                        )}
                      </th>
                      <th
                        onClick={() => handleSort("accountName")}
                        className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                      >
                        Account Name
                        {sortField === "accountName" && (
                          <span className="ml-1">
                            {sortDirection === "asc" ? "↑" : "↓"}
                          </span>
                        )}
                      </th>
                      <th
                        onClick={() => handleSort("date")}
                        className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                      >
                        Date
                        {sortField === "date" && (
                          <span className="ml-1">
                            {sortDirection === "asc" ? "↑" : "↓"}
                          </span>
                        )}
                      </th>
                      <th
                        onClick={() => handleSort("saleId")}
                        className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                      >
                        Sale#
                        {sortField === "saleId" && (
                          <span className="ml-1">
                            {sortDirection === "asc" ? "↑" : "↓"}
                          </span>
                        )}
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Status
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Effect
                      </th>
                      <th
                        onClick={() => handleSort("accountBalance")}
                        className="px-4 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                      >
                        Current Balance
                        {sortField === "accountBalance" && (
                          <span className="ml-1">
                            {sortDirection === "asc" ? "↑" : "↓"}
                          </span>
                        )}
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-surface divide-y divide-border">
                    {sortedSales.map((sale, index) => (
                      <tr
                        key={index}
                        className={index % 2 === 0 ? "bg-surface" : "bg-surface-2"}
                      >
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-text">
                          {sale.accountId}
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm">
                          <a
                            href={`/report/pos/customer/fieldpine/account_single_overview.htm?accid=${sale.accountId}`}
                            className="text-brand hover:underline"
                          >
                            {sale.accountName}
                          </a>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-text">
                          <div className="flex justify-between">
                            <span>{sale.date}</span>
                            <span className="text-muted">{sale.time}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm">
                          <a
                            href={`/report/pos/sales/fieldpine/SingleSale.htm?sid=${sale.saleId}`}
                            className="text-brand hover:underline"
                          >
                            {sale.saleId}
                          </a>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm">
                          <span
                            className={`px-2 py-1 rounded ${
                              sale.statusColor || "bg-surface-2"
                            }`}
                          >
                            {sale.status}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-sm text-text text-right">
                          {sale.effect}
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-text text-right">
                          {formatCurrency(sale.accountBalance)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
 
                {sortedSales.length === 0 && (
                  <div className="text-center py-8 text-muted">
                    No recent sales found
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
 
        {/* Quick Stats Sidebar */}
        <div className="w-80">
          <div className="bg-surface rounded-lg shadow p-6 sticky top-6">
            <h3 className="text-lg font-bold text-text text-center mb-4">
              Quick Stats
            </h3>
 
            {loading ? (
              <div className="text-center py-8 text-muted">Loading...</div>
            ) : (
              <div className="space-y-2 text-sm">
                <hr className="my-2" />
                
                <div className="flex justify-between" title="Net balance of all accounts">
                  <span className="text-muted">Outstanding</span>
                  <span className="font-semibold">
                    {formatCurrency(quickStats.outstanding)}
                  </span>
                </div>
 
                <div className="flex justify-between" title="Total amount owing to you">
                  <span className="text-muted text-xs">Due to You</span>
                  <span className="font-semibold">
                    {formatCurrency(quickStats.outstandingPos)}
                  </span>
                </div>
 
                <div className="flex justify-between" title="Total amount you owe them">
                  <span className="text-muted text-xs">In Credit</span>
                  <span className="font-semibold">
                    {formatCurrency(quickStats.outstandingNeg)}
                  </span>
                </div>
 
                <div className="flex justify-between">
                  <span className="text-muted">Total Number</span>
                  <span className="font-semibold">{quickStats.count}</span>
                </div>
 
                <div className="flex justify-between">
                  <span className="text-muted">Active</span>
                  <span className="font-semibold">
                    {quickStats.countActive}
                  </span>
                </div>
 
                <div className="flex justify-between">
                  <span className="text-muted">Average Balance</span>
                  <span className="font-semibold">
                    {formatCurrency(quickStats.averageBalance)}
                  </span>
                </div>
 
                <hr className="my-2" />
 
                <div className="flex justify-between" title="Estimate per month at 10% cost of capital">
                  <span className="text-muted text-xs">
                    Cost of Credit
                    <br />
                    (est. monthly, 10%)
                  </span>
                  <span className="font-semibold">
                    {formatCurrency(quickStats.costOfCredit)}
                  </span>
                </div>
 
                <hr className="my-2" />
 
                {/* Top 5 */}
                <div className="flex justify-between items-center mb-2">
                  <span className="font-semibold">Top 5</span>
                  <span
                    className={`px-2 py-1 rounded font-semibold ${getTop5Color()}`}
                  >
                    {quickStats.top5Percentage}%
                  </span>
                </div>
 
                {quickStats.top5Accounts.map((acc, idx) => (
                  <div key={idx} className="flex justify-between">
                    <span className="text-muted text-xs truncate flex-1 mr-2">
                      {acc.name}
                    </span>
                    <span className="font-semibold text-xs whitespace-nowrap">
                      {formatCurrency(acc.balance)}
                    </span>
                  </div>
                ))}
 
                <hr className="my-2" />
 
                {/* At Risk */}
                <div className="font-semibold mb-2">At Risk</div>
 
                {quickStats.riskAccounts.map((acc, idx) => (
                  <div key={idx} className="flex justify-between">
                    <a
                      href={`/report/pos/customer/fieldpine/account_single_overview.htm?accid=${acc.id}`}
                      className="text-brand hover:underline text-xs truncate flex-1 mr-2"
                    >
                      {acc.name}
                    </a>
                    <span className="font-semibold text-xs whitespace-nowrap">
                      {formatCurrency(acc.balance)}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
      )}
 
      {/* All Accounts Tab */}
      {activeTab === "accounts" && (
        <div className="bg-surface rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-text mb-4">
            All Accounts
          </h2>
 
          {/* Search and Filters */}
          <div className="flex flex-wrap gap-4 items-center mb-6 p-4 bg-surface-2 rounded-lg sticky top-0 z-10">
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-text">
                Search
              </label>
              <input
                type="text"
                value={listSearchTerm}
                onChange={(e) => setListSearchTerm(e.target.value)}
                placeholder="Filter accounts..."
                className="px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-sm"
              />
            </div>
 
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={showZeroBalance}
                onChange={(e) => setShowZeroBalance(e.target.checked)}
                className="rounded"
              />
              <span className="text-text">Show Zero Balance</span>
            </label>
 
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={showRetired}
                onChange={(e) => setShowRetired(e.target.checked)}
                className="rounded"
              />
              <span className="text-text">Show Retired/Disabled</span>
            </label>
 
            <div className="ml-auto text-sm text-muted font-medium">
              {accountsLoading ? (
                "Loading..."
              ) : (
                <>
                  {accounts.length} of {allAccounts.length} accounts
                </>
              )}
            </div>
          </div>
 
          {/* Account Table */}
          {accountsLoading ? (
            <div className="space-y-3">
              {[...Array(10)].map((_, i) => (
                <div key={i} className="animate-pulse flex gap-4">
                  <div className="h-12 bg-surface-2 rounded flex-1"></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-[var(--brand)] text-surface">
                  <tr>
                    <th
                      onClick={() => handleAccountSort("id")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Id#
                      {accountSortField === "id" && (
                        <span className="ml-1">
                          {accountSortDirection === "asc" ? "↑" : "↓"}
                        </span>
                      )}
                    </th>
                    <th
                      onClick={() => handleAccountSort("name")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Name
                      {accountSortField === "name" && (
                        <span className="ml-1">
                          {accountSortDirection === "asc" ? "↑" : "↓"}
                        </span>
                      )}
                    </th>
                    <th
                      onClick={() => handleAccountSort("numCustomers")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Customers
                      {accountSortField === "numCustomers" && (
                        <span className="ml-1">
                          {accountSortDirection === "asc" ? "↑" : "↓"}
                        </span>
                      )}
                    </th>
                    <th
                      onClick={() => handleAccountSort("balance")}
                      className="px-4 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Balance
                      {accountSortField === "balance" && (
                        <span className="ml-1">
                          {accountSortDirection === "asc" ? "↑" : "↓"}
                        </span>
                      )}
                    </th>
                    <th
                      onClick={() => handleAccountSort("email")}
                      className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      Email
                      {accountSortField === "email" && (
                        <span className="ml-1">
                          {accountSortDirection === "asc" ? "↑" : "↓"}
                        </span>
                      )}
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {sortedAccounts.map((account, index) => (
                    <tr
                      key={account.id}
                      className={`hover:bg-surface-2 transition-colors ${
                        index % 2 === 0 ? "bg-surface" : "bg-surface-2"
                      }`}
                    >
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-text font-medium">
                        {account.id}
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm">
                        <a
                          href={`/report/pos/customer/fieldpine/account_single_overview.htm?accid=${account.id}`}
                          className="text-brand hover:underline font-medium"
                        >
                          {account.name}
                        </a>
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-text text-center">
                        {account.numCustomers}
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-text text-right font-semibold">
                        {formatCurrency(account.balance)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">
                        {account.email && (
                          <a
                            href={`mailto:${account.email}`}
                            className="text-brand hover:underline"
                          >
                            {account.email}
                          </a>
                        )}
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm">
                        <button
                          onClick={() =>
                            (window.location.href = `/report/pos/customer/fieldpine/account_edit.htm?accid=${account.id}`)
                          }
                          className="px-3 py-1 bg-danger text-surface rounded hover:bg-danger/80 text-xs font-medium"
                        >
                          Edit
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
 
              {sortedAccounts.length === 0 && (
                <div className="text-center py-12 text-muted">
                  <Icon name="search_off" size={48} className="mx-auto mb-2" />
                  <div>No accounts found</div>
                </div>
              )}
            </div>
          )}
        </div>
      )}
 
      {/* New Account Modal */}
      {showNewAccountModal && (
        <div className="fixed inset-0 modal-backdrop flex items-center justify-center z-50">
          <div className="bg-surface rounded-lg shadow-xl p-6 w-full max-w-md">
            <h2 className="text-xl font-semibold text-text mb-4">Create New Account</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-text mb-1">
                  Account Name *
                </label>
                <input
                  type="text"
                  value={newAccountForm.name}
                  onChange={(e) =>
                    setNewAccountForm({ ...newAccountForm, name: 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-brand"
                  placeholder="Enter account name"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-1">
                  Credit Limit ($)
                </label>
                <input
                  type="number"
                  value={newAccountForm.creditLimit}
                  onChange={(e) =>
                    setNewAccountForm({
                      ...newAccountForm,
                      creditLimit: 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-brand"
                  placeholder="0"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-1">
                  Floor Limit ($)
                </label>
                <input
                  type="number"
                  value={newAccountForm.floorLimit}
                  onChange={(e) =>
                    setNewAccountForm({
                      ...newAccountForm,
                      floorLimit: 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-brand"
                  placeholder="0"
                />
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={newAccountForm.goToEdit}
                  onChange={(e) =>
                    setNewAccountForm({
                      ...newAccountForm,
                      goToEdit: e.target.checked,
                    })
                  }
                  className="rounded"
                />
                <label className="text-sm text-text">Go to edit screen after creating</label>
              </div>
            </div>
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => setShowNewAccountModal(false)}
                className="flex-1 px-4 py-2 border border-border rounded-md text-sm font-medium text-text hover:bg-surface-2"
              >
                Cancel
              </button>
              <button
                onClick={saveNewAccount}
                className="flex-1 px-4 py-2 bg-success text-surface rounded-md text-sm font-medium hover:bg-success/80 flex items-center justify-center gap-2"
              >
                <Icon name="check" size={18} />
                Create Account
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* Unlink Customers Modal */}
      {showUnlinkModal && (
        <div className="fixed inset-0 modal-backdrop flex items-center justify-center z-50">
          <div className="bg-surface rounded-lg shadow-xl p-6 w-full max-w-2xl">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold text-text">
                Unlink Customers from Account
              </h2>
              <button
                onClick={() => setShowUnlinkModal(false)}
                className="text-muted hover:text-text"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="mb-4">
              <h3 className="font-semibold mb-2">Current Customers</h3>
              {linkedCustomers.length === 0 ? (
                <p className="text-muted text-center py-4">
                  No customers linked to this account
                </p>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full border border-border">
                    <thead className="bg-[var(--brand)] text-surface">
                      <tr>
                        <th className="px-4 py-2 text-left border-b">Cid#</th>
                        <th className="px-4 py-2 text-left border-b">
                          Customer Name
                        </th>
                        <th className="px-4 py-2 text-left border-b">
                          Options
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {linkedCustomers.map((customer) => (
                        <tr key={customer.id} className="border-b">
                          <td className="px-4 py-2">{customer.id}</td>
                          <td className="px-4 py-2">{customer.name}</td>
                          <td className="px-4 py-2">
                            <button
                              onClick={() => unlinkCustomer(customer.id)}
                              className="px-3 py-1 bg-danger text-surface rounded hover:bg-danger/80 text-sm"
                            >
                              Unlink
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
 
            <div className="bg-warn/10 border border-warn/30 rounded p-4 mb-4">
              <p className="text-sm text-text mb-2">
                Unlinking customers that have already made purchases on account
                has some restrictions:
              </p>
              <ul className="list-disc list-inside text-sm text-text space-y-1">
                <li>
                  Any sales already placed on a statement will not be altered.
                  You may need to enter some manual adjustments or reverse the
                  statement before unlinking the customer
                </li>
                <li>
                  If the customer you are unlinking has current unbilled sales
                  to be charged to an account, you will need to choose a new
                  account to link them to
                </li>
                <li>
                  Unlinking accounts may cause some reconciliation reports to
                  complain about both the old and new accounts
                </li>
              </ul>
            </div>
 
            <button
              onClick={() => setShowUnlinkModal(false)}
              className="w-full px-4 py-2 bg-surface-2 text-text rounded-lg hover:bg-surface-2"
            >
              Close
            </button>
          </div>
        </div>
      )}
 
      {/* Actions Tab */}
      {activeTab === "actions" && (
        <div className="space-y-6">
          {/* Reporting */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <span className="text-2xl">📊</span> Reporting
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <a
                href={excelExportUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center w-full"
              >
                <div className="text-3xl mb-2">📊</div>
                <div className="text-sm font-semibold text-text">Excel Export</div>
              </a>
 
              <a
                href="/pages/reports/sales-reports/sales-by-account"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">📈</div>
                <div className="text-sm font-semibold text-text">Sales Summary</div>
              </a>
 
              <a
                href="/pages/customers/customer-accounts/transactions"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">💳</div>
                <div className="text-sm font-semibold text-text">Transaction List</div>
              </a>
 
              <a
                href="/pages/customers/customer-accounts/aged-debtors"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">💰</div>
                <div className="text-sm font-semibold text-text">Aged Debtors</div>
              </a>
 
              <a
                href="/pages/reports/sales-reports/sales-by-teller"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">👥</div>
                <div className="text-sm font-semibold text-text">Sales Rep Summary</div>
              </a>
            </div>
          </div>
 
          {/* Account Management */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <Icon name="settings" size={24} className="text-brand" /> Account Management
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <button
                onClick={handleNewAccount}
                className="bg-success text-surface p-4 rounded-lg hover:bg-success/80 transition-colors text-center"
              >
                <Icon name="person_add" size={32} className="mx-auto mb-2" />
                <div className="text-sm font-semibold">New Account</div>
              </button>
 
            </div>
          </div>
 
          {/* Transactions */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <Icon name="payments" size={24} className="text-brand" /> Transactions
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <a
                href="/pages/customers/customer-accounts/enter-payment"
                className="bg-success/10 border border-success/30 p-4 rounded-lg hover:bg-success/20 transition-colors text-center"
              >
                <Icon name="payments" size={32} className="mx-auto mb-2 text-success" />
                <div className="text-sm font-semibold text-text">Enter Payment</div>
              </a>
 
              <a
                href="/pages/customers/customer-accounts/account-adjustment"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <Icon name="edit_note" size={32} className="mx-auto mb-2 text-brand" />
                <div className="text-sm font-semibold text-text">Enter Adjustment</div>
              </a>
            </div>
          </div>
 
          {/* Statements */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <span className="text-2xl">📄</span> Statements
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <a
                href="/pages/customers/customer-accounts/view-statements"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">📄</div>
                <div className="text-sm font-semibold text-text">View Statements</div>
              </a>
 
              <a
                href="/pages/customers/customer-accounts/run-statements"
                className="bg-surface-2 p-4 rounded-lg hover:bg-surface-2 transition-colors text-center"
              >
                <div className="text-3xl mb-2">📝</div>
                <div className="text-sm font-semibold text-text">Run Statements</div>
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}