// src/features/admin/ui/admin-students-modals.jsx // // Modals used by AdminStudents and ASCard. Extracted from // admin-students.jsx for size. // Public on window: ASConfirmDelete, ASRechargeModal, ASEditStudent, // ASAddStudent. Also keeps the legacy AdminEditStudentModal alias. // Typed-name confirmation: admin must retype the full name exactly before // the Delete button enables. The same check is enforced server-side by // admin_hard_delete_student (v78-delete-safety.sql) so a console caller // can't bypass the UI. onConfirm receives the typed name and forwards it // to data.deleteStudent → RPC. const ASConfirmDelete = ({ name, kind = 'student', onConfirm, onClose }) => { const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [typed, setTyped] = React.useState(''); const expected = String(name || '').trim(); const matches = typed.trim().toLowerCase() === expected.toLowerCase() && expected.length > 0; return (
e.stopPropagation()}>
Delete {kind} {name}?
This permanently removes their account, all of their bookings, and any assignments. The email is freed up so it can be used again. The account is moved to Trash, where it can be restored within a short window.
To confirm, type {expected}
setTyped(e.target.value)} autoFocus placeholder={`Type ${expected} here`} aria-label={`Type ${kind} full name to confirm delete`} data-testid="confirm-delete-typed-name" style={{ width:'100%', boxSizing:'border-box', padding:'10px 12px', borderRadius:8, fontSize:13, marginBottom:14, border: matches ? '1.5px solid oklch(60% 0.16 145)' : '1.5px solid oklch(88% 0.02 265)', outline:'none', fontFamily:"'Plus Jakarta Sans', sans-serif", }} /> {err &&
{err}
}
); }; // ── Recharge Classes Modal ────────────────────────────────────────────── const ASRechargeModal = ({ student, onClose }) => { const data = window.useAdminData(); const [count, setCount] = React.useState(5); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const submit = async (e) => { e.preventDefault(); setBusy(true); setErr(''); try { const newBal = await data.addStudentCredits(student.id, Number(count)); onClose(newBal); } catch (e2) { setErr(e2.message || 'Recharge failed.'); } finally { setBusy(false); } }; return (
e.stopPropagation()}>
Add classes for {student.name}
Currently {student.classesBalance} left of {student.classesPurchased} ever purchased. Use a negative number to subtract.
setCount(e.target.value)} style={{ flex:1, padding:'10px 12px', borderRadius:8, border:'1.5px solid oklch(88% 0.015 265)', fontSize:18, textAlign:'center', fontWeight:700, fontFamily:"'Plus Jakarta Sans', sans-serif" }} />
{[1,5,10,20].map(n => ( ))}
{err &&
{err}
}
); }; // ── Edit Student Modal ────────────────────────────────────────────────── const ASEditStudent = ({ student, onClose }) => { const data = window.useAdminData(); const [form, setForm] = React.useState({ name: student.name || '', phone: student.phone || '', address: student.address || '', topic: student.topics?.[0] || '', notes: student.notes || '', hourlyRate: student.hourlyRate == null ? '' : student.hourlyRate, availability: student.availability || {}, availabilityNote: student.availabilityNote || '', isOnline: !!student.isOnline, meetingLink: student.meetingLink || '', }); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); // Timezone lives on profiles.timezone for the student.id. Load on mount, // save on submit. Phase 2 auto-detect: if the profile has no timezone // yet, prefill with the admin's detected zone. const [tz, setTz] = React.useState(() => window.Calendar.time.detect()); React.useEffect(() => { (async () => { try { const { data: row } = await window.supa.from('profiles').select('timezone').eq('id', student.id).maybeSingle(); if (row?.timezone) setTz(row.timezone); } catch (e) { /* keep detected default */ } })(); }, [student.id]); const set = (k,v) => setForm(f => ({...f, [k]:v})); const fld = { width:'100%', padding:'12px 14px', borderRadius:8, border:'1.5px solid oklch(88% 0.015 265)', fontSize:16, minHeight:44, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(22% 0.06 265)', background:'#fff', outline:'none', boxSizing:'border-box' }; const lbl = { display:'block', fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(52% 0.04 265)', marginBottom:5 }; // Same dropdown options as the Add Student modal — keep in sync. const STD_SUBJECTS = ['Piano','Guitar','Violin','Vocals','Drums','Bass','Saxophone','Cello','Flute','Ukulele','Trumpet','Drawing','Painting','Photography','Ballet','Hip Hop','Yoga','Tennis','Boxing','Acting']; // If the student's existing topic isn't in our standard list, keep it as // a one-off option so we don't silently drop it on save. const topicOptions = form.topic && !STD_SUBJECTS.includes(form.topic) ? [form.topic, ...STD_SUBJECTS] : STD_SUBJECTS; const submit = async (e) => { e.preventDefault(); const phoneE164 = form.phone.trim().replace(/[\s\-().]/g, ''); if (!/^\+[1-9]\d{6,14}$/.test(phoneE164)) { setErr('Enter the student’s phone with country code, e.g. +961 70 123 456 or +1 212 555 0123 — the teacher calls this number (masked).'); return; } setBusy(true); setErr(''); try { // Update profile.full_name (the public display name) if it changed. // student_info doesn't store the name — it lives on profiles. const newName = form.name.trim(); if (newName && newName !== student.name) { await data.updateStudentName(student.id, newName); } await data.updateStudentInfo(student.id, { phone: phoneE164, address: form.address.trim(), topicsOfInterest: form.topic ? [form.topic] : [], notes: form.notes, availability: form.availability, availabilityNote: form.availabilityNote, isOnline: form.isOnline, meetingLink: form.isOnline ? form.meetingLink.trim() : '', }); if ((form.hourlyRate === '' ? null : Number(form.hourlyRate)) !== student.hourlyRate) { await data.setStudentHourlyRate(student.id, form.hourlyRate); } // Persist timezone on profiles (RLS allows admin to write any row). try { await window.supa.from('profiles').update({ timezone: tz }).eq('id', student.id); } catch (e) { console.warn('[admin students] tz save failed', e); } onClose(); } catch (e2) { setErr(e2.message || 'Save failed.'); } finally { setBusy(false); } }; return (
e.stopPropagation()}>
Edit {student.name}
Email is the login — to change it, delete the user and re-add with the new email.
set('name', e.target.value)} placeholder="Alex Johnson" required style={fld} />
set('hourlyRate', e.target.value)} placeholder="80" style={fld} />
set('phone', v)} fieldStyle={fld} />
set('address', e.target.value)} placeholder="245 W 72nd St, New York, NY" style={fld} />
set('isOnline', e.target.checked)} style={{ width:16, height:16, accentColor:'oklch(22% 0.06 265)' }} />
{form.isOnline && (
set('meetingLink', e.target.value)} placeholder="https://meet.google.com/abc-defg-hij or https://zoom.us/j/123456789" style={fld} />
This student's permanent room. Every lesson uses it — shown to the student and their instructor, joined automatically by the recorder, and linked in reminder emails. Paste a Google Meet or Zoom URL.
)}