page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { fieldpineApi } from "@/lib/client/fieldpineApi";
 
interface PaymentRecord {
  f101: string; // DateTime
  f100: number; // Type
  f900: string; // Type Description
  f103: number; // Amount
  f104: number; // Sale ID
  f151: number; // Customer ID
  f153: string; // Customer Name
  f152: string; // Purchased item
}
 
const PAYMENT_TYPES = [
  { id: 1, name: 'Cash' },
  { id: 2, name: 'Cheque' },
  { id: 3, name: 'EFTPOS' },
  { id: 4, name: 'Verified Cheque' },
  { id: 5, name: 'EFTPOS failure' },
  { id: 6, name: 'Change' },
  { id: 7, name: 'Rounding' },
  { id: 8, name: 'Return Refund' },
  { id: 9, name: 'Credit Card' },
  { id: 10, name: 'Credit Card failure' },
  { id: 11, name: 'Sale discount' },
  { id: 20, name: 'Account' },
  { id: 21, name: 'Voucher' },
  { id: 22, name: 'Direct Debit' },
  { id: 200110, name: 'Afterpay' },
];
 
export default function PaymentListPage() {
  const [fromDate, setFromDate] = useState('');
  const [toDate, setToDate] = useState('');
  const [paymentType, setPaymentType] = useState('0');
  const [maxRows, setMaxRows] = useState('100');
  const [loading, setLoading] = useState(false);
  const [loadingMessage, setLoadingMessage] = useState('');
  const [payments, setPayments] = useState<PaymentRecord[]>([]);
  const [sortConfig, setSortConfig] = useState<{ key: keyof PaymentRecord; direction: 'asc' | 'desc' } | null>(null);
 
  // Set default dates (yesterday to today)
  useEffect(() => {
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    setFromDate(yesterday.toISOString().split('T')[0]);
    
    const today = new Date();
    setToDate(today.toISOString().split('T')[0]);
  }, []);
 
  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 formatDateTime = (dateStr: string) => {
    if (!dateStr) return '';
    try {
      const date = new Date(dateStr);
      return new Intl.DateTimeFormat('en-NZ', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).format(date);
    } catch {
      return dateStr;
    }
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value);
  };
 
  const loadPayments = async () => {
    const apiKey = sessionStorage.getItem("fieldpine_apikey");
    if (!apiKey) {
      alert("Please log in first");
      return;
    }
 
    if (!fromDate || !toDate) {
      alert("Please select date range");
      return;
    }
 
    setLoading(true);
    setPayments([]);
    setLoadingMessage('Loading...');
 
    try {
      await loadPaymentsBatch(apiKey, '1', 1);
    } catch (error) {
      console.error('Error loading payments:', error);
      alert('Error loading payments. Please try again.');
    } finally {
      setLoading(false);
      setLoadingMessage('');
    }
  };
 
  const loadPaymentsBatch = async (apiKey: string, stats47: string, batchCount: number) => {
    let predicates = `&47=${stats47}&7=150-153`;
    
    // Add payment type filter
    if (Number(paymentType) > 0) {
      predicates += `&9=f100,0,${paymentType}`;
    }
    
    // Add date filters
    const startDate = formatDateForAPI(fromDate);
    const endDate = formatDateForAPI(toDate);
    predicates += `&9=f101,4,${startDate}`;
    predicates += `&9=f101,1,${endDate}`;
    
    // Add max results
    predicates += `&5=${maxRows}`;
 
    const response = await fieldpineApi({
      endpoint: `/buck?3=retailmax.elink.sale.paymentlist${predicates}`,
      apiKey: apiKey
    });
 
    if (response?.data) {
      const data = response.data;
      
      // Check if there's more data to load (f47 indicates continuation)
      if (data.f47 && batchCount < 50) { // Safety limit of 50 batches
        setLoadingMessage(`Loading... (${batchCount})`);
        
        // Process current batch
        if (data.APP && Array.isArray(data.APP)) {
          setPayments(prev => [...prev, ...data.APP]);
        }
        
        // Load next batch after delay
        setTimeout(() => {
          loadPaymentsBatch(apiKey, data.f47, batchCount + 1);
        }, 3000);
        
        return;
      }
      
      // Final batch
      if (data.APP && Array.isArray(data.APP)) {
        setPayments(prev => [...prev, ...data.APP]);
      }
    }
  };
 
  const handleSort = (key: keyof PaymentRecord) => {
    let direction: 'asc' | 'desc' = 'asc';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
      direction = 'desc';
    }
    setSortConfig({ key, direction });
  };
 
  const getSortedPayments = () => {
    if (!sortConfig) return payments;
 
    return [...payments].sort((a, b) => {
      const aVal = a[sortConfig.key];
      const bVal = b[sortConfig.key];
 
      if (aVal === undefined || aVal === null) return 1;
      if (bVal === undefined || bVal === null) return -1;
 
      if (typeof aVal === 'number' && typeof bVal === 'number') {
        return sortConfig.direction === 'asc' ? aVal - bVal : bVal - aVal;
      }
 
      const aStr = String(aVal).toLowerCase();
      const bStr = String(bVal).toLowerCase();
      
      if (aStr < bStr) return sortConfig.direction === 'asc' ? -1 : 1;
      if (aStr > bStr) return sortConfig.direction === 'asc' ? 1 : -1;
      return 0;
    });
  };
 
  const sortedPayments = getSortedPayments();
 
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-6">Payments List</h1>
 
      {/* Filters */}
      <div className="bg-surface p-4 rounded-lg shadow mb-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div>
            <label className="block text-sm font-medium mb-1">
              From (including) <span className="text-red-600">*</span>
            </label>
            <input
              type="date"
              value={fromDate}
              onChange={(e) => setFromDate(e.target.value)}
              className="w-full border rounded px-3 py-2"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium mb-1">
              To (excluding) <span className="text-red-600">*</span>
            </label>
            <input
              type="date"
              value={toDate}
              onChange={(e) => setToDate(e.target.value)}
              className="w-full border rounded px-3 py-2"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium mb-1">Payment Type</label>
            <select
              value={paymentType}
              onChange={(e) => setPaymentType(e.target.value)}
              className="w-full border rounded px-3 py-2"
            >
              <option value="0">--Select--</option>
              {PAYMENT_TYPES.map(pt => (
                <option key={pt.id} value={pt.id}>{pt.name}</option>
              ))}
            </select>
          </div>
 
          <div>
            <label className="block text-sm font-medium mb-1">Rows</label>
            <div className="flex gap-2">
              <input
                type="number"
                value={maxRows}
                onChange={(e) => setMaxRows(e.target.value)}
                className="w-20 border rounded px-3 py-2"
                min="1"
                max="10000"
              />
              <button
                onClick={loadPayments}
                disabled={loading}
                className="bg-brand text-white px-6 py-2 rounded hover:bg-brand2 disabled:bg-muted/50 flex-1"
              >
                {loading ? 'Loading...' : 'Display'}
              </button>
            </div>
          </div>
        </div>
      </div>
 
      {/* Loading Message */}
      {loadingMessage && (
        <div className="mb-4 p-3 bg-info/10 border border-info/30 rounded flex items-center gap-2">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-info"></div>
          <span>{loadingMessage}</span>
        </div>
      )}
 
      {/* Results Table */}
      {sortedPayments.length > 0 ? (
        <div className="bg-surface rounded-lg shadow overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-border">
              <thead className="bg-surface-2">
                <tr>
                  <th 
                    onClick={() => handleSort('f101')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    DateTime {sortConfig?.key === 'f101' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f100')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Type {sortConfig?.key === 'f100' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f900')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Type Description {sortConfig?.key === 'f900' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f103')}
                    className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Amount {sortConfig?.key === 'f103' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f104')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Sale {sortConfig?.key === 'f104' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f153')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Customer {sortConfig?.key === 'f153' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f152')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface-2/80"
                  >
                    Purchased (main item) {sortConfig?.key === 'f152' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-surface divide-y divide-border">
                {sortedPayments.map((payment, idx) => (
                  <tr key={idx} className="hover:bg-surface-2">
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {formatDateTime(payment.f101)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {payment.f100}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {payment.f900}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text text-right font-mono">
                      {formatCurrency(payment.f103 || 0)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      {payment.f104 ? (
                        <a
                          href={`/report/pos/sales/fieldpine/singlesale.htm?sid=${payment.f104}`}
                          target="_blank"
                          className="text-brand hover:underline"
                        >
                          {payment.f104}
                        </a>
                      ) : (
                        ''
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      {payment.f151 && payment.f153 ? (
                        <a
                          href={`/report/pos/customer/fieldpine/customer_single_overview.htm?cid=${payment.f151}`}
                          target="_blank"
                          className="text-brand hover:underline"
                        >
                          {payment.f153}
                        </a>
                      ) : (
                        payment.f153 || ''
                      )}
                    </td>
                    <td className="px-6 py-4 text-sm text-text">
                      {payment.f152}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          
          {/* Footer */}
          <div className="bg-surface-2 px-6 py-3 border-t border-border">
            <p className="text-sm text-text">
              Showing {sortedPayments.length} payment{sortedPayments.length !== 1 ? 's' : ''}
            </p>
          </div>
        </div>
      ) : (
        !loading && (
          <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
            No payments found. Select date range and click Display to load payments.
          </div>
        )
      )}
    </div>
  );
}