page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Icon } from '@/contexts/IconContext';
 
interface LineItem {
  f105?: number; // Sale ID
  f200?: number; // Product ID
  f202?: number; // Quantity
  f203?: number; // Line total
  f205?: number; // Unit price
  f212?: string; // Product description
}
 
interface SaleDetails {
  f100?: number; // Sale ID
  f101?: string; // Created date
  f102?: number; // Total ex tax
  f103?: number; // Total inc tax
  f109?: string; // Completed date
  f117?: number; // Phase
  LINE?: LineItem[];
  LOCN?: any[];
  PAYM?: any[];
}
 
export default function InvoiceDetailPage() {
  const params = useParams();
  const router = useRouter();
  const saleId = params.id as string;
  
  const [saleDetails, setSaleDetails] = useState<SaleDetails | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    if (saleId) {
      loadSaleDetails(parseInt(saleId));
    }
  }, [saleId]);
 
  async function loadSaleDetails(id: number) {
    try {
      setLoading(true);
      setError(null);
      
      console.log('[Sale Details] Fetching details for sale:', id);
      
      const response = await fetch(`/api/v1/elink/sales/${id}`);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      
      if (result.success && result.data) {
        console.log('[Sale Details] Loaded:', result.data);
        setSaleDetails(result.data);
      } else {
        throw new Error(result.error || 'Failed to load sale details');
      }
    } catch (err) {
      console.error('[Sale Details] Failed to load:', err);
      setError(`Failed to load sale details: ${err instanceof Error ? err.message : 'Unknown error'}`);
    } finally {
      setLoading(false);
    }
  }
 
  async function deleteSale() {
    if (!confirm(`Are you sure you want to void/delete sale #${saleId}?`)) {
      return;
    }
 
    try {
      const response = await fetch(`/api/v1/elink/sales/${saleId}`, {
        method: 'DELETE'
      });
      const result = await response.json();
 
      if (result.success) {
        alert('✅ Sale voided successfully');
        router.push('/pages/invoices');
      } else {
        alert(`❌ Failed to void sale: ${result.error || result.details}`);
      }
    } catch (error) {
      console.error('Delete failed:', error);
      alert(`❌ Failed to void sale: ${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;
    }
  }
 
  if (loading) {
    return (
      <div className="p-8 h-full overflow-y-auto bg-bg">
        <div className="max-w-7xl mx-auto">
          <div className="text-center py-16">
            <Icon name="hourglass_empty" size={48} className="mx-auto text-muted" />
            <p className="mt-4 text-xl text-muted">Loading sale details...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (error || !saleDetails) {
    return (
      <div className="p-8 h-full overflow-y-auto bg-bg">
        <div className="max-w-7xl mx-auto">
          <button
            onClick={() => router.push('/pages/invoices')}
            className="mb-6 px-4 py-2 bg-surface text-text rounded-lg hover:bg-surface-2 inline-flex items-center gap-2"
          >
            <Icon name="arrow_back" size={20} /> Back to Sales History
          </button>
          
          <div className="text-center py-16">
            <Icon name="error" size={48} className="mx-auto text-danger" />
            <p className="mt-4 text-xl text-text">Failed to load sale details</p>
            <p className="mt-2 text-muted">{error}</p>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-8 h-full overflow-y-auto bg-bg">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex justify-between items-center mb-6">
          <div className="flex items-center gap-4">
            <button
              onClick={() => router.push('/pages/invoices')}
              className="px-4 py-2 bg-surface text-text rounded-lg hover:bg-surface-2 inline-flex items-center gap-2"
            >
              <Icon name="arrow_back" size={20} /> Back
            </button>
            <h1 className="text-3xl font-bold text-text">Sale #{saleDetails.f100}</h1>
          </div>
          <div className="flex gap-3">
            <button
              onClick={() => window.print()}
              className="px-4 py-2 bg-info text-surface rounded-lg hover:bg-info/80 inline-flex items-center gap-2"
            >
              <Icon name="print" size={20} /> Print
            </button>
            <button
              onClick={deleteSale}
              className="px-4 py-2 bg-danger text-surface rounded-lg hover:bg-danger/80 inline-flex items-center gap-2"
            >
              <Icon name="delete" size={20} /> Void Sale
            </button>
          </div>
        </div>
 
        {/* Sale Details Card */}
        <div className="bg-surface rounded-lg shadow-sm p-8 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Sale ID
              </label>
              <div className="text-2xl font-bold text-text">#{saleDetails.f100}</div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Created Date
              </label>
              <div className="text-lg text-text">{formatDate(saleDetails.f101)}</div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Completed Date
              </label>
              <div className="text-lg text-text">{formatDate(saleDetails.f109)}</div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Total (Ex Tax)
              </label>
              <div className="text-2xl font-semibold text-text">
                ${saleDetails.f102?.toFixed(2) || '0.00'}
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Total (Inc Tax)
              </label>
              <div className="text-2xl font-bold text-brand">
                ${saleDetails.f103?.toFixed(2) || '0.00'}
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-muted mb-2">
                Status
              </label>
              <div>
                <span
                  className={`px-4 py-2 text-sm font-semibold rounded inline-block ${
                    saleDetails.f117 === 1
                      ? 'bg-success/20 text-success'
                      : saleDetails.f117 === 200
                      ? 'bg-warn/20 text-warn'
                      : 'bg-surface-2 text-muted'
                  }`}
                >
                  {saleDetails.f117 === 1
                    ? 'Complete'
                    : saleDetails.f117 === 200
                    ? 'Pending'
                    : `Phase ${saleDetails.f117 || 'Unknown'}`}
                </span>
              </div>
            </div>
          </div>
        </div>
 
        {/* Line Items */}
        {saleDetails.LINE && saleDetails.LINE.length > 0 && (
          <div className="bg-surface rounded-lg shadow-sm p-8 mb-6">
            <h2 className="text-2xl font-bold text-text mb-6">Line Items</h2>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-surface-2">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Product
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider">
                      Quantity
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider">
                      Unit Price
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider">
                      Line Total
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {saleDetails.LINE.map((line, idx) => (
                    <tr key={idx} className="hover:bg-surface-2">
                      <td className="px-6 py-4">
                        <div className="text-sm font-medium text-text">
                          {line.f212 || 'Unknown Product'}
                        </div>
                        <div className="text-xs text-muted">
                          Product ID: {line.f200 || 'N/A'}
                        </div>
                      </td>
                      <td className="px-6 py-4 text-right text-sm text-text">
                        {line.f202 || 0}
                      </td>
                      <td className="px-6 py-4 text-right text-sm text-text">
                        ${line.f205?.toFixed(2) || '0.00'}
                      </td>
                      <td className="px-6 py-4 text-right text-sm font-semibold text-text">
                        ${line.f203?.toFixed(2) || '0.00'}
                      </td>
                    </tr>
                  ))}
                  <tr className="bg-surface-2 font-bold">
                    <td colSpan={3} className="px-6 py-4 text-right text-text">
                      Total:
                    </td>
                    <td className="px-6 py-4 text-right text-lg text-brand">
                      ${saleDetails.LINE.reduce((sum, line) => sum + (line.f203 || 0), 0).toFixed(2)}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}
 
        {/* Payments */}
        {saleDetails.PAYM && saleDetails.PAYM.length > 0 && (
          <div className="bg-surface rounded-lg shadow-sm p-8 mb-6">
            <h2 className="text-2xl font-bold text-text mb-6">Payments</h2>
            <div className="space-y-4">
              {saleDetails.PAYM.map((payment, idx) => (
                <div key={idx} className="flex justify-between items-center p-4 bg-surface-2 rounded-lg">
                  <div>
                    <div className="font-medium text-text">
                      {payment.f900 || payment.f200 || 'Payment Method'}
                    </div>
                    <div className="text-sm text-muted">
                      Payment ID: {payment.f100 || 'N/A'}
                    </div>
                  </div>
                  <div className="text-xl font-semibold text-text">
                    ${payment.f201?.toFixed(2) || '0.00'}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
 
        {/* Location Info */}
        {saleDetails.LOCN && saleDetails.LOCN.length > 0 && (
          <div className="bg-surface rounded-lg shadow-sm p-8">
            <h2 className="text-2xl font-bold text-text mb-6">Location</h2>
            <div className="space-y-4">
              {saleDetails.LOCN.map((location, idx) => (
                <div key={idx} className="p-4 bg-surface-2 rounded-lg">
                  <div className="font-medium text-text">
                    {location.f101 || 'Unknown Location'}
                  </div>
                  <div className="text-sm text-muted">
                    Location ID: {location.f100 || 'N/A'}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}