// src/features/instructor/ui/instructor-schedule-calendar.jsx // // Weekly calendar view of the instructor's bookings + availability. // One of the two "view" modes mounted by InstructorPortal (the other // being InstructorScheduleList). // // Public: window.InstructorScheduleCalendar. // // Depends on (via window.*): AddLessonModal, AvailabilityModal, // LessonDetailPopup (all in instructor-dashboard-modals.jsx). const InstructorScheduleCalendar = ({ onBack }) => { const data = window.useDashboardData(); const auth = window.useAuth(); const [weekOffset, setWeekOffset] = React.useState(0); const [showAdd, setShowAdd] = React.useState(false); const [addDef, setAddDef] = React.useState({ date:'', hour:9 }); const [showAvail, setShowAvail] = React.useState(false); const [showBlock, setShowBlock] = React.useState(false); const [activeBooking, setActiveBooking] = React.useState(null); const [toast, setToast] = React.useState(''); const instructor = data.teacherProfile; const earnings = data.earnings() || { earnedThisMonth: 0, earnedThisMonthUnsettled: 0, owedToPlatform: 0, pendingPayout: 0 }; const availMap = React.useMemo(() => availabilityToMockMap(data.teacherAvailability), [data.teacherAvailability]); const weekDates = instWeekDates(weekOffset); const isToday = (d) => sameLocalDay(d, INST_TODAY); // v88: load this instructor's block-time entries (availability_exceptions) // so the grid can render imported Google events as visible blocks. The // booking page (instructor-booking-page.jsx) already reads this table for // its slot-filter purpose; the calendar grid was previously blind to it. const [blocks, setBlocks] = React.useState([]); React.useEffect(() => { if (!instructor || !instructor.id) return; let cancelled = false; const load = async () => { try { const rows = await window.Calendar.db.loadExceptions({ instructorId: instructor.id }); if (!cancelled) setBlocks(rows || []); } catch (_) { if (!cancelled) setBlocks([]); } }; load(); // Subscribe to realtime so cron-imported blocks appear without a refresh. let channel = null; if (window.supa && window.supa.channel) { channel = window.supa .channel('gcal-blocks-' + instructor.id) .on('postgres_changes', { event: '*', schema: 'public', table: 'availability_exceptions', filter: 'instructor_id=eq.' + instructor.id }, () => load()) .subscribe(); } return () => { cancelled = true; if (channel && window.supa && window.supa.removeChannel) { try { window.supa.removeChannel(channel); } catch (_) {} } }; }, [instructor?.id]); // Find the block (if any) covering a given hour-cell. Hour-cells are // {date, h} pairs in the browser's local timezone; we intersect the // [start_at, end_at) range against the [cellStart, cellEnd) hour. const blockAt = React.useCallback((cellDate, h) => { if (!blocks || !blocks.length) return null; const cellStart = new Date(cellDate); cellStart.setHours(h, 0, 0, 0); const cellEnd = new Date(cellStart.getTime() + 60 * 60 * 1000); for (const b of blocks) { const s = new Date(b.start_at); const e = new Date(b.end_at); if (s < cellEnd && e > cellStart) return b; } return null; }, [blocks]); // Dynamic visible-hour range so teachers with night availability see those rows. const visibleHours = React.useMemo( () => computeVisibleHours(availMap, data.teacherBookings), [availMap, data.teacherBookings] ); const showToast = msg => { setToast(msg); setTimeout(() => setToast(''), 2500); }; const addLesson = async (form) => { await data.createBookingAsTeacher(form); }; const addSeries = async (form) => { await window.supa.rpc('instructor_create_series', { p_student_id: form.studentId, p_first_at: form.firstAt, p_duration: form.durationMinutes, p_weeks: form.weeks, p_message: form.message, p_infinite: !!form.infinite, }); await data.refresh(); }; const updateBooking = async (id, patch) => { const { data: row, error } = await window.supa.from('bookings').update(patch).eq('id', id) .select('*, student:profiles(*)').single(); if (error) { alert(error.message); return; } // Refresh local cache await data.refresh(); setActiveBooking(null); }; // Find booking at a specific cell. const bookingAt = (cellDate, h) => data.teacherBookings.find(b => { if (b.status === 'cancelled') return false; const d = new Date(b.scheduledAt); return sameLocalDay(d, cellDate) && d.getHours() === h; }); const isAvail = (di, h) => (availMap[di] || []).includes(h); const weekLabel = (() => { const s = weekDates[0], e = weekDates[6]; return `${INST_MONTHS[s.getMonth()]} ${s.getDate()}–${s.getMonth() !== e.getMonth() ? INST_MONTHS[e.getMonth()]+' ' : ''}${e.getDate()}, ${s.getFullYear()}`; })(); const btnStyle = (primary) => ({ background: primary ? 'oklch(22% 0.06 265)' : 'oklch(96.5% 0.007 265)', color: primary ? '#fff' : 'oklch(38% 0.04 265)', border: primary ? 'none' : '1px solid oklch(90% 0.01 265)', borderRadius:8, padding:'7px 14px', fontSize:12, fontWeight: primary ? 600 : 500, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", whiteSpace:'nowrap', }); return (
{/* ── Header ── */}
COACHING
{weekLabel}
{(data.teacherAssignments || []).length > 0 && ( )}
{instructor?.full_name || '—'}
{/* ── Calendar grid ── */}
))} {visibleHours.map(h => ( {weekDates.map((d, di) => { const b = bookingAt(d, h); const blk = !b && blockAt(d, h); const avail = isAvail(di, h); const isTr = b && /trial/i.test(b.message || ''); const cellBg = b ? 'transparent' : blk ? (blk.is_imported ? 'oklch(96% 0.025 230)' : 'oklch(96% 0.018 25)') : avail ? 'oklch(98.2% 0.04 150)' : isToday(d) ? 'oklch(99.5% 0.004 265)' : '#fff'; return ( ); })} ))}
{weekDates.map((d, di) => (
{INST_DAYS[di]}
{d.getDate()}
{instH(h)} { if (b) setActiveBooking(b); else if (blk) { setShowBlock(true); } else if (avail) { setAddDef({ date:localDateStr(d), hour:h }); setShowAdd(true); } }} style={{ padding:'3px 3px', borderRight:'1px solid oklch(94.5% 0.005 60)', borderBottom:'1px solid oklch(95.5% 0.005 60)', background: cellBg, cursor: b || blk || avail ? 'pointer' : 'default', verticalAlign:'top', }} > {b ? (
{(b.student?.name || '?').split(' ')[0]}
{b.rescheduleRequestedAt && ( ↻ )} {(() => { const resolved = window.Meetings?.db?.resolveForBooking?.( { studentId: b.studentId, instructorId: b.instructorId, meetingLink: b.meetingLink }, data.teacherAssignments ); if (!resolved) return null; const joinable = window.Meetings.util.isJoinable(b.scheduledAt); if (!joinable) return link; return ( e.stopPropagation()} title="Join meeting" style={{ position:'absolute', bottom:2, right:3, fontSize:10, fontWeight:700, background:'#fff', color:'oklch(22% 0.06 265)', borderRadius:6, padding:'1px 6px', textDecoration:'none' }}> Join ); })()}
) : blk ? (
{blk.is_imported ? (blk.imported_title || 'Google event') : (blk.reason || 'Blocked')}
{blk.is_imported && (
from Google
)}
) : avail ? (
+
) : null}
{/* ── Balance strip — teacher only sees what they earned this month ── */}
Earned this month
{instFmt$(earnings.earnedThisMonthUnsettled)}
{toast && (
{toast}
)} {showAdd && ( setShowAdd(false)} /> )} {showAvail && ( data.saveAvailability(rows)} onClose={() => setShowAvail(false)} /> )} {showBlock && instructor && ( setShowBlock(false)} /> )} {activeBooking && ( updateBooking(activeBooking.id, { status: 'completed' })} onCancel={() => updateBooking(activeBooking.id, { status: 'cancelled' })} onMarkPaid={() => updateBooking(activeBooking.id, { paid: true })} onApproveReschedule={async () => { try { await data.approveReschedule(activeBooking.id); showToast('Reschedule approved'); setActiveBooking(null); } catch (e) { alert(e.message); } }} onDeclineReschedule={async () => { try { await data.declineReschedule(activeBooking.id); showToast('Reschedule declined'); setActiveBooking(null); } catch (e) { alert(e.message); } }} onSaveNotes={async (id, notes, complete, noShow) => { await data.saveLessonNotes(id, notes, complete, noShow); if (noShow) { showToast('Marked absent'); setActiveBooking(null); } else if (complete) { showToast('Lesson marked complete'); setActiveBooking(null); } }} onClose={() => setActiveBooking(null)} /> )}
); }; // ── Portal (top-level entry, wired to Supabase auth) ──────────────── window.InstructorScheduleCalendar = InstructorScheduleCalendar;