335 lines
20 KiB
JavaScript
335 lines
20 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { X, Search, ShoppingCart, Plus, Minus, CreditCard, DollarSign, Globe, Trash2 } from 'lucide-react';
|
|
|
|
export default function NewSaleModal({ isOpen, onClose, onSave, branches, products }) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedBranch, setSelectedBranch] = useState('');
|
|
const [cart, setCart] = useState([]);
|
|
const [paymentMethod, setPaymentMethod] = useState('');
|
|
const [paymentMethods, setPaymentMethods] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [adjustedTotal, setAdjustedTotal] = useState('');
|
|
const [adjustmentRemarks, setAdjustmentRemarks] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
fetchPaymentMethods();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const fetchPaymentMethods = async () => {
|
|
try {
|
|
const res = await fetch('/api/masters/payment_method');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
const activeOnes = data.filter(m => m.status === 'Active');
|
|
setPaymentMethods(activeOnes);
|
|
if (activeOnes.length > 0 && !paymentMethod) {
|
|
setPaymentMethod(activeOnes[0].name);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching payment methods:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (window.__APP_DATA__?.role === 'receptionist') {
|
|
setSelectedBranch(window.__APP_DATA__?.user?.branch_id);
|
|
} else if (branches.length > 0) {
|
|
setSelectedBranch(branches[0].id);
|
|
}
|
|
}, [branches]);
|
|
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.unit_price * item.quantity), 0);
|
|
const vatAmount = subtotal * 0.05;
|
|
const totalWithVat = subtotal + vatAmount;
|
|
|
|
// Sync adjusted total when base total changes, if not manually edited
|
|
useEffect(() => {
|
|
setAdjustedTotal(totalWithVat.toFixed(2));
|
|
}, [totalWithVat]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const filteredProducts = products.filter(p =>
|
|
p.branch_id.toString() === selectedBranch.toString() &&
|
|
p.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
const addToCart = (product) => {
|
|
const existing = cart.find(item => item.product_id === product.id);
|
|
if (existing) {
|
|
setCart(cart.map(item =>
|
|
item.product_id === product.id
|
|
? { ...item, quantity: item.quantity + 1 }
|
|
: item
|
|
));
|
|
} else {
|
|
setCart([...cart, {
|
|
product_id: product.id,
|
|
name: product.name,
|
|
unit_price: product.selling_price,
|
|
quantity: 1,
|
|
max_stock: product.current_stock
|
|
}]);
|
|
}
|
|
};
|
|
|
|
const updateQuantity = (id, delta) => {
|
|
setCart(cart.map(item => {
|
|
if (item.product_id === id) {
|
|
const newQty = Math.max(1, Math.min(item.max_stock, item.quantity + delta));
|
|
return { ...item, quantity: newQty };
|
|
}
|
|
return item;
|
|
}));
|
|
};
|
|
|
|
const removeItem = (id) => {
|
|
setCart(cart.filter(item => item.product_id !== id));
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (cart.length === 0) return;
|
|
setLoading(true);
|
|
try {
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
const res = await fetch('/api/inventory/sales', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
branch_id: selectedBranch,
|
|
payment_method: paymentMethod,
|
|
total_amount: parseFloat(adjustedTotal),
|
|
remarks: parseFloat(adjustedTotal) !== totalWithVat ? adjustmentRemarks : '',
|
|
items: cart.map(i => ({
|
|
product_id: i.product_id,
|
|
quantity: i.quantity,
|
|
unit_price: i.unit_price
|
|
}))
|
|
})
|
|
});
|
|
if (res.ok) {
|
|
const sale = await res.json();
|
|
onSave(sale);
|
|
setCart([]);
|
|
setAdjustmentRemarks('');
|
|
onClose();
|
|
}
|
|
} catch (error) {
|
|
console.error('Sale error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-[#00171F]/40 backdrop-blur-sm z-[999] flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-[32px] w-full max-w-6xl max-h-[95vh] overflow-hidden shadow-2xl flex flex-col animate-in zoom-in-95 duration-500">
|
|
<div className="p-6 border-b border-gray-100 flex items-center justify-between bg-[#FBFCFD]">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600">
|
|
<ShoppingCart size={24} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-black text-gray-900 tracking-tight">New Product Sale</h2>
|
|
<p className="text-xs text-gray-500 font-bold uppercase tracking-widest mt-0.5">Create a transaction for product sales.</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-2xl transition-all">
|
|
<X size={28} className="text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Product Selection Area */}
|
|
<div className="flex-1 p-8 overflow-auto space-y-8 bg-gray-50/30">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-5 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
className="w-full pl-12 pr-6 py-3 bg-white border border-gray-100 rounded-2xl outline-none focus:ring-2 focus:ring-red-500/10 focus:border-red-500 transition-all font-bold text-gray-900 text-sm shadow-sm"
|
|
placeholder="Search products..."
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
{window.__APP_DATA__?.role !== 'receptionist' && (
|
|
<select
|
|
className="px-5 py-3 bg-white border border-gray-100 rounded-2xl outline-none font-black text-[10px] uppercase tracking-widest cursor-pointer shadow-sm"
|
|
value={selectedBranch}
|
|
onChange={e => {
|
|
setSelectedBranch(e.target.value);
|
|
setCart([]);
|
|
}}
|
|
>
|
|
{branches.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
|
|
</select>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
|
{filteredProducts.map(product => (
|
|
<div key={product.id} className="bg-white p-3 rounded-[20px] border border-gray-100 shadow-sm hover:shadow-md hover:border-red-100 transition-all group flex flex-col">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="font-black text-gray-900 text-xs leading-snug truncate" title={product.name}>{product.name}</h4>
|
|
<p className="text-[9px] text-gray-400 font-bold uppercase tracking-wider mt-0.5 truncate">{product.category?.name}</p>
|
|
</div>
|
|
<span className={`px-1.5 py-0.5 rounded-md text-[8px] font-black whitespace-nowrap ${product.current_stock > 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600'}`}>
|
|
{product.current_stock} left
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-auto pt-3">
|
|
<span className="text-sm font-black text-[#FF4D4D]">{parseFloat(product.selling_price).toFixed(2)}</span>
|
|
<button
|
|
disabled={product.current_stock <= 0}
|
|
onClick={() => addToCart(product)}
|
|
className="px-3 py-1.5 bg-gray-50 text-gray-900 border border-transparent rounded-lg font-black text-[9px] uppercase tracking-widest hover:bg-[#FF4D4D] hover:text-white transition-all disabled:opacity-30 disabled:hover:bg-gray-50 disabled:hover:text-gray-900"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cart Sidebar */}
|
|
<div className="w-[340px] border-l border-gray-100 p-6 flex flex-col bg-white shrink-0">
|
|
<h3 className="text-lg font-black text-gray-900 mb-4 flex items-center gap-3">
|
|
<ShoppingCart size={18} className="text-gray-400" />
|
|
Current Order
|
|
</h3>
|
|
|
|
<div className="flex-1 overflow-auto space-y-3 pr-1">
|
|
{cart.map(item => (
|
|
<div key={item.product_id} className="p-3 bg-gray-50/50 rounded-xl border border-gray-100 group">
|
|
<div className="flex items-start justify-between">
|
|
<p className="font-bold text-gray-900 text-xs flex-1 leading-tight">{item.name}</p>
|
|
<button onClick={() => removeItem(item.product_id)} className="text-gray-300 hover:text-red-500 transition-colors ml-2">
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-3">
|
|
<div className="flex items-center gap-2 bg-white border border-gray-100 rounded-lg p-0.5">
|
|
<button onClick={() => updateQuantity(item.product_id, -1)} className="p-1 hover:bg-gray-50 rounded"><Minus size={12}/></button>
|
|
<span className="text-[10px] font-black min-w-[16px] text-center">{item.quantity}</span>
|
|
<button onClick={() => updateQuantity(item.product_id, 1)} className="p-1 hover:bg-gray-50 rounded"><Plus size={12}/></button>
|
|
</div>
|
|
<p className="font-black text-gray-900 text-xs">{parseFloat(item.unit_price * item.quantity).toFixed(2)}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{cart.length === 0 && (
|
|
<div className="h-full flex flex-col items-center justify-center text-gray-300 gap-3 opacity-50 pt-10">
|
|
<ShoppingCart size={40} />
|
|
<p className="text-[10px] font-black uppercase tracking-[0.2em]">Order is empty</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-5 border-t border-gray-100 space-y-4">
|
|
<div className="space-y-2.5">
|
|
<div className="flex items-center justify-between px-1">
|
|
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Sub-Total</p>
|
|
<p className="text-xs font-black text-gray-900">{subtotal.toFixed(2)} AED</p>
|
|
</div>
|
|
<div className="flex items-center justify-between px-1">
|
|
<div className="flex items-center gap-1">
|
|
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">VAT</p>
|
|
<span className="px-1.5 py-0.5 bg-red-50 text-red-500 rounded text-[9px] font-black">5%</span>
|
|
</div>
|
|
<p className="text-xs font-black text-gray-900">{vatAmount.toFixed(2)} AED</p>
|
|
</div>
|
|
<div className="flex items-center justify-between pt-2 pb-1 px-1 border-t border-dashed border-gray-200">
|
|
<p className="text-[11px] font-black text-emerald-600 uppercase tracking-widest">Total Amount</p>
|
|
<p className="text-sm font-black text-emerald-600">{totalWithVat.toFixed(2)} AED</p>
|
|
</div>
|
|
<div className="space-y-1 pt-1">
|
|
<label className="text-[9px] font-black text-red-500 uppercase tracking-[0.15rem] block ml-1">Adjusted Total</label>
|
|
<div className="relative group">
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={adjustedTotal}
|
|
onChange={(e) => setAdjustedTotal(e.target.value)}
|
|
className="w-full bg-white border-2 border-red-50 py-1.5 px-3 rounded-lg text-sm font-black text-gray-900 focus:outline-none focus:border-red-200 transition-all shadow-inner"
|
|
/>
|
|
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-[9px] font-black text-gray-400 uppercase tracking-widest">AED</span>
|
|
</div>
|
|
</div>
|
|
|
|
{parseFloat(adjustedTotal) !== totalWithVat && (
|
|
<div className="space-y-1 animate-in slide-in-from-top-2 duration-300">
|
|
<label className="text-[8px] font-black text-amber-500 uppercase tracking-widest block ml-1">Adjustment Remarks *</label>
|
|
<textarea
|
|
rows="1"
|
|
placeholder="Why is adjusted?"
|
|
value={adjustmentRemarks}
|
|
onChange={(e) => setAdjustmentRemarks(e.target.value)}
|
|
className="w-full bg-amber-50/30 border border-amber-100 py-1.5 px-3 rounded-lg text-xs font-bold text-gray-900 focus:outline-none focus:border-amber-300 transition-all resize-none shadow-sm min-h-[40px]"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-1.5 pt-1">
|
|
{paymentMethods.map(method => (
|
|
<button
|
|
key={method.id}
|
|
type="button"
|
|
onClick={() => setPaymentMethod(method.name)}
|
|
className={`py-1.5 px-1 rounded-lg flex flex-col items-center gap-1 border transition-all ${
|
|
paymentMethod === method.name
|
|
? 'bg-red-500 border-red-500 text-white shadow-md shadow-red-100'
|
|
: 'bg-white border-gray-100 text-gray-400 hover:border-red-200'
|
|
}`}
|
|
>
|
|
<div className="scale-75">
|
|
{method.name.toLowerCase().includes('cash') && <Banknote size={14} />}
|
|
{method.name.toLowerCase().includes('card') && <CreditCard size={14} />}
|
|
{!method.name.toLowerCase().includes('cash') && !method.name.toLowerCase().includes('card') && <Globe size={14} />}
|
|
</div>
|
|
<span className="text-[8px] font-black uppercase tracking-tight leading-none">{method.name}</span>
|
|
</button>
|
|
))}
|
|
{paymentMethods.length === 0 && (
|
|
['Cash', 'Card', 'Online'].map(method => (
|
|
<button
|
|
key={method}
|
|
type="button"
|
|
onClick={() => setPaymentMethod(method)}
|
|
className={`py-1.5 px-1 rounded-lg flex flex-col items-center gap-1 border transition-all ${
|
|
paymentMethod === method
|
|
? 'bg-red-500 border-red-500 text-white shadow-md shadow-red-100'
|
|
: 'bg-white border-gray-100 text-gray-400 hover:border-red-200'
|
|
}`}
|
|
>
|
|
<span className="text-[8px] font-black uppercase tracking-tight leading-none">{method}</span>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
disabled={cart.length === 0 || loading || (parseFloat(adjustedTotal) !== totalWithVat && !adjustmentRemarks.trim())}
|
|
onClick={handleSubmit}
|
|
className="w-full py-2.5 mt-2 rounded-lg font-black uppercase tracking-[0.15em] text-[10px] text-white shadow-lg transition-all flex items-center justify-center gap-2 active:scale-95 ${
|
|
success ? 'bg-emerald-500 shadow-emerald-200' : 'bg-[#EF4444] hover:bg-red-600 shadow-red-200'
|
|
} disabled:opacity-50 disabled:scale-100 disabled:shadow-none"
|
|
>
|
|
{loading ? 'Processing...' : 'Process Payment'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|