June 2026

← May Jul →

{days.map((d) =>

{d}

)} {cells.map((day) => { const dayEvents = events.filter((ev) => ev.juneDays && ev.juneDays.includes(day)); const isToday = day === 6; // simulated "today" return (

{day}

{dayEvents.filter((e, i) => i === 0 || dayEvents[i - 1].id !== e.id).map((ev, i) =>

onSelect(ev)} style={{ fontSize: 10, fontWeight: 700, color: "#fff", background: ev.colorHex, borderRadius: 4, padding: "2px 5px", marginBottom: 2, cursor: "pointer", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> {ev.title.split(" ")[0]}

)}

); })}

{events.filter((ev) => ev.juneDays && ev.juneDays.length > 0).map((ev) =>

{ev.title}

)}

); } /* ── PARTICIPANTS TAB ── */ function ParticipantsTab({ ev }) { const [ps, setPs] = useState(ev.participants || []); function togglePresent(i, val) { setPs((prev) => {const n = [...prev];n[i] = { ...n[i], present: val };return n;}); } if (!ps.length) return (

No participants yet. Share the registration link to invite learners.

); return (

{ps.filter((p) => p.status === "confirmed").length} confirmed · {ps.filter((p) => p.status === "waitlist").length} waitlist

{ps.map((p, i) => )}

Participant	Status	Attendance
{p.name} {p.co} · {p.email}	{p.status}	{p.present === null ? : togglePresent(i, null)}> {p.present ? "✓ Present" : "✗ Absent"} }

); } /* ── LOGISTICS TAB ── */ function LogisticsTab({ ev }) { const [checked, setChecked] = useState([]); function toggle(m) {setChecked((c) => c.includes(m) ? c.filter((x) => x !== m) : [...c, m]);} return (

Materials checklist

{ev.materials.map((m, i) =>

toggle(m)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: "1px solid var(--line-2)", cursor: "pointer" }}>

{checked.includes(m) && }

{m}

)}

Catering

{ev.catering}

Venue & notes

Venue: {ev.venue}, {ev.city}

Room: {ev.room}

Language: {ev.lang}

