/* ==================================================================
Admin → Parents
------------------------------------------------------------------
Approval queue + lifecycle controls for Adarshabani Parent, the
parent portal.
Parents self-register and land here with status='pending'. The admin
reviews each parent's claimed child(ren) against the school register
and clicks Approve — that flips status to 'active' and stamps
`verified_at` on every link row.
Tabs:
• Pending — review queue, [Approve] / [Reject]
• Active — approved parents, [Suspend], last-login info
• Suspended — paused or rejected, [Restore]
All endpoints live under /api/admin/parents/* and require admin.
================================================================== */
const { Icon: PAIcon } = window.KXUI;
const AdminParentsScreen = () => {
const [tab, setTab] = React.useState("pending");
const [rows, setRows] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState(null);
const [openId, setOpenId] = React.useState(null); // parent currently expanded
const [openDetail, setOpenDetail] = React.useState(null); // { ...parent, links: [] }
const [busy, setBusy] = React.useState({}); // { [parentId]: true }
const load = React.useCallback(async () => {
setLoading(true); setErr(null);
try {
setRows(await window.KXApi.get(`/admin/parents?status=${tab}`));
} catch (e) {
setErr(String(e.message || e));
} finally {
setLoading(false);
}
}, [tab]);
React.useEffect(() => { load(); }, [load]);
const openDetails = async (parentId) => {
if (openId === parentId) { setOpenId(null); setOpenDetail(null); return; }
setOpenId(parentId); setOpenDetail(null);
try {
setOpenDetail(await window.KXApi.get(`/admin/parents/${parentId}`));
} catch (e) {
window.alert("Could not load parent: " + (e.message || e));
setOpenId(null);
}
};
const act = async (parentId, action, prompt) => {
if (prompt && !window.confirm(prompt)) return;
setBusy(b => ({ ...b, [parentId]: true }));
try {
await window.KXApi.post(`/admin/parents/${parentId}/${action}`, {});
if (openId === parentId) setOpenId(null);
await load();
} catch (e) {
window.alert(`Could not ${action}: ` + (e.message || e));
} finally {
setBusy(b => { const n = { ...b }; delete n[parentId]; return n; });
}
};
// The phone is the parent's login identity — it's what they type on the sign-in
// screen and where the code lands — so this is the repair path when a family
// changes number. Reloads the list too, since the row shows the phone.
const savePhone = async (parentId, phone) => {
await window.KXApi.patch(`/admin/parents/${parentId}`, { phone });
setOpenDetail(await window.KXApi.get(`/admin/parents/${parentId}`));
await load();
};
const removeLink = async (parentId, linkId, studentName) => {
if (!window.confirm(`Remove ${studentName} from this parent's claimed children?`)) return;
try {
await window.KXApi.del(`/admin/parents/${parentId}/links/${linkId}`);
// refresh the expanded detail
setOpenDetail(await window.KXApi.get(`/admin/parents/${parentId}`));
} catch (e) {
window.alert("Could not remove link: " + (e.message || e));
}
};
const tabs = [
{ id: "pending", label: "Pending", icon: "inbox" },
{ id: "active", label: "Active", icon: "check" },
{ id: "suspended", label: "Suspended", icon: "x" },
];
const fmt = (iso) => iso ? new Date(iso).toLocaleString(undefined, {
month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
}) : "—";
return (
Admin · Parents
Adarshabani Parent
Parents self-register and wait here. Verify the claimed child(ren) against the school
register, then approve. Approved parents can log in and see their child's daily briefing.
Claimed children — verify against the school register
{openDetail.links.length === 0 && (
No claimed children.
)}
{openDetail.links.map(l => (
{l.roll_no}
{l.student_name}
{l.class_label || "—"}
{l.relation}
{l.verified_at ? (
verified
) : (
pending
)}
))}
)}
)}
))}
);
};
// Inline editor for the parent's sign-in number. Kept as its own component so
// each expanded row owns its draft state — the parent list renders these inside
// a .map, and shared state would leak one row's edit into another.
//
// The server does the real validation (E.164 normalisation + duplicate check);
// this only blocks the obviously-empty case and surfaces whatever the server
// says. It deliberately does NOT pre-normalise the draft, so the admin sees
// exactly what they typed if the server rejects it.
const PhoneEditor = ({ value, onSave }) => {
const [editing, setEditing] = React.useState(false);
const [draft, setDraft] = React.useState(value || "");
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
React.useEffect(() => { setDraft(value || ""); setErr(null); }, [value]);
const commit = async () => {
setBusy(true); setErr(null);
try {
await onSave(draft.trim());
setEditing(false);
} catch (e) {
setErr(e.message || String(e));
} finally {
setBusy(false);
}
};
if (!editing) {
return (