page.tsx

Go to the documentation of this file.

'use client';
 
import { useState } from 'react';
import { useRouter } from 'next/navigation';
 
interface Supplier {
  id: string;
  name: string;
}
 
interface SaleLineItem {
  id: string;
  pluCode: string;
  description: string;
  quantity: number;
  total: number;
  supplierCode?: string;
  supplierCost?: number;
  selected: boolean;
}
 
interface CustomerDetails {
  name: string;
  address1: string;
  address2: string;
  address3: string;
  address4: string;
  address5: string;
  address6: string;
}
 
interface Sale {
  saleId: string;
  date: string;
  time: string;
  total: number;
  physkey: string;
  customer: CustomerDetails;
  lines: SaleLineItem[];
}
 
export default function DropShippingOrder() {
  const router = useRouter();
 
  const [supplierSearch, setSupplierSearch] = useState('');
  const [supplierId, setSupplierId] = useState('');
  const [supplierName, setSupplierName] = useState('');
  const [showSupplierDropdown, setShowSupplierDropdown] = useState(false);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
 
  const [saleSearch, setSaleSearch] = useState('');
  const [selectedSale, setSelectedSale] = useState<Sale | null>(null);
  const [sales, setSales] = useState<Sale[]>([]);
  const [showSaleList, setShowSaleList] = useState(false);
  const [searching, setSearching] = useState(false);
 
  // Mock suppliers
  const mockSuppliers: Supplier[] = [
    { id: '1001', name: 'ABC Suppliers Ltd' },
    { id: '1002', name: 'Best Wholesale Co' },
    { id: '1003', name: 'Central Distributors' },
    { id: '1004', name: 'Delta Trading Inc' },
  ];
 
  // Mock sales data
  const mockSales: Sale[] = [
    {
      saleId: '50000079',
      date: '11-Dec-2025',
      time: '12:17',
      total: 103.95,
      physkey: 'KEP3OJYYYBG4MZTDOOS7Q3YAAAEQAAAB',
      customer: {
        name: 'John Smith',
        address1: '123 Main Street',
        address2: 'Sydney',
        address3: 'NSW 2000',
        address4: 'Australia',
        address5: '',
        address6: ''
      },
      lines: [
        {
          id: '1',
          pluCode: 'SKU001',
          description: 'Premium Coffee Beans 1kg',
          quantity: 2,
          total: 51.00,
          selected: true
        },
        {
          id: '2',
          pluCode: 'SKU002',
          description: 'Coffee Grinder',
          quantity: 1,
          total: 52.95,
          selected: true
        }
      ]
    },
    {
      saleId: '50000078',
      date: '11-Dec-2025',
      time: '7:57',
      total: 103.95,
      physkey: 'KEP3OFQYYBG4MZTDCOPHYIYAAARQAAAB',
      customer: {
        name: 'Jane Doe',
        address1: '456 Oak Ave',
        address2: 'Melbourne',
        address3: 'VIC 3000',
        address4: 'Australia',
        address5: '',
        address6: ''
      },
      lines: [
        {
          id: '1',
          pluCode: 'SKU003',
          description: 'Organic Tea Box',
          quantity: 1,
          total: 103.95,
          selected: true
        }
      ]
    },
    {
      saleId: '50000077',
      date: '2-Dec-2025',
      time: '9:00',
      total: 261.55,
      physkey: 'KEP3OAYYYBG4MZTDMOCRBRYAAABAAAAB',
      customer: {
        name: 'Bob Johnson',
        address1: '789 Elm Street',
        address2: 'Brisbane',
        address3: 'QLD 4000',
        address4: 'Australia',
        address5: '',
        address6: ''
      },
      lines: [
        {
          id: '1',
          pluCode: 'SKU001',
          description: 'Premium Coffee Beans 1kg',
          quantity: 3,
          total: 154.50,
          selected: true
        },
        {
          id: '2',
          pluCode: 'SKU004',
          description: 'Coffee Filters',
          quantity: 2,
          total: 107.05,
          selected: true
        }
      ]
    }
  ];
 
  const handleSupplierSearch = (value: string) => {
    setSupplierSearch(value);
    if (value.trim()) {
      const filtered = mockSuppliers.filter(s =>
        s.name.toLowerCase().includes(value.toLowerCase()) ||
        s.id.includes(value)
      );
      setSuppliers(filtered);
    } else {
      setSuppliers(mockSuppliers);
    }
    setShowSupplierDropdown(true);
  };
 
  const handleSupplierFocus = () => {
    setShowSupplierDropdown(true);
    if (suppliers.length === 0) {
      setSuppliers(mockSuppliers);
    }
  };
 
  const handleSelectSupplier = (supplier: Supplier) => {
    setSupplierId(supplier.id);
    setSupplierName(supplier.name);
    setSupplierSearch(supplier.name);
    setShowSupplierDropdown(false);
  };
 
  const handleSearchSales = (value: string) => {
    setSaleSearch(value);
    if (value.trim()) {
      setSearching(true);
      // Simulate API call
      setTimeout(() => {
        const filtered = mockSales.filter(s =>
          s.saleId.includes(value) ||
          s.customer.name.toLowerCase().includes(value.toLowerCase())
        );
        setSales(filtered);
        setShowSaleList(true);
        setSearching(false);
      }, 300);
    } else {
      setSales([]);
      setShowSaleList(false);
    }
  };
 
  const handleSaleFocus = () => {
    if (saleSearch.trim() === '') {
      // Show recent sales when focused with empty input
      setSales(mockSales);
      setShowSaleList(true);
    }
  };
 
  const handleSelectSale = (sale: Sale) => {
    // Fetch supplier product codes for each item
    const updatedLines = sale.lines.map(line => ({
      ...line,
      supplierCode: `SUPP-${line.pluCode}`,
      supplierCost: line.total / line.quantity * 0.85 // Mock supplier cost
    }));
    
    setSelectedSale({
      ...sale,
      lines: updatedLines
    });
    setShowSaleList(false);
  };
 
  const handleToggleLineItem = (lineId: string) => {
    if (selectedSale) {
      setSelectedSale({
        ...selectedSale,
        lines: selectedSale.lines.map(line =>
          line.id === lineId ? { ...line, selected: !line.selected } : line
        )
      });
    }
  };
 
  const handleCreateOrder = () => {
    if (!supplierId) {
      alert('Please select a supplier');
      return;
    }
 
    if (!selectedSale) {
      alert('Please select a sale');
      return;
    }
 
    const selectedItems = selectedSale.lines.filter(l => l.selected);
    if (selectedItems.length === 0) {
      alert('Please select at least one item');
      return;
    }
 
    const orderTotal = selectedItems.reduce((sum, line) => sum + line.total, 0);
 
    if (confirm(`Create drop shipping order?\n\nSupplier: ${supplierName}\nCustomer: ${selectedSale.customer.name}\nItems: ${selectedItems.length}\nTotal: $${orderTotal.toFixed(2)}`)) {
      
      // Build DATI packet
      const datiPacket = {
        request: 'save_data',
        client: 'everydaypos-web',
        data: {
          table: 'PurchaseOrders',
          operation: 'insert_dropship',
          fields: {
            f101_E: supplierId,
            f102_s: supplierName,
            f103_E: new Date().toISOString().split('T')[0],
            f104_N: orderTotal,
            f114_N: 2, // Pre-auth
            f132_s: 'This is a Drop Shipping Order. Please ship directly to the customers address shown',
            f200_E: selectedSale.physkey, // Link to sale
            shipTo: {
              contact: selectedSale.customer.name,
              address: [
                selectedSale.customer.address1,
                selectedSale.customer.address2,
                selectedSale.customer.address3,
                selectedSale.customer.address4,
                selectedSale.customer.address5,
                selectedSale.customer.address6
              ].filter(a => a && a.trim()).join('|')
            },
            lines: selectedItems.map((line, index) => ({
              f1100_E: (index + 1).toString(),
              f1101_E: line.pluCode,
              f1102_s: line.description,
              f1103_N: line.quantity,
              f1105_N: line.supplierCost || 0,
              f1106_N: line.total,
              f1107_s: line.supplierCode || line.pluCode,
              f1108_N: line.quantity
            }))
          }
        }
      };
 
      console.log('Drop Shipping Order DATI packet:', datiPacket);
 
      alert(`✓ Drop Shipping Order Created!\n\nSupplier: ${supplierName}\nCustomer: ${selectedSale.customer.name}\nOrder Total: $${orderTotal.toFixed(2)}\n\nThe supplier will ship directly to the customer.`);
 
      router.push('/purchase-orders');
    }
  };
 
  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">Create Drop Shipping 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">Create a purchase order that ships directly to your customer</p>
        </div>
 
        {/* Supplier Selection */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <h2 className="text-lg font-semibold text-slate-800 mb-4">Select Supplier</h2>
          <div className="relative">
            <input
              type="text"
              value={supplierSearch}
              onChange={(e) => handleSupplierSearch(e.target.value)}
              onFocus={handleSupplierFocus}
              placeholder="Search supplier name or ID..."
              className="w-full px-4 py-2 pr-10 border border-slate-300 rounded-lg text-sm"
            />
            <button
              onClick={() => setShowSupplierDropdown(true)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
            >
              ▼
            </button>
 
            {showSupplierDropdown && suppliers.length > 0 && (
              <div className="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                {suppliers.map(supplier => (
                  <div
                    key={supplier.id}
                    onClick={() => handleSelectSupplier(supplier)}
                    className="px-4 py-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0"
                  >
                    <div className="font-medium text-slate-800">{supplier.name}</div>
                    <div className="text-sm text-slate-500">ID: {supplier.id}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
 
          {supplierId && (
            <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg">
              <div className="text-sm text-green-700">✓ Selected: {supplierName}</div>
            </div>
          )}
        </div>
 
        {/* Sale Selection */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
          <h2 className="text-lg font-semibold text-slate-800 mb-4">Find Sale/Customer Order</h2>
          <div className="flex gap-2 mb-4">
            <input
              type="text"
              value={saleSearch}
              onChange={(e) => handleSearchSales(e.target.value)}
              onFocus={handleSaleFocus}
              placeholder="Search by sale ID or customer name..."
              className="flex-1 px-4 py-2 border border-slate-300 rounded-lg text-sm"
            />
            {searching && <div className="text-slate-500 py-2">Searching...</div>}
          </div>
 
          {showSaleList && sales.length > 0 && (
            <div className="border border-slate-200 rounded-lg overflow-hidden">
              <table className="w-full text-sm">
                <thead className="bg-slate-50 border-b border-slate-200">
                  <tr>
                    <th className="px-4 py-3 text-left font-semibold">Sale ID</th>
                    <th className="px-4 py-3 text-left font-semibold">Date</th>
                    <th className="px-4 py-3 text-left font-semibold">Time</th>
                    <th className="px-4 py-3 text-left font-semibold">Customer</th>
                    <th className="px-4 py-3 text-right font-semibold">Total</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                  {sales.map(sale => (
                    <tr
                      key={sale.physkey}
                      onClick={() => handleSelectSale(sale)}
                      className="hover:bg-slate-50 cursor-pointer"
                    >
                      <td className="px-4 py-3 font-medium text-blue-600">{sale.saleId}</td>
                      <td className="px-4 py-3">{sale.date}</td>
                      <td className="px-4 py-3">{sale.time}</td>
                      <td className="px-4 py-3">{sale.customer.name}</td>
                      <td className="px-4 py-3 text-right">${sale.total.toFixed(2)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
 
          {sales.length === 0 && saleSearch && (
            <div className="p-4 text-center text-slate-500">No sales found</div>
          )}
        </div>
 
        {/* Selected Sale Details */}
        {selectedSale && (
          <>
            {/* Customer Details */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
              <h2 className="text-lg font-semibold text-slate-800 mb-4">Customer Details</h2>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-slate-500 mb-1">Customer Name</div>
                  <div className="font-semibold text-slate-800">{selectedSale.customer.name}</div>
                </div>
                <div>
                  <div className="text-sm text-slate-500 mb-1">Sale ID</div>
                  <div className="font-semibold text-slate-800">{selectedSale.saleId}</div>
                </div>
              </div>
              <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                <div className="text-sm text-slate-700">
                  <strong>Shipping Address:</strong>
                  <div className="mt-2 whitespace-pre-wrap font-mono text-xs">
                    {selectedSale.customer.name}
                    {selectedSale.customer.address1 && `\n${selectedSale.customer.address1}`}
                    {selectedSale.customer.address2 && `\n${selectedSale.customer.address2}`}
                    {selectedSale.customer.address3 && `\n${selectedSale.customer.address3}`}
                    {selectedSale.customer.address4 && `\n${selectedSale.customer.address4}`}
                  </div>
                </div>
              </div>
            </div>
 
            {/* Line Items Selection */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
              <h2 className="text-lg font-semibold text-slate-800 mb-4">Select Items to Order</h2>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-slate-50 border-b border-slate-200">
                    <tr>
                      <th className="px-4 py-3 text-center w-10">
                        <input
                          type="checkbox"
                          checked={selectedSale.lines.every(l => l.selected)}
                          onChange={(e) => {
                            setSelectedSale({
                              ...selectedSale,
                              lines: selectedSale.lines.map(l => ({
                                ...l,
                                selected: e.target.checked
                              }))
                            });
                          }}
                        />
                      </th>
                      <th className="px-4 py-3 text-left font-semibold">Your PLU</th>
                      <th className="px-4 py-3 text-left font-semibold">Description</th>
                      <th className="px-4 py-3 text-right font-semibold">Qty</th>
                      <th className="px-4 py-3 text-right font-semibold">Your Total</th>
                      <th className="px-4 py-3 text-left font-semibold">Supplier PLU</th>
                      <th className="px-4 py-3 text-right font-semibold">Supplier Cost</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {selectedSale.lines.map(line => (
                      <tr key={line.id} className="hover:bg-slate-50">
                        <td className="px-4 py-3 text-center">
                          <input
                            type="checkbox"
                            checked={line.selected}
                            onChange={() => handleToggleLineItem(line.id)}
                          />
                        </td>
                        <td className="px-4 py-3 font-mono text-slate-800">{line.pluCode}</td>
                        <td className="px-4 py-3">{line.description}</td>
                        <td className="px-4 py-3 text-right">{line.quantity}</td>
                        <td className="px-4 py-3 text-right font-semibold">${line.total.toFixed(2)}</td>
                        <td className="px-4 py-3 font-mono text-blue-600">{line.supplierCode}</td>
                        <td className="px-4 py-3 text-right">${(line.supplierCost || 0).toFixed(2)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
 
            {/* Create Order */}
            <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">Selected Items</div>
                  <div className="text-2xl font-bold text-[#00946b]">
                    {selectedSale.lines.filter(l => l.selected).length} item(s)
                  </div>
                  <div className="text-sm text-slate-600 mt-1">
                    Total: ${selectedSale.lines.filter(l => l.selected).reduce((sum, l) => sum + l.total, 0).toFixed(2)}
                  </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={handleCreateOrder}
                    disabled={!supplierId || selectedSale.lines.filter(l => l.selected).length === 0}
                    className="px-6 py-3 bg-[#00946b] text-white rounded-lg hover:opacity-80 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Create Drop Ship Order
                  </button>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}