{ev.notes}

); } /* ── COMMUNICATIONS TAB ── */ function CommunicationsTab({ ev }) { const [sent, setSent] = useState([]); const c = ev.comms; const isVirtual = ev.mode !== "physical"; const plan = c ? [ { on: c.confirm, phase: "On sign-up", label: "Registration confirmation", when: "Instant", icon: "checkCircle", color: "#2e7d32", tags: [c.allergies && ev.mode !== "virtual" ? "Allergies request" : null, c.location ? (isVirtual ? "Join link" : "Location info") : null, c.attach || null].filter(Boolean) }, { on: c.rem1On, phase: "Before", label: "Reminder 1", when: c.rem1When, icon: "bell", color: "#e65100" }, { on: c.rem2On, phase: "Before", label: "Reminder 2", when: c.rem2When, icon: "bell", color: "#e65100" }, { on: c.evalOn, phase: "After", label: "Evaluation survey", when: c.evalWhen, icon: "star", color: "#7c3aed" }, { on: c.recapOn, phase: "After", label: "Event content & recap", when: c.recapWhen, icon: "download", color: "#00838f" } ].filter((x) => x.on) : null; const templates = [ { id: "invite", icon: "share", label: "Send invitation", desc: "Registration link + event details", color: "#1281c4" }, { id: "reminder", icon: "bell", label: "Send reminder", desc: "1 week before the event", color: "#f99d25" }, { id: "logistics", icon: "list", label: "Send logistics info", desc: "Venue, materials & practical info", color: "#3bc1ce" }, { id: "cert", icon: "cert", label: "Issue certificates", desc: "After event completion", color: "#7c3aed" }]; return (

{plan &&

Automated sequence {plan.length} active

{plan.map((p, i) =>

{p.label}

{p.phase} · {p.when}

{p.tags && p.tags.length > 0 &&

{p.tags.map((t, ti) => {t})}

}

Scheduled

)}

}

Send now

{templates.map((t) =>

{t.label}

{t.desc}

{sent.includes(t.id) ? ✓ Sent (demo) : }

)}

); } /* ── EVENT DETAIL PANEL ── */ function EventDetail({ ev, onClose, onHost, onPreviewReg }) { const [tab, setTab] = useState("overview"); const pct = Math.round(ev.registered / ev.capacity * 100); const isVirtual = ev.mode !== "physical"; const plat = ev.platform && PLATFORMS[ev.platform]; const regUrl = "learn.vanharen.net/e/" + ev.regSlug; const TABS = [["overview", "Overview"], ["participants", "Participants"], ["logistics", "Logistics"], ["comms", "Communications"]]; return (

{/* header */}

{ev.type}

{ev.title}

{ev.start} – {ev.end} · {ev.days} days · {ev.time}

{ev.mode === "virtual" ? plat.label : ev.venue + ", " + ev.city}

{/* tabs */}

{TABS.map(([id, lbl]) => )}

{/* tab content */}

{tab === "overview" &&

{[["Host", ev.trainer], ["Language", ev.lang], [isVirtual ? "Format" : "Room", isVirtual ? MODE_META[ev.mode].label : ev.room], [isVirtual ? "Registered" : "Capacity", ev.registered + "/" + ev.capacity]].map(([k, v]) =>

{k}

{v}

)}

Registration{pct}%

= 95 ? "#c62828" : pct >= 75 ? "#e65100" : "#1281c4" }} />

{isVirtual &&

Hosted on

{plat.label}

{plat.built && BUILT-IN}

{ev.joinUrl}

} {/* Hosted registration / sign-on page */}

Sign-up page

{ev.regPublished ? "● Published & live" : "○ Not published"}

{regUrl}

} {tab === "participants" && } {tab === "logistics" && } {tab === "comms" && }

); } /* ── NEW EVENT MODAL ── */ const VH_FIELD = { width: "100%", padding: "10px 12px", borderRadius: 9, border: "1.5px solid var(--line)", outline: "none", fontSize: 14, fontFamily: "var(--body)" }; const VH_LABEL = { fontSize: 12.5, fontWeight: 700, color: "var(--ink2)", display: "block", marginBottom: 5 }; function slugify(s) {return (s || "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");} function fmtRange(sd, ed) { const M = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const s = new Date(sd + "T00:00"),e = new Date(ed + "T00:00"); const start = s.getDate() + " " + M[s.getMonth()]; const end = e.getDate() + " " + M[e.getMonth()] + " " + e.getFullYear(); const days = Math.max(1, Math.round((e - s) / 864e5) + 1); const juneDays = [];if (s.getMonth() === 5) for (let d = s.getDate(); d <= Math.min(30, s.getMonth() === e.getMonth() ? e.getDate() : 30); d++) juneDays.push(d); return { start, end, days, juneDays }; } /* ── COMMS PLAN PRIMITIVES ── */ const REMINDER_WHENS = ["2 weeks before", "1 week before", "3 days before", "1 day before", "Morning of event"]; const AFTER_WHENS = ["Same day", "Next morning", "1 day after", "3 days after", "1 week after"]; function MiniSwitch({ on, onClick, color = "#2e7d32" }) { return ( ); } function CommRow({ icon, color = "#1281c4", title, desc, when, whenOpts, onWhen, on, onToggle, children }) { return (

{title}

{desc}

{whenOpts && on && }
{on && children &&
{children}
}
); } function CommCheck({ on, onClick, label }) { return ( {on && } {label} ); } function PhaseLabel({ children }) { return
{children}
; } function NewEventModal({ onClose, onCreate }) { const eventTypes = ["Seminar", "Webinar", "Masterclass", "Workshop", "Pizza session", "Drinks & networking", "Hackathon", "Meetup", "Conference"]; const trainers = [["Jonas Bakker", "JB"], ["Eva Groot", "EG"], ["Pieter van Dam", "PD"], ["Maria Santos", "MS"]]; const [mode, setMode] = useState("physical"); const [platform, setPlatform] = useState("vanharen"); const [title, setTitle] = useState(""); const [type, setType] = useState(eventTypes[0]); const [trainer, setTrainer] = useState(trainers[0][0]); const [sd, setSd] = useState("2026-07-01"); const [ed, setEd] = useState("2026-07-03"); const [st, setSt] = useState("09:00"); const [et, setEt] = useState("17:00"); const [venue, setVenue] = useState(VENUES[0]); const [room, setRoom] = useState(""); const [cap, setCap] = useState(16); const [lang, setLang] = useState("Dutch"); const [price, setPrice] = useState(""); const [notes, setNotes] = useState(""); const [publish, setPublish] = useState(true); const [comms, setComms] = useState({ confirm: true, allergies: true, location: true, attach: "Joining instructions.pdf", rem1On: true, rem1When: "1 week before", rem2On: true, rem2When: "1 day before", evalOn: true, evalWhen: "Next morning", recapOn: true, recapWhen: "1 day after" }); const cset = (p) => setComms((c) => ({ ...c, ...p })); const isVirtual = mode !== "physical"; const slug = slugify(title) || "new-event"; function create(asDraft) { const colorByMode = mode === "virtual" ? PLATFORMS[platform].color : "#1281c4"; const r = fmtRange(sd, ed); const ti = trainers.find((t) => t[0] === trainer)[1]; const ev = { id: Date.now(), title: title.trim() || "Untitled event", type, colorHex: colorByMode, mode, price: price.trim() || (isVirtual ? "€39" : "Free"), regSlug: slug, regPublished: asDraft ? false : publish, start: r.start, end: r.end, juneDays: r.juneDays, days: r.days, time: st + "–" + et, venue: isVirtual ? mode === "hybrid" ? venue : "Online" : venue.split(",")[0], city: isVirtual ? PLATFORMS[platform].label : (venue.split(",")[1] || "").trim(), room: isVirtual ? mode === "hybrid" ? room : "—" : room || "—", capacity: +cap || (isVirtual ? 250 : 40), registered: 0, trainer, ti, status: asDraft ? "draft" : "pending", lang, blurb: notes.trim() || type + " — hosted by Van Haren.", materials: [], catering: isVirtual ? "—" : "Refreshments included", notes: notes.trim() || "—", platform: isVirtual ? platform : undefined, joinUrl: isVirtual ? platform === "vanharen" ? "live.vanharen.net/r/" + slug : platform + ".vanharen.net/" + slug : undefined, comms: { ...comms }, participants: [] }; onCreate(ev);onClose(); } const modeOpts = [["physical", "In-person", "pin"], ["virtual", "Online webinar", "video"], ["hybrid", "Hybrid", "globe"]]; return (
{if (e.target === e.currentTarget) onClose();}}>

New event

{/* MODE SELECTOR */}
{modeOpts.map(([id, lbl, ic]) => )}

Event title setTitle(e.target.value)} style={VH_FIELD} placeholder="e.g. Pizza & Projects — June" />

