// ============================================================ // FitMinds — Schools CRM + Invoices + Enquiries + Content + Users + Calendar + Settings + Login + Portal // ============================================================ // ---------- SCHOOLS PAGE ---------- function SchoolsPage({ onNav, showToast }) { const [search, setSearch] = React.useState(""); const [selected, setSelected] = React.useState(null); const filtered = SCHOOLS.filter(s => s.name.toLowerCase().includes(search.toLowerCase()) || s.address.toLowerCase().includes(search.toLowerCase())); return (
a + s.bookings, 0)} bookings in the book`} action={} />
setSearch(e.target.value)} />
{filtered.map(s => (
setSelected(s)}>
{s.bookings >= 3 && Repeat client}
{s.name}
{s.address}
Contact
{s.contact}
Lifetime
{money(s.lifetime)}
{s.bookings} bookings
))}
{selected && setSelected(null)} onNav={onNav} />}
); } function SchoolDrawer({ school, onClose, onNav }) { const history = BOOKINGS.filter(b => b.schoolId === school.id); return (
e.stopPropagation()}>
{school.name}
{school.address}
Booking history
{history.map(b => (
{b.title}
{fmtDate(b.start)} · {b.weeks} weeks
{money(b.totalPrice)}
))}
); } // ---------- INVOICES PAGE ---------- function InvoicesPage({ showToast, invoiceBooking, setInvoiceBooking }) { const [filter, setFilter] = React.useState("all"); const [preview, setPreview] = React.useState(invoiceBooking || null); React.useEffect(() => { if (invoiceBooking) setPreview(invoiceBooking); }, [invoiceBooking]); const filtered = INVOICES.filter(i => filter === "all" || i.status === filter); const totals = { all: INVOICES.reduce((a, i) => a + i.total, 0), paid: INVOICES.filter(i => i.status === "paid").reduce((a, i) => a + i.total, 0), outstanding: INVOICES.filter(i => i.status === "sent").reduce((a, i) => a + i.total, 0), draft: INVOICES.filter(i => i.status === "draft").reduce((a, i) => a + i.total, 0), }; return (
Generate from booking} />
{["all","paid","sent","draft"].map(k => ( ))}
{filtered.map(inv => { const s = SCHOOL_BY_ID[inv.schoolId]; return ( setPreview(BOOKING_BY_ID[inv.bookingId])} style={{ cursor: "pointer" }}> ); })}
Invoice School Issued Due Total Status
{inv.id}
{s.name}
{fmtDateShort(inv.issued)} {fmtDateShort(inv.due)} {money(inv.total)}
{preview && { setPreview(null); setInvoiceBooking && setInvoiceBooking(null); }} showToast={showToast} />}
); } function InvoiceModal({ booking, onClose, showToast }) { const s = SCHOOL_BY_ID[booking.schoolId]; const [sent, setSent] = React.useState(false); return (
e.stopPropagation()} style={{ width: "min(860px, 100%)" }}>
Invoice preview
Auto-generated from booking {booking.id}
FitMindsCoach
Inclusive movement coaching · NI
12 Orchard Park, Belfast BT6
ronan@fitmindscoach.com · 077 1122 3344
VAT not applicable
Invoice
INV-2026-021
Issued {fmtDate("2026-04-21")}
Due {fmtDate("2026-05-21")}
Billed to
{s.name}
{s.address}
Attn: {s.contact}
For period
{fmtDate(booking.start)} → {fmtDate(addWeeks(booking.start, booking.weeks))}
{booking.weeks} weeks · {["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][booking.daysOfWeek[0]]}s at {booking.time}
DescriptionQtyRateAmount
{booking.title}
{booking.duration} min · Inclusive movement coaching · {booking.notes}
 {booking.weeks} {money(booking.pricePerSession)} {money(booking.totalPrice)}
Subtotal{money(booking.totalPrice)}
VAT (0%)£0
Total due{money(booking.totalPrice)}
Payment details
Bank transfer: Ulster Bank · sort 98-00-50 · acc 12345678. Reference: {"INV-2026-021"}.
Thank you — every session makes a difference.
); } // ---------- ENQUIRIES ---------- function EnquiriesPage() { const stages = ["new","contacted","qualified","booked","lost"]; const stageLabel = { new: "New", contacted: "Contacted", qualified: "Qualified", booked: "Booked", lost: "Lost" }; const stageTone = { new: "blue", contacted: "amber", qualified: "violet", booked: "green", lost: "neutral" }; return (
e.stage === "new").length} new · ${ENQUIRIES.length} total this month`} action={
} />
{stages.map(st => { const items = ENQUIRIES.filter(e => e.stage === st); return (
{stageLabel[st]}
{items.length}
{items.map(e => (
{e.name}
{e.org}
{e.message.slice(0, 90)}{e.message.length > 90 ? "…" : ""}
{fmtDateShort(e.date)}
))} {items.length === 0 &&
—
}
); })}
); } // ---------- CONTENT PORTAL (ADMIN) ---------- function ContentAdminPage({ onSwitchView }) { const [activeCat, setActiveCat] = React.useState("all"); const visible = VIDEOS.filter(v => activeCat === "all" || v.cat === activeCat); return (
} />
{VIDEO_CATEGORIES.map(c => (
setActiveCat(c.id)}>
{c.count}
{c.label}
videos in library
))}
{VIDEO_CATEGORIES.map(c => ( ))}
{visible.map(v => (
{v.duration}
{v.title}
{VIDEO_CATEGORIES.find(c => c.id === v.cat).label} · {v.views} views
))}
); } // ---------- USERS ---------- function UsersPage() { const [tab, setTab] = React.useState("all"); const visible = USERS.filter(u => { if (tab === "all") return true; if (tab === "admin") return u.role.includes("Admin"); if (tab === "teacher") return u.role === "Teacher"; if (tab === "parent") return u.role === "Parent"; }); return (
u.status === "active").length} active`} action={} />
u.role.includes("Admin")).length} icon="shield-check" /> u.role === "Teacher").length} icon="graduation-cap" tint="mint" /> u.role === "Parent").length} icon="heart" tint="sun" />
{visible.map(u => ( ))}
UserRoleLast activeContent viewedStatus
{u.avatar}
{u.name}
{u.email}
 {u.role} {u.lastActive} {u.content !== null ? u.content + " videos" : "—"}
); } // ---------- CALENDAR PAGE (month view) ---------- function CalendarPage({ bookings, onOpen }) { // Month: April 2026. 1st = Wed. const month = "April 2026"; const firstDow = 3; // Wed const daysInMonth = 30; const cells = []; for (let i = 0; i < firstDow; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); const eventsForDay = (d) => { if (!d) return []; const iso = `2026-04-${String(d).padStart(2,"0")}`; // derive day of week for April 2026: April 1 = Wed (3) const dow = (firstDow + d - 1) % 7; return bookings.filter(b => { if (!b.daysOfWeek.includes(dow)) return false; const start = b.start; const end = addWeeks(b.start, b.weeks); return iso >= start && iso < end; }); }; return (
} />
Month
{month}
{["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(d => (
{d}
))} {cells.map((d, i) => { // Adjust: calendar header above starts Mon. We used Wed = 3 for April 1st so if we want Mon-first, shift: // leave Sunday-first for simplicity: firstDow already = Wed index (3) const events = eventsForDay(d); const isToday = d === 21; return (
{d && (
{d}
{events.length > 0 && {events.length}}
)} {events.slice(0, 3).map(b => (
onOpen(b)}>
{SCHOOL_BY_ID[b.schoolId].short} · {b.time}
))}
); })}
{SCHOOLS.slice(0,4).map((s, i) => (
{s.name}
))}
); } // ---------- SIMPLE REPORTS & SETTINGS ---------- function ReportsPage() { return (
Revenue by school · last 12 months
{SCHOOLS.map(s => { const pct = Math.round((s.lifetime / 3600) * 100); return (
{s.name}
{money(s.lifetime)}
); })}
); } function SettingsPage({ brand, setBrand }) { return (
Brand / white-label
setBrand({ ...brand, name: e.target.value })} /> setBrand({ ...brand, tagline: e.target.value })} />
Primary colour
{[ { hex: "oklch(0.66 0.18 35)", name: "FitMinds Coral" }, { hex: "oklch(0.60 0.20 260)", name: "Indigo" }, { hex: "oklch(0.60 0.17 165)", name: "Forest" }, { hex: "oklch(0.55 0.18 300)", name: "Plum" }, { hex: "oklch(0.65 0.17 220)", name: "Ocean" }, { hex: "oklch(0.60 0.20 25)", name: "Scarlet" }, ].map(c => (
setBrand({ ...brand, primary: c.hex })} title={c.name}>
))}
White-label is on. The portal, invoices, and parent emails will all use your branding.
Preferences
Auto-invoice on booking
Generates a draft invoice as soon as a booking is created.
{}} />
Google Calendar sync
Two-way sync with ronan@fitmindscoach.com
{}} />
Public booking widget
Allow schools to self-book from your website.
{}} />
Weekly summary email
Every Sunday at 18:00.
{}} />
Test logins
Prototype only
Use these credentials to sign in as each role while the site is in progress. All three use the same password for easy sharing. Change them in Data.jsx → AUTH_USERS.
Role
Email
Password
{AUTH_USERS.map(u => (
{AUTH_ROLE_LABELS[u.role] || u.role}
{u.email}
{u.password}
))}
Client-side auth only — anyone with browser dev tools can read these. Fine for gating a prototype, not real security. Swap for server-side auth before any real launch.
); } Object.assign(window, { SchoolsPage, InvoicesPage, InvoiceModal, EnquiriesPage, ContentAdminPage, UsersPage, CalendarPage, ReportsPage, SettingsPage, });