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";
import { Icon } from '@/contexts/IconContext';
 
interface PaymentType {
  id: number;
  name: string;
  count: number;
  amount: number;
  countPos: number;
  amountPos: number;
  countNeg: number;
  amountNeg: number;
  eftCards?: CardType[];
}
 
interface CardType {
  type: string;
  count: number;
  amount: number;
}
 
interface LaneData {
  id: number;
  name: string;
  locationName?: string;
  grandTotal: number;
  bankCash: number;
  bankCashCount: number;
  payments: { [key: string]: { value: number; count: number; name: string } };
}
 
export default function EndOfDayPage() {
  const [fromDate, setFromDate] = useState('');
  const [toDate, setToDate] = useState('');
  const [loading, setLoading] = useState(false);
  const [verticalMode, setVerticalMode] = useState(false);
 
  // Summary totals
  const [totalSales, setTotalSales] = useState(0);
  const [totalCount, setTotalCount] = useState(0);
  const [payOffAccount, setPayOffAccount] = useState(0);
  const [prepay, setPrepay] = useState(0);
  const [salesNet, setSalesNet] = useState(0);
  const [custRevenue, setCustRevenue] = useState(0);
  const [custCount, setCustCount] = useState(0);
  const [cashRevenue, setCashRevenue] = useState(0);
  const [cashCount, setCashCount] = useState(0);
 
  // Payment data
  const [paymentTypes, setPaymentTypes] = useState<PaymentType[]>([]);
  const [bankingSummary, setBankingSummary] = useState<{ name: string; count: number; amount: number }[]>([]);
  const [bankingTotal, setBankingTotal] = useState(0);
  const [rounding, setRounding] = useState(0);
  const [reconciles, setReconciles] = useState<{ status: 'ok' | 'error' | 'warning'; message: string } | null>(null);
 
  // Breakdown data
  const [storeBreakdown, setStoreBreakdown] = useState<LaneData[]>([]);
  const [laneBreakdown, setLaneBreakdown] = useState<LaneData[]>([]);
 
  // Load vertical mode preference from localStorage
  useEffect(() => {
    if (typeof window !== 'undefined' && window.localStorage) {
      const saved = localStorage.getItem('tsvertmode');
      if (saved === '1') setVerticalMode(true);
    }
    
    // Set yesterday's date by default
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    const dateStr = yesterday.toISOString().split('T')[0];
    setToDate(dateStr);
  }, []);
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value);
  };
 
  const formatNumber = (value: number) => {
    return new Intl.NumberFormat('en-NZ', {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(value);
  };
 
  const formatDateForAPI = (date: string) => {
    if (!date) return '';
    const d = new Date(date + 'T00:00:00');
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${d.getDate()}${months[d.getMonth()]}${d.getFullYear()}`;
  };
 
  const buildPredicates = () => {
    let predicates = '&10=311,320';
    
    if (toDate) {
      const stopDate = formatDateForAPI(toDate);
      
      if (fromDate) {
        // Date range
        const startDate = formatDateForAPI(fromDate);
        predicates += `&9=f101,4,${startDate}`;
        
        // Add one day to stop date for exclusive end
        const stopDateObj = new Date(toDate + 'T00:00:00');
        stopDateObj.setDate(stopDateObj.getDate() + 1);
        const stopDatePlus = formatDateForAPI(stopDateObj.toISOString().split('T')[0]);
        predicates += `&9=f101,1,${stopDatePlus}`;
      } else {
        // Single day
        predicates += `&9=f101,100,${stopDate}`;
      }
    }
    
    return predicates;
  };
 
  const getDateRangeForLinks = () => {
    if (!toDate) return { start: '', end: '' };
    
    const stopDate = formatDateForAPI(toDate);
    const stopDateObj = new Date(toDate + 'T00:00:00');
    stopDateObj.setDate(stopDateObj.getDate() + 1);
    const stopDatePlus = formatDateForAPI(stopDateObj.toISOString().split('T')[0]);
    
    if (fromDate) {
      return { start: formatDateForAPI(fromDate), end: stopDatePlus };
    } else {
      return { start: stopDate, end: stopDatePlus };
    }
  };
 
  const loadTradingSummary = async () => {
    const apiKey = sessionStorage.getItem("fieldpine_apikey");
    if (!apiKey) {
      alert("Please log in first");
      return;
    }
 
    setLoading(true);
    
    try {
      const predicates = buildPredicates();
      
      // Load main summary
      const summaryResponse = await fieldpineApi({
        endpoint: `/buck?3=retailmax.elink.summary.trading${predicates}`,
        apiKey: apiKey
      });
 
      if (summaryResponse?.data) {
        const data = summaryResponse.data;
        
        // Extract totals
        const totRev = Number(data.f200 || 0);
        const payOff = Number(data.f130 || 0);
        const prepayVal = Number(data.f131 || 0);
        
        setTotalSales(totRev);
        setTotalCount(Number(data.f120 || 0));
        setPayOffAccount(payOff);
        setPrepay(prepayVal);
        setSalesNet(totRev - payOff - prepayVal);
        
        setCustRevenue(Number(data.f201 || 0));
        setCustCount(Number(data.f121 || 0));
        setCashRevenue(Number(data.f202 || 0));
        setCashCount(Number(data.f122 || 0));
        
        // Process payment types
        if (data.APPT && Array.isArray(data.APPT)) {
          const payments: PaymentType[] = [];
          const banking: { name: string; count: number; amount: number }[] = [];
          let netCash = 0;
          let netCashCount = 0;
          let roundingAmt = 0;
          let grandTotal = 0;
          
          for (const pt of data.APPT) {
            const payType: PaymentType = {
              id: Number(pt.f100 || 0),
              name: String(pt.f101 || ''),
              count: Number(pt.f105 || 0),
              amount: Number(pt.f102 || 0),
              countPos: Number(pt.f106 || 0),
              amountPos: Number(pt.f103 || 0),
              countNeg: Number(pt.f107 || 0),
              amountNeg: Number(pt.f104 || 0)
            };
            
            // Extract card types if available
            if (pt.EFTC && Array.isArray(pt.EFTC)) {
              payType.eftCards = pt.EFTC.map((card: any) => ({
                type: String(card.CardType || card.f100 || '??'),
                count: Number(card.Count || card.f101 || 0),
                amount: Number(card.Amount || card.f102 || 0)
              }));
            }
            
            payments.push(payType);
            
            // Calculate banking totals
            switch (payType.id) {
              case 1: // Cash
                netCash += payType.amount;
                netCashCount += payType.count;
                grandTotal += payType.amount;
                break;
              case 5: // EFTpos failure - skip
                break;
              case 6: // Change
                netCash -= payType.amount;
                grandTotal -= payType.amount;
                break;
              case 7: // Rounding
                roundingAmt = payType.amount;
                break;
              default:
                banking.push({
                  name: payType.name,
                  count: payType.count,
                  amount: payType.amount
                });
                grandTotal += payType.amount;
                break;
            }
          }
          
          // Add net cash to banking summary
          if (netCash !== 0 || netCashCount !== 0) {
            banking.unshift({
              name: 'Net Cash',
              count: netCashCount,
              amount: netCash
            });
            grandTotal += 0; // Already included above
          }
          
          setPaymentTypes(payments);
          setBankingSummary(banking);
          setBankingTotal(grandTotal);
          setRounding(roundingAmt);
          
          // Check reconciliation
          const diff = Math.abs((grandTotal + roundingAmt) - totRev);
          if (diff < 0.01) {
            if (roundingAmt !== 0) {
              setReconciles({ 
                status: 'ok', 
                message: `Reconciles to ${formatCurrency(totRev)} ✔` 
              });
            } else {
              setReconciles({ 
                status: 'ok', 
                message: `Reconciles to ${formatCurrency(totRev)} ✔` 
              });
            }
          } else {
            setReconciles({ 
              status: 'error', 
              message: `Difference of ${formatCurrency(diff)} - totals do not match!` 
            });
          }
        }
      }
      
      // Load store breakdown
      loadStoreBreakdown(predicates, apiKey);
      
      // Load lane breakdown
      loadLaneBreakdown(predicates, apiKey);
      
    } catch (error) {
      console.error('Error loading trading summary:', error);
      alert('Error loading data. Please try again.');
    } finally {
      setLoading(false);
    }
  };
 
  const loadStoreBreakdown = async (predicates: string, apiKey: string) => {
    try {
      const response = await fieldpineApi({
        endpoint: `/buck?3=retailmax.elink.summary.trading&15=2,location${predicates}`,
        apiKey: apiKey
      });
 
      if (response?.data?.APPT && Array.isArray(response.data.APPT)) {
        const stores: { [key: number]: LaneData } = {};
        
        for (const pt of response.data.APPT) {
          const locId = Number(pt.f300 || 0);
          
          if (!stores[locId]) {
            stores[locId] = {
              id: locId,
              name: String(pt.f301 || locId),
              grandTotal: 0,
              bankCash: 0,
              bankCashCount: 0,
              payments: {}
            };
          }
          
          const store = stores[locId];
          const payId = Number(pt.f100 || 0);
          const payName = String(pt.f101 || '');
          const amount = Number(pt.f102 || 0);
          const count = Number(pt.f105 || 0);
          
          store.payments[payId] = { value: amount, count: count, name: payName };
          
          // Calculate totals
          switch (payId) {
            case 1: // Cash
              store.grandTotal += amount;
              store.bankCash += amount;
              store.bankCashCount += count;
              break;
            case 5: // EFTpos failure
              break;
            case 6: // Change
              store.grandTotal -= amount;
              store.bankCash -= amount;
              break;
            case 7: // Rounding
              break;
            default:
              store.grandTotal += amount;
              break;
          }
        }
        
        setStoreBreakdown(Object.values(stores));
      }
    } catch (error) {
      console.error('Error loading store breakdown:', error);
    }
  };
 
  const loadLaneBreakdown = async (predicates: string, apiKey: string) => {
    try {
      const response = await fieldpineApi({
        endpoint: `/buck?3=retailmax.elink.summary.trading&15=2,srcuid${predicates}`,
        apiKey: apiKey
      });
 
      if (response?.data?.APPT && Array.isArray(response.data.APPT)) {
        const lanes: { [key: number]: LaneData } = {};
        
        for (const pt of response.data.APPT) {
          const laneId = Number(pt.f110 || 0);
          
          if (!lanes[laneId]) {
            lanes[laneId] = {
              id: laneId,
              name: String(laneId),
              locationName: String(pt.f301 || ''),
              grandTotal: 0,
              bankCash: 0,
              bankCashCount: 0,
              payments: {}
            };
          }
          
          const lane = lanes[laneId];
          const payId = Number(pt.f100 || 0);
          const payName = String(pt.f101 || '');
          const amount = Number(pt.f102 || 0);
          const count = Number(pt.f105 || 0);
          
          lane.payments[payId] = { value: amount, count: count, name: payName };
          
          // Calculate totals
          switch (payId) {
            case 1: // Cash
              lane.grandTotal += amount;
              lane.bankCash += amount;
              lane.bankCashCount += count;
              break;
            case 5: // EFTpos failure
              break;
            case 6: // Change
              lane.grandTotal -= amount;
              lane.bankCash -= amount;
              break;
            case 7: // Rounding
              break;
            default:
              lane.grandTotal += amount;
              break;
          }
        }
        
        setLaneBreakdown(Object.values(lanes));
      }
    } catch (error) {
      console.error('Error loading lane breakdown:', error);
    }
  };
 
  const handleVerticalModeChange = (checked: boolean) => {
    setVerticalMode(checked);
    if (typeof window !== 'undefined' && window.localStorage) {
      localStorage.setItem('tsvertmode', checked ? '1' : '0');
    }
  };
 
  const dateRange = getDateRangeForLinks();
 
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-4">End of Day Trading Summary</h1>
      
      {/* Quick Navigation */}
      <div className="mb-6 bg-surface p-4 rounded-lg shadow border border-border">
        <div className="flex items-center justify-between mb-3">
          <div className="text-sm font-semibold text-text">Useful End of Day Reports</div>
          <div className="text-xs text-muted">Common reports for end of day reconciliation</div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <a
            href="/pages/reports/sales-reports/sale-items-review"
            className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
            <div className="relative z-10 flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                  <Icon name="list_alt" size={24} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                </div>
                <div className="font-semibold text-text group-hover:text-brand transition-colors duration-200">Sale Items Review</div>
              </div>
              <div className="text-xs text-muted">Individual saleline details</div>
            </div>
          </a>
          <a
            href="/pages/reports/sales-reports/sale-header-review"
            className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
            <div className="relative z-10 flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                  <Icon name="description" size={24} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                </div>
                <div className="font-semibold text-text group-hover:text-brand transition-colors duration-200">Sale Header Review</div>
              </div>
              <div className="text-xs text-muted">Single line per sale</div>
            </div>
          </a>
          <a
            href="/pages/reports/sales-reports/payment-list"
            className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
            <div className="relative z-10 flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                  <Icon name="credit_card" size={24} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                </div>
                <div className="font-semibold text-text group-hover:text-brand transition-colors duration-200">Payment List</div>
              </div>
              <div className="text-xs text-muted">Individual payment transactions</div>
            </div>
          </a>
          <a
            href="/pages/reports/sales-reports/sales-kpi"
            className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
            <div className="relative z-10 flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                  <Icon name="bar_chart" size={24} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                </div>
                <div className="font-semibold text-text group-hover:text-brand transition-colors duration-200">Sales KPI</div>
              </div>
              <div className="text-xs text-muted">Key performance indicators by store</div>
            </div>
          </a>
        </div>
      </div>
      
      {/* Date Selection */}
      <div className="mb-6 bg-surface p-4 rounded-lg shadow">
        <div className="flex flex-wrap items-center gap-4">
          <div>
            <label className="block text-sm font-medium mb-1">From (included)</label>
            <input
              type="date"
              value={fromDate}
              onChange={(e) => setFromDate(e.target.value)}
              className="border rounded px-3 py-2"
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">To (included)</label>
            <input
              type="date"
              value={toDate}
              onChange={(e) => setToDate(e.target.value)}
              className="border rounded px-3 py-2"
            />
          </div>
          <div className="self-end">
            <button
              onClick={loadTradingSummary}
              disabled={loading}
              className="bg-brand text-white px-6 py-2 rounded hover:bg-brand/90 disabled:bg-muted/50"
            >
              {loading ? 'Loading...' : 'Load Date'}
            </button>
          </div>
        </div>
        <p className="text-sm text-muted mt-2">
          Tip: You only need to enter a "to" date if you want a single day
        </p>
      </div>
 
      {/* Summary Boxes */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Total Turnover */}
        <div className="bg-surface p-4 rounded-lg shadow border border-border">
          <h3 className="font-bold text-lg mb-3">Total Turnover</h3>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span>Turnover</span>
              <span className="font-mono">{formatCurrency(totalSales)}</span>
            </div>
            <div className="flex justify-between">
              <span>Count</span>
              <span className="font-mono">{formatNumber(totalCount)}</span>
            </div>
            <div className="flex justify-between">
              <span>Pay Off Account</span>
              <span className="font-mono">{formatCurrency(payOffAccount)}</span>
            </div>
            <div className="flex justify-between">
              <span>Prepay Topup</span>
              <span className="font-mono">{formatCurrency(prepay)}</span>
            </div>
            <div className="flex justify-between font-bold pt-2 border-t">
              <span>Estimated Sales</span>
              <span className="font-mono">{formatCurrency(salesNet)}</span>
            </div>
          </div>
        </div>
 
        {/* Banking Summary */}
        <div className="bg-surface p-4 rounded-lg shadow border border-border">
          <h3 className="font-bold text-lg mb-3">Banking Summary</h3>
          {bankingSummary.length > 0 ? (
            <div className="space-y-2">
              {bankingSummary.map((item, idx) => (
                <div key={idx} className="flex justify-between">
                  <span>{item.name}</span>
                  <span className="font-mono bg-lime-200 px-2 rounded">{formatCurrency(item.amount)}</span>
                </div>
              ))}
              <div className="flex justify-between font-bold pt-2 border-t">
                <span>Totals</span>
                <span className="font-mono bg-lime-200 px-2 rounded">{formatCurrency(bankingTotal)}</span>
              </div>
              {reconciles && (
                <div className={`text-xs pt-2 ${reconciles.status === 'ok' ? 'text-green-700' : 'text-red-700'}`}>
                  {reconciles.message}
                </div>
              )}
            </div>
          ) : (
            <p className="text-muted text-sm">No data</p>
          )}
        </div>
 
        {/* Known Customers */}
        <div className="bg-surface p-4 rounded-lg shadow border border-border">
          <h3 className="font-bold text-lg mb-3">Known Customers</h3>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span>Turnover</span>
              <span className="font-mono">{formatCurrency(custRevenue)}</span>
            </div>
            <div className="flex justify-between">
              <span>Count</span>
              <span className="font-mono">{formatNumber(custCount)}</span>
            </div>
          </div>
        </div>
 
        {/* Cash Customers */}
        <div className="bg-surface p-4 rounded-lg shadow border border-border">
          <h3 className="font-bold text-lg mb-3">Cash Customers</h3>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span>Turnover</span>
              <span className="font-mono">{formatCurrency(cashRevenue)}</span>
            </div>
            <div className="flex justify-between">
              <span>Count</span>
              <span className="font-mono">{formatNumber(cashCount)}</span>
            </div>
          </div>
        </div>
      </div>
 
      {/* EFTpos Card Types */}
      {paymentTypes.some(pt => pt.eftCards && pt.eftCards.length > 0) && (
        <div className="bg-surface p-4 rounded-lg shadow mb-6">
          <h3 className="font-bold text-lg mb-3">EFTpos Cardtypes</h3>
          <div className="overflow-x-auto">
            <table className="min-w-full border-collapse border border-border">
              <thead>
                <tr className="bg-surface-2">
                  <th className="border border-border px-4 py-2 text-left">CardType</th>
                  <th className="border border-border px-4 py-2 text-center">Count</th>
                  <th className="border border-border px-4 py-2 text-right">Total</th>
                </tr>
              </thead>
              <tbody>
                {paymentTypes.map(pt => 
                  pt.eftCards?.map((card, idx) => (
                    <tr key={`${pt.id}-${idx}`}>
                      <td className="border border-border px-4 py-2">{card.type}</td>
                      <td className="border border-border px-4 py-2 text-center">{card.count}</td>
                      <td className="border border-border px-4 py-2 text-right font-mono">{formatCurrency(card.amount)}</td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
            <p className="text-xs text-muted mt-2">
              These figures are best effort, review your EFTpos provider for more details
            </p>
          </div>
        </div>
      )}
 
      {/* Actual Payment Methods */}
      {paymentTypes.length > 0 && (
        <div className="bg-surface p-4 rounded-lg shadow mb-6">
          <h3 className="font-bold text-lg mb-3">Actual Payment Methods</h3>
          <div className="overflow-x-auto">
            <table className="min-w-full border-collapse border border-border">
              <thead>
                <tr className="bg-surface-2">
                  <th className="border border-border px-4 py-2 text-left">Tender</th>
                  <th className="border border-border px-4 py-2 text-right">Total Count</th>
                  <th className="border border-border px-4 py-2 text-right">Total (Net)</th>
                  <th className="border border-border px-4 py-2 text-right">Count &gt; 0</th>
                  <th className="border border-border px-4 py-2 text-right">Total &gt; 0</th>
                  <th className="border border-border px-4 py-2 text-right">Count &lt; 0</th>
                  <th className="border border-border px-4 py-2 text-right">Total &lt; 0</th>
                </tr>
              </thead>
              <tbody>
                {paymentTypes.map(pt => (
                  <tr key={pt.id} className={pt.id === 5 ? 'bg-red-50' : ''}>
                    <td className="border border-border px-4 py-2">
                      <a 
                        href={`/report/pos/sales/fieldpine/payments_list.htm?sdt=${dateRange.start}&edt=${dateRange.end}&ptype=${pt.id}`}
                        className="text-brand hover:underline"
                        target="_blank"
                      >
                        {pt.name}
                      </a>
                    </td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatNumber(pt.count)}</td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatCurrency(pt.amount)}</td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatNumber(pt.countPos)}</td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatCurrency(pt.amountPos)}</td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatNumber(pt.countNeg)}</td>
                    <td className="border border-border px-4 py-2 text-right font-mono">{formatCurrency(pt.amountNeg)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="text-sm text-muted mt-2">
              Warning: Cash in this table is amount tendered, remember to subtract change
            </p>
          </div>
        </div>
      )}
 
      {/* By Store Breakdown */}
      {storeBreakdown.length > 0 && (
        <div className="bg-surface p-4 rounded-lg shadow mb-6">
          <div className="flex justify-between items-center mb-3">
            <h2 className="font-bold text-xl">By Store Breakdown (full detail)</h2>
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={verticalMode}
                onChange={(e) => handleVerticalModeChange(e.target.checked)}
              />
              <span>Vertical Display</span>
            </label>
          </div>
          
          {verticalMode ? (
            <VerticalStoreBreakdown stores={storeBreakdown} formatCurrency={formatCurrency} formatNumber={formatNumber} />
          ) : (
            <HorizontalStoreBreakdown stores={storeBreakdown} formatCurrency={formatCurrency} formatNumber={formatNumber} />
          )}
        </div>
      )}
 
      {/* By Lane Breakdown */}
      {laneBreakdown.length > 0 && (
        <div className="bg-surface p-4 rounded-lg shadow">
          <h2 className="font-bold text-xl mb-3">By Each Trading Lane Breakdown (full detail)</h2>
          <HorizontalLaneBreakdown lanes={laneBreakdown} formatCurrency={formatCurrency} formatNumber={formatNumber} />
        </div>
      )}
    </div>
  );
}
 
// Vertical Store Breakdown Component
function VerticalStoreBreakdown({ 
  stores, 
  formatCurrency, 
  formatNumber 
}: { 
  stores: LaneData[]; 
  formatCurrency: (n: number) => string; 
  formatNumber: (n: number) => string;
}) {
  // Collect all payment types
  const paymentTypes = new Set<number>();
  const specialPayments = new Set<number>();
  
  stores.forEach(store => {
    Object.keys(store.payments).forEach(key => {
      const payId = Number(key);
      if ([1, 5, 6, 7].includes(payId)) {
        specialPayments.add(payId);
      } else {
        paymentTypes.add(payId);
      }
    });
  });
 
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full border-collapse border border-border">
        <thead>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2 text-left">Store</th>
            <th className="border border-border px-4 py-2 text-center">Total</th>
            <th className="border border-border px-4 py-2 text-center">Net Cash</th>
            {Array.from(paymentTypes).map(payId => {
              const sampleStore = stores.find(s => s.payments[payId]);
              return (
                <th key={payId} className="border border-border px-4 py-2 text-center">
                  {sampleStore?.payments[payId]?.name || payId}
                </th>
              );
            })}
            {Array.from(specialPayments).filter(id => ![1].includes(id)).map(payId => {
              const sampleStore = stores.find(s => s.payments[payId]);
              return (
                <th key={payId} className="border border-border px-4 py-2 text-center bg-surface-2 text-xs">
                  {sampleStore?.payments[payId]?.name || payId}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {stores.map(store => (
            <tr key={store.id}>
              <td className="border border-border px-4 py-2 font-bold">{store.name}</td>
              <td className="border border-border px-4 py-2 text-right font-mono font-bold">
                {formatCurrency(store.grandTotal)}
              </td>
              <td className="border border-border px-4 py-2 text-right font-mono">
                {formatCurrency(store.bankCash)}
              </td>
              {Array.from(paymentTypes).map(payId => (
                <td key={payId} className="border border-border px-4 py-2 text-right font-mono">
                  {store.payments[payId] ? formatCurrency(store.payments[payId].value) : ''}
                </td>
              ))}
              {Array.from(specialPayments).filter(id => ![1].includes(id)).map(payId => (
                <td key={payId} className="border border-border px-4 py-2 text-right font-mono text-xs bg-surface-2">
                  {store.payments[payId] ? formatCurrency(store.payments[payId].value) : ''}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
 
// Horizontal Store Breakdown Component
function HorizontalStoreBreakdown({ 
  stores, 
  formatCurrency, 
  formatNumber 
}: { 
  stores: LaneData[]; 
  formatCurrency: (n: number) => string; 
  formatNumber: (n: number) => string;
}) {
  // Collect all payment types
  const mainPaymentTypes = new Set<number>();
  const detailPaymentTypes = new Set<number>();
  
  stores.forEach(store => {
    Object.keys(store.payments).forEach(key => {
      const payId = Number(key);
      if ([1, 5, 6, 7].includes(payId)) {
        detailPaymentTypes.add(payId);
      } else {
        mainPaymentTypes.add(payId);
      }
    });
  });
 
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full border-collapse border border-border">
        <thead>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2">&nbsp;</th>
            {stores.map(store => (
              <th key={store.id} colSpan={2} className="border border-border px-4 py-2 text-center">
                <b>{store.name}</b>
              </th>
            ))}
          </tr>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2">Tender</th>
            {stores.map(store => (
              <React.Fragment key={store.id}>
                <th className="border border-border px-2 py-2 text-right text-sm">Count</th>
                <th className="border border-border px-2 py-2 text-right text-sm">Amount</th>
              </React.Fragment>
            ))}
          </tr>
        </thead>
        <tbody>
          {/* Net Cash Row */}
          <tr>
            <td className="border border-border px-4 py-2">Net Cash</td>
            {stores.map(store => (
              <React.Fragment key={store.id}>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatNumber(store.bankCashCount)}</td>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatCurrency(store.bankCash)}</td>
              </React.Fragment>
            ))}
          </tr>
          
          {/* Main Payment Types */}
          {Array.from(mainPaymentTypes).map(payId => {
            const sampleStore = stores.find(s => s.payments[payId]);
            return (
              <tr key={payId}>
                <td className="border border-border px-4 py-2">{sampleStore?.payments[payId]?.name || payId}</td>
                {stores.map(store => (
                  <React.Fragment key={store.id}>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {store.payments[payId] ? formatNumber(store.payments[payId].count) : ''}
                    </td>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {store.payments[payId] ? formatCurrency(store.payments[payId].value) : ''}
                    </td>
                  </React.Fragment>
                ))}
              </tr>
            );
          })}
          
          {/* Totals Row */}
          <tr className="font-bold border-t-2 border-black">
            <td className="border border-border px-4 py-2">Totals</td>
            {stores.map(store => (
              <React.Fragment key={store.id}>
                <td className="border border-border px-2 py-2"></td>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatCurrency(store.grandTotal)}</td>
              </React.Fragment>
            ))}
          </tr>
          
          {/* Spacer */}
          <tr>
            <td colSpan={stores.length * 2 + 1} className="px-4 py-2 text-sm text-muted">
              <br />Actual figures summarised above
            </td>
          </tr>
          
          {/* Detail Payment Types */}
          {Array.from(detailPaymentTypes).map(payId => {
            const sampleStore = stores.find(s => s.payments[payId]);
            return (
              <tr key={payId} className="text-xs">
                <td className="border border-border px-4 py-2">{sampleStore?.payments[payId]?.name || payId}</td>
                {stores.map(store => (
                  <React.Fragment key={store.id}>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {store.payments[payId] ? formatNumber(store.payments[payId].count) : ''}
                    </td>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {store.payments[payId] ? formatCurrency(store.payments[payId].value) : ''}
                    </td>
                  </React.Fragment>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
 
// Horizontal Lane Breakdown Component
function HorizontalLaneBreakdown({ 
  lanes, 
  formatCurrency, 
  formatNumber 
}: { 
  lanes: LaneData[]; 
  formatCurrency: (n: number) => string; 
  formatNumber: (n: number) => string;
}) {
  // Collect all payment types
  const mainPaymentTypes = new Set<number>();
  const detailPaymentTypes = new Set<number>();
  
  lanes.forEach(lane => {
    Object.keys(lane.payments).forEach(key => {
      const payId = Number(key);
      if ([1, 5, 6, 7].includes(payId)) {
        detailPaymentTypes.add(payId);
      } else {
        mainPaymentTypes.add(payId);
      }
    });
  });
 
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full border-collapse border border-border">
        <thead>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2">&nbsp;</th>
            {lanes.map(lane => (
              <th key={lane.id} colSpan={2} className="border border-border px-4 py-2 text-center">
                {lane.id}
              </th>
            ))}
          </tr>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2">&nbsp;</th>
            {lanes.map(lane => (
              <th key={lane.id} colSpan={2} className="border border-border px-4 py-2 text-center">
                <b>{lane.locationName}</b>
              </th>
            ))}
          </tr>
          <tr className="bg-surface-2">
            <th className="border border-border px-4 py-2">Tender</th>
            {lanes.map(lane => (
              <React.Fragment key={lane.id}>
                <th className="border border-border px-2 py-2 text-right text-sm">Count</th>
                <th className="border border-border px-2 py-2 text-right text-sm">Amount</th>
              </React.Fragment>
            ))}
          </tr>
        </thead>
        <tbody>
          {/* Net Cash Row */}
          <tr>
            <td className="border border-border px-4 py-2">Net Cash</td>
            {lanes.map(lane => (
              <React.Fragment key={lane.id}>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatNumber(lane.bankCashCount)}</td>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatCurrency(lane.bankCash)}</td>
              </React.Fragment>
            ))}
          </tr>
          
          {/* Main Payment Types */}
          {Array.from(mainPaymentTypes).map(payId => {
            const sampleLane = lanes.find(l => l.payments[payId]);
            return (
              <tr key={payId}>
                <td className="border border-border px-4 py-2">{sampleLane?.payments[payId]?.name || payId}</td>
                {lanes.map(lane => (
                  <React.Fragment key={lane.id}>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {lane.payments[payId] ? formatNumber(lane.payments[payId].count) : ''}
                    </td>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {lane.payments[payId] ? formatCurrency(lane.payments[payId].value) : ''}
                    </td>
                  </React.Fragment>
                ))}
              </tr>
            );
          })}
          
          {/* Totals Row */}
          <tr className="font-bold border-t-2 border-black">
            <td className="border border-border px-4 py-2">Totals</td>
            {lanes.map(lane => (
              <React.Fragment key={lane.id}>
                <td className="border border-border px-2 py-2"></td>
                <td className="border border-border px-2 py-2 text-right font-mono">{formatCurrency(lane.grandTotal)}</td>
              </React.Fragment>
            ))}
          </tr>
          
          {/* Spacer */}
          <tr>
            <td colSpan={lanes.length * 2 + 1} className="px-4 py-2 text-sm text-muted">
              <br />Actual figures summarised above
            </td>
          </tr>
          
          {/* Detail Payment Types */}
          {Array.from(detailPaymentTypes).map(payId => {
            const sampleLane = lanes.find(l => l.payments[payId]);
            return (
              <tr key={payId} className="text-xs">
                <td className="border border-border px-4 py-2">{sampleLane?.payments[payId]?.name || payId}</td>
                {lanes.map(lane => (
                  <React.Fragment key={lane.id}>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {lane.payments[payId] ? formatNumber(lane.payments[payId].count) : ''}
                    </td>
                    <td className="border border-border px-2 py-2 text-right font-mono">
                      {lane.payments[payId] ? formatCurrency(lane.payments[payId].value) : ''}
                    </td>
                  </React.Fragment>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}