Event type

Host

Start date setSd(e.target.value)} style={VH_FIELD} />

End date setEd(e.target.value)} style={VH_FIELD} />

Start time setSt(e.target.value)} style={VH_FIELD} />

End time setEt(e.target.value)} style={VH_FIELD} />

{/* PLATFORM PICKER (virtual / hybrid) */} {isVirtual &&
Hosting tool
{Object.keys(PLATFORMS).map((k) => )}

{PLATFORMS[platform].desc}

} {/* VENUE (physical / hybrid) */} {mode !== "virtual" &&
{mode === "hybrid" ? "On-site venue (for in-room attendees)" : "Venue"}
}
{mode !== "virtual" &&
Room setRoom(e.target.value)} style={VH_FIELD} placeholder="Room A" />
}
{isVirtual ? "Max attendees" : "Capacity"} setCap(e.target.value)} style={VH_FIELD} />

Price setPrice(e.target.value)} style={VH_FIELD} placeholder={isVirtual ? "€295 / Free" : "€1.395"} />

Language

Description & notes setNotes(e.target.value)} style={{ ...VH_FIELD, resize: "vertical" }} placeholder="Shown on the sign-up page. Catering, parking, joining instructions…" /></div> {/* HOSTED SIGN-UP PAGE */} <div style={{ border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}> <button onClick={() => setPublish((p) => !p)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 12, padding: "13px 15px", background: publish ? "#e8f5e9" : "var(--surface-2)", border: "none", cursor: "pointer", textAlign: "left" }}> <div style={{ width: 34, height: 34, borderRadius: 9, background: publish ? "#2e7d32" : "var(--surface-3)", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name="globe" size={18} style={{ color: publish ? "#fff" : "var(--ink3)" }} /></div> <div style={{ flex: 1 }}> <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>Host a public sign-up page</div> <div style={{ fontSize: 12, color: "var(--ink2)" }}>A branded registration webpage learners can sign on through.</div> </div> <span style={{ width: 42, height: 24, borderRadius: 999, background: publish ? "#2e7d32" : "var(--line)", position: "relative", flexShrink: 0, transition: "background .15s" }}> <span style={{ position: "absolute", top: 3, left: publish ? 21 : 3, width: 18, height: 18, borderRadius: "50%", background: "#fff", transition: "left .15s", boxShadow: "0 1px 3px rgba(0,0,0,.25)" }} /> </span> </button> {publish && <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "11px 15px", borderTop: "1px solid var(--line)" }}> <Icon name="link" size={13} style={{ color: "var(--ink3)", flexShrink: 0 }} /> <span style={{ fontSize: 12.5, color: "var(--ink2)", fontFamily: "var(--display)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>learn.vanharen.net/e/<b style={{ color: "var(--vh-blue-600)" }}>{slug}</b></span> </div> } </div> {/* AUTOMATED COMMUNICATIONS */} <div style={{ border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}> <div style={{ padding: "13px 15px", background: "var(--surface-2)", display: "flex", alignItems: "center", gap: 11 }}> <div style={{ width: 34, height: 34, borderRadius: 9, background: "var(--vh-blue-500)", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name="mail" size={18} style={{ color: "#fff" }} /></div> <div style={{ flex: 1 }}> <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>Automated communications</div> <div style={{ fontSize: 12, color: "var(--ink2)" }}>Emails sent to registrants automatically around the event.</div> </div> </div> <PhaseLabel>On registration</PhaseLabel> <CommRow icon="checkCircle" color="#2e7d32" title="Registration confirmation" desc="Sent the moment someone signs up" on={comms.confirm} onToggle={() => cset({ confirm: !comms.confirm })}> {mode !== "virtual" && <CommCheck on={comms.allergies} onClick={() => cset({ allergies: !comms.allergies })} label="Ask for allergies & dietary requirements" />} <CommCheck on={comms.location} onClick={() => cset({ location: !comms.location })} label={isVirtual ? "Include joining instructions & link" : "Include location, route & parking info"} /> {/* attachment */} {comms.attach ? <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 9, padding: "7px 10px" }}> <Icon name="file" size={14} style={{ color: "var(--vh-blue-500)", flexShrink: 0 }} /> <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{comms.attach}</span> <span style={{ fontSize: 10.5, fontWeight: 700, color: "var(--ink3)" }}>auto-attached</span> <button onClick={() => cset({ attach: "" })} style={{ background: "none", border: "none", cursor: "pointer", display: "grid", placeItems: "center", padding: 2 }}><Icon name="x" size={13} style={{ color: "var(--ink3)" }} /></button> </div> : <button onClick={() => cset({ attach: isVirtual ? "Joining instructions.pdf" : "Route & parking.pdf" })} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 700, color: "var(--vh-blue-600)", background: "none", border: "1px dashed var(--line)", borderRadius: 9, padding: "7px 11px", cursor: "pointer", alignSelf: "flex-start" }}><Icon name="plus" size={13} />Attach a file to the mail</button> } </CommRow> <PhaseLabel>Before the event</PhaseLabel> <CommRow icon="bell" color="#e65100" title="Reminder 1" desc="Practical recap & what to bring" when={comms.rem1When} whenOpts={REMINDER_WHENS} onWhen={(w) => cset({ rem1When: w })} on={comms.rem1On} onToggle={() => cset({ rem1On: !comms.rem1On })} /> <CommRow icon="bell" color="#e65100" title="Reminder 2" desc={isVirtual ? "Final reminder with the join link" : "Final reminder with directions"} when={comms.rem2When} whenOpts={REMINDER_WHENS} onWhen={(w) => cset({ rem2When: w })} on={comms.rem2On} onToggle={() => cset({ rem2On: !comms.rem2On })} /> <PhaseLabel>After the event</PhaseLabel> <CommRow icon="star" color="#7c3aed" title="Evaluation survey" desc="Collect feedback & NPS" when={comms.evalWhen} whenOpts={AFTER_WHENS} onWhen={(w) => cset({ evalWhen: w })} on={comms.evalOn} onToggle={() => cset({ evalOn: !comms.evalOn })} /> <CommRow icon="download" color="#00838f" title="Event content & recap" desc={isVirtual ? "Recording, slides & certificate" : "Slides, materials & certificate"} when={comms.recapWhen} whenOpts={AFTER_WHENS} onWhen={(w) => cset({ recapWhen: w })} on={comms.recapOn} onToggle={() => cset({ recapOn: !comms.recapOn })} /> </div> <div style={{ display: "flex", gap: 10, marginTop: 4 }}> <button className="btn btn-pri" style={{ flex: 1, padding: "12px", borderRadius: 11 }} onClick={() => create(false)}><Icon name="plus" size={16} />Create & publish</button> <button className="btn btn-ghost" style={{ flex: 1, padding: "12px", borderRadius: 11 }} onClick={() => create(true)}>Save as draft</button> </div> </div> </div> </div>); } /* ── MAIN EVENTS SCREEN ── */ function Events() { const [view, setView] = useState("list"); const [selected, setSelected] = useState(null); const [events, setEvents] = useState(PHYS_EVENTS); const [showNew, setShowNew] = useState(false); const [filter, setFilter] = useState("all"); const [modeFilter, setModeFilter] = useState("all"); const [hosting, setHosting] = useState(null); const [previewReg, setPreviewReg] = useState(null); const filters = ["all", "confirmed", "pending", "full", "draft"]; const byMode = modeFilter === "all" ? events : events.filter((e) => e.mode === modeFilter); const filtered = filter === "all" ? byMode : byMode.filter((e) => e.status === filter); const totalReg = events.reduce((s, e) => s + e.registered, 0); const totalCap = events.reduce((s, e) => s + e.capacity, 0); const virtualCount = events.filter((e) => e.mode !== "physical").length; function selectEv(ev) {setSelected(ev === selected ? null : ev);setView("list");} function createEvent(ev) {setEvents((prev) => [ev, ...prev]);setSelected(ev);} return ( <div> {/* Page head */} <div className="between" style={{ marginBottom: 22 }}> <div className="page-head" style={{ marginBottom: 0 }}> <h1>Events & Webinars</h1> <p>Plan seminars, webinars, meetups and social sessions — each with a hosted sign-up page.</p> </div> <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}> <div className="segtabs"> <button className={"segtab" + (view === "list" ? " on" : "")} onClick={() => setView("list")} style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="list" size={14} />List</button> <button className={"segtab" + (view === "calendar" ? " on" : "")} onClick={() => setView("calendar")} style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="calendar" size={14} />Calendar</button> </div> <button className="btn btn-acc" onClick={() => setShowNew(true)}><Icon name="plus" size={16} />New event</button> </div> </div> {/* Stats */} <div className="stat-grid" style={{ marginBottom: 20 }}> {[ { label: "Upcoming events", val: events.filter((e) => e.status !== "cancelled").length, icon: "calendar", bg: "var(--vh-blue-50)", ic: "var(--vh-blue-500)" }, { label: "Online webinars", val: virtualCount, icon: "video", bg: "#f3e8ff", ic: "#7c3aed" }, { label: "Registered", val: totalReg.toLocaleString(), icon: "users", bg: "#e8f5e9", ic: "#2e7d32" }, { label: "Sign-up pages live", val: events.filter((e) => e.regPublished).length, icon: "globe", bg: "#e0f7fa", ic: "#00838f" }]. map((s) => <div key={s.label} className="card stat-card"> <div className="between" style={{ marginBottom: 12 }}> <div className="eyebrow">{s.label}</div> <div className="stat-ico" style={{ background: s.bg }}><Icon name={s.icon} size={17} style={{ color: s.ic }} /></div> </div> <div className="kpi" style={{ fontSize: 30 }}>{s.val}</div> </div> )} </div> {/* Filters */} {view === "list" && <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}> <div className="segtabs"> {[["all", "All"], ["physical", "In-person"], ["virtual", "Webinars"], ["hybrid", "Hybrid"]].map(([id, lbl]) => <button key={id} className={"segtab" + (modeFilter === id ? " on" : "")} onClick={() => setModeFilter(id)}>{lbl}</button> )} </div> <span style={{ width: 1, height: 22, background: "var(--line)" }} /> {filters.map((f) => <button key={f} onClick={() => setFilter(f)} className={"filter-chip" + (filter === f ? " on" : "")}> {f === "all" ? "All statuses" : EV_STATUS[f]?.label || f} {f !== "all" && <span style={{ marginLeft: 6, fontWeight: 800, fontSize: 12 }}>{events.filter((e) => e.status === f).length}</span>} </button> )} </div> } {/* Main content */} <div style={{ display: "flex", gap: 18, alignItems: "flex-start" }}> <div style={{ flex: 1, minWidth: 0 }}> {view === "list" && <div style={{ display: "flex", flexDirection: "column", gap: 12 }}> {filtered.length === 0 && <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--ink3)" }}>No events match this filter.</div> } {filtered.map((ev) => <EventCard key={ev.id} ev={ev} selected={selected?.id === ev.id} onSelect={selectEv} />)} </div> } {view === "calendar" && <EventCalendar events={events} onSelect={selectEv} />} </div> {selected && <EventDetail ev={selected} onClose={() => setSelected(null)} onHost={setHosting} onPreviewReg={setPreviewReg} />} </div> {showNew && <NewEventModal onClose={() => setShowNew(false)} onCreate={createEvent} />} {hosting && <EventHostRoom ev={hosting} onClose={() => setHosting(null)} />} {previewReg && <RegistrationPage ev={previewReg} onClose={() => setPreviewReg(null)} onRegister={() => setEvents((prev) => prev.map((e) => e.id === previewReg.id ? { ...e, registered: e.registered + 1 } : e))} />} </div>); } Object.assign(window, { Events, PLATFORMS, PlatformChip, ModeChip, MODE_META, EvBadge, EV_STATUS });