import React,{useEffect,useState,useRef}from "react"; import{call,callBookings,callSettings,uploadFile}from "./api.js"; import{LOGO,TEACH2}from "./assets.js"; import Profile from "./Profile.jsx"; import SearchBox from "./SearchBox.jsx"; import ImageGallery from "./ImageGallery.jsx"; import{fmtSast,toSastInput,fromSastInput,FilePicker,FileView}from "./Bookings.jsx"; import{BrokerAdmin}from "./Broker.jsx"; import{IcGrid,IcUsers,IcVideo,IcClipboard,IcJournal,IcTrophy,IcTag,IcChart,IcCard,IcUser,IcCalendar}from "./Icons.jsx"; const PORTAL_URL = window.location.origin; // Levels a client can be approved/assigned. Order = display order in pickers. // Short labels shown on the admin "assign levels" side. `full` is the hover tooltip. const LEVELS = [{id: "pm_original",level: "original",title: "T",full: "TAFX Original"},{id: "pm_advanced",level: "advanced",title: "AC",full: "TAFX Advanced Course"},{id: "pm_beginner",level: "beginner",title: "B",full: "Beginner"},{id: "pm_intermediate",level: "intermediate",title: "I",full: "Intermediate"},{id: "pm_advanced_2",level: "advanced2",title: "A",full: "Advanced"},{id: "pm_1v1",level: "1v1",title: "1",full: "1v1"},]; // Courses manageable in the Content tab. 1v1 is journal-only (no content),// so it is NOT listed here. TAFX Original IS a content course. const CONTENT_COURSES = [{id: "pm_original",level: "original",title: "TAFX Original"},{id: "pm_beginner",level: "beginner",title: "Beginner"},{id: "pm_intermediate",level: "intermediate",title: "Intermediate"},{id: "pm_advanced",level: "advanced",title: "TAFX Advanced Course"},{id: "pm_advanced_2",level: "advanced2",title: "Advanced"},]; // Levels that have homework (journaling levels except 1v1 which is journal-only mentorship). const HOMEWORK_LEVELS = [{level: "beginner",title: "Beginner"},{level: "intermediate",title: "Intermediate"},{level: "advanced",title: "TAFX Advanced Course"},{level: "advanced2",title: "Advanced"},]; export default function Admin({user,onLogout,onUpdated}){const scoped = user.admin_scope === "advanced";const manager = user.admin_scope === "manager";const owner = !user.admin_scope;const [tab,setTab] = useState(scoped || manager ? "students" : "dashboard");const T = ({id,icon,label}) => (
setTab(id)}>{icon} {label}
);return (

{tab === "dashboard" ? "Command Center" : tab === "bookings" ? "1v1 Bookings" : tab === "broker" ? "Broker Page" : tab}

{tab === "dashboard" && } {tab === "students" && } {tab === "content" && } {tab === "homework" && } {tab === "confluences" && } {tab === "journals" && } {tab === "leaderboard" && } {tab === "overview" && } {tab === "billing" && } {tab === "bookings" && (owner || scoped) && } {tab === "broker" && owner && } {tab === "audit" && owner && } {tab === "profile" && }
)}const DASH_LEVELS = [{id: "pm_beginner",level: "beginner",title: "Beginner",dot: "#6fae7d"},{id: "pm_intermediate",level: "intermediate",title: "Intermediate",dot: "#1f5fbf"},{id: "pm_advanced",level: "advanced",title: "TAFX Advanced Course",dot: "#b06a9c"},{id: "pm_advanced_2",level: "advanced2",title: "Advanced",dot: "#8b6fc0"},]; function AdminDashboard({admin,goTo}){const [data,setData] = useState(null);useEffect(() => {Promise.all([call("admin_list_users",{admin_id: admin.id}),call("get_content")]) .then(([u,c]) => setData({users: u.users || [],content: c})) .catch(() => setData({users: [],content: {videos: []}}));},[]);if (!data) return
;const students = data.users.filter((u) => u.role === "student");const pending = students.filter((u) => u.status === "pending");const approved = students.filter((u) => u.status === "approved");const overdue = students.filter((u) => u.billing && u.billing.status === "overdue");const dueSoon = students.filter((u) => u.billing && u.billing.status === "due_soon");const activeSubs = students.filter((u) => u.billing && u.billing.active && u.billing.status !== "overdue");const videos = data.content.videos || [];const perCourse = DASH_LEVELS.map((L) => {const enrolled = approved.filter((u) => (u.levels || []).includes(L.level)); const vids = videos.filter((v) => v.course_id === L.id); let avg = 0; if (enrolled.length && vids.length) {const vidIds = new Set(vids.map((v) => v.id)); const sum = enrolled.reduce((acc,u) => acc + (u.watched_videos || []).filter((id) => vidIds.has(id)).length / vids.length,0); avg = Math.round((sum / enrolled.length) * 100);} return {...L,count: enrolled.length,lessons: vids.length,avg};});const recent = [...students].filter((u) => u.last_login).sort((a,b) => Number(b.last_login) - Number(a.last_login)).slice(0,5);const newest = [...students].sort((a,b) => Number(b.created_at) - Number(a.created_at)).slice(0,5);const ago = (t) =>{const m = Math.floor((Date.now() - Number(t)) / 60000);if (m < 60) return `${m}m ago`;const h = Math.floor(m / 60);if (h < 24) return `${h}h ago`;return `${Math.floor(h / 24)}d ago`}return (
goTo("students")}>
{students.length}
Total students
goTo("students")}>
{pending.length}
Awaiting approval
goTo("billing")}>
{activeSubs.length}
Active subscriptions
goTo("billing")}>
{overdue.length}
Overdue payments

