Unable to load policy. Please contact the school.
' + } + return html +} diff --git a/src/api/session.ts b/src/api/session.ts new file mode 100644 index 0000000..6d97452 --- /dev/null +++ b/src/api/session.ts @@ -0,0 +1,122 @@ +import { apiFetch } from './http' +import type { + ApiEnvelope, + DashboardPayload, + LoginFailure, + LoginResponse, + LoginSuccess, + NavMenuResponse, + ParentAttendanceResponse, + ParentAttendanceReportFormResponse, + ParentEnrollmentsResponse, + ParentEventsResponse, + ParentInvoicesResponse, + ParentProfileResponse, + ParentRegistrationResponse, + ParentEmergencyContactsResponse, + ParentAttendanceReportsListResponse, + ParentAuthorizedUsersApiResponse, + ContactSubmitResponse, +} from './types' + +export async function loginRequest( + email: string, + password: string, +): Promise-
+ {items.map((item) => (
+
+ {children.map((ch) => (
+
+ ) : null}
+
+
+
+
+
+ )
+}
diff --git a/src/layout/PublicLayout.tsx b/src/layout/PublicLayout.tsx
new file mode 100644
index 0000000..967ffa1
--- /dev/null
+++ b/src/layout/PublicLayout.tsx
@@ -0,0 +1,92 @@
+import { Link, Outlet } from 'react-router-dom'
+import { useAuth } from '../auth/AuthProvider'
+
+export function PublicLayout() {
+ const { isAuthenticated, user, logout } = useAuth()
+
+ return (
+
+
+ Al Rahma Sunday School
+
+
+
+ {user?.name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/lib/apiOrigin.ts b/src/lib/apiOrigin.ts
new file mode 100644
index 0000000..27be51c
--- /dev/null
+++ b/src/lib/apiOrigin.ts
@@ -0,0 +1,11 @@
+/** Prefix for Laravel API when the SPA is served from another origin (production). Empty in dev with Vite proxy. */
+export function apiOrigin(): string {
+ const v = import.meta.env.VITE_API_ORIGIN
+ return typeof v === 'string' ? v.replace(/\/$/, '') : ''
+}
+
+export function apiUrl(path: string): string {
+ const base = apiOrigin()
+ const p = path.startsWith('/') ? path : `/${path}`
+ return `${base}${p}`
+}
diff --git a/src/lib/ciRouteLookup.ts b/src/lib/ciRouteLookup.ts
new file mode 100644
index 0000000..eef8f9e
--- /dev/null
+++ b/src/lib/ciRouteLookup.ts
@@ -0,0 +1,21 @@
+import { type CiRouteMetaEntry, ciRouteMeta } from './ciRouteMeta.generated'
+import { ciRouteManual } from './ciRouteManual'
+
+/** Match CI `app/Views/...` keys: lowercase, hyphens in URL map to underscores. */
+export function getCiMeta(splat: string): CiRouteMetaEntry | null {
+ const raw = splat
+ .trim()
+ .replace(/^\/+|\/+$/g, '')
+ .toLowerCase()
+ if (!raw) return null
+ const withUnderscores = raw.replace(/-/g, '_')
+ return (
+ ciRouteManual[withUnderscores] ?? ciRouteMeta[withUnderscores] ?? null
+ )
+}
+
+/** Build canonical SPA path from a registry key (snake segments) using kebab-case segments. */
+export function ciRegistryKeyToAppPath(routeKey: string): string {
+ const parts = routeKey.split('/').map((seg) => seg.replace(/_/g, '-'))
+ return `/app/${parts.join('/')}`
+}
diff --git a/src/lib/ciRouteManual.ts b/src/lib/ciRouteManual.ts
new file mode 100644
index 0000000..e9d3cb0
--- /dev/null
+++ b/src/lib/ciRouteManual.ts
@@ -0,0 +1,24 @@
+import type { CiRouteMetaEntry } from './ciRouteMeta.generated'
+
+/**
+ * CI routes that do not map 1:1 to a single Views/*.php filename (composed dashboards, aliases).
+ * Keys use snake_case segments like the generated registry.
+ */
+export const ciRouteManual: Record
+
+ Public docs
+
+
+ {saved ? (
+
+ ) : null}
+
+
+ )
+}
diff --git a/src/pages/AppHome.tsx b/src/pages/AppHome.tsx
new file mode 100644
index 0000000..1de8900
--- /dev/null
+++ b/src/pages/AppHome.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { fetchDashboardRoute } from '../api/session'
+import { useAuth } from '../auth/AuthProvider'
+
+export function AppHome() {
+ const { user } = useAuth()
+ const [route, setRoute] = useState
+
+ )
+}
diff --git a/src/pages/CiPlaceholderPage.tsx b/src/pages/CiPlaceholderPage.tsx
new file mode 100644
index 0000000..526729c
--- /dev/null
+++ b/src/pages/CiPlaceholderPage.tsx
@@ -0,0 +1,54 @@
+import { Link, useParams } from 'react-router-dom'
+import { getCiMeta } from '../lib/ciRouteLookup'
+
+/** Fallback for CI-style paths not yet ported to dedicated React pages. */
+export function CiPlaceholderPage() {
+ const params = useParams()
+ const star = params['*'] ?? ''
+ const segments = star.split('/').filter(Boolean)
+ const meta = getCiMeta(star)
+
+ const title = meta?.title ?? 'Section placeholder'
+ const viewsPath = meta?.ciViewPath ?? (star ? `…/${star}` : '…')
+
+ return (
+ Welcome
++ Signed in as {user?.name}. +
+ +
+
+
+
+
+
+
+
+
+ Roles (from login)
+-
+ {roleKeys.length ? (
+ roleKeys.map((r) =>
- {r} ) + ) : ( +
- None reported + )} +
+
+
+
+
+
+ Dashboard route (API)
+ {error ? ( +{error}
+ ) : ( + <> +
+ {route ?? '—'}
+
+ Resolved roles: {roles.length ? roles.join(', ') : '—'} +
+ + )} +
+
+ Shortcuts
+-
+
-
+ Parent — Dashboard (parity with
+ CodeIgniter
parent/parent_dashboard) +
+ -
+ Parent — Attendance (parity
+ with CodeIgniter
Views/parent/attendance.php) +
+ -
+ Parent — All pages (navigation for
+ every view under
Views/parent/) +
+ - + Public API docs (Swagger) + +
-
+ All CodeIgniter views (sitemap) — open any{' '}
+
app/Viewsscreen as an/app/…parity route +
+
+
+
+
+ )
+}
diff --git a/src/pages/CiSitemapPage.tsx b/src/pages/CiSitemapPage.tsx
new file mode 100644
index 0000000..aba816b
--- /dev/null
+++ b/src/pages/CiSitemapPage.tsx
@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import { ciRouteMeta } from '../lib/ciRouteMeta.generated'
+import { ciRegistryKeyToAppPath } from '../lib/ciRouteLookup'
+
+/** Browse every CodeIgniter view file mapped under `/app/…` (parity placeholders unless a dedicated route exists). */
+export function CiSitemapPage() {
+ const grouped = useMemo(() => {
+ const g = new Map{title}
+
+ CodeIgniter view:{' '}
+
+ app/Views/{viewsPath}
+
+
+ Implement this screen using the matching routes in app_laravel/routes/api.php{' '}
+ (JWT Authorization: Bearer). See also API docs.
+
+ SPA path: /app/{star || '…'}
+
+ Browse all CI view routes + {' · '} + App home +
+
+
+
+
+ )
+}
diff --git a/src/pages/ForgotPasswordPage.tsx b/src/pages/ForgotPasswordPage.tsx
new file mode 100644
index 0000000..b9c7363
--- /dev/null
+++ b/src/pages/ForgotPasswordPage.tsx
@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom'
+
+/** Mirrors CodeIgniter `Views/user/forgot_password.php` shell; reset flow remains on the Laravel site. */
+export function ForgotPasswordPage() {
+ return (
+ CodeIgniter views → SPA routes
+
+ Generated from app_codeigniter/app/Views/**/*.php. Each link opens the parity
+ route under /app/…; unimplemented screens use the section placeholder with the
+ matching view path. Regenerate: npm run gen:ci-meta.
+
+ {grouped.map(([section, items]) => (
+
+
+
+ ))}
+
+
+ {section}
+ -
+ {items.map(({ key, title }) => (
+
-
+ {title}
+ ++
{key.replace(/\//g, ' / ')}+
+ ))}
+
+
+ )
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..444354c
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,78 @@
+import { Link } from 'react-router-dom'
+import { useAuth } from '../auth/AuthProvider'
+
+/** Public landing — structure inspired by CodeIgniter `Views/landing_page/guest_dashboard.php` hero. */
+export function HomePage() {
+ const { isAuthenticated } = useAuth()
+
+ return (
+
+
+
+
+ 
{
+ ;(ev.target as HTMLImageElement).style.display = 'none'
+ }}
+ />
+
+
+
+ {
+ ;(ev.target as HTMLImageElement).style.display = 'none'
+ }}
+ />
+
+ + Reset Your Password +
+ +
+
+
+ Password reset requests are handled through the school's main website.
++ If this SPA is only the API client, open the legacy site or contact the office for a + reset link. +
+
+
+ Back to Sign in
+
+
+ Register now
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..b93e327
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,146 @@
+import { useState, type FormEvent } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { fetchDashboardRoute } from '../api/session'
+import { useAuth } from '../auth/AuthProvider'
+import { spaPathFromCiUrl } from '../lib/ciSpaPaths'
+
+/** Matches CodeIgniter `Views/user/login.php` (JWT via `/api/v1/auth/login`). */
+export function LoginPage() {
+ const { login } = useAuth()
+ const navigate = useNavigate()
+ const location = useLocation()
+ const locState = location.state as { from?: string; registered?: boolean; message?: string } | null
+
+ const from = locState?.from ?? '/app/home'
+ const flashSuccess =
+ locState?.registered === true ? locState?.message ?? 'Registration submitted.' : null
+
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [showPassword, setShowPassword] = useState(false)
+ const [error, setError] = useState
+
+ + Welcome to Al Rahma Sunday School +
++ {isAuthenticated ? 'Welcome back' : 'Welcome, Guest!'} +
++ Use the portal to manage enrollment, attendance, grades, and family information — the + same workflows as the CodeIgniter site, backed by the Laravel API. +
+
+ {isAuthenticated ? (
+
+ Go to dashboard
+
+ ) : (
+ <>
+
+ Sign in
+
+
+ Registration Form
+
+
+ )}
+
+ API documentation
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Families +
++ Parents sign in after registration is activated by email. +
+
+
+
+
+
+
+ + + Secure portal +
+
+ Sessions use JWT from the Laravel API (/api/v1/auth/login).
+
+
+ )
+}
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..652e18e
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -0,0 +1,610 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import {
+ fetchRegisterCaptcha,
+ fetchSchoolPolicyHtml,
+ submitFullRegistration,
+ type FullRegisterPayload,
+} from '../api/registerFull'
+import { NE_STATES } from '../data/neStates'
+
+function formatUsPhone(input: string): string {
+ const raw = input.replace(/\D/g, '').slice(0, 10)
+ if (raw.length <= 3) return raw
+ if (raw.length <= 6) return `${raw.slice(0, 3)}-${raw.slice(3)}`
+ return `${raw.slice(0, 3)}-${raw.slice(3, 6)}-${raw.slice(6)}`
+}
+
+/** Matches CodeIgniter `Views/user/register.php` + Laravel `POST /api/v1/auth/register` (captcha flow). */
+export function RegisterPage() {
+ const navigate = useNavigate()
+
+ const [captchaChallenge, setCaptchaChallenge] = useState('')
+ const [captchaLoading, setCaptchaLoading] = useState(true)
+
+ const [firstname, setFirstname] = useState('')
+ const [lastname, setLastname] = useState('')
+ const [gender, setGender] = useState('')
+ const [cellphone, setCellphone] = useState('')
+ const [email, setEmail] = useState('')
+ const [confirmEmail, setConfirmEmail] = useState('')
+ const [addressStreet, setAddressStreet] = useState('')
+ const [apt, setApt] = useState('')
+ const [city, setCity] = useState('')
+ const [state, setState] = useState('')
+ const [zip, setZip] = useState('')
+
+ const [isParent, setIsParent] = useState(false)
+ const [noSecondParentInfo, setNoSecondParentInfo] = useState(false)
+ const [secondFirstname, setSecondFirstname] = useState('')
+ const [secondLastname, setSecondLastname] = useState('')
+ const [secondGender, setSecondGender] = useState('')
+ const [secondEmail, setSecondEmail] = useState('')
+ const [secondCellphone, setSecondCellphone] = useState('')
+
+ const [acceptPolicy, setAcceptPolicy] = useState(false)
+ const [captchaAnswer, setCaptchaAnswer] = useState('')
+
+ const [policyHtml, setPolicyHtml] = useState
+
+
+ Unable to load policy.
') + } finally { + setPolicyLoading(false) + } + } + const el = document.getElementById('policyModal') + const B = ( + window as unknown as { + bootstrap?: { Modal: { getOrCreateInstance: (n: HTMLElement) => { show: () => void } } } + } + ).bootstrap + if (el && B?.Modal) { + B.Modal.getOrCreateInstance(el).show() + } + } + + function fieldErr(key: string): string | undefined { + return fieldErrors[key]?.[0] + } + + async function onSubmit(e: FormEvent) { + e.preventDefault() + setError(null) + setFieldErrors({}) + + if (email.trim() !== confirmEmail.trim()) { + setError('Email and confirm email must match.') + return + } + if (!acceptPolicy) { + setError('You must accept the school policies.') + return + } + const zipOk = /^\d{5}$/.test(zip.trim()) + if (!zipOk) { + setError('Zip must be exactly 5 digits.') + return + } + const phoneDigits = cellphone.replace(/\D/g, '') + if (phoneDigits.length !== 10) { + setError('Please enter a valid 10-digit cell phone number.') + return + } + + if (isParent && !noSecondParentInfo) { + const sd = secondCellphone.replace(/\D/g, '') + if (sd.length !== 10) { + setError('Second parent phone must be a valid 10-digit number.') + return + } + if (!secondFirstname.trim() || !secondLastname.trim() || !secondGender || !secondEmail.trim()) { + setError('Please complete second parent / guardian information.') + return + } + } + + const payload: FullRegisterPayload = { + firstname, + lastname, + gender, + cellphone, + email, + confirm_email: confirmEmail, + address_street: addressStreet, + apt, + city, + state, + zip: zip.trim(), + is_parent: isParent, + no_second_parent_info: noSecondParentInfo, + accept_school_policy: acceptPolicy, + captcha: captchaAnswer, + second_firstname: secondFirstname, + second_lastname: secondLastname, + second_gender: secondGender, + second_email: secondEmail, + second_cellphone: secondCellphone, + } + + setBusy(true) + try { + const result = await submitFullRegistration(payload) + if (!result.ok) { + setError(result.message) + if ('errors' in result && result.errors) setFieldErrors(result.errors) + void loadCaptcha() + return + } + navigate('/login', { + replace: true, + state: { + registered: true, + message: + 'Registration submitted. Please check your email to activate your account when instructed.', + }, + }) + } finally { + setBusy(false) + } + } + + const showSecondSection = isParent + const showSecondFields = isParent && !noSecondParentInfo + + return ( +
+ (null)
+ const [error, setError] = useState(null)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ try {
+ const headers: HeadersInit = { Accept: 'application/json' }
+ if (authorization) {
+ headers.Authorization = authorization
+ }
+ const res = await fetch(apiUrl(bootstrapPath), { headers })
+ const body = await res.json().catch(() => null)
+ if (!res.ok) {
+ const msg =
+ typeof body?.message === 'string'
+ ? body.message
+ : `HTTP ${res.status}`
+ throw new Error(msg)
+ }
+ if (!cancelled) {
+ setBootstrap(body as DocsBootstrap)
+ setError(null)
+ }
+ } catch (e) {
+ if (!cancelled) {
+ setBootstrap(null)
+ setError(e instanceof Error ? e.message : 'Failed to load docs config')
+ }
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [bootstrapPath, authorization])
+
+ useEffect(() => {
+ if (bootstrap?.title) {
+ document.title = bootstrap.title
+ }
+ }, [bootstrap?.title])
+
+ const specUrl = useMemo(() => {
+ if (!bootstrap?.openapi_url) {
+ return ''
+ }
+ return apiUrl(bootstrap.openapi_url)
+ }, [bootstrap])
+
+ if (error) {
+ return (
+ ('')
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ setLoading(true)
+ try {
+ const res = await fetchParentAuthorizedUsers()
+ if (cancelled) return
+ setPayload(JSON.stringify(res, null, 2))
+ setError(null)
+ } catch (e) {
+ if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load.')
+ } finally {
+ if (!cancelled) setLoading(false)
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ return (
+
+ {error ?
+ )
+}
+
+/** Submitted reports — `GET /api/v1/parents/attendance-reports`. */
+export function ParentAttendanceReportsHistoryPage() {
+ const [payload, setPayload] = useState('')
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ setLoading(true)
+ try {
+ const res = await fetchParentAttendanceReportsList()
+ if (cancelled) return
+ setPayload(JSON.stringify(res, null, 2))
+ setError(null)
+ } catch (e) {
+ if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load.')
+ } finally {
+ if (!cancelled) setLoading(false)
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ return (
+
+ {error ?
+ )
+}
diff --git a/src/pages/parent/ParentAttendancePage.tsx b/src/pages/parent/ParentAttendancePage.tsx
new file mode 100644
index 0000000..b1655e0
--- /dev/null
+++ b/src/pages/parent/ParentAttendancePage.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { fetchParentAttendance } from '../../api/session'
+import type { ParentAttendanceRow } from '../../api/types'
+
+export function ParentAttendancePage() {
+ const [params, setParams] = useSearchParams()
+ const schoolYearParam = params.get('school_year')
+
+ const [rows, setRows] = useState([])
+ const [schoolYears, setSchoolYears] = useState<{ school_year: string }[]>([])
+ const [selectedYear, setSelectedYear] = useState(null)
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ setLoading(true)
+ try {
+ const data = await fetchParentAttendance(schoolYearParam)
+ if (cancelled) return
+ setRows(data.attendance ?? [])
+ setSchoolYears(data.schoolYears ?? [])
+ setSelectedYear(data.selectedYear ?? null)
+ setError(null)
+ } catch (e) {
+ if (!cancelled) {
+ setRows([])
+ setSchoolYears([])
+ setSelectedYear(null)
+ setError(e instanceof Error ? e.message : 'Unable to load attendance.')
+ }
+ } finally {
+ if (!cancelled) setLoading(false)
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [schoolYearParam])
+
+ function onYearChange(next: string) {
+ const nextParams = new URLSearchParams(params)
+ if (next) nextParams.set('school_year', next)
+ else nextParams.delete('school_year')
+ setParams(nextParams)
+ }
+
+ const yearOptions =
+ schoolYears.length > 0
+ ? schoolYears
+ : selectedYear
+ ? [{ school_year: selectedYear }]
+ : []
+
+ return (
+ ([])
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ setLoading(true)
+ try {
+ const data = await fetchParentEmergencyContacts()
+ if (cancelled) return
+ setRows(data.contacts ?? [])
+ setError(null)
+ } catch (e) {
+ if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load contacts.')
+ } finally {
+ if (!cancelled) setLoading(false)
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ return (
+
+ {error ?
+ )
+}
diff --git a/src/pages/parent/ParentHomePage.tsx b/src/pages/parent/ParentHomePage.tsx
new file mode 100644
index 0000000..1073a82
--- /dev/null
+++ b/src/pages/parent/ParentHomePage.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { fetchParentProfile } from '../../api/session'
+import type { ParentProfileRecord } from '../../api/types'
+import { useAuth } from '../../auth/AuthProvider'
+import { ParentSectionNav } from './ParentSectionNav'
+
+function displayName(p: ParentProfileRecord | null): string {
+ if (!p) return ''
+ const fn = (p.firstname ?? '').trim()
+ const ln = (p.lastname ?? '').trim()
+ const full = `${fn} ${ln}`.trim()
+ return full || (p.email ?? '').trim()
+}
+
+export function ParentHomePage() {
+ const { user } = useAuth()
+ const [profile, setProfile] = useState(null)
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ setLoading(true)
+ try {
+ const data = await fetchParentProfile()
+ if (cancelled) return
+ setProfile(data.profile ?? null)
+ setError(null)
+ } catch (e) {
+ if (!cancelled) {
+ setProfile(null)
+ setError(e instanceof Error ? e.message : 'Unable to load profile.')
+ }
+ } finally {
+ if (!cancelled) setLoading(false)
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ const greeting = useMemo(() => {
+ const fromApi = displayName(profile)
+ if (fromApi) return fromApi
+ return user?.name?.trim() || 'Parent'
+ }, [profile, user?.name])
+
+ return (
+ (null)
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(false)
+
+ useEffect(() => {
+ let cancelled = false
+ ;(async () => {
+ try {
+ const res = await fetchParentProfile()
+ const p = res.profile
+ if (cancelled || !p) return
+ const fn = (p.firstname ?? '').trim()
+ const ln = (p.lastname ?? '').trim()
+ const full = `${fn} ${ln}`.trim()
+ if (full) setName(full)
+ if (p.email) setEmail(String(p.email))
+ } catch {
+ /* optional */
+ }
+ })()
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ useEffect(() => {
+ if (!user?.name) return
+ setName((n) => n || user.name)
+ }, [user?.name])
+
+ async function onSubmit(e: FormEvent) {
+ e.preventDefault()
+ setLoading(true)
+ setError(null)
+ setStatus(null)
+ try {
+ const res = await submitContactMessage({ name, email, subject, message })
+ if (res.status) {
+ setStatus(res.message ?? 'Message sent.')
+ setSubject('')
+ setMessage('')
+ } else {
+ setError('Could not send message.')
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Request failed.')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+ {status ?
+
+
+
+
+ )
+}
diff --git a/src/pages/SwaggerDocs.tsx b/src/pages/SwaggerDocs.tsx
new file mode 100644
index 0000000..5806d38
--- /dev/null
+++ b/src/pages/SwaggerDocs.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from 'react'
+import SwaggerUI from 'swagger-ui-react'
+import 'swagger-ui-react/swagger-ui.css'
+import type { DocsBootstrap } from '../types/docsBootstrap'
+import { apiUrl } from '../lib/apiOrigin'
+
+type Props = {
+ bootstrapPath: string
+ authorization?: string | null
+}
+
+export function SwaggerDocs({ bootstrapPath, authorization }: Props) {
+ const [bootstrap, setBootstrap] = useState
+
+ )
+ }
+
+ if (!bootstrap || !specUrl) {
+ return {error}
+Loading documentation…
+ }
+
+ const hideAuthorize = !bootstrap.show_authorize_button
+
+ return (
+
+ {bootstrap.welcome_name ? (
+
+ }) => {
+ if (authorization && !req.headers.Authorization) {
+ req.headers.Authorization = authorization
+ }
+ return req
+ }}
+ />
+
+ )
+}
diff --git a/src/pages/parent/ParentAccountListPages.tsx b/src/pages/parent/ParentAccountListPages.tsx
new file mode 100644
index 0000000..e38a391
--- /dev/null
+++ b/src/pages/parent/ParentAccountListPages.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import {
+ fetchParentAttendanceReportsList,
+ fetchParentAuthorizedUsers,
+} from '../../api/session'
+import { ParentParityShell } from './ParentParityShell'
+
+/** Secondary / authorized users — `GET /api/v1/parents/authorized-users`. */
+export function ParentAuthorizedUsersPage() {
+ const [payload, setPayload] = useState
+ Welcome, {bootstrap.welcome_name}
+
+ ) : null}
+ {hideAuthorize ? : null}
+ {error}
: null}
+ {loading ? (
+ Loading…
+ ) : ( +
+ {payload}
+
+ )}
+ {error}
: null}
+ {loading ? (
+ Loading…
+ ) : ( +
+ {payload}
+
+ )}
+ + New submission:{' '} + Report attendance form +
+
+
+ )
+}
diff --git a/src/pages/parent/ParentCiRouteRedirects.tsx b/src/pages/parent/ParentCiRouteRedirects.tsx
new file mode 100644
index 0000000..4854ec6
--- /dev/null
+++ b/src/pages/parent/ParentCiRouteRedirects.tsx
@@ -0,0 +1,16 @@
+import { Navigate, useParams } from 'react-router-dom'
+
+/** CI uses `parent/edit_student/(:num)` — canonical SPA uses `parent/students/:id/edit`. */
+export function RedirectParentLegacyStudentEdit() {
+ const { studentId } = useParams<{ studentId: string }>()
+ return
+
+
+
+
+ {error ? (
+ + Attendance Record +
+{error}
+ ) : null}
+
+ {loading ? (
+ Loading…
+ ) : rows.length === 0 ? ( +No attendance rows for this school year.
+ ) : ( +
+
+
+
+
+ )}
+
+ | First Name | +Last Name | +Date | +Status | +Reason | +
|---|---|---|---|---|
| {row.firstname} | +{row.lastname} | +{row.date} | +{row.status} | +{row.reason ?? '—'} | +
+ Parent dashboard + {' · '} + App home +
+{error}
: null}
+ {loading ? (
+ Loading…
+ ) : rows.length === 0 ? ( +No emergency contacts.
+ ) : ( +-
+ {rows.map((c) => (
+
-
+
+ {c.name || 'Contact'}
+
+ + {[c.cellphone, c.email].filter(Boolean).join(' · ') || '—'} ++
+ ))}
+
+
+ )
+}
diff --git a/src/pages/parent/ParentParityShell.tsx b/src/pages/parent/ParentParityShell.tsx
new file mode 100644
index 0000000..223d725
--- /dev/null
+++ b/src/pages/parent/ParentParityShell.tsx
@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { ParentSectionNav } from './ParentSectionNav'
+
+export type ParentParitySpec = {
+ title: string
+ /** File name under `app/Views/parent/` (e.g. `calendar.php`). */
+ ciViewFile: string
+ /** Example CodeIgniter URL paths (with leading slash). */
+ legacyCiRoutes?: string[]
+}
+
+type ShellProps = ParentParitySpec & {
+ children?: ReactNode
+}
+
+export function ParentParityShell({
+ title,
+ ciViewFile,
+ legacyCiRoutes,
+ children,
+}: ShellProps) {
+ return (
+
+
+
+ {error ? (
+ + Parent dashboard +
+
+ Parity with CodeIgniter Views/parent/parent_dashboard
+
+ {error}{' '}
+
+ Parent-only APIs require a parent account. Use the general{' '}
+ app home if you landed here by mistake.
+
+
+ ) : null}
+
+ {loading ? (
+ Loading…
+ ) : ( +
+
+ )}
+
+
+
+
+
+
+
+ Account
++ {greeting} +
+ {profile?.email ? ( +{profile.email}
+ ) : null} + {profile?.cellphone ? ( +{profile.cellphone}
+ ) : null} +
+
+
+
+
+
+ Address
+ {profile?.address_street || profile?.city || profile?.state ? ( ++ {[profile.address_street, profile.city, profile.state, profile.zip] + .filter(Boolean) + .join(', ')} +
+ ) : ( +No address on file.
+ )} +
+
+
+
+
+
+ Shortcuts
+-
+
- + Attendance record + +
- + App home + +
+
+
+
+ All parent pages (CI parity)
+
+
+
+
+ )
+}
diff --git a/src/pages/parent/ParentSectionNav.tsx b/src/pages/parent/ParentSectionNav.tsx
new file mode 100644
index 0000000..1374271
--- /dev/null
+++ b/src/pages/parent/ParentSectionNav.tsx
@@ -0,0 +1,51 @@
+import { NavLink } from 'react-router-dom'
+
+const LINKS: { to: string; label: string }[] = [
+ { to: '/app/parent/home', label: 'Dashboard' },
+ { to: '/app/parent/add-second-parent', label: 'Add second parent' },
+ { to: '/app/parent/assignments', label: 'Assignments' },
+ { to: '/app/parent/attendance', label: 'Attendance' },
+ { to: '/app/parent/calendar', label: 'Calendar' },
+ { to: '/app/parent/classes', label: 'Classes' },
+ { to: '/app/parent/progress', label: 'Class progress' },
+ { to: '/app/parent/edit-emergency-contact', label: 'Emergency contacts' },
+ { to: '/app/parent/edit-all-students', label: 'Edit all students' },
+ { to: '/app/parent/add-student-form', label: 'Add student form' },
+ { to: '/app/parent/add-emergency-form', label: 'Add emergency form' },
+ { to: '/app/parent/contact', label: 'Contact' },
+ { to: '/app/parent/enroll-classes', label: 'Enroll in classes' },
+ { to: '/app/parent/enroll/success', label: 'Enroll success' },
+ { to: '/app/parent/enroll/failure', label: 'Enroll failure' },
+ { to: '/app/parent/events', label: 'Events' },
+ { to: '/app/parent/invoice-payment', label: 'Invoice payment' },
+ { to: '/app/parent/no-kids-registered', label: 'No kids registered' },
+ { to: '/app/parent/message', label: 'Message' },
+ { to: '/app/parent/payment', label: 'Payments / invoices' },
+ { to: '/app/parent/payment/success', label: 'Payment success' },
+ { to: '/app/parent/register-student', label: 'Register student' },
+ { to: '/app/parent/report-attendance', label: 'Report attendance' },
+ { to: '/app/parent/attendance-reports', label: 'My attendance reports' },
+ { to: '/app/parent/authorized-users', label: 'Authorized users' },
+ { to: '/app/parent/update-profile', label: 'Update profile' },
+ { to: '/app/parent/report-cards', label: 'Report cards' },
+ { to: '/app/parent/scores', label: 'Scores' },
+ { to: '/app/parent/success', label: 'Success message' },
+ { to: '/app/parent/withdraw/success', label: 'Withdraw success' },
+]
+
+export function ParentSectionNav() {
+ const linkClass = ({ isActive }: { isActive: boolean }) =>
+ `d-block px-2 py-1 rounded text-decoration-none small ${
+ isActive ? 'bg-success text-white' : 'text-body'
+ }`
+
+ return (
+
+ )
+}
diff --git a/src/pages/parent/WiredParentScreens.tsx b/src/pages/parent/WiredParentScreens.tsx
new file mode 100644
index 0000000..61c9cd7
--- /dev/null
+++ b/src/pages/parent/WiredParentScreens.tsx
@@ -0,0 +1,437 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import { ParentParityShell } from './ParentParityShell'
+import {
+ fetchAttendanceReportForm,
+ fetchParentEnrollments,
+ fetchParentEventsOverview,
+ fetchParentInvoices,
+ fetchParentProfile,
+ fetchParentRegistrationOverview,
+ submitContactMessage,
+} from '../../api/session'
+import type { ParentEnrollmentStudent, ParentInvoiceRow } from '../../api/types'
+import { useAuth } from '../../auth/AuthProvider'
+
+/** `Views/parent/contact.php` — POST /api/v1/contact */
+export function ParentContactPage() {
+ const { user } = useAuth()
+ const [name, setName] = useState('')
+ const [email, setEmail] = useState('')
+ const [subject, setSubject] = useState('')
+ const [message, setMessage] = useState('')
+ const [status, setStatus] = useState
+
+
+ {legacyCiRoutes?.length ? (
+ + {title} +
+
+ CodeIgniter view:{' '}
+
+ app/Views/parent/{ciViewFile}
+
+
+ Legacy routes:{' '}
+ {legacyCiRoutes.map((r, i) => (
+
+ {i > 0 ? ' · ' : null}
+ {r}
+
+ ))}
+
+
+
+
+
+
+
+ This SPA route mirrors the CI parent view. Implement using the matching handlers in{' '}
+
+ {children}
+ app_laravel/routes/api.php (prefix /api/v1/parents/... where
+ available).
+ + ← Parent dashboard + {' · '} + App home +
+{status}
: null}
+ {error ? {error}
: null}
+