page.tsx

Go to the documentation of this file.

"use client";
import { useState, useEffect, useRef } from "react";
import Link from "next/link";
 
interface Product {
  Pid: number;
  Name: string;
  PLU?: string;
  Price?: number;
  OnHand?: number;
}
 
interface CartItem extends Product {
  quantity: number;
  subtotal: number;
}
 
export default function SalesPage() {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState<Product[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [cart, setCart] = useState<CartItem[]>([]);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
 
  const loadProducts = async (search: string) => {
    if (!search || search.trim().length < 2) {
      setProducts([]);
      setIsDropdownOpen(false);
      return;
    }
    setLoading(true);
    try {
      const response = await fetch(`/api/v1/openapi/products?limit=10000&search=${encodeURIComponent(search)}`);
      const data = await response.json();
      
      if (data.success && data.data) {
        const productsArray = data.data.value || data.data;
        setProducts(Array.isArray(productsArray) ? productsArray : []);
        setIsDropdownOpen(true);
      }
    } catch (error) {
      console.error('Failed to load products:', error);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    const timer = setTimeout(() => {
      loadProducts(searchTerm);
    }, 300);
    return () => clearTimeout(timer);
  }, [searchTerm]);
 
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
          searchInputRef.current && !searchInputRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false);
      }
    };
 
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
 
  const addToCart = (product: Product) => {
    const existingItem = cart.find(item => item.Pid === product.Pid);
    if (existingItem) {
      setCart(cart.map(item =>
        item.Pid === product.Pid
          ? { ...item, quantity: item.quantity + 1, subtotal: (item.quantity + 1) * (item.Price || 0) }
          : item
      ));
    } else {
      setCart([...cart, {
        ...product,
        quantity: 1,
        subtotal: product.Price || 0
      }]);
    }
    setSearchTerm("");
    setProducts([]);
    setIsDropdownOpen(false);
    searchInputRef.current?.focus();
  };
 
  const removeFromCart = (pid: number) => {
    setCart(cart.filter(item => item.Pid !== pid));
  };
 
  const updateQuantity = (pid: number, quantity: number) => {
    if (quantity <= 0) {
      removeFromCart(pid);
      return;
    }
    setCart(cart.map(item =>
      item.Pid === pid
        ? { ...item, quantity, subtotal: quantity * (item.Price || 0) }
        : item
    ));
  };
 
  const cartTotal = cart.reduce((sum, item) => sum + item.subtotal, 0);
 
  const clearCart = () => {
    setCart([]);
  };
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-6">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Point of Sale</h1>
          <p className="text-gray-600">Scan or search for products to add to the sale</p>
        </div>
 
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Product Search Combobox */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h2 className="text-xl font-bold text-gray-900 mb-4">Search Products</h2>
              
              {/* Search Combobox */}
              <div className="relative">
                <input
                  ref={searchInputRef}
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onFocus={() => products.length > 0 && setIsDropdownOpen(true)}
                  placeholder="Type to search by name, PLU, or barcode..."
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"
                  autoFocus
                />
                
                {/* Dropdown Results */}
                {isDropdownOpen && searchTerm.length >= 2 && (
                  <div 
                    ref={dropdownRef}
                    className="absolute z-50 w-full mt-2 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto"
                  >
                    {loading ? (
                      <div className="p-4 text-center">
                        <div className="inline-block w-6 h-6 border-3 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                        <p className="text-gray-600 text-sm mt-2">Searching...</p>
                      </div>
                    ) : products.length > 0 ? (
                      <>
                        <div className="px-4 py-2 bg-gray-50 border-b border-gray-200 text-sm text-gray-600">
                          {products.length} product{products.length !== 1 ? 's' : ''} found
                        </div>
                        {products.slice(0, 50).map((product) => (
                          <button
                            key={product.Pid}
                            onClick={() => addToCart(product)}
                            className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-100 last:border-b-0 transition"
                          >
                            <div className="flex justify-between items-start">
                              <div className="flex-1 pr-4">
                                <div className="font-semibold text-gray-900">{product.Name}</div>
                                <div className="text-sm text-gray-600 mt-1">
                                  PLU: {product.PLU || 'N/A'} • Stock: {product.OnHand || 0}
                                </div>
                              </div>
                              <div className="text-lg font-bold text-green-600 whitespace-nowrap">
                                ${(product.Price || 0).toFixed(2)}
                              </div>
                            </div>
                          </button>
                        ))}
                      </>
                    ) : (
                      <div className="p-4 text-center text-gray-500">
                        <div className="text-3xl mb-2">🔍</div>
                        <p className="text-sm">No products found</p>
                      </div>
                    )}
                  </div>
                )}
              </div>
 
              {/* Helper Text */}
              <p className="mt-3 text-sm text-gray-500">
                💡 Type at least 2 characters to search. Click a product to add it to the cart.
              </p>
            </div>
 
            {/* Quick Actions */}
            <div className="mt-4 grid grid-cols-3 gap-3">
              <Link 
                href="/pages/invoices"
                className="p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition text-center"
              >
                <div className="text-2xl mb-1">📋</div>
                <div className="text-xs font-medium text-gray-700">Recent Sales</div>
              </Link>
              <Link 
                href="/pages/products"
                className="p-3 bg-white rounded-lg border border-gray-200 hover:border-green-300 hover:bg-green-50 transition text-center"
              >
                <div className="text-2xl mb-1">📦</div>
                <div className="text-xs font-medium text-gray-700">Products</div>
              </Link>
              <Link 
                href="/pages/customers"
                className="p-3 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition text-center"
              >
                <div className="text-2xl mb-1">👥</div>
                <div className="text-xs font-medium text-gray-700">Customers</div>
              </Link>
            </div>
          </div>
 
          {/* Cart / Current Sale */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 sticky top-6">
              <div className="p-4 border-b border-gray-200 bg-blue-50">
                <h2 className="text-lg font-bold text-gray-900">Current Sale</h2>
                <p className="text-sm text-gray-600">{cart.length} item(s)</p>
              </div>
 
              <div className="p-4 max-h-[400px] overflow-y-auto">
                {cart.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    <div className="text-4xl mb-2">🛒</div>
                    <p className="text-sm">Cart is empty</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {cart.map((item) => (
                      <div key={item.Pid} className="border-b border-gray-200 pb-3">
                        <div className="flex justify-between items-start mb-2">
                          <div className="flex-1 pr-2">
                            <div className="font-semibold text-sm text-gray-900">{item.Name}</div>
                            <div className="text-xs text-gray-600">${(item.Price || 0).toFixed(2)} each</div>
                          </div>
                          <button
                            onClick={() => removeFromCart(item.Pid)}
                            className="text-red-600 hover:text-red-800 text-xs"
                          >
                            ✕
                          </button>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <button
                              onClick={() => updateQuantity(item.Pid, item.quantity - 1)}
                              className="w-6 h-6 bg-gray-200 rounded hover:bg-gray-300 text-sm font-bold"
                            >
                              −
                            </button>
                            <span className="font-semibold text-gray-900 w-8 text-center">{item.quantity}</span>
                            <button
                              onClick={() => updateQuantity(item.Pid, item.quantity + 1)}
                              className="w-6 h-6 bg-gray-200 rounded hover:bg-gray-300 text-sm font-bold"
                            >
                              +
                            </button>
                          </div>
                          <div className="font-bold text-gray-900">${item.subtotal.toFixed(2)}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
 
              {cart.length > 0 && (
                <>
                  <div className="p-4 border-t border-gray-200 bg-gray-50">
                    <div className="flex justify-between items-center mb-4">
                      <span className="text-lg font-bold text-gray-900">Total:</span>
                      <span className="text-2xl font-bold text-green-600">${cartTotal.toFixed(2)}</span>
                    </div>
                    <button className="w-full py-3 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 transition mb-2">
                      Complete Sale
                    </button>
                    <button
                      onClick={clearCart}
                      className="w-full py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition"
                    >
                      Clear Cart
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}