// Attendance + schedule views (teacher attendance, teacher & parent // schedules) and their shared status constants. Split out of features-more.jsx. // ── Teacher: Attendance ─────────────────────────────────────────────────────── const ATTEND_STATUSES = ["present","late","missed","tech_issue","pending"]; const ATTEND_LABELS = { present:"Present", late:"Late", missed:"Missed", tech_issue:"Tech Issue", pending:"Pending", absent:"Absent" }; const ATTEND_COLOR = { present:"var(--moss)", late:"var(--gold)", missed:"var(--coral)", tech_issue:"var(--sky)", pending:"var(--rule-bold)", absent:"var(--coral)" }; const fmtSessionDate = d => { if (!d) return ""; try { return new Date(d + "T00:00:00").toLocaleDateString("en-GB",{weekday:"short",day:"numeric",month:"short"}); } catch { return d; } }; const TeacherAttendance = ({ dark = false, go, session: _session }) => { const { data: initSessions, loading: loadingSessions } = useApi("/sessions-with-roster"); const [allSessions, setAllSessions] = React.useState(null); const TEACHER_SESSIONS = allSessions ?? (Array.isArray(initSessions) ? initSessions : []); const [activeTab, setActiveTab] = React.useState("sessions"); const [selectedSession, setSelectedSession] = React.useState(null); React.useEffect(() => { if (TEACHER_SESSIONS.length && !selectedSession) setSelectedSession(TEACHER_SESSIONS[0].id); }, [TEACHER_SESSIONS.length]); const [editRoster, setEditRoster] = React.useState(null); // Poll so a session auto-advances upcoming→live→done during class without a // manual refresh. Skip while the teacher is mid-edit so unsaved marks survive. React.useEffect(() => { const id = setInterval(() => { if (editRoster) return; apiFetch("/sessions-with-roster").then(r => r.ok ? r.json() : null).then(d => { if (Array.isArray(d)) setAllSessions(d); }).catch(()=>{}); }, 45000); return () => clearInterval(id); }, [editRoster]); const [saving, setSaving] = React.useState(false); const [saved, setSaved] = React.useState({}); const session = TEACHER_SESSIONS.find(s => s.id === selectedSession); const workingRoster = editRoster || (session ? session.roster : []); const cycleStatus = i => { const cycle = { present:"late", late:"missed", missed:"tech_issue", tech_issue:"pending", pending:"present", absent:"present" }; setEditRoster(r => (r || session.roster).map((s, idx) => idx === i ? { ...s, status: cycle[s.status] || "present" } : s)); }; const saveSession = async () => { setSaving(true); try { const res = await apiFetch(`/sessions-with-roster/${selectedSession}/attendance`, { method: "POST", body: JSON.stringify({ roster: workingRoster.map(r => ({ student_id: r.student_id, status: r.status })) }), }); if (res.ok) { const fresh = await apiFetch("/sessions-with-roster").then(r=>r.json()); setAllSessions(fresh); setSaved(s => ({ ...s, [selectedSession]: true })); setEditRoster(null); if (window.showToast) { window.showToast({ title: "Attendance Updated", message: `Attendance saved for ${session?.batch || "Session"}! Synced across all portals.`, type: "success" }); } } else { if (window.showToast) window.showToast({ title: "Failed", message: "Could not save attendance.", type: "error" }); } } catch (e) { if (window.showToast) window.showToast({ title: "Error", message: e.message || "Failed to save", type: "error" }); } setSaving(false); }; // Build per-student summary across all sessions const allStudents = [...new Set(TEACHER_SESSIONS.flatMap(s => s.roster.map(r => r.name)))]; const studentSummary = allStudents.map(name => { const appearances = TEACHER_SESSIONS.filter(s => s.status !== "upcoming").flatMap(s => s.roster.filter(r => r.name === name)); const present = appearances.filter(r => r.status === "present").length; const late = appearances.filter(r => r.status === "late").length; const missed = appearances.filter(r => r.status === "missed").length; const techIssue = appearances.filter(r => r.status === "tech_issue").length; const color = TEACHER_SESSIONS.flatMap(s => s.roster).find(r => r.name === name)?.color || "var(--coral)"; const attended = present + late; const rate = appearances.length ? Math.round((attended / appearances.length) * 100) : 100; return { name, color, present, late, missed, techIssue, total: appearances.length, rate }; }).sort((a, b) => a.rate - b.rate); const statusColor = s => ATTEND_COLOR[s] || "var(--ink-mute)"; const statusBg = s => ATTEND_COLOR[s] || "var(--ink-mute)"; return (
{/* Header */}
Attendance
{TEACHER_SESSIONS.filter(s=>s.status!=="upcoming").length} sessions recorded
setActiveTab(v==="Sessions"?"sessions":"students")}/>
{activeTab === "sessions" ? (
{/* Session list */}
{loadingSessions && !TEACHER_SESSIONS.length && (
Loading sessions…
)} {!loadingSessions && !TEACHER_SESSIONS.length && (
No sessions found. Add sessions in the Schedule tab first.
)} {TEACHER_SESSIONS.map(s => { const present = s.roster.filter(r=>r.status==="present"||r.status==="late").length; const rate = s.roster.length ? Math.round((present/s.roster.length)*100) : 0; return (
{ setSelectedSession(s.id); setEditRoster(null); }} style={{ padding:"14px 18px", cursor:"pointer", borderBottom:"var(--border-thin)", background: selectedSession===s.id ? "var(--paper-deep)" : "transparent", borderLeft: selectedSession===s.id ? "3px solid var(--coral)" : "3px solid transparent", }}>
{s.batch} · {fmtSessionDate(s.day)}
{s.status}
{s.time} · {s.course}
{s.status !== "upcoming" && ( <>
=80?"var(--moss)":"var(--gold)" }}/>
{present}/{s.roster.length} present =80?"var(--moss)":"var(--gold)" }}>{rate}%
)} {s.completion_remarks && (
📝 {s.completion_remarks}
)} {saved[s.id] &&
✓ Attendance saved
}
); })}
{/* Session detail / mark attendance */} {session && (
{session.batch} · {fmtSessionDate(session.day)}
{session.time} · {session.course}
{editRoster && Unsaved changes}
{/* Summary chips */}
{ATTEND_STATUSES.map(st=>(
{workingRoster.filter(r=>r.status===st).length}
{ATTEND_LABELS[st]}
))}
Attendance rate {workingRoster.length ? Math.round((workingRoster.filter(r=>r.status==="present"||r.status==="late").length/workingRoster.length)*100) : 0}%
r.status==="present"||r.status==="late").length/workingRoster.length)*100) : 0}%`, background:"var(--moss)" }}/>
{session.completion_remarks && (
📝 Session Completion Remarks / Topics Covered
“{session.completion_remarks}”
)} {/* Roster with editable status */}
STUDENT ROSTER
Click a status pill to mark each student
{workingRoster.map((s, i) => (
{s.name}
{/* mini sparkline of this student's last 4 sessions */}
{TEACHER_SESSIONS.filter(sess=>sess.status!=="upcoming").slice(0,4).map((sess,si)=>{ const entry = sess.roster.find(r=>r.name===s.name); const st = entry ? entry.status : "absent"; return
; })} last {TEACHER_SESSIONS.filter(s=>s.status!=="upcoming").length} sessions
{ATTEND_STATUSES.map(st=>( ))}
))}
)}
) : ( /* By student view */
{[ { l:"AVG ATTENDANCE", v:`${Math.round(studentSummary.reduce((a,s)=>a+s.rate,0)/studentSummary.length)}%`, c:studentSummary.reduce((a,s)=>a+s.rate,0)/studentSummary.length >= 80?"var(--moss)":"var(--gold)" }, { l:"PERFECT (100%)", v:studentSummary.filter(s=>s.rate===100).length, c:"var(--moss)" }, { l:"AT RISK (<75%)", v:studentSummary.filter(s=>s.rate<75).length, c:"var(--coral)" }, ].map(k=>(
{k.l}
{k.v}
))}
{studentSummary.filter(s=>s.rate<75).length > 0 && (
{I.bell({ size:16 })}
At-risk students
{studentSummary.filter(s=>s.rate<75).map(s=>s.name).join(", ")} — attendance below 75%
)} {["Student","Sessions","Present","Late","Missed","Tech Issue","Rate","Last 4 sessions",""].map(h=>( ))} {studentSummary.map((s,i)=>( ))}
{h}
{s.name}
{s.total} {s.present} {s.late} {s.missed} {s.techIssue}
=90?"var(--moss)":s.rate>=75?"var(--gold)":"var(--coral)" }}/>
=90?"var(--moss)":s.rate>=75?"var(--gold)":"var(--coral)" }}>{s.rate}%
{TEACHER_SESSIONS.filter(sess=>sess.status!=="upcoming").slice(0,4).map((sess,si)=>{ const entry = sess.roster.find(r=>r.name===s.name); const st = entry ? entry.status : "absent"; return (
); })}
)}
); }; // ── Parent: Schedule (read-only, child-filtered) ───────────────────────────── // Shows only Maya's sessions (Batch C). No admin controls. const ParentSchedule = ({ go, session }) => { const sid = session?.studentId; const { data: PARENT_SESSIONS, loading } = useApi(sid ? `/parent/sessions/${sid}` : "/parent/sessions/0"); const [copied, setCopied] = React.useState(null); const copyLink = (link, id) => { navigator.clipboard?.writeText(link).catch(()=>{}); setCopied(id); setTimeout(() => setCopied(null), 2000); }; const statusStyle = s => ({ today: { bg:"var(--coral)", label:"TODAY" }, upcoming: { bg:"var(--moss)", label:"UPCOMING" }, done: { bg:"var(--ink-mute)", label:"DONE" }, }[s] || { bg:"var(--ink-mute)", label:"—" }); const upcomingCount = PARENT_SESSIONS.filter(s => s.status === "upcoming" || s.status === "today").length; return (
{/* Header */}
Class Schedule
Upcoming & past sessions
{upcomingCount > 0 ?
{I.check({ size:14 })} {upcomingCount} upcoming
:
{I.check({ size:14 })} All caught up
}
{/* Session cards */}
{loading && } {!loading && PARENT_SESSIONS.length === 0 && (
{I.check({ size:28 })}
You're all caught up!
No upcoming classes scheduled right now. Check back soon.
)} {!loading && PARENT_SESSIONS.length > 0 && PARENT_SESSIONS.map((s, i) => { const style = statusStyle(s.status); return (
{/* Left accent + date */}
{style.label}
{s.date.split(", ")[0]}
{s.date.split(", ")[1]}
{s.time.split(" – ")[0]}
{/* Main content */}
{s.topic}
{s.time} · {s.teacher}
{s.note && (
📝 {s.note}
)}
{/* Actions */}
{s.status === "today" && ( )} {s.status === "upcoming" && s.meet && ( )} {s.status === "done" && ( {I.check({ size:14 })} Completed )}
); })}
); }; // ── Teacher: My Schedule (read-only, teacher-filtered) ──────────────────────── // Shows only the logged-in teacher's sessions. No admin edit controls. const TeacherMySchedule = ({ dark = false, go, session }) => { const { data: initSessions, loading } = useApi("/schedule"); const [sessions, setSessions] = React.useState(null); const [statusChanging, setStatusChanging] = React.useState(null); const allSessions = sessions ?? initSessions; const teacherName = session?.name || ""; const TEACHER_MY_SESSIONS = allSessions.filter(s => !teacherName || s.teacher === teacherName); const days = [...new Set(TEACHER_MY_SESSIONS.map(s=>s.day))].sort(); const fmtDay = d => { try { return new Date(d + "T00:00:00").toLocaleDateString("en-GB", { weekday:"short", day:"numeric", month:"short" }).toUpperCase(); } catch { return d.toUpperCase(); } }; const statusColor = s => s==="live"?"var(--coral)":s==="done"?"var(--ink-mute)":s==="not_conducted"?"var(--gold)":"var(--moss)"; const [ncSession, setNcSession] = React.useState(null); const [ncReason, setNcReason] = React.useState(""); const [ncSaving, setNcSaving] = React.useState(false); const [ncError, setNcError] = React.useState(""); const [doneSession, setDoneSession] = React.useState(null); const [doneRemarks, setDoneRemarks] = React.useState(""); const [doneSaving, setDoneSaving] = React.useState(false); const [doneError, setDoneError] = React.useState(""); const [viewRemarks, setViewRemarks] = React.useState(null); const { data: initRequests } = useApi("/schedule-requests"); const { data: BATCHES } = useApi("/batches"); const { data: STUDENTS } = useApi("/students"); const [requests, setRequests] = React.useState(null); const [showReqModal, setShowReqModal] = React.useState(false); const [showMyRequests, setShowMyRequests] = React.useState(false); const [reqSessType, setReqSessType] = React.useState("batch"); const [reqForm, setReqForm] = React.useState({ batch_id:"", student_id:"", day:"", time_start:"", time_end:"", timezone:"Asia/Kolkata", reason:"" }); const [reqSaving, setReqSaving] = React.useState(false); const [reqError, setReqError] = React.useState(""); const reqList = Array.isArray(requests ?? initRequests) ? (requests ?? initRequests) : []; const pendingReqCount = reqList.filter(r => r.status === "pending").length; const submitRequest = async e => { e.preventDefault(); setReqSaving(true); setReqError(""); if (reqSessType === "batch" && !reqForm.batch_id) { setReqError("Select a batch."); setReqSaving(false); return; } if (reqSessType === "individual" && !reqForm.student_id) { setReqError("Select a student."); setReqSaving(false); return; } if (!reqForm.day) { setReqError("Select a date."); setReqSaving(false); return; } if (!reqForm.time_start || !reqForm.time_end) { setReqError("Select start and end times."); setReqSaving(false); return; } if (!reqForm.reason.trim()) { setReqError("Please explain why this session is requested."); setReqSaving(false); return; } const payload = { batch_id: reqSessType === "batch" ? parseInt(reqForm.batch_id) : undefined, student_id: reqSessType === "individual" ? parseInt(reqForm.student_id) : undefined, day: reqForm.day, time_start: reqForm.time_start, time_end: reqForm.time_end, timezone: reqForm.timezone || "Asia/Kolkata", reason: reqForm.reason.trim(), }; const res = await apiFetch("/schedule-requests", { method: "POST", body: JSON.stringify(payload), }); const d = await res.json().catch(() => ({})); if (!res.ok) { setReqError(d.error || "Failed to submit session request."); setReqSaving(false); return; } const fresh = await apiFetch("/schedule-requests").then(r => r.json()); setRequests(fresh); setReqForm({ batch_id: "", student_id: "", day: "", time_start: "", time_end: "", timezone: "Asia/Kolkata", reason: "" }); setShowReqModal(false); setReqSaving(false); alert("Session request submitted! An admin will review your request."); }; const submitNotConducted = async e => { e.preventDefault(); setNcSaving(true); setNcError(""); const res = await apiFetch(`/schedule/${ncSession.id}/not-conducted`, { method: "POST", body: JSON.stringify({ reason: ncReason || undefined }), }); const data = await res.json().catch(() => ({})); if (!res.ok) { setNcError(data.error || "Failed to mark session not conducted."); setNcSaving(false); return; } const fresh = await apiFetch("/schedule").then(r=>r.json()); setSessions(fresh); setNcSession(null); setNcReason(""); setNcSaving(false); if (data.message) { alert(data.message); } }; const markStatus = async (id, status) => { setStatusChanging(id); await apiFetch(`/schedule/${id}/status`, { method:"PATCH", body: JSON.stringify({ status }) }); const fresh = await apiFetch("/schedule").then(r=>r.json()); setSessions(fresh); setStatusChanging(null); }; const submitCompleteSession = async (e) => { e.preventDefault(); if (!doneRemarks.trim()) { setDoneError("Completion remarks are required."); return; } setDoneSaving(true); setDoneError(""); try { const res = await apiFetch(`/schedule/${doneSession.id}/status`, { method: "PATCH", body: JSON.stringify({ status: "done", completion_remarks: doneRemarks.trim() }), }); if (!res.ok) { const d = await res.json().catch(() => ({})); setDoneError(d.error || "Failed to mark session as done."); setDoneSaving(false); return; } const fresh = await apiFetch("/schedule").then(r => r.json()); setSessions(fresh); setDoneSession(null); setDoneRemarks(""); setDoneSaving(false); } catch { setDoneError("Something went wrong updating session status."); setDoneSaving(false); } }; if (loading) return ; return (
My Schedule
{teacherName || "Teacher"} · {TEACHER_MY_SESSIONS.length} sessions{pendingReqCount ? ` · ${pendingReqCount} pending request${pendingReqCount===1?"":"s"}` : ""}
{[["live","var(--coral)"],["upcoming","var(--moss)"],["done","var(--ink-mute)"]].map(([l,c])=>( {l} ))}
{showMyRequests && (
My Session Requests ({reqList.length})
{!reqList.length ? (
You haven't submitted any session requests yet. Use "+ Request session" to propose extra or make-up classes.
) : (
{reqList.map(r => (
{r.day} · {r.time_start} – {r.time_end} ({r.timezone || "Asia/Kolkata"})
{r.batch_name ? `Batch: ${r.batch_name}` : r.student_name ? `1-on-1: ${r.student_name}` : "Session"} · Reason: {r.reason}
{r.admin_response && (
↳ Admin Note: {r.admin_response}
)} {r.session_id && (
✓ Scheduled as Session #{r.session_id}
)}
{r.status}
))}
)}
)} {/* Stats row */}
{[ { l:"MY BATCHES", v:[...new Set(TEACHER_MY_SESSIONS.map(s=>s.batch))].length, c:"var(--sky)" }, { l:"THIS WEEK", v:TEACHER_MY_SESSIONS.length, c:"var(--coral)" }, { l:"LIVE NOW", v:TEACHER_MY_SESSIONS.filter(s=>s.status==="live").length, c:"var(--coral)" }, { l:"TOTAL STUDENTS", v:TEACHER_MY_SESSIONS.reduce((a,s)=>a+(s.students||0),0), c:"var(--moss)" }, ].map(k=>(
{k.l}
{k.v}
))}
{/* Sessions by day */} {days.map(day => (
{fmtDay(day)}
{TEACHER_MY_SESSIONS.filter(s=>s.day===day).map(s => (
{s.time}
–{s.end}
{s.rescheduled_from && (
↳ From {s.rescheduled_from}
)}
{s.batch}
{s.course}
{s.students} students {s.status==="not_conducted"?"not conducted":s.status}
{s.meet && s.status !== "done" && ( {I.play({ size:14 })} Join class )} {s.status === "done" && ( )} {s.status === "done" && s.completion_remarks && ( )} {s.status !== "done" && s.status !== "not_conducted" && ( )} {s.status !== "done" ? ( ) : ( )}
))}
))}
{ncSession && ( { setNcSession(null); setNcError(""); }}>
{ncSession.batch || "Class"} · {ncSession.day} ({ncSession.time})
{ncSession.series_id ? (
This session is part of a recurring series. Marking it not conducted will shift this session forward by 1 interval to serve as the make-up class, along with all subsequent sessions in the series. Total session count will remain constant.
) : (
This is a single standalone session (not part of a recurring series). It will be marked as not conducted without shifting any other sessions.
)}
setNcReason(e.target.value)} placeholder="e.g. Teacher unwell, holiday, technical outage" autoFocus /> {ncError &&
{ncError}
}
)} {doneSession && ( { setDoneSession(null); setDoneError(""); }}>
{doneSession.batch || "Class"} · {doneSession.day} ({doneSession.time})
Please provide session completion remarks or a summary of topics covered before marking this session as done.