// BetyChef — All views const { useState: useS, useMemo, useRef: useR } = React; const egp = v => "EGP " + Math.round(v).toLocaleString(); const egpK = v => v >= 1000 ? "EGP " + (v/1000).toFixed(v>=10000?0:1)+"K" : "EGP "+v; const pct = (a, b) => b > 0 ? Math.round(a/b*100) : 0; // milliseconds from a Firestore timestamp / date (0 if missing) — for newest-first sorts const tsMs = ts => ts ? (ts.toDate ? ts.toDate().getTime() : new Date(ts).getTime()) : 0; /* ══════════════════════════════ OVERVIEW ════════════════════════════════ */ function OverviewView({ navigate }) { const { can } = usePermissions(); const { kpis, northStar: ns, ordersByDay, areas, activity, ops, prospects } = window.BC; const accentColor = { primary:"var(--c-primary)", green:"var(--c-green)", saffron:"var(--c-saffron)", ink:"var(--c-ink-spark)" }; const fmt = k => k.unit==="EGP" ? egpK(k.value) : k.value.toLocaleString()+(k.suffix||""); const MONEY_KPIS = ["gmv","revenue"]; // commission/revenue figures — gated by sensitive.viewFinancials // Outreach stats const prospectStats = useMemo(() => { const prosList = prospects || []; const contacted = prosList.filter(p => p.status === "Contacted").length; const interested = prosList.filter(p => p.status === "Interested").length; const converted = prosList.filter(p => p.status === "Converted").length; return { total: prosList.length, contacted, interested, converted, conversionRate: prosList.length ? Math.round(converted/prosList.length*100) : 0 }; }, [prospects]); return (
{/* KPI row */}
{(kpis||[]).map(k => (
navigate(k.nav, k.navFilter)} title="Click to view details" style={{cursor:"pointer"}}>
{k.label}
{MONEY_KPIS.includes(k.id) && !can("sensitive","viewFinancials") ? ••• : fmt(k)}
→ View details
))}
{/* Orders chart */}

Orders this week

{(ordersByDay||[]).reduce((s,d)=>s+d.repeat+d.first,0)} total

Repeat First-time
{/* Pipeline */}

Chef pipeline

{(ns.pending||0) > 0 && (
{ns.pending} application{ns.pending!==1?"s":""} waiting for review
)}
{/* Areas */}

Chefs by area

{/* Ops */}

Ops health

Runners Co. {ops.runners.deliveriesToday} deliveries · {ops.runners.successRate}% success
Paymob {ops.paymob.txToday} payments · {egpK(ops.paymob.collectedToday)}
{can("sensitive","viewFinancials") ? (
Settled to chefs (MTD){egp(ops.paymob.settledMtd)}
Pending{egp(ops.paymob.pending)}
) : (
Settlement figures hidden
)}
{/* Live activity */}

Live activity

Live
    {(activity||[]).map((a,i)=>(
  • {a.who} {a.what} {a.when}
    • ))} {(!activity||activity.length===0) &&
  • No activity yet today
    • }
{/* Outreach / CRM Section */}

📞 Outreach Pipeline

