// screens-timetable.jsx — Teacher's weekly timetable + today list + substitute request // 1. TeacherTimetableScreen — Mon–Fri × 8 periods grid // 2. TeacherTodayScheduleScreen — vertical "today" list with current period highlighted // 3. TeacherSubstituteRequestScreen — request a sub for a leave day const { useState: useStateTT, useMemo: useMemoTT } = React; // Shared timetable data (Mrs. Reddy, Math, classes 8-B / 9-A / 10-C). function buildTimetable() { const periods = [ { p: 1, time: '8:00–8:45' }, { p: 2, time: '8:45–9:30' }, { p: 3, time: '9:30–10:15' }, { p: 4, time: '10:30–11:15' }, // after morning assembly { p: 5, time: '11:15–12:00' }, { p: 6, time: '12:00–12:45' }, { p: 7, time: '1:30–2:15' }, // after lunch { p: 8, time: '2:15–3:00' }, ]; const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; // Each cell: 'free' | { cls, sub, room } const grid = { Mon: ['8-B', null, '9-A', '8-B', '10-C', null, null, '9-A'], Tue: ['9-A', '8-B', null, '10-C', '8-B', null, '9-A', null], Wed: ['8-B', '9-A', null, '8-B', '10-C', null, '9-A', '10-C'], Thu: [null, '8-B', '10-C', null, '9-A', null, '8-B', null], Fri: ['10-C', null, '8-B', '9-A', null, null, '8-B', '10-C'], }; const ROOMS = { '8-B': '204', '9-A': '301', '10-C': '402' }; const expanded = days.map(d => ({ day: d, periods: periods.map((p, i) => { const cls = grid[d][i]; if (!cls) return { ...p, free: true }; return { ...p, cls, sub: 'Math', room: ROOMS[cls] }; }), })); return { days, periods, expanded }; } const TIMETABLE = buildTimetable(); // ───────────────────────────────────────────────────────────── // 1. Weekly timetable // ───────────────────────────────────────────────────────────── function TeacherTimetableScreen({ nav }) { const { days, periods, expanded } = TIMETABLE; const [view, setView] = useStateTT('week'); // 'week' | 'day' const [selectedDay, setSelectedDay] = useStateTT('Wed'); // Stats const totalLoad = days.reduce((s, d) => s + expanded.find(e => e.day === d).periods.filter(p => !p.free).length, 0); const perClass = useMemoTT(() => { const map = {}; expanded.forEach(d => d.periods.forEach(p => { if (!p.free) map[p.cls] = (map[p.cls] || 0) + 1; })); return map; }, []); return (
nav.pop()} right={}/>
{/* Tabs */}
{[{ id: 'week', lab: 'Week' }, { id: 'day', lab: 'By day' }].map(tb => ( ))}
{view === 'week' && ( <>
{days.map(d => ( ))} {periods.map((p, pi) => ( {days.map(d => { const cell = expanded.find(e => e.day === d).periods[pi]; if (cell.free) return ; return ( ); })} ))}
P{d}
{p.p}
{p.time.split('–')[0]}
—
{totalLoad}
PERIODS / WEEK
{Object.entries(perClass).map(([cls, n]) => (
{n}
Class {cls}
))}
)} {view === 'day' && ( <>
{days.map(d => ( ))}
{expanded.find(e => e.day === selectedDay).periods.map(p => p.free ? (
P{p.p}
—
{p.time}
) : ( ))}
)}
); } // ───────────────────────────────────────────────────────────── // 2. Today's schedule (vertical · with progress) // ───────────────────────────────────────────────────────────── function TeacherTodayScheduleScreen({ nav }) { const today = TIMETABLE.expanded.find(e => e.day === 'Wed') || TIMETABLE.expanded[0]; const currentPeriod = 4; // 10:30–11:15 const upcoming = today.periods.filter(p => !p.free && p.p > currentPeriod).slice(0, 3); return (
WED · 12 MAR · TODAY
5 teaching periods
{upcoming.length} more before lunch
{today.periods.map(p => { const isFree = p.free; const isPast = p.p < currentPeriod; const isCurrent = p.p === currentPeriod; const accent = isCurrent ? 'var(--p600)' : isPast ? 'var(--success)' : isFree ? 'var(--n300)' : 'var(--warning)'; return (
{!isFree &&
}
P{p.p}
{p.time.split('–')[0]}
{isFree ? 'Free / Lunch' : `Class ${p.cls} · ${p.sub}`}
{p.time}{!isFree ? ' · Room ' + p.room : ''}
{isCurrent && ● LIVE} {isPast && }
{!isFree && !isPast && (
)}
); })}
); } // ───────────────────────────────────────────────────────────── // 3. Substitute request // ───────────────────────────────────────────────────────────── function TeacherSubstituteRequestScreen({ nav, params }) { const [date, setDate] = useStateTT('2025-03-20'); const [reason, setReason] = useStateTT('Personal'); const [note, setNote] = useStateTT(''); const [periods, setPeriods] = useStateTT(() => new Set([1, 2, 4, 5])); // pre-select my teaching periods that day const [savedToast, setSavedToast] = useStateTT(false); const [matched, setMatched] = useStateTT(false); const togglePeriod = (p) => setPeriods(s => { const n = new Set(s); if (n.has(p)) n.delete(p); else n.add(p); return n; }); const candidates = [ { name: 'Mr. Bhat', sub: 'Hindi', match: 'Available P1, P2, P4, P5', score: 'Best match', clr: 'var(--success)' }, { name: 'Mrs. Menon', sub: 'Social Studies', match: 'Available P1, P2 only', score: 'Partial', clr: 'var(--warning)' }, { name: 'Mr. Iyer', sub: 'Science', match: 'Same subject family · P4, P5', score: 'Subject match', clr: 'var(--p600)' }, ]; return (
nav.pop()}/>
setDate(e.target.value)} style={{ width: '100%', height: 44, padding: '0 12px', borderRadius: 12, border: '1px solid var(--n200)', background: '#fff', fontSize: 13, fontFamily: 'inherit', }}/>
{['Personal', 'Sick', 'Medical', 'Family emergency', 'Training', 'Half-day'].map(r => ( ))}
{[1,2,3,4,5,6,7,8].map(p => { const sel = periods.has(p); const free = [3, 6].includes(p); // pretend these are my free periods return ( ); })}