);
/* ---------- Today at the gate ---------- */
// Mounted only while today is inside the range, so the reader poll runs only
// then. The tap figures come off the report (which the parent polls); the
// reader health is its own 30 s poll.
const SaGateStrip = ({ report, today, refreshing }) => {
const CX = window.CX;
const readers = CX.useCockpitData("/rfid/readers", { pollMs: 30000 });
const g = saGateSummary(report, today);
const list = readers.data?.readers || [];
return (
Today at the gate
{saPrettyDate(today, { weekday: "long", day: "numeric", month: "long" })} · refreshes every 30 s
);
};
/* ---------- One day: a list grouped by class ---------- */
const SaDayList = ({ report, day, scans, today, onPick }) => {
const groups = [];
const byClass = new Map();
for (const s of report.students) {
let g = byClass.get(s.class_section_id);
if (!g) {
g = { id: s.class_section_id, label: s.class_label || "—", rows: [] };
byClass.set(s.class_section_id, g);
groups.push(g);
}
g.rows.push(s);
}
const isToday = day === today;
return (
);
};
/* ---------- The drawer: one student, every mark, every tap ---------- */
const SaStudentDrawer = ({ student, report, today, onClose }) => {
const CX = window.CX;
const { from, to } = report.filters;
const [taps, setTaps] = useState({ loading: true, error: null, scans: [] });
useEffect(() => {
let alive = true;
setTaps({ loading: true, error: null, scans: [] });
window.KXApi.get(`/rfid/scans${saQs({ from, to, student_id: student.student_id, limit: 500 })}`)
.then((r) => { if (alive) setTaps({ loading: false, error: null, scans: r?.scans || [] }); })
.catch((e) => { if (alive) setTaps({ loading: false, error: e?.message || "Tap log unavailable", scans: [] }); });
return () => { alive = false; };
}, [student.student_id, from, to]);
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
// Reader per day, from the taps, so a cell can say "via Main gate" here
// even when the grid could not.
const firstTapByDay = useMemo(() => {
const m = new Map();
for (const sc of taps.scans) { // newest first → last write is the earliest
const day = saIstDay(new Date(sc.scanned_at));
m.set(day, sc);
}
return m;
}, [taps.scans]);
const t = student.totals;
return (
<>
);
};
/* ---------- The screen ---------- */
const SaStudentAttendanceScreen = ({ setScreen }) => {
const CX = window.CX;
const today = saIstToday();
const [from, setFrom] = useState(() => saShiftDay(0));
const [to, setTo] = useState(() => saShiftDay(0));
const [classSectionId, setClassSectionId] = useState("");
const [status, setStatus] = useState("");
const [search, setSearch] = useState("");
const [q, setQ] = useState("");
const [showFilters, setShowFilters] = useState(() => {
try { return !window.matchMedia("(max-width: 760px)").matches; } catch { return true; }
});
const [exporting, setExporting] = useState(null);
const [exportErr, setExportErr] = useState(null);
const [selectedId, setSelectedId] = useState(null);
const [dayScans, setDayScans] = useState(null); // Map student_id → first tap, one-day view only
// Debounced so the search box doesn't refetch the register per keystroke.
useEffect(() => {
const t = setTimeout(() => setQ(search.trim()), 350);
return () => clearTimeout(t);
}, [search]);
const query = useMemo(() => ({
from, to, class_section_id: classSectionId, status, q,
}), [from, to, classSectionId, status, q]);
const qs = saQs(query);
const includesToday = from <= today && today <= to;
const state = CX.useCockpitData(`/student-attendance/report${qs}`, { pollMs: includesToday ? 30000 : 0 });
const report = state.data;
const single = from === to;
// One-day view: the reader each child tapped at comes from the scan log,
// which the report does not carry. Refreshed with every report load; a
// missing endpoint just leaves the reader column blank.
useEffect(() => {
if (!single || !report) { setDayScans(null); return; }
let alive = true;
window.KXApi.get(`/rfid/scans${saQs({ from, to: from, limit: 2000 })}`)
.then((r) => {
if (!alive) return;
const m = new Map();
for (const sc of r?.scans || []) if (sc.student_id) m.set(sc.student_id, sc); // newest first → earliest wins
setDayScans(m);
})
.catch(() => { if (alive) setDayScans(null); });
return () => { alive = false; };
}, [single, from, report?.generated_at]);
const setRange = (f, t) => { setFrom(f); setTo(t); };
const exportAs = async (ext) => {
setExporting(ext); setExportErr(null);
try {
const { blobUrl, filename } = await window.KXApi.download(`/student-attendance/report.${ext}${qs}`);
if (ext === "pdf") {
// The browser's own PDF viewer is where Print lives. A popup blocker
// gets the same fallback as the spreadsheet: an anchor click.
const w = window.open(blobUrl, "_blank");
if (!w) saTriggerDownload(blobUrl, filename);
} else {
saTriggerDownload(blobUrl, filename);
}
// Revoked late — Safari drops the blob under a viewer still loading it.
setTimeout(() => URL.revokeObjectURL(blobUrl), 60000);
} catch (e) {
setExportErr(e?.message || `Couldn't build the ${ext.toUpperCase()}`);
} finally {
setExporting(null);
}
};
const sections = window.KX?.CLASS_SECTIONS || [];
const activeFilters = [classSectionId, status, q].filter(Boolean).length;
const presetKey = SA_PRESETS.find((p) => p.from() === from && p.to() === to)?.key || null;
const t = report?.summary?.totals;
const nothingMarked = !!report && (report.days.length === 0 || report.students.length === 0);
const selected = selectedId && report ? report.students.find((s) => s.student_id === selectedId) : null;
const closeDrawer = useCallback(() => setSelectedId(null), []);
return (
setScreen("academics")}
actions={
<>
}
/>
{/* Filters. Presets answer most questions on their own; the rest is
collapsible on a phone, where the form would fill the first screen. */}
e.target.value && setFrom(e.target.value > to ? to : e.target.value)}/>
e.target.value && setTo(e.target.value < from ? from : e.target.value)}/>
setSearch(e.target.value)}/>
{activeFilters > 0 && (
)}
{exportErr && (
{exportErr}
)}
}>
{report && t && (
<>
{includesToday && (
)}
{saCaption(report)}
{CX.num(t.students)} student{t.students === 1 ? "" : "s"} · {report.days.length} day{report.days.length === 1 ? "" : "s"} marked
{t.days_without_marks > 0 && ` · ${t.days_without_marks} with no marks`}
{report.detail_truncated && " · detail list truncated, totals are complete"}
{single ? "Day sheet" : "Register grid"}
{nothingMarked ? (
) : single ? (
) : (
)}
Gate marks are suggestions until the class teacher confirms the sheet. A child who did not tap is blank — never absent.
{" "}Attendance is present + late over the marks actually taken — never over the calendar range.