Chef acquisition prospects
Total prospects
{prospectStats.total}
Contacted
{prospectStats.contacted}
{prospectStats.total ? Math.round(prospectStats.contacted/prospectStats.total*100) : 0}% contacted
Interested
{prospectStats.interested}
{prospectStats.total ? Math.round(prospectStats.interested/prospectStats.total*100) : 0}% interested
Converted
{prospectStats.converted}
✓ Signed up
Conversion rate
{prospectStats.conversionRate}%
overall rate
); } /* ══════════════════════════════ CHEFS ═══════════════════════════════════ */ function ChefsView({ query, navigate }) { const { can } = usePermissions(); const { chefs, chefStatuses } = window.BC; const [status, setStatus] = useS("All"); const [active, setActive] = useS(null); const [addOpen, setAddOpen] = useS(false); const [page, setPage] = useS(0); // Open a chef's detail when arriving from global search React.useEffect(() => { function openPending() { const p = window.BC._pendingDetail; if (p && p.view === "chefs") { const item = (window.BC.chefs || []).find(c => c.docId === p.docId); if (item) setActive(item); window.BC._pendingDetail = null; } } openPending(); window.addEventListener("bc-open-detail", openPending); return () => window.removeEventListener("bc-open-detail", openPending); }, []); const [areaFilter, setAreaFilter] = useS("All areas"); const [ratingFilter, setRatingFilter] = useS("All ratings"); const [healthFilter, setHealthFilter] = useS("All health"); const [sortBy, setSortBy] = useS("joined"); // default: newest first const [sortDir, setSortDir] = useS("desc"); const [localSearch, setLocalSearch] = useS(""); // Local search within view const showTestData = useShowTestData(); // global toggle const [showFilters, setShowFilters] = useS(false); // Toggle filter panel const [, setTick] = useS(0); // Force re-render when test accounts change const PER_PAGE = 50; // Listen for test account changes React.useEffect(() => { const handleTestChange = () => setTick(t => t+1); window.addEventListener("testAccountsChanged", handleTestChange); return () => window.removeEventListener("testAccountsChanged", handleTestChange); }, []); const HEALTH_LABELS = { great:"Top chef", good:"Good", growing:"Growing", inactive:"Inactive", new:"New" }; // Filter test accounts when in "Live" mode const allChefs = useMemo(() => { // Chefs page = the APPROVED network only (Active/Paused). // Pending / Rejected / Incomplete live on the Applications screen. let chefsList = (chefs || []).filter(c => c.status === "Active" || c.status === "Paused"); if (!showTestData && window.BC_testAccounts) { chefsList = chefsList.filter(c => !window.BC_testAccounts.isTestChef(c.docId)); } return chefsList; }, [chefs, showTestData]); // Unique areas for filter const areas = useMemo(() => { const s = new Set(allChefs.map(c=>c.area).filter(Boolean)); return ["All areas", ...Array.from(s).sort()]; }, [allChefs]); const totalActive = allChefs.filter(c=>c.status==="Active").length; const totalPaused = allChefs.filter(c=>c.status==="Paused").length; const pendingCount = (window.BC.northStar && window.BC.northStar.pending) || 0; const totalOrders = allChefs.reduce((s,c)=>s+c.orders,0); const totalGMV = allChefs.reduce((s,c)=>s+c.gmv,0); const avgRating = (() => { const rated = allChefs.filter(c=>c.rating); return rated.length ? (rated.reduce((s,c)=>s+parseFloat(c.rating),0)/rated.length).toFixed(1) : "—"; })(); const topChef = allChefs.filter(c=>c.status==="Active").sort((a,b)=>b.orders-a.orders)[0]; // Sort helpers function sortVal(c) { if (sortBy==="gmv") return c.gmv || 0; if (sortBy==="rating") return parseFloat(c.rating) || 0; if (sortBy==="joined") return tsMs(c.joinedAt); return c.orders || 0; } function matchRating(c) { if (ratingFilter==="All ratings") return true; if (ratingFilter==="Unrated") return !c.rating; const r = parseFloat(c.rating) || 0; if (ratingFilter==="4.5+ ★") return r >= 4.5; if (ratingFilter==="4.0+ ★") return r >= 4.0; if (ratingFilter==="3.0+ ★") return r >= 3.0; if (ratingFilter==="Below 3.0") return c.rating && r < 3.0; return true; } const filtered = useMemo(() => allChefs.filter(c => (status==="All" || c.status===status) && (areaFilter==="All areas" || c.area===areaFilter) && (healthFilter==="All health" || HEALTH_LABELS[c.health]===healthFilter) && matchRating(c) && (!query || (c.name+c.area+c.id+c.mobile+(c.email||"")).toLowerCase().includes(query.toLowerCase())) && (!localSearch || (c.name+c.area+c.id+c.mobile+(c.email||"")).toLowerCase().includes(localSearch.toLowerCase())) ).sort((a,b) => sortDir==="desc" ? sortVal(b)-sortVal(a) : sortVal(a)-sortVal(b)), [allChefs, status, areaFilter, ratingFilter, healthFilter, query, sortBy, sortDir, localSearch] ); const paged = filtered.slice(0, (page+1)*PER_PAGE); const hasMore = filtered.length > paged.length; function toggleSort(col) { if (sortBy===col) setSortDir(d=>d==="desc"?"asc":"desc"); else { setSortBy(col); setSortDir("desc"); } setPage(0); } function SortIcon({ col }) { if (sortBy!==col) return ⇅; return {sortDir==="desc"?"↓":"↑"}; } // ── CSV export ── // Exports respect the same data-visibility permissions as the screen — // a column you can't see in the table never makes it into the file either. function exportCSV() { const showFinancials = can("sensitive","viewFinancials"); const showPayouts = can("sensitive","viewPayouts"); const showContact = can("sensitive","viewContactInfo"); const cols = ["Name","ID","Area", ...(showContact ? ["Mobile","Email"] : []), "Kitchen","Status","Health","Orders", ...(showFinancials ? ["GMV (EGP)","Avg Order (EGP)"] : []), ...(showPayouts ? ["Chef Earned (EGP)"] : []), "Rating","Categories","Joined"]; const rows = filtered.map(c => { const chefEarned = (window.BC.orders||[]) .filter(o=>o.chefId===c.docId && o.paid) .reduce((s,o)=>s+(o.value-o.fee),0); return [ c.name, c.id, c.area, ...(showContact ? [c.mobile||"", c.email||""] : []), c.kitchenName||"", c.status, c.health, c.orders, ...(showFinancials ? [c.gmv, c.orders>0?Math.round(c.gmv/c.orders):""] : []), ...(showPayouts ? [chefEarned] : []), c.rating||"", (c.categories||[]).join(" | "), c.joined, ].map(v=>`"${String(v||"").replace(/"/g,'""')}"`); }); const csv = [cols.join(","), ...rows.map(r=>r.join(","))].join("\n"); const blob = new Blob([""+csv], {type:"text/csv;charset=utf-8"}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `betychef-chefs-${status.toLowerCase().replace(/\s/g,"-")}-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); } return (
{/* ── Quick search ── */} {setLocalSearch(e.target.value); setPage(0);}} style={{padding:"10px 14px", fontSize:"14px"}} /> {/* ── Quick stats ── */}
{setStatus("All");setPage(0);}} style={{cursor:"pointer"}}>
{allChefs.length}
Total chefs
on the platform
{setStatus("Active");setPage(0);}} style={{cursor:"pointer"}}>
{totalActive}
Active
live on the app
navigate && navigate("applications")} style={{cursor:"pointer"}}>
{pendingCount}
Pending applications
{pendingCount > 0 ? "tap to review →" : "all reviewed"}
{setStatus("Paused");setPage(0);}} style={{cursor:"pointer"}}>
{totalPaused}
Offline
paused by you or them
{totalOrders.toLocaleString()}
Total orders
across all chefs
{egpK(totalGMV)}
Total GMV
all time
{topChef && (
setActive(topChef)} style={{cursor:"pointer",gridColumn:"span 2"}}>
⭐ Top chef
{topChef.name}
{topChef.orders} orders · {egpK(topChef.gmv)} GMV
)}
{/* ── Toolbar ── */} {pendingCount > 0 && (
{pendingCount} application{pendingCount!==1?"s":""} waiting for your review
)} {/* ── Actions toolbar ── */}
{can("analytics","export") && ( )} {can("chefs","approve") && ( )}
{/* ── Collapsible filters panel ── */} {showFilters && (
{(status!=="All"||areaFilter!=="All areas"||ratingFilter!=="All ratings"||healthFilter!=="All health"||sortBy!=="joined"||sortDir!=="desc") && ( )}
)} {/* ── Result count ── */}
Showing {filtered.length} chef{filtered.length!==1?"s":""} {status!=="All" && <> · {status}} {areaFilter!=="All areas" && <> · {areaFilter}} {ratingFilter!=="All ratings" && <> · {ratingFilter}} {healthFilter!=="All health" && <> · {healthFilter}} {query && <> · matching "{query}"}
{paged.map(c=>{ const earned = (window.BC.orders||[]) .filter(o=>o.chefId===c.docId && o.paid) .reduce((s,o)=>s+(o.value-o.fee),0); const avgOrder = c.orders>0 ? Math.round(c.gmv/c.orders) : 0; return ( setActive(c)} style={{cursor:"pointer"}}> ); })}
Chef Area Status Health toggleSort("orders")}>Orders toggleSort("gmv")}>GMV Chef earned Avg order toggleSort("rating")}>Rating Joined
{c.name}
{window.BC_testAccounts && window.BC_testAccounts.isTestChef(c.docId) && ( TEST )}
{c.id}
 {c.area} {c.orders||"—"} {c.gmv?egpK(c.gmv):"—"} {earned?egpK(earned):"—"} {avgOrder?egp(avgOrder):"—"} {c.rating ? {c.rating} : —} {c.joined}
{filtered.length===0 &&
No chefs match these filters.
} {hasMore && (
)}
setActive(null)} title={active?.name||""} wide> {active && setActive(null)}/>} setAddOpen(false)} title="Add new chef" wide> setAddOpen(false)}/>
); } /* ── Chef Detail ── */ function ChefDetail({ c, onClose }) { const { can } = usePermissions(); const [status, setStatus] = useS(c.status); const [tab, setTab] = useS("info"); const [saving, setSaving] = useS(false); const [msg, setMsg] = useS(""); const [confirmRemove, setConfirmRemove] = useS(false); const [isTestAccount, setIsTestAccount] = useS(window.BC_testAccounts ? window.BC_testAccounts.isTestChef(c.docId) : false); const chefOrders = useMemo(() => (window.BC.orders||[]).filter(o => o.chefId===c.docId).slice(0,30), [c.docId]); const chefEarned = chefOrders.reduce((s,o) => s + (o.value - o.fee), 0); const statusColor = status==="Active" ? "var(--c-green)" : status==="Paused" ? "#C2410C" : "var(--c-saffron)"; const statusLabel = status==="Active" ? "Online — live on the app" : status==="Paused" ? "Offline — hidden from customers" : "Awaiting activation"; async function activate() { setSaving(true); try { await window.BC_actions.approveChef(c.docId); setStatus("Active"); setMsg("✓ Now live on the app"); } catch(e){setMsg(e.message);} setSaving(false); } async function goOffline() { setSaving(true); try { await window.BC_actions.pauseChef(c.docId); setStatus("Paused"); setMsg("Chef is offline"); } catch(e){setMsg(e.message);} setSaving(false); } async function bringOnline() { setSaving(true); try { await window.BC_actions.reactivateChef(c.docId); setStatus("Active"); setMsg("✓ Back online"); } catch(e){setMsg(e.message);} setSaving(false); } async function removeChef() { try { await window.BC_actions.deleteChef(c.docId); onClose(); } catch(e){setMsg(e.message); setConfirmRemove(false);} } async function sendNotify() { const title = prompt("Notification title:"); if(!title) return; const body = prompt("Message:"); if(!body) return; try { await window.BC_actions.sendNotification({title,body,target:"specific",targetIds:[c.docId]}); setMsg("Notification sent ✓"); } catch(e){setMsg(e.message);} } function toggleTestAccount() { if (window.BC_testAccounts) { window.BC_testAccounts.toggleChef(c.docId); setIsTestAccount(!isTestAccount); setMsg(isTestAccount ? "Removed from test accounts" : "✓ Marked as test account"); } } /* ── info rows: only show rows that have data ── */ const infoRows = [ c.area && { label:"Area", value: c.area }, c.mobile && { label:"Mobile", value: c.mobile, need:"viewContactInfo" }, c.email && { label:"Email", value: c.email, need:"viewContactInfo" }, c.kitchenName && { label:"Kitchen", value: c.kitchenName }, c.workHours && { label:"Working hours", value: c.workHours }, c.capacity && { label:"Daily capacity", value: c.capacity + " orders/day" }, c.joined && { label:"Joined", value: c.joined }, c.instaPay && { label:"InstaPay", value: c.instaPay, need:"viewPayouts" }, ].filter(Boolean); const showContact = can("sensitive","viewContactInfo"); return (
{/* ── Header ── */}
{c.name.charAt(0).toUpperCase()}
{c.name}
{statusLabel}
{isTestAccount && TEST} {status === "Active" && }
{/* ── STATS BAND ── */}
{c.orders||0}
Orders
{c.gmv?egpK(c.gmv):"—"}
GMV
{chefEarned?egpK(chefEarned):"—"}
Earned
{c.rating ? <>{c.rating} : "—"}
Rating
{/* ── TABS ── */}
{[{id:"info",label:"Profile"},{id:"orders",label:"Orders",n:chefOrders.length},{id:"ratings",label:"Ratings"}].map(t=>( ))}
{/* ── TAB BODY ── */}
{tab==="info" && ( <> {infoRows.length > 0 ? <> {infoRows.map((r,i) => (
{r.label} {r.need ? {r.value} : r.value}
))} :

No profile info yet — the chef will fill this in through the app.

} {c.bio &&

{c.bio}

} {(c.categories||[]).length > 0 && (

Categories

{c.categories.map(d=>{d})}
)} )} {tab==="orders" && ( chefOrders.length === 0 ?

No orders yet.

: {chefOrders.map(o=>( ))}
OrderCustomer ValueYour cut Status
{o.id} {o.customer} {egp(o.value)} {egp(o.fee)}
)} {tab==="ratings" && ( <>
{c.rating||"—"}
avg rating · {c.orders||0} orders

Customer reviews will appear here once orders come in.

)}
{/* ── FOOTER: Mark as test + Status actions ── */} {!confirmRemove ? (
{msg &&
{msg}
} {status==="Joined" && can("chefs","approve") && ( )} {status==="Active" && can("chefs","pause") && ( )} {status==="Paused" && can("chefs","pause") && ( )} {can("notifications","send") && ( )} {can("chefs","delete") && ( )}
) : (

⚠️ Remove {c.name} permanently?

Deletes them from BetyChef and the app instantly. Cannot be undone.

)}
); } /* ── Add Chef form ── */ // Exact categories from the app's chef registration screen const CHEF_CATEGORIES = [ "🫕 Egyptian", "🥗 Vegan", "🍰 Desserts", "🥩 Grills", "🍝 Pasta", "🍳 Breakfast", "🍲 Soups", "🦐 Seafood", ]; function AddChefForm({ onClose }) { const [form, setForm] = useS({ fullName:"", email:"", phone:"", kitchenName:"", bio:"", address:"", workFrom:"", workTo:"", instaPay:"", nationalId:"", }); const [cats, setCats] = useS([]); const [custom, setCustom] = useS(""); const [saving, setSaving] = useS(false); const [err, setErr] = useS(""); const set = k => e => setForm(f=>({...f,[k]:e.target.value})); function toggleCat(c) { setCats(prev => prev.includes(c) ? prev.filter(x=>x!==c) : [...prev, c]); } function addCustom() { const v = custom.trim(); if (v && !cats.includes(v)) setCats(prev=>[...prev, v]); setCustom(""); } async function submit(e) { e.preventDefault(); if (!form.fullName.trim()) return setErr("Full name is required"); if (!form.phone.trim()) return setErr("Phone number is required"); setSaving(true); try { await window.BC_actions.addChef({ fullName: form.fullName, email: form.email, mobile: form.phone, // app stores phone as `mobile` kitchenName: form.kitchenName, bio: form.bio, address: form.address, workFrom: form.workFrom, workTo: form.workTo, instaPay: form.instaPay, nationalId: form.nationalId, categories: cats, }); onClose(); } catch(e) { setErr(e.message); } setSaving(false); } return (
{/* PERSONAL INFO */}
👤 Personal info
{/* KITCHEN */}
🍳 Tell us about the kitchen