// Products page — connected to API with seller assignment const Products = () => { const { Icon, useToast } = window.SB_UI; const { fa, faMoney } = window.SB_DATA; const { useState, useEffect } = React; const toast = useToast(); const token = localStorage.getItem(window.TOKEN_KEY); const headers = { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }; const [tab, setTab] = useState('sale'); // 'sale' | 'prize' const [items, setItems] = useState([]); const [sellers, setSellers] = useState([]); const [loading, setLoading] = useState(true); const [open, setOpen] = useState(false); const [editItem, setEditItem] = useState(null); // null=بستن, 'new'=جدید, object=ویرایش const [form, setForm] = useState({ name: '', desc: '', price: '', type: 'online', tags: '', color: '#6366F1', category: '', avg_value: '' }); const [saving, setSaving] = useState(false); const [spModal, setSpModal] = useState(null); // محصولی که داریم فروشنده‌هاش رو مدیریت می‌کنیم const [spSellers, setSpSellers] = useState([]); const [pzModal, setPzModal] = useState(null); // محصول فروشی که داریم جوایزش رو مدیریت می‌کنیم const [allPrizes, setAllPrizes] = useState([]); // همه محصولات is_prize=1 const [linkedPrizes, setLinkedPrizes] = useState([]); // جوایز لینک‌شده به pzModal const COLORS = ['#6366F1','#34D399','#F59E0B','#38BDF8','#F472B6','#A78BFA','#FB923C','#F87171']; const isPrize = tab === 'prize'; const load = (currentTab) => { const t = currentTab ?? tab; setLoading(true); const prizeParam = t === 'prize' ? '?prize=1' : '?prize=0'; Promise.all([ fetch(`/api/market/products${prizeParam}`, { headers }).then(r => r.json()), fetch('/api/market/sellers', { headers }).then(r => r.json()), ]).then(([pd, sd]) => { if (pd.success) setItems(pd.data.products || []); else setItems([]); if (sd.success) setSellers(sd.data.sellers || []); setLoading(false); }).catch(() => { setItems([]); setLoading(false); }); }; useEffect(() => { load(tab); }, [tab]); const openNew = () => { setForm({ name: '', desc: '', price: isPrize ? '' : '', type: 'online', tags: '', color: isPrize ? '#F59E0B' : '#6366F1', category: '', avg_value: '', list_price: '' }); setEditItem('new'); setOpen(true); }; const openEdit = (p) => { setForm({ name: p.name || '', desc: p.desc || p.description || '', price: p.price != null ? String(p.price) : '', type: p.type || 'online', tags: Array.isArray(p.tags) ? p.tags.join('، ') : (p.tags || ''), color: p.color || '#6366F1', category: p.category || '', avg_value: p.avg_value != null ? String(p.avg_value) : '', list_price: p.list_price != null ? String(p.list_price) : '', }); setEditItem(p); setOpen(true); }; const submit = () => { if (!form.name) return toast('نام محصول الزامی است', 'error'); setSaving(true); const body = { name: form.name, desc: form.desc, price: Number(form.price) || 0, type: form.type, color: form.color, category: form.category, avg_value: Number(form.avg_value) || 0, list_price: Number(form.list_price) || 0, tags: form.tags.split(/[،,]/).map(t => t.trim()).filter(Boolean), is_active: 1, is_prize: isPrize ? 1 : 0, }; const isNew = editItem === 'new'; const url = isNew ? '/api/market/products' : `/api/market/products/${editItem.id}`; fetch(url, { method: isNew ? 'POST' : 'PUT', headers, body: JSON.stringify(body) }) .then(r => r.json()).then(d => { setSaving(false); if (d.success) { toast(isNew ? 'محصول اضافه شد' : 'ذخیره شد', 'success'); setOpen(false); setEditItem(null); load(); } else { // اگر API وجود نداره، به‌صورت محلی ذخیره کن if (isNew) { setItems(prev => [{ id: Date.now(), ...body, tags: body.tags, active: true }, ...prev]); toast('محصول اضافه شد', 'success'); } else { setItems(prev => prev.map(p => p.id === editItem.id ? { ...p, ...body } : p)); toast('ذخیره شد', 'success'); } setOpen(false); setEditItem(null); } }) .catch(() => { setSaving(false); if (isNew) { setItems(prev => [{ id: Date.now(), ...body, tags: body.tags, active: true }, ...prev]); toast('محصول اضافه شد (حالت آفلاین)', 'success'); } setOpen(false); setEditItem(null); }); }; const toggleActive = (p) => { fetch(`/api/market/products/${p.id}`, { method: 'PUT', headers, body: JSON.stringify({ is_active: p.is_active ? 0 : 1 }) }) .then(r => r.json()).then(d => { if (d.success) load(); else setItems(prev => prev.map(x => x.id === p.id ? { ...x, active: !x.active, is_active: x.is_active ? 0 : 1 } : x)); }).catch(() => { setItems(prev => prev.map(x => x.id === p.id ? { ...x, active: !x.active } : x)); }); }; const deleteProduct = (p) => { if (!confirm(`محصول "${p.name}" حذف شود؟`)) return; fetch(`/api/market/products/${p.id}`, { method: 'DELETE', headers }) .then(r => r.json()).then(d => { if (d.success) { toast('حذف شد', 'success'); load(); } else toast(d.message || 'خطا', 'error'); }).catch(() => { setItems(prev => prev.filter(x => x.id !== p.id)); toast('حذف شد', 'success'); }); }; const openSp = (prod) => { setSpModal(prod); setSpSellers(sellers.map(s => ({ ...s, assigned: (s.products || []).some(pp => pp.id === prod.id), level: (s.products || []).find(pp => pp.id === prod.id)?.sp_level || 'junior', }))); }; const PROD_LEVEL = { junior: 'مبتدی', senior: 'ارشد', expert: 'متخصص' }; const toggleSp = (prod, seller, newLevel) => { const already = seller.assigned; const url = already ? `/api/market/sellers/${seller.id}/products/${prod.id}` : `/api/market/sellers/${seller.id}/products`; const meth = already ? 'DELETE' : 'POST'; const body = already ? undefined : JSON.stringify({ product_id: prod.id, level: newLevel || 'junior' }); fetch(url, { method: meth, headers, body }) .then(r => r.json()).then(d => { if (d.success) { load(); setSpSellers(prev => prev.map(s => s.id === seller.id ? { ...s, assigned: !already, level: newLevel || 'junior' } : s)); } else toast(d.message || 'خطا', 'error'); }); }; const changeSpLevel = (prod, seller, level) => { fetch(`/api/market/sellers/${seller.id}/products`, { method: 'POST', headers, body: JSON.stringify({ product_id: prod.id, level }) }) .then(r => r.json()).then(d => { if (d.success) { load(); setSpSellers(prev => prev.map(s => s.id === seller.id ? { ...s, level } : s)); } }); }; const openPzModal = (prod) => { setPzModal(prod); Promise.all([ fetch('/api/market/products?prize=1', { headers }).then(r => r.json()), fetch(`/api/market/products/${prod.id}/prizes`, { headers }).then(r => r.json()), ]).then(([allD, linkedD]) => { setAllPrizes(allD.data?.products || allD.products || []); setLinkedPrizes((linkedD.data?.prizes || linkedD.prizes || []).map(p => p.id)); }).catch(() => {}); }; const togglePrizeLink = (prod, prizeId, currentlyLinked) => { const url = currentlyLinked ? `/api/market/products/${prod.id}/prizes/${prizeId}` : `/api/market/products/${prod.id}/prizes`; const method = currentlyLinked ? 'DELETE' : 'POST'; const body = currentlyLinked ? undefined : JSON.stringify({ prize_product_id: prizeId }); fetch(url, { method, headers, body }) .then(r => r.json()).then(d => { if (d.success || d.ok) { setLinkedPrizes(prev => currentlyLinked ? prev.filter(id => id !== prizeId) : [...prev, prizeId]); load(); } else toast(d.message || 'خطا', 'error'); }); }; const isActive = (p) => p.is_active !== undefined ? p.is_active : p.active; const tabColor = isPrize ? '#F59E0B' : '#6366F1'; const tabBtnStyle = (t) => ({ padding: '7px 18px', borderRadius: 8, fontSize: 12, cursor: 'pointer', fontWeight: 600, border: tab === t ? `1.5px solid ${t === 'prize' ? '#F59E0B' : '#6366F1'}` : '1.5px solid rgba(255,255,255,.08)', background: tab === t ? (t === 'prize' ? 'rgba(245,158,11,.13)' : 'rgba(99,102,241,.13)') : 'transparent', color: tab === t ? (t === 'prize' ? '#F59E0B' : '#818CF8') : '#64748b', transition: 'all .15s', }); return (
{/* ── تب‌بندی ── */}
{/* ── سرصفحه ── */}
{loading ? '...' : `${fa(items.length)} ${isPrize ? 'جایزه' : 'محصول'} • ${fa(items.filter(p => isActive(p)).length)} فعال`}
{/* ── گرید محصولات ── */} {loading ? (
در حال بارگذاری...
) : (
{items.map(p => { const color = p.color || typeColor(p.type); const colorD = typeColorD(p.type); const active = isActive(p); const specCount = sellers.filter(s => (s.products || []).some(sp => sp.id === p.id)).length; return (
{/* هدر گرادیانت */}
{/* نوع - بالا راست */}
{typeLabel(p.type)}
{/* دسته‌بندی - بالا چپ */} {p.category && (
{p.category}
)} {/* تعداد فروشنده - پایین راست */} {specCount > 0 && (
👥 {fa(specCount)} متخصص
)}
{/* محتوا */}
{p.name}
{(p.desc || p.description) &&
{p.desc || p.description}
}
toggleActive(p)}>
{/* قیمت + تگ‌ها */}
قیمت
{(p.price === 0 || p.price === '0') ? رایگان : {faMoney(p.price || 0)} تومان}
{p.avg_value > 0 && (
میانگین: {fa(p.avg_value)} تومان
)}
{(Array.isArray(p.tags) ? p.tags : []).slice(0, 2).map(t => ( {t} ))}
{/* دکمه‌ها */}
{!isPrize && ( <> )}
); })}
)} {/* ── Modal افزودن/ویرایش محصول ── */} {open && (
e.target === e.currentTarget && setOpen(false)}>
{editItem === 'new' ? (isPrize ? '🎁 جایزه جدید' : '📦 محصول جدید') : `ویرایش — ${editItem?.name}`}
{/* نام */}
نام محصول *
setForm({ ...form, name: e.target.value })} />
{/* توضیحات */}
توضیحات