page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { apiClient } from "@/lib/client/apiClient";
import { useStore } from "@/contexts/StoreContext";
import { Icon } from '@/contexts/IconContext';
import { useTheme } from '@/contexts/ThemeContext';
 
interface Product {
  pid: number;
  name: string;
  barcode?: string;
  sellprice: number;
  description?: string;
  stocklevel?: number;
  cost?: number;
  manufacturerCode?: string;
  requiresSerial?: boolean;
  department?: string;
  category?: string;
}
 
interface SaleItem {
  pid: number;
  name: string;
  qty: number;
  price: number;
  discount: number;
  total: number;
  cost?: number;
  isReturn?: boolean;
  manufacturerCode?: string;
  serialNumber?: string;
}
 
interface PaymentMethod {
  name: string;
  code: string;
  icon: string;
}
 
interface Customer {
  cid: number;
  name: string;
  email?: string;
  phone?: string;
  mobile?: string;
  accountBalance?: number;
  address1?: string;
  address2?: string;
  city?: string;
  state?: string;
  postcode?: string;
  country?: string;
  billingAddress1?: string;
  billingAddress2?: string;
  billingCity?: string;
  billingState?: string;
  billingPostcode?: string;
  billingCountry?: string;
  deliveryAddress1?: string;
  deliveryAddress2?: string;
  deliveryCity?: string;
  deliveryState?: string;
  deliveryPostcode?: string;
  deliveryCountry?: string;
}
 
