// calendar.jsx — Full-featured calendar with Day/Week/Month views const HOUR_START = 0; const HOUR_END = 24; const HOUR_H = 54; // px per hour const HOURS = Array.from({ length: HOUR_END - HOUR_START }, (_, i) => HOUR_START + i); const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; function fmtH(h) { const hh = Math.floor(h); const mm = Math.round((h - hh) * 60); const p = hh >= 12 ? 'PM' : 'AM'; const d = hh > 12 ? hh - 12 : hh === 0 ? 12 : hh; return mm ? `${d}:${String(mm).padStart(2, '0')} ${p}` : `${d} ${p}`; } function ymd(d) {return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;} function sameDay(a, b) {return ymd(a) === ymd(b);} function getWeekStart(d) { const r = new Date(d);r.setHours(0, 0, 0, 0); const day = r.getDay(); r.setDate(r.getDate() - (day === 0 ? 6 : day - 1)); return r; } function addDays(d, n) {const r = new Date(d);r.setDate(r.getDate() + n);return r;} function sesColor(type) {return type === 'Town Hall' ? '#FF6B6B' : '#0F52BA';} // ---------- Live session data (Supabase) ---------- function timeToH(t) { if (!t) return 0; const [h, m] = String(t).split(':'); return parseInt(h, 10) + (parseInt(m, 10) || 0) / 60; } function nameInitials(name) { if (!name) return ''; return name.trim().split(/\s+/).map((w) => w[0]).join('').toUpperCase().slice(0, 2); } function sessionIsPast(dateISO, endH) { const end = new Date(dateISO + 'T00:00'); end.setHours(Math.floor(endH), Math.round((endH % 1) * 60), 0, 0); return end < new Date(); } async function fetchSessions() { // Scope to the effective user — under RLS normal members already see only their own 1:1s // + null-attendee town halls, but admins (incl. during View As) need an explicit filter // because is_admin() opens up SELECT to all rows. let q = window._supabase.from('sessions').select('*'); const uid = window.getActiveUserId ? await window.getActiveUserId() : null; if (uid) q = q.or(`attendee_id.eq.${uid},attendee_id.is.null`); const { data, error } = await q .order('session_date', { ascending: true }) .order('start_time', { ascending: true }); if (error) {console.error('Failed to load sessions:', error.message);return [];} return data || []; } // Map a DB row to the shape the calendar grid expects. function mapToCalSession(r) { const startH = timeToH(r.start_time); const endH = timeToH(r.end_time); const isTH = r.type === 'Town Hall'; return { id: r.id, type: r.type, title: r.title, date: r.session_date, startH, endH, mentor: r.mentor_name || 'MEGA', mInit: nameInitials(r.mentor_name) || (isTH ? 'MG' : 'ME'), mColor: isTH ? '#0A0A0A' : '#0F52BA', status: sessionIsPast(r.session_date, endH) ? 'past' : 'upcoming', link: r.meeting_link || '', recurring: r.recurrence && r.recurrence !== 'does-not-repeat' ? r.recurrence : undefined, agenda: r.agenda || '', isTownHall: isTH }; } // Map a DB row to the shape the Sessions list view expects. function mapToListSession(r) { const startH = timeToH(r.start_time); const endH = timeToH(r.end_time); const d = new Date(r.session_date + 'T12:00'); const isTH = r.type === 'Town Hall'; return { id: r.id, type: r.type, title: r.title, mentor: r.mentor_name || 'MEGA', mentorInitials: nameInitials(r.mentor_name) || (isTH ? 'MG' : 'ME'), mentorColor: isTH ? '#0A0A0A' : '#0F52BA', date: d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }), dateISO: r.session_date, time: `${fmtH(startH)} – ${fmtH(endH)} GST`, startH, endH, status: sessionIsPast(r.session_date, endH) ? 'past' : 'upcoming', link: r.meeting_link || '', agenda: r.agenda || '', notes: null }; } async function fetchCalSessions() {return (await fetchSessions()).map(mapToCalSession);} async function fetchListSessions() {return (await fetchSessions()).map(mapToListSession);} // ---------- Add to calendar (free: .ics download + Google/Outlook links) ---------- // Session times are wall-clock GST (UTC+4, no DST). Convert to UTC for portability. function sessionDateTimes(session) { const dateISO = session.date && /^\d{4}-\d{2}-\d{2}$/.test(session.date) ? session.date : session.dateISO; const [Y, M, D] = dateISO.split('-').map(Number); const mk = (h) => { const hh = Math.floor(h),mm = Math.round((h - hh) * 60); return new Date(Date.UTC(Y, M - 1, D, hh, mm) - 4 * 3600 * 1000); }; return { start: mk(session.startH), end: mk(session.endH) }; } function icsStamp(d) { const p = (n) => String(n).padStart(2, '0'); return d.getUTCFullYear() + p(d.getUTCMonth() + 1) + p(d.getUTCDate()) + 'T' + p(d.getUTCHours()) + p(d.getUTCMinutes()) + '00Z'; } function sessionDescription(session) { const head = (session.mentor ? 'With ' + session.mentor + '. ' : '') + (session.link ? 'Join: ' + session.link : ''); const ag = (session.agenda || '').trim(); return ag ? (head ? head + '\n\nAgenda:\n' + ag : 'Agenda:\n' + ag) : head; } function googleCalUrl(session) { const { start, end } = sessionDateTimes(session); const params = new URLSearchParams({ action: 'TEMPLATE', text: session.title || 'Vantage session', dates: `${icsStamp(start)}/${icsStamp(end)}`, details: sessionDescription(session), location: session.link || '' }); return 'https://calendar.google.com/calendar/render?' + params.toString(); } function outlookCalUrl(session) { const { start, end } = sessionDateTimes(session); const params = new URLSearchParams({ path: '/calendar/action/compose', rru: 'addevent', subject: session.title || 'Vantage session', startdt: start.toISOString(), enddt: end.toISOString(), body: sessionDescription(session), location: session.link || '' }); return 'https://outlook.office.com/calendar/0/deeplink/compose?' + params.toString(); } function downloadICS(session) { const { start, end } = sessionDateTimes(session); const esc = (s) => String(s || '').replace(/([,;\\])/g, '\\$1').replace(/\n/g, '\\n'); const lines = [ 'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//Vantage//MEGA//EN', 'CALSCALE:GREGORIAN', 'BEGIN:VEVENT', 'UID:' + (session.id || Date.now()) + '@vantage', 'DTSTAMP:' + icsStamp(new Date()), 'DTSTART:' + icsStamp(start), 'DTEND:' + icsStamp(end), 'SUMMARY:' + esc(session.title || 'Vantage session'), 'DESCRIPTION:' + esc(sessionDescription(session)), session.link ? 'LOCATION:' + esc(session.link) : '', 'END:VEVENT', 'END:VCALENDAR']. filter(Boolean); const blob = new Blob([lines.join('\r\n')], { type: 'text/calendar;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (session.title || 'session').replace(/[^a-z0-9]+/gi, '-').toLowerCase().replace(/^-|-$/g, '') + '.ics'; document.body.appendChild(a);a.click();document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1000); } function AddToCalendar({ session, compact }) { const [open, setOpen] = useState(false); const opts = [ { label: 'Google Calendar', fn: () => window.open(googleCalUrl(session), '_blank', 'noopener') }, { label: 'Outlook', fn: () => window.open(outlookCalUrl(session), '_blank', 'noopener') }, { label: 'Apple / download .ics', fn: () => downloadICS(session) }]; return (
{open && <>
{e.stopPropagation();setOpen(false);}} style={{ position: 'fixed', inset: 0, zIndex: 300 }} />
{opts.map((opt) => )}
}
); } // ---------- Session Detail Modal ---------- function SessionDetailModal({ session, onClose, isAdmin }) { const past = session.status === 'past'; const isTH = session.type === 'Town Hall'; const agendaLines = (session.agenda || '').split('\n').map((l) => l.trim()).filter(Boolean); return ( <>
{/* Header */}
{session.type} {session.recurring && ↻ Repeats {session.recurring}} {past && check Completed}
{session.title}
{/* Meta */}
Date & time
{session.date || ymd(new Date(session.date + 'T12:00'))}
{fmtH(session.startH)} – {fmtH(session.endH)} GST · {Math.round((session.endH - session.startH) * 60)} min
With
{session.mentor}
Meeting link
{session.link ? Join now open_in_new : Not set }
Attending
{isTH ? 'All members' : 'You + ' + (session.mentor || 'your mentor')}
{/* Agenda — plain text set by admin on the session; hidden entirely when empty */} {agendaLines.length > 0 &&
Session agenda
    {agendaLines.map((line, i) =>
  • {line}
    • )}
} {/* Footer */} {!past &&
{isAdmin && } {session.link && }
}
); } // ---------- Filter Bar ---------- function CalendarFilterBar({ filters, setFilters, sessions, view, date }) { const inPeriod = sessions.filter((s) => { const sd = new Date(s.date + 'T12:00'); if (view === 'month') return sd.getFullYear() === date.getFullYear() && sd.getMonth() === date.getMonth(); if (view === 'week') { const ws = getWeekStart(date); const we = addDays(ws, 6); return sd >= ws && sd <= we; } return sameDay(sd, date); }); const stats = {}; ['1:1', 'Town Hall'].forEach((t) => { const mine = inPeriod.filter((s) => s.type === t); const mins = mine.reduce((a, s) => a + (s.endH - s.startH) * 60, 0); stats[t] = { count: mine.length, mins: Math.round(mins) }; }); return (
{['1:1', 'Town Hall'].map((type) => { const on = filters[type]; return ( ); })}
{stats['1:1'].count} 1:1s {' · '}{Math.floor(stats['1:1'].mins / 60)}h {stats['1:1'].mins % 60}m / {stats['Town Hall'].count} Town Halls {' · '}{Math.floor(stats['Town Hall'].mins / 60)}h {stats['Town Hall'].mins % 60}m
); } // ---------- Month View ---------- function MonthView({ sessions, date, filters, onSelect }) { const year = date.getFullYear(),month = date.getMonth(); const firstDay = new Date(year, month, 1).getDay(); const startOffset = firstDay === 0 ? 6 : firstDay - 1; const daysInMonth = new Date(year, month + 1, 0).getDate(); const today = new Date(); const cells = []; for (let i = 0; i < startOffset; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d)); while (cells.length % 7 !== 0) cells.push(null); const filtered = sessions.filter((s) => s.type === '1:1' ? filters['1:1'] : filters['Town Hall']); return (
{/* Day headers */}
{DAY_NAMES.map((d) =>
{d}
)}
{cells.map((d, i) => { if (!d) return
; const isToday = sameDay(d, today); const daySessions = filtered.filter((s) => sameDay(new Date(s.date + 'T12:00'), d)); const shown = daySessions.slice(0, 2); const extra = daySessions.length - 2; return (
{d.getDate()}
{shown.map((s) =>
onSelect(s)}> {s.recurring && ↻} {s.title}
)} {extra > 0 &&
+{extra} more
}
); })}
); } // ---------- Week View ---------- function WeekView({ sessions, date, filters, onSelect }) { const ws = getWeekStart(date); const today = new Date(); const weekDays = Array.from({ length: 7 }, (_, i) => addDays(ws, i)); const filtered = sessions.filter((s) => s.type === '1:1' ? filters['1:1'] : filters['Town Hall']); return (
{/* Corner */}
{/* Day headers */} {weekDays.map((d, i) =>
{DAY_NAMES[i]}
{d.getDate()}
)} {/* Time gutter + columns */}
{HOURS.map((h) =>
{h === 0 ? '12 AM' : h < 12 ? `${h} AM` : h === 12 ? '12 PM' : `${h - 12} PM`}
)}
{weekDays.map((d, di) => { const daySessions = filtered.filter((s) => sameDay(new Date(s.date + 'T12:00'), d)); const totalH = (HOUR_END - HOUR_START) * HOUR_H; return (
{HOURS.map((h) =>
)} {daySessions.map((s) => { const top = (s.startH - HOUR_START) * HOUR_H; const height = Math.max((s.endH - s.startH) * HOUR_H, 28); const klass = s.type === 'Town Hall' ? 'evt-coral' : 'evt-sapphire'; return (
onSelect(s)}> {height > 38 &&
{fmtH(s.startH)} – {fmtH(s.endH)}
}
{s.recurring && '↻ '}{s.title}
); })}
); })}
); } // ---------- Day View ---------- function DayView({ sessions, date, filters, onSelect }) { const today = new Date(); const isToday = sameDay(date, today); const filtered = sessions.filter((s) => sameDay(new Date(s.date + 'T12:00'), date) && ( s.type === '1:1' ? filters['1:1'] : filters['Town Hall']) ); const totalH = (HOUR_END - HOUR_START) * HOUR_H; return (
{date.toLocaleDateString('en-US', { weekday: 'long' })}
{date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}
{HOURS.map((h) =>
{h === 0 ? '12 AM' : h < 12 ? `${h} AM` : h === 12 ? '12 PM' : `${h - 12} PM`}
)}
{HOURS.map((h) =>
)} {filtered.length === 0 &&
No sessions today
} {filtered.map((s) => { const top = (s.startH - HOUR_START) * HOUR_H; const height = Math.max((s.endH - s.startH) * HOUR_H, 36); const klass = s.type === 'Town Hall' ? 'evt-coral' : 'evt-sapphire'; return (
onSelect(s)}>
{fmtH(s.startH)} – {fmtH(s.endH)} · {s.mentor}
{s.recurring && '↻ '}{s.title}
); })}
); } // ---------- Main Calendar ---------- function Calendar({ isAdmin, reloadKey }) { const TODAY = new Date(); const [view, setView] = useState('month'); const [date, setDate] = useState(new Date()); const [filters, setFilters] = useState({ '1:1': true, 'Town Hall': true }); const [selected, setSelected] = useState(null); const [recurringType, setRecurringType] = useState('does-not-repeat'); const [sessions, setSessions] = useState([]); React.useEffect(() => { let active = true; fetchCalSessions().then((rows) => {if (active) setSessions(rows);}); return () => {active = false;}; }, [reloadKey]); const navigate = (delta) => { const d = new Date(date); if (view === 'month') d.setMonth(d.getMonth() + delta);else if (view === 'week') d.setDate(d.getDate() + delta * 7);else d.setDate(d.getDate() + delta); setDate(d); }; const periodLabel = () => { if (view === 'month') return `${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`; if (view === 'week') { const ws = getWeekStart(date); const we = addDays(ws, 6); return ws.getMonth() === we.getMonth() ? `${ws.getDate()} – ${we.getDate()} ${MONTH_NAMES[ws.getMonth()]} ${ws.getFullYear()}` : `${ws.getDate()} ${MONTH_NAMES[ws.getMonth()]} – ${we.getDate()} ${MONTH_NAMES[we.getMonth()]}`; } return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }); }; return (
{/* Calendar nav */}
{periodLabel()}
{/* Filter bar + time summary */} {/* Admin: recurring option */} {isAdmin &&
New session recurrence: Recurring sessions show ↻ on their tiles.
} {/* Active view */} {view === 'month' && } {view === 'week' && } {view === 'day' && } {selected && setSelected(null)} isAdmin={isAdmin} />}
); } Object.assign(window, { Calendar, SessionDetailModal, AddToCalendar, fmtH, fetchSessions, fetchCalSessions, fetchListSessions, mapToCalSession, mapToListSession });