🏆 Milestone 1
{value}
/ {goal || 100} chefs
{milestone}
{open && (
) : (
{item.who} {item.what}
{item.when}
)
))
)}
)}
);
}
/* ── Profile menu ── */
function ProfileMenu() {
const [open, setOpen] = useState(false);
const [mode, setMode] = useState("menu"); // menu | pwd | name
const [newPwd, setNewPwd] = useState("");
const [confirm, setConfirm] = useState("");
const [newName, setNewName] = useState("");
const [msg, setMsg] = useState("");
const ref = useRef(null);
const user = firebase.auth().currentUser;
const displayName = user?.displayName || user?.email?.split("@")[0] || "Founder";
useEffect(() => {
function outside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
if (open) document.addEventListener("mousedown", outside);
return () => document.removeEventListener("mousedown", outside);
}, [open]);
async function changePwd(e) {
e.preventDefault();
if (newPwd !== confirm) return setMsg("Passwords don't match");
if (newPwd.length < 6) return setMsg("Min 6 characters");
try {
await firebase.auth().currentUser.updatePassword(newPwd);
setMsg("Password updated ✓");
setTimeout(() => { setMode("menu"); setMsg(""); setNewPwd(""); setConfirm(""); }, 1500);
} catch(err) { setMsg(err.message); }
}
async function changeName(e) {
e.preventDefault();
if (!newName.trim()) return setMsg("Enter a name");
try {
await firebase.auth().currentUser.updateProfile({ displayName: newName.trim() });
setMsg("Name updated ✓");
setTimeout(() => { setMode("menu"); setMsg(""); setNewName(""); }, 1500);
} catch(err) { setMsg(err.message); }
}
const initials = displayName.slice(0,2).toUpperCase();
return (
All activity
Live
{mergedActivity.length === 0 ? (
No activity yet
) : (
mergedActivity.map((item, i) => (
item.type === 'team' ? (
👥 {item.description}
{item.timeStr}
{open && (
);
}
/* ── Global search dropdown ── */
function GlobalSearch({ query, setQuery, navigate }) {
const [focused, setFocused] = useState(false);
const showTest = useShowTestData(); // respect the global LIVE/TEST toggle
const { can } = usePermissions();
const ref = useRef(null);
useEffect(() => {
function outside(e) { if (ref.current && !ref.current.contains(e.target)) setFocused(false); }
document.addEventListener("mousedown", outside);
return () => document.removeEventListener("mousedown", outside);
}, []);
const results = useMemo(() => {
if (!query || query.length < 2) return null;
const q = query.toLowerCase();
const t = window.BC_testAccounts;
// In LIVE mode, exclude test accounts + orphan orders from search too.
// Never surface results from a screen this member can't open — search
// is a side door into the same data, so it follows the same gate.
const chefs = !canSeeScreen(can,"chefs") ? [] : (window.BC.chefs || [])
.filter(c => showTest || !t || !t.isTestChef(c.docId))
.filter(c => (c.name+c.area+c.id).toLowerCase().includes(q)).slice(0,4)
.map(c => ({ type:"chef", label: c.name, sub: c.area+" · "+c.status, id:"chefs", docId:c.docId }));
const orders = !canSeeScreen(can,"orders") ? [] : (window.BC.orders || [])
.filter(o => !t || t.isOrderVisible(o, showTest))
.filter(o => (o.id+o.chef+o.customer).toLowerCase().includes(q)).slice(0,4)
.map(o => ({ type:"order", label: o.id+" · "+o.chef, sub: "EGP "+o.value+" · "+o.status, id:"orders", docId:o.docId }));
const customers = !canSeeScreen(can,"customers") ? [] : (window.BC.customers || [])
.filter(c => showTest || !t || !t.isTestCustomer(c.docId))
.filter(c => (c.name+c.area).toLowerCase().includes(q)).slice(0,3)
.map(c => ({ type:"customer", label: c.name, sub: c.area, id:"customers", docId:c.docId }));
return [...chefs, ...orders, ...customers];
}, [query, showTest, can]);
const iconMap = { chef:"chefs", order:"orders", customer:"customers" };
function pick(r) {
// Remember which item to open, go to its page, then ask that page to
// open the detail popup for it.
window.BC._pendingDetail = { view: r.id, docId: r.docId };
navigate(r.id);
setFocused(false);
setQuery("");
setTimeout(() => window.dispatchEvent(new CustomEvent("bc-open-detail")), 120);
}
return (
{mode === "menu" && (
<>
)}
{mode === "name" && (
)}
{mode === "pwd" && (
)}
)}
{displayName}
{user?.email}
Founder · BetyChef
{focused && results && results.length > 0 && (
)}
);
}
/* ── Topbar ── */
function Topbar({ view, query, setQuery, navigate, onToggleSidebar }) {
const user = firebase.auth().currentUser;
const displayName = user?.displayName || user?.email?.split("@")[0] || "Founder";
const firstName = displayName.split(" ")[0];
const date = new Date().toLocaleDateString("en-GB", { weekday:"long", day:"numeric", month:"long" });
const titles = {
overview: null, // handled separately
chefs: "Chef network",
applications: "Applications",
dishes: "Dishes",
orders: "Live orders",
customers: "Customers",
ops: "Operations",
controls: "Controls",
notify: "Notifications",
crm: "Outreach",
settings: "Team access",
};
return (
{results.map((r,i) => (
))}
)}
{focused && results && results.length === 0 && query.length >= 2 && (
No results for "{query}"
{view === "overview" ? (
<>
{date} · Cairo
Hello {firstName} 👋
Welcome back to BetyChef
) : (
<>
{date} · Cairo
{titles[view] || "BetyChef"}
)}
{stages.map(s => (
{s.label}
{s.n}
))}
);
}
/* ── Sparkline ── */
function Sparkline({ data, color }) {
if (!data || data.length < 2) return null;
const w=120,h=36,max=Math.max(...data),min=Math.min(...data);
const pts = data.map((d,i)=>[i/(data.length-1)*w, h-((d-min)/(max-min||1))*(h-6)-3]);
const line = pts.map((p,i)=>(i?"L":"M")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" ");
const area = line+` L ${w} ${h} L 0 ${h} Z`;
const id = "sp"+Math.abs(Math.round((data[0]||0)*1000+(data.length)*77));
return (
);
}
/* ── Stacked bars ── */
function StackedBars({ data }) {
const max = Math.max(...data.map(d=>d.repeat+d.first), 1);
return (
{data.map(d => {
const total = d.repeat+d.first;
return (
);
})}
);
}
/* ── Area bars ── */
function AreaBars({ areas }) {
const max = Math.max(...areas.map(a=>a.chefs), 1);
return (
{total||""}
{d.day}
{areas.map(a => (
{a.name}
);
}
/* ── Modal ── */
function Modal({ open, onClose, children, title, wide }) {
useEffect(() => {
function esc(e) { if (e.key==="Escape") onClose(); }
if (open) window.addEventListener("keydown", esc);
return () => window.removeEventListener("keydown", esc);
}, [open]);
if (!open) return null;
return (
);
}
/* ── Mobile nav ── */
function MobileNav({ view, setView }) {
const ns = window.BC.northStar || {};
const { can } = usePermissions();
const [open, setOpen] = useState(false);
const labels = {
overview:"Home",orders:"Orders",chefs:"Chefs",applications:"Applications",dishes:"Dishes",customers:"Customers",
ops:"Operations",notify:"Notifications",controls:"Controls",crm:"Outreach",settings:"Team Access",
};
// Only the sections this role can see
const items = NAV.filter(n => !n.isSeparator && canSeeScreen(can, n.id));
const activeLabel = labels[view] || "Menu";
function pick(id) { setView(id); setOpen(false); }
return (
<>
{/* Floating hamburger — bottom left, always there */}
{/* Pop-up nav sheet */}
{open && (
<>
{a.chefs}
))}
e.stopPropagation()}>
{title}
{children}
setOpen(false)}/>
)}
);
}
Object.assign(window, {
Icon, NAV, NAV_GROUPS, Sidebar, Topbar, ProfileMenu, ActivityBell, GlobalSearch, MobileNav,
useShowTestData, TestDataToggle, usePermissions, NAV_PERMISSION, TeamPreviewBar, Gate, canSeeScreen,
Pill, HealthBadge, Tag, Avatar, Toggle, SideGoalRing,
Pipeline, Sparkline, StackedBars, AreaBars, Modal,
});