Students per course

Approved students with access to each stage,and their average progress.
{perCourse.map((c) => (
{c.title}
{c.count}
student{c.count !== 1 ? "s" : ""} · {c.lessons} lesson{c.lessons !== 1 ? "s" : ""}
{c.avg}% avg progress
))}
{(pending.length > 0 || dueSoon.length > 0) && (

Needs your attention

Things to action today.
{pending.map((u) => (
🆕
{u.name} registered {ago(u.created_at)} · {u.email}
))} {dueSoon.map((u) => (
💳
{u.name}"s subscription is due in {u.billing.daysLeft} day{u.billing.daysLeft !== 1 ? "s" : "'}
))}
)}

Recently active

{recent.length === 0 ?
No logins yet.
: recent.map((u) => (
{u.name}{ago(u.last_login)}
))}

Newest students

{newest.length === 0 ?
No students yet.
: newest.map((u) => (
{u.name} {u.status} {ago(u.created_at)}
))}
)}function Students({admin}){const scoped = admin.admin_scope === "advanced";const [users,setUsers] = useState(null);const [filter,setFilter] = useState("pending");const [q,setQ] = useState("");const [approve,setApprove] = useState(null);// user being approved (level picker) const [profileId,setProfileId] = useState(null);const load = () => call("admin_list_users",{admin_id: admin.id}).then((d) => setUsers(d.users));useEffect(() => {load();},[]);async function setStatus(user_id,status,levels){await call("admin_set_status",{admin_id: admin.id,user_id,status,levels,portal_url: PORTAL_URL});setApprove(null);load()}async function setLevels(user_id,levels){await call("admin_set_levels",{admin_id: admin.id,user_id,levels});load()}async function del(user_id){if (!confirm("Delete this student permanently?")) return;await call("admin_delete_user",{admin_id: admin.id,user_id});load()}if (profileId) return {setProfileId(null);load()}}/>;if (!users) return
;const students = users.filter((u) => u.role !== "admin");const ql = q.trim().toLowerCase();let shown = filter === "all" ? students : students.filter((u) => u.status === filter);if (ql) shown = shown.filter((u) => [u.name,u.email,u.phone].some((v) => (v || "").toLowerCase().includes(ql)));const counts ={pending:students.filter((u) => u.status === "pending").length,approved: students.filter((u) => u.status === "approved").length,all: students.length}return (
{shown.length === 0 ?
Nothing here
No students match{ql ? " your search" : " this filter"}.
: (
{shown.map((u) => ())}
NameLast watchedCellLevelsStatusActions
{u.email}
 {u.last_watch_at ? new Date(Number(u.last_watch_at)).toLocaleString() : "—"} {u.phone || "—"}
{LEVELS.map((l) => {const on = (u.levels || []).includes(l.level); return ;})}
{u.status} {u.status !== "approved" && } {u.status === "approved" && } {u.status === "pending" && }
)} {approve && setApprove(null)} onConfirm={(levels) => setStatus(approve.id,"approved",levels)} />}
)}function ApproveModal({user,onClose,onConfirm,scoped}){const [levels,setLevels] = useState(scoped ? ["advanced"] : (user.levels?.length ? user.levels : ["original"]));const toggle = (lv) =>{if (scoped) return;setLevels(levels.includes(lv) ? levels.filter((x) => x !== lv) : [...levels,lv])}return (
e.stopPropagation()}>

Approve {user.name}

Choose which stages this student can access. This controls their courses,journal,leaderboard and homework.

{LEVELS.map((l) => {const on = levels.includes(l.level); return ;})}
)}function Content({admin}){const scoped = admin.admin_scope === "advanced";const courseTabs = scoped ? CONTENT_COURSES.filter((c) => c.id === "pm_advanced") : CONTENT_COURSES;const [content,setContent] = useState(null);const [course,setCourse] = useState(admin.admin_scope === "advanced" ? "pm_advanced" : "pm_beginner");const [modal,setModal] = useState(null);// Drag & drop state — must be declared before any early return (React hook rules) // NOTE: the dragged item lives in a ref,not state. VideoRow/SectionCard are defined // inside this component,so a state change during a drag would remount the rows and // cancel the native drag. The ref keeps the drag alive;only the hover hint re-renders. const dragRef = useRef(null);const [dropHint,setDropHint] = useState(null);//{id}row hovered |{sectionId}section hovered const [saving,setSaving] = useState(false);const load = () => call("get_content").then(setContent);useEffect(() => {load();},[]);if (!content) return
;const allSections = (content.sections || []).filter((s) => s.course_id === course).sort((a,b) => (a.sort_order || 0) - (b.sort_order || 0));const videos = (content.videos || []).filter((v) => v.course_id === course);const resources = (content.resources || []).filter((r) => r.course_id === course);// Top-level items: normal sections + folders (parent_id null) const topLevel = allSections.filter((s) => !s.parent_id);const subfoldersOf = (fid) => allSections.filter((s) => s.parent_id === fid);// sections/subfolders that can hold videos (normal sections + subfolders) const videoContainers = allSections.filter((s) => !s.is_folder || s.parent_id);const save = async (type,key,obj) =>{await call(`admin_save_${type}`,{admin_id: admin.id,[key]: {...obj,course_id: course}});setModal(null);load()}const del = async (type,key,id,msg) =>{if (!confirm(msg || "Delete?")) return;await call(`admin_delete_${type}`,{admin_id: admin.id,[key]: id});load()}const mainVideosIn = (sid) => videos.filter((v) => v.section_id === sid && !v.parent_video_id).sort((a,b) => (a.sort_order || 0) - (b.sort_order || 0));const subVideosOf = (vid) => videos.filter((v) => v.parent_video_id === vid).sort((a,b) => (a.sort_order || 0) - (b.sort_order || 0));// ---- Drag & drop reordering (within a section,and across sections) ---- // Persist a whole list's order (and section) in one pass async function persistOrder(list,sectionId){setSaving(true);try{await Promise.all(list.map((v,i) => (v.sort_order !== i || v.section_id !== sectionId) ? call("admin_save_video",{admin_id: admin.id,video: {...v,section_id: sectionId,sort_order: i}}) : Promise.resolve()));await load()}finally{setSaving(false);dragRef.current = null;setDropHint(null)}}// Drop `dragged` onto `target` row (same or different section) async function dropOnRow(target){const d = dragRef.current;if (!d || d.__kind !== "lesson" || d.id === target.id){dragRef.current = null;setDropHint(null);return}if (d.parent_video_id || target.parent_video_id){dragRef.current = null;setDropHint(null);return}// only top-level rows const destSection = target.section_id;const dest = mainVideosIn(destSection).filter((v) => v.id !== d.id);const at = dest.findIndex((v) => v.id === target.id);dest.splice(at < 0 ? dest.length : at,0,d);await persistOrder(dest,destSection);// if it moved out of another section,tidy that section's numbering too if (d.section_id !== destSection){const src = mainVideosIn(d.section_id).filter((v) => v.id !== d.id);await Promise.all(src.map((v,i) => v.sort_order !== i ? call("admin_save_video",{admin_id: admin.id,video: {...v,sort_order: i}}) : Promise.resolve()));await load()}}// ----- PDF resource reordering (same pattern as lessons) ----- const resourcesIn = (sid) => resources.filter((r) => r.section_id === sid).sort((a,b) => (a.sort_order || 0) - (b.sort_order || 0));async function persistResourceOrder(list,sectionId){setSaving(true);try{await Promise.all(list.map((r,i) => (r.sort_order !== i || r.section_id !== sectionId) ? call("admin_save_resource",{admin_id: admin.id,resource: {...r,section_id: sectionId,sort_order: i}}) : Promise.resolve()));await load()}finally{setSaving(false);dragRef.current = null;setDropHint(null)}}async function dropOnResource(target){const d = dragRef.current;if (!d || d.__kind !== "resource" || d.id === target.id){dragRef.current = null;setDropHint(null);return}const destSection = target.section_id;const dest = resourcesIn(destSection).filter((r) => r.id !== d.id);const at = dest.findIndex((r) => r.id === target.id);dest.splice(at < 0 ? dest.length : at,0,d);await persistResourceOrder(dest,destSection);if (d.section_id !== destSection){const src = resourcesIn(d.section_id).filter((r) => r.id !== d.id);await Promise.all(src.map((r,i) => r.sort_order !== i ? call("admin_save_resource",{admin_id: admin.id,resource: {...r,sort_order: i}}) : Promise.resolve()));await load()}}// Drop onto a section header/empty area -> append to end of that section async function dropOnSection(sectionId){const d = dragRef.current;if (!d){setDropHint(null);return}if (d.__kind === "resource"){if (d.section_id === sectionId){dragRef.current = null;setDropHint(null);return}const dest = [...resourcesIn(sectionId),d];await persistResourceOrder(dest,sectionId);const src = resourcesIn(d.section_id).filter((r) => r.id !== d.id);await Promise.all(src.map((r,i) => r.sort_order !== i ? call("admin_save_resource",{admin_id: admin.id,resource: {...r,sort_order: i}}) : Promise.resolve()));await load();return}if (d.parent_video_id){dragRef.current = null;setDropHint(null);return}if (d.section_id === sectionId){dragRef.current = null;setDropHint(null);return}const dest = [...mainVideosIn(sectionId),d];await persistOrder(dest,sectionId);const src = mainVideosIn(d.section_id).filter((v) => v.id !== d.id);await Promise.all(src.map((v,i) => v.sort_order !== i ? call("admin_save_video",{admin_id: admin.id,video: {...v,sort_order: i}}) : Promise.resolve()));await load()}const VideoRow = ({v,depth = 0}) =>{const subs = subVideosOf(v.id);const draggable = depth === 0;const isHint = dropHint?.id === v.id;return (<>
{if (!draggable) return; dragRef.current = {...v,__kind: "lesson"}; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain",v.id);}} onDragEnd={() => {dragRef.current = null; setDropHint(null);}} onDragOver={(e) => {const d = dragRef.current; if (!draggable || !d || d.__kind !== "lesson" || d.id === v.id) return; e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = "move"; if (dropHint?.id !== v.id) setDropHint({id: v.id});}} onDrop={(e) => {if (!draggable) return; e.preventDefault(); e.stopPropagation(); dropOnRow(v);}} style={{marginLeft: depth * 20,borderTop: isHint ? "2px solid var(--gold)" : "2px solid transparent",cursor: draggable ? "grab" : undefined,}} > {draggable && ⠿} {depth > 0 ? "↳ " : ""}{(v.lesson_type || "video") === "pdf" ? "📄" : "🎬"}
{v.title}
{(v.lesson_type || "video") === "pdf" ? (v.pdf_url ? "PDF lesson" : "⚠️ PDF lesson — no PDF uploaded") : (v.bunny_video_id ? `Bunny · ${String(v.bunny_video_id).slice(0,8)}…` : "No video")}{v.pdf_url ? " · PDF" : ""}{subs.length ? ` · ${subs.length} sub-video${subs.length > 1 ? "s" : ""}` : ""}
{depth === 0 && }
{subs.map((sub) => )} )}const SectionCard = ({s,isSub}) =>{const sv = mainVideosIn(s.id);const sr = resources.filter((r) => r.section_id === s.id);const sectionHint = dropHint?.sectionId === s.id;const base = isSub ?{marginLeft:24,borderLeft: "3px solid var(--gold)"}return (
{const d = dragRef.current; if (!d || d.section_id === s.id) return; e.preventDefault(); e.dataTransfer.dropEffect = "move"; if (dropHint?.sectionId !== s.id) setDropHint({sectionId: s.id});}} onDrop={(e) => {if (!dragRef.current) return; e.preventDefault(); dropOnSection(s.id);}} style={{...base,outline: sectionHint ? "2px dashed var(--gold)" : undefined,outlineOffset: 3}} >
{isSub ? "🗂️" : "📄"}

{s.title}

{sv.map((v) => )} {sr.map((r) => (
{dragRef.current = {...r,__kind: "resource"}; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain",r.id);}} onDragEnd={() => {dragRef.current = null; setDropHint(null);}} onDragOver={(e) => {const d = dragRef.current; if (!d || d.__kind !== "resource" || d.id === r.id) return; e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = "move"; if (dropHint?.id !== r.id) setDropHint({id: r.id});}} onDrop={(e) => {e.preventDefault(); e.stopPropagation(); dropOnResource(r);}} style={{borderTop: dropHint?.id === r.id ? "2px solid var(--gold)" : "2px solid transparent",cursor: "grab"}} > ⠿ 📄
{r.title}
PDF resource
))} {sv.length === 0 && sr.length === 0 &&
No lessons yet.
}
)}const FolderCard = ({f}) =>{const subs = subfoldersOf(f.id);return (
📁

{f.title}

Folder
{subs.length === 0 ?
Empty folder — add a subfolder to hold videos.
: subs.map((sub) => )}
)}return (
{courseTabs.map((l) => )}

⠿ Drag lessons and PDFs by the handle to reorder — drop on another item to place it there,or onto a section to move it across. {saving && Saving order…}

{topLevel.length === 0 &&
Nothing here yet
Add a section (holds videos) or a folder (holds subfolders) to start.
} {topLevel.map((s) => s.is_folder ? : )} {modal?.type === "section" && save("section","section",d)} onClose={() => setModal(null)} />} {modal?.type === "video" && save("video","video",d)} onClose={() => setModal(null)} />} {modal?.type === "resource" && save("resource","resource",d)} onClose={() => setModal(null)} />}
)}function SectionModal({data,onSave,onClose}){const [f,setF] = useState(data);const isFolder = f.is_folder && !f.parent_id;// top-level folder const isSubfolder = f.is_folder && f.parent_id;// subfolder const kind = isFolder ? "folder" : isSubfolder ? "subfolder" : "section";const label = isFolder ? "Folder name" : isSubfolder ? "Subfolder name" : "Section title";const placeholder = isFolder ? "e.g. Smart Money Concepts" : isSubfolder ? "e.g. Order Blocks" : "e.g. Market Structure";const titleTxt = data.id ? `Edit ${kind}` : `New ${kind}`;return (
setF({...f,title: e.target.value})} placeholder={placeholder} />
setF({...f,sort_order: +e.target.value})} />
)}function VideoModal({admin,data,sections,onSave,onClose}){const [f,setF] = useState(data);const [picker,setPicker] = useState(false);const [pdfUploading,setPdfUploading] = useState(false);async function uploadPdf(ev){const file = ev.target.files?.[0];if (!file) return;if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")){alert("Please choose a PDF file.");return}setPdfUploading(true);try{const url = await uploadFile(file,"lesson-pdfs");setF((s) => ({...s,pdf_url: url,pdf_name: s.pdf_name || file.name.replace(/\.pdf$/i,"")}))}catch{alert("PDF upload failed. Try again.")}finally{setPdfUploading(false)}}function applyBunny(val){let lib = f.bunny_library_id,vid = val.trim();const m = val.match(/embed\/(\d+)\/([a-f0-9-]+)/i);if (m){lib = m[1];vid = m[2]}setF({...f,bunny_library_id: lib,bunny_video_id: vid})}const lType = f.lesson_type || "video";const setType = (t) => setF({...f,lesson_type: t});return (
setF({...f,title: e.target.value})} />
{}
{[["video","🎬 Video lesson"],["pdf","📄 PDF lesson"]].map(([k,lbl]) => ())}
{lType === "pdf" ? "Students open this lesson and read the PDF full-screen — no video needed." : "Students watch the Bunny video. You can still attach a PDF as extra notes below."}
{lType === "video" && (<>
{f.bunny_video_id ?
✓ Linked: {String(f.bunny_video_id).slice(0,12)}… (lib {f.bunny_library_id})
:
No video linked yet
}
setF({...f,bunny_library_id: e.target.value})} placeholder="e.g. 12345" />
applyBunny(e.target.value)} placeholder="GUID or paste embed link" />
)}