// ============================================================ // Saraya Events — Vendor Dashboard // // Phase 1 scope: // • Profile status display (approval pipeline) // • Trade document upload // • Vendor agreement acceptance // • Subscription tier display // • Listing count summary (products / rentals / services) // • Payout summary // • Quick-link placeholders for Phase 2 CRUD // ============================================================ const { useState: useStateVD, useEffect: useEffectVD, useCallback: useCallbackVD, useRef: useRefVD, } = React; /* ---------- Status pipeline bar ---------- */ const VENDOR_STATUSES = [ { key: 'registered', label: { en: 'Registered', ar: 'مسجّل' } }, { key: 'package_pending', label: { en: 'Package Pending', ar: 'باقة معلقة' } }, { key: 'payment_pending', label: { en: 'Payment Pending', ar: 'دفع معلق' } }, { key: 'pending_approval', label: { en: 'Pending Approval', ar: 'بانتظار الموافقة' } }, { key: 'approved', label: { en: 'Approved', ar: 'معتمد' } }, ]; function StatusPipeline({ currentStatus, ar }) { const idx = VENDOR_STATUSES.findIndex((s) => s.key === currentStatus); return (
{VENDOR_STATUSES.map((s, i) => { const done = i < idx; const active = i === idx; const pending = i > idx; return (
{done ? : }
{ar ? s.label.ar : s.label.en}
{i < VENDOR_STATUSES.length - 1 && (
)} ); })}
); } /* ---------- Stat card ---------- */ function VDStat({ icon, label, value, sub }) { return (
{label}

{value}

{sub &&

{sub}

}
); } /* ---------- Coming-soon placeholder ---------- */ function VDPlaceholder({ icon, title, desc, items }) { return (
{title}
{desc}
{items && (
{items.map(function(item, i) { return (
{item.label}

{item.desc}

); })}
)}
); } /* ---------- Document upload section ---------- */ function DocumentUpload({ vendorId, existingDocs, onUploaded, ar }) { const db = window.SarayaDB; const [uploading, setUploading] = useStateVD(false); const [msg, setMsg] = useStateVD(''); const inputRef = useRefVD(null); const DOC_TYPES = [ { key: 'trade_license', label: { en: 'Trade License', ar: 'الرخصة التجارية' }, required: true }, { key: 'emirates_id', label: { en: 'Emirates ID', ar: 'الهوية الإماراتية' }, required: true }, { key: 'bank_letter', label: { en: 'Bank Letter / IBAN Certificate', ar: 'خطاب البنك / شهادة الآيبان' }, required: true }, { key: 'vat_certificate', label: { en: 'VAT Certificate (optional)', ar: 'شهادة ضريبة القيمة المضافة (اختياري)' } }, ]; const handleFile = async (docType, file) => { if (!file || !db) return; setUploading(true); setMsg(''); const ext = file.name.split('.').pop(); const path = `${vendorId}/${docType}-${Date.now()}.${ext}`; const { error: upErr } = await db.storage.from('vendor-documents').upload(path, file, { upsert: true }); if (upErr) { setMsg(upErr.message); setUploading(false); return; } // vendor-documents is a PRIVATE bucket (KYC docs). Store the object path and // open via a short-lived signed URL — public URLs 404 ("Bucket not found"). const { error: docErr } = await db.from('vendor_documents').upsert({ vendor_id: vendorId, doc_type: docType, file_url: path, file_name: file.name, }, { onConflict: 'vendor_id,doc_type' }); if (docErr) { setMsg(docErr.message); setUploading(false); return; } // Only advance status to 'pending_approval' if vendor is not already further along const STATUSES_ORDER = ['registered', 'package_pending', 'payment_pending', 'pending_approval', 'approved']; const { data: vp } = await db.from('vendor_profiles').select('status').eq('id', vendorId).single(); const currentIdx = STATUSES_ORDER.indexOf(vp?.status); const targetIdx = STATUSES_ORDER.indexOf('pending_approval'); if (currentIdx < targetIdx) { await db.from('vendor_profiles').update({ status: 'pending_approval' }).eq('id', vendorId); } setUploading(false); setMsg(ar ? 'تم رفع الملف بنجاح' : 'Document uploaded successfully'); onUploaded && onUploaded(); }; const viewDoc = async (fileUrl) => { if (!fileUrl || !db) return; const path = fileUrl.includes('/vendor-documents/') ? fileUrl.split('/vendor-documents/')[1] : fileUrl; const { data, error } = await db.storage.from('vendor-documents').createSignedUrl(path, 300); if (error) { setMsg(error.message); return; } window.open(data.signedUrl, '_blank', 'noopener'); }; return (
{uploading && (
{ar ? 'جارٍ رفع الملف...' : 'Uploading document…'}
)} {DOC_TYPES.map((dt) => { const existing = existingDocs.find((d) => d.doc_type === dt.key); return (
{ar ? dt.label.ar : dt.label.en}{dt.required && *}
{existing && ( )}
); })} {msg &&

{msg}

}
); } /* ---------- Agreement section ---------- */ function AgreementSection({ vendorId, alreadySigned, signedAt, version, tradeName, onSign, ar }) { const db = window.SarayaDB; const [agreed, setAgreed] = useStateVD(false); const [busy, setBusy] = useStateVD(false); const AGREEMENT_VERSION = (window.SarayaAgreement && window.SarayaAgreement.VERSION) || '2.0'; const AGREEMENT_TEXT_EN = ` Saraya Events Marketplace Vendor Agreement — v${AGREEMENT_VERSION} By accepting this agreement, you confirm: 1. You are an authorised representative of the registered business entity. 2. You are solely responsible for the quality, accuracy, delivery, installation, warranty, and after-sales service of all products, rentals, and services listed under your account. 3. Saraya Events operates as an intermediary platform connecting buyers and sellers. Saraya is not responsible for disputes arising from product quality, late delivery, or service failures — these are the vendor's responsibility. 4. You agree to the platform commission rate as defined in your subscription tier. 5. Payouts will be held until customer confirmation of delivery/completion or expiry of the 3-day dispute window, whichever is earlier. 6. Saraya reserves the right to suspend or deactivate accounts that breach platform policies or receive repeated complaints. 7. You agree to maintain a valid trade license for the duration of your subscription. `.trim(); const sign = async () => { if (!agreed || !db) return; setBusy(true); let ok = false; // Prefer the server-side record — it captures the acceptance IP + version // for a binding electronic-signature record. try { const { data, error } = await db.functions.invoke('sign-agreement', { body: { version: AGREEMENT_VERSION } }); if (!error && data && data.ok) ok = true; } catch (e) { /* fall back below */ } if (!ok) { const r = await db.from('vendor_profiles').update({ agreement_version: AGREEMENT_VERSION, agreement_signed_at: new Date().toISOString(), status: 'agreement_accepted', }).eq('id', vendorId); ok = !r.error; } setBusy(false); if (ok) onSign && onSign(); }; if (alreadySigned) { const signedLabel = signedAt ? new Date(signedAt).toLocaleDateString(ar ? 'ar-AE' : 'en-AE', { year: 'numeric', month: 'short', day: 'numeric' }) : null; return (
{ar ? 'وقّعت على اتفاقية البائع' : 'You have signed the Vendor Agreement'} {signedLabel ? · v{version || '1.0'} · {signedLabel} : null}
); } return (
{(window.SarayaAgreement ? (ar ? window.SarayaAgreement.TEXT_AR : window.SarayaAgreement.TEXT_EN) : AGREEMENT_TEXT_EN)}
); } /* ---------- Quick action card ---------- */ function QuickCard({ icon, title, description, cta, onClick, badge }) { return (
{badge != null && ( {badge} )}

{title}

{description}

); } /* ============================================================ VENDOR LISTINGS CRUD (Phase 2) Products / Rentals / Services — create, edit, delete with image upload ============================================================ */ const LISTING_TYPES = ['products', 'rentals', 'services']; const AVAIL_OPTS = [ { value: 'in', label: 'In stock' }, { value: 'order', label: 'Made to order' }, { value: 'soon', label: 'Coming soon' }, { value: 'out', label: 'Unavailable' }, ]; const PRICING_TYPE_OPTS = [ { value: 'fixed', label: 'Fixed price' }, { value: 'hourly', label: 'Per hour' }, { value: 'per_person', label: 'Per person' }, { value: 'package', label: 'Package' }, { value: 'custom_quote', label: 'Custom quote (no price displayed)' }, ]; /* ── Shared field wrapper ── */ function VDField({ label, children }) { return (
{children}
); } const VDInput = ({ style, ...p }) => ( ); const VDTextarea = ({ style, ...p }) => (