Reschedule requested for {stdFmtDate(b.rescheduleRequestedAt)} at {stdHFromIso(b.rescheduleRequestedAt)}. Waiting for instructor.
)}
{b.message && (
Note
{b.message}
)}
);
const StudentHome = ({ onBack }) => {
const data = window.useDashboardData();
const auth = window.useAuth();
const [showBooking, setShowBooking] = React.useState(false);
const [rescheduleTarget, setRescheduleTarget] = React.useState(null);
const [showBlock, setShowBlock] = React.useState(false);
const [showAvail, setShowAvail] = React.useState(false);
// Viewer TZ = student's current browser zone, used for projecting the
// displayed availability hours. Calendly-style: detected on mount, the
// TimezoneBadge dropdown can override for this session, override is
// session-only (not written to profile, since profile.timezone is the
// anchor for the saved hours — not a viewing preference).
const [viewerTz, setViewerTz] = React.useState(() => window.Calendar.time.detect());
// The availability panel (view + edit) and all its draft state lives in
// student-home-availability.jsx as .
// Live-refresh: 8s polling that matches the instructor dashboard
// (see instructor-schedule-list.jsx). logic.js already wires realtime
// postgres_changes for bookings + availability_slots, but those events
// are RLS-aware and don't always fire — polling is the bulletproof
// backstop. Cheap because the student's row set is tiny.
React.useEffect(() => {
if (!auth.user?.id && !data.impersonating) return;
const tick = () => { if (data?.refresh) data.refresh(); };
tick();
const id = setInterval(tick, 8000);
return () => clearInterval(id);
}, [auth.user?.id, data.impersonating]);
// When the admin is in View-As mode the auth.profile is the admin's
// row (or null); use the impersonated student's name instead so the
// greeting + every other "{name}" reference shows the student we're
// viewing, not the admin who's viewing them.
const name = (data.impersonating && data.subjectProfile?.full_name)
|| auth.profile?.full_name
|| data.studentInfo?.phone
|| 'You';
const topic = data.studentInfo?.topicsOfInterest?.[0] || '';
const assignment = data.studentAssignments[0];
const instructor = assignment?.instructor || null;
const now = new Date();
const today = new Date(); today.setHours(0,0,0,0);
// Students see THIS week + NEXT week (Monday→Sunday each). "This week"
// includes the classes they've already had this week (shown as "Done"),
// not just the ones still to come. Anything before this Monday, or beyond
// next week, is hidden. (Joe, 2026-06-04.)
const monday = new Date(today);
monday.setDate(monday.getDate() - ((monday.getDay() + 6) % 7));
const nextMonday = new Date(+monday + 7 * 86400000);
const weekAfter = new Date(+monday + 14 * 86400000);
const allBookings = (data.studentBookings || [])
.filter(b => b.status !== 'cancelled')
.slice()
.sort((a, b) => new Date(a.scheduledAt) - new Date(b.scheduledAt));
const inWindow = allBookings.filter(b => { const d = new Date(b.scheduledAt); return d >= monday && d < weekAfter; });
const lessonGroups = [
{ key:'this-week', label:'This week', items: inWindow.filter(b => new Date(b.scheduledAt) < nextMonday) },
{ key:'next-week', label:'Next week', items: inWindow.filter(b => new Date(b.scheduledAt) >= nextMonday) },
].filter(g => g.items.length);
// Hero highlights the soonest lesson still to come within the window.
const nextLesson = inWindow.find(b => new Date(b.scheduledAt) >= now);
const canBook = (() => {
const everBooked = (data.studentBookings || []).some(b => b.usesCredit);
const balance = data.studentInfo?.classesBalance ?? 0;
return !everBooked || balance > 0;
})();
const daysUntil = nextLesson ? Math.max(0, Math.round((new Date(new Date(nextLesson.scheduledAt).setHours(0,0,0,0)) - today) / 86400000)) : null;
const requestReschedule = async (newIso) => {
try {
await data.requestReschedule(rescheduleTarget.id, newIso);
setRescheduleTarget(null);
} catch (e) { throw e; }
};
const hr = new Date().getHours();
const greeting = hr < 12 ? 'Good morning' : hr < 17 ? 'Good afternoon' : 'Good evening';
if (showBooking && instructor) {
return { setShowBooking(false); data.refresh(); }}
/>;
}
// Reschedule reuses the same Calendly month-view page — full takeover, not
// the old week-of-chips modal.
if (rescheduleTarget && instructor) {
return {
await data.requestReschedule(rescheduleTarget.id, newIso);
},
}}
onBack={() => { setRescheduleTarget(null); data.refresh(); }}
/>;
}
const card = (children, mb=20) => (
{children}
);
const sectionLabel = (txt) => (
{txt}
);
const studio = instructor?.studio || null;
// Online flag (admin sets it on the student row): when true we surface
// the meeting link prominently and skip the physical-studio block since
// those students don't have a studio location.
const isOnline = data.studentInfo?.isOnline === true;
const meetingLink = data.studentInfo?.meetingLink || '';
const studioPhone = studio?.phone || null;
return (
{/* Header — two rows on mobile, single row on desktop. flexWrap
allows graceful collapse without horizontal scroll at 375px. */}
COACHING
setShowAvail(true)}
onSignOut={onBack}
/>
{greeting}, {name.split(' ')[0]}
{/* Layout order (post-booking matters most): the focus is the
upcoming lesson IF one exists. Only when there's nothing on the
calendar do we lead with the book button. Previously the book
button was always first, which after booking pushed the new
lesson down the page and made it feel like nothing happened —
and the disabled "Out of classes" copy was scary. */}
{/* 1) Hero: next lesson if any. Reschedule is the only action —
Joe sends the meeting link himself, so there's no Join button,
and students can't self-cancel (they reschedule instead). */}
{nextLesson && (
Reschedule pending — you asked to move this to {stdFmtDate(nextLesson.rescheduleRequestedAt)} at {stdHFromIso(nextLesson.rescheduleRequestedAt)}. Waiting for your instructor to confirm.
)}
{/* 3) Friendly empty-state only when there really is no upcoming
lesson AND no instructor yet. With an instructor the book button
above is enough — we don't also need a "No upcoming lessons"
card because we already showed one of the two more useful cards. */}
{!nextLesson && !instructor && card(
<>
No upcoming lessons yet
You'll see your upcoming lessons here once your tutor is assigned.
{/* Availability moved into the "My account" menu (top-right) → opens
in the modal below. See setShowAvail + StudentAccountMenu. */}
{/* No student-facing phone UI: the student's call number is managed
entirely from the admin dashboard (Edit student → Phone). The
student never sees or edits it. */}
{showBlock && auth.user && (
setShowBlock(false)}
/>
)}
{/* My availability — opened from the "My account" menu. Same panel that
used to sit in the dashboard body; now in a modal so the body stays
focused on this week's classes. */}
{showAvail && (