page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
export default function PurchaseOrdersPage() {
  const [apiKey, setApiKey] = useState("");
  const [retailerId, setRetailerId] = useState("");
  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderHeader[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedPO, setSelectedPO] = useState<PurchaseOrderHeader | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [sendViaEmail, setSendViaEmail] = useState(false);
  const [otherEmail, setOtherEmail] = useState("");
  const [additionalNotes, setAdditionalNotes] = useState("");
  const [showEmailOptions, setShowEmailOptions] = useState(false);
 
  useEffect(() => {
    // Load API credentials from sessionStorage when page mounts
    const storedApiKey = sessionStorage.getItem("fieldpine_apikey") || "";
    const storedRetailer = sessionStorage.getItem("fieldpine_retailer") || "";
    setApiKey(storedApiKey);
    setRetailerId(storedRetailer);
    
    // Load purchase orders
    loadPurchaseOrders();
  }, []);
 
  const loadPurchaseOrders = async () => {
    setLoading(true);
    try {
      const response = await apiClient.getPurchaseOrders();
      if (response.success && response.data) {
        const apiData = response.data as any;
        const poData = apiData?.data?.PurchaseOrders || [];
        setPurchaseOrders(poData.map((po: any) => ({
          f100: Number(po.Poid) || 0,
          f114: Number(po.State) || 0,
          f1114: po.StateName || 'Unknown',
          f1102: po.SupplierName || '',
          f1105: po.Location || '',
          f106: po.Created || '',
          _Sent: po.SentIndicator || '',
          _Recv: po.ReceivedIndicator || '',
          f108: po.FirstArrival || '',
          f104: po.Completed || '',
          f141: po.SupplierComments || '',
          f112: po.InternalComments || '',
          f121: po.SupplierRef || '',
          f125: Number(po.LineCount) || 0,
          f126: Number(po.ItemCount) || 0,
          f130: Number(po.TotalCost) || 0,
          f131: po.DisplayDate || '',
          f132: po.AutoSendDate || '',
          f115: po.SupplierMessage || '',
          f1203: po.Email || '',
          f137: po.LastEmailDate || '',
          f138: po.EmailAcknowledged || '',
          lines: po.Lines || []
        })));
      }
    } catch (error) {
      console.error('Error loading purchase orders:', error);
    } finally {
      setLoading(false);
    }
  };
 
  function openPODetails(po: PurchaseOrderHeader) {
    setSelectedPO(po);
    setShowModal(true);
  }
 
  function closeModal() {
    setShowModal(false);
    setSelectedPO(null);
    setSendViaEmail(false);
    setOtherEmail("");
    setAdditionalNotes("");
    setShowEmailOptions(false);
    setAdditionalNotes("");
    setShowEmailOptions(false);
  }
  // Fieldpine Purchase Order Header fields (no network calls yet)
  interface PurchaseOrderHeader {
    f100: number; // Poid
    f114: number; // State code
    f1114?: string; // State (text)
    f1102: string; // Supplier
    f1105: string; // Ships To
    f106?: string; // Created
    f119?: string; // Physical Key
    _Sent?: string; // Tx indicator
    _Recv?: string; // Rx indicator
    f108?: string; // First Arrival
    f104?: string; // Completed
    f141?: string; // Comments From Supplier
    f112?: string; // Internal Comments
    f121?: string; // Supplier Ref
    f125?: number; // LineCount
    f126?: number; // ItemCount
    f130?: number; // TotalCost
    f131?: string; // Display Date
    f132?: string; // Auto Send Date
    f115?: string; // Comments To Supplier
    f1203?: string; // Orders Email
    f137?: string; // Last Email Date
    f138?: string; // Email Acknowledged Date
    lines?: PurchaseOrderLine[]; // Line items
  }
 
  interface PurchaseOrderLine {
    f1100: number; // POLineId
    f01: string; // Product Code
    f02: string; // Product Description
    f1107: number; // Qty Ordered
    f1109: number; // Qty Received
    f1110: number; // Unit Cost
    f1111: number; // Extended Cost
    f1108?: string; // Expected Date
  }
 
  const sample: PurchaseOrderHeader[] = [
    {
      f100: 4,
      f114: 2,
      f1114: "Pre-Auth",
      f1102: "Independent Ink Group Pty Ltd",
      f1105: "Sunbury Agency",
      f106: "4-Jun-2025 12:17",
      _Sent: ".",
      _Recv: "",
      f108: "",
      f104: "",
      f141: "",
      f112: "",
      f121: "",
      f125: 12,
      f126: 113,
      f130: 2038,
      f131: "",
      f132: "",
      f115: "",
      f1203: "orders@iig.com.au",
      lines: [
        { f1100: 1, f01: "HP564-BK", f02: "HP 564 Black Ink Cartridge", f1107: 20, f1109: 0, f1110: 18.50, f1111: 370.00, f1108: "10-Jun-2025" },
        { f1100: 2, f01: "HP564-C", f02: "HP 564 Cyan Ink Cartridge", f1107: 15, f1109: 0, f1110: 16.80, f1111: 252.00, f1108: "10-Jun-2025" },
        { f1100: 3, f01: "HP564-M", f02: "HP 564 Magenta Ink Cartridge", f1107: 15, f1109: 0, f1110: 16.80, f1111: 252.00, f1108: "10-Jun-2025" },
        { f1100: 4, f01: "HP564-Y", f02: "HP 564 Yellow Ink Cartridge", f1107: 15, f1109: 0, f1110: 16.80, f1111: 252.00, f1108: "10-Jun-2025" },
        { f1100: 5, f01: "EP774-BK", f02: "Epson 774 Black Ink Bottle", f1107: 10, f1109: 0, f1110: 22.00, f1111: 220.00, f1108: "10-Jun-2025" },
        { f1100: 6, f01: "EP774-C", f02: "Epson 774 Cyan Ink Bottle", f1107: 8, f1109: 0, f1110: 19.50, f1111: 156.00, f1108: "10-Jun-2025" },
        { f1100: 7, f01: "EP774-M", f02: "Epson 774 Magenta Ink Bottle", f1107: 8, f1109: 0, f1110: 19.50, f1111: 156.00, f1108: "10-Jun-2025" },
        { f1100: 8, f01: "EP774-Y", f02: "Epson 774 Yellow Ink Bottle", f1107: 8, f1109: 0, f1110: 19.50, f1111: 156.00, f1108: "10-Jun-2025" },
      ],
    },
    {
      f100: 2,
      f114: 2,
      f1114: "Pre-Auth",
      f1102: "Ausjet Inkjet and Laser Supplies",
      f1105: "Cowra Agency",
      f106: "25-Mar-2025 13:38",
      _Sent: ".",
      _Recv: "",
      f108: "",
      f104: "",
      f141: "",
      f112: "",
      f121: "",
      f125: 8,
      f126: 45,
      f130: 880,
      f131: "",
      f132: "",
      f115: "",
      f1203: "orders@ausjet.com.au",
      lines: [
        { f1100: 1, f01: "CN045-BK", f02: "Canon 045 Black Toner", f1107: 5, f1109: 0, f1110: 45.00, f1111: 225.00, f1108: "2-Apr-2025" },
        { f1100: 2, f01: "CN045-C", f02: "Canon 045 Cyan Toner", f1107: 5, f1109: 0, f1110: 42.00, f1111: 210.00, f1108: "2-Apr-2025" },
        { f1100: 3, f01: "CN045-M", f02: "Canon 045 Magenta Toner", f1107: 5, f1109: 0, f1110: 42.00, f1111: 210.00, f1108: "2-Apr-2025" },
        { f1100: 4, f01: "CN045-Y", f02: "Canon 045 Yellow Toner", f1107: 5, f1109: 0, f1110: 42.00, f1111: 210.00, f1108: "2-Apr-2025" },
      ],
    },
  ];
 
  const states = [
    { value: -1, label: "Active" },
    { value: -2, label: "Any" },
    { value: -3, label: "Any not Finished" },
    { value: 1, label: "Waiting" },
    { value: 2, label: "Pre Auth" },
    { value: 4, label: "Queued" },
    { value: 17, label: "Rejected" },
    { value: 18, label: "Cancelled" },
    { value: -4, label: "Completed" },
  ];
 
  function handleBulkManage() {
    // Fieldpine bulk operations logic
    const action = prompt(
      `Bulk Manage ${purchaseOrders.length} Purchase Orders\n\n` +
      'This menu provides advanced options for bulk management.\n' +
      'Use caution as actions performed are instant and non-reversible\n\n' +
      'Available operations:\n' +
      '  1 = Cancel All (sets f114=18)\n' +
      '  2 = Complete All (sets f114=3)\n' +
      '\n' +
      'Enter 1, 2, or cancel:'
    );
 
    if (action === '1') {
      // Bulk Cancel - Fieldpine DATI packet
      if (!confirm(`Really cancel all ${purchaseOrders.length} purchase orders currently showing?\n\nThis cannot be undone.`)) return;
      
      let processed = 0;
      purchaseOrders.forEach((po) => {
        // In production: POST /gnap/dati with DATI packet
        const xPacket = {
          f8_s: 'retailmax.elink.purchaseorder.edit',
          f11_B: 'I',
          f100_E: po.f100,
          f114_E: '18'
        };
        console.log(`Cancelling PO# ${po.f100}`, xPacket);
        processed++;
      });
      
      alert(`Requests to cancel ${processed} orders have been sent.\nThe server may take a few minutes to process them all.`);
      
    } else if (action === '2') {
      // Bulk Complete - Fieldpine DATI packet
      if (!confirm(`Mark all ${purchaseOrders.length} purchase orders as completed?\n\nThis cannot be undone.`)) return;
      
      let processed = 0;
      purchaseOrders.forEach((po) => {
        const xPacket = {
          f8_s: 'retailmax.elink.purchaseorder.edit',
          f11_B: 'I',
          f100_E: po.f100,
          f114_E: '3'
        };
        console.log(`Completing PO# ${po.f100}`, xPacket);
        processed++;
      });
      
      alert(`Requests to complete ${processed} orders have been sent.\nThe server may take a few minutes to process them all.`);
    }
  }
  
  function handleUploadDocuments() {
    // Navigate to document upload queue page
    window.location.href = '/purchase-orders/upload-document-queue';
  }
  
  function handleCreateOrder() {
    window.location.href = '/purchase-orders/create';
  }
  
  function handleDropShipping() {
    alert('Drop Shipping Order\n\nCreate orders where items are sent directly from supplier to customer:\n\n• Select customer\n• Choose products\n• Add delivery address\n• Set delivery instructions\n\nComing soon!');
    // window.location.href = '/purchase-orders/create/dropship';
  }
 
  function handleViewOrder() {
    if (selectedPO) {
      // Generate HTML document and open in new window
      const html = generateOrderHTML(selectedPO);
      const newWindow = window.open('', '_blank');
      if (newWindow) {
        newWindow.document.write(html);
        newWindow.document.close();
      }
    }
  }
 
  function handleViewPDF() {
    if (selectedPO) {
      // Generate HTML and trigger print dialog (user can save as PDF)
      const html = generateOrderHTML(selectedPO, true);
      const printWindow = window.open('', '_blank');
      if (printWindow) {
        printWindow.document.write(html);
        printWindow.document.close();
        printWindow.onload = () => {
          printWindow.print();
        };
      }
    }
  }
 
  function generateOrderHTML(po: PurchaseOrderHeader, forPrint = false) {
    return `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Purchase Order #${po.f100}</title>
        <style>
          body { font-family: Arial, sans-serif; margin: 40px; color: #333; }
          .header { border-bottom: 3px solid #00483d; padding-bottom: 20px; margin-bottom: 30px; }
          .header h1 { color: #00483d; margin: 0; }
          .header .po-number { font-size: 24px; color: #666; }
          .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
          .info-item { margin-bottom: 10px; }
          .info-label { font-weight: bold; color: #666; font-size: 14px; }
          .info-value { font-size: 16px; margin-top: 5px; }
          table { width: 100%; border-collapse: collapse; margin: 20px 0; }
          thead { background-color: #00483d; color: white; }
          th { padding: 12px; text-align: left; font-weight: 600; }
          td { padding: 10px; border-bottom: 1px solid #e6eef6; }
          tbody tr:hover { background-color: #f8f9fa; }
          .totals { margin-top: 30px; text-align: right; }
          .totals-row { display: flex; justify-content: flex-end; gap: 20px; margin: 10px 0; }
          .totals-label { font-weight: bold; min-width: 150px; }
          .comments { margin-top: 30px; }
          .comments-section { margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; }
          .comments-title { font-weight: bold; margin-bottom: 10px; color: #00483d; }
          .text-right { text-align: right; }
          .text-center { text-align: center; }
          ${forPrint ? '@media print { body { margin: 20px; } .no-print { display: none; } }' : ''}
        </style>
      </head>
      <body>
        <div class="header">
          <h1>Purchase Order</h1>
          <div class="po-number">PO# ${po.f100}</div>
        </div>
        
        <div class="info-grid">
          <div>
            <div class="info-item">
              <div class="info-label">Supplier</div>
              <div class="info-value">${po.f1102}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Ships To</div>
              <div class="info-value">${po.f1105}</div>
            </div>
          </div>
          <div>
            <div class="info-item">
              <div class="info-label">Created</div>
              <div class="info-value">${po.f106}</div>
            </div>
            <div class="info-item">
              <div class="info-label">State</div>
              <div class="info-value">${po.f1114}</div>
            </div>
          </div>
        </div>
 
        <h2 style="color: #00483d; margin-top: 40px;">Line Items</h2>
        <table>
          <thead>
            <tr>
              <th>Product Code</th>
              <th>Description</th>
              <th class="text-center">Qty Ordered</th>
              <th class="text-right">Unit Cost</th>
              <th class="text-right">Extended Cost</th>
              <th>Expected Date</th>
            </tr>
          </thead>
          <tbody>
            ${po.lines?.map(line => `
              <tr>
                <td style="font-family: monospace; color: #00483d;">${line.f01}</td>
                <td>${line.f02}</td>
                <td class="text-center">${line.f1107}</td>
                <td class="text-right">$${line.f1110.toFixed(2)}</td>
                <td class="text-right" style="font-weight: 600;">$${line.f1111.toFixed(2)}</td>
                <td>${line.f1108 || '—'}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
 
        <div class="totals">
          <div class="totals-row">
            <div class="totals-label">Line Count:</div>
            <div>${po.f125}</div>
          </div>
          <div class="totals-row">
            <div class="totals-label">Item Count:</div>
            <div>${po.f126}</div>
          </div>
          <div class="totals-row" style="font-size: 18px; font-weight: bold; color: #00483d; margin-top: 10px;">
            <div class="totals-label">Total Cost:</div>
            <div>$${po.f130?.toLocaleString()}</div>
          </div>
        </div>
 
        ${(po.f115 || po.f112) ? `
          <div class="comments">
            ${po.f115 ? `
              <div class="comments-section">
                <div class="comments-title">Supplier Comments</div>
                <div>${po.f115}</div>
              </div>
            ` : ''}
            ${po.f112 ? `
              <div class="comments-section">
                <div class="comments-title">Internal Comments</div>
                <div>${po.f112}</div>
              </div>
            ` : ''}
          </div>
        ` : ''}
 
        ${forPrint ? '' : '<div class="no-print" style="margin-top: 40px; text-align: center;"><button onclick="window.print()" style="padding: 10px 20px; background: #00483d; color: white; border: none; border-radius: 5px; cursor: pointer;">Print / Save as PDF</button></div>'}
      </body>
      </html>
    `;
  }
 
  function handleCopyClipboard() {
    if (selectedPO) {
      // Format similar to Fieldpine's meetu4po format
      const lines = [
        `Purchase Order #${selectedPO.f100}`,
        `Supplier: ${selectedPO.f1102}`,
        `Ships To: ${selectedPO.f1105}`,
        `Created: ${selectedPO.f106}`,
        `State: ${selectedPO.f1114}`,
        `Line Count: ${selectedPO.f125}`,
        `Item Count: ${selectedPO.f126}`,
        `Total Cost: $${selectedPO.f130?.toLocaleString()}`,
        ``,
        `Line Items:`,
      ];
 
      if (selectedPO.lines) {
        selectedPO.lines.forEach(line => {
          lines.push(`  ${line.f01} - ${line.f02} - Qty: ${line.f1107} @ $${line.f1110.toFixed(2)} = $${line.f1111.toFixed(2)}`);
        });
      }
 
      const text = lines.join('\n');
      
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          // Visual feedback - briefly change button text
          const btn = document.activeElement as HTMLButtonElement;
          if (btn && btn.textContent) {
            const originalText = btn.textContent;
            btn.textContent = '✓ Copied!';
            btn.style.backgroundColor = '#10b981';
            setTimeout(() => {
              btn.textContent = originalText;
              btn.style.backgroundColor = '';
            }, 2000);
          }
        }).catch(() => {
          // Fallback method
          const ta = document.createElement("textarea");
          ta.value = text;
          ta.style.position = 'fixed';
          ta.style.opacity = '0';
          document.body.appendChild(ta);
          ta.select();
          try {
            document.execCommand('copy');
            alert("✓ Copied to clipboard!");
          } catch (err) {
            alert("✗ Failed to copy to clipboard");
          }
          document.body.removeChild(ta);
        });
      }
    }
  }
 
  function handleReceive() {
    if (!selectedPO) return;
    
    // Fieldpine logic: Direct navigation without prompt (as per original code)
    let url = `/purchase-orders/receive?poid=${selectedPO.f100}`;
    if (selectedPO.f119 && selectedPO.f119.length > 8) {
      url += `&physkey=${selectedPO.f119}`;
    }
    
    // In production: window.location.href = url;
    alert(`Opening receive page for PO# ${selectedPO.f100}\n\nURL: ${url}\n\nNote: Receive page navigation is immediate (no confirmation prompt as per Fieldpine standard)`);
    console.log('Navigate to receive page:', url);
  }
 
  function handleCancelPO() {
    if (!selectedPO) return;
    
    if (confirm(`Really cancel this purchase order?\n\nPO# ${selectedPO.f100} - ${selectedPO.f1102}`)) {
      // Fieldpine DATI packet structure
      const xPacket = {
        DATI: {
          f8_s: 'retailmax.elink.purchaseorder.edit',
          f11_B: 'I',
          f100_E: selectedPO.f100,
          f114_E: '18'
        }
      };
      
      // API call: POST to /gnap/dati
      console.log('Cancel PO DATI packet:', xPacket);
      
      // Update local state
      selectedPO.f114 = 18;
      selectedPO.f1114 = 'Cancelled';
      
      // Remove from grid and re-render
      setPurchaseOrders(prev => prev.filter(po => po.f100 !== selectedPO.f100));
      
      alert('Purchase order has been cancelled');
      closeModal();
    }
  }
 
  function handleSendEmail() {
    if (!selectedPO) return;
 
    const em = sendViaEmail;
    const edi = false; // Would come from checkbox
    const manual = false;
 
    if (!em && !edi && !manual) {
      alert('Please select at least one method of sending the order to the supplier');
      return;
    }
 
    if (em) {
      const targetEmail = otherEmail.trim() || selectedPO.f1203;
      if (!targetEmail) {
        alert('No email address available for this supplier');
        return;
      }
 
      // Fieldpine paramsyms structure
      const paramsyms = {
        addnotes: additionalNotes
      };
 
      // In production: POST /GNAP/DATI with:
      const apiPacket = {
        f8_s: 'retailmax.elink.purchaseorder.action',
        f11_B: 'I',
        f100_E: selectedPO.f100,
        f101_E: '1',  // email to supplier
        f110_s: otherEmail || undefined,  // override email if specified
        f300_s: JSON.stringify(paramsyms)  // additional parameters
      };
      
      console.log('Email PO API packet:', apiPacket);
 
      // Create mailto link as fallback
      const subject = encodeURIComponent(`Purchase Order #${selectedPO.f100} from ${selectedPO.f1105}`);
      
      // Create professional email body
      let body = `Dear ${selectedPO.f1102},\n\n`;
      body += `Please find our purchase order details below:\n\n`;
      body += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      body += `PURCHASE ORDER #${selectedPO.f100}\n`;
      body += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n`;
      
      body += `Store: ${selectedPO.f1105}\n`;
      body += `Order Date: ${selectedPO.f106}\n`;
      body += `Status: ${selectedPO.f1114}\n\n`;
      
      if (additionalNotes) {
        body += `ADDITIONAL NOTES:\n${additionalNotes}\n\n`;
      }
      
      body += `ORDER SUMMARY:\n`;
      body += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      body += `Total Lines: ${selectedPO.f125}\n`;
      body += `Total Items: ${selectedPO.f126}\n`;
      body += `Total Cost: $${selectedPO.f130?.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\n\n`;
      
      body += `LINE ITEMS:\n`;
      body += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      selectedPO.lines?.forEach((line, index) => {
        body += `${index + 1}. ${line.f01}\n`;
        body += `   ${line.f02}\n`;
        body += `   Quantity: ${line.f1107} @ $${line.f1110.toFixed(2)} each\n`;
        body += `   Line Total: $${line.f1111.toFixed(2)}\n`;
        if (line.f1108) body += `   Expected: ${line.f1108}\n`;
        body += `\n`;
      });
      
      if (selectedPO.f115) {
        body += `\nSUPPLIER COMMENTS:\n${selectedPO.f115}\n\n`;
      }
      
      body += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
      body += `\nThank you for your service.\n\n`;
      body += `Best regards,\n${selectedPO.f1105}\n\n`;
      body += `---\nThis purchase order was generated by EverydayPOS\n`;
      body += `PO Reference: ${selectedPO.f100}`;
      
      const mailtoLink = `mailto:${targetEmail}?subject=${subject}&body=${encodeURIComponent(body)}`;
      window.location.href = mailtoLink;
      
      // Show success message
      alert(`✓ Email client opened\n\nPO #${selectedPO.f100} ready to send to ${targetEmail}\n\nIn production, this will be sent automatically via the Fieldpine API.`);
      
      // Mark as sent with current timestamp
      const now = new Date().toISOString();
      selectedPO.f137 = now;
      
      // Update PO state to "Waiting" if it was "Pre-Auth"
      if (selectedPO.f114 === 2) {
        selectedPO.f114 = 1;
        selectedPO.f1114 = "Waiting";
      }
      
      // Update in purchaseOrders array
      setPurchaseOrders(prev => prev.map(po => {
        if (po.f100 === selectedPO.f100) {
          return {
            ...po,
            f137: now,
            f114: selectedPO.f114 === 2 ? 1 : po.f114,
            f1114: selectedPO.f114 === 2 ? "Waiting" : po.f1114
          };
        }
        return po;
      }));
      
      closeModal();
    }
  }
 
  return (
    <div className="min-h-screen bg-bg p-4 md:p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-brand mb-2">Purchase Orders</h1>
          <p className="text-muted">Manage and view supplier purchase orders</p>
        </div>
 
        <div className="card mb-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-text mb-2">From (including)</label>
              <input type="date" className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand" />
            </div>
            <div>
              <label className="block text-sm font-medium text-text mb-2">To (excluding)</label>
              <input type="date" className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand" />
            </div>
            <div>
              <label className="block text-sm font-medium text-text mb-2">State</label>
              <select className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand">
                {states.map((s) => (
                  <option key={s.value} value={s.value}>{s.label}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div>
              <label className="block text-sm font-medium text-text mb-2">Search</label>
              <input type="text" placeholder="keywords" className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-text mb-2">Supplier</label>
              <input type="text" placeholder="supplier name" className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand" />
            </div>
          </div>
 
          {/* Action Buttons */}
          <div className="mt-6 pt-6 border-t border-border flex flex-wrap gap-3">
            <button onClick={handleBulkManage} className="px-4 py-2 text-white rounded-lg hover:opacity-80 text-sm font-medium cursor-pointer transition-all bg-brand">
              Bulk Manage
            </button>
            <button onClick={handleUploadDocuments} className="px-4 py-2 text-white rounded-lg hover:opacity-80 text-sm font-medium cursor-pointer transition-all bg-brand">
              Upload Documents
            </button>
            <button onClick={handleCreateOrder} className="px-4 py-2 text-white rounded-lg hover:opacity-80 text-sm font-medium cursor-pointer transition-all shadow-sm font-semibold bg-brand">
              Create New Order
            </button>
            <button onClick={handleDropShipping} className="px-4 py-2 text-white rounded-lg hover:opacity-80 text-sm font-medium cursor-pointer transition-all bg-brand">
              Drop Shipping Order
            </button>
          </div>
        </div>
 
        <div className="card overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left py-3 px-4 font-semibold text-text">Poid#</th>
                <th className="text-left py-3 px-4 font-semibold text-text">State</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Supplier</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Ships To</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Created</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Tx</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Rx</th>
                <th className="text-left py-3 px-4 font-semibold text-text">First Arrival</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Completed</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Supplier Ref</th>
                <th className="text-right py-3 px-4 font-semibold text-text">Total Cost</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Display Date</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Auto Send Date</th>
                <th className="text-right py-3 px-4 font-semibold text-text">LineCount</th>
                <th className="text-right py-3 px-4 font-semibold text-text">ItemCount</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Comments From Supplier</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Comments To Supplier</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Internal Comments</th>
                <th className="text-left py-3 px-4 font-semibold text-text">Orders Email</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr>
                  <td colSpan={19} className="py-8 text-center text-muted">
                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand"></div>
                    <p className="mt-2">Loading purchase orders...</p>
                  </td>
                </tr>
              ) : purchaseOrders.length === 0 ? (
                <tr>
                  <td colSpan={19} className="py-8 text-center text-muted">
                    No purchase orders found
                  </td>
                </tr>
              ) : purchaseOrders.map((row, idx) => (
                <tr
                  key={row.f100}
                  onClick={() => openPODetails(row)}
                  className={`border-b border-border hover:bg-surface-2 transition-colors cursor-pointer ${
                    idx % 2 === 0 ? "bg-white" : "bg-gray-50"
                  }`}
                >
                  <td className="py-3 px-4 text-brand font-medium">{row.f100}</td>
                  <td className="py-3 px-4">{row.f1114}</td>
                  <td className="py-3 px-4">{row.f1102}</td>
                  <td className="py-3 px-4">{row.f1105}</td>
                  <td className="py-3 px-4">{row.f106}</td>
                  <td className="py-3 px-4">{row._Sent}</td>
                  <td className="py-3 px-4">{row._Recv}</td>
                  <td className="py-3 px-4">{row.f108}</td>
                  <td className="py-3 px-4">{row.f104}</td>
                  <td className="py-3 px-4">{row.f121}</td>
                  <td className="py-3 px-4 text-right">{row.f130?.toLocaleString(undefined, { style: "currency", currency: "USD" }).replace("USD", "$")}</td>
                  <td className="py-3 px-4">{row.f131}</td>
                  <td className="py-3 px-4">{row.f132}</td>
                  <td className="py-3 px-4 text-right">{row.f125}</td>
                  <td className="py-3 px-4 text-right">{row.f126}</td>
                  <td className="py-3 px-4">{row.f141}</td>
                  <td className="py-3 px-4">{row.f115}</td>
                  <td className="py-3 px-4">{row.f112}</td>
                  <td className="py-3 px-4">{row.f1203}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
 
        {/* Purchase Order Detail Modal */}
        {showModal && selectedPO && (
          <div className="fixed inset-0 bg-black/30 z-50 flex items-start justify-center p-4 overflow-y-auto" onClick={closeModal}>
            <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full my-8" onClick={(e) => e.stopPropagation()}>
              <div className="border-b border-border p-4 flex items-center justify-between">
                <h2 className="text-xl font-bold text-brand">{selectedPO.f1102} <span className="text-sm text-muted">(PO# {selectedPO.f100})</span></h2>
                <button onClick={closeModal} className="px-3 py-1 text-sm border border-border rounded hover:bg-surface cursor-pointer">Close</button>
              </div>
 
              <div className="p-6 space-y-6">
                {/* Actions */}
                <div className="flex flex-wrap gap-2 pb-4 border-b border-border">
                  <button onClick={handleViewOrder} className="px-3 py-2 text-sm border border-border rounded-lg hover:bg-surface cursor-pointer">View Order</button>
                  <button onClick={handleViewPDF} className="px-3 py-2 text-sm border border-border rounded-lg hover:bg-surface cursor-pointer">View PDF</button>
                  <button onClick={handleCopyClipboard} className="px-3 py-2 text-sm border border-border rounded-lg hover:bg-surface cursor-pointer">Copy Clipboard</button>
                  <button onClick={handleReceive} className="px-3 py-2 text-sm bg-success text-white rounded-lg hover:opacity-90 cursor-pointer">Receive</button>
                  <button onClick={handleCancelPO} className="px-3 py-2 text-sm bg-danger text-white rounded-lg hover:opacity-90 cursor-pointer">Cancel</button>
                </div>
                {/* Email Sending Section */}
                <div className="border border-border rounded-lg p-4 bg-gray-50">
                  <div className="flex items-center justify-between mb-3">
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input 
                        type="checkbox" 
                        checked={sendViaEmail}
                        onChange={(e) => setSendViaEmail(e.target.checked)}
                        disabled={!selectedPO.f1203 && !otherEmail}
                        className="w-4 h-4 text-brand rounded focus:ring-2 focus:ring-brand"
                      />
                      <span className="font-medium">Email To Supplier</span>
                    </label>
                    {selectedPO.f1203 && (
                      <button 
                        onClick={() => setShowEmailOptions(!showEmailOptions)}
                        className="text-sm text-muted hover:text-brand cursor-pointer"
                      >
                        {showEmailOptions ? '▲' : '▼'} Options
                      </button>
                    )}
                  </div>
                  
                  {selectedPO.f1203 && (
                    <div className="text-sm text-muted mb-3">
                      Default: {selectedPO.f1203}
                    </div>
                  )}
 
                  {showEmailOptions && (
                    <div className="space-y-3 mb-3">
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">
                          Other Email (override)
                        </label>
                        <input 
                          type="email"
                          value={otherEmail}
                          onChange={(e) => {
                            setOtherEmail(e.target.value);
                            if (e.target.value.length > 3) {
                              setSendViaEmail(true);
                            }
                          }}
                          placeholder="Enter alternative email address"
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand text-sm"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">
                          Additional Notes
                        </label>
                        <textarea 
                          value={additionalNotes}
                          onChange={(e) => setAdditionalNotes(e.target.value)}
                          rows={3}
                          placeholder="Enter any extra message to be added to the email"
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand text-sm"
                        />
                        <p className="text-xs text-muted mt-1 italic">
                          Additional notes require the template to support showing them
                        </p>
                      </div>
                    </div>
                  )}
 
                  <button 
                    onClick={handleSendEmail}
                    disabled={!sendViaEmail}
                    className="w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed cursor-pointer font-medium"
                  >
                    » » Send Now « «
                  </button>
                </div>
 
                {/* Details */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm text-muted mb-1">Ships To</p>
                    <p className="font-medium">{selectedPO.f1105}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted mb-1">Created</p>
                    <p className="font-medium">{selectedPO.f106}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted mb-1">State</p>
                    <p className="font-medium">{selectedPO.f1114}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted mb-1">Email Status</p>
                    <p className="font-medium">
                      {selectedPO.f138 ? (
                        <span className="text-green-600 font-semibold">✓ Sent & Confirmed</span>
                      ) : selectedPO.f137 ? (
                        <span className="text-blue-600 font-semibold">✓ Sent</span>
                      ) : selectedPO.f132 ? (
                        <span className="text-orange-600">⏰ Queued</span>
                      ) : (
                        <span className="text-gray-500">Not Sent</span>
                      )}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-muted mb-1">Supplier Ref</p>
                    <p className="font-medium">{selectedPO.f121 || "—"}</p>
                  </div>
                  {selectedPO.f137 && (
                    <div>
                      <p className="text-sm text-muted mb-1">Last Emailed</p>
                      <p className="font-medium text-sm">{new Date(selectedPO.f137).toLocaleString()}</p>
                    </div>
                  )}
                </div>
 
                {/* Counts */}
                <div className="flex gap-6 text-sm">
                  <div className="px-4 py-2 bg-gray-50 rounded">
                    <span className="text-muted">Line Count: </span>
                    <span className="font-semibold">{selectedPO.f125}</span>
                  </div>
                  <div className="px-4 py-2 bg-gray-50 rounded">
                    <span className="text-muted">Item Count: </span>
                    <span className="font-semibold">{selectedPO.f126}</span>
                  </div>
                  <div className="px-4 py-2 bg-gray-50 rounded">
                    <span className="text-muted">Total Cost: </span>
                    <span className="font-semibold">${selectedPO.f130?.toLocaleString()}</span>
                  </div>
                </div>
 
                {/* Line Items Table */}
                <div>
                  <h3 className="text-sm font-semibold mb-2">Line Items</h3>
                  <div className="border border-border rounded overflow-hidden">
                    <table className="w-full text-sm">
                      <thead className="bg-gray-50 border-b border-border">
                        <tr>
                          <th className="text-left px-3 py-2 font-medium text-text">Product Code</th>
                          <th className="text-left px-3 py-2 font-medium text-text">Description</th>
                          <th className="text-right px-3 py-2 font-medium text-text">Qty Ordered</th>
                          <th className="text-right px-3 py-2 font-medium text-text">Qty Received</th>
                          <th className="text-right px-3 py-2 font-medium text-text">Unit Cost</th>
                          <th className="text-right px-3 py-2 font-medium text-text">Extended Cost</th>
                          <th className="text-left px-3 py-2 font-medium text-text">Expected Date</th>
                        </tr>
                      </thead>
                      <tbody>
                        {selectedPO.lines && selectedPO.lines.length > 0 ? (
                          selectedPO.lines.map((line) => (
                            <tr key={line.f1100} className="border-b border-border hover:bg-gray-50">
                              <td className="px-3 py-2 font-mono text-brand">{line.f01}</td>
                              <td className="px-3 py-2">{line.f02}</td>
                              <td className="px-3 py-2 text-right">{line.f1107}</td>
                              <td className="px-3 py-2 text-right">{line.f1109}</td>
                              <td className="px-3 py-2 text-right">${line.f1110.toFixed(2)}</td>
                              <td className="px-3 py-2 text-right font-semibold">${line.f1111.toFixed(2)}</td>
                              <td className="px-3 py-2">{line.f1108 || "—"}</td>
                            </tr>
                          ))
                        ) : (
                          <tr>
                            <td colSpan={7} className="px-3 py-4 text-center text-muted">No line items</td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
 
                {/* Comments */}
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-text mb-2">Supplier Comments</label>
                    <textarea 
                      rows={3} 
                      className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand"
                      defaultValue={selectedPO.f115}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-2">Internal Comments</label>
                    <textarea 
                      rows={3} 
                      className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand"
                      defaultValue={selectedPO.f112}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}