import { useState, useEffect } from ‘react’; import { Search, Trash2, MessageCircle, Save, User, Phone, CreditCard, Tag, RefreshCw } from ‘lucide-react’; import { supabase } from ‘../lib/supabase’; import { Service, InvoiceItem } from ‘../lib/types’; import { generateInvoiceNumber, buildWhatsAppMessage, formatPrice, formatWhatsAppPhone } from ‘../lib/utils’; interface CartItem extends InvoiceItem { tempId: string; is_fast: boolean; } interface Props { onOrderSaved: () => void; } export function NewOrderPage({ onOrderSaved }: Props) { const [services, setServices] = useState([]); const [search, setSearch] = useState(”); const [customerName, setCustomerName] = useState(”); const [customerPhone, setCustomerPhone] = useState(”); const [isCredit, setIsCredit] = useState(false); const [discountInput, setDiscountInput] = useState(”); const [cart, setCart] = useState([]); const [saving, setSaving] = useState(false); // جلب الخدمات من قاعدة البيانات const loadServices = async () => { const { data } = await supabase.from(‘services’).select(‘*’).order(‘sort_order’); if (data) setServices(data); }; useEffect(() => { loadServices(); }, []); // حساب الإجماليات const subtotal = cart.reduce((s, i) => s + i.total_price, 0); const discount = parseFloat(discountInput) || 0; const total = Math.max(0, subtotal – discount); // منطق إضافة الخدمة (نفس منطق addItem في القديم) const addToCart = (service: Service, mode: ‘wash_iron’ | ‘iron_only’, isFast: boolean) => { const basePrice = mode === ‘wash_iron’ ? (service.wash_iron_price || 0) : (service.iron_only_price || 0); const unitPrice = isFast ? basePrice * 2 : basePrice; const newItem: CartItem = { tempId: `${service.id}-${mode}-${isFast}-${Date.now()}`, service_id: service.id, service_name_en: service.name_en, service_name_ar: service.name_ar, service_type: mode, quantity: 1, unit_price: unitPrice, total_price: unitPrice, is_fast: isFast, }; setCart((prev) => […prev, newItem]); }; const removeFromCart = (tempId: string) => { setCart((prev) => prev.filter((i) => i.tempId !== tempId)); }; // حفظ الطلب (SAVE Logic) const handleSave = async (sendWhatsApp = false) => { if (cart.length === 0 || !customerPhone) return; setSaving(true); const invNumber = generateInvoiceNumber(); const { data: inv, error } = await supabase .from(‘invoices’) .insert({ invoice_number: invNumber, customer_name: customerName || ‘عميل | Customer’, customer_phone: customerPhone, is_fast_service: cart.some(i => i.is_fast), discount: discount, subtotal, total, status: ‘unpaid’, notes: isCredit ? ‘credit’ : ”, }) .select().single(); if (inv) { const itemsToInsert = cart.map(({ tempId, …rest }) => ({ …rest, invoice_id: inv.id })); await supabase.from(‘invoice_items’).insert(itemsToInsert); if (sendWhatsApp) { const msg = buildWhatsAppMessage({ …inv, created_at: new Date().toISOString() }, cart); window.open(`https://wa.me/${formatWhatsAppPhone(customerPhone)}?text=${encodeURIComponent(msg)}`, ‘_blank’); } // إعادة ضبط الخانات بعد الحفظ setCart([]); setCustomerName(”); setCustomerPhone(”); setDiscountInput(”); setIsCredit(false); onOrderSaved(); } setSaving(false); }; return (
{/* 1. لوحة إدخال البيانات (نفس القديم) */}

إنشاء فاتورة | POS

setCustomerName(e.target.value)} placeholder=”اسم العميل” className=”w-full pr-9 pl-3 py-2 border border-gray-200 rounded-xl outline-none text-sm” />
setCustomerPhone(e.target.value)} placeholder=”رقم الهاتف” className=”w-full pr-9 pl-3 py-2 border border-gray-200 rounded-xl outline-none text-sm font-mono” />
إضافة للقائمة الشهرية (آجل) setIsCredit(!isCredit)} className=”w-5 h-5 cursor-pointer” />
{/* 2. اختيار الخدمات (البحث) */}
setSearch(e.target.value)} placeholder=”🔍 ابحث عن قطعة (ثوب، عباية…)” className=”w-full pr-10 pl-3 py-3 border-2 border-blue-100 rounded-2xl outline-none focus:border-blue-400″ />
{/* 3. عرض الخدمات المفلترة (أزرار إضافة سريعة) */}
{search && services.filter(s => s.name_ar.includes(search)).map(service => (
{service.name_ar} {service.name_en}
))} {/* 4. عرض معاينة الفاتورة (Invoice Preview) */}

محتويات الفاتورة:

{cart.length === 0 ? (
السلة فارغة.. ابحث عن خدمات لإضافتها
) : ( cart.map(item => (
{item.service_name_ar} ({item.service_type === ‘wash_iron’ ? ‘غسيل’ : ‘كوي’})
{formatPrice(item.total_price)} BHD
)) )}
{/* 5. الإجماليات وأزرار الحفظ (الثابتة بالأسفل) */}
setDiscountInput(e.target.value)} placeholder=”قيمة الخصم BHD” className=”flex-1 p-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none” />
الإجمالي النهائي {formatPrice(total)} BHD
); }

Scroll to Top