page.tsx

Go to the documentation of this file.

'use client';
 
import { use, useEffect, useState } from 'react';
 
interface SaleItem {
  f200: number; // Pid
  f202: number; // Qty
  f205: number; // Total Price
  f212: string; // Description
  f213: string; // PLU
  f303: number; // Total Inc Tax
  f304: number; // Total Ex Tax
  f305: number; // Tax
}
 
interface Payment {
  f200: number; // Type
  f201: number; // Amount
  f204: string; // Time
  f900: string; // Description
}
 
interface SaleDetail {
  f100: number; // Sale ID
  f101: string; // End Date
  f102: number; // Total
  f108: number; // Status/Phase
  f109: string; // Start Date
  f117: number; // Customer ID
  f125: number; // Location ID
  f130: string; // External ID
  f133: string; // Comments
  LOCN?: Array<{ f101: string }>; // Location name
  STAF?: Array<{ f101: string }>; // Staff name
  CUST?: Array<{ f101: string; Name?: string }>; // Customer
  LINE?: SaleItem[];
  PAYM?: Payment[];
  DELI?: Array<{
    f300?: string;
    f302?: string; // Instructions
    f303?: string; // Phone
    f304?: string; // Name
    f305?: string; // Email
    f420?: string; // Address
    f421?: string; // City
    f422?: string; // Country
    f423?: string; // Postcode
  }>;
}
 
