page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
 
interface POLineItem {
  f1100: string;  // Line ID
  f1101: string;  // Product ID
  f1102: string;  // Description
  f1103: number;  // Quantity Ordered
  f1104: number;  // Quantity Received
  f1105: number;  // Unit Cost
  f1106: number;  // Line Total
  f1107: string;  // Product Code
  f1108: number;  // Quantity Outstanding
}
 
interface PurchaseOrder {
  f100: string;   // PO ID
  f101: string;   // Supplier ID
  f102: string;   // Supplier Name
  f103: string;   // PO Date
  f104: number;   // Total Amount
  f114: number;   // Status
  f132: string;   // Notes
  physkey: string;
  lines: POLineItem[];
}
 
function ReceivePurchaseOrderContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const poId = searchParams.get('poid');
  const physKey = searchParams.get('physkey');
 
  const [purchaseOrder, setPurchaseOrder] = useState<PurchaseOrder | null>(null);
  const [lineItems, setLineItems] = useState<POLineItem[]>([]);
  const [receivingQuantities, setReceivingQuantities] = useState<Record<string, number>>({});
  const [receiveDate, setReceiveDate] = useState(new Date().toISOString().split('T')[0]);
  const [notes, setNotes] = useState('');
  const [showScanMode, setShowScanMode] = useState(false);
  const [scanInput, setScanInput] = useState('');
  const [isLoading, setIsLoading] = useState(true);
 
  useEffect(() => {
    if (poId && physKey) {
      loadPurchaseOrder();
    }
  }, [poId, physKey]);
 
  const loadPurchaseOrder = async () => {
    setIsLoading(true);
    try {
      // Mock data - replace with actual API call
      const mockPO: PurchaseOrder = {
        f100: poId || '',
        f101: '1001',
        f102: 'ABC Suppliers Ltd',
        f103: '2025-12-15',
        f104: 15240.50,
        f114: 2, // Approved
        f132: 'Urgent delivery required',
        physkey: physKey || '',
        lines: [
          {
            f1100: '1',
            f1101: 'PROD001',
            f1102: 'Premium Coffee Beans 1kg',
            f1103: 50,
            f1104: 0,
            f1105: 25.50,
            f1106: 1275.00,
            f1107: 'COF-001',
            f1108: 50
          },
          {
            f1100: '2',
            f1101: 'PROD002',
            f1102: 'Organic Tea Selection Box',
            f1103: 30,
            f1104: 15,
            f1105: 18.75,
            f1106: 562.50,
            f1107: 'TEA-002',
            f1108: 15
          },
          {
            f1100: '3',
            f1101: 'PROD003',
            f1102: 'Stainless Steel Teapot',
            f1103: 20,
            f1104: 0,
            f1105: 42.00,
            f1106: 840.00,
            f1107: 'POT-003',
            f1108: 20
          },
          {
            f1100: '4',
            f1101: 'PROD004',
            f1102: 'Coffee Grinder Professional',
            f1103: 10,
            f1104: 0,
            f1105: 156.30,
            f1106: 1563.00,
            f1107: 'GRN-004',
            f1108: 10
          },
          {
            f1100: '5',
            f1101: 'PROD005',
            f1102: 'Paper Cups 100pk',
            f1103: 100,
            f1104: 50,
            f1105: 8.90,
            f1106: 890.00,
            f1107: 'CUP-005',
            f1108: 50
          }
        ]
      };
 
      setPurchaseOrder(mockPO);
      setLineItems(mockPO.lines);
      
      // Initialize receiving quantities with outstanding amounts
      const initialQuantities: Record<string, number> = {};
      mockPO.lines.forEach(line => {
        initialQuantities[line.f1100] = line.f1108; // Set to outstanding quantity
      });
      setReceivingQuantities(initialQuantities);
      
    } catch (error) {
      console.error('Error loading purchase order:', error);
      alert('Failed to load purchase order');
    } finally {
      setIsLoading(false);
    }
  };
 
  const handleQuantityChange = (lineId: string, value: string) => {
    const numValue = parseInt(value) || 0;
    setReceivingQuantities(prev => ({
      ...prev,
      [lineId]: numValue
    }));
  };
 
  const handleReceiveAll = () => {
    const allQuantities: Record<string, number> = {};
    lineItems.forEach(line => {
      allQuantities[line.f1100] = line.f1108; // Set all to outstanding
    });
    setReceivingQuantities(allQuantities);
  };
 
  const handleClearAll = () => {
    const cleared: Record<string, number> = {};
    lineItems.forEach(line => {
      cleared[line.f1100] = 0;
    });
    setReceivingQuantities(cleared);
  };
 
  const handleScanSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!scanInput.trim()) return;
 
    // Find matching product by code
    const matchingLine = lineItems.find(line => 
      line.f1107.toLowerCase() === scanInput.toLowerCase() ||
      line.f1101.toLowerCase() === scanInput.toLowerCase()
    );
 
    if (matchingLine) {
      setReceivingQuantities(prev => ({
        ...prev,
        [matchingLine.f1100]: (prev[matchingLine.f1100] || 0) + 1
      }));
      setScanInput('');
    } else {
      alert(`Product not found: ${scanInput}`);
    }
  };
 
  const handleSubmitReceipt = async () => {
    const receivingLines = Object.entries(receivingQuantities)
      .filter(([_, qty]) => qty > 0)
      .map(([lineId, qty]) => {
        const line = lineItems.find(l => l.f1100 === lineId);
        return {
          lineId,
          productId: line?.f1101,
          receivedQty: qty
        };
      });
 
    if (receivingLines.length === 0) {
      alert('Please enter quantities to receive');
      return;
    }
 
    console.log('Submitting receipt with Fieldpine DATI packet:');
    const datiPacket = {
      request: 'save_data',
      client: 'everydaypos-web',
      data: {
        table: 'PoReceipts',
        operation: 'insert',
        fields: {
          f100_E: purchaseOrder?.f100,  // PO ID
          f200_E: receiveDate,           // Receipt Date
          f201_s: notes,                 // Notes
          lines: receivingLines.map(line => ({
            f1100_E: line.lineId,        // Line ID
            f1101_E: line.productId,     // Product ID
            f1200_N: line.receivedQty    // Received Quantity
          }))
        }
      }
    };
    console.log(JSON.stringify(datiPacket, null, 2));
 
    // Simulate API call
    if (confirm(`Receive ${receivingLines.length} line item(s) for PO ${purchaseOrder?.f100}?`)) {
      alert('Receipt processed successfully! (This would call Fieldpine API in production)');
      router.push('/purchase-orders');
    }
  };
 
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 overflow-auto">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center">Loading purchase order...</div>
        </div>
      </div>
    );
  }
 
  if (!purchaseOrder) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 overflow-auto">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center text-red-600">Purchase order not found</div>
        </div>
      </div>
    );
  }
 
  const totalReceiving = Object.values(receivingQuantities).reduce((sum, qty) => sum + qty, 0);
  const totalOutstanding = lineItems.reduce((sum, line) => sum + line.f1108, 0);
 
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 overflow-auto">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center justify-between mb-2">
            <h1 className="text-3xl font-bold text-slate-800">Receive Purchase Order</h1>
            <button
              onClick={() => router.push('/purchase-orders')}
              className="px-4 py-2 text-slate-600 hover:text-slate-800"
            >
              ← Back to Orders
            </button>
          </div>
          <p className="text-slate-600">PO #{purchaseOrder.f100} - {purchaseOrder.f102}</p>
        </div>
 
        {/* PO Summary Card */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <div className="text-sm text-slate-500">PO Date</div>
              <div className="font-semibold text-slate-800">{purchaseOrder.f103}</div>
            </div>
            <div>
              <div className="text-sm text-slate-500">Total Amount</div>
              <div className="font-semibold text-slate-800">${purchaseOrder.f104.toFixed(2)}</div>
            </div>
            <div>
              <div className="text-sm text-slate-500">Total Outstanding</div>
              <div className="font-semibold text-amber-600">{totalOutstanding} units</div>
            </div>
            <div>
              <div className="text-sm text-slate-500">Now Receiving</div>
              <div className="font-semibold text-[#00946b]">{totalReceiving} units</div>
            </div>
          </div>
          {purchaseOrder.f132 && (
            <div className="mt-4 pt-4 border-t border-slate-200">
              <div className="text-sm text-slate-500">Notes</div>
              <div className="text-slate-700">{purchaseOrder.f132}</div>
            </div>
          )}
        </div>
 
        {/* Action Bar */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 mb-6">
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-slate-700">Receive Date:</label>
              <input
                type="date"
                value={receiveDate}
                onChange={(e) => setReceiveDate(e.target.value)}
                className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
              />
            </div>
            
            <div className="flex items-center gap-2 ml-auto">
              <button
                onClick={() => setShowScanMode(!showScanMode)}
                className="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 text-sm"
              >
                {showScanMode ? '⌨️ Manual' : '📷 Scan Mode'}
              </button>
              <button
                onClick={handleReceiveAll}
                className="px-4 py-2 bg-[#00946b] text-white rounded-lg hover:opacity-80 text-sm"
              >
                Receive All
              </button>
              <button
                onClick={handleClearAll}
                className="px-4 py-2 bg-slate-400 text-white rounded-lg hover:bg-slate-500 text-sm"
              >
                Clear All
              </button>
            </div>
          </div>
 
          {showScanMode && (
            <form onSubmit={handleScanSubmit} className="mt-4 pt-4 border-t border-slate-200">
              <div className="flex items-center gap-2">
                <label className="text-sm font-medium text-slate-700">Scan Product:</label>
                <input
                  type="text"
                  value={scanInput}
                  onChange={(e) => setScanInput(e.target.value)}
                  placeholder="Scan barcode or enter product code"
                  className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  autoFocus
                />
                <button
                  type="submit"
                  className="px-4 py-2 bg-[#00946b] text-white rounded-lg hover:opacity-80 text-sm"
                >
                  Add
                </button>
              </div>
            </form>
          )}
        </div>
 
        {/* Line Items Table */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-6">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">Code</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">Description</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Ordered</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Already Received</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Outstanding</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Receiving Now</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Unit Cost</th>
                  <th className="px-4 py-3 text-right text-sm font-semibold text-slate-700">Line Total</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {lineItems.map((line) => {
                  const receivingQty = receivingQuantities[line.f1100] || 0;
                  const lineTotal = receivingQty * line.f1105;
                  
                  return (
                    <tr key={line.f1100} className="hover:bg-slate-50">
                      <td className="px-4 py-3 text-sm text-slate-800 font-medium">{line.f1107}</td>
                      <td className="px-4 py-3 text-sm text-slate-700">{line.f1102}</td>
                      <td className="px-4 py-3 text-sm text-slate-700 text-right">{line.f1103}</td>
                      <td className="px-4 py-3 text-sm text-slate-700 text-right">{line.f1104}</td>
                      <td className="px-4 py-3 text-sm text-amber-600 font-semibold text-right">{line.f1108}</td>
                      <td className="px-4 py-3 text-right">
                        <input
                          type="number"
                          min="0"
                          max={line.f1108}
                          value={receivingQty}
                          onChange={(e) => handleQuantityChange(line.f1100, e.target.value)}
                          className="w-20 px-2 py-1 border border-slate-300 rounded text-sm text-right"
                        />
                      </td>
                      <td className="px-4 py-3 text-sm text-slate-700 text-right">${line.f1105.toFixed(2)}</td>
                      <td className="px-4 py-3 text-sm text-slate-800 font-semibold text-right">
                        ${lineTotal.toFixed(2)}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
 
        {/* Receipt Notes */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <label className="block text-sm font-medium text-slate-700 mb-2">Receipt Notes</label>
          <textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Add any notes about this receipt (optional)"
            rows={3}
            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
          />
        </div>
 
        {/* Submit Section */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-slate-500">Total Receiving</div>
              <div className="text-2xl font-bold text-[#00946b]">{totalReceiving} units</div>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => router.push('/purchase-orders')}
                className="px-6 py-3 bg-slate-300 text-slate-700 rounded-lg hover:bg-slate-400 font-semibold"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmitReceipt}
                disabled={totalReceiving === 0}
                className="px-6 py-3 bg-[#00946b] text-white rounded-lg hover:opacity-80 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Process Receipt
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
 
export default function ReceivePurchaseOrder() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
      <ReceivePurchaseOrderContent />
    </Suspense>
  );
}