page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { apiClient } from '@/lib/client/apiClient';
import { Icon } from '@/contexts/IconContext';
 
interface Invoice {
  sid: number;
  externalId?: string;
  completedDt?: string;
  total?: number;
  phase?: number;
  customerId?: string;
  customerName?: string;
}
 
export default function InvoicesPage() {
  const router = useRouter();
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [editingInvoice, setEditingInvoice] = useState<Invoice | null>(null);
 
  useEffect(() => {
    loadInvoices();
  }, []);
 
  async function loadInvoices() {
    try {
      setLoading(true);
      setError(null);
      
      console.log('[Invoices] Fetching sales/invoices...');
      
      // Fetch sales/invoices from ELINK endpoint
      const response = await fetch('/api/v1/elink/sales?limit=100');
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      
      console.log('[Invoices] API Response:', result);
      
      if (result.success && result.data) {
        // Map ELINK fields to our interface
        // ELINK sale fields: f100=SaleID, f101=CreatedDate, f102=Total, f109=CompletedDate, f117=Phase, f125=Classification
        const mappedInvoices = Array.isArray(result.data) ? result.data.map((sale: any) => ({
          sid: sale.f100 || 0,
          externalId: sale.f500 || null,
          completedDt: sale.f109 || sale.f101 || null,
          total: parseFloat(sale.f102 || 0),
          phase: parseInt(sale.f117 || 0),
          customerId: sale.f20 || null,
          customerName: sale.customerName || null
        })) : [];
        
        console.log(`[Invoices] Loaded ${mappedInvoices.length} invoices`);
        console.log('[Invoices] Sample mapped invoice:', mappedInvoices[0]);
        setInvoices(mappedInvoices);
      } else {
        console.warn('[Invoices] No data in response:', result);
        setInvoices([]);
        if (result.error) {
          setError(result.error);
        }
      }
    } catch (err) {
      console.error('[Invoices] Failed to load:', err);
      setError(`Failed to load sales history: ${err instanceof Error ? err.message : 'Unknown error'}`);
      setInvoices([]);
    } finally {
      setLoading(false);
    }
  }
 
  async function deleteInvoice(invoice: Invoice) {
    if (!confirm(`Are you sure you want to void/delete sale ${invoice.externalId || invoice.sid}?`)) {
      return;
    }
 
    try {
      const response = await fetch(`/api/v1/elink/sales/${invoice.sid}`, {
        method: 'DELETE'
      });
      const result = await response.json();
 
      if (result.success) {
        alert('✅ Sale voided successfully');
        loadInvoices();
      } else {
        alert(`❌ Failed to void invoice: ${result.error || result.details}`);
      }
    } catch (error) {
      console.error('Delete failed:', error);
      alert(`❌ Failed to void invoice: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }
 
  function formatDate(dateStr?: string) {
    if (!dateStr) return 'N/A';
    try {
      // Handle ELINK pipe-delimited format: "YYYY|M|DD|HH|MM|SS||"
      if (dateStr.includes('|')) {
        const parts = dateStr.split('|').filter(p => p !== '');
        if (parts.length >= 6) {
          const [year, month, day, hour, minute, second] = parts.map(p => parseInt(p));
          const date = new Date(year, month - 1, day, hour, minute, second);
          return date.toLocaleString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
        }
      }
      // Fallback to standard date parsing
      return new Date(dateStr).toLocaleString();
    } catch {
      return dateStr;
    }
  }
 
  const filteredInvoices = invoices.filter(inv => {
    if (!searchTerm) return true;
    const search = searchTerm.toLowerCase();
    return (
      inv.externalId?.toLowerCase().includes(search) ||
      inv.sid?.toString().includes(search) ||
      inv.customerName?.toLowerCase().includes(search) ||
      inv.customerId?.toLowerCase().includes(search)
    );
  });
 
  return (
    <div className="p-8 h-full overflow-y-auto bg-bg">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold text-text">Sales History</h1>
          <a
            href="/sales"
            className="px-4 py-2 bg-brand text-surface rounded-lg hover:bg-brand2 font-semibold inline-flex items-center gap-2"
          >
            <Icon name="add" size={20} /> New Sale
          </a>
        </div>
 
        {/* Search and Filters */}
        <div className="bg-surface shadow-lg rounded-lg p-6 mb-6">
          <div className="flex gap-4">
            <input
              type="text"
              placeholder="Search by Sale ID, Customer, or Amount..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="flex-1 px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
            />
            <button
              onClick={loadInvoices}
              className="px-6 py-2 bg-surface-2 text-text rounded-lg hover:bg-surface font-semibold flex items-center gap-2"
            >
              <Icon name="refresh" size={18} /> Refresh
            </button>
          </div>
        </div>
 
        {/* Invoices Table */}
        <div className="bg-surface rounded-lg shadow-sm border border-border">
          {loading ? (
            <div className="p-12 text-center text-muted">
              Loading sales history...
            </div>
          ) : error ? (
            <div className="p-12 text-center">
              <div className="text-danger mb-4">{error}</div>
              <button
                onClick={loadInvoices}
                className="px-4 py-2 bg-brand text-surface rounded hover:bg-brand2"
              >
                Try Again
              </button>
            </div>
          ) : filteredInvoices.length === 0 ? (
            <div className="p-12 text-center">
              <div className="text-6xl mb-4"><Icon name="receipt_long" size={72} /></div>
              <h3 className="text-xl font-semibold text-text mb-2">
                {searchTerm ? 'No matching sales' : 'No sales yet'}
              </h3>
              <p className="text-muted mb-6">
                {searchTerm
                  ? 'Try a different search term'
                  : 'Process your first sale to get started'}
              </p>
              {!searchTerm && (
                <button
                  onClick={() => window.location.href = '/sales'}
                  className="px-6 py-3 bg-brand text-surface rounded-lg hover:bg-brand2 font-semibold"
                >
                  Process First Sale
                </button>
              )}
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-[var(--brand)] text-surface">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      Sale ID
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      External ID
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      Date
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      Customer
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      Total
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {filteredInvoices.map((invoice) => (
                    <tr key={invoice.sid} className="hover:bg-surface-2">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                        #{invoice.sid}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                        {invoice.externalId || '-'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                        {formatDate(invoice.completedDt)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                        {invoice.customerName || invoice.customerId || 'Guest'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-text">
                        ${invoice.total?.toFixed(2) || '0.00'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs font-semibold rounded ${
                            invoice.phase === 1
                              ? 'bg-success/20 text-success'
                              : invoice.phase === 200
                              ? 'bg-warn/20 text-warn'
                              : 'bg-surface-2 text-muted'
                          }`}
                        >
                          {invoice.phase === 1
                            ? 'Complete'
                            : invoice.phase === 200
                            ? 'Pending'
                            : `Phase ${invoice.phase || 'Unknown'}`}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-center">
                        <button
                          onClick={() => router.push(`/pages/invoices/${invoice.sid}`)}
                          className="px-3 py-1 bg-info text-surface rounded hover:bg-info/80 text-sm font-medium flex items-center gap-1"
                        >
                          <Icon name="visibility" size={14} /> View
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
 
        {/* Edit Invoice Modal */}
        {editingInvoice && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-surface rounded-lg p-8 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
              <div className="flex justify-between items-center mb-6">
                <h2 className="text-2xl font-bold text-text">
                  Edit Sale #{editingInvoice.sid}
                </h2>
                <button
                  onClick={() => setEditingInvoice(null)}
                  className="text-muted hover:text-text text-2xl"
                >
                  ×
                </button>
              </div>
              
              <form onSubmit={async (e) => {
                e.preventDefault();
                const formData = new FormData(e.currentTarget);
                
                const updatedInvoice = {
                  sid: editingInvoice.sid,
                  externalId: formData.get('externalId') as string,
                  total: parseFloat(formData.get('total') as string),
                  phase: parseInt(formData.get('phase') as string),
                  customerId: formData.get('customerId') as string,
                  customerName: formData.get('customerName') as string,
                };
                
                try {
                  const response = await fetch(`/api/v1/elink/sales/${editingInvoice.sid}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(updatedInvoice)
                  });
                  
                  const result = await response.json();
                  
                  if (result.success) {
                    alert('✅ Sale updated successfully');
                    setEditingInvoice(null);
                    loadInvoices();
                  } else {
                    alert(`❌ Failed to update sale: ${result.error}`);
                  }
                } catch (error) {
                  console.error('Update failed:', error);
                  alert(`❌ Failed to update sale: ${error instanceof Error ? error.message : 'Unknown error'}`);
                }
              }}>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      Invoice ID (Read-only)
                    </label>
                    <input
                      type="text"
                      value={editingInvoice.sid}
                      disabled
                      className="w-full px-4 py-2 bg-surface-2 border border-border rounded-lg text-muted"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      External ID / Receipt Number
                    </label>
                    <input
                      type="text"
                      name="externalId"
                      defaultValue={editingInvoice.externalId || ''}
                      className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      Customer Name
                    </label>
                    <input
                      type="text"
                      name="customerName"
                      defaultValue={editingInvoice.customerName || ''}
                      className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      Customer ID
                    </label>
                    <input
                      type="text"
                      name="customerId"
                      defaultValue={editingInvoice.customerId || ''}
                      className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      Total Amount
                    </label>
                    <input
                      type="number"
                      name="total"
                      step="0.01"
                      defaultValue={editingInvoice.total || 0}
                      className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-muted mb-2">
                      Status / Phase
                    </label>
                    <select
                      name="phase"
                      defaultValue={editingInvoice.phase || 0}
                      className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                    >
                      <option value="0">Draft</option>
                      <option value="1">Complete</option>
                      <option value="200">Pending</option>
                      <option value="300">Void</option>
                    </select>
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end gap-3">
                  <button
                    type="button"
                    onClick={() => setEditingInvoice(null)}
                    className="px-6 py-2 bg-surface-2 text-text rounded hover:bg-surface"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-6 py-2 bg-brand text-surface rounded hover:bg-brand2 flex items-center gap-2"
                  >
                    <Icon name="save" size={18} /> Save Changes
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}