export default function SaleDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const [sale, setSale] = useState<SaleDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [editMode, setEditMode] = useState(false);
  const [saving, setSaving] = useState(false);
  const [locations, setLocations] = useState<Array<{ f100: number; f101: string }>>([]);
  const [editData, setEditData] = useState({
    f7102: 0, // Store
    f7120: '', // Picking comments
    f7123: '', // Customer comments
    f108: 200  // Status
  });
  const [editedItems, setEditedItems] = useState<any[]>([]);
  const [showAddItem, setShowAddItem] = useState(false);
  const [productSearch, setProductSearch] = useState('');
  const [searchIn, setSearchIn] = useState<'all' | 'name' | 'barcode' | 'pid'>('all');
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const [searching, setSearching] = useState(false);
 
  useEffect(() => {
    loadSale();
    loadLocations();
  }, [id]);
 
  useEffect(() => {
    const timer = setTimeout(() => {
      if (productSearch) {
        searchProducts(productSearch);
      }
    }, 300);
    
    return () => clearTimeout(timer);
  }, [productSearch]);
 
  const loadLocations = async () => {
    try {
      const response = await fetch('/api/v1/locations');
      if (response.ok) {
        const data = await response.json();
        setLocations(data.data || []);
      }
    } catch (error) {
      console.error('Failed to load locations:', error);
    }
  };
 
  const loadSale = async () => {
    setLoading(true);
    setError(null);
    try {
      console.log(`[Sale Detail Page] Fetching sale ${id}`);
      const response = await fetch(`/api/v1/sales/${id}/details`);
      console.log(`[Sale Detail Page] Response status:`, response.status, response.statusText);
      
      const text = await response.text();
      console.log(`[Sale Detail Page] Response text:`, text);
      
      let data;
      try {
        data = JSON.parse(text);
      } catch (e) {
        console.error('[Sale Detail Page] Failed to parse JSON:', e);
        setError('Invalid response from server');
        return;
      }
      
      console.log('[Sale Detail Page] Parsed data:', data);
      
      if (response.ok && data.success) {
        setSale(data.data);
        // Initialize edit data with current values
        setEditData({
          f7102: data.data.f7102 || 0,
          f7120: data.data.f7120 || '',
          f7123: data.data.f7123 || '',
          f108: data.data.f108 || 200
        });
        // Initialize line items for editing
        setEditedItems(data.data.BIG1 || []);
      } else {
        setError(data.error || 'Failed to load sale');
        console.error('API error:', data);
      }
    } catch (error) {
      console.error('Failed to load sale:', error);
      setError('Network error loading sale');
    } finally {
      setLoading(false);
    }
  };
 
  const updateLineItem = (index: number, qty: number) => {
    setEditedItems(prev => {
      const newItems = [...prev];
      newItems[index] = { ...newItems[index], f101: qty };
      return newItems;
    });
  };
 
  const removeLineItem = (index: number) => {
    if (confirm('Remove this item from the sale?')) {
      setEditedItems(prev => prev.filter((_, i) => i !== index));
    }
  };
 
  const searchProducts = async (query: string) => {
    if (query.length < 2) {
      setSearchResults([]);
      return;
    }
    
    setSearching(true);
    try {
      const term = query.trim();
      
      // Try using EnglishQuery parameter which Fieldpine OpenAPI uses for text search
      const response = await fetch(`/api/v1/openapi/products?EnglishQuery=${encodeURIComponent(term)}&limit=50`);
      
      console.log('[Sale Search] Searching for:', term);
      console.log('[Sale Search] Response status:', response.status);
      
      if (response.ok) {
        const data = await response.json();
        console.log('[Sale Search] Full API response:', data);
        
        // Handle OpenAPI response structure - can be nested differently based on query
        let products = data?.data;
        
        // If data.data is not an array, try going deeper
        if (!Array.isArray(products)) {
          console.log('[Sale Search] data.data is not array, checking data.data.data:', products?.data);
          products = products?.data;
        }
        
        // If still not array, try data.data.data.Product
        if (!Array.isArray(products)) {
          console.log('[Sale Search] Checking data.data.data.Product:', products?.Product);
          products = products?.Product;
        }
        
        // If still not array, default to empty
        if (!Array.isArray(products)) {
          console.log('[Sale Search] Could not find products array, defaulting to empty');
          products = [];
        }
        
        console.log('[Sale Search] Final products array:', products);
        console.log('[Sale Search] Products found:', products.length);
        
        if (Array.isArray(products) && products.length > 0) {
          console.log('[Sale Search] First product sample:', products[0]);
        }
        
        // Filter results based on search type if not 'all'
        let filtered = Array.isArray(products) ? products : [];
        if (searchIn !== 'all' && filtered.length > 0) {
          const originalCount = filtered.length;
          filtered = filtered.filter((p: any) => {
            switch (searchIn) {
              case 'name':
                return (p.Description || p.Name || '').toLowerCase().includes(term.toLowerCase());
              case 'barcode':
                return (p.Plu || p.PLU || p.Barcode || '').toLowerCase().includes(term.toLowerCase());
              case 'pid':
                return p.Pid === Number(term);
              default:
                return true;
            }
          });
          console.log('[Sale Search] Filtered from', originalCount, 'to', filtered.length, 'items');
        }
        
        setSearchResults(filtered.slice(0, 20));
      } else {
        const errorText = await response.text();
        console.error('[Sale Search] API error:', response.status, errorText);
        setSearchResults([]);
      }
    } catch (error) {
      console.error('[Sale Search] Exception:', error);
      setSearchResults([]);
    } finally {
      setSearching(false);
    }
  };
 
  const addProductToSale = (product: any) => {
    const newItem = {
      f100: product.Pid, // Product ID
      f101: 1, // Quantity
      f102: product.Price || product.SellPrice || '0', // Price
      f103: product.Description || product.Name || 'Unknown Product' // Description
    };
    
    setEditedItems(prev => [...prev, newItem]);
    setShowAddItem(false);
    setProductSearch('');
    setSearchResults([]);
  };
 
  const handleSave = async () => {
    setSaving(true);
    try {
      const updatePayload = {
        ...editData,
        lineItems: editedItems // Include edited line items
      };
      
      const response = await fetch(`/api/v1/sales/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatePayload)
      });
 
      if (response.ok) {
        // Update local sale state with edited items
        setSale(prev => prev ? { ...prev, ...editData, BIG1: editedItems } : null);
        setEditMode(false);
      } else {
        alert('Failed to save changes');
      }
    } catch (error) {
      console.error('Failed to save:', error);
      alert('Error saving changes');
    } finally {
      setSaving(false);
    }
  };
 
  const formatDate = (dateStr: string | undefined) => {
    if (!dateStr) return '';
    try {
      if (dateStr.includes('|')) {
        const parts = dateStr.split('|');
        const year = parseInt(parts[0]);
        const month = parseInt(parts[1]);
        const day = parseInt(parts[2]);
        const hour = parseInt(parts[3] || '0');
        const minute = parseInt(parts[4] || '0');
        
        const date = new Date(year, month - 1, day, hour, minute);
        const monthName = date.toLocaleDateString('en-US', { month: 'short' });
        const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        
        return `${day}-${monthName}-${year} ${timeStr}`;
      }
      
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return dateStr;
      
      const day = date.getDate();
      const month = date.toLocaleDateString('en-US', { month: 'short' });
      const year = date.getFullYear();
      const time = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
      
      return `${day}-${month}-${year} ${time}`;
    } catch {
      return dateStr || '';
    }
  };
 
  const getStatusText = (status: number) => {
    switch (status) {
      case 0: return 'Active';
      case 1: return 'Complete';
      case 5: return 'Parked';
      case 8: return 'Internal/WriteOff';
      case 200: return 'Picking';
      case 202: return 'Awaiting Picking';
      case 10000: return 'Deleted';
      case 10001: return 'Quotation';
      case 10002: return 'Deleted';
      default: return `Status ${status}`;
    }
  };
 
  const fieldpineUrl = `https://iig.cwanz.online/report/pos/sales/fieldpine/SingleSale.htm?sid=${id}`;
 
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00946b] mx-auto"></div>
          <p className="mt-4 text-muted">Loading sale details...</p>
        </div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6">
          <h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Sale</h2>
          <p className="text-red-600">{error}</p>
        </div>
      </div>
    );
  }
 
  if (!sale) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center py-12">
          <p className="text-muted">Sale not found</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-text">Sale #{sale.f100}</h1>
          <p className="mt-1 text-sm text-muted">
            {sale.LOCN?.[0]?.f101 || `Location# ${sale.f125}`} ({formatDate(sale.f101)})
          </p>
        </div>
        <div className="flex gap-2">
          {editMode ? (
            <>
              <button
                onClick={() => setEditMode(false)}
                className="px-4 py-2 bg-surface-2 text-text rounded-md hover:bg-surface-2 transition-colors"
                disabled={saving}
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007a59] transition-colors disabled:opacity-50"
              >
                {saving ? 'Saving...' : 'Save Changes'}
              </button>
            </>
          ) : (
            <button
              onClick={() => setEditMode(true)}
              className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007a59] transition-colors"
            >
              Edit Sale
            </button>
          )}
        </div>
      </div>
 
      {/* Info Blocks */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-surface rounded-lg shadow p-4">
          <div className="text-sm font-medium text-muted">Started</div>
          <div className="mt-1 text-lg text-text">{formatDate(sale.f109)}</div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4">
          <div className="text-sm font-medium text-muted">Status</div>
          {editMode ? (
            <select
              value={editData.f108}
              onChange={(e) => setEditData(prev => ({ ...prev, f108: Number(e.target.value) }))}
              className="mt-1 block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
            >
              <option value={200}>Awaiting Picking</option>
              <option value={202}>Picking</option>
              <option value={1}>Complete</option>
              <option value={5}>Parked</option>
            </select>
          ) : (
            <div className="mt-1 text-lg font-semibold text-text">{getStatusText(sale.f108)}</div>
          )}
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4">
          <div className="text-sm font-medium text-muted">Teller</div>
          <div className="mt-1 text-lg text-text">{sale.STAF?.[0]?.f101 || <i>None</i>}</div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-4">
          <div className="text-sm font-medium text-muted">Customer</div>
          <div className="mt-1 text-lg text-text">
            {sale.f117 !== 0 ? (
              <a href={`/pages/customers/${sale.f117}`} className="text-[#00946b] hover:underline">
                {sale.CUST?.[0]?.Name || sale.CUST?.[0]?.f101 || `#${sale.f117}`}
              </a>
            ) : (
              <i>Cash Sale</i>
            )}
          </div>
        </div>
      </div>
 
      {/* Editable Fields */}
      {editMode && (
        <div className="bg-info/10 border border-info/30 rounded-lg p-6 mb-6">
          <h3 className="text-lg font-semibold text-brand mb-4">Edit Sale Details</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">Assigned Store</label>
              <select
                value={editData.f7102}
                onChange={(e) => setEditData(prev => ({ ...prev, f7102: Number(e.target.value) }))}
                className="block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
              >
                <option value={0}>Not Assigned</option>
                {locations.map(loc => (
                  <option key={loc.f100} value={loc.f100}>{loc.f101}</option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">Picking Comments</label>
              <input
                type="text"
                value={editData.f7120}
                onChange={(e) => setEditData(prev => ({ ...prev, f7120: e.target.value }))}
                placeholder="Internal picking notes..."
                className="block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
              />
            </div>
 
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-text mb-1">Customer Comments</label>
              <textarea
                value={editData.f7123}
                onChange={(e) => setEditData(prev => ({ ...prev, f7123: e.target.value }))}
                placeholder="Customer-visible comments..."
                rows={3}
                className="block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
              />
            </div>
          </div>
        </div>
      )}
 
      {/* External ID & Comments */}
      {(sale.f130 || sale.f133) && (
        <div className="bg-surface rounded-lg shadow p-4 mb-6">
          {sale.f130 && (
            <div className="mb-2">
              <span className="font-medium text-text">External ID:</span>{' '}
              <span className="text-text">{sale.f130}</span>
            </div>
          )}
          {sale.f133 && (
            <div>
              <span className="font-medium text-text">Comments:</span>{' '}
              <span className="text-brand">{sale.f133}</span>
            </div>
          )}
        </div>
      )}
 
      {/* Delivery Details */}
      {sale.DELI && sale.DELI.length > 0 && (
        <div className="bg-surface rounded-lg shadow p-6 mb-6">
          <h2 className="text-xl font-bold text-text mb-4">Delivery Details</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div className="text-sm font-medium text-muted">Address</div>
              <div className="mt-1 text-text">
                {sale.DELI[0].f300 && <div>{sale.DELI[0].f300}</div>}
                {sale.DELI[0].f423 && <div>{sale.DELI[0].f423}</div>}
                {sale.DELI[0].f421 && sale.DELI[0].f420 && (
                  <div>{sale.DELI[0].f421} {sale.DELI[0].f420}</div>
                )}
                {sale.DELI[0].f422 && <div>{sale.DELI[0].f422}</div>}
              </div>
            </div>
            <div>
              {sale.DELI[0].f304 && (
                <div className="mb-3">
                  <div className="text-sm font-medium text-muted">Name</div>
                  <div className="mt-1 text-text">{sale.DELI[0].f304}</div>
                </div>
              )}
              {sale.DELI[0].f303 && (
                <div className="mb-3">
                  <div className="text-sm font-medium text-muted">Phone</div>
                  <div className="mt-1">
                    <a href={`tel:${sale.DELI[0].f303}`} className="text-[#00946b] hover:underline">
                      {sale.DELI[0].f303}
                    </a>
                  </div>
                </div>
              )}
              {sale.DELI[0].f305 && (
                <div className="mb-3">
                  <div className="text-sm font-medium text-muted">Email</div>
                  <div className="mt-1">
                    <a href={`mailto:${sale.DELI[0].f305}`} className="text-[#00946b] hover:underline">
                      {sale.DELI[0].f305}
                    </a>
                  </div>
                </div>
              )}
              {sale.DELI[0].f302 && (
                <div>
                  <div className="text-sm font-medium text-muted">Instructions</div>
                  <div className="mt-1 text-text italic">{sale.DELI[0].f302}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
 
      {/* Items Purchased */}
      <div className="bg-surface rounded-lg shadow mb-6">
        <div className="px-6 py-4 border-b border-border flex items-center justify-between">
          <h2 className="text-xl font-bold text-text">Items Purchased</h2>
          {editMode && (
            <button
              onClick={() => setShowAddItem(!showAddItem)}
              className="px-3 py-1 bg-[#00946b] text-white text-sm rounded-md hover:bg-[#007a59] transition-colors"
            >
              {showAddItem ? 'Cancel' : '+ Add Item'}
            </button>
          )}
        </div>
 
        {/* Add Item Search */}
        {editMode && showAddItem && (
          <div className="px-6 py-4 bg-info/10 border-b border-info/30">
            <div className="flex gap-4 mb-3">
              <div className="flex-1">
                <label className="block text-sm font-medium text-text mb-2">Search for product</label>
                <input
                  type="text"
                  value={productSearch}
                  onChange={(e) => setProductSearch(e.target.value)}
                  placeholder="Type to search..."
                  className="block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
                  autoFocus
                />
              </div>
              <div className="w-48">
                <label className="block text-sm font-medium text-text mb-2">Search in</label>
                <select
                  value={searchIn}
                  onChange={(e) => setSearchIn(e.target.value as any)}
                  className="block w-full rounded-md border-border shadow-sm focus:border-[#00946b] focus:ring-[#00946b] text-sm"
                >
                  <option value="all">All Fields</option>
                  <option value="name">Name</option>
                  <option value="barcode">Barcode/PLU</option>
                  <option value="pid">Product ID</option>
                </select>
              </div>
            </div>
            {searching && (
              <div className="mt-2 text-sm text-muted">Searching...</div>
            )}
            {searchResults.length > 0 && (
              <div className="mt-2 max-h-96 overflow-y-auto border border-border rounded-md bg-surface shadow-lg">
                <div className="grid grid-cols-1 divide-y divide-gray-100">
                  {searchResults.map((product) => (
                    <button
                      key={product.Pid}
                      onClick={() => addProductToSale(product)}
                      className="w-full px-4 py-3 text-left hover:bg-info/10 transition-colors"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="font-medium text-text">{product.Description || product.Name}</div>
                          <div className="text-sm text-muted mt-1">
                            <span className="inline-block mr-4">ID: {product.Pid}</span>
                            {product.Plu && <span className="inline-block mr-4">PLU: {product.Plu}</span>}
                            {product.StockLevel !== undefined && (
                              <span className={`inline-block ${product.StockLevel > 0 ? 'text-green-600' : 'text-red-600'}`}>
                                Stock: {product.StockLevel}
                              </span>
                            )}
                          </div>
                        </div>
                        <div className="text-right ml-4">
                          <div className="text-lg font-semibold text-text">
                            ${parseFloat(product.Price || product.SellPrice || '0').toFixed(2)}
                          </div>
                        </div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
            {productSearch.length >= 2 && searchResults.length === 0 && !searching && (
              <div className="mt-2 p-4 bg-surface border border-border rounded-md text-center text-sm text-muted">
                No products found. Try a different search term or filter.
              </div>
            )}
          </div>
        )}
 
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-surface-2">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">Pid#</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">Description</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">Qty</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider">Price</th>
                {editMode && <th className="px-6 py-3 text-center text-xs font-medium text-muted uppercase tracking-wider">Actions</th>}
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-gray-200">
              {(editMode ? editedItems : sale.LINE || []).length > 0 ? (
                (editMode ? editedItems : sale.LINE || []).map((item: any, idx: number) => (
                  <tr key={idx} className={idx % 2 === 0 ? 'bg-surface' : 'bg-surface-2'}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      <a 
                        href={`/pages/products/${item.f100}`} 
                        className="text-[#00946b] hover:underline"
                      >
                        {item.f100}
                      </a>
                    </td>
                    <td className="px-6 py-4 text-sm text-text">{item.f103}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {editMode ? (
                        <input
                          type="number"
                          value={item.f101}
                          onChange={(e) => updateLineItem(idx, Number(e.target.value))}
                          min="0"
                          step="1"
                          className="w-20 rounded border-border text-sm focus:border-[#00946b] focus:ring-[#00946b]"
                        />
                      ) : (
                        item.f101
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text text-right">
                      ${parseFloat(item.f102 || '0').toFixed(2)}
                    </td>
                    {editMode && (
                      <td className="px-6 py-4 whitespace-nowrap text-center">
                        <button
                          onClick={() => removeLineItem(idx)}
                          className="text-red-600 hover:text-red-800 text-sm"
                        >
                          Remove
                        </button>
                      </td>
                    )}
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={editMode ? 5 : 4} className="px-6 py-4 text-center text-sm text-muted">
                    No items
                  </td>
                </tr>
              )}
            </tbody>
            <tfoot className="bg-surface-2">
              <tr>
                <td colSpan={3} className="px-6 py-4 text-right text-sm font-semibold text-text">
                  Total:
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-text text-right">
                  ${sale.f102?.toFixed(2)}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
 
      {/* Payments */}
      <div className="bg-surface rounded-lg shadow">
        <div className="px-6 py-4 border-b border-border">
          <h2 className="text-xl font-bold text-text">Payment</h2>
        </div>
        <div className="px-6 py-4">
          <div className="text-sm text-muted mb-2">Status: {getStatusText(sale.f108)}</div>
          <div className="text-2xl font-bold text-text">${sale.f102?.toFixed(2)}</div>
          {sale.f108 === 200 && (
            <div className="mt-2 inline-block px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">
              Awaiting Picking
            </div>
          )}
          {sale.f108 === 1 && (
            <div className="mt-2 inline-block px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">
              Complete
            </div>
          )}
        </div>
      </div>
    </div>
  );
}