export default function SalesPage() {
  const router = useRouter();
  const { session } = useStore();
  const { theme } = useTheme();
  const user = session?.user;
  const store = session?.store;
  const [products, setProducts] = useState<Product[]>([]);
  const [allProducts, setAllProducts] = useState<Product[]>([]); // Store all products for client-side filtering
  const [saleItems, setSaleItems] = useState<SaleItem[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [barcode, setBarcode] = useState("");
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [quantity, setQuantity] = useState(1);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [showPayment, setShowPayment] = useState(false);
  const barcodeInputRef = useRef<HTMLInputElement>(null);
 
  // Default walk-in customer
  const defaultWalkInCustomer: Customer = {
    cid: 0,
    name: "Cash Sale",
    email: "",
    phone: "",
    mobile: "",
    accountBalance: 0,
    address1: "",
    address2: "",
    city: "",
    state: "",
    postcode: "",
    country: "",
    deliveryAddress1: "",
    deliveryAddress2: "",
    deliveryCity: "",
    deliveryState: "",
    deliveryPostcode: "",
    deliveryCountry: ""
  };
 
  // Customer selection state
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [allCustomers, setAllCustomers] = useState<Customer[]>([]); // Store all customers for client-side filtering
  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(defaultWalkInCustomer);
  const [customerSearch, setCustomerSearch] = useState("");
  const [showCustomerModal, setShowCustomerModal] = useState(false);
  const [customerLoading, setCustomerLoading] = useState(false);
  const [showBillingEdit, setShowBillingEdit] = useState(false);
  const [showShippingEdit, setShowShippingEdit] = useState(false);
  const [editingAddress, setEditingAddress] = useState<any>({});
  const [editingLineItem, setEditingLineItem] = useState<SaleItem | null>(null);
  const [showLineItemEdit, setShowLineItemEdit] = useState(false);
  const [tempPrice, setTempPrice] = useState(0);
  const [tempDiscount, setTempDiscount] = useState(0);
  const [saleComments, setSaleComments] = useState("");
  const [internalComments, setInternalComments] = useState("");
  const [orderNumber, setOrderNumber] = useState("");
  const [parkedSales, setParkedSales] = useState<any[]>([]);
  const [showParkedSales, setShowParkedSales] = useState(false);
  const [showPastSales, setShowPastSales] = useState(false);
  const [pastSales, setPastSales] = useState<any[]>([]);
  const [showReceiptOptions, setShowReceiptOptions] = useState(false);
  const [receiptEmail, setReceiptEmail] = useState("");
  const [printReceipt, setPrintReceipt] = useState(true);
  const [showPrinterSearch, setShowPrinterSearch] = useState(false);
  const [printerSearchTerm, setPrinterSearchTerm] = useState("");
  const [printerResults, setPrinterResults] = useState<Product[]>([]);
  const [selectedPrinter, setSelectedPrinter] = useState<Product | null>(null);
  const [printerCartridges, setPrinterCartridges] = useState<Product[]>([]);
  const [emailReceipt, setEmailReceipt] = useState(false);
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
  const [showEndOfDay, setShowEndOfDay] = useState(false);
  const [showSerialModal, setShowSerialModal] = useState(false);
  const [pendingSerialProduct, setPendingSerialProduct] = useState<Product | null>(null);
  const [serialNumber, setSerialNumber] = useState("");
  const [editingSerialPid, setEditingSerialPid] = useState<number | null>(null);
  const [tempSerialNumber, setTempSerialNumber] = useState("");
  const [printerCartridgeRelationships, setPrinterCartridgeRelationships] = useState<any[]>([]);
  const displayChannel = useRef<BroadcastChannel | null>(null);
 
  const paymentMethods: PaymentMethod[] = [
    { name: "Cash", code: "CASH", icon: "💵" },
    { name: "EFTPOS", code: "EFTPOS", icon: "💳" },
    { name: "Credit Card", code: "CREDIT", icon: "💳" },
    { name: "Account", code: "ACCOUNT", icon: "📋" },
    { name: "Voucher", code: "VOUCHER", icon: "🎫" },
    { name: "Direct Debit", code: "DIRECTDEBIT", icon: "🏦" },
    { name: "Afterpay", code: "AFTERPAY", icon: "💰" }
  ];
 
  useEffect(() => {
    loadPrinterCartridgeRelationships();
  }, []);
 
  // Debounced search effect
  useEffect(() => {
    if (searchTerm.length >= 2) {
      const timeoutId = setTimeout(() => {
        loadProducts(searchTerm);
      }, 300);
      return () => clearTimeout(timeoutId);
    }
  }, [searchTerm]);
 
  // Keyboard shortcut: F2 to focus barcode input
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'F2') {
        e.preventDefault();
        barcodeInputRef.current?.focus();
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);
 
  useEffect(() => {
    const newTotal = saleItems.reduce((sum, item) => sum + item.total, 0);
    setTotal(newTotal);
  }, [saleItems]);
 
  // Initialize customer display broadcast channel
  useEffect(() => {
    if (typeof BroadcastChannel !== 'undefined') {
      displayChannel.current = new BroadcastChannel('pos-display');
    }
    return () => {
      displayChannel.current?.close();
    };
  }, []);
 
  // Broadcast cart updates to customer display
  useEffect(() => {
    if (displayChannel.current) {
      if (saleItems.length > 0) {
        const subtotal = saleItems.reduce((sum, item) => sum + item.total, 0);
        const tax = subtotal * 0.1; // Adjust tax rate as needed
        
        displayChannel.current.postMessage({
          type: 'cart-update',
          cart: saleItems.map(item => ({
            id: item.pid,
            name: item.name,
            price: item.price,
            quantity: item.qty
          })),
          total,
          subtotal,
          tax,
          customer: selectedCustomer?.cid !== 0 ? { name: selectedCustomer?.name } : null
        });
      } else {
        displayChannel.current.postMessage({ type: 'clear' });
      }
    }
  }, [saleItems, total, selectedCustomer]);
 
  // Client-side product filtering for instant results
  useEffect(() => {
    if (searchTerm.length === 0) {
      setProducts([]);
    } else if (searchTerm.length >= 2 && allProducts.length > 0) {
      // Instant client-side fuzzy search with normalized matching and keyword splitting
      const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, '');
      const keywords = searchTerm.toLowerCase().split(/\s+/).filter(k => k.length > 0);
      
      console.log(`Searching for keywords: ${keywords.join(', ')} in ${allProducts.length} products`);
      
      const filtered = allProducts.filter(p => {
        // Combine all searchable fields
        const searchableText = [
          p.name,
          p.description || '',
          p.barcode || '',
          p.manufacturerCode || ''
        ].join(' ').toLowerCase();
        
        const normalizedText = normalizeString(searchableText);
        
        // Check if ALL keywords are present (in any order)
        const matches = keywords.every(keyword => {
          const normalizedKeyword = normalizeString(keyword);
          return normalizedText.includes(normalizedKeyword);
        });
        
        return matches;
      });
      
      console.log(`Found ${filtered.length} matches`);
      setProducts(filtered.slice(0, 50)); // Limit to 50 results for performance
    }
  }, [searchTerm, allProducts]);
 
  // Auto-load customers when user starts typing (lazy loading)
  useEffect(() => {
    if (customerSearch.length >= 2 && allCustomers.length === 0 && !customerLoading) {
      console.log('Customer search triggered - loading all customers for filtering');
      loadCustomers();
    }
  }, [customerSearch]);
 
  // Client-side instant customer filtering
  useEffect(() => {
    if (customerSearch.length === 0) {
      setCustomers([]);
    } else if (customerSearch.length >= 2 && allCustomers.length > 0) {
      const normalize = (str: string) => str.replace(/[-\s]/g, '').toLowerCase();
      const filtered = allCustomers.filter(c => {
        const searchableText = normalize(
          `${c.name} ${c.email || ''} ${c.phone || ''} ${c.mobile || ''} ${c.city || ''} ${c.postcode || ''}`
        );
        const keywords = customerSearch.toLowerCase().split(' ').filter(k => k.length > 0);
        const normalizedKeywords = keywords.map(normalize);
        return normalizedKeywords.every(keyword => searchableText.includes(keyword));
      });
      setCustomers(filtered.slice(0, 50)); // Limit to 50 results for performance
    }
  }, [customerSearch, allCustomers]);
 
  // Client-side instant printer filtering - only show actual printers
  useEffect(() => {
    if (printerSearchTerm.length === 0) {
      setPrinterResults([]);
    } else if (printerSearchTerm.length >= 2 && allProducts.length > 0) {
      const normalize = (str: string) => str.replace(/[-\s]/g, '').toLowerCase();
      const filtered = allProducts.filter(p => {
        // First check if department ID is 6 (printers department based on product 30004)
        // Or check if department/category name contains printer
        const deptCat = `${p.department || ''} ${p.category || ''}`.toLowerCase();
        const isPrinterByDepartment = Number(p.department) === 6; // Department 6 appears to be printers
        const isPrinterByCategory = /\b(printer|printers)\b/i.test(deptCat);
        
        // Also check product name/description (expanded categories)
        const nameAndDesc = `${p.name} ${p.description || ''}`.toLowerCase();
        const isPrinterByKeyword = /\b(printer|printers|multifunction|multi-function|all-in-one|mfp|inkjet|laser|copier|scanner|photocopier)\b/i.test(nameAndDesc) ||
                         // Also check for common printer model patterns (brand + model number)
                         /\b(hp|canon|brother|epson|kyocera|lexmark|samsung|dell|xerox|ricoh|sharp|konica|minolta|oki|pantum)\s*[a-z]?\d{3,5}/i.test(p.name);
        
        const isPrinter = isPrinterByDepartment || isPrinterByCategory || isPrinterByKeyword;
        if (!isPrinter) return false;
        
        // Then check if it matches the search term
        const searchableText = normalize(
          `${p.name} ${p.description || ''} ${p.barcode || ''} ${p.manufacturerCode || ''}`
        );
        const keywords = printerSearchTerm.toLowerCase().split(' ').filter(k => k.length > 0);
        const normalizedKeywords = keywords.map(normalize);
        return normalizedKeywords.every(keyword => searchableText.includes(keyword));
      });
      console.log(`Printer search for "${printerSearchTerm}" found ${filtered.length} results`);
      if (filtered.length > 0) {
        console.log('Sample printer departments:', filtered.slice(0, 5).map(p => ({ name: p.name, dept: p.department })));
      }
      setPrinterResults(filtered.slice(0, 50));
    }
  }, [printerSearchTerm, allProducts]);
 
  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      // F2 - Select Customer
      if (e.key === 'F2') {
        e.preventDefault();
        setShowCustomerModal(true);
        loadCustomers();
      }
      // F8 - Void Sale
      else if (e.key === 'F8') {
        e.preventDefault();
        if (saleItems.length > 0) voidSale();
      }
      // F9 - Park Sale
      else if (e.key === 'F9') {
        e.preventDefault();
        if (saleItems.length > 0) parkSale();
      }
      // F10 - Unpark Sale
      else if (e.key === 'F10') {
        e.preventDefault();
        if (parkedSales.length > 0) setShowParkedSales(true);
      }
    };
 
    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, [saleItems, parkedSales]);
 
  async function loadPrinterCartridgeRelationships() {
    try {
      const response = await fetch('/api/v1/printers-cartridges');
      const result = await response.json();
      
      if (result.success && result.data) {
        setPrinterCartridgeRelationships(result.data);
        console.log('Loaded printer-cartridge relationships:', result.data.length);
      }
    } catch (error) {
      console.error('Failed to load printer-cartridge relationships:', error);
    }
  }
 
  async function loadProducts(searchQuery?: string, barcodeQuery?: string) {
    try {
      setLoading(true);
      
      // Use apiClient for products with OpenAPI - load all products for client-side filtering
      const params: any = { limit: 10000, source: 'openapi' };
      if (searchQuery) params.search = searchQuery;
      if (barcodeQuery) params.barcode = barcodeQuery;
      
      type ApiResult = {
        success: boolean;
        data?: any;
        error?: string;
      };
      const result: ApiResult = await apiClient.getProducts(params);
      
      console.log('API result:', result);
      
      if (result.success && result.data) {
        // OpenAPI returns data wrapped in { data: { Product: [...] } } or OData format { value: [...], '@odata.count': ... }
        const productsData = Array.isArray(result.data)
          ? result.data
          : result.data?.value || result.data?.data?.Product || result.data?.Product || result.data;
        
        console.log('Products data:', productsData);
        
        if (Array.isArray(productsData) && productsData.length > 0) {
          // Map OpenAPI fields to our Product interface - only include products with valid data
          const mappedProducts = productsData
            .filter((p: any) => p.Pid && (p.Description || p.Name) && (p.Price !== undefined || p.SellPrice !== undefined)) // Only include products with essential data
            .map((p: any) => ({
              pid: p.Pid || p.pid,
              name: p.Description || p.Name || p.name,
              barcode: p.Barcode || p.barcode || p.Plu,
              sellprice: parseFloat(p.Price ?? p.SellPrice ?? p.sellprice ?? p.Price1 ?? 0),
              description: p.Description || p.description,
              stocklevel: p.StockLevel || p.stocklevel || p.Qty,
              cost: parseFloat(p.Cost ?? p.cost ?? p.CostPrice ?? 0),
              manufacturerCode: p.ManufacturerCode || p.manufacturerCode || p.MfrCode || p.SupplierCode,
              requiresSerial: p.RequiresSerial || p.requiresSerial || false,
              department: p.Department || p.department || p.Dept,
              category: p.Category || p.category || p.Cat
            }));
          setAllProducts(mappedProducts); // Store all products
          console.log(`Loaded ${mappedProducts.length} products for client-side search`);
        } else if (Array.isArray(productsData) && productsData.length === 0) {
          console.log('API returned empty product list');
          setAllProducts([]);
        } else {
          console.warn('Unexpected products data format (not an array):', typeof productsData, productsData);
          setAllProducts([]);
        }
      } else {
        console.error("API call failed or no data:", result);
      }
    } catch (error) {
      console.error("Failed to load products:", error);
    } finally {
      setLoading(false);
    }
  }
 
  function addToSale(product: Product, qty = quantity) {
    if (!product || !product.pid) {
      console.error('Invalid product', product);
      return;
    }
    
    // Check if product requires serial number
    if (product.requiresSerial && qty === 1) {
      setPendingSerialProduct(product);
      setShowSerialModal(true);
      return;
    }
    
    const existingItem = saleItems.find(item => item.pid === product.pid);
    
    if (existingItem) {
      setSaleItems(items => 
        items.map(item => 
          item.pid === product.pid 
            ? { ...item, qty: item.qty + qty, total: (item.qty + qty) * item.price }
            : item
        )
      );
    } else {
      const newItem: SaleItem = {
        pid: product.pid,
        name: product.name,
        qty,
        price: product.sellprice,
        total: qty * product.sellprice,
        cost: product.cost,
        manufacturerCode: product.manufacturerCode,
        discount: 0
      };
      setSaleItems(items => [...items, newItem]);
    }
    
    setQuantity(1);
    setBarcode('');
    setSelectedProduct(null);
  }
  
  function addToSaleWithSerial(serial: string) {
    if (!pendingSerialProduct) return;
    
    const newItem: SaleItem = {
      pid: pendingSerialProduct.pid,
      name: pendingSerialProduct.name,
      qty: 1,
      price: pendingSerialProduct.sellprice,
      total: pendingSerialProduct.sellprice,
      serialNumber: serial,
      cost: pendingSerialProduct.cost,
      manufacturerCode: pendingSerialProduct.manufacturerCode,
      discount: 0
    };
    
    setSaleItems(items => [...items, newItem]);
    setQuantity(1);
    setBarcode('');
    setSelectedProduct(null);
    setShowSerialModal(false);
    setPendingSerialProduct(null);
    setSerialNumber('');
  }
 
  function updateSerialNumber(pid: number, serial: string) {
    setSaleItems(items =>
      items.map(item =>
        item.pid === pid
          ? { ...item, serialNumber: serial }
          : item
      )
    );
    setEditingSerialPid(null);
    setTempSerialNumber('');
  }
 
  function startEditingSerial(pid: number, currentSerial?: string) {
    setEditingSerialPid(pid);
    setTempSerialNumber(currentSerial || '');
  }
 
  function removeFromSale(pid: number) {
    setSaleItems(items => items.filter(item => item.pid !== pid));
  }
 
  function updateQuantity(pid: number, newQty: number) {
    if (newQty <= 0) {
      removeFromSale(pid);
      return;
    }
    
    setSaleItems(items => 
      items.map(item => 
        item.pid === pid 
          ? { ...item, qty: newQty, total: (newQty * item.price) - ((newQty * item.price * item.discount) / 100) }
          : item
      )
    );
  }
 
  async function loadCustomers(searchQuery?: string) {
    try {
      setCustomerLoading(true);
      
      const params: any = { limit: 10000, source: 'openapi' }; // Load all customers for client-side filtering
      
      type ApiResult = {
        success: boolean;
        data?: any;
        error?: string;
      };
      const result: ApiResult = await apiClient.getCustomers(params);
      
      console.log('Customer API response:', result);
      
      if (result.success && result.data) {
        const customersData = Array.isArray(result.data)
          ? result.data
          : result.data?.data?.Customer || result.data;
        
        if (Array.isArray(customersData)) {
          console.log(`Loaded ${customersData.length} customers for client-side filtering`);
          const mappedCustomers = customersData
            .filter((c: any) => c.Cid && c.Name)
            .map((c: any) => ({
              cid: c.Cid || c.cid,
              name: c.Name || c.name,
              email: c.Email || c.email,
              phone: c.Phone || c.phone,
              mobile: c.Mobile || c.mobile,
              accountBalance: c.AccountBalance || c.accountBalance || 0,
              address1: c.Address1 || c.address1,
              address2: c.Address2 || c.address2,
              city: c.City || c.city,
              state: c.State || c.state,
              postcode: c.Postcode || c.postcode,
              country: c.Country || c.country,
              deliveryAddress1: c.DeliveryAddress1 || c.deliveryAddress1,
              deliveryAddress2: c.DeliveryAddress2 || c.deliveryAddress2,
              deliveryCity: c.DeliveryCity || c.deliveryCity,
              deliveryState: c.DeliveryState || c.deliveryState,
              deliveryPostcode: c.DeliveryPostcode || c.deliveryPostcode,
              deliveryCountry: c.DeliveryCountry || c.deliveryCountry
            }));
          setAllCustomers(mappedCustomers); // Store all customers
          // Don't set customers here - let the useEffect handle filtering based on search
        } else {
          console.warn('Customer API returned empty or invalid data:', customersData);
        }
      } else {
        console.warn('Customer API call unsuccessful or no data:', result);
      }
    } catch (error) {
      console.error('Failed to load customers:', error);
    } finally {
      setCustomerLoading(false);
    }
  }
 
  function selectCustomer(customer: Customer | null) {
    setSelectedCustomer(customer);
    setShowCustomerModal(false);
    setCustomerSearch("");
  }
 
  function openLineItemEdit(item: SaleItem) {
    setEditingLineItem(item);
    setTempPrice(item.price);
    setTempDiscount(item.discount || 0);
    setShowLineItemEdit(true);
  }
 
  function saveLineItemEdit() {
    if (!editingLineItem) return;
    
    setSaleItems(items =>
      items.map(item =>
        item.pid === editingLineItem.pid
          ? {
              ...item,
              price: tempPrice,
              discount: tempDiscount,
              total: (item.qty * tempPrice) - ((item.qty * tempPrice * tempDiscount) / 100)
            }
          : item
      )
    );
    setShowLineItemEdit(false);
    setEditingLineItem(null);
  }
 
  function toggleReturn(pid: number) {
    setSaleItems(items =>
      items.map(item =>
        item.pid === pid
          ? { ...item, isReturn: !item.isReturn }
          : item
      )
    );
  }
 
  function parkSale() {
    if (saleItems.length === 0) {
      alert('No items to park');
      return;
    }
    
    const parkedSale = {
      id: `PARK_${Date.now()}`,
      items: saleItems,
      customer: selectedCustomer,
      total,
      orderNumber,
      comments: saleComments,
      internalComments,
      timestamp: new Date().toISOString()
    };
    
    setParkedSales([...parkedSales, parkedSale]);
    clearSale();
    alert('Sale parked successfully');
  }
 
  function unparkSale(parkedSale: any) {
    setSaleItems(parkedSale.items);
    setSelectedCustomer(parkedSale.customer);
    setOrderNumber(parkedSale.orderNumber || '');
    setSaleComments(parkedSale.comments || '');
    setInternalComments(parkedSale.internalComments || '');
    setParkedSales(parkedSales.filter(s => s.id !== parkedSale.id));
    setShowParkedSales(false);
    alert('Sale retrieved successfully');
  }
 
  function voidSale() {
    if (saleItems.length === 0) {
      alert('No sale to void');
      return;
    }
    
    if (confirm('Are you sure you want to VOID this sale? This cannot be undone.')) {
      clearSale();
      alert('Sale voided');
    }
  }
 
  async function loadPastSales() {
    try {
      setLoading(true);
      const result = await apiClient.getSales({ limit: 50 });
      if (result.success && result.data) {
        const salesData = Array.isArray(result.data) ? result.data : (result.data as any)?.data?.Sale || [];
        setPastSales(salesData);
      }
    } catch (error) {
      console.error('Failed to load past sales:', error);
    } finally {
      setLoading(false);
    }
  }
 
  function clearSale() {
    setSaleItems([]);
    setTotal(0);
    setShowPayment(false);
    setSelectedCustomer(defaultWalkInCustomer);
    setCustomerSearch("");
    setSaleComments("");
    setInternalComments("");
    setOrderNumber("");
  }
 
  async function processSale(paymentMethod: string) {
    if (saleItems.length === 0) {
      alert('No items in sale');
      return;
    }
    
    // Show receipt options first
    if (!showReceiptOptions) {
      setReceiptEmail(selectedCustomer?.email || '');
      setSelectedPaymentMethod(paymentMethod);
      setShowReceiptOptions(true);
      return;
    }
    
    try {
      setLoading(true);
      
      // Create sale object for Fieldpine API format
      const saleData: any = {
        ExternalId: `POS_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        CompletedDt: new Date().toISOString(),
        Phase: 1, // 1 = completed sale
        OrderNo: orderNumber || undefined,
        Comments: saleComments || undefined,
        InternalComments: internalComments || undefined,
        CompletedBy: user?.name || 'Unknown',
        Teller: user?.name || 'Unknown',
        StoreId: store?.id,
        StoreName: store?.name,
        ReceiptEmail: emailReceipt ? receiptEmail : undefined,
        PrintReceipt: printReceipt,
        LINE: saleItems.map(item => ({
          Pid: item.pid,
          Qty: item.qty,
          TotalPrice: item.total
        })),
        PAYM: [{
          Type: paymentMethod.toLowerCase(),
          Amount: total
        }]
      };
      
      // Add customer if selected
      if (selectedCustomer) {
        saleData.Cid = selectedCustomer.cid;
        saleData.CustomerName = selectedCustomer.name;
      }
      
      // Use API helper to process sale
      const result = await apiClient.createSale(saleData);
      
      if (result.success) {
        const customerInfo = selectedCustomer ? `\nCustomer: ${selectedCustomer.name}` : '';
        const receiptInfo = emailReceipt ? `\nReceipt emailed to: ${receiptEmail}` : '';
        alert(`✅ Sale completed successfully!\n\nTotal: $${total.toFixed(2)}\nPayment: ${paymentMethod}${customerInfo}${receiptInfo}\nSale ID: ${result.data?.saleId || 'N/A'}`);
        setShowReceiptOptions(false);
        clearSale();
      } else {
        console.error("Sale processing failed:", result.error);
        alert(`❌ Sale processing failed: ${result.error || 'Please try again.'}`);
      }
    } catch (error) {
      console.error("Sale processing failed:", error);
      alert(`❌ Sale processing failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <div className="min-h-screen p-2 sm:p-4 md:p-8 h-full overflow-y-auto bg-bg">
        <div className="max-w-7xl mx-auto space-y-3 sm:space-y-4 md:space-y-6">
        {/* Modern Top Action Bar with Enhanced UI */}
        <div className="bg-surface text-text shadow-xl p-3 sm:p-4 md:p-5 rounded-lg sm:rounded-xl md:rounded-2xl border border-border">
          <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 sm:gap-4">
            <div className="flex gap-2 sm:gap-3 flex-wrap">
              <button
                onClick={() => {
                  // Route merchant users to sales reports hub, store users to POS sales report
                  const destination = store?.type === 'management' 
                    ? '/pages/reports/sales-reports' 
                    : '/pages/reports/pos-sales-report';
                  router.push(destination);
                }}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-brand text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="assessment" size={16} className="sm:text-base" /> <span className="hidden sm:inline">Past Sales</span><span className="sm:hidden">Past</span>
              </button>
              <button
                onClick={() => setShowEndOfDay(true)}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-info text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="work" size={16} className="sm:text-base" /> <span className="hidden md:inline">End of Day</span><span className="md:hidden">EOD</span>
              </button>
              <button
                onClick={parkSale}
                disabled={saleItems.length === 0}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-warn text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="pause" size={16} className="sm:text-base" /> <span className="hidden sm:inline">Park</span>
              </button>
              <button
                onClick={() => setShowParkedSales(true)}
                disabled={parkedSales.length === 0}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-success text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="play_arrow" size={16} className="sm:text-base" /> <span className="hidden sm:inline">Unpark</span>
              </button>
              <button
                onClick={voidSale}
                disabled={saleItems.length === 0}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-danger text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="close" size={16} className="sm:text-base" /> <span className="hidden sm:inline">Void</span>
              </button>
              <button
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-info text-surface rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="smartphone" size={16} className="sm:text-base" /> <span className="hidden lg:inline">Manual Barcode</span><span className="lg:hidden">Barcode</span>
              </button>
              <button
                onClick={() => {
                  window.open(
                    '/pages/sales/display',
                    'customer-display',
                    'width=1024,height=768'
                  );
                }}
                className="px-2.5 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 bg-brand2 text-text rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center gap-1 sm:gap-2"
              >
                <Icon name="desktop_windows" size={16} className="sm:text-base" /> <span className="hidden lg:inline">Customer Display</span><span className="lg:hidden">Display</span>
              </button>
            </div>
          </div>
        </div>
 
        {/* Page Title with Modern Styling */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-4">
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-extrabold bg-gradient-to-r from-brand to-brand2 bg-clip-text text-transparent flex items-center gap-2 sm:gap-3">
            <Icon name="shopping_cart" size={36} className="text-brand" /> <span className="hidden sm:inline">Point of Sale</span><span className="sm:hidden">POS</span>
          </h1>
          <div className="text-xs sm:text-sm text-muted font-medium">
            <span className="hidden md:inline">{new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
            <span className="md:hidden">{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
          </div>
        </div>
        
        <div className="space-y-3 sm:space-y-4 md:space-y-6">
          {/* Customer Section - Modern Card Design */}
          <div className="w-full bg-surface shadow-2xl p-4 sm:p-6 md:p-8 rounded-lg sm:rounded-xl md:rounded-2xl border border-border">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-5 md:mb-6">
              <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-text flex items-center gap-2 sm:gap-3" id="custname">
                {selectedCustomer ? <Icon name="person" size={36} /> : <Icon name="search" size={36} />}
                <span className="break-all">{selectedCustomer?.name || 'Select Customer'}</span>
              </h2>
              {selectedCustomer && (
                <button
                  onClick={() => setSelectedCustomer(null)}
                  className="w-full sm:w-auto px-3 sm:px-4 py-2 bg-brand text-surface rounded-lg hover:opacity-90 active:transform active:scale-95 transition-all text-xs sm:text-sm font-semibold shadow-md hover:shadow-lg flex items-center justify-center gap-2"
                >
                  <Icon name="sync" size={16} /> Change Customer
                </button>
              )}
            </div>
            
            {/* Customer Search Bar */}
            {!selectedCustomer && (
              <div className="mb-4">
                <div className="flex gap-3">
                  <div className="flex-1 relative">
                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                      <Icon name="search" size={20} className="text-muted" />
                    </div>
                    <input
                      type="text"
                      value={customerSearch}
                      onChange={(e) => {
                        setCustomerSearch(e.target.value);
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Escape') {
                          setCustomerSearch('');
                          setCustomers([]);
                        }
                      }}
                      placeholder="Search customers by name, email, or phone... (Press F2 or ESC to clear)"
                      className="w-full pl-12 pr-4 py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none transition-all text-base shadow-sm"
                    />
                  </div>
                  {customerSearch && (
                    <button
                      onClick={() => {
                        setCustomerSearch('');
                        setCustomers([]);
                      }}
                      className="px-5 py-3 bg-surface-2 hover:opacity-90 rounded-xl transition-all font-medium text-text shadow-sm active:transform active:scale-95"
                    >
                      <Icon name="close" size={20} /> Clear
                    </button>
                  )}
                </div>
                
                {/* Customer Results Dropdown */}
                {(customerSearch.length > 0 || customers.length > 0) && (
                  <div className="mt-3 border-2 border-border rounded-xl bg-surface shadow-2xl max-h-80 overflow-y-auto">
                    {customerLoading ? (
                      <div className="p-6 text-center">
                        <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-brand border-t-transparent"></div>
                        <div className="mt-3 text-text font-medium">Loading customers...</div>
                      </div>
                    ) : (
                      <>
                        {/* Cash Sale - Always First */}
                        <div
                          onClick={() => selectCustomer({
                            cid: 0,
                            name: 'Cash Sale',
                            email: '',
                            phone: '',
                            mobile: '',
                            accountBalance: 0,
                            address1: '',
                            address2: '',
                            city: '',
                            state: '',
                            postcode: '',
                            country: '',
                            deliveryAddress1: '',
                            deliveryAddress2: '',
                            deliveryCity: '',
                            deliveryState: '',
                            deliveryPostcode: '',
                            deliveryCountry: ''
                          })}
                          className="p-4 border-b-2 border-border hover:bg-surface-2 cursor-pointer bg-surface-2/50 transition-all group"
                        >
                          <div className="font-bold text-brand flex items-center gap-2 text-lg">
                            <Icon name="person" size={20} /> Cash Sale
                            <span className="ml-auto text-sm bg-brand/20 text-brand px-3 py-1 rounded-full group-hover:bg-brand/30 transition-colors">Quick Select</span>
                          </div>
                          <div className="text-sm text-muted mt-1">No customer account needed - Perfect for casual purchases</div>
                        </div>
                        
                        {/* Search Results */}
                        {customers.map((customer) => (
                          <div
                            key={customer.cid}
                            onClick={() => selectCustomer(customer)}
                            className="p-4 border-b border-slate-100 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 cursor-pointer transition-all"
                          >
                            <div className="font-bold text-text text-lg">{customer.name}</div>
                            <div className="flex gap-4 mt-1 flex-wrap">
                              {customer.email && <div className="text-sm text-muted flex items-center gap-1"><Icon name="email" size={16} />{customer.email}</div>}
                              {customer.phone && <div className="text-sm text-muted flex items-center gap-1"><Icon name="phone" size={16} />{customer.phone}</div>}
                              {customer.accountBalance !== undefined && (
                                <div className="text-sm text-muted flex items-center gap-1">
                                  <Icon name="credit_card" size={16} />Balance: ${customer.accountBalance.toFixed(2)}
                                </div>
                              )}
                            </div>
                          </div>
                        ))}
                      </>
                    )}
                  </div>
                )}     
              </div>
            )}
            
            {selectedCustomer && (
              <div className="mt-4 sm:mt-5 md:mt-6 space-y-4 sm:space-y-5 md:space-y-6">
                {/* Address Cards Container */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 md:gap-6">
                  {/* Billing Address Card */}
                  <div className="bg-surface-2 border-2 border-border rounded-xl p-6 shadow-lg">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg font-bold text-text flex items-center gap-2">
                        <Icon name="description" size={20} /> Billing Address
                      </h3>
                      <button
                        onClick={(e) => {
                          e.preventDefault();
                          setEditingAddress({...selectedCustomer});
                          setShowBillingEdit(true);
                        }}
                        className="px-4 py-2 bg-brand hover:opacity-90 text-surface rounded-lg text-sm font-semibold cursor-pointer transition-all shadow-md hover:shadow-lg active:transform active:scale-95 flex items-center gap-2"
                      >
                        <Icon name="edit" size={16} /> Edit
                      </button>
                    </div>
                    <div className="bg-surface p-4 rounded-lg border border-border shadow-sm">
                      <div className="font-bold text-text text-lg mb-2">{selectedCustomer.name}</div>
                      <div className="space-y-1 text-text">
                        {selectedCustomer.billingAddress1 && <div className="flex items-start gap-2"><Icon name="location_on" size={16} className="text-brand" />{selectedCustomer.billingAddress1}</div>}
                        {selectedCustomer.billingAddress2 && <div className="pl-6">{selectedCustomer.billingAddress2}</div>}
                        {(selectedCustomer.billingCity || selectedCustomer.billingState || selectedCustomer.billingPostcode) && (
                          <div className="flex items-center gap-2">
                            <Icon name="location_city" size={16} className="text-brand" />
                            {[selectedCustomer.billingCity, selectedCustomer.billingState, selectedCustomer.billingPostcode].filter(Boolean).join(', ')}
                          </div>
                        )}
                        {selectedCustomer.billingCountry && <div className="flex items-center gap-2"><Icon name="public" size={16} className="text-brand" />{selectedCustomer.billingCountry}</div>}
                        {!selectedCustomer.billingAddress1 && !selectedCustomer.billingCity && (
                          <div className="text-muted italic">No billing address on file</div>
                        )}
                      </div>
                    </div>
                  </div>
                  
                  {/* Delivery Address Card */}
                  <div className="bg-surface-2 border-2 border-border rounded-xl p-6 shadow-lg">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg font-bold text-text flex items-center gap-2">
                        <Icon name="local_shipping" size={20} /> Delivery Address
                      </h3>
                      <button
                        onClick={(e) => {
                          e.preventDefault();
                          setEditingAddress({...selectedCustomer});
                          setShowShippingEdit(true);
                        }}
                        className="px-4 py-2 bg-success hover:opacity-90 text-surface rounded-lg text-sm font-semibold cursor-pointer transition-all shadow-md hover:shadow-lg active:transform active:scale-95 flex items-center gap-2"
                      >
                        <Icon name="edit" size={16} /> Edit
                      </button>
                    </div>
                    <div className="bg-bg p-4 rounded-lg border border-border shadow-sm">
                      <div className="font-bold text-text text-lg mb-2">{selectedCustomer.name}</div>
                      <div className="space-y-1 text-text">
                        {selectedCustomer.deliveryAddress1 && <div className="flex items-start gap-2"><Icon name="location_on" size={16} className="text-success" />{selectedCustomer.deliveryAddress1}</div>}
                        {selectedCustomer.deliveryAddress2 && <div className="pl-6">{selectedCustomer.deliveryAddress2}</div>}
                        {(selectedCustomer.deliveryCity || selectedCustomer.deliveryState || selectedCustomer.deliveryPostcode) && (
                          <div className="flex items-center gap-2">
                            <Icon name="location_city" size={16} className="text-success" />
                            {[selectedCustomer.deliveryCity, selectedCustomer.deliveryState, selectedCustomer.deliveryPostcode].filter(Boolean).join(', ')}
                          </div>
                        )}
                        {selectedCustomer.deliveryCountry && <div className="flex items-center gap-2"><Icon name="public" size={16} className="text-success" />{selectedCustomer.deliveryCountry}</div>}
                        {!selectedCustomer.deliveryAddress1 && !selectedCustomer.deliveryCity && (
                          <div className="text-muted italic">No delivery address on file</div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
                
                {/* Order Number */}
                <div className="bg-surface border-2 border-border rounded-xl p-5 shadow-md">
                  <label className="text-sm font-bold text-text uppercase tracking-wide flex items-center gap-2 mb-3">
                    <Icon name="tag" size={20} /> Order / Reference Number
                  </label>
                  <input
                    type="text"
                    value={orderNumber}
                    onChange={(e) => setOrderNumber(e.target.value)}
                    placeholder="Enter order number or reference..."
                    className="w-full px-4 py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none transition-all text-base shadow-sm"
                  />
                </div>
                
                {/* Sale Comments - 50/50 Column Layout */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
                  {/* Sale Comments Column */}
                  <div className="bg-surface-2 p-4 lg:p-5 rounded-xl border-2 border-border">
                    <label className="text-sm font-bold text-text uppercase tracking-wide flex items-center gap-2 mb-2 lg:mb-3">
                      <Icon name="chat" size={20} /> <span className="hidden sm:inline">Sale Comments (Customer Visible)</span><span className="sm:hidden">Comments</span>
                    </label>
                    <textarea
                      value={saleComments}
                      onChange={(e) => setSaleComments(e.target.value)}
                      className="w-full px-3 py-2 lg:px-4 lg:py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:outline-none transition-all resize-none text-sm"
                      rows={3}
                      placeholder="Enter comments visible to the customer..."
                    />
                    <div className="flex gap-2 mt-2 lg:mt-3">
                      <button
                        onClick={() => setShowReceiptOptions(true)}
                        className="w-full px-3 py-2 lg:px-4 bg-brand hover:opacity-90 text-surface rounded-lg transition-all shadow-md hover:shadow-lg text-xs lg:text-sm font-semibold flex items-center justify-center gap-1 lg:gap-2"
                      >
                        <Icon name="receipt" size={16} /> <span className="hidden sm:inline">Receipt Options</span><span className="sm:hidden">Receipt</span>
                      </button>
                    </div>
                  </div>
                  
                  {/* Internal Comments Column */}
                  <div className="bg-surface-2 p-4 lg:p-5 rounded-xl border-2 border-border">
                    <label className="text-sm font-bold text-text uppercase tracking-wide flex items-center gap-2 mb-2 lg:mb-3">
                      <Icon name="lock" size={20} /> <span className="hidden sm:inline">Internal Comments (Staff Only)</span><span className="sm:hidden">Internal</span>
                    </label>
                    <textarea
                      value={internalComments}
                      onChange={(e) => setInternalComments(e.target.value)}
                      className="w-full px-3 py-2 lg:px-4 lg:py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-warn focus:outline-none transition-all resize-none text-sm"
                      rows={3}
                      placeholder="Enter internal notes (not visible to customer)..."
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
 
          {/* Product Search & Sales Items - Combined Section */}
          <div className="w-full bg-surface shadow-2xl p-4 sm:p-6 md:p-8 rounded-lg sm:rounded-xl md:rounded-2xl border border-border">
            {/* Product Search & Selection */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-5 md:mb-6">
              <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-text flex items-center gap-2 sm:gap-3">
                <Icon name="search" size={28} /> Product Lookup
              </h2>
              <button
                onClick={() => setShowPrinterSearch(true)}
                className="w-full sm:w-auto px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 bg-brand2 text-text rounded-lg sm:rounded-xl hover:opacity-90 active:transform active:scale-95 transition-all duration-150 text-xs sm:text-sm font-semibold shadow-lg hover:shadow-xl flex items-center justify-center gap-2"
              >
                <Icon name="print" size={20} /> Printers
              </button>
            </div>
        
            {/* Search Controls - Modern Design */}
            <div className="space-y-3 sm:space-y-4 mb-4 sm:mb-5 md:mb-6">
              {/* Product Search Input */}
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 sm:pl-4 flex items-center pointer-events-none">
                  <Icon name="search" size={20} className="text-muted" />
                </div>
                <input
                  type="text"
                  placeholder="Search products..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2.5 sm:py-3 border-2 border-border rounded-lg sm:rounded-xl focus:ring-2 focus:ring-success focus:border-success focus:outline-none transition-all text-sm sm:text-base shadow-sm"
                />
              </div>
              
              {/* Barcode Scanner Input */}
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 sm:pl-4 flex items-center pointer-events-none">
                  <Icon name="qr_code_scanner" size={20} className="text-muted" />
                </div>
                <input
                  ref={barcodeInputRef}
                  type="text"
                  placeholder="Scan barcode..."
                  className="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2.5 sm:py-3 border-2 border-border rounded-lg sm:rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none transition-all text-sm sm:text-base shadow-sm"
                  value={barcode}
                  onChange={(e) => setBarcode(e.target.value)}
                  onKeyDown={async (e) => {
                    if (e.key === 'Enter' && barcode) {
                      e.preventDefault();
                      // Try to find in current products first
                      let product = products.find(p => p.barcode === barcode);
                  
                  // If not found, search by barcode via API
                  if (!product) {
                    setLoading(true);
                  type ApiResult = {
                    success: boolean;
                    data?: any;
                    error?: string;
                  };
                  const result: ApiResult = await apiClient.getProducts({ barcode, limit: 1, source: 'openapi' });
                  if (result.success && result.data) {
                    const productsData = Array.isArray(result.data)
                      ? result.data
                      : result.data?.data?.Product || result.data;
                    if (Array.isArray(productsData) && productsData.length > 0) {
                      const p = productsData[0];
                      // Only create product if it has valid data
                      if (p.Pid && (p.Description || p.Name) && (p.Price !== undefined || p.SellPrice !== undefined)) {
                        product = {
                          pid: p.Pid || p.pid,
                          name: p.Description || p.Name || p.name,
                          barcode: p.Barcode || p.barcode || p.Plu,
                          sellprice: parseFloat(p.Price ?? p.SellPrice ?? p.sellprice ?? p.Price1 ?? 0),
                          description: p.Description || p.description,
                          stocklevel: p.StockLevel || p.stocklevel || p.Qty
                        };
                      }
                    }
                  }
                  setLoading(false);
                }
                
                if (product) {
                  addToSale(product);
                  setBarcode(''); // Clear barcode after successful scan
                } else {
                  alert(`Product not found for barcode: ${barcode}`);
                }
              }
            }}
          />
        </div>
      </div>
      
      {/* Product Search Results */}
      {searchTerm.length >= 2 && (
        <div className="mt-4 bg-surface border-2 border-border rounded-xl shadow-xl max-h-96 overflow-y-auto">
          {loading ? (
            <div className="p-6 text-center">
              <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-brand border-t-transparent"></div>
              <div className="mt-3 text-text font-medium">Searching products...</div>
            </div>
          ) : products.length === 0 ? (
            <div className="p-6 text-center text-muted">
              <Icon name="search" size={64} className="inline-block mb-2" />
              <div className="font-semibold">No products found</div>
              <div className="text-sm">Try a different search term</div>
            </div>
          ) : (
            <div className="divide-y divide-slate-200">
              {products.map((product) => (
                <button
                  key={product.pid}
                  onClick={() => {
                    addToSale(product);
                    setSearchTerm(''); // Clear search after adding
                  }}
                  className="w-full p-4 hover:bg-surface-2 transition-colors text-left flex items-center justify-between group"
                >
                  <div className="flex-1">
                    <div className="font-semibold text-text group-hover:text-brand transition-colors">
                      {product.name}
                    </div>
                    <div className="text-sm text-muted mt-1 flex gap-4">
                      {product.barcode && (
                        <span className="flex items-center gap-1">
                          <Icon name="tag" size={16} /> {product.barcode}
                        </span>
                      )}
                      {product.manufacturerCode && (
                        <span className="flex items-center gap-1">
                          <Icon name="local_offer" size={16} /> {product.manufacturerCode}
                        </span>
                      )}
                      {product.stocklevel !== undefined && (
                        <span className={`flex items-center gap-1 ${product.stocklevel > 0 ? 'text-success' : 'text-danger'}`}>
                          <Icon name="inventory_2" size={16} /> Stock: {product.stocklevel}
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="text-right ml-4">
                    <div className="text-xl font-bold text-brand">
                      ${product.sellprice.toFixed(2)}
                    </div>
                    <div className="text-xs text-slate-500 mt-1">
                      Click to add
                    </div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      )}
 
        {/* Sale Items Table and Payment */}
        {/* Sale Items Table - Premium Design */}
        {saleItems.length > 0 ? (
          <div className="mb-4 sm:mb-5 md:mb-6">
            {/* Desktop Table View */}
            <div className="hidden lg:block overflow-x-auto border-2 border-slate-200 rounded-xl md:rounded-2xl shadow-xl">
            <table className="w-full text-sm">
              <thead className="bg-gradient-to-r from-blue-600 to-indigo-600 border-b-4 border-blue-700">
                <tr>
                  <th className="px-4 py-4 text-left font-bold text-surface">Description</th>
                  <th className="px-4 py-4 text-left font-bold text-surface">Mfr Part</th>
                  <th className="px-4 py-4 text-left font-bold text-surface">Serial #</th>
                  <th className="px-4 py-4 text-center font-bold text-surface">Qty</th>
                  <th className="px-4 py-4 text-right font-bold text-surface">Each</th>
                  <th className="px-4 py-4 text-right font-bold text-surface">Disc %</th>
                  <th className="px-4 py-4 text-right font-bold text-surface">Total</th>
                  <th className="px-4 py-4 text-right font-bold text-surface">GP $</th>
                  <th className="px-4 py-4 text-center font-bold text-surface">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-surface divide-y divide-border">
                {saleItems.map((item, index) => {
                  const grossProfit = item.cost ? (item.total - (item.cost * item.qty)) : 0;
                  const discountedPrice = item.discount ? item.price * (1 - item.discount / 100) : item.price;
                  
                  return (
                    <tr key={`${item.pid}-${index}`} className={`hover:bg-surface-2 transition-colors ${item.isReturn ? 'bg-danger/10' : index % 2 === 0 ? 'bg-surface/50' : 'bg-surface'}`}>
                      <td className="px-4 py-4">
                        <div className="flex items-center gap-3">
                          <div className="flex-1">
                            <div className="font-semibold text-text">{item.name}</div>
                            {item.isReturn && (
                              <span className="inline-flex items-center gap-1 text-xs bg-danger text-surface px-3 py-1 rounded-full font-bold mt-1">
                                <Icon name="undo" size={14} /> RETURN
                              </span>
                            )}
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-4 text-muted font-mono text-xs">{item.manufacturerCode || '—'}</td>
                      <td className="px-4 py-4">
                        {editingSerialPid === item.pid ? (
                          <input
                            type="text"
                            value={tempSerialNumber}
                            onChange={(e) => setTempSerialNumber(e.target.value)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter') {
                                updateSerialNumber(item.pid, tempSerialNumber);
                              } else if (e.key === 'Escape') {
                                setEditingSerialPid(null);
                                setTempSerialNumber('');
                              }
                            }}
                            onBlur={() => {
                              if (tempSerialNumber.trim()) {
                                updateSerialNumber(item.pid, tempSerialNumber);
                              } else {
                                setEditingSerialPid(null);
                                setTempSerialNumber('');
                              }
                            }}
                            placeholder="Enter serial..."
                            className="w-32 px-2 py-1 border-2 border-brand rounded text-xs font-mono font-semibold focus:ring-2 focus:ring-brand focus:outline-none"
                            autoFocus
                          />
                        ) : (
                          <button
                            onClick={() => startEditingSerial(item.pid, item.serialNumber)}
                            className={`group inline-flex items-center gap-1 text-xs px-2 py-1 rounded font-mono font-semibold transition-all hover:scale-105 ${
                              item.serialNumber ? 'serial-btn-active' : 'serial-btn-inactive'
                            }`}
                          >
                            <Icon name="tag" size={14} />
                            <span>{item.serialNumber || 'Add Serial'}</span>
                            <Icon name="edit" size={10} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                          </button>
                        )}
                      </td>
                      <td className="px-4 py-4">
                        <div className="flex items-center justify-center">
                          <input
                            type="number"
                            value={item.qty}
                            onChange={(e) => updateQuantity(item.pid, Number(e.target.value))}
                            className="w-20 px-3 py-2 border-2 border-border rounded-lg text-center font-bold focus:ring-2 focus:ring-brand focus:outline-none"
                          />
                        </div>
                      </td>
                      <td className="px-4 py-4 text-right font-semibold text-text">
                        ${discountedPrice.toFixed(2)}
                      </td>
                      <td className="px-4 py-4 text-right">
                        <span className={`font-semibold ${item.discount > 0 ? 'text-warn' : 'text-muted'}`}>
                          {item.discount > 0 ? `${item.discount.toFixed(1)}%` : '—'}
                        </span>
                      </td>
                      <td className="px-4 py-4 text-right font-bold text-lg text-brand">${item.total.toFixed(2)}</td>
                      <td className="px-4 py-4 text-right">
                        <span className={`font-bold ${grossProfit >= 0 ? 'text-success' : 'text-danger'}`}>
                          ${grossProfit.toFixed(2)}
                        </span>
                      </td>
                      <td className="px-4 py-4">
                        <div className="flex gap-2 justify-center flex-wrap">
                          <button
                            onClick={() => removeFromSale(item.pid)}
                            className="px-3 py-1.5 bg-danger hover:opacity-90 text-surface rounded-lg text-xs font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95"
                            title="Delete item"
                          >
                            <Icon name="delete" size={16} />
                          </button>
                          <button
                            onClick={() => toggleReturn(item.pid)}
                            className={`px-3 py-1.5 ${item.isReturn ? 'bg-surface-2 text-text' : 'bg-warn text-surface'} hover:opacity-90 rounded-lg text-xs font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95`}
                            title="Toggle return"
                          >
                            <Icon name="undo" size={16} />
                          </button>
                          <button
                            onClick={() => openLineItemEdit(item)}
                            className="px-3 py-1.5 bg-brand hover:opacity-90 text-surface rounded-lg text-xs font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95"
                            title="Edit price/discount"
                          >
                            <Icon name="edit" size={16} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
                
                {/* TOTAL Row - Enhanced Design */}
                <tr className="bg-gradient-to-r from-success/20 to-success/30 border-t-4 border-success">
                  <td colSpan={5} className="px-4 py-4 text-right font-bold text-lg uppercase tracking-wide text-text">
                    Sale Total (Inc GST):
                  </td>
                  <td className="px-4 py-4 text-right font-extrabold text-3xl text-success">
                    ${total.toFixed(2)}
                  </td>
                  <td colSpan={2}></td>
                </tr>
                
                {/* Payment Options Row - Modern Button Design */}
                <tr className="bg-surface">
                  <td colSpan={8} className="p-8">
                    <div className="mb-4">
                      <h3 className="text-xl font-bold text-text mb-4 flex items-center gap-2">
                        <Icon name="credit_card" size={24} /> Payment Methods
                      </h3>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                        {paymentMethods.map((method) => (
                          <button
                            key={method.code}
                            onClick={() => processSale(method.name)}
                            disabled={loading}
                            className="group px-6 py-4 bg-gradient-to-br from-brand to-brand2 hover:opacity-90 text-surface rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-xl hover:shadow-2xl hover:transform hover:scale-105 active:scale-95 flex flex-col items-center gap-2"
                          >
                            <span className="text-3xl">{method.icon}</span>
                            <span>{method.name}</span>
                          </button>
                        ))}
                      </div>
                    </div>
                    
                    <div className="border-t-2 border-border pt-6 mt-6">
                      <h4 className="text-sm font-bold text-muted uppercase tracking-wide mb-3 flex items-center gap-2">
                        <Icon name="settings" size={20} /> Special Actions
                      </h4>
                      <div className="flex gap-3 flex-wrap">
                        <button
                          className="px-5 py-2.5 bg-surface-2 hover:opacity-90 text-text rounded-lg font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95 flex items-center gap-2"
                        >
                          <Icon name="inventory_2" size={20} /> Save to Picking
                        </button>
                        <button
                          className="px-5 py-2.5 bg-warn hover:opacity-90 text-surface rounded-lg font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95 flex items-center gap-2"
                        >
                          <Icon name="warning" size={20} /> Mark Incomplete
                        </button>
                        <button
                          className="px-5 py-2.5 bg-brand2 hover:opacity-90 text-text rounded-lg font-semibold transition-all shadow-md hover:shadow-lg active:transform active:scale-95 flex items-center gap-2"
                        >
                          <Icon name="description" size={20} /> Job Docket
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          {/* Mobile Card View - Shows on screens smaller than lg */}
          <div className="lg:hidden space-y-3 border-2 border-slate-200 rounded-lg p-3 shadow-xl">
            {saleItems.map((item, index) => {
              const grossProfit = item.cost ? (item.total - (item.cost * item.qty)) : 0;
              const discountedPrice = item.discount ? item.price * (1 - item.discount / 100) : item.price;
              
              return (
                <div 
                  key={`${item.pid}-${index}`} 
                  className={`bg-surface border-2 rounded-lg shadow-md overflow-hidden ${item.isReturn ? 'border-danger bg-danger/10' : 'border-border'} mb-3 last:mb-0`}
                >
                  {/* Card Header */}
                  <div className="bg-gradient-to-r from-brand to-brand2 px-3 py-2 flex items-start justify-between">
                    <div className="flex-1 pr-2">
                      <div className="font-bold text-white text-sm leading-tight">{item.name}</div>
                      {item.manufacturerCode && (
                        <div className="text-xs text-white/80 mt-1 font-mono">{item.manufacturerCode}</div>
                      )}
                    </div>
                    <div className="text-right">
                      <div className="text-xl font-bold text-white whitespace-nowrap">${item.total.toFixed(2)}</div>
                    </div>
                  </div>
                  
                  {/* Card Body */}
                  <div className="p-3 space-y-2">
                    {/* Qty and Price */}
                    <div className="grid grid-cols-2 gap-2 text-sm">
                      <div>
                        <div className="text-xs text-muted font-semibold">Qty</div>
                        <input
                          type="number"
                          value={item.qty}
                          onChange={(e) => updateQuantity(item.pid, Number(e.target.value))}
                          className="w-full mt-1 px-2 py-1.5 border-2 border-slate-300 rounded text-center font-bold text-sm focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <div className="text-xs text-slate-500 font-semibold">Each</div>
                        <div className="mt-1 text-lg font-bold text-slate-700">${discountedPrice.toFixed(2)}</div>
                      </div>
                    </div>
                    
                    {/* Actions */}
                    <div className="flex gap-2">
                      <button
                        onClick={() => openLineItemEdit(item)}
                        className="flex-1 px-2 py-1.5 bg-brand hover:opacity-90 text-surface rounded font-semibold text-xs flex items-center justify-center gap-1"
                      >
                        <Icon name="edit" size={14} /> Edit
                      </button>
                      <button
                        onClick={() => toggleReturn(item.pid)}
                        className={`flex-1 px-2 py-1.5 ${item.isReturn ? 'bg-surface-2 text-text' : 'bg-warn text-surface'} hover:opacity-90 rounded font-semibold text-xs flex items-center justify-center gap-1`}
                      >
                        <Icon name="undo" size={14} />
                      </button>
                      <button
                        onClick={() => removeFromSale(item.pid)}
                        className="px-2 py-1.5 bg-danger hover:opacity-90 text-surface rounded font-semibold text-xs"
                      >
                        <Icon name="delete" size={14} />
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
            
            {/* Mobile Total Banner */}
            <div className="bg-gradient-to-r from-success/20 to-success/30 border-4 border-success rounded-lg p-3 mt-3">
              <div className="flex items-center justify-between">
                <div className="text-sm sm:text-base font-bold uppercase text-text">Total:</div>
                <div className="text-2xl sm:text-3xl font-extrabold text-success">${total.toFixed(2)}</div>
              </div>
            </div>
            
            {/* Mobile Payment Buttons */}
            <div className="bg-surface border-2 border-border rounded-lg p-3 mt-3">
              <h3 className="text-base font-bold text-text mb-2 flex items-center gap-2">
                <Icon name="credit_card" size={20} /> Payment
              </h3>
              <div className="grid grid-cols-2 gap-2">
                {paymentMethods.map((method) => (
                  <button
                    key={method.code}
                    onClick={() => processSale(method.name)}
                    disabled={loading}
                    className="px-3 py-2 bg-gradient-to-br from-brand to-brand2 hover:opacity-90 text-surface rounded-lg font-bold text-xs disabled:opacity-50 transition-all shadow-lg active:scale-95 flex flex-col items-center gap-1"
                  >
                    <span className="text-xl">{method.icon}</span>
                    <span>{method.name}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
          </div>
        ) : (
          <div className="p-6 sm:p-12 text-center border-2 border-dashed border-border rounded-2xl mb-6 bg-surface">
            <Icon name="shopping_cart" size={96} className="inline-block mb-3 sm:mb-4 text-muted" />
            <div className="text-xl sm:text-2xl font-bold text-text mb-2">No Items in Sale</div>
            <div className="text-sm sm:text-base text-muted">Search for products above to add them to the sale</div>
          </div>
        )}
        
        {loading && (
          <div className="mt-6 p-6 text-center bg-brand/10 border-2 border-brand rounded-xl">
            <div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-brand border-t-transparent mb-3"></div>
            <div className="text-brand font-bold text-lg">Processing sale...</div>
          </div>
        )}
      </div>
    </div>
  </div>
 
  {/* Customer Search Modal - Enhanced (Deprecated in favor of inline search) */}
  {showCustomerModal && (
    <div className="modal-overlay">
      <div className="bg-surface rounded-2xl shadow-2xl p-8 w-full max-w-3xl max-h-[80vh] overflow-y-auto border-2 border-border">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-3xl font-bold text-text">Select Customer</h2>
          <button
            onClick={() => { setShowCustomerModal(false); setCustomerSearch(''); }}
            className="text-slate-400 hover:text-slate-600 text-4xl font-bold transition-colors"
          >
            ×
          </button>
        </div>
        
        <input
          type="text"
          value={customerSearch}
          onChange={(e) => setCustomerSearch(e.target.value)}
          placeholder="Search customers..."
          className="w-full px-4 py-2 border rounded-lg mb-4 focus:ring-2 focus:ring-blue-500 focus:outline-none"
          autoFocus
        />
        
        {customerLoading ? (
          <div className="text-center py-8">Loading customers...</div>
        ) : (
          <div className="space-y-2">
            {customers
              .filter(c => 
                !customerSearch || 
                c.name.toLowerCase().includes(customerSearch.toLowerCase()) ||
                (c.email && c.email.toLowerCase().includes(customerSearch.toLowerCase())) ||
                (c.phone && c.phone.includes(customerSearch))
              )
              .map((customer) => (
                <div
                  key={customer.cid}
                  onClick={() => selectCustomer(customer)}
                  className="p-4 border rounded-lg hover:bg-brand/10 cursor-pointer"
                >
                  <div className="font-semibold">{customer.name}</div>
                  {customer.email && <div className="text-sm text-muted">{customer.email}</div>}
                  {customer.phone && <div className="text-sm text-muted">{customer.phone}</div>}
                </div>
              ))}
          </div>
        )}
      </div>
    </div>
  )}
 
  {/* Printer Search Modal - Enhanced */}
  {showPrinterSearch && (
    <div className="modal-overlay">
      <div className="bg-surface rounded-2xl shadow-2xl p-8 w-full max-w-4xl max-h-[80vh] overflow-y-auto border-2 border-border">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent flex items-center gap-3">
            <span>🖨️</span> {selectedPrinter ? `Cartridges for ${selectedPrinter.name}` : 'Printer Search'}
          </h2>
          <button
            onClick={() => {
              setShowPrinterSearch(false);
              setPrinterSearchTerm("");
              setPrinterResults([]);
              setSelectedPrinter(null);
              setPrinterCartridges([]);
            }}
            className="text-slate-400 hover:text-slate-600 text-3xl font-bold transition-colors"
          >
            ×
          </button>
        </div>
 
        {!selectedPrinter ? (
          <>
            <input
              type="text"
              value={printerSearchTerm}
              onChange={(e) => setPrinterSearchTerm(e.target.value)}
              placeholder="Search for printers (e.g., Canon, HP, Brother)..."
              className="w-full px-4 py-3 border-2 border-slate-300 rounded-xl mb-6 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all text-base shadow-sm"
              autoFocus
            />
            
            {printerSearchTerm.length < 2 ? (
              <div className="text-center py-12 text-muted">
                <Icon name="print" size={96} className="inline-block mb-4" />
                <p className="text-lg">Enter at least 2 characters to search for printers</p>
              </div>
            ) : printerResults.length === 0 ? (
              <div className="text-center py-12 text-muted">
                <Icon name="search" size={96} className="inline-block mb-4" />
                <p className="text-lg">No printers found matching "{printerSearchTerm}"</p>
              </div>
            ) : (
              <div className="space-y-3">
                <p className="text-sm text-slate-600 font-semibold mb-4">
                  Found {printerResults.length} printer{printerResults.length !== 1 ? 's' : ''} - Click to view compatible cartridges
                </p>
                {printerResults.map((product) => (
                  <button
                    key={product.pid}
                    onClick={() => {
                      setSelectedPrinter(product);
                      
                      // Try to use stored relationships first
                      const relationship = printerCartridgeRelationships.find(
                        r => r.printerId === product.pid
                      );
                      
                      if (relationship && relationship.cartridges.length > 0) {
                        // Use stored relationships
                        console.log(`Using stored relationships for printer ${product.pid}:`, relationship.cartridges);
                        const cartridges = allProducts.filter(p => 
                          relationship.cartridges.includes(p.pid)
                        );
                        console.log('Found cartridges from relationships:', cartridges.length);
                        setPrinterCartridges(cartridges);
                      } else {
                        // Fallback to heuristic matching if no relationships stored
                        console.log('No stored relationships found, using heuristic matching');
                        
                        const printerText = `${product.name} ${product.description || ''} ${product.manufacturerCode || ''}`;
                        console.log('Selected printer:', printerText);
                        
                        // Extract brand (common printer brands)
                        const brandMatch = printerText.match(/\b(HP|Canon|Brother|Epson|Kyocera|Lexmark|Samsung|Dell|Xerox|Ricoh|Sharp|Konica|Minolta|Oki|Pantum|Fuji|Toshiba)\b/i);
                        const brand = brandMatch ? brandMatch[0].toLowerCase() : '';
                        
                        // Extract printer model codes
                        const modelPattern = /\b([A-Z]{1,4}[-\s]?[A-Z0-9]{3,8}[A-Z]{0,3})\b/gi;
                        const models = printerText.match(modelPattern) || [];
                        
                        // Extract core model numbers
                        const coreNumbers = printerText.match(/\b\d{4,5}\b/g) || [];
                        
                        console.log('Detected brand:', brand);
                        console.log('Detected printer models:', models);
                        console.log('Core model numbers:', coreNumbers);
                        
                        // Filter for cartridge products
                        const normalize = (str: string) => str.replace(/[-\s]/g, '').toLowerCase();
                        
                        const cartridges = allProducts.filter(p => {
                          const productText = `${p.name} ${p.description || ''} ${p.manufacturerCode || ''}`;
                          const lowerText = productText.toLowerCase();
                          
                          // Must be a cartridge/toner/ink product
                          const isCartridge = /\b(cartridge|toner|ink|drum)\b/i.test(productText);
                          if (!isCartridge) return false;
                          
                          // Must have matching brand
                          if (!brand || !lowerText.includes(brand)) return false;
                          
                          // Check if any printer model codes match (normalized)
                          const normalizedProduct = normalize(productText);
                          const hasExactModel = models.some(model => {
                            const normalizedModel = normalize(model);
                            return normalizedProduct.includes(normalizedModel);
                          });
                          
                          // Also check if core model numbers appear
                          const hasCoreNumber = coreNumbers.some(num => productText.includes(num));
                          
                          return hasExactModel || hasCoreNumber;
                        });
                        
                        console.log('Found cartridges:', cartridges.length);
                        setPrinterCartridges(cartridges.slice(0, 100));
                      }
                    }}
                    className="w-full flex justify-between items-center p-4 border-2 border-border rounded-xl hover:border-brand2 hover:bg-brand2/10 transition-all duration-200 text-left group shadow-sm hover:shadow-md"
                  >
                    <div className="flex-1">
                      <div className="font-bold text-text mb-1 group-hover:text-brand2 transition-colors">
                        {product.name}
                      </div>
                      {product.description && (
                        <div className="text-sm text-muted mb-2">{product.description}</div>
                      )}
                      <div className="flex gap-4 text-xs text-muted">
                        {product.manufacturerCode && (
                          <span className="flex items-center gap-1">
                            <Icon name="local_offer" size={14} /> Model: {product.manufacturerCode}
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="text-right ml-4">
                      <div className="text-sm text-info font-semibold">
                        View Cartridges →
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </>
        ) : (
          <>
            <button
              onClick={() => {
                setSelectedPrinter(null);
                setPrinterCartridges([]);
              }}
              className="mb-6 px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg transition-all flex items-center gap-2 font-semibold"
            >
              ← Back to Printer Search
            </button>
 
            {printerCartridges.length === 0 ? (
              <div className="text-center py-12 text-muted">
                <Icon name="inventory_2" size={96} className="inline-block mb-4" />
                <p className="text-lg">No cartridges found for this printer</p>
                <p className="text-sm mt-2">Try searching for products directly or contact support</p>
              </div>
            ) : (
              <div className="space-y-3">
                <p className="text-sm text-slate-600 font-semibold mb-4">
                  Found {printerCartridges.length} compatible cartridge{printerCartridges.length !== 1 ? 's' : ''}
                </p>
                {printerCartridges.map((product) => (
                  <button
                    key={product.pid}
                    onClick={() => {
                      addToSale(product);
                      setShowPrinterSearch(false);
                      setPrinterSearchTerm("");
                      setPrinterResults([]);
                      setSelectedPrinter(null);
                      setPrinterCartridges([]);
                    }}
                    className="w-full flex justify-between items-center p-4 border-2 border-border rounded-xl hover:border-success hover:bg-success/10 transition-all duration-200 text-left group shadow-sm hover:shadow-md"
                  >
                    <div className="flex-1">
                      <div className="font-bold text-text mb-1 group-hover:text-success transition-colors">
                        {product.name}
                      </div>
                      {product.description && (
                        <div className="text-sm text-muted mb-2">{product.description}</div>
                      )}
                      <div className="flex gap-4 text-xs text-muted">
                        {product.barcode && (
                          <span className="flex items-center gap-1">
                            <Icon name="tag" size={14} /> {product.barcode}
                          </span>
                        )}
                        {product.manufacturerCode && (
                          <span className="flex items-center gap-1">
                            <Icon name="local_offer" size={14} /> {product.manufacturerCode}
                          </span>
                        )}
                        {product.stocklevel !== undefined && (
                          <span className={`flex items-center gap-1 ${product.stocklevel > 0 ? 'text-success' : 'text-danger'}`}>
                            <Icon name="inventory_2" size={14} /> Stock: {product.stocklevel}
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="text-right ml-4">
                      <div className="text-xl font-bold text-success">
                        ${product.sellprice.toFixed(2)}
                      </div>
                      <div className="text-xs text-slate-500 mt-1">
                        Click to add
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )}
 
  {/* Line Item Edit Modal - Premium Design */}
  {showLineItemEdit && editingLineItem && (
    <div className="modal-overlay">
      <div className="bg-surface rounded-2xl shadow-2xl p-8 w-full max-w-md border-2 border-border transform transition-all">
        <h2 className="text-3xl font-bold bg-gradient-to-r from-brand to-brand2 bg-clip-text text-transparent mb-6 flex items-center gap-2">
          <Icon name="edit" size={32} /> Edit Line Item
        </h2>
        
        <div className="mb-6">
          <label className="block font-bold text-text mb-2 uppercase text-sm tracking-wide">Product</label>
          <div className="p-4 bg-surface-2 border-2 border-border rounded-xl text-text font-semibold">{editingLineItem.name}</div>
        </div>
        
        <div className="mb-6">
          <label className="block font-bold text-text mb-2 uppercase text-sm tracking-wide flex items-center gap-2">
            <Icon name="attach_money" size={20} /> Price
          </label>
          <input
            type="number"
            step="0.01"
            value={tempPrice}
            onChange={(e) => setTempPrice(parseFloat(e.target.value))}
            className="w-full px-4 py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none text-lg font-semibold transition-all"
          />
        </div>
        
        <div className="mb-6">
          <label className="block font-bold text-text mb-2 uppercase text-sm tracking-wide flex items-center gap-2">
            <Icon name="local_offer" size={20} /> Discount %
          </label>
          <input
            type="number"
            step="0.1"
            value={tempDiscount}
            onChange={(e) => setTempDiscount(parseFloat(e.target.value))}
            className="w-full px-4 py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none text-lg font-semibold transition-all"
          />
        </div>
        
        {editingLineItem.cost && (
          <div className="mb-6 p-4 bg-gradient-to-br from-slate-50 to-blue-50 border-2 border-slate-200 rounded-xl">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <div className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-1">Cost</div>
                <div className="text-lg font-bold text-slate-700">${editingLineItem.cost.toFixed(2)}</div>
              </div>
              <div>
                <div className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-1">Margin $</div>
                <div className={`text-lg font-bold ${(() => {
                  const discountedPrice = tempDiscount ? tempPrice * (1 - tempDiscount / 100) : tempPrice;
                  const margin = (discountedPrice - editingLineItem.cost) * editingLineItem.qty;
                  return margin >= 0 ? 'text-success' : 'text-danger';
                })()}`}>
                  ${(() => {
                    const discountedPrice = tempDiscount ? tempPrice * (1 - tempDiscount / 100) : tempPrice;
                    const margin = (discountedPrice - editingLineItem.cost) * editingLineItem.qty;
                    return margin.toFixed(2);
                  })()}
                </div>
              </div>
              <div>
                <div className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-1">Margin %</div>
                <div className={`text-lg font-bold ${(() => {
                  const discountedPrice = tempDiscount ? tempPrice * (1 - tempDiscount / 100) : tempPrice;
                  const marginPercent = discountedPrice > 0 ? ((discountedPrice - editingLineItem.cost) / discountedPrice) * 100 : 0;
                  return marginPercent >= 0 ? 'text-success' : 'text-danger';
                })()}`}>
                  {(() => {
                    const discountedPrice = tempDiscount ? tempPrice * (1 - tempDiscount / 100) : tempPrice;
                    const marginPercent = discountedPrice > 0 ? ((discountedPrice - editingLineItem.cost) / discountedPrice) * 100 : 0;
                    return marginPercent.toFixed(1);
                  })()}%
                </div>
              </div>
              <div>
                <div className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-1">Total Sale</div>
                <div className="text-lg font-bold text-brand">
                  ${(() => {
                    const discountedPrice = tempDiscount ? tempPrice * (1 - tempDiscount / 100) : tempPrice;
                    return (discountedPrice * editingLineItem.qty).toFixed(2);
                  })()}
                </div>
              </div>
            </div>
          </div>
        )}
        
        <div className="flex gap-3">
          <button
            onClick={saveLineItemEdit}
            className="flex-1 px-6 py-3 bg-gradient-to-r from-brand to-brand2 text-surface rounded-xl hover:opacity-90 font-bold text-lg shadow-xl hover:shadow-2xl transition-all active:transform active:scale-95"
          >
            <Icon name="check" size={20} className="inline-block mr-2" /> Save Changes
          </button>
          <button
            onClick={() => setShowLineItemEdit(false)}
            className="flex-1 px-6 py-3 bg-surface-2 rounded-xl hover:opacity-90 font-bold text-lg text-text shadow-md hover:shadow-lg transition-all active:transform active:scale-95"
          >
            <Icon name="close" size={20} className="inline-block mr-2" /> Cancel
          </button>
        </div>
      </div>
    </div>
  )}
 
  {/* Parked Sales Modal */}
  {showParkedSales && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-3xl max-h-[80vh] overflow-y-auto border border-border">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">Parked Sales</h2>
          <button
            onClick={() => setShowParkedSales(false)}
            className="text-muted hover:text-text text-2xl"
          >
            ×
          </button>
        </div>
        
        {parkedSales.length === 0 ? (
          <div className="text-center py-8 text-muted">No parked sales</div>
        ) : (
          <div className="space-y-3">
            {parkedSales.map((sale) => (
              <div key={sale.id} className="border rounded-lg p-4 hover:bg-surface-2">
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <div className="font-semibold">Sale #{sale.id}</div>
                    {sale.customer && <div className="text-sm text-muted">{sale.customer.name}</div>}
                    <div className="text-sm text-muted">{new Date(sale.timestamp).toLocaleString()}</div>
                    {sale.orderNumber && <div className="text-sm text-muted">Order: {sale.orderNumber}</div>}
                  </div>
                  <div className="text-right">
                    <div className="text-xl font-bold text-brand">${sale.total.toFixed(2)}</div>
                    <div className="text-sm text-muted">{sale.items.length} items</div>
                  </div>
                </div>
                <button
                  onClick={() => { unparkSale(sale); setShowParkedSales(false); }}
                  className="w-full px-4 py-2 bg-success text-surface rounded hover:opacity-90"
                >
                  Restore Sale
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )}
 
  {/* Past Sales Modal */}
  {showPastSales && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto border border-border">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">Past Sales</h2>
          <button
            onClick={() => setShowPastSales(false)}
            className="text-muted hover:text-text text-2xl"
          >
            ×
          </button>
        </div>
        
        {pastSales.length === 0 ? (
          <div className="text-center py-8 text-muted">No past sales found</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-surface-2 border-b-2">
                <tr>
                  <th className="text-left p-2">Date</th>
                  <th className="text-left p-2">Order #</th>
                  <th className="text-left p-2">Customer</th>
                  <th className="text-right p-2">Total</th>
                  <th className="text-left p-2">Payment</th>
                </tr>
              </thead>
              <tbody>
                {pastSales.map((sale: any) => (
                  <tr key={sale.SaleId || sale.ExternalId} className="border-b hover:bg-surface-2">
                    <td className="p-2">{new Date(sale.Date || sale.CreateDate).toLocaleString()}</td>
                    <td className="p-2">{sale.OrderNo || '-'}</td>
                    <td className="p-2">{sale.CustomerName || 'Cash Sale'}</td>
                    <td className="p-2 text-right font-semibold">${parseFloat(sale.Total || 0).toFixed(2)}</td>
                    <td className="p-2">{sale.PaymentMethod || 'N/A'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )}
 
  {/* Receipt Options Modal */}
  {showReceiptOptions && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-md border border-border">
        <h2 className="text-2xl font-bold mb-4">Receipt Options</h2>
        
        <div className="mb-4">
          <label className="flex items-center space-x-2 mb-3">
            <input
              type="checkbox"
              checked={printReceipt}
              onChange={(e) => setPrintReceipt(e.target.checked)}
              className="w-5 h-5"
            />
            <span className="font-semibold">Print Receipt</span>
          </label>
          
          <label className="flex items-center space-x-2">
            <input
              type="checkbox"
              checked={emailReceipt}
              onChange={(e) => setEmailReceipt(e.target.checked)}
              className="w-5 h-5"
            />
            <span className="font-semibold">Email Receipt</span>
          </label>
        </div>
        
        {emailReceipt && (
          <div className="mb-4">
            <label className="block font-semibold mb-2">Email Address</label>
            <input
              type="email"
              value={receiptEmail}
              onChange={(e) => setReceiptEmail(e.target.value)}
              className="w-full px-4 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              placeholder="customer@example.com"
            />
          </div>
        )}
        
        <div className="flex gap-2">
          <button
            onClick={() => selectedPaymentMethod && processSale(selectedPaymentMethod)}
            disabled={emailReceipt && !receiptEmail}
            className="flex-1 px-4 py-2 bg-success text-surface rounded hover:opacity-90 disabled:opacity-50"
          >
            Complete Sale
          </button>
          <button
            onClick={() => { setShowReceiptOptions(false); setSelectedPaymentMethod(''); }}
            className="flex-1 px-4 py-2 bg-surface-2 rounded hover:opacity-90"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  )}
 
  {/* End of Day Modal */}
  {showEndOfDay && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-2xl border border-border">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">End of Day</h2>
          <button
            onClick={() => setShowEndOfDay(false)}
            className="text-muted hover:text-text text-2xl"
          >
            ×
          </button>
        </div>
        
        <div className="space-y-4">
          <div className="bg-surface-2 p-4 rounded">
            <div className="font-semibold mb-2">Daily Summary</div>
            <div className="text-sm text-muted">End of day reconciliation feature coming soon...</div>
          </div>
          
          <button
            onClick={() => setShowEndOfDay(false)}
            className="w-full px-4 py-2 bg-brand text-surface rounded hover:opacity-90"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  )}
 
  {/* Billing Address Edit Modal */}
  {showBillingEdit && selectedCustomer && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-lg">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">Edit Billing Address</h2>
          <button
            onClick={() => setShowBillingEdit(false)}
            className="text-muted hover:text-text text-2xl"
          >
            ×
          </button>
        </div>
        
        <div className="space-y-3">
          <div>
            <label className="block text-sm font-semibold mb-1">Address Line 1</label>
            <input
              type="text"
              value={editingAddress?.billingAddress1 || ''}
              onChange={(e) => setEditingAddress({...editingAddress!, billingAddress1: e.target.value})}
              className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-semibold mb-1">Address Line 2</label>
            <input
              type="text"
              value={editingAddress?.billingAddress2 || ''}
              onChange={(e) => setEditingAddress({...editingAddress!, billingAddress2: e.target.value})}
              className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-semibold mb-1">City</label>
              <input
                type="text"
                value={editingAddress?.billingCity || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, billingCity: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold mb-1">State</label>
              <input
                type="text"
                value={editingAddress?.billingState || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, billingState: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-semibold mb-1">Postcode</label>
              <input
                type="text"
                value={editingAddress?.billingPostcode || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, billingPostcode: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold mb-1">Country</label>
              <input
                type="text"
                value={editingAddress?.billingCountry || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, billingCountry: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
          </div>
          <div className="flex gap-3 pt-4">
            <button
              onClick={async () => {
                if (editingAddress) {
                  try {
                    // Update customer via API - note: API may not support all address fields yet
                    const result = await apiClient.updateCustomer(editingAddress.cid, {
                      name: editingAddress.name,
                      company: editingAddress.company,
                      phone: editingAddress.phone,
                      mobile: editingAddress.mobile,
                      email: editingAddress.email
                    } as any);
                    
                    if (result.success) {
                      setSelectedCustomer(editingAddress);
                      setShowBillingEdit(false);
                      alert('✅ Billing address updated successfully!');
                    } else {
                      alert('❌ Failed to update billing address: ' + (result.error || 'Unknown error'));
                    }
                  } catch (error) {
                    console.error('Failed to update billing address:', error);
                    alert('❌ Failed to update billing address. Please try again.');
                  }
                }
              }}
              className="flex-1 px-4 py-2 bg-brand text-surface rounded hover:opacity-90 font-semibold"
            >
              Save Changes
            </button>
            <button
              onClick={() => setShowBillingEdit(false)}
              className="flex-1 px-4 py-2 bg-surface-2 text-text rounded hover:opacity-90 font-semibold"
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  )}
 
  {/* Delivery Address Edit Modal */}
  {showShippingEdit && selectedCustomer && (
    <div className="modal-overlay-light">
      <div className="bg-surface rounded-lg shadow-2xl p-6 w-full max-w-lg">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">Select/Edit Delivery Address</h2>
          <button
            onClick={() => setShowShippingEdit(false)}
            className="text-muted hover:text-text text-2xl"
          >
            ×
          </button>
        </div>
        
        <div className="mb-4">
          <button
            onClick={() => {
              if (editingAddress && selectedCustomer) {
                setEditingAddress({
                  ...editingAddress,
                  deliveryAddress1: selectedCustomer.billingAddress1,
                  deliveryAddress2: selectedCustomer.billingAddress2,
                  deliveryCity: selectedCustomer.billingCity,
                  deliveryState: selectedCustomer.billingState,
                  deliveryPostcode: selectedCustomer.billingPostcode,
                  deliveryCountry: selectedCustomer.billingCountry
                });
              }
            }}
            className="w-full px-4 py-2 bg-surface-2 hover:bg-surface-2/80 rounded font-semibold"
          >
            Copy from Billing Address
          </button>
        </div>
        
        <div className="space-y-3">
          <div>
            <label className="block text-sm font-semibold mb-1">Address Line 1</label>
            <input
              type="text"
              value={editingAddress?.deliveryAddress1 || ''}
              onChange={(e) => setEditingAddress({...editingAddress!, deliveryAddress1: e.target.value})}
              className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-semibold mb-1">Address Line 2</label>
            <input
              type="text"
              value={editingAddress?.deliveryAddress2 || ''}
              onChange={(e) => setEditingAddress({...editingAddress!, deliveryAddress2: e.target.value})}
              className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-semibold mb-1">City</label>
              <input
                type="text"
                value={editingAddress?.deliveryCity || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, deliveryCity: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold mb-1">State</label>
              <input
                type="text"
                value={editingAddress?.deliveryState || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, deliveryState: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-semibold mb-1">Postcode</label>
              <input
                type="text"
                value={editingAddress?.deliveryPostcode || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, deliveryPostcode: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold mb-1">Country</label>
              <input
                type="text"
                value={editingAddress?.deliveryCountry || ''}
                onChange={(e) => setEditingAddress({...editingAddress!, deliveryCountry: e.target.value})}
                className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
          </div>
          <div className="flex gap-3 pt-4">
            <button
              onClick={async () => {
                if (editingAddress) {
                  try {
                    // Update customer via API - note: API may not support all address fields yet
                    const result = await apiClient.updateCustomer(editingAddress.cid, {
                      name: editingAddress.name,
                      company: editingAddress.company,
                      phone: editingAddress.phone,
                      mobile: editingAddress.mobile,
                      email: editingAddress.email
                    } as any);
                    
                    if (result.success) {
                      setSelectedCustomer(editingAddress);
                      setShowShippingEdit(false);
                      alert('✅ Delivery address updated successfully!');
                    } else {
                      alert('❌ Failed to update delivery address: ' + (result.error || 'Unknown error'));
                    }
                  } catch (error) {
                    console.error('Failed to update delivery address:', error);
                    alert('❌ Failed to update delivery address. Please try again.');
                  }
                }
              }}
              className="flex-1 px-4 py-2 bg-brand text-surface rounded hover:opacity-90 font-semibold"
            >
              Save Changes
            </button>
            <button
              onClick={() => setShowShippingEdit(false)}
              className="flex-1 px-4 py-2 bg-surface-2 text-text rounded hover:opacity-90 font-semibold"
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  )}
 
  {/* Serial Number Entry Modal */}
  {showSerialModal && pendingSerialProduct && (
    <div className="modal-overlay">
      <div className="bg-surface rounded-2xl shadow-2xl p-8 w-full max-w-md border-2 border-border">
        <h2 className="text-3xl font-bold bg-gradient-to-r from-brand to-brand2 bg-clip-text text-transparent mb-6 flex items-center gap-2">
          <Icon name="tag" size={32} /> Enter Serial Number
        </h2>
        
        <div className="mb-6">
          <label className="block font-bold text-text mb-2 uppercase text-sm tracking-wide">Product</label>
          <div className="p-4 bg-surface-2 border-2 border-border rounded-xl text-text font-semibold">{pendingSerialProduct.name}</div>
        </div>
        
        <div className="mb-6">
          <label className="block font-bold text-text mb-2 uppercase text-sm tracking-wide flex items-center gap-2">
            <Icon name="tag" size={20} /> Serial Number
          </label>
          <input
            type="text"
            value={serialNumber}
            onChange={(e) => setSerialNumber(e.target.value)}
            placeholder="Enter serial number..."
            className="w-full px-4 py-3 border-2 border-border rounded-xl focus:ring-2 focus:ring-brand focus:border-brand focus:outline-none text-lg font-mono font-semibold transition-all"
            autoFocus
            onKeyDown={(e) => {
              if (e.key === 'Enter' && serialNumber.trim()) {
                addToSaleWithSerial(serialNumber.trim());
              } else if (e.key === 'Escape') {
                setShowSerialModal(false);
                setPendingSerialProduct(null);
                setSerialNumber('');
              }
            }}
          />
          <p className="mt-2 text-sm text-slate-500">Press Enter to add, Esc to cancel</p>
        </div>
        
        <div className="flex gap-3">
          <button
            onClick={() => {
              if (serialNumber.trim()) {
                addToSaleWithSerial(serialNumber.trim());
              }
            }}
            disabled={!serialNumber.trim()}
            className="flex-1 px-6 py-3 bg-gradient-to-r from-brand to-brand2 text-surface rounded-xl hover:opacity-90 font-bold text-lg shadow-xl hover:shadow-2xl transition-all active:transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Icon name="check" size={20} className="inline-block mr-2" /> Add to Sale
          </button>
          <button
            onClick={() => {
              setShowSerialModal(false);
              setPendingSerialProduct(null);
              setSerialNumber('');
            }}
            className="flex-1 px-6 py-3 bg-surface-2 rounded-xl hover:opacity-90 font-bold text-lg text-text shadow-md hover:shadow-lg transition-all active:transform active:scale-95"
          >
            <Icon name="close" size={20} className="inline-block mr-2" /> Cancel
          </button>
        </div>
      </div>
    </div>
  )}
  </div>
);
}