{s.name}
{s.username && !s.password_used_at && Never used}
{/* Only the MISSING case is loud. A linked student is the norm and
needs no decoration; an unlinked one means their parent's fee
screen cannot resolve, which is invisible everywhere else. */}
{!s.ledger_student_uid && No fee link}
);
};
/* ---------- detail panel ---------- */
// A Ledger-owned value, rendered as text. Deliberately not a disabled input:
// a greyed-out box still reads as "editable, just not right now".
const ReadOnly = ({ value, mono }) => (
{value || "—"}
);
const REQUESTABLE = [
{ key: "name", label: "Name" },
{ key: "roll_no", label: "Roll no" },
{ key: "email", label: "Email" },
{ key: "class_section_id", label: "Class / section" },
{ key: "student_type", label: "Boarder / day scholar" },
{ key: "avails_transport", label: "Avails transport" },
];
// Asks the office to change something in the Ledger. Resolving the request does
// not write here — the office edits the Ledger and the roster sync brings it
// back, so these fields only ever change by one route.
const EditRequest = ({ student, onDone }) => {
const [field, setField] = React.useState("name");
const [value, setValue] = React.useState("");
const [reason, setReason] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
const [sent, setSent] = React.useState(false);
const submit = async () => {
setBusy(true); setErr(null);
try {
await window.AppApi.post(`/admin/students/${student.id}/edit-request`, {
field, requested_value: value.trim(), reason: reason.trim() || null,
});
setSent(true);
setTimeout(onDone, 1600);
} catch (e) { setErr(String(e.message || e)); }
finally { setBusy(false); }
};
if (sent) return (
Sent to the office. It will appear here once they update the Ledger.
);
};
const StudentDetail = ({ studentSummary, classSections, onClose, onChanged }) => {
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
const [showRequest, setShowRequest] = React.useState(false);
// Issued set-password link. Shown once — only its hash is stored server-side.
const [pwLink, setPwLink] = React.useState(null);
const [copied, setCopied] = React.useState(false);
React.useEffect(() => { setShowRequest(false); setPwLink(null); }, [studentSummary.id]);
const issueLogin = async () => {
setBusy(true); setErr(null);
try {
const out = await window.AppApi.post(`/admin/students/${studentSummary.id}/credentials`, {});
await onChanged({
username: out.username, temp_password: out.temp_password,
class_label: studentSummary.class_label, roll_no: studentSummary.roll_no,
});
} catch (e) { setErr(String(e.message || e)); }
finally { setBusy(false); }
};
const createPasswordLink = async () => {
setBusy(true); setErr(null); setCopied(false);
try {
const out = await window.AppApi.post(`/admin/students/${studentSummary.id}/password-link`, {});
setPwLink(out);
// A first link also creates the login, so the roster needs the username.
if (!studentSummary.username) await onChanged();
} catch (e) { setErr(String(e.message || e)); }
finally { setBusy(false); }
};
const copyPasswordLink = async () => {
try {
await navigator.clipboard.writeText(pwLink.url);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch { /* clipboard blocked — the input below is selectable as a fallback */ }
};
const removeLogin = async () => {
if (!window.confirm("Disable portal login for this student?")) return;
setBusy(true); setErr(null);
try {
await window.AppApi.del(`/admin/students/${studentSummary.id}/credentials`);
await onChanged();
} catch (e) { setErr(String(e.message || e)); }
finally { setBusy(false); }
};
// While the pane is a bottom sheet the page behind it must not scroll —
// otherwise a drag on the sheet's own content scrolls the 881-row roster
// underneath and the sheet appears to drift. Guarded to the phone layout,
// since on desktop the pane is just a column and the page should scroll.
useEffect(() => {
const sheet = window.matchMedia("(max-width: 1000px)");
if (!sheet.matches) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => {
document.body.style.overflow = prev;
window.removeEventListener("keydown", onKey);
};
}, [onClose]);
return (
<>
{/* Backdrop — only painted on the phone layout, where the pane is a
bottom sheet rather than a column. */}
);
};
const FormRow = ({ label, children }) => (
{label}
{children}
);
// Residential-type badge for the roster row. Subtle background tint keeps the
// list scannable without drawing attention away from name/class. Defaults to
// boarder if the field is unset — the migration backfilled every existing row
// to boarder so the null-coalesce here is belt-and-braces.
const StudentTypePill = ({ type }) => {
const isDay = type === "day_scholar";
return (
{isDay ? "Day" : "Boarder"}
);
};
/* ---------- add modal ---------- */