fix teacher, parent and admin pages

src/api/flags.ts

@@ -0,0 +1,148 @@
+/**
+ * Incidents / flags API (parity with CI `flags/*` + JSON routes in Laravel).
+ * Expected base: `/api/v1/administrator/flags/...` with JWT.
+ */
+import { apiFetch } from './http'
+
+export type IncidentFlagRow = {
+  id?: number
+  flag_state?: string
+  student_name?: string
+  grade?: string
+  flag?: string
+  open_description?: string
+  close_description?: string
+  cancel_description?: string
+  flag_datetime?: string | null
+  action_taken?: string | null
+  updated_by_open_name?: string | null
+  updated_by_open?: string | number | null
+  updated_by_closed_name?: string | null
+  updated_by_closed?: string | number | null
+  updated_by_canceled_name?: string | null
+  updated_by_canceled?: string | number | null
+}
+
+export type IncidentLogRow = {
+  flag?: string
+  flag_state?: string
+  flag_datetime?: string | null
+  open_description?: string
+  close_description?: string
+  cancel_description?: string
+  action_taken?: string | null
+}
+
+export type IncidentAnalysisStudent = {
+  student_name?: string
+  grade?: string
+  total?: number
+  open?: number
+  closed?: number
+  canceled?: number
+  last_incident?: string | null
+  logs?: IncidentLogRow[]
+}
+
+export type GradeOption = { id: number; name: string }
+
+function qs(searchParams: URLSearchParams): string {
+  const sy = searchParams.get('school_year')
+  const sem = searchParams.get('semester')
+  const q = new URLSearchParams()
+  if (sy) q.set('school_year', sy)
+  if (sem) q.set('semester', sem)
+  const s = q.toString()
+  return s ? `?${s}` : ''
+}
+
+function unwrapFlags(body: unknown): unknown[] {
+  if (Array.isArray(body)) return body
+  if (body && typeof body === 'object') {
+    const o = body as { flags?: unknown; data?: { flags?: unknown } }
+    const raw = o.flags ?? o.data?.flags
+    if (Array.isArray(raw)) return raw
+  }
+  return []
+}
+
+function unwrapStudents(body: unknown): unknown[] {
+  if (Array.isArray(body)) return body
+  if (body && typeof body === 'object') {
+    const o = body as { students?: unknown; data?: { students?: unknown } }
+    const raw = o.students ?? o.data?.students
+    if (Array.isArray(raw)) return raw
+  }
+  return []
+}
+
+export async function fetchFlagsProcessed(searchParams: URLSearchParams): Promise<IncidentFlagRow[]> {
+  const body = await apiFetch<{ flags?: IncidentFlagRow[]; data?: { flags?: IncidentFlagRow[] } }>(
+    `/api/v1/administrator/flags/processed${qs(searchParams)}`,
+  )
+  return unwrapFlags(body) as IncidentFlagRow[]
+}
+
+export async function fetchFlagsPending(searchParams: URLSearchParams): Promise<IncidentFlagRow[]> {
+  const body = await apiFetch<{ flags?: IncidentFlagRow[]; data?: { flags?: IncidentFlagRow[] } }>(
+    `/api/v1/administrator/flags/pending${qs(searchParams)}`,
+  )
+  return unwrapFlags(body) as IncidentFlagRow[]
+}
+
+export async function fetchIncidentAnalysis(
+  searchParams: URLSearchParams,
+): Promise<IncidentAnalysisStudent[]> {
+  const body = await apiFetch<{
+    students?: IncidentAnalysisStudent[]
+    data?: { students?: IncidentAnalysisStudent[] }
+  }>(`/api/v1/administrator/flags/incident-analysis${qs(searchParams)}`)
+  return unwrapStudents(body) as IncidentAnalysisStudent[]
+}
+
+export async function fetchFlagsFormMeta(): Promise<{ grades: GradeOption[] }> {
+  return apiFetch<{ grades: GradeOption[] }>('/api/v1/administrator/flags/form-meta')
+}
+
+export async function fetchStudentsByGrade(gradeId: number): Promise<Array<{ id: number; name: string }>> {
+  return apiFetch<Array<{ id: number; name: string }>>(
+    `/api/v1/administrator/flags/grades/${gradeId}/students`,
+  )
+}
+
+export async function createIncidentFlag(payload: {
+  grade: number | string
+  student: number | string
+  flag: string
+  description: string
+  school_year?: string
+  semester?: string
+}): Promise<{ message?: string } | unknown> {
+  return apiFetch(`/api/v1/administrator/flags`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function closeIncidentFlag(
+  id: number,
+  body: { state_description: string; action_taken: string },
+): Promise<unknown> {
+  return apiFetch(`/api/v1/administrator/flags/${id}/close`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function cancelIncidentFlag(
+  id: number,
+  body: { state_description: string; action_taken: string },
+): Promise<unknown> {
+  return apiFetch(`/api/v1/administrator/flags/${id}/cancel`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}

src/api/grading.ts

@@ -0,0 +1,154 @@
+/**
+ * Administrator grading API (parity with CI `Views/grading/*.php`).
+ * Base: `/api/v1/administrator/grading/...` with JWT.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/administrator/grading'
+
+export type GradingScoreRow = {
+  id?: number
+  score?: number | string | null
+  comment?: string | null
+}
+
+export type GradingScoreFormPayload = {
+  scoresLocked?: boolean
+  student?: { id?: number; firstname?: string; lastname?: string }
+  classSectionId?: number
+  scores?: GradingScoreRow[]
+}
+
+function q(sp: URLSearchParams): string {
+  const s = sp.toString()
+  return s ? `?${s}` : ''
+}
+
+export async function fetchGradingMain(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/main${q(searchParams)}`)
+}
+
+export async function fetchGradingScoreForm(
+  scoreType: string,
+  studentId: string,
+  classSectionId: string,
+): Promise<GradingScoreFormPayload> {
+  const qs = new URLSearchParams({
+    student_id: studentId,
+    class_section_id: classSectionId,
+  })
+  return apiFetch(`${BASE}/scores/${encodeURIComponent(scoreType)}?${qs}`)
+}
+
+export async function postGradingScoreUpdate(
+  scoreType: string,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/scores/${encodeURIComponent(scoreType)}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchBelowSixty(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/below-sixty${q(searchParams)}`)
+}
+
+export async function fetchBelowSixtyEmailEditor(searchParams: URLSearchParams): Promise<{
+  studentId?: number
+  studentName?: string
+  semester?: string
+  schoolYear?: string
+  subject?: string
+  html?: string
+}> {
+  return apiFetch(`${BASE}/below-sixty/email-editor${q(searchParams)}`)
+}
+
+export async function postBelowSixtyEmail(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/below-sixty/email`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function postBelowSixtyStatus(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/below-sixty/status`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchHomeworkTracking(
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/homework-tracking${q(searchParams)}`)
+}
+
+export async function fetchParticipation(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/participation${q(searchParams)}`)
+}
+
+export async function postParticipation(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/participation`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchPlacementIndex(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/placement-index${q(searchParams)}`)
+}
+
+export async function postPlacementAll(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/placement-all`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchPlacementSection(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/placement${q(searchParams)}`)
+}
+
+export async function postPlacementSection(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/placement`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchPlacementBatch(batchId: string | number): Promise<unknown> {
+  return apiFetch(`${BASE}/placement-batch/${batchId}`)
+}
+
+export async function postPlacementBatch(
+  batchId: string | number,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/placement-batch/${batchId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchScheduleMeetingForm(
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/schedule-meeting${q(searchParams)}`)
+}
+
+export async function postScheduleMeeting(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/schedule-meeting`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}

src/api/http.ts

@@ -37,7 +37,17 @@ export async function apiFetch<T>(
     headers.set('Authorization', `Bearer ${token}`)
   }
 
-  const res = await fetch(apiUrl(path), { ...init, headers })
+  const url = apiUrl(path)
+  let res: Response
+  try {
+    res = await fetch(url, { ...init, headers })
+  } catch (e) {
+    const hint = import.meta.env.DEV
+      ? ' Start the API and ensure Vite can reach it (see vite.config.ts; default proxy is http://192.168.3.100:8000).'
+      : ''
+    const reason = e instanceof Error ? e.message : 'Failed to fetch'
+    throw new ApiHttpError(`Network error: ${reason}.${hint}`, 0, null)
+  }
   const body: unknown = await res.json().catch(() => null)
 
   if (!res.ok) {

src/api/inventory.ts

@@ -0,0 +1,158 @@
+/**
+ * Inventory (parity with CI `Views/inventory/*.php`).
+ * Base: `/api/v1/administrator/inventory` with JWT unless noted.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/administrator/inventory'
+
+function q(searchParams: URLSearchParams): string {
+  const s = searchParams.toString()
+  return s ? `?${s}` : ''
+}
+
+export type InventoryKind = 'book' | 'classroom' | 'kitchen' | 'office'
+
+/** Index list: expect `{ items, categories, userNames }` (names optional). */
+export async function fetchInventoryIndex(
+  kind: InventoryKind,
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/${kind}${q(searchParams)}`)
+}
+
+export async function postInventoryCategory(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/category`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchInventoryItem(itemId: string | number): Promise<{
+  item?: Record<string, unknown>
+  categories?: Record<string, unknown>[]
+  conditionOptions?: Record<string, string>
+  [key: string]: unknown
+}> {
+  return apiFetch(`${BASE}/items/${itemId}`)
+}
+
+/** Create form payload (categories, defaults). */
+export async function fetchInventoryCreateForm(
+  kind: InventoryKind,
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/${kind}/create${q(searchParams)}`)
+}
+
+export async function postInventoryItem(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/items`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function putInventoryItem(
+  itemId: string | number,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/items/${itemId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function deleteInventoryItem(itemId: string | number): Promise<unknown> {
+  return apiFetch(`${BASE}/items/${itemId}`, { method: 'DELETE' })
+}
+
+export async function postInventoryAdjust(
+  itemId: string | number,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/items/${itemId}/adjust`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function postClassroomAudit(
+  itemId: string | number,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/items/${itemId}/classroom-audit`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function fetchInventorySummary(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/summary${q(searchParams)}`)
+}
+
+export async function fetchMovements(searchParams: URLSearchParams): Promise<unknown> {
+  return apiFetch(`${BASE}/movements${q(searchParams)}`)
+}
+
+export async function fetchMovementForm(
+  movementId: string | number | undefined,
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  if (movementId === undefined || movementId === '') {
+    return apiFetch(`${BASE}/movements/create${q(searchParams)}`)
+  }
+  return apiFetch(`${BASE}/movements/${movementId}/edit${q(searchParams)}`)
+}
+
+export async function postMovement(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(`${BASE}/movements`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function putMovement(
+  movementId: string | number,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  return apiFetch(`${BASE}/movements/${movementId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function deleteMovement(movementId: string | number): Promise<unknown> {
+  return apiFetch(`${BASE}/movements/${movementId}`, { method: 'DELETE' })
+}
+
+export async function postMovementsBulkDelete(ids: number[]): Promise<unknown> {
+  return apiFetch(`${BASE}/movements/bulk-delete`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  })
+}
+
+/** Teacher book distribution — JWT; base matches CI `inventory/books/distribute`. */
+const TEACHER_DIST = '/api/v1/teacher/inventory/books/distribute'
+
+export async function fetchTeacherBookDistribute(
+  searchParams: URLSearchParams,
+): Promise<unknown> {
+  return apiFetch(`${TEACHER_DIST}${q(searchParams)}`)
+}
+
+export async function postTeacherBookDistribute(body: Record<string, unknown>): Promise<unknown> {
+  return apiFetch(TEACHER_DIST, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}

src/api/invoices.ts

@@ -0,0 +1,70 @@
+/**
+ * Administrator invoice management & PDF (parity with CI `invoice_payment/*`).
+ */
+import { apiUrl } from '../lib/apiOrigin'
+import { apiFetch, getStoredToken } from './http'
+
+const BASE = '/api/v1/administrator/invoices'
+
+function q(searchParams: URLSearchParams): string {
+  const s = searchParams.toString()
+  return s ? `?${s}` : ''
+}
+
+export type InvoiceManagementRow = {
+  parent_id?: number
+  parent_name?: string
+  enrolledKids?: { name?: string; grade?: string | number }[]
+  invoice_id?: number | null
+  invoice_amount?: number
+  refund_amount?: number
+  invoice_date?: string
+}
+
+export type InvoiceManagementResponse = {
+  ok?: boolean
+  schoolYears?: string[]
+  schoolYear?: string
+  invoices?: InvoiceManagementRow[]
+}
+
+export async function fetchInvoiceManagement(
+  searchParams: URLSearchParams,
+): Promise<InvoiceManagementResponse> {
+  return apiFetch(`${BASE}/management${q(searchParams)}`)
+}
+
+export async function postInvoiceGenerate(parentId: number): Promise<unknown> {
+  return apiFetch(`${BASE}/generate-for-parent`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ parent_id: parentId }),
+  })
+}
+
+/** HTML/JSON preview for browser print view (mirrors FPDF layout). */
+export async function fetchInvoicePreview(invoiceId: string | number): Promise<unknown> {
+  return apiFetch(`${BASE}/${invoiceId}/preview`)
+}
+
+/** Binary PDF with JWT (for tabs that cannot send Authorization). */
+export async function fetchInvoicePdfBlob(invoiceId: string | number): Promise<Blob> {
+  const token = getStoredToken()
+  const res = await fetch(apiUrl(`${BASE}/${invoiceId}/pdf`), {
+    headers: {
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      Accept: 'application/pdf',
+    },
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error(text || `PDF HTTP ${res.status}`)
+  }
+  return res.blob()
+}
+
+export function openPdfBlobInNewTab(blob: Blob): void {
+  const url = URL.createObjectURL(blob)
+  window.open(url, '_blank', 'noopener,noreferrer')
+  setTimeout(() => URL.revokeObjectURL(url), 120_000)
+}

src/api/passwordFlow.ts

@@ -0,0 +1,49 @@
+/**
+ * Password reset / initial set-password flows (legacy CI `user/*` auth views).
+ * Backend expected under `/api/v1/auth/...`.
+ */
+import { apiFetch } from './http'
+
+export async function requestForgotPassword(email: string): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/auth/forgot-password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email: email.trim() }),
+  })
+}
+
+export async function submitPasswordReset(payload: {
+  token: string
+  password: string
+  pass_confirm: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/auth/reset-password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function submitSetPassword(payload: {
+  user_id: number | string
+  token: string
+  password: string
+  password_confirm: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/auth/set-password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function submitAuthorizedUserPassword(
+  userId: number | string,
+  payload: { token: string; password: string; password_confirm: string },
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/auth/set-authorized-user-password/${encodeURIComponent(String(userId))}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}

src/api/paymentManagement.ts

@@ -0,0 +1,347 @@
+/**
+ * Administrator payment / notifications / financial report API.
+ * Paths mirror Laravel `/api/v1/administrator/...` conventions expected by the SPA.
+ */
+import { apiUrl } from '../lib/apiOrigin'
+import { ApiHttpError, apiFetch, getStoredToken } from './http'
+
+export type AdminNotificationRow = {
+  id?: number
+  title?: string
+  message?: string
+  priority?: string | number
+  scheduled_at?: string
+  expires_at?: string
+  deleted_at?: string
+  target_group?: string
+  created_at?: string
+  isExpired?: boolean
+}
+
+export async function fetchNotificationsDeleted(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{ notifications: AdminNotificationRow[] }> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/notifications/deleted${suffix}`)
+}
+
+export async function fetchNotificationsActive(params?: {
+  target_group?: string
+  school_year?: string
+  semester?: string
+}): Promise<{ notifications: AdminNotificationRow[] }> {
+  const qs = new URLSearchParams()
+  if (params?.target_group) qs.set('target_group', params.target_group)
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/notifications/active${suffix}`)
+}
+
+export async function restoreDeletedNotification(
+  id: number | string,
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/notifications/${encodeURIComponent(String(id))}/restore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({}),
+  })
+}
+
+async function postMultipart<T>(path: string, formData: FormData): Promise<T> {
+  const headers = new Headers({ Accept: 'application/json' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { method: 'POST', headers, body: formData })
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    const msg =
+      typeof body === 'object' && body !== null && 'message' in body
+        ? String((body as { message?: unknown }).message ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, body)
+  }
+  return body as T
+}
+
+export type ManualPayPageResponse = {
+  ok?: boolean
+  parent?: Record<string, unknown> | null
+  students?: Array<Record<string, unknown>>
+  payments?: Array<Record<string, unknown>>
+  invoices?: Array<Record<string, unknown>>
+  searchTermUsedInSearch?: string
+  installmentEndYmd?: string
+}
+
+export async function fetchManualPayPage(params: {
+  search_term: string
+  page?: number | string
+}): Promise<ManualPayPageResponse> {
+  const qs = new URLSearchParams()
+  qs.set('search_term', params.search_term)
+  if (params.page != null) qs.set('page', String(params.page))
+  return apiFetch(`/api/v1/administrator/payments/manual-pay?${qs}`)
+}
+
+type ManualPaySuggestRow = { id?: number | string; label?: string; email?: string; phone?: string }
+
+export async function fetchManualPaySuggest(q: string): Promise<ManualPaySuggestRow[]> {
+  const qs = new URLSearchParams({ q })
+  const body = await apiFetch<{ suggestions?: unknown[]; data?: unknown[] }>(
+    `/api/v1/administrator/payments/manual-pay/suggest?${qs}`,
+  )
+  const raw = body.suggestions ?? body.data ?? []
+  return Array.isArray(raw) ? (raw as ManualPaySuggestRow[]) : []
+}
+
+export async function submitManualPayUpdate(formData: FormData): Promise<{ ok?: boolean; message?: string }> {
+  return postMultipart('/api/v1/administrator/payments/manual-pay/update', formData)
+}
+
+export async function submitManualPayEdit(formData: FormData): Promise<{ ok?: boolean; message?: string }> {
+  return postMultipart('/api/v1/administrator/payments/manual-pay/edit', formData)
+}
+
+/** Authenticated URL for embedding or downloading check/card files (legacy CI: serveCheckFile). */
+export function manualPayCheckFileUrl(tokenOrKey: string, mode: 'inline' | 'download'): string {
+  const enc = encodeURIComponent(tokenOrKey)
+  return `/api/v1/administrator/payments/check-file/${enc}/${mode}`
+}
+
+export async function fetchAuthenticatedBlobUrl(apiPath: string): Promise<string> {
+  const headers = new Headers({ Accept: '*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(apiPath), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  return URL.createObjectURL(blob)
+}
+
+export type PaymentNotificationLogRow = Record<string, unknown>
+
+export async function fetchPaymentNotificationLogs(params?: {
+  from?: string
+  to?: string
+  type?: string
+  school_year?: string
+  semester?: string
+}): Promise<{
+  logs: PaymentNotificationLogRow[]
+  parentsById?: Record<string, string>
+  filters?: { from?: string; to?: string; type?: string }
+}> {
+  const qs = new URLSearchParams()
+  if (params?.from) qs.set('from', params.from)
+  if (params?.to) qs.set('to', params.to)
+  if (params?.type) qs.set('type', params.type)
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/payments/notification-logs${suffix}`)
+}
+
+export type UnpaidParentRow = Record<string, unknown>
+
+export async function fetchUnpaidParents(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{ rows: UnpaidParentRow[]; school_year?: string; schoolYears?: string[] }> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/payments/unpaid-parents${suffix}`)
+}
+
+export async function sendPaymentReminders(payload: {
+  school_year: string
+  parent_id?: number | string
+  return_to?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/administrator/payments/notifications/send', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export type ParentPaymentsModalRow = Record<string, unknown>
+
+export async function fetchParentPaymentsForModal(
+  parentId: number | string,
+): Promise<{ payments: ParentPaymentsModalRow[]; parentName?: string }> {
+  return apiFetch(
+    `/api/v1/administrator/payments/parent/${encodeURIComponent(String(parentId))}/payments-list`,
+  )
+}
+
+export async function applyDiscountByCodeForStudent(payload: {
+  student_id: number | string
+  voucher_code: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/discounts/apply-by-code', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export type ExtraChargeRow = Record<string, unknown>
+
+export async function fetchExtraChargesPage(params?: {
+  school_year?: string
+  semester?: string
+  page?: number | string
+  parent_id?: number | string
+}): Promise<{
+  rows: ExtraChargeRow[]
+  schoolYear?: string
+  schoolYears?: string[]
+  semester?: string
+  parents?: Array<{ id: number; firstname?: string; lastname?: string }>
+  pager?: { current_page?: number; last_page?: number }
+}> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  if (params?.page != null) qs.set('page', String(params.page))
+  if (params?.parent_id != null) qs.set('parent_id', String(params.parent_id))
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/charges${suffix}`)
+}
+
+export async function fetchChargeInvoicesForParent(parentId: number | string): Promise<
+  Array<{ id?: number; invoice_number?: string }>
+> {
+  const body = await apiFetch<{ invoices?: unknown[] }>(
+    `/api/v1/administrator/charges/invoices-for-parent?parent_id=${encodeURIComponent(String(parentId))}`,
+  )
+  const raw = body.invoices
+  return Array.isArray(raw) ? (raw as Array<{ id?: number; invoice_number?: string }>) : []
+}
+
+export async function submitExtraCharge(formData: FormData): Promise<{ ok?: boolean; message?: string }> {
+  return postMultipart('/api/v1/administrator/charges', formData)
+}
+
+export type FinancialDetailedJson = {
+  ok?: boolean
+  invoices?: Array<Record<string, unknown>>
+  payments?: Array<Record<string, unknown>>
+  refunds?: Array<Record<string, unknown>>
+  discounts?: Array<Record<string, unknown>>
+  paymentBreakdown?: Record<string, { cash?: number; credit?: number; check?: number }>
+  paymentTotals?: {
+    total_cash?: number
+    total_credit?: number
+    total_check?: number
+    total_all?: number
+  }
+  expenses?: Array<{ category?: string; total_amount?: number }>
+  reimbursements?: Array<{ status?: string; total_amount?: number }>
+  eventFeesTotal?: number
+}
+
+export async function fetchFinancialReportDetailed(params: {
+  school_year?: string
+  date_from?: string
+  date_to?: string
+}): Promise<FinancialDetailedJson> {
+  const qs = new URLSearchParams()
+  if (params.school_year) qs.set('school_year', params.school_year)
+  if (params.date_from) qs.set('date_from', params.date_from)
+  if (params.date_to) qs.set('date_to', params.date_to)
+  qs.set('format', 'json')
+  return apiFetch(`/api/v1/administrator/reports/financial-detailed?${qs}`)
+}
+
+export async function downloadFinancialReportCsv(params: {
+  school_year?: string
+  date_from?: string
+  date_to?: string
+}): Promise<void> {
+  const qs = new URLSearchParams()
+  if (params.school_year) qs.set('school_year', params.school_year)
+  if (params.date_from) qs.set('date_from', params.date_from)
+  if (params.date_to) qs.set('date_to', params.date_to)
+  const path = `/api/v1/administrator/reports/financial-detailed.csv?${qs}`
+  const headers = new Headers()
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'financial-report.csv'
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+export type FinancialSummaryJson = {
+  ok?: boolean
+  schoolYear?: string
+  totalCharges?: number
+  totalEventFees?: number
+  totalExtraCharges?: number
+  totalDiscounts?: number
+  totalRefunds?: number
+  totalExpenses?: number
+  totalReimbursements?: number
+  donationToSchool?: number
+  netAmount?: number
+  amountCollected?: number
+  totalUnpaid?: number
+  totalPaid?: number
+}
+
+export async function fetchFinancialReportSummary(params: {
+  school_year?: string
+}): Promise<FinancialSummaryJson> {
+  const qs = new URLSearchParams()
+  if (params.school_year) qs.set('school_year', params.school_year)
+  qs.set('format', 'json')
+  return apiFetch(`/api/v1/administrator/reports/financial-summary?${qs}`)
+}
+
+export async function downloadFinancialSummaryPdf(params: { school_year?: string }): Promise<void> {
+  const qs = new URLSearchParams()
+  if (params.school_year) qs.set('school_year', params.school_year)
+  const path = `/api/v1/administrator/reports/financial-summary.pdf?${qs}`
+  const headers = new Headers()
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'financial-summary.pdf'
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+export type PaypalRedirectContext = {
+  parentName?: string
+  totalAmount?: string | number
+  schoolId?: string | number
+  currency?: string
+  invoiceId?: string | number
+}
+
+export async function fetchPaypalPaymentContext(params: {
+  invoice_id?: string
+}): Promise<PaypalRedirectContext> {
+  const qs = new URLSearchParams()
+  if (params.invoice_id) qs.set('invoice_id', params.invoice_id)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/parent/payment/paypal-context${suffix}`)
+}

src/api/printRequests.ts

@@ -0,0 +1,91 @@
+/**
+ * Teacher / admin print copy requests (legacy CI: print-requests/*).
+ */
+import { apiUrl } from '../lib/apiOrigin'
+import { ApiHttpError, apiFetch, getStoredToken } from './http'
+
+export type PrintRequestRow = Record<string, unknown>
+
+export type TeacherPrintRequestsContext = {
+  sundays?: string[]
+  times?: string[]
+  class_id?: number | null
+  class_section_id?: number | null
+  class_section_name?: string | null
+  print_requests?: PrintRequestRow[]
+}
+
+export async function fetchTeacherPrintRequestsContext(): Promise<TeacherPrintRequestsContext> {
+  return apiFetch('/api/v1/teacher/print-requests/context')
+}
+
+async function multipartRequest<T>(path: string, formData: FormData, method = 'POST'): Promise<T> {
+  const headers = new Headers({ Accept: 'application/json' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { method, headers, body: formData })
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    const msg =
+      typeof body === 'object' && body !== null && 'message' in body
+        ? String((body as { message?: unknown }).message ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, body)
+  }
+  return body as T
+}
+
+export async function createPrintRequest(formData: FormData): Promise<{ ok?: boolean; message?: string }> {
+  return multipartRequest('/api/v1/print-requests', formData)
+}
+
+export async function createCopyRequest(
+  formData: FormData,
+): Promise<{ ok?: boolean; message?: string }> {
+  return multipartRequest('/api/v1/print-requests/hand-copy', formData)
+}
+
+export async function updatePrintRequest(
+  requestId: number | string,
+  formData: FormData,
+): Promise<{ ok?: boolean; message?: string }> {
+  formData.set('_method', 'PATCH')
+  return multipartRequest(`/api/v1/print-requests/${encodeURIComponent(String(requestId))}`, formData)
+}
+
+export async function deletePrintRequest(requestId: number | string): Promise<{ ok?: boolean }> {
+  return apiFetch(`/api/v1/print-requests/${encodeURIComponent(String(requestId))}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchAdminPrintRequests(): Promise<{ print_requests: PrintRequestRow[] }> {
+  return apiFetch('/api/v1/administrator/print-requests')
+}
+
+export async function adminUpdatePrintRequestStatus(
+  requestId: number | string,
+  payload: { status: string; admin_id?: number | string },
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/administrator/print-requests/${encodeURIComponent(String(requestId))}/status`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+/** Authenticated download URL for uploaded job files (opened in new tab). */
+export function printRequestFileUrl(requestId: number | string): string {
+  return `/api/v1/print-requests/${encodeURIComponent(String(requestId))}/file`
+}
+
+export async function openPrintRequestFile(requestId: number | string): Promise<void> {
+  const token = getStoredToken()
+  const headers = new Headers({ Accept: '*/*' })
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(printRequestFileUrl(requestId)), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  const url = URL.createObjectURL(blob)
+  window.open(url, '_blank', 'noopener')
+}

src/api/printables.ts

@@ -0,0 +1,250 @@
+/**
+ * Stickers, badges, report cards (legacy CI printables_reports/*).
+ */
+import { apiUrl } from '../lib/apiOrigin'
+import { ApiHttpError, apiFetch, getStoredToken } from './http'
+
+export type ClassOption = { class_section_id?: number; id?: number; class_section_name?: string }
+
+export type StudentOption = {
+  id: number | string
+  firstname?: string
+  lastname?: string
+  registration_grade?: string
+  gender?: string
+}
+
+export async function fetchStickerFormOptions(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{
+  classes?: ClassOption[]
+  students?: StudentOption[]
+}> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/printables/stickers/form-options${suffix}`)
+}
+
+export async function fetchStudentsByClass(classId: number | string): Promise<StudentOption[]> {
+  const body = await apiFetch<{ students?: StudentOption[] } | StudentOption[]>(
+    `/api/v1/administrator/students/by-class/${encodeURIComponent(String(classId))}`,
+  )
+  if (Array.isArray(body)) return body
+  return body.students ?? []
+}
+
+export async function postStickerGenerate(formData: FormData): Promise<Blob> {
+  const headers = new Headers({ Accept: 'application/pdf,*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl('/api/v1/administrator/printables/stickers/generate'), {
+    method: 'POST',
+    headers,
+    body: formData,
+  })
+  if (!res.ok) {
+    const errBody: unknown = await res.json().catch(() => null)
+    const msg =
+      typeof errBody === 'object' && errBody !== null && 'message' in errBody
+        ? String((errBody as { message?: unknown }).message ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, errBody)
+  }
+  return res.blob()
+}
+
+export async function postBadgeGenerate(formData: FormData): Promise<Blob> {
+  const headers = new Headers({ Accept: 'application/pdf,*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl('/api/v1/administrator/printables/badges/generate'), {
+    method: 'POST',
+    headers,
+    body: formData,
+  })
+  if (!res.ok) {
+    const errBody: unknown = await res.json().catch(() => null)
+    const msg =
+      typeof errBody === 'object' && errBody !== null && 'message' in errBody
+        ? String((errBody as { message?: unknown }).message ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, errBody)
+  }
+  return res.blob()
+}
+
+export type StickerPreviewCounts = {
+  students?: Array<{ student_id: number | string; primary_count?: number }>
+  totals?: { stickers?: number; students?: number }
+}
+
+export async function fetchStickerPreviewCounts(classId?: number | string | null): Promise<StickerPreviewCounts> {
+  const qs = new URLSearchParams()
+  if (classId) qs.set('class_id', String(classId))
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<
+    StickerPreviewCounts & { status?: string; data?: StickerPreviewCounts }
+  >(`/api/v1/administrator/printables/stickers/preview${suffix}`)
+  if (body.data) return body.data
+  return body
+}
+
+export type BadgeUserRow = Record<string, unknown>
+
+export async function fetchBadgeFormOptions(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{
+  selectedYear?: string
+  users?: BadgeUserRow[]
+}> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/printables/badges/form-options${suffix}`)
+}
+
+export async function fetchBadgePrintStatus(params: {
+  user_ids: (number | string)[]
+  school_year?: string
+}): Promise<{
+  ok?: boolean
+  data?: Record<string, { count?: number }>
+  csrf_token?: string
+  csrf_hash?: string
+}> {
+  const qs = new URLSearchParams()
+  for (const id of params.user_ids) qs.append('user_ids[]', String(id))
+  if (params.school_year) qs.set('school_year', params.school_year)
+  return apiFetch(`/api/v1/administrator/printables/badges/status?${qs}`)
+}
+
+export type ReportCardMeta = {
+  ok?: boolean
+  schoolYears?: string[]
+  semesters?: string[]
+  selectedYear?: string
+  selectedSemester?: string
+  students?: Array<{ id: number | string; firstname?: string; lastname?: string; class_section_name?: string }>
+  classSections?: Array<{ class_section_id?: number; id?: number; class_section_name?: string }>
+}
+
+export async function fetchReportCardMeta(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<ReportCardMeta> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/printables/report-card/meta${suffix}`)
+}
+
+export async function fetchReportCardAck(params: {
+  student_id: number | string
+  school_year?: string
+  semester?: string
+}): Promise<{ ok?: boolean; viewed_at?: string; signed_at?: string; signed_name?: string }> {
+  const qs = new URLSearchParams()
+  qs.set('student_id', String(params.student_id))
+  if (params.school_year) qs.set('school_year', params.school_year)
+  if (params.semester) qs.set('semester', params.semester ?? '')
+  return apiFetch(`/api/v1/administrator/printables/report-card/ack?${qs}`)
+}
+
+export async function fetchReportCardCompleteness(params: {
+  class_section_id: number | string
+  school_year?: string
+  semester?: string
+}): Promise<{
+  ok?: boolean
+  students?: Array<Record<string, unknown>>
+  summary?: Record<string, unknown>
+  used_fallback?: boolean
+}> {
+  const qs = new URLSearchParams()
+  qs.set('class_section_id', String(params.class_section_id))
+  if (params.school_year) qs.set('school_year', params.school_year ?? '')
+  if (params.semester) qs.set('semester', params.semester ?? '')
+  return apiFetch(`/api/v1/administrator/printables/report-card/completeness?${qs}`)
+}
+
+/** Build absolute API URL for iframe / window.open (report PDF HTML). */
+export function reportCardStudentUrl(
+  studentId: number | string,
+  opts: { school_year: string; semester?: string; download?: boolean; report_date?: string },
+): string {
+  const qs = new URLSearchParams()
+  qs.set('school_year', opts.school_year)
+  if (opts.semester) qs.set('semester', opts.semester)
+  if (opts.download) qs.set('download', '1')
+  if (opts.report_date) qs.set('report_date', opts.report_date)
+  qs.set('cb', String(Date.now()))
+  return apiUrl(`/api/v1/reports/report-cards/students/${encodeURIComponent(String(studentId))}?${qs}`)
+}
+
+export function reportCardClassUrl(
+  classSectionId: number | string,
+  opts: { school_year: string; semester?: string; download?: boolean; report_date?: string },
+): string {
+  const qs = new URLSearchParams()
+  qs.set('school_year', opts.school_year)
+  if (opts.semester) qs.set('semester', opts.semester)
+  if (opts.download) qs.set('download', '1')
+  if (opts.report_date) qs.set('report_date', opts.report_date)
+  qs.set('cb', String(Date.now()))
+  return apiUrl(`/api/v1/reports/report-cards/classes/${encodeURIComponent(String(classSectionId))}?${qs}`)
+}
+
+/** HTML document for iframe preview (Bearer auth; unlike raw iframe src). */
+export async function fetchReportCardStudentHtml(
+  studentId: number | string,
+  opts: { school_year: string; semester?: string; report_date?: string },
+): Promise<string> {
+  const qs = new URLSearchParams()
+  qs.set('school_year', opts.school_year)
+  if (opts.semester) qs.set('semester', opts.semester)
+  if (opts.report_date) qs.set('report_date', opts.report_date)
+  qs.set('cb', String(Date.now()))
+  const headers = new Headers({ Accept: 'text/html' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const path = `/api/v1/reports/report-cards/students/${encodeURIComponent(String(studentId))}?${qs}`
+  const res = await fetch(apiUrl(path), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  return res.text()
+}
+
+export async function fetchReportCardClassHtml(
+  classSectionId: number | string,
+  opts: { school_year: string; semester?: string; report_date?: string },
+): Promise<string> {
+  const qs = new URLSearchParams()
+  qs.set('school_year', opts.school_year)
+  if (opts.semester) qs.set('semester', opts.semester)
+  if (opts.report_date) qs.set('report_date', opts.report_date)
+  qs.set('cb', String(Date.now()))
+  const headers = new Headers({ Accept: 'text/html' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const path = `/api/v1/reports/report-cards/classes/${encodeURIComponent(String(classSectionId))}?${qs}`
+  const res = await fetch(apiUrl(path), { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  return res.text()
+}
+
+/** Opens PDF download in new tab (authenticated GET). */
+export async function openReportCardDownload(url: string): Promise<void> {
+  const headers = new Headers({ Accept: 'application/pdf,*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(url, { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  const r = URL.createObjectURL(blob)
+  window.open(r, '_blank', 'noopener')
+}

src/api/refunds.ts

@@ -0,0 +1,47 @@
+/**
+ * Admin refunds list (legacy CI `refunds/list.php`).
+ * Laravel: `GET /api/v1/administrator/refunds/list` with JWT.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/administrator/refunds'
+
+export type RefundListRow = Record<string, unknown>
+
+export type RefundsListResponse = {
+  refunds: RefundListRow[]
+  school_year?: string | null
+  semester?: string | null
+  school_years?: string[]
+}
+
+function normalizeListPayload(raw: unknown): RefundsListResponse {
+  const body = raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : {}
+  const inner =
+    'data' in body && body.data && typeof body.data === 'object'
+      ? (body.data as Record<string, unknown>)
+      : body
+  const list = inner.refunds ?? inner.rows ?? []
+  return {
+    refunds: Array.isArray(list) ? (list as RefundListRow[]) : [],
+    school_year: inner.school_year != null ? String(inner.school_year) : undefined,
+    semester: inner.semester != null ? String(inner.semester) : undefined,
+    school_years: Array.isArray(inner.school_years)
+      ? (inner.school_years as string[])
+      : undefined,
+  }
+}
+
+export async function fetchRefundsList(params?: {
+  school_year?: string
+  semester?: string
+  page?: number | string
+}): Promise<RefundsListResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  if (params?.page != null) qs.set('page', String(params.page))
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<unknown>(`${BASE}/list${suffix}`)
+  return normalizeListPayload(body)
+}

src/api/reimbursements.ts

@@ -0,0 +1,194 @@
+/**
+ * Admin reimbursements (legacy CI reimbursements/*).
+ * Backend is expected under `/api/v1/administrator/reimbursements`.
+ */
+import { apiUrl } from '../lib/apiOrigin'
+import { ApiHttpError, apiFetch, getStoredToken } from './http'
+
+const BASE = '/api/v1/administrator/reimbursements'
+
+export type ReimbursementUserOption = { id?: number | string; firstname?: string; lastname?: string }
+
+export type BatchSummaryRow = Record<string, unknown>
+export type BatchDetailPayload = {
+  items?: Array<Record<string, unknown>>
+  checks?: Array<Record<string, unknown>>
+}
+
+export type ReimbursementsIndexResponse = {
+  schoolYears?: string[]
+  users?: ReimbursementUserOption[]
+  batchSummaries?: BatchSummaryRow[]
+  batchDetails?: Record<string, BatchDetailPayload>
+  donationBatch?: BatchSummaryRow | null
+  donationDetails?: BatchDetailPayload
+  batchAttachments?: Record<string, { receipts?: unknown[]; checks?: unknown[] }>
+}
+
+export async function fetchReimbursementsIndex(params?: {
+  semester?: string
+  status?: string
+  school_year?: string
+  user_id?: string
+}): Promise<ReimbursementsIndexResponse> {
+  const qs = new URLSearchParams()
+  if (params?.semester) qs.set('semester', params.semester)
+  if (params?.status) qs.set('status', params.status)
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.user_id) qs.set('user_id', params.user_id)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`${BASE}${suffix}`)
+}
+
+/** Opens CSV download in a new tab (authenticated GET → blob URL). */
+export async function downloadReimbursementsExport(params?: {
+  semester?: string
+  status?: string
+  school_year?: string
+  user_id?: string
+  type?: string
+}): Promise<void> {
+  const qs = new URLSearchParams()
+  if (params?.semester) qs.set('semester', params.semester)
+  if (params?.status) qs.set('status', params.status)
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.user_id) qs.set('user_id', params.user_id)
+  if (params?.type) qs.set('type', params.type)
+  const url = apiUrl(`${BASE}/export?${qs}`)
+  const headers = new Headers({ Accept: 'text/csv,*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(url, { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  window.open(URL.createObjectURL(blob), '_blank', 'noopener')
+}
+
+export async function downloadBatchCsv(batchId: number | string): Promise<void> {
+  const qs = new URLSearchParams({ batch_id: String(batchId) })
+  const url = apiUrl(`${BASE}/batch/export?${qs}`)
+  const headers = new Headers({ Accept: 'text/csv,*/*' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(url, { headers })
+  if (!res.ok) throw new ApiHttpError(`HTTP ${res.status}`, res.status, null)
+  const blob = await res.blob()
+  window.open(URL.createObjectURL(blob), '_blank', 'noopener')
+}
+
+export async function postBatchEmail(formData: FormData): Promise<{ success?: boolean; message?: string }> {
+  const headers = new Headers({ Accept: 'application/json' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(`${BASE}/batch/send`), { method: 'POST', headers, body: formData })
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    const msg =
+      typeof body === 'object' && body !== null && 'error' in body
+        ? String((body as { error?: unknown }).error ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, body)
+  }
+  return body as { success?: boolean; message?: string }
+}
+
+export type UnderProcessingWorkspace = {
+  pendingItems?: Array<Record<string, unknown>>
+  itemsPayload?: Array<Record<string, unknown>>
+  existingBatches?: Array<Record<string, unknown>>
+  adminUsers?: Array<{ id?: number; firstname?: string; lastname?: string }>
+}
+
+export async function fetchUnderProcessingWorkspace(): Promise<UnderProcessingWorkspace> {
+  return apiFetch(`${BASE}/under-processing`)
+}
+
+export async function createReimbursementBatch(): Promise<{
+  success?: boolean
+  batch_id?: number
+  sequence?: number
+  yearly_number?: number
+  csrf_hash?: string
+}> {
+  const fd = new FormData()
+  return postFormExpectJson(`${BASE}/batch/create`, fd)
+}
+
+async function postFormExpectJson(path: string, form: FormData): Promise<{ success?: boolean; error?: string; csrf_hash?: string; reimbursement_id?: number } & Record<string, unknown>> {
+  const headers = new Headers({ Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { method: 'POST', headers, body: form })
+  const body: unknown = await res.json().catch(() => ({}))
+  const data = body as Record<string, unknown>
+  if (!res.ok) {
+    throw new ApiHttpError(String(data.error ?? `HTTP ${res.status}`), res.status, body)
+  }
+  if (data && typeof data === 'object' && 'success' in data && data.success === false) {
+    throw new ApiHttpError(String(data.error ?? 'Request failed'), res.status, body)
+  }
+  return data as { success?: boolean; error?: string; csrf_hash?: string; reimbursement_id?: number }
+}
+
+export function postBatchUpdate(form: FormData) {
+  return postFormExpectJson(`${BASE}/batch/update`, form)
+}
+
+export function postBatchLock(form: FormData) {
+  return postFormExpectJson(`${BASE}/batch/lock`, form)
+}
+
+export function postAdminCheckUpload(form: FormData) {
+  return postFormExpectJson(`${BASE}/batch/admin-file/upload`, form)
+}
+
+export function postMarkDonation(form: FormData) {
+  return postFormExpectJson(`${BASE}/mark-donation`, form)
+}
+
+export type ReimbursementFormContext = {
+  users?: ReimbursementUserOption[]
+  expense_id?: number | string
+  prefill_amount?: number | string
+}
+
+export async function fetchReimbursementCreateContext(search: {
+  expense_id?: string
+}): Promise<ReimbursementFormContext> {
+  const qs = new URLSearchParams()
+  if (search.expense_id) qs.set('expense_id', search.expense_id)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`${BASE}/create-context${suffix}`)
+}
+
+async function postMultipart(path: string, formData: FormData): Promise<{ ok?: boolean; message?: string }> {
+  const headers = new Headers({ Accept: 'application/json' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl(path), { method: 'POST', headers, body: formData })
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    const msg =
+      typeof body === 'object' && body !== null && 'message' in body
+        ? String((body as { message?: unknown }).message ?? '')
+        : ''
+    throw new ApiHttpError(msg || `HTTP ${res.status}`, res.status, body)
+  }
+  return (body ?? {}) as { ok?: boolean; message?: string }
+}
+
+export async function createReimbursement(formData: FormData) {
+  return postMultipart(`${BASE}`, formData)
+}
+
+export async function fetchReimbursementForEdit(id: number | string): Promise<{
+  reimbursement?: Record<string, unknown>
+  users?: ReimbursementUserOption[]
+  receipt_url?: string | null
+}> {
+  return apiFetch(`${BASE}/${encodeURIComponent(String(id))}/edit-data`)
+}
+
+export async function updateReimbursement(id: number | string, formData: FormData) {
+  return postMultipart(`${BASE}/${encodeURIComponent(String(id))}`, formData)
+}

src/api/reportsCombined.ts

@@ -0,0 +1,50 @@
+import { apiFetch } from './http'
+import type { ApiEnvelope } from './types'
+
+/**
+ * Laravel `GET /api/v1/reports/combined` with JWT Bearer auth.
+ * If your `routes/api.php` registers this elsewhere, change the path here.
+ */
+export type CombinedReportPayload = {
+  title?: string
+  subtitle?: string
+  html?: string
+  message?: string
+  columns?: string[]
+  rows?: Array<Record<string, unknown>>
+  sections?: Array<{
+    title?: string
+    heading?: string
+    rows?: Array<Record<string, unknown>>
+    columns?: string[]
+  }>
+  [key: string]: unknown
+}
+
+export function unwrapCombinedReport(raw: unknown): CombinedReportPayload | null {
+  if (raw == null || typeof raw !== 'object') return null
+  const o = raw as ApiEnvelope<CombinedReportPayload> & CombinedReportPayload
+  if (o.data != null && typeof o.data === 'object') {
+    return o.data as CombinedReportPayload
+  }
+  return raw as CombinedReportPayload
+}
+
+export async function fetchCombinedReport(params?: {
+  school_year?: string | null
+  semester?: string | null
+  student_id?: string | number | null
+  class_section_id?: string | number | null
+}): Promise<unknown> {
+  const q = new URLSearchParams()
+  if (params?.school_year) q.set('school_year', String(params.school_year))
+  if (params?.semester) q.set('semester', String(params.semester))
+  if (params?.student_id != null && String(params.student_id).trim() !== '') {
+    q.set('student_id', String(params.student_id))
+  }
+  if (params?.class_section_id != null && String(params.class_section_id).trim() !== '') {
+    q.set('class_section_id', String(params.class_section_id))
+  }
+  const qs = q.size > 0 ? `?${q.toString()}` : ''
+  return apiFetch<unknown>(`/api/v1/reports/combined${qs}`)
+}

src/api/rfid.ts

@@ -0,0 +1,17 @@
+import { apiFetch } from './http'
+
+/**
+ * Laravel `GET /api/v1/rfid/coming-soon` with JWT Bearer auth.
+ * Adjust the path if your `routes/api.php` uses a different segment (e.g. under `administrator`).
+ */
+export type RfidComingSoonPayload = {
+  title?: string
+  subtitle?: string
+  message?: string
+  /** Extra keys from the API are ignored by the UI unless added explicitly. */
+  [key: string]: unknown
+}
+
+export async function fetchRfidComingSoon(): Promise<RfidComingSoonPayload> {
+  return apiFetch<RfidComingSoonPayload>('/api/v1/rfid/coming-soon')
+}

src/api/rolePermission.ts

@@ -0,0 +1,261 @@
+/**
+ * Roles & permissions admin (legacy CI rolepermission/*).
+ * Expected under `/api/v1/role-permission`.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/role-permission'
+
+function unwrapData<T>(body: T): T {
+  if (!body || typeof body !== 'object') return body
+  const maybeEnvelope = body as { data?: unknown }
+  return (maybeEnvelope.data as T | undefined) ?? body
+}
+
+export type RoleRow = {
+  id?: number | string
+  name?: string
+  slug?: string
+  description?: string
+  dashboard_route?: string
+  priority?: number
+  is_active?: number | string | boolean
+  user_count?: number
+}
+
+export type PermissionRow = {
+  id?: number | string
+  name?: string
+  description?: string
+  created_at?: string
+  updated_at?: string
+}
+
+export async function fetchRolesList(): Promise<{ roles?: RoleRow[] }> {
+  const body = await apiFetch<{ roles?: RoleRow[] } | { data?: { roles?: RoleRow[] } }>(`${BASE}/roles`)
+  return unwrapData(body)
+}
+
+export async function fetchPermissionsList(): Promise<{ permissions?: PermissionRow[] }> {
+  const body = await apiFetch<
+    { permissions?: PermissionRow[] } | { data?: { permissions?: PermissionRow[] } }
+  >(`${BASE}/permissions`)
+  return unwrapData(body)
+}
+
+export type AssignUserRow = {
+  id?: number | string
+  account_id?: string
+  firstname?: string
+  lastname?: string
+  email?: string
+  roles?: string[]
+}
+
+export async function fetchUsersForAssign(params?: {
+  school_year?: string
+  semester?: string
+  page?: number
+  per_page?: number
+}): Promise<{ users?: AssignUserRow[]; meta?: { current_page?: number; last_page?: number; total?: number; per_page?: number } }> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  qs.set('per_page', String(params?.per_page ?? 200))
+  if (params?.page) qs.set('page', String(params.page))
+  qs.set('sort_by', 'lastname')
+  qs.set('sort_dir', 'asc')
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<
+    | {
+        users?: AssignUserRow[]
+        meta?: { current_page?: number; last_page?: number; total?: number; per_page?: number }
+      }
+    | {
+        data?: {
+          users?: AssignUserRow[]
+          meta?: { current_page?: number; last_page?: number; total?: number; per_page?: number }
+        }
+      }
+  >(
+    `${BASE}/users${suffix}`,
+  )
+  return unwrapData(body)
+}
+
+export async function fetchAllUsersForAssign(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{ users: AssignUserRow[] }> {
+  const usersById = new Map<string, AssignUserRow>()
+  let page = 1
+  let lastPage = 1
+
+  do {
+    const response = await fetchUsersForAssign({
+      school_year: params?.school_year,
+      semester: params?.semester,
+      page,
+      per_page: 200,
+    })
+    for (const user of response.users ?? []) {
+      const key = String(user.id ?? '').trim()
+      if (key === '') {
+        continue
+      }
+      if (!usersById.has(key)) {
+        usersById.set(key, user)
+      }
+    }
+    lastPage = Number(response.meta?.last_page ?? page)
+    page += 1
+  } while (page <= lastPage)
+
+  return { users: [...usersById.values()] }
+}
+
+export async function saveUserRoles(payload: {
+  user_id: number | string
+  role_ids: (number | string)[]
+}): Promise<{ ok?: boolean; message?: string }> {
+  const userId = encodeURIComponent(String(payload.user_id))
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/users/${userId}/roles`,
+    {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ role_ids: payload.role_ids }),
+    },
+  )
+  return unwrapData(body)
+}
+
+export async function createRole(payload: Record<string, unknown>): Promise<{ ok?: boolean; message?: string }> {
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/roles`,
+    {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+  return unwrapData(body)
+}
+
+export async function updateRole(
+  roleId: number | string,
+  payload: Record<string, unknown>,
+): Promise<{ ok?: boolean; message?: string }> {
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/roles/${encodeURIComponent(String(roleId))}`,
+    {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+  return unwrapData(body)
+}
+
+export async function deleteRole(roleId: number | string): Promise<{ ok?: boolean }> {
+  const body = await apiFetch<{ ok?: boolean } | { data?: { ok?: boolean } }>(
+    `${BASE}/roles/${encodeURIComponent(String(roleId))}`,
+    { method: 'DELETE' },
+  )
+  return unwrapData(body)
+}
+
+export async function fetchRole(roleId: number | string): Promise<{ role?: RoleRow }> {
+  const body = await apiFetch<{ role?: RoleRow } | { data?: { role?: RoleRow } }>(
+    `${BASE}/roles/${encodeURIComponent(String(roleId))}`,
+  )
+  return unwrapData(body)
+}
+
+export async function createPermission(payload: {
+  name: string
+  description?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/permissions`,
+    {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+  return unwrapData(body)
+}
+
+export async function fetchPermission(
+  permissionId: number | string,
+): Promise<{ permission?: PermissionRow }> {
+  const body = await apiFetch<{ permission?: PermissionRow } | { data?: { permission?: PermissionRow } }>(
+    `${BASE}/permissions/${encodeURIComponent(String(permissionId))}`,
+  )
+  return unwrapData(body)
+}
+
+export async function updatePermission(
+  permissionId: number | string,
+  payload: { name: string; description?: string },
+): Promise<{ ok?: boolean; message?: string }> {
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/permissions/${encodeURIComponent(String(permissionId))}`,
+    {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+  return unwrapData(body)
+}
+
+export type PermissionMatrixRow = {
+  id?: number | string
+  name?: string
+}
+
+export type ExistingPermissionFlags = {
+  can_create?: boolean
+  can_read?: boolean
+  can_update?: boolean
+  can_delete?: boolean
+}
+
+export async function fetchRolePermissionMatrix(roleId: number | string): Promise<{
+  roleId?: number | string
+  permissions?: PermissionMatrixRow[]
+  existing?: Record<string, ExistingPermissionFlags>
+}> {
+  const body = await apiFetch<
+    | {
+        roleId?: number | string
+        permissions?: PermissionMatrixRow[]
+        existing?: Record<string, ExistingPermissionFlags>
+      }
+    | {
+        data?: {
+          roleId?: number | string
+          permissions?: PermissionMatrixRow[]
+          existing?: Record<string, ExistingPermissionFlags>
+        }
+      }
+  >(`${BASE}/roles/${encodeURIComponent(String(roleId))}/permissions`)
+  return unwrapData(body)
+}
+
+export async function saveRolePermissionMatrix(
+  roleId: number | string,
+  payload: Record<string, { create?: boolean; read?: boolean; update?: boolean; delete?: boolean }>,
+): Promise<{ ok?: boolean; message?: string }> {
+  const body = await apiFetch<{ ok?: boolean; message?: string } | { data?: { ok?: boolean; message?: string } }>(
+    `${BASE}/roles/${encodeURIComponent(String(roleId))}/permissions`,
+    {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ permissions: payload }),
+    },
+  )
+  return unwrapData(body)
+}

src/api/scoreAnalysis.ts

@@ -0,0 +1,24 @@
+/**
+ * Score analysis / prediction (legacy CI score_analysis/score_prediction).
+ */
+import { apiFetch } from './http'
+
+export type ScorePredictionStudent = Record<string, unknown>
+
+export type ScorePredictionResponse = {
+  school_year?: string
+  selectedClassSectionId?: string | number | null
+  classSections?: Array<{ class_section_id?: number | string; class_section_name?: string }>
+  students?: ScorePredictionStudent[]
+}
+
+export async function fetchScorePrediction(params?: {
+  school_year?: string
+  class_section_id?: string
+}): Promise<ScorePredictionResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.class_section_id) qs.set('class_section_id', params.class_section_id)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/score-analysis/score-prediction${suffix}`)
+}

src/api/session.ts

@@ -1,9 +1,15 @@
 import { apiUrl } from '../lib/apiOrigin'
-import { apiFetch, getStoredToken } from './http'
+import { ApiHttpError, apiFetch, getStoredToken } from './http'
 import type {
   AdministratorAbsenceFormResponse,
   AdministratorAbsenceSubmitResponse,
   AdministratorAdminAttendanceResponse,
+  AttendanceCommentTemplatesResponse,
+  AttendanceViolationsResponse,
+  EarlyDismissalsResponse,
+  ParentAttendanceAdminReportRow,
+  StaffMonthlyOverviewPayload,
+  TeacherStaffAttendanceResponse,
   AdministratorDailyAttendanceResponse,
   AdministratorDashboardMetricsResponse,
   AdministratorDashboardSearchResponse,
@@ -67,7 +73,25 @@ import type {
   TeacherSubmissionsResponse,
   EmergencyContactGroupsResponse,
   EmergencyContactShowResponse,
+  UserListRow,
   UsersResponse,
+  ClassPrepIndexResponse,
+  ClassPrepPrintResponse,
+  CommunicationsComposeResponse,
+  CommunicationsPreviewResponse,
+  ConfigurationListResponse,
+  DiscountApplyContextResponse,
+  DiscountsListResponse,
+  FamilyListItem,
+  GuardianListItem,
+  RegisteredNewStudentsResponse,
+  EnrollmentWithdrawalPageResponse,
+  ExpensesListResponse,
+  ExpenseCreateFormResponse,
+  ExpenseEditFormResponse,
+  FamilyLegacyImportMetaResponse,
+  FamilyLegacyImportResult,
+  FamilySearchResponse,
 } from './types'
 
 export async function loginRequest(
@@ -200,6 +224,251 @@ export async function saveAdministratorAdminAttendance(payload: {
   })
 }
 
+export async function fetchTeacherStaffAttendance(params?: {
+  date?: string | null
+  semester?: string | null
+  schoolYear?: string | null
+  classSectionId?: number | null
+}): Promise<TeacherStaffAttendanceResponse> {
+  const query = new URLSearchParams()
+  if (params?.date) query.set('date', params.date)
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.classSectionId != null && params.classSectionId > 0) {
+    query.set('class_section_id', String(params.classSectionId))
+  }
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<TeacherStaffAttendanceResponse>(`/api/v1/attendance/staff/teachers${qs}`)
+}
+
+export async function saveTeacherStaffAttendance(payload: {
+  date: string
+  semester: string
+  school_year: string
+  class_section_id: number
+  teachers: Record<
+    string,
+    {
+      status?: string | null
+      reason?: string | null
+    }
+  >
+}): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>('/api/v1/attendance/staff/teachers/save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchStaffMonthlyAttendanceOverview(params?: {
+  semester?: string | null
+  schoolYear?: string | null
+}): Promise<StaffMonthlyOverviewPayload> {
+  const query = new URLSearchParams()
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<StaffMonthlyOverviewPayload>(`/api/v1/attendance/staff/month-overview${qs}`)
+}
+
+/** Matches CI `teacher_attendance_month` save cell (form body). */
+export async function saveStaffMonthlyAttendanceCell(payload: Record<string, string>): Promise<{
+  ok?: boolean
+  csrf_token?: string
+  csrf_hash?: string
+}> {
+  const body = new URLSearchParams()
+  for (const [k, v] of Object.entries(payload)) body.set(k, v)
+  return apiFetch('/api/v1/attendance/staff/month-save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+}
+
+export async function fetchAttendanceViolationsPending(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+}): Promise<AttendanceViolationsResponse> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<AttendanceViolationsResponse>(`/api/v1/attendance/violations/pending${qs}`)
+}
+
+export async function fetchAttendanceViolationsNotified(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+}): Promise<AttendanceViolationsResponse> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<AttendanceViolationsResponse>(`/api/v1/attendance/violations/notified${qs}`)
+}
+
+export async function fetchParentAttendanceReportsAdmin(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+  start?: string | null
+  end?: string | null
+}): Promise<{ rows?: ParentAttendanceAdminReportRow[] }> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.start) query.set('start', params.start)
+  if (params?.end) query.set('end', params.end)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<{ rows?: ParentAttendanceAdminReportRow[] }>(
+    `/api/v1/attendance/parent-reports${qs}`,
+  )
+}
+
+export async function fetchEarlyDismissals(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+}): Promise<EarlyDismissalsResponse> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<EarlyDismissalsResponse>(`/api/v1/attendance/early-dismissals${qs}`)
+}
+
+export async function fetchEarlyDismissalStudentOptions(): Promise<{
+  students?: Array<{
+    id?: number
+    firstname?: string
+    lastname?: string
+    class_section_name?: string | null
+  }>
+}> {
+  return apiFetch('/api/v1/attendance/early-dismissals/student-options')
+}
+
+export async function createEarlyDismissal(payload: {
+  student_id: number
+  date: string
+  dismiss_time: string
+  reason?: string | null
+}): Promise<{ message?: string }> {
+  return apiFetch('/api/v1/attendance/early-dismissals', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+/** Multipart signature upload per report date — matches CI `attendance/early-dismissals/signature`. */
+export async function uploadEarlyDismissalSignature(formData: FormData): Promise<{ message?: string }> {
+  const token = getStoredToken()
+  const headers = new Headers({ Accept: 'application/json' })
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const res = await fetch(apiUrl('/api/v1/attendance/early-dismissals/signature'), {
+    method: 'POST',
+    body: formData,
+    headers,
+  })
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    const msg =
+      typeof body === 'object' && body !== null && 'message' in body
+        ? String((body as { message?: unknown }).message ?? '')
+        : ''
+    throw new Error(msg || `HTTP ${res.status}`)
+  }
+  return body as { message?: string }
+}
+
+export async function fetchAttendanceCommentTemplates(): Promise<AttendanceCommentTemplatesResponse> {
+  return apiFetch<AttendanceCommentTemplatesResponse>('/api/v1/attendance-templates')
+}
+
+export async function saveAttendanceCommentTemplate(payload: Record<string, string>): Promise<{
+  status?: string
+}> {
+  const body = new URLSearchParams()
+  for (const [k, v] of Object.entries(payload)) body.set(k, v)
+  return apiFetch('/api/v1/attendance-templates/save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+}
+
+export async function deleteAttendanceCommentTemplate(id: number): Promise<{ status?: string }> {
+  const body = new URLSearchParams()
+  body.set('id', String(id))
+  return apiFetch('/api/v1/attendance-templates/delete', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+}
+
+export async function saveAttendanceViolationNote(payload: Record<string, string>): Promise<{ message?: string }> {
+  const body = new URLSearchParams()
+  for (const [k, v] of Object.entries(payload)) body.set(k, v)
+  return apiFetch('/api/v1/attendance/violations/save-note', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+}
+
+export async function sendAttendanceViolationEmail(payload: Record<string, string>): Promise<{ message?: string }> {
+  const body = new URLSearchParams()
+  for (const [k, v] of Object.entries(payload)) body.set(k, v)
+  return apiFetch('/api/v1/attendance/violations/send-email-manual', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+}
+
+export async function fetchAttendanceComposeEmailContext(params: {
+  studentId: string | number
+  code: string
+  variant?: string | null
+  incidentDate?: string | null
+}): Promise<Record<string, unknown>> {
+  const q = new URLSearchParams()
+  q.set('student_id', String(params.studentId))
+  q.set('code', params.code)
+  if (params.variant) q.set('variant', params.variant)
+  if (params.incidentDate) q.set('incident_date', params.incidentDate)
+  return apiFetch(`/api/v1/attendance/violations/compose?${q.toString()}`)
+}
+
+export async function fetchAttendanceStudentViolationsView(
+  studentId: string | number,
+  query?: { code?: string | null; incident_date?: string | null; include_notified?: string | null },
+): Promise<Record<string, unknown>> {
+  const q = new URLSearchParams()
+  if (query?.code) q.set('code', query.code)
+  if (query?.incident_date) q.set('incident_date', query.incident_date)
+  if (query?.include_notified) q.set('include_notified', query.include_notified)
+  const qs = q.size > 0 ? `?${q.toString()}` : ''
+  return apiFetch(`/api/v1/attendance/violations/student/${studentId}${qs}`)
+}
+
+export async function fetchAttendanceTrackingStudents(): Promise<{
+  students?: Array<Record<string, unknown>>
+  title?: string
+}> {
+  return apiFetch('/api/v1/attendance/tracking')
+}
+
+export async function recordAttendanceTrackingEntry(payload: Record<string, unknown>): Promise<{ message?: string }> {
+  return apiFetch('/api/v1/attendance/tracking/record', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
 export async function fetchBroadcastEmailOptions(): Promise<BroadcastEmailOptionsResponse> {
   return apiFetch<BroadcastEmailOptionsResponse>('/api/v1/broadcast-email/options')
 }
@@ -429,8 +698,13 @@ export async function deleteTeacherClassAssignment(payload: {
   )
 }
 
-export async function fetchTeacherSubmissions(): Promise<TeacherSubmissionsResponse> {
-  return apiFetch<TeacherSubmissionsResponse>('/api/v1/administrator/teacher-submissions')
+export async function fetchTeacherSubmissions(
+  searchParams?: URLSearchParams,
+): Promise<TeacherSubmissionsResponse> {
+  const q = searchParams?.toString()
+  return apiFetch<TeacherSubmissionsResponse>(
+    `/api/v1/administrator/teacher-submissions${q ? `?${q}` : ''}`,
+  )
 }
 
 export async function fetchPublishedCompetitions(): Promise<PublicCompetitionIndexResponse> {
@@ -719,12 +993,194 @@ export async function fetchUsers(params?: {
   return apiFetch<UsersResponse>(`/api/v1/users${qs}`)
 }
 
+function unwrapEnvelopeData(body: unknown): unknown {
+  if (!body || typeof body !== 'object') return body
+  const o = body as Record<string, unknown>
+  if ('data' in o && o.data != null && typeof o.data === 'object') return o.data
+  return body
+}
+
+function normalizeUserDetailResponse(body: unknown): UserListRow {
+  const raw = unwrapEnvelopeData(body)
+  if (!raw || typeof raw !== 'object') throw new Error('Invalid user response')
+  const o = raw as Record<string, unknown>
+
+  if (o.user != null && typeof o.user === 'object') {
+    return {
+      user: o.user as UserListRow['user'],
+      roles: Array.isArray(o.roles) ? (o.roles as UserListRow['roles']) : undefined,
+      role_ids: Array.isArray(o.role_ids) ? (o.role_ids as number[]) : undefined,
+      parent_type: typeof o.parent_type === 'string' ? o.parent_type : undefined,
+      second_from_parents:
+        typeof o.second_from_parents === 'string' ? o.second_from_parents : undefined,
+    }
+  }
+
+  if (o.id != null || o.email != null || o.firstname != null) {
+    return { user: o as UserListRow['user'] }
+  }
+
+  throw new Error('Invalid user response')
+}
+
+/** GET `/api/v1/users/:id` (falls back to user list row if show route is missing). */
+export async function fetchUser(userId: number): Promise<UserListRow> {
+  try {
+    const body = await apiFetch<unknown>(`/api/v1/users/${userId}`)
+    return normalizeUserDetailResponse(body)
+  } catch (e) {
+    if (e instanceof ApiHttpError && (e.status === 404 || e.status === 405)) {
+      const data = await fetchUsers({ sort: 'lastname', order: 'asc' })
+      const row = data.users?.find((r) => Number(r.user?.id) === userId)
+      if (row) return row
+    }
+    throw e
+  }
+}
+
 export async function deleteUser(userId: number): Promise<{ ok: boolean; message?: string }> {
   return apiFetch<{ ok: boolean; message?: string }>(`/api/v1/users/${userId}`, {
     method: 'DELETE',
   })
 }
 
+export async function saveUser(
+  userId: number,
+  payload: Record<string, unknown>,
+): Promise<{ ok?: boolean; message?: string }> {
+  try {
+    return await apiFetch(`/api/v1/users/${userId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+  } catch (error) {
+    if (error instanceof ApiHttpError && error.status === 422) {
+      const body = error.body
+      if (body && typeof body === 'object') {
+        const errors = (body as { errors?: unknown }).errors
+        if (errors && typeof errors === 'object') {
+          for (const value of Object.values(errors as Record<string, unknown>)) {
+            if (Array.isArray(value) && value.length > 0) {
+              throw new Error(String(value[0]))
+            }
+            if (typeof value === 'string' && value.trim() !== '') {
+              throw new Error(value)
+            }
+          }
+        }
+      }
+    }
+    throw error
+  }
+}
+
+/**
+ * Returns whether `email` can be used (not taken by another user).
+ * Expected Laravel route: `GET /api/v1/users/email-availability?email=...&except_user_id=...`
+ * 200 body: `{ "available": true }` or `{ "available": false, "message": "..." }` (or under `data`).
+ */
+export async function checkUserEmailAvailable(
+  exceptUserId: number,
+  email: string,
+): Promise<{ available: boolean; message?: string }> {
+  const q = new URLSearchParams()
+  q.set('email', email.trim())
+  q.set('except_user_id', String(exceptUserId))
+  const body = await apiFetch<unknown>(`/api/v1/users/email-availability?${q.toString()}`)
+  const o = (body && typeof body === 'object' ? body : {}) as Record<string, unknown>
+  const d =
+    o.data && typeof o.data === 'object' && o.data !== null
+      ? (o.data as Record<string, unknown>)
+      : o
+  const av = d.available
+  if (av === false) {
+    return {
+      available: false,
+      message: typeof d.message === 'string' ? d.message : undefined,
+    }
+  }
+  if (av === true) {
+    return { available: true, message: typeof d.message === 'string' ? d.message : undefined }
+  }
+  return { available: true }
+}
+
+/**
+ * Account settings: ask the API to email a confirmation link to `email`.
+ * The stored login email must not change until the user completes that flow (`confirmUserEmailChange`).
+ *
+ * Expected Laravel route: `POST /api/v1/users/{user}/email-change-request` with JSON `{ "email": "..." }`.
+ */
+export async function requestUserEmailChange(
+  userId: number,
+  email: string,
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/users/${userId}/email-change-request`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email: email.trim() }),
+  })
+}
+
+/**
+ * Completes a pending email change (token from the confirmation email).
+ * Expected Laravel route: `POST /api/v1/users/email-change/confirm` with JSON `{ "token": "..." }`.
+ */
+export async function confirmUserEmailChange(
+  token: string,
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch('/api/v1/users/email-change/confirm', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ token: token.trim() }),
+  })
+}
+
+export async function createUserRecord(
+  payload: Record<string, unknown>,
+): Promise<{ ok?: boolean; id?: number; message?: string }> {
+  return apiFetch('/api/v1/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export type LoginActivityRow = {
+  user_id?: number | string
+  email?: string | null
+  login_time?: string | null
+  logout_time?: string | null
+  ip_address?: string | null
+  user_agent?: string | null
+}
+
+export type LoginActivityResponse = {
+  activities?: LoginActivityRow[]
+  pagination?: {
+    currentPage?: number
+    pageCount?: number
+    perPage?: number
+    total?: number
+  }
+}
+
+export async function fetchLoginActivity(params?: {
+  page?: number
+  per_page?: number
+  school_year?: string
+  semester?: string
+}): Promise<LoginActivityResponse> {
+  const query = new URLSearchParams()
+  if (params?.page) query.set('page', String(params.page))
+  if (params?.per_page) query.set('per_page', String(params.per_page))
+  if (params?.school_year) query.set('school_year', params.school_year)
+  if (params?.semester) query.set('semester', params.semester)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<LoginActivityResponse>(`/api/v1/administrator/login-activity${qs}`)
+}
+
 export async function fetchNotificationAlerts(): Promise<NotificationAlertsResponse> {
   return apiFetch<NotificationAlertsResponse>('/api/v1/administrator/notifications/alerts')
 }
@@ -769,6 +1225,62 @@ export async function fetchFamilyAdminIndex(params?: {
   return apiFetch<FamilyAdminIndexResponse>(`/api/v1/family-admin${qs}`)
 }
 
+/** Optional JSON search (`family/search` parity). Falls back to client-side lists when unavailable. */
+export async function fetchFamilySearchSuggestions(q: string): Promise<FamilySearchResponse> {
+  const query = q.trim()
+  if (!query) return { items: [] }
+  try {
+    return await apiFetch<FamilySearchResponse>(
+      `/api/v1/family-admin/search?q=${encodeURIComponent(query)}`,
+    )
+  } catch {
+    return { items: [] }
+  }
+}
+
+export async function sendFamilyComposeEmail(payload: {
+  to: string
+  subject: string
+  html: string
+  return_url?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/family-admin/compose-email/send`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+/** GET metadata for legacy family import (`routes/api.php` + JWT Bearer). */
+export async function fetchFamilyLegacyImportMeta(): Promise<FamilyLegacyImportMetaResponse> {
+  const raw = await apiFetch<
+    FamilyLegacyImportMetaResponse | ApiEnvelope<FamilyLegacyImportMetaResponse>
+  >('/api/v1/families/import-legacy')
+  if (raw && typeof raw === 'object' && 'data' in raw && (raw as ApiEnvelope<FamilyLegacyImportMetaResponse>).data) {
+    return (raw as ApiEnvelope<FamilyLegacyImportMetaResponse>).data as FamilyLegacyImportMetaResponse
+  }
+  return raw as FamilyLegacyImportMetaResponse
+}
+
+/**
+ * POST multipart legacy family import. Typical Laravel field: `file` (UploadedFile).
+ * Append optional `dry_run` = `1` when supported.
+ */
+export async function submitFamilyLegacyImport(formData: FormData): Promise<FamilyLegacyImportResult> {
+  const raw = await fetchMultipartJson<
+    FamilyLegacyImportResult | ApiEnvelope<FamilyLegacyImportResult>
+  >('/api/v1/families/import-legacy', formData)
+  if (
+    raw &&
+    typeof raw === 'object' &&
+    'data' in raw &&
+    (raw as ApiEnvelope<FamilyLegacyImportResult>).data != null
+  ) {
+    return (raw as ApiEnvelope<FamilyLegacyImportResult>).data as FamilyLegacyImportResult
+  }
+  return raw as FamilyLegacyImportResult
+}
+
 export async function fetchPaypalTransactions(params?: {
   q?: string
   perPage?: number
@@ -983,6 +1495,35 @@ export async function fetchStudentScoreCard(studentId: number): Promise<StudentS
   return apiFetch<StudentScoreCardResponse>(`/api/v1/students/${studentId}/score-card`)
 }
 
+/** Students the current user may open on the score-card list (CI `StudentController::scoreCardList`). */
+export type ScoreCardSelectableStudent = {
+  id: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  /** When present, client may filter to the teacher’s active section (see `StudentScoreCardListPage`). */
+  class_section_ids?: number[] | null
+}
+
+/**
+ * Teachers should pass `class_section_id` + `school_year` so the list matches CI `scoreCardList`
+ * (students in that section for the year, not the whole school).
+ */
+export async function fetchScoreCardSelectableStudents(params?: {
+  classSectionId?: number | null
+  schoolYear?: string | null
+}): Promise<{ students: ScoreCardSelectableStudent[] }> {
+  const q = new URLSearchParams()
+  if (params?.classSectionId != null && params.classSectionId > 0) {
+    q.set('class_section_id', String(params.classSectionId))
+  }
+  if (params?.schoolYear != null && String(params.schoolYear).trim() !== '') {
+    q.set('school_year', String(params.schoolYear).trim())
+  }
+  const qs = q.size > 0 ? `?${q.toString()}` : ''
+  return apiFetch<{ students: ScoreCardSelectableStudent[] }>(`/api/v1/students/score-card/selectable${qs}`)
+}
+
 export async function fetchAdministratorEmergencyContacts(params?: {
   parentId?: number | null
   parentIds?: number[]
@@ -1115,3 +1656,358 @@ export async function fetchReportCardPdf(studentId: number): Promise<Blob> {
   if (!res.ok) throw new Error(`HTTP ${res.status}`)
   return res.blob()
 }
+
+function unwrapData<T extends object>(body: T & { data?: unknown }): T {
+  if (body && typeof body === 'object' && 'data' in body && body.data && typeof body.data === 'object') {
+    return body.data as T
+  }
+  return body
+}
+
+export async function fetchClassPrepIndex(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<ClassPrepIndexResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<ClassPrepIndexResponse & { data?: ClassPrepIndexResponse }>(
+    `/api/v1/class-prep${suffix}`,
+  )
+  return unwrapData(body)
+}
+
+export async function saveClassPrepAdjustment(payload: {
+  class_section_id: number | string
+  school_year: string
+  semester?: string
+  adjustments: Record<string, number>
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/class-prep/adjustments`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchClassPrepPrintPayload(params: {
+  sectionId: string
+  schoolYear: string
+  semester?: string
+}): Promise<ClassPrepPrintResponse> {
+  const qs = new URLSearchParams()
+  if (params.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<ClassPrepPrintResponse & { data?: ClassPrepPrintResponse }>(
+    `/api/v1/class-prep/sections/${encodeURIComponent(params.sectionId)}/print/${encodeURIComponent(params.schoolYear)}${suffix}`,
+  )
+  return unwrapData(body)
+}
+
+export async function fetchCommunicationsCompose(): Promise<CommunicationsComposeResponse> {
+  const body = await apiFetch<CommunicationsComposeResponse & { data?: CommunicationsComposeResponse }>(
+    '/api/v1/communications/compose',
+  )
+  return unwrapData(body)
+}
+
+export async function fetchStudentFamilies(studentId: number): Promise<{ data: FamilyListItem[] }> {
+  return apiFetch(`/api/v1/students/${studentId}/families`)
+}
+
+export async function fetchFamilyGuardians(familyId: number): Promise<{ data: GuardianListItem[] }> {
+  return apiFetch(`/api/v1/families/${familyId}/guardians`)
+}
+
+export async function previewCommunicationsEmail(payload: {
+  student_id: number
+  family_id: number
+  template_key: string
+  vars?: Record<string, string>
+}): Promise<CommunicationsPreviewResponse> {
+  return apiFetch(`/api/v1/communications/preview`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function sendCommunicationsEmail(payload: {
+  student_id: number
+  family_id: number
+  template_key: string
+  subject: string
+  body: string
+  recipients: string[]
+  cc?: string[]
+  bcc?: string[]
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/communications/send`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchConfigurations(): Promise<ConfigurationListResponse> {
+  const body = await apiFetch<ConfigurationListResponse & { data?: ConfigurationListResponse }>(
+    '/api/v1/configuration',
+  )
+  return unwrapData(body)
+}
+
+export async function createConfigurationEntry(payload: {
+  config_key: string
+  config_value: string
+}): Promise<{ ok?: boolean }> {
+  return apiFetch(`/api/v1/configuration`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateConfigurationEntry(
+  id: number | string,
+  payload: { config_key: string; config_value: string },
+): Promise<{ ok?: boolean }> {
+  return apiFetch(`/api/v1/configuration/${encodeURIComponent(String(id))}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function deleteConfigurationEntry(id: number | string): Promise<{ ok?: boolean }> {
+  return apiFetch(`/api/v1/configuration/${encodeURIComponent(String(id))}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchDiscountsList(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<DiscountsListResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<DiscountsListResponse & { data?: DiscountsListResponse }>(
+    `/api/v1/discounts${suffix}`,
+  )
+  return unwrapData(body)
+}
+
+export async function fetchDiscountApplyContext(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<DiscountApplyContextResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<DiscountApplyContextResponse & { data?: DiscountApplyContextResponse }>(
+    `/api/v1/discounts/apply-context${suffix}`,
+  )
+  return unwrapData(body)
+}
+
+export async function createDiscountVoucher(payload: Record<string, unknown>): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/discounts`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function applyDiscountVoucher(payload: {
+  voucher_id: number | string
+  parent_ids: (number | string)[]
+  allow_additional?: boolean
+  school_year?: string
+  semester?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/discounts/apply`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function reverseDiscountApplication(payload: {
+  voucher_id?: number | string
+  parent_ids: (number | string)[]
+  reason?: string
+  school_year?: string
+  semester?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/discounts/reverse`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+function normalizeEnrollmentWithdrawalResponse(
+  d: EnrollmentWithdrawalPageResponse,
+): {
+  students: EnrollmentWithdrawalPageResponse['students']
+  classes: EnrollmentWithdrawalPageResponse['classes']
+  schoolYears: string[]
+  selectedYear: string
+  currentYear: string
+  semester: string
+  missingYear: boolean
+  isCurrentYear: boolean
+} {
+  const selectedYear = String(d.selectedYear ?? d.selected_year ?? '')
+  const currentYear = String(d.currentYear ?? d.current_year ?? '')
+  const semester = String(d.semester ?? '')
+  const missingYear = Boolean(d.missingYear ?? d.missing_year)
+  let isCurrentYear = d.isCurrentYear ?? d.is_current_year
+  if (isCurrentYear === undefined)
+    isCurrentYear = selectedYear !== '' && currentYear !== '' && selectedYear === currentYear
+  const schoolYearsRaw = d.schoolYears ?? d.school_years
+  const schoolYears = Array.isArray(schoolYearsRaw) ? schoolYearsRaw.map((y) => String(y)) : []
+  return {
+    students: d.students ?? [],
+    classes: d.classes ?? [],
+    schoolYears,
+    selectedYear,
+    currentYear,
+    semester,
+    missingYear,
+    isCurrentYear: Boolean(isCurrentYear),
+  }
+}
+
+/** Admin — registered students (legacy new-students). */
+export async function fetchRegisteredNewStudents(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{
+  new_students: RegisteredNewStudentsResponse['new_students']
+  total_new?: number
+  school_years?: string[]
+}> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<
+    RegisteredNewStudentsResponse & { data?: RegisteredNewStudentsResponse }
+  >(`/api/v1/administrator/enroll-withdrawal/registered-new-students${suffix}`)
+  const d = unwrapData(body)
+  return {
+    new_students: d.new_students ?? [],
+    total_new: d.total_new,
+    school_years: d.school_years,
+  }
+}
+
+/** Admin — enrollment & withdrawal grid (legacy enrollment_withdrawal). */
+export async function fetchEnrollmentWithdrawalPage(params?: {
+  schoolYear?: string
+  semester?: string
+}): Promise<ReturnType<typeof normalizeEnrollmentWithdrawalResponse>> {
+  const qs = new URLSearchParams()
+  if (params?.schoolYear) qs.set('schoolYear', params.schoolYear)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<
+    EnrollmentWithdrawalPageResponse & { data?: EnrollmentWithdrawalPageResponse }
+  >(`/api/v1/administrator/enroll-withdrawal${suffix}`)
+  const d = unwrapData(body)
+  return normalizeEnrollmentWithdrawalResponse(d)
+}
+
+export async function postEnrollmentWithdrawalAssignClass(payload: {
+  student_id: number
+  parent_id: number
+  class_section_id: number | string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/administrator/enroll-withdrawal/assign-class`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function postEnrollmentWithdrawalStatusBatch(payload: {
+  updates: { student_id: number; enrollment_status: string }[]
+  school_year?: string
+  semester?: string
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`/api/v1/administrator/enroll-withdrawal/status-batch`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function postGenerateInvoiceForParent(parentId: number): Promise<unknown> {
+  return apiFetch(`/api/v1/administrator/invoices/generate-for-parent`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ parent_id: parentId }),
+  })
+}
+
+export async function fetchExpensesList(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<ExpensesListResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  const body = await apiFetch<ExpensesListResponse & { data?: ExpensesListResponse }>(
+    `/api/v1/administrator/expenses${suffix}`,
+  )
+  const d = unwrapData(body as ExpensesListResponse & { data?: ExpensesListResponse })
+  return {
+    expenses: d.expenses ?? [],
+    school_year: d.school_year,
+    semester: d.semester,
+    school_years: d.school_years,
+  }
+}
+
+export async function fetchExpenseCreateForm(): Promise<ExpenseCreateFormResponse> {
+  const body = await apiFetch<ExpenseCreateFormResponse & { data?: ExpenseCreateFormResponse }>(
+    '/api/v1/administrator/expenses/create-options',
+  )
+  return unwrapData(body as ExpenseCreateFormResponse & { data?: ExpenseCreateFormResponse })
+}
+
+export async function createExpense(
+  formData: FormData,
+): Promise<{ ok?: boolean; message?: string }> {
+  return fetchMultipartJson('/api/v1/administrator/expenses', formData)
+}
+
+export async function fetchExpenseEdit(expenseId: number): Promise<ExpenseEditFormResponse> {
+  const body = await apiFetch<ExpenseEditFormResponse & { data?: ExpenseEditFormResponse }>(
+    `/api/v1/administrator/expenses/${expenseId}/edit`,
+  )
+  return unwrapData(body as ExpenseEditFormResponse & { data?: ExpenseEditFormResponse })
+}
+
+export async function updateExpense(
+  expenseId: number,
+  formData: FormData,
+): Promise<{ ok?: boolean; message?: string }> {
+  return fetchMultipartJson(`/api/v1/administrator/expenses/${expenseId}`, formData)
+}
+
+export async function updateExpenseStatus(payload: {
+  id: number
+  status: 'approved' | 'denied'
+}): Promise<{ success?: boolean; error?: string }> {
+  return apiFetch(`/api/v1/administrator/expenses/update-status`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}

src/api/slips.ts

@@ -0,0 +1,17 @@
+/**
+ * Late slips preview (legacy CI slips/preview_list).
+ */
+import { apiFetch } from './http'
+
+export type SlipPreviewRow = Record<string, unknown>
+
+export async function fetchSlipPreviewList(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<{ rows?: SlipPreviewRow[]; school_year?: string; semester?: string }> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`/api/v1/administrator/slips/preview${suffix}`)
+}

src/api/staff.ts

@@ -0,0 +1,94 @@
+/**
+ * Staff directory (legacy CI `staff/*`).
+ * Expected Laravel routes under `/api/v1/administrator/staff`.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/administrator/staff'
+
+export type StaffListRow = {
+  id: number
+  user_id?: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+  phone?: string | null
+  active_role?: string | null
+  class_section?: string | null
+  verification_issue?: boolean
+}
+
+export type StaffIndexResponse = {
+  staff?: StaffListRow[]
+  issues_count?: number
+  school_year?: string | null
+  semester?: string | null
+  schoolYears?: string[]
+}
+
+export type RoleOption = { id: number; name: string }
+
+export type StaffFormOptionsResponse = {
+  roles?: RoleOption[]
+}
+
+export type StaffMemberResponse = {
+  user?: Record<string, unknown> & {
+    id?: number
+    firstname?: string | null
+    lastname?: string | null
+    email?: string | null
+    phone?: string | null
+  }
+  staff?: Record<string, unknown> & {
+    firstname?: string | null
+    lastname?: string | null
+    email?: string | null
+    phone?: string | null
+  }
+}
+
+export async function fetchStaffIndex(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<StaffIndexResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`${BASE}${suffix}`)
+}
+
+export async function fetchStaffFormOptions(): Promise<StaffFormOptionsResponse> {
+  return apiFetch(`${BASE}/form-options`)
+}
+
+export async function fetchStaffMember(id: number): Promise<StaffMemberResponse> {
+  return apiFetch(`${BASE}/${id}`)
+}
+
+export async function createStaff(payload: {
+  firstname: string
+  lastname: string
+  email: string
+  password: string
+  role_id: number
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`${BASE}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateStaff(
+  id: number,
+  payload: { firstname: string; lastname: string; email: string; phone?: string },
+): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`${BASE}/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}

src/api/teacherSession.ts

@@ -0,0 +1,82 @@
+/**
+ * Teacher portal API (`Views/teacher/*` parity).
+ * Laravel should expose matching routes under `/api/v1/teacher/...`.
+ */
+import { apiFetch, getStoredToken } from './http'
+import { apiUrl } from '../lib/apiOrigin'
+
+/** Response shape for `GET /api/v1/teacher/dashboard` (extend as backend grows). */
+export type TeacherDashboardPayload = {
+  welcome?: string | null
+  school_year?: string | null
+  semester?: string | null
+  counts?: Record<string, number | string | null>
+  announcements?: Array<{ title?: string | null; body?: string | null; html?: string | null }>
+  [key: string]: unknown
+}
+
+export async function fetchTeacherJson<T>(path: string): Promise<T> {
+  const p = path.startsWith('/') ? path : `/${path}`
+  return apiFetch<T>(`/api/v1/teacher${p}`)
+}
+
+/**
+ * Opt-in: set `VITE_TEACHER_DASHBOARD_API=1` in `.env` when Laravel exposes
+ * `GET /api/v1/teacher/dashboard`. Otherwise the SPA skips the request (avoids 404 noise).
+ */
+export function isTeacherDashboardApiEnabled(): boolean {
+  return import.meta.env.VITE_TEACHER_DASHBOARD_API === '1'
+}
+
+export async function fetchTeacherDashboard(): Promise<TeacherDashboardPayload> {
+  return fetchTeacherJson<TeacherDashboardPayload>('/dashboard')
+}
+
+export async function postTeacherJson<T>(path: string, body: unknown): Promise<T> {
+  const p = path.startsWith('/') ? path : `/${path}`
+  return apiFetch<T>(`/api/v1/teacher${p}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function postTeacherMultipart<T>(path: string, formData: FormData): Promise<T> {
+  const isAbsoluteApiPath = path.startsWith('/api/')
+  const p = isAbsoluteApiPath ? path : path.startsWith('/') ? path : `/${path}`
+  const headers = new Headers({ Accept: 'application/json' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+
+  const url = isAbsoluteApiPath ? apiUrl(p) : apiUrl(`/api/v1/teacher${p}`)
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: formData,
+  })
+
+  const body: unknown = await res.json().catch(() => null)
+  if (!res.ok) {
+    let msg =
+      typeof body === 'object' && body !== null && 'message' in body
+        ? String((body as { message?: unknown }).message ?? '')
+        : ''
+
+    if (typeof body === 'object' && body !== null && 'errors' in body) {
+      const errors = (body as { errors?: unknown }).errors
+      if (errors && typeof errors === 'object') {
+        const firstFieldErrors = Object.values(errors as Record<string, unknown>).find(
+          (value) => Array.isArray(value) && value.length > 0,
+        )
+        if (Array.isArray(firstFieldErrors) && firstFieldErrors[0]) {
+          msg = String(firstFieldErrors[0])
+        }
+      }
+    }
+
+    throw new Error(msg || `HTTP ${res.status}`)
+  }
+
+  return body as T
+}

src/api/types.ts

@@ -2,6 +2,8 @@ export type AuthUser = {
   id: number
   name: string
   roles: Record<string, boolean>
+  class_section_id?: number | null
+  class_section_name?: string | null
 }
 
 export type LoginSuccess = {
@@ -129,8 +131,13 @@ export type AdministratorAbsenceFormResponse = {
   admin_name?: string | null
   semester?: string | null
   schoolYear?: string | null
+  /** Laravel may return snake_case */
+  school_year?: string | null
   existing?: AdministratorAbsenceRow[]
   availableDates?: string[]
+  available_dates?: string[]
+  /** Optional labels for POST `reason_type` (from API or empty to use client defaults). */
+  reason_types?: Record<string, string>
 }
 
 export type AdministratorAbsenceSubmitResponse = {
@@ -201,6 +208,95 @@ export type AdministratorAdminAttendanceResponse = {
   admins_grid?: AdministratorAdminAttendanceRow[]
 }
 
+/** Staff teacher daily grid — `GET /api/v1/attendance/staff/teachers` */
+export type TeacherStaffAttendanceRow = {
+  teacher_id?: number
+  firstname?: string | null
+  lastname?: string | null
+  position?: string | null
+  status?: string | null
+  reason?: string | null
+}
+
+export type TeacherStaffAttendanceResponse = {
+  semester?: string | null
+  school_year?: string | null
+  date?: string | null
+  class_section_id?: number | null
+  locked?: boolean
+  /** Section id → label */
+  sections?: Record<string, string>
+  grid?: TeacherStaffAttendanceRow[]
+}
+
+/** Monthly admin/teacher grid payload — `GET /api/v1/attendance/staff/month-overview` */
+export type StaffMonthlyCell = { status?: string | null }
+export type StaffMonthlyTeacherRow = {
+  user_id?: number
+  teacher_id?: number
+  name?: string | null
+  position?: string | null
+  cells?: Record<string, StaffMonthlyCell>
+  totals?: { p?: number; a?: number; l?: number }
+}
+export type StaffMonthlySection = {
+  section_code?: string
+  label?: string
+  teachers?: StaffMonthlyTeacherRow[]
+}
+export type StaffMonthlyAdminRow = {
+  user_id?: number
+  name?: string | null
+  role?: string | null
+  cells?: Record<string, StaffMonthlyCell>
+  totals?: { p?: number; a?: number; l?: number }
+}
+export type StaffMonthlyOverviewPayload = {
+  filters?: {
+    semester?: string
+    school_year?: string
+    range_label?: string
+    month_label?: string
+  }
+  sundays?: string[]
+  noSchoolDays?: string[]
+  sections?: StaffMonthlySection[]
+  admins?: StaffMonthlyAdminRow[]
+  missingYear?: boolean
+  schoolYears?: Array<{ school_year?: string } | string>
+  isCurrentYear?: boolean
+}
+
+export type AttendanceViolationStudentRow = Record<string, unknown>
+export type AttendanceViolationsResponse = {
+  students?: AttendanceViolationStudentRow[]
+  school_year?: string
+  semester?: string
+  debug?: Record<string, unknown>
+}
+
+export type ParentAttendanceAdminReportRow = Record<string, unknown>
+
+export type EarlyDismissalGroup = Record<string, Array<Record<string, unknown>>>
+export type EarlyDismissalsResponse = {
+  groups?: EarlyDismissalGroup
+  schoolYear?: string
+  semester?: string
+  signatureByDate?: Record<string, { filename?: string; original_name?: string }>
+}
+
+export type AttendanceCommentTemplate = {
+  id?: number
+  min_score?: number
+  max_score?: number
+  template_text?: string
+  is_active?: boolean
+}
+
+export type AttendanceCommentTemplatesResponse = {
+  templates?: AttendanceCommentTemplate[]
+}
+
 export type ParentAttendanceRow = {
   firstname: string
   lastname: string
@@ -539,7 +635,7 @@ export type UserListRow = {
     semester?: string | null
     [key: string]: unknown
   } | null
-  roles?: Array<{ id?: number; name?: string | null; slug?: string | null }>
+  roles?: Array<string | { id?: number; name?: string | null; slug?: string | null }>
   role_ids?: number[]
   parent_type?: string
   second_from_parents?: string
@@ -580,6 +676,10 @@ export type FamilyGuardianRow = {
   is_primary?: boolean
   receive_emails?: boolean
   receive_sms?: boolean
+  address_street?: string | null
+  city?: string | null
+  state?: string | null
+  zip?: string | null
 }
 
 export type FamilyStudentRow = {
@@ -621,6 +721,50 @@ export type FamilyAdminIndexResponse = ApiEnvelope<{
   resolved_student_id?: number | null
 }>
 
+export type FamilySearchSuggestionItem = {
+  type: 'student' | 'guardian'
+  id: number
+  label: string
+  sub?: string
+}
+
+export type FamilySearchResponse = {
+  items: FamilySearchSuggestionItem[]
+}
+
+/** GET `/api/v1/families/import-legacy` — metadata for the legacy import UI (optional; SPA uses defaults if unavailable). */
+export type FamilyLegacyImportMetaResponse = {
+  instructions?: string | null
+  instructions_html?: string | null
+  accepted_extensions?: string[]
+  accepted_mime_types?: string[]
+  max_file_bytes?: number | null
+  template_url?: string | null
+  template_download_url?: string | null
+  columns?: string[]
+  dry_run_supported?: boolean
+}
+
+export type FamilyLegacyImportRowError = {
+  row?: number
+  line?: number
+  message?: string
+  error?: string
+}
+
+/** POST `/api/v1/families/import-legacy` (multipart) response */
+export type FamilyLegacyImportResult = {
+  ok?: boolean
+  message?: string
+  imported?: number
+  imported_count?: number
+  skipped?: number
+  skipped_count?: number
+  failed?: number
+  errors?: FamilyLegacyImportRowError[]
+  validation_errors?: FamilyLegacyImportRowError[]
+}
+
 export type PaypalTransactionRow = {
   id: number
   transaction_id?: string | null
@@ -977,10 +1121,15 @@ export type SchoolCalendarEventRow = {
   title: string
   start: string
   description?: string
+  backgroundColor?: string | null
   extendedProps?: {
     event_type?: string
     backgroundColor?: string
     color?: string
+    no_school?: number | boolean
+    notify_parent?: number | boolean
+    notify_teacher?: number | boolean
+    notify_admin?: number | boolean
     [key: string]: unknown
   }
 }
@@ -1080,13 +1229,20 @@ export type ClassProgressReportRow = {
   status_label?: string | null
   covered?: string | null
   homework?: string | null
+  materials?: string | null
   support_needed?: string | null
   flags?: string[]
   week_start?: string | null
   week_end?: string | null
   created_at?: string | null
   updated_at?: string | null
-  attachments?: { id?: number; name?: string | null; file_path?: string | null; download_url?: string | null }[]
+  attachments?: {
+    id?: number
+    name?: string | null
+    file_path?: string | null
+    download_url?: string | null
+    legacy?: boolean | number | null
+  }[]
 }
 
 export type ClassProgressGroupRow = {
@@ -1183,3 +1339,222 @@ export type ParentEventsOverviewResponse = {
   charges?: Record<string, unknown>[]
   yourStudents?: ParentEnrollmentStudent[]
 }
+
+/** Class preparation (inventory vs sections) — Laravel `GET /api/v1/class-prep` */
+export type ClassPrepSectionRow = {
+  class_section_id: number | string
+  class_section: string
+  needs_print?: boolean
+  last_printed_at?: string | null
+  student_count: number
+  prep_items: Record<string, number>
+  adjustments: Record<string, number>
+}
+
+export type ClassPrepIndexResponse = {
+  school_year: string
+  semester?: string | null
+  prep_results: ClassPrepSectionRow[]
+  total_needed: Record<string, number>
+  available: Record<string, number>
+  shortages?: Record<string, number>
+}
+
+export type ClassPrepPrintResponse = {
+  class_section?: string | null
+  prep_items: Record<string, number>
+}
+
+export type CommunicationsStudentOption = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+}
+
+export type CommunicationsTemplateOption = {
+  template_key: string
+  name?: string | null
+}
+
+export type CommunicationsComposeResponse = {
+  students: CommunicationsStudentOption[]
+  templates: CommunicationsTemplateOption[]
+  display_name?: string | null
+}
+
+export type CommunicationsPreviewResponse = {
+  subject?: string | null
+  html?: string | null
+}
+
+export type FamilyListItem = {
+  id: number
+  household_name?: string | null
+  is_primary_home?: boolean
+}
+
+export type GuardianListItem = {
+  email?: string | null
+  receive_emails?: boolean
+}
+
+export type ConfigurationRow = {
+  id: number | string
+  config_key: string
+  config_value: string
+}
+
+export type ConfigurationListResponse = {
+  configs: ConfigurationRow[]
+}
+
+export type DiscountVoucherRow = {
+  id: number | string
+  code: string
+  discount_type: 'percent' | 'fixed' | string
+  discount_value: number | string
+  max_uses?: number | string | null
+  times_used?: number | string | null
+  valid_from?: string | null
+  valid_until?: string | null
+  is_active?: boolean
+}
+
+export type DiscountsListResponse = {
+  vouchers: DiscountVoucherRow[]
+  school_year?: string | null
+  semester?: string | null
+  school_years?: string[]
+}
+
+export type DiscountApplyParentRow = {
+  id: number | string
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+  has_discount?: boolean
+  total_discount?: number | string | null
+}
+
+export type DiscountApplyContextResponse = {
+  vouchers: DiscountVoucherRow[]
+  parents: DiscountApplyParentRow[]
+}
+
+/** Admin: enroll_withdraw / new-students list */
+export type RegisteredNewStudentRow = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+  new_student?: string | null
+  class_section?: string | null
+  enrollment_status?: string | null
+  age?: string | number | null
+  registration_date?: string | null
+  parent_firstname?: string | null
+  parent_lastname?: string | null
+  parent_phone?: string | null
+  parent_email?: string | null
+  emergency_name?: string | null
+  emergency_relationship?: string | null
+  emergency_phone?: string | null
+}
+
+export type RegisteredNewStudentsResponse = {
+  new_students: RegisteredNewStudentRow[]
+  total_new?: number
+  school_year?: string | null
+  semester?: string | null
+  school_years?: string[]
+}
+
+export type EnrollmentWithdrawalClassOption = {
+  id?: number | string
+  class_section_id?: number | string
+  name?: string | null
+  class_section_name?: string | null
+}
+
+export type EnrollmentWithdrawalStudentRow = {
+  student_id?: number
+  id?: number
+  parent_id?: number | null
+  guardian_id?: number | null
+  firstname?: string | null
+  lastname?: string | null
+  parent_label?: string | null
+  new_student?: string | null
+  removed_previous_year?: string | null
+  class_section?: string | null
+  enrollment_status?: string | null
+  registration_date?: string | null
+}
+
+export type EnrollmentWithdrawalPageResponse = {
+  students: EnrollmentWithdrawalStudentRow[]
+  classes: EnrollmentWithdrawalClassOption[]
+  school_years?: string[]
+  schoolYears?: string[]
+  selected_year?: string | null
+  selectedYear?: string | null
+  current_year?: string | null
+  currentYear?: string | null
+  semester?: string | null
+  missing_year?: boolean
+  missingYear?: boolean
+  is_current_year?: boolean
+  isCurrentYear?: boolean
+}
+
+/** Admin expenses (`Views/expenses/*`) */
+export type ExpenseUserOption = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+}
+
+export type ExpenseRow = {
+  id: number
+  category: string
+  amount: number | string
+  retailor?: string | null
+  retailer?: string | null
+  description?: string | null
+  status: string
+  receipt_path?: string | null
+  /** Full URL if API provides it */
+  receipt_url?: string | null
+  purchaser_firstname?: string | null
+  purchaser_lastname?: string | null
+  approver_firstname?: string | null
+  approver_lastname?: string | null
+  created_at?: string | null
+  date_of_purchase?: string | null
+  purchase_date?: string | null
+  purchased_at?: string | null
+  date_purchased?: string | null
+}
+
+export type ExpensesListResponse = {
+  expenses: ExpenseRow[]
+  school_year?: string | null
+  semester?: string | null
+  school_years?: string[]
+}
+
+export type ExpenseCreateFormResponse = {
+  retailors: string[]
+  users: ExpenseUserOption[]
+}
+
+export type ExpenseDetail = ExpenseRow & {
+  purchased_by?: number | string | null
+}
+
+export type ExpenseEditFormResponse = {
+  expense: ExpenseDetail
+  retailors: string[]
+  users: ExpenseUserOption[]
+  receipt_url?: string | null
+}

src/api/whatsapp.ts

@@ -0,0 +1,140 @@
+/**
+ * WhatsApp admin tools (legacy CI `whatsapp/*`).
+ * Expected Laravel routes under `/api/v1/administrator/whatsapp`.
+ */
+import { apiFetch } from './http'
+
+const BASE = '/api/v1/administrator/whatsapp'
+
+export type WhatsappSectionRow = {
+  class_section_id?: number
+  id?: number
+  class_section_name?: string
+  name?: string
+  school_year?: string
+  semester?: string
+}
+
+export type WhatsappLinkRow = {
+  invite_link?: string | null
+  active?: number | boolean
+}
+
+export type WhatsappManageLinksResponse = {
+  schoolYear?: string | null
+  semester?: string | null
+  sections?: WhatsappSectionRow[]
+  linksBySection?: Record<string, WhatsappLinkRow>
+  parents?: Array<{
+    id: number
+    firstname?: string | null
+    lastname?: string | null
+    email?: string | null
+    source?: string | null
+  }>
+}
+
+export type ParentContactRow = {
+  firstname?: string | null
+  lastname?: string | null
+  type?: string | null
+  phone?: string | null
+  email?: string | null
+}
+
+export type WhatsappParentContactsResponse = {
+  schoolYear?: string | null
+  semester?: string | null
+  contacts?: ParentContactRow[]
+}
+
+export type ParentContactsByClassParentRow = {
+  class_section_id?: number
+  primary_id?: number
+  primary_name?: string
+  primary_phone?: string | null
+  primary_member?: string | null
+  second_id?: number
+  second_name?: string
+  second_phone?: string | null
+  second_member?: string | null
+}
+
+export type ParentContactsByClassSection = {
+  class_section_id?: number
+  class_section_name?: string
+  school_year?: string
+  semester?: string
+  parents?: ParentContactsByClassParentRow[]
+}
+
+export type WhatsappParentContactsByClassResponse = {
+  classSections?: ParentContactsByClassSection[]
+}
+
+export async function fetchWhatsappManageLinks(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<WhatsappManageLinksResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`${BASE}/manage-links${suffix}`)
+}
+
+export async function saveWhatsappLink(payload: {
+  class_section_id: number
+  class_section_name?: string
+  invite_link: string
+  active?: boolean
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`${BASE}/save-link`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function sendWhatsappInvites(payload: {
+  mode: 'all' | 'class' | 'parents'
+  class_section_id?: number | null
+  parent_ids?: number[]
+}): Promise<{ ok?: boolean; message?: string }> {
+  return apiFetch(`${BASE}/send-invites`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchWhatsappParentContacts(params?: {
+  school_year?: string
+  semester?: string
+}): Promise<WhatsappParentContactsResponse> {
+  const qs = new URLSearchParams()
+  if (params?.school_year) qs.set('school_year', params.school_year)
+  if (params?.semester) qs.set('semester', params.semester)
+  const suffix = qs.toString() ? `?${qs}` : ''
+  return apiFetch(`${BASE}/parent-contacts${suffix}`)
+}
+
+export async function fetchWhatsappParentContactsByClass(): Promise<WhatsappParentContactsByClassResponse> {
+  return apiFetch(`${BASE}/parent-contacts-by-class`)
+}
+
+export async function updateWhatsappMembership(payload: {
+  class_section_id: number
+  school_year?: string
+  semester?: string
+  primary_id: number
+  second_id?: number
+  primary_member?: string
+  second_member?: string
+}): Promise<{ status?: string; message?: string }> {
+  return apiFetch(`${BASE}/update-membership`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}

src/auth/AuthProvider.tsx

@@ -5,7 +5,7 @@ import {
   useMemo,
   useSyncExternalStore,
 } from 'react'
-import { setStoredToken, getStoredToken } from '../api/http'
+import { ApiHttpError, setStoredToken, getStoredToken } from '../api/http'
 import type { AuthUser } from '../api/types'
 import { loginRequest } from '../api/session'
 
@@ -98,7 +98,19 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
 
   const login = useCallback(async (email: string, password: string) => {
-    const result = await loginRequest(email, password)
+    let result: Awaited<ReturnType<typeof loginRequest>>
+    try {
+      result = await loginRequest(email, password)
+    } catch (e) {
+      const message =
+        e instanceof ApiHttpError
+          ? e.message
+          : e instanceof Error
+            ? e.message
+            : 'Could not reach the server.'
+      return { ok: false as const, message }
+    }
+
     if (result.status === false) {
       return {
         ok: false as const,

src/components/CiPartials.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode } from 'react'
 
 export type CiFlashMessage = {
   id?: string
@@ -527,36 +527,100 @@ export function CiNoInvoiceFound({ message = 'No invoice found.' }: { message?:
 }
 
 export function CiPublicFooter({ year = new Date().getFullYear() }: { year?: number }) {
+  const footerRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const root = footerRef.current
+    if (!root) return
+    const links = root.querySelectorAll<HTMLAnchorElement>('a.pdf-link')
+    const controllers: AbortController[] = []
+
+    links.forEach((link) => {
+      const pdfUrl = link.getAttribute('href')
+      if (!pdfUrl) return
+      const ac = new AbortController()
+      controllers.push(ac)
+      fetch(pdfUrl, { method: 'HEAD', signal: ac.signal })
+        .then((response) => {
+          if (!response.ok) {
+            link.style.opacity = '0.7'
+            link.title = 'File might be temporarily unavailable'
+            console.warn('PDF might be missing:', pdfUrl)
+            link.addEventListener('click', function onClick(e) {
+              if (!confirm('The PDF file might be temporarily unavailable. Try to open it anyway?')) {
+                e.preventDefault()
+              }
+            })
+          }
+        })
+        .catch(() => {
+          link.style.opacity = '0.7'
+          link.title = 'File check failed'
+        })
+    })
+
+    return () => controllers.forEach((c) => c.abort())
+  }, [])
+
   return (
-    <footer className="footer mt-auto custom-footer text-white py-4">
-      <div className="container">
-        <div className="row align-items-start justify-content-between">
-          <div className="col-md-6 col-12 mb-3 mb-md-0 text-md-start">
-            <ul className="list-unstyled mb-0 info-list">
-              <li>
-                <i className="fa fa-map-marker-alt me-2" aria-hidden />
-                5 Courthouse Lane, Chelmsford, MA 01824
-              </li>
-              <li>
-                <i className="fa fa-phone-alt me-2" aria-hidden />
-                +1 978-364-0219
-              </li>
-              <li>
-                <i className="fa fa-envelope me-2" aria-hidden />
-                alrahma.isgl@gmail.com
-              </li>
-            </ul>
-          </div>
-          <div className="col-md-4 col-12 text-center text-md-end">
-            <ul className="list-unstyled mb-0 info-list">
-              <li><a href="/privacy_policy.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />Privacy Policy</a></li>
-              <li><a href="/terms_of_service.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />Terms of Service</a></li>
-              <li><a href="/account_creation_guide.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />How To Create An Account</a></li>
-            </ul>
+    <footer ref={footerRef} className="footer mt-auto custom-footer custom-footer--bar text-white px-3 shadow-sm">
+      <div className="custom-footer__glow" aria-hidden />
+      <div className="container-fluid custom-footer__container">
+        <div className="custom-footer__bar">
+          <div className="custom-footer__meta" aria-label="Contact">
+            <span className="custom-footer__meta-item">
+              <i className="fa fa-map-marker-alt custom-footer__meta-ico" aria-hidden />
+              <span>5 Courthouse Lane, Chelmsford, MA 01824</span>
+            </span>
+            <a className="custom-footer__meta-link" href="tel:+19783640219">
+              <i className="fa fa-phone-alt custom-footer__meta-ico" aria-hidden />
+              +1 978-364-0219
+            </a>
+            <a className="custom-footer__meta-link" href="mailto:alrahma.isgl@gmail.com">
+              <i className="fa fa-envelope custom-footer__meta-ico" aria-hidden />
+              alrahma.isgl@gmail.com
+            </a>
           </div>
+          <nav className="custom-footer__docs" aria-label="Policies and guides">
+            <a
+              href="/privacy_policy.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="privacy_policy.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              Privacy Policy
+            </a>
+            <a
+              href="/terms_of_service.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="terms_of_service.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              Terms of Service
+            </a>
+            <a
+              href="/account_creation_guide.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="account_creation_guide.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              How To Create An Account
+            </a>
+          </nav>
+        </div>
+        <div className="custom-footer__copyright-row">
+          <p className="custom-footer__copyright mb-0">
+            © {year}{' '}
+            <span className="custom-footer__copyright-brand">Al Rahma Sunday School</span> by ISGL. All Rights Reserved.
+          </p>
         </div>
       </div>
-      <p className="text-center text-white mb-0 mt-3">© {year} Al Rahma Sunday School by ISGL. All Rights Reserved.</p>
     </footer>
   )
 }

src/hooks/useContinueWithRole.ts

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { fetchDashboardRoute } from '../api/session'
+import { useAuth } from '../auth/AuthProvider'
+import { spaPathFromCiUrl } from '../lib/ciSpaPaths'
+
+/** Shared navigation after JWT login when the account has multiple roles (CI `welcome_back` / `select_role`). */
+export function useContinueWithRole() {
+  const { setSelectedRole } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [busy, setBusy] = useState(false)
+  const [busyRole, setBusyRole] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const from = (location.state as { from?: string } | null)?.from ?? '/app/home'
+
+  async function continueWithRole(nextRole: string) {
+    setBusy(true)
+    setBusyRole(nextRole)
+    setError(null)
+    try {
+      setSelectedRole(nextRole)
+      const roleLower = nextRole.toLowerCase()
+      const fromApp = from.startsWith('/app') ? from : ''
+      const hasDeepLink = Boolean(fromApp && fromApp !== '/app/home')
+
+      let target: string
+      if (hasDeepLink) {
+        target = fromApp
+      } else if (roleLower === 'parent') {
+        target = '/app/parent/home'
+      } else if (roleLower === 'teacher' || roleLower === 'teacher_assistant') {
+        target = '/app/teacher_dashboard'
+      } else {
+        target = '/app/home'
+        try {
+          const dash = await fetchDashboardRoute()
+          const route = dash.data?.dashboard?.route
+          const mapped = spaPathFromCiUrl(route)
+          if (mapped) target = mapped
+        } catch {
+          /* keep default */
+        }
+      }
+
+      navigate(target, { replace: true })
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to continue.')
+    } finally {
+      setBusy(false)
+      setBusyRole(null)
+    }
+  }
+
+  return { continueWithRole, busy, busyRole, error, setError, from }
+}

src/layout/MainLayout.tsx

@@ -1,6 +1,9 @@
-import { useState } from 'react'
-import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { useAuth } from '../auth/AuthProvider'
+import { CiPublicFooter } from '../components/CiPartials'
+import { readPortalStylePrefs, resolvePortalColorMode, type PortalStylePrefs } from '../lib/portalAppearance'
+import { isParentPortalRole, isTeacherPortalRole } from '../lib/portalRoles'
 
 const parentNavItems = [
   { to: '/app/parent/home', icon: 'bi bi-house-door', label: 'Dashboard' },
@@ -16,20 +19,152 @@ const parentNavItems = [
   { to: '/app/parent/scores', icon: 'bi bi-clipboard-data', label: 'Scores' },
 ] as const
 
+/** Teacher top shortcuts (aligned with legacy teacher navbar). */
+const teacherNavItems = [
+  { to: '/app/teacher_dashboard', icon: 'bi bi-house-door', label: 'Dashboard' },
+  { to: '/app/teacher/showupdate-attendance', icon: 'bi bi-calendar-check', label: 'Attendance' },
+  { to: '/app/teacher/inventory/book-distribute', icon: 'bi bi-book', label: 'Books' },
+  { to: '/app/teacher/calendar', icon: 'bi bi-calendar2-week', label: 'Calendar' },
+  { to: '/app/teacher/class-view', icon: 'bi bi-pencil-square', label: 'Class' },
+  { to: '/app/teacher/class-progress-submit', icon: 'bi bi-card-checklist', label: 'Class Progress' },
+  { to: '/app/teacher/competition-scores', icon: 'bi bi-trophy', label: 'Competitions' },
+  { to: '/app/teacher/exam-drafts', icon: 'bi bi-file-earmark-text', label: 'Exam Drafts' },
+  { to: '/app/teacher/print-requests', icon: 'bi bi-printer', label: 'Print' },
+  { to: '/app/student/score-card/list', icon: 'bi bi-card-text', label: 'Score Card' },
+  { to: '/app/teacher/scores', icon: 'bi bi-bar-chart-line', label: 'Scores' },
+  { to: '/app/teacher/absence-vacation', icon: 'bi bi-megaphone', label: 'TimeOff' },
+] as const
+
+function initialsFromName(name: string | undefined | null): string {
+  const t = name?.trim()
+  if (!t) return '?'
+  const parts = t.split(/\s+/).filter(Boolean)
+  if (parts.length >= 2) {
+    const a = parts[0][0] ?? ''
+    const b = parts[parts.length - 1][0] ?? ''
+    return (a + b).toUpperCase()
+  }
+  if (parts[0].length >= 2) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] ?? '?').toUpperCase()
+}
+
+function formatRoleLabel(slug: string): string {
+  const t = slug.trim()
+  if (!t) return ''
+  return t.replace(/_/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase())
+}
+
 export function MainLayout() {
   const { user, logout, selectedRole, roles } = useAuth()
   const navigate = useNavigate()
+  const location = useLocation()
   const [navOpen, setNavOpen] = useState(false)
+  const [portalStyle, setPortalStyle] = useState<PortalStylePrefs>(readPortalStylePrefs)
+  const [osPrefersDark, setOsPrefersDark] = useState(() =>
+    typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches,
+  )
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const clusterRef = useRef<HTMLDivElement>(null)
+  const userMenuTriggerRef = useRef<HTMLButtonElement>(null)
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }, [])
+
+  const openUserMenu = useCallback(() => {
+    clearCloseTimer()
+    setUserMenuOpen(true)
+  }, [clearCloseTimer])
+
+  const closeUserMenu = useCallback(() => {
+    clearCloseTimer()
+    const root = clusterRef.current
+    if (root?.contains(document.activeElement)) {
+      userMenuTriggerRef.current?.focus()
+    }
+    setUserMenuOpen(false)
+  }, [clearCloseTimer])
+
+  const scheduleCloseUserMenu = useCallback(() => {
+    clearCloseTimer()
+    closeTimerRef.current = setTimeout(() => {
+      const root = clusterRef.current
+      if (root?.contains(document.activeElement)) {
+        closeTimerRef.current = null
+        return
+      }
+      closeUserMenu()
+      closeTimerRef.current = null
+    }, 200)
+  }, [clearCloseTimer, closeUserMenu])
+
+  useEffect(() => () => clearCloseTimer(), [clearCloseTimer])
+
+  const onClusterBlurCapture = useCallback(() => {
+    window.setTimeout(() => {
+      const root = clusterRef.current
+      if (!root || !root.contains(document.activeElement)) {
+        closeUserMenu()
+      }
+    }, 0)
+  }, [closeUserMenu])
+
+  const onAvatarClick = useCallback(() => {
+    if (typeof window === 'undefined') return
+    if (window.matchMedia('(hover: none) and (pointer: coarse)').matches) {
+      setUserMenuOpen((open) => !open)
+    }
+  }, [])
+
+  const closeMenus = useCallback(() => {
+    closeUserMenu()
+    setNavOpen(false)
+  }, [closeUserMenu])
+
+  useEffect(() => {
+    const sync = () => setPortalStyle(readPortalStylePrefs())
+    window.addEventListener('alrahma-portal-style', sync)
+    return () => window.removeEventListener('alrahma-portal-style', sync)
+  }, [])
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => setOsPrefersDark(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
   const role = selectedRole ?? roles[0] ?? ''
+  const canSwitchRole = roles.length > 1
   const dashboardPath =
-    role === 'parent'
+    isParentPortalRole(role)
       ? '/app/parent/home'
-      : role === 'teacher' || role === 'teacher_assistant'
-        ? '/app/teacher/dashboard'
+      : isTeacherPortalRole(role)
+        ? '/app/teacher_dashboard'
         : '/app/home'
 
+  const mainNavItems = isParentPortalRole(role)
+    ? parentNavItems
+    : isTeacherPortalRole(role)
+      ? teacherNavItems
+      : []
+
+  const initials = initialsFromName(user?.name)
+  const resolvedColorMode = resolvePortalColorMode(portalStyle, osPrefersDark)
+
   return (
-    <div className="main-layout-app d-flex flex-column min-vh-100">
+    <div
+      className="main-layout-app d-flex flex-column min-vh-100"
+      data-portal-density={portalStyle.density}
+      data-portal-font-scale={portalStyle.fontScale}
+      data-portal-font-family={portalStyle.fontFamily}
+      data-portal-accent={portalStyle.accent}
+      data-portal-color-mode={resolvedColorMode}
+    >
       <header className="navbar navbar-expand-lg custom-navbar sticky-top shadow-sm px-3">
         <div className="container-fluid">
           <Link className="navbar-brand fw-semibold d-inline-flex align-items-center gap-2" to={dashboardPath}>
@@ -47,32 +182,152 @@ export function MainLayout() {
             <span className="navbar-toggler-icon" />
           </button>
           <div id="mainLayoutNavbar" className={`collapse navbar-collapse ${navOpen ? 'show' : ''}`}>
-            <nav className="ms-lg-auto me-lg-3 my-3 my-lg-0 main-layout-menu parent-navbar-menu" aria-label="Parent navigation">
-              {parentNavItems.map((item) => (
-                <NavLink
-                  key={item.to}
-                  to={item.to}
-                  className={({ isActive }) => `nav-link parent-navbar-link ${isActive ? 'active fw-semibold' : ''}`}
-                  onClick={() => setNavOpen(false)}
-                >
-                  <i className={item.icon} aria-hidden />
-                  <span>{item.label}</span>
-                </NavLink>
-              ))}
+            <nav
+              className="ms-lg-auto me-lg-2 my-2 my-lg-0 main-layout-menu"
+              aria-label={
+                isTeacherPortalRole(role)
+                  ? 'Teacher portal navigation'
+                  : isParentPortalRole(role)
+                    ? 'Parent portal navigation'
+                    : 'Portal navigation'
+              }
+            >
+              <ul className="navbar-nav list-unstyled parent-navbar-menu mb-0">
+                {mainNavItems.map((item) => (
+                  <li key={item.to} className="nav-item">
+                    <NavLink
+                      to={item.to}
+                      end={
+                        item.to === '/app/teacher_dashboard' ||
+                        item.to === '/app/parent/home' ||
+                        item.to === '/app/student/score-card/list'
+                      }
+                      className={({ isActive }) =>
+                        `nav-link parent-navbar-link ${isActive ? 'active fw-semibold' : ''}`
+                      }
+                      onClick={() => setNavOpen(false)}
+                    >
+                      <i className={item.icon} aria-hidden />
+                      <span>{item.label}</span>
+                    </NavLink>
+                  </li>
+                ))}
+              </ul>
             </nav>
-            <div className="d-flex align-items-center gap-2">
-              <span className="navbar-text small">{user?.name}</span>
-              <button
-                type="button"
-                className="btn btn-outline-light btn-sm"
-                onClick={() => {
-                  logout()
-                  navigate('/login', { replace: true })
-                }}
+            {user ? (
+              <div
+                ref={clusterRef}
+                className="main-layout-user-cluster d-flex align-items-center ms-lg-2"
+                onMouseEnter={openUserMenu}
+                onMouseLeave={scheduleCloseUserMenu}
+                onFocusCapture={openUserMenu}
+                onBlurCapture={onClusterBlurCapture}
               >
-                Log out
-              </button>
-            </div>
+                <div className="main-layout-user-avatar-wrap">
+                  <button
+                    ref={userMenuTriggerRef}
+                    type="button"
+                    className="main-layout-user-trigger"
+                    id="main-layout-user-trigger"
+                    aria-haspopup="true"
+                    aria-expanded={userMenuOpen}
+                    aria-controls="main-layout-user-menu"
+                    onClick={onAvatarClick}
+                  >
+                    <div className="main-layout-user-avatar rounded-circle text-white fw-semibold d-flex align-items-center justify-content-center">
+                      <span className="main-layout-user-initials">{initials}</span>
+                    </div>
+                  </button>
+                  {canSwitchRole ? (
+                    <Link
+                      to="/app/select-role"
+                      state={{ from: location.pathname }}
+                      className="main-layout-user-avatar-chip main-layout-user-avatar-chip--roles"
+                      title="Switch role"
+                      aria-label="Switch role"
+                      onClick={closeMenus}
+                    >
+                      <i className="bi bi-arrow-left-right" aria-hidden />
+                    </Link>
+                  ) : null}
+                  <Link
+                    to="/app/portal-style"
+                    className="main-layout-user-avatar-chip main-layout-user-avatar-chip--style"
+                    title="Style edit"
+                    aria-label="Style edit"
+                    onClick={closeMenus}
+                  >
+                    <i className="bi bi-palette" aria-hidden />
+                  </Link>
+                </div>
+                <div
+                  id="main-layout-user-menu"
+                  role="region"
+                  aria-labelledby="main-layout-user-trigger"
+                  aria-hidden={!userMenuOpen}
+                  className={`main-layout-user-dropdown card border-0 shadow-sm py-2 ${userMenuOpen ? 'is-open' : ''}`}
+                >
+                  <div className="px-3 pb-1">
+                    <div className="main-layout-user-dropdown-header">Signed in as</div>
+                    <div className="small text-dark text-truncate fw-semibold" title={user.name}>
+                      {user.name}
+                    </div>
+                    {role ? (
+                      <>
+                        <div className="main-layout-user-dropdown-header mt-2">Role</div>
+                        <div
+                          className="small text-dark text-truncate fw-semibold main-layout-user-dropdown-role"
+                          title={formatRoleLabel(role)}
+                        >
+                          {formatRoleLabel(role)}
+                        </div>
+                      </>
+                    ) : null}
+                  </div>
+                  <div className="dropdown-divider mx-2 my-1" />
+                  {canSwitchRole ? (
+                    <Link
+                      className="dropdown-item d-flex align-items-center gap-2 py-2"
+                      to="/app/select-role"
+                      state={{ from: location.pathname }}
+                      onClick={closeMenus}
+                    >
+                      <i className="bi bi-arrow-left-right" aria-hidden />
+                      Switch role
+                    </Link>
+                  ) : null}
+                  <Link
+                    className="dropdown-item d-flex align-items-center gap-2 py-2"
+                    to="/app/portal-style"
+                    onClick={closeMenus}
+                  >
+                    <i className="bi bi-palette" aria-hidden />
+                    Style edit
+                  </Link>
+                  <Link
+                    className="dropdown-item d-flex align-items-center gap-2 py-2"
+                    to="/app/account"
+                    onClick={closeMenus}
+                  >
+                    <i className="bi bi-gear" aria-hidden />
+                    Settings
+                  </Link>
+                  <div className="dropdown-divider mx-2 my-1" />
+                  <button
+                    type="button"
+                    className="dropdown-item d-flex align-items-center gap-2 py-2 text-danger"
+                    onClick={() => {
+                      closeMenus()
+                      logout()
+                      navigate('/login', { replace: true })
+                    }}
+                  >
+                    <i className="bi bi-box-arrow-right" aria-hidden />
+                    Log out
+                  </button>
+                </div>
+              </div>
+            ) : null}
           </div>
         </div>
       </header>
@@ -81,12 +336,7 @@ export function MainLayout() {
         <Outlet />
       </main>
 
-      <footer className="footer py-4 mt-auto border-top">
-        <div className="container text-muted small d-flex flex-wrap justify-content-between gap-2">
-          <span>Al Rahma Sunday School</span>
-          <span>Parent and Teacher Portal</span>
-        </div>
-      </footer>
+      <CiPublicFooter />
 
       <div className="modal fade" id="familyCardModal" tabIndex={-1} aria-hidden="true">
         <div className="modal-dialog modal-xl modal-dialog-scrollable">

src/layout/ManagementLayout.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, type ReactNode } from 'react'
-import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { fetchNavMenu } from '../api/session'
 import type { NavItem } from '../api/types'
 import { useAuth } from '../auth/AuthProvider'
@@ -9,31 +9,55 @@ import {
 } from '../lib/ciSpaPaths'
 
 function normalizeNavItems(payload: unknown): NavItem[] {
-  if (Array.isArray(payload)) {
-    return payload as NavItem[]
+  const rawItems = Array.isArray(payload)
+    ? (payload as NavItem[])
+    : payload &&
+        typeof payload === 'object' &&
+        'data' in payload &&
+        Array.isArray((payload as { data: unknown }).data)
+      ? ((payload as { data: NavItem[] }).data ?? [])
+      : []
+
+  if (rawItems.length === 0) return []
+  if (rawItems.some((item) => Array.isArray(item.children) && item.children.length > 0)) {
+    return rawItems
   }
-  if (
-    payload &&
-    typeof payload === 'object' &&
-    'data' in payload &&
-    Array.isArray((payload as { data: unknown }).data)
-  ) {
-    return (payload as { data: NavItem[] }).data
+
+  const byId = new Map<number, NavItem>()
+  for (const item of rawItems) {
+    byId.set(item.id, { ...item, children: [] })
   }
-  return []
+
+  const tree: NavItem[] = []
+  for (const item of byId.values()) {
+    const parentId = item.menu_parent_id ?? null
+    if (parentId != null && byId.has(parentId)) {
+      byId.get(parentId)?.children.push(item)
+    } else {
+      tree.push(item)
+    }
+  }
+
+  return tree
 }
 
-function NavTree({ items }: { items: NavItem[] }) {
+function branchContainsPath(item: NavItem, pathname: string): boolean {
+  const spa = item.url ? spaPathFromCiUrl(item.url) : null
+  if (spa && pathname.startsWith(spa)) return true
+  return (item.children ?? []).some((child) => branchContainsPath(child, pathname))
+}
+
+function NavTree({ items, pathname }: { items: NavItem[]; pathname: string }) {
   return (
-    <ul className="nav flex-column gap-1 ps-0 mb-0 list-unstyled">
+    <ul className="nav flex-column gap-1 ps-0 mb-0 list-unstyled mgmt-nav-tree">
       {items.map((item) => (
-        <NavBranch key={item.id} item={item} depth={0} />
+        <NavBranch key={item.id} item={item} depth={0} pathname={pathname} />
       ))}
     </ul>
   )
 }
 
-function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
+function NavBranch({ item, depth, pathname }: { item: NavItem; depth: number; pathname: string }) {
   const enabled = item.is_enabled !== 0
   if (!enabled) return null
 
@@ -47,10 +71,26 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
     <i className={`${item.icon_class} me-2`} aria-hidden />
   ) : null
 
+  const children = (item.children ?? []).filter((c) => c.is_enabled !== 0)
+  const hasChildren = children.length > 0
+  const [open, setOpen] = useState(() => hasChildren && branchContainsPath(item, pathname))
+
+  useEffect(() => {
+    if (hasChildren && branchContainsPath(item, pathname)) {
+      setOpen(true)
+    }
+  }, [hasChildren, item, pathname])
+
   const linkInner = (
     <>
       {icon}
       <span className="nav-label-chip">{label}</span>
+      {hasChildren ? (
+        <i
+          className={`bi ${open ? 'bi-chevron-down' : 'bi-chevron-right'} ms-auto`}
+          aria-hidden
+        />
+      ) : null}
     </>
   )
 
@@ -58,6 +98,12 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
     `nav-link rounded py-2 px-2 ${isActive ? 'active fw-semibold' : ''}`
 
   let main: ReactNode
+  const handleBranchToggle = () => {
+    if (hasChildren) {
+      setOpen((value) => !value)
+    }
+  }
+
   if (external) {
     main = (
       <a
@@ -66,33 +112,54 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
         target={item.target || '_self'}
         rel={item.target === '_blank' ? 'noreferrer noopener' : undefined}
         style={{ paddingLeft: pad }}
+        onClick={hasChildren ? (event) => {
+          event.preventDefault()
+          handleBranchToggle()
+        } : undefined}
       >
         {linkInner}
       </a>
     )
-  } else if (spa) {
+  } else if (spa && !hasChildren) {
     main = (
       <NavLink end to={spa} className={linkClass} style={{ paddingLeft: pad }}>
         {linkInner}
       </NavLink>
     )
+  } else if (spa && hasChildren) {
+    main = (
+      <button
+        type="button"
+        className="nav-link rounded py-2 px-2 w-100 text-start d-flex align-items-center"
+        style={{ paddingLeft: pad }}
+        aria-expanded={open}
+        onClick={handleBranchToggle}
+      >
+        {linkInner}
+      </button>
+    )
   } else {
     main = (
-      <span className="nav-link disabled" style={{ paddingLeft: pad }}>
+      <button
+        type="button"
+        className="nav-link rounded py-2 px-2 w-100 text-start d-flex align-items-center border-0 bg-transparent"
+        style={{ paddingLeft: pad }}
+        aria-expanded={hasChildren ? open : undefined}
+        onClick={hasChildren ? handleBranchToggle : undefined}
+        disabled={!hasChildren}
+      >
         {linkInner}
-      </span>
+      </button>
     )
   }
 
-  const children = (item.children ?? []).filter((c) => c.is_enabled !== 0)
-
   return (
-    <li>
+    <li className={`mgmt-nav-branch mgmt-nav-depth-${Math.min(depth, 4)}`}>
       {main}
-      {children.length > 0 ? (
-        <ul className="nav flex-column gap-1 ps-0 mb-0 mt-1 list-unstyled">
+      {children.length > 0 && open ? (
+        <ul className="nav flex-column gap-1 ps-0 mb-0 mt-1 list-unstyled mgmt-nav-subtree">
           {children.map((ch) => (
-            <NavBranch key={ch.id} item={ch} depth={depth + 1} />
+            <NavBranch key={ch.id} item={ch} depth={depth + 1} pathname={pathname} />
           ))}
         </ul>
       ) : null}
@@ -103,6 +170,7 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
 export function ManagementLayout() {
   const { user, logout } = useAuth()
   const navigate = useNavigate()
+  const location = useLocation()
   const [items, setItems] = useState<NavItem[]>([])
   const [menuError, setMenuError] = useState<string | null>(null)
   const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -129,6 +197,8 @@ export function ManagementLayout() {
     }
   }, [])
 
+  const navTree = useMemo(() => normalizeNavItems(items), [items])
+
   return (
     <div className={`management-app d-flex flex-column min-vh-100 ${sidebarOpen ? 'mgmt-sidebar-open' : ''}`}>
       <header className="navbar navbar-dark sticky-top border-bottom shadow-sm px-3 py-2">
@@ -175,12 +245,15 @@ export function ManagementLayout() {
       <div className="wrapper flex-grow-1">
         <aside id="navbarManagement" className="mgmt-sidebar" data-mgmt-menu-mode="dark">
           <div className="mgmt-sidebar-content">
-            <div className="px-2 py-2 small text-muted border-bottom mb-2">Navigation</div>
+            <div className="mgmt-sidebar-header px-2 py-2 mb-2">
+              <div className="mgmt-sidebar-eyebrow">Management</div>
+              <div className="mgmt-sidebar-title">Navigation</div>
+            </div>
             <nav className="pb-3">
                 <NavLink
                   to="/app/home"
                   className={({ isActive }) =>
-                    `nav-link rounded mb-2 ${isActive ? 'active fw-semibold' : ''}`
+                    `nav-link rounded mb-2 mgmt-static-link ${isActive ? 'active fw-semibold' : ''}`
                   }
                 >
                   <i className="bi bi-house-door me-2" aria-hidden />
@@ -189,7 +262,7 @@ export function ManagementLayout() {
                 <NavLink
                   to="/app/browse"
                   className={({ isActive }) =>
-                    `nav-link rounded mb-2 ${isActive ? 'active fw-semibold' : ''}`
+                    `nav-link rounded mb-2 mgmt-static-link ${isActive ? 'active fw-semibold' : ''}`
                   }
                 >
                   <i className="bi bi-diagram-3 me-2" aria-hidden />
@@ -198,7 +271,7 @@ export function ManagementLayout() {
                 {menuError ? (
                   <div className="alert alert-warning small py-2">{menuError}</div>
                 ) : (
-                  <NavTree items={items} />
+                  <NavTree items={navTree} pathname={location.pathname} />
                 )}
               </nav>
             </div>

src/layout/PublicLayout.css

@@ -0,0 +1,28 @@
+/* Public site chrome (green header) — logo + title */
+.public-shell .public-navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.public-shell .public-navbar-logo-wrap {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+/* Bitmap is clipped to a circle and fills the disc (same idea as `.main-layout-logo`). */
+.public-shell .public-navbar-logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  border: 2px solid rgba(255, 255, 255, 0.45);
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.95);
+}

src/layout/PublicLayout.tsx

@@ -1,5 +1,7 @@
 import { Link, Outlet } from 'react-router-dom'
 import { useAuth } from '../auth/AuthProvider'
+import { CiPublicFooter } from '../components/CiPartials'
+import './PublicLayout.css'
 
 export function PublicLayout() {
   const { isAuthenticated, user, logout } = useAuth()
@@ -11,8 +13,16 @@ export function PublicLayout() {
         style={{ backgroundColor: '#2c9b09' }}
       >
         <div className="container">
-          <Link className="navbar-brand fw-semibold" to="/">
-            Al Rahma Sunday School
+          <Link className="navbar-brand fw-semibold public-navbar-brand" to="/">
+            <span className="public-navbar-logo-wrap" aria-hidden>
+              <img
+                src="/images/logo.png"
+                alt=""
+                className="public-navbar-logo"
+                decoding="async"
+              />
+            </span>
+            <span>Al Rahma Sunday School</span>
           </Link>
           <button
             className="navbar-toggler"
@@ -32,11 +42,13 @@ export function PublicLayout() {
                   Home
                 </Link>
               </li>
-              <li className="nav-item">
-                <Link className="nav-link" to="/docs">
-                  API docs
-                </Link>
-              </li>
+              {isAuthenticated ? (
+                <li className="nav-item">
+                  <Link className="nav-link" to="/docs">
+                    API docs
+                  </Link>
+                </li>
+              ) : null}
               {isAuthenticated ? (
                 <>
                   <li className="nav-item">
@@ -82,11 +94,7 @@ export function PublicLayout() {
         <Outlet />
       </main>
 
-      <footer className="border-top bg-white py-4 mt-auto">
-        <div className="container text-center text-muted small">
-          <p className="mb-0">Al Rahma Sunday School</p>
-        </div>
-      </footer>
+      <CiPublicFooter />
     </div>
   )
 }

src/lib/apiOrigin.ts

@@ -1,12 +1,28 @@
-/** Prefix for Laravel API when the SPA is served from another origin (production). Empty in dev with Vite proxy. */
+const PROD_API_ORIGIN = 'https://api.alrahmaisgl.org'
+
+/**
+ * Laravel API base URL.
+ *
+ * **Vite dev:** same-origin `/api/...`; `vite.config.ts` proxies to the API (default `http://192.168.3.100:8000`).
+ * Override proxy target with **`VITE_PROXY_API`**. **`VITE_API_ORIGIN` is not used in dev** (avoids cross-origin from the browser).
+ *
+ * **Production build:** `VITE_API_ORIGIN` if set, else `PROD_API_ORIGIN`.
+ */
 export function apiOrigin(): string {
+  if (import.meta.env.DEV) {
+    return ''
+  }
+
   const v = import.meta.env.VITE_API_ORIGIN
-  const fallback = 'https://api.alrahmaisgl.org'
-  return typeof v === 'string' && v.trim() ? v.replace(/\/$/, '') : fallback
+  if (typeof v === 'string' && v.trim()) {
+    return v.replace(/\/$/, '')
+  }
+  return PROD_API_ORIGIN
 }
 
 export function apiUrl(path: string): string {
   const base = apiOrigin()
   const p = path.startsWith('/') ? path : `/${path}`
+  if (!base) return p
   return `${base}${p}`
 }

src/lib/ciRouteLookup.ts

@@ -1,6 +1,112 @@
 import { type CiRouteMetaEntry, ciRouteMeta } from './ciRouteMeta.generated'
 import { ciRouteManual } from './ciRouteManual'
 
+/** CI registry keys whose folder layout does not match the SPA route (see `App.tsx`). */
+const CI_REGISTRY_APP_PATH_OVERRIDES: Record<string, string> = {
+  // Nested views map to flat `/app/teacher/competition-scores` (+ dynamic detail route).
+  'teacher/competition_scores/index': '/app/teacher/competition-scores',
+  'teacher/competition_scores/scores': '/app/teacher/competition-scores',
+  /** CI `landing_page/teacher_dashboard.php` → SPA (underscore segment per legacy URL). */
+  'landing_page/teacher_dashboard': '/app/teacher_dashboard',
+  'flags/flags_management': '/app/administrator/flags/management',
+  'flags/processed_flags': '/app/administrator/flags/processed',
+  'flags/incident_analysis': '/app/administrator/flags/incident-analysis',
+  'grading/grading_main': '/app/grading',
+  'grading/below_sixty': '/app/grading/below-60',
+  'grading/below_sixty_email_editor': '/app/grading/below-60/email-editor',
+  'grading/comments': '/app/grading/scores/comments',
+  'grading/final': '/app/grading/scores/final',
+  'grading/homework': '/app/grading/scores/homework',
+  'grading/homework_tracking': '/app/grading/homework-tracking',
+  'grading/midterm': '/app/grading/scores/midterm',
+  'grading/participation': '/app/grading/participation',
+  'grading/placement': '/app/grading/placement',
+  /** Batch id is in the URL segment in CI; dynamic route uses `spaPathFromCiUrl` / placement-index when no id. */
+  'grading/placement_batch': '/app/grading/placement-index',
+  'grading/placement_index': '/app/grading/placement-index',
+  'grading/project': '/app/grading/scores/project',
+  'grading/quiz': '/app/grading/scores/quiz',
+  'grading/schedule_meeting': '/app/grading/schedule-meeting',
+  'grading/test': '/app/grading/scores/test',
+  'inventory/book/index': '/app/inventory/book',
+  'inventory/book/form': '/app/inventory/book/create',
+  'inventory/classroom/index': '/app/administrator/inventory/classroom',
+  'inventory/classroom/form': '/app/administrator/inventory/classroom/create',
+  'inventory/classroom/audit_form': '/app/administrator/inventory/classroom',
+  'inventory/kitchen/index': '/app/administrator/inventory/kitchen',
+  'inventory/kitchen/form': '/app/administrator/inventory/kitchen/create',
+  'inventory/office/index': '/app/administrator/inventory/office',
+  'inventory/office/form': '/app/administrator/inventory/office/create',
+  'inventory/movements/index': '/app/administrator/inventory/movements',
+  'inventory/movements/form': '/app/administrator/inventory/movements/create',
+  'inventory/movements/edit': '/app/administrator/inventory/movements',
+  'inventory/summary': '/app/administrator/inventory/summary',
+  'inventory/adjust_form': '/app/administrator/inventory/summary',
+  'inventory/teacher_distribute': '/app/teacher/inventory/book-distribute',
+  'attendance/teacher_attendance_month': '/app/admin/teacher-attendance/month',
+  'attendance/violations_pending': '/app/attendance/violations/pending',
+  'attendance/violations_notified': '/app/attendance/violations/notified',
+  'attendance/early_dismissals': '/app/attendance/early-dismissals',
+  'attendance/early_dismissals_add': '/app/attendance/early-dismissals/new',
+  /** CI `enroll_withdraw/new-students.php` — registered students list (JWT `registered-new-students`). */
+  'enroll_withdraw/new-students': '/app/admin/enrollment/new-students',
+  'enroll_withdraw/new_students': '/app/admin/enrollment/new-students',
+  'administrator/sections_auto_distribute': '/app/administrator/sections/auto-distribute',
+  'administrator/sections_promotion_totals': '/app/administrator/sections/promotion-totals',
+  /** CI `administrator/events/event_list.php` — school calendar list (`GET .../school-calendar/events`). */
+  'administrator/events/event_list': '/app/administrator/events',
+  'administrator/events': '/app/administrator/events',
+  'invoice_payment/invoice_management': '/app/administrator/invoice-payment',
+  /** PDF is generated server-side; SPA preview lives under invoice-payment/pdf/:id */
+  'invoice_payment/pdf_template': '/app/administrator/invoice-payment',
+  'notifications/list_active': '/app/notifications/active',
+  'notifications/list_deleted': '/app/notifications/deleted',
+  'payment/manual_pay': '/app/administrator/payment/manual-pay',
+  'payment/manual_payment': '/app/administrator/payment/manual-payment',
+  'payment/notification_management': '/app/administrator/payment/notification-management',
+  'payment/unpaid_parents': '/app/payment/unpaid-parents',
+  'payment/discount': '/app/administrator/payment/discount-apply-student',
+  'payment/extra_charges': '/app/admin/charges',
+  'payment/financial_report': '/app/administrator/payment/financial-report',
+  'payment/financial_report_summary': '/app/administrator/payment/financial-report-summary',
+  'payment/payment_redirect': '/app/parent/payment-redirect',
+  'policy/school_policy': '/school-policy',
+  'policy/picture_policy': '/picture-policy',
+  'print_requests/admin_index': '/app/admin/print-requests',
+  'print_requests/teacher_index': '/app/teacher/print-requests',
+  'printables_reports/sticker_form': '/app/printables_reports/stickers',
+  'printables_reports/stickers': '/app/printables_reports/stickers',
+  'printables_reports/badge_form': '/app/administrator/printables/badges',
+  'printables_reports/report_card': '/app/administrator/printables/report-cards',
+  'reimbursements/index': '/app/administrator/reimbursements',
+  'reimbursements/create': '/app/administrator/reimbursements/create',
+  'reimbursements/edit': '/app/administrator/reimbursements',
+  'reimbursements/under_processing': '/app/administrator/reimbursements/under-processing',
+  'report/combined': '/app/report/combined',
+  'rfid/rfid_coming_soon': '/app/rfid_coming_soon',
+  'rolepermission/list_roles': '/app/rolepermission/roles',
+  'rolepermission/permissionList': '/app/rolepermission/list_permissions',
+  'rolepermission/list_permissions': '/app/rolepermission/list_permissions',
+  'rolepermission/add_permission': '/app/rolepermission/permissions/create',
+  'rolepermission/add_role': '/app/rolepermission/roles/create',
+  'rolepermission/assign_role': '/app/rolepermission/assign',
+  'rolepermission/edit_permission': '/app/rolepermission/list_permissions',
+  'rolepermission/edit_role': '/app/rolepermission/roles',
+  'rolepermission/edit_role_permissions': '/app/rolepermission/roles',
+  'score_analysis/score_prediction': '/app/administrator/score-analysis/score-prediction',
+  'slips/preview_list': '/app/slips/preview',
+  'slips/slip_pdf': '/app/slips/print',
+  'staff/index': '/app/staff',
+  'staff/create': '/app/staff/create',
+  'student/score_card_list': '/app/student/score-card/list',
+  /** Detail view is reached with an id segment in the URL; map the view key to the list entry route. */
+  'student/score_card': '/app/student/score-card/list',
+  'whatsapp/manage_links': '/app/whatsapp/manage-links',
+  'whatsapp/parent_contacts': '/app/whatsapp/parent-contacts',
+  'whatsapp/parent_contacts_by_class': '/app/whatsapp/parent-contacts-by-class',
+  'winners/competitions/index': '/app/winners/competitions',
+}
+
 /** Match CI `app/Views/...` keys: lowercase, hyphens in URL map to underscores. */
 export function getCiMeta(splat: string): CiRouteMetaEntry | null {
   const raw = splat
@@ -16,6 +122,10 @@ export function getCiMeta(splat: string): CiRouteMetaEntry | null {
 
 /** Build canonical SPA path from a registry key (snake segments) using kebab-case segments. */
 export function ciRegistryKeyToAppPath(routeKey: string): string {
+  const normalized = routeKey.trim().toLowerCase()
+  const override = CI_REGISTRY_APP_PATH_OVERRIDES[normalized]
+  if (override) return override
+
   const parts = routeKey.split('/').map((seg) => seg.replace(/_/g, '-'))
   return `/app/${parts.join('/')}`
 }

src/lib/ciSpaPaths.ts

@@ -9,44 +9,130 @@ export function spaPathFromCiUrl(url: string | null | undefined): string | null
   const path = u.replace(/^\/+/, '').replace(/\/+$/, '')
   if (!path) return '/app/home'
 
-  const slug = path
+  const querySuffix = path.includes('?') ? `?${path.slice(path.indexOf('?') + 1)}` : ''
+  const pathOnly = path.split('?')[0] ?? path
+
+  const slug = pathOnly
     .split('/')
     .map((s) => s.trim())
     .filter(Boolean)
     .map((s) => s.toLowerCase())
     .join('/')
 
+  const competitionScoresDetail = /^teacher\/competition_scores\/scores\/(\d+)$/.exec(slug)
+  if (competitionScoresDetail) {
+    return `/app/teacher/competition-scores/${competitionScoresDetail[1]}${querySuffix}`
+  }
+
+  const teacherMessage = /^teacher\/teacher_message\/(\d+)$/.exec(slug)
+  if (teacherMessage) {
+    return `/app/teacher/messages/${teacherMessage[1]}${querySuffix}`
+  }
+
+  const gradingScore = /^grading\/(homework|quiz|project|test|midterm|final|comments)$/.exec(slug)
+  if (gradingScore) {
+    return `/app/grading/scores/${gradingScore[1]}${querySuffix}`
+  }
+
+  const placementBatchDetail = /^grading\/placement_batch\/(\d+)$/.exec(slug)
+  if (placementBatchDetail) {
+    return `/app/grading/placement-batch/${placementBatchDetail[1]}${querySuffix}`
+  }
+
+  const inventoryEdit = /^inventory\/edit\/(\d+)$/.exec(slug)
+  if (inventoryEdit) {
+    return `/app/administrator/inventory/edit/${inventoryEdit[1]}${querySuffix}`
+  }
+  const inventoryAudit = /^inventory\/classroom\/audit\/(\d+)$/.exec(slug)
+  if (inventoryAudit) {
+    return `/app/administrator/inventory/classroom/${inventoryAudit[1]}/audit${querySuffix}`
+  }
+  const inventoryAdjust = /^inventory\/adjust\/(\d+)$/.exec(slug)
+  if (inventoryAdjust) {
+    return `/app/administrator/inventory/items/${inventoryAdjust[1]}/adjust${querySuffix}`
+  }
+  const inventoryMovementEdit = /^inventory\/movements\/edit\/(\d+)$/.exec(slug)
+  if (inventoryMovementEdit) {
+    return `/app/administrator/inventory/movements/${inventoryMovementEdit[1]}/edit${querySuffix}`
+  }
+
+  const userEdit = /^user\/edit\/(\d+)$/.exec(slug)
+  if (userEdit) {
+    return `/app/user/edit/${userEdit[1]}${querySuffix}`
+  }
+
+  const authUserPw = /^user\/set_authorized_user_password\/(\d+)$/.exec(slug)
+  if (authUserPw) {
+    return `/set-authorized-user-password/${authUserPw[1]}${querySuffix}`
+  }
+
   const shortcuts: Record<string, string> = {
     'landing_page/guest_dashboard': '/app/home',
     'landing_page/parent_dashboard': '/app/parent/home',
-    'teacher/dashboard': '/app/teacher/dashboard',
+    'landing_page/teacher_dashboard': '/app/teacher_dashboard',
+    'teacher/dashboard': '/app/teacher_dashboard',
+    'teacher/no_classes': '/app/teacher/no-classes',
+    'teacher/select_semester': '/app/teacher/select-semester',
+    'teacher/trash': '/app/teacher/trash',
+    'teacher/inbox': '/app/teacher/inbox',
+    'teacher/sent': '/app/teacher/sent',
+    'teacher/competition_scores/index': '/app/teacher/competition-scores',
+    'teacher/absence_vacation': '/app/teacher/absence-vacation',
+    'teacher/add_final_exam': '/app/teacher/add-final-exam',
+    'teacher/add_homework': '/app/teacher/add-homework',
+    'teacher/add_midterm_exam': '/app/teacher/add-midterm-exam',
+    'teacher/add_participation': '/app/teacher/add-participation',
+    'teacher/add_project': '/app/teacher/add-project',
+    'teacher/add_quiz': '/app/teacher/add-quiz',
+    'teacher/add_quiz_column_form': '/app/teacher/add-quiz-column-form',
+    'teacher/calendar': '/app/teacher/calendar',
+    'teacher/class_progress_history': '/app/teacher/class-progress-history',
+    'teacher/class_progress_submit': '/app/teacher/class-progress-submit',
+    'teacher/class_progress_view': '/app/teacher/class-progress-view',
+    'teacher/class_view': '/app/teacher/class-view',
+    'teacher/drafts': '/app/teacher/drafts',
+    'teacher/exam_drafts': '/app/teacher/exam-drafts',
+    'teacher/homework_list': '/app/teacher/homework-list',
+    'teacher/scores': '/app/teacher/scores',
+    'teacher/showupdate_attendance': '/app/teacher/showupdate-attendance',
+    'teacher/teacher_assignment': '/app/teacher/teacher-assignment',
+    'teacher/teacher_contactus': '/app/teacher/teacher-contactus',
+    'teacher/teacher_support': '/app/teacher/teacher-support',
+    'teacher/teacher_message': '/app/teacher/inbox',
+    'flags/flags_management': '/app/administrator/flags/management',
+    'flags/processed_flags': '/app/administrator/flags/processed',
+    'flags/incident_analysis': '/app/administrator/flags/incident-analysis',
     'administrator/dashboard': '/app/administrator/dashboard',
     'administrator/administratordashboard': '/app/admin/dashboard',
+    'administrator/absence': '/app/administrator/absence',
     'administrator/daily_attendance': '/app/administrator/daily_attendance',
     'administrator/daily_attendance_analysis': '/app/administrator/daily_attendance_analysis',
-    'administrator/exam_drafts': '/app/administrator/exam_drafts',
+    'administrator/exam_drafts': '/app/administrator/exam-drafts',
     'administrator/grading_management': '/app/administrator/grading_management',
     'administrator/ip_bans': '/app/administrator/ip_bans',
     'administrator/late_slip_logs': '/app/administrator/late_slip_logs',
     'administrator/manage_users': '/app/administrator/manage_users',
     'administrator/notifications_alerts': '/app/administrator/notifications_alerts',
-    'administrator/parent_profile': '/app/administrator/parent_profile',
+    'administrator/parent_profile': '/app/administrator/parent_profiles',
     'administrator/paypal_transactions': '/app/administrator/paypal_transactions',
     'administrator/print_notification_admins': '/app/administrator/print_notification_admins',
     'administrator/removed_students': '/app/administrator/removed_students',
     'administrator/search_results': '/app/administrator/search_results',
-    'administrator/sections_auto_distribute': '/app/administrator/sections_auto_distribute',
+    'administrator/sections_auto_distribute': '/app/administrator/sections/auto-distribute',
+    'administrator/sections_promotion_totals': '/app/administrator/sections/promotion-totals',
     'administrator/student_class_assignment': '/app/administrator/student_class_assignment',
     'administrator/student_profiles': '/app/administrator/student_profiles',
-    'administrator/subject_curriculum': '/app/administrator/subject_curriculum',
+    'administrator/subject_curriculum': '/app/administrator/subject-curriculum',
     'administrator/teacher_class_assignment': '/app/administrator/teacher_class_assignment',
-    'administrator/teacher_submissions': '/app/administrator/teacher_submissions',
-    'admin/competition_winners': '/app/admin/competition-winners',
-    'admin/competition_winners/index': '/app/admin/competition-winners',
-    'admin/competition_winners/form': '/app/admin/competition-winners/create',
-    'admin/competition_winners/preview': '/app/admin/competition-winners',
-    'admin/competition_winners/scores': '/app/admin/competition-winners',
-    'admin/competition_winners/winners': '/app/admin/competition-winners',
+    'administrator/teacher_submissions': '/app/administrator/teacher-submissions',
+    'administrator/events/event_list': '/app/administrator/events',
+    'administrator/events': '/app/administrator/events',
+    'admin/competition_winners': '/app/competition-winners',
+    'admin/competition_winners/index': '/app/competition-winners',
+    'admin/competition_winners/form': '/app/competition-winners/create',
+    'admin/competition_winners/preview': '/app/competition-winners',
+    'admin/competition_winners/scores': '/app/competition-winners',
+    'admin/competition_winners/winners': '/app/competition-winners',
     'admin/class_progress_list': '/app/admin/progress',
     'admin/class_progress_view': '/app/admin/progress',
     'administrator/student_score_card': '/app/administrator/student-score-card',
@@ -54,6 +140,8 @@ export function spaPathFromCiUrl(url: string | null | undefined): string | null
     'administrator/emergency_contact/index': '/app/administrator/emergency-contacts',
     'administrator/emergency_contact/edit': '/app/administrator/emergency-contacts',
     'nav-builder': '/app/nav-builder',
+    'nav-builder/index': '/app/nav-builder/index',
+    'nav-builder/edit': '/app/nav-builder/edit',
     'api/nav-builder': '/app/nav-builder',
     'parent/parent_dashboard': '/app/parent/home',
     parent_dashboard: '/app/parent/home',
@@ -88,9 +176,115 @@ export function spaPathFromCiUrl(url: string | null | undefined): string | null
     'parent/emergency-contacts': '/app/parent/emergency-contacts',
     'parent/edit_all_students': '/app/parent/edit-all-students',
     'parent/edit-all-students': '/app/parent/edit-all-students',
+    'class-prep': '/app/administrator/class-prep',
+    communications: '/app/administrator/communications',
+    'communications/index': '/app/administrator/communications',
+    'configuration/configuration_view': '/app/administrator/configuration_view',
+    'discounts/list': '/app/administrator/discounts',
+    'discount/create': '/app/administrator/discounts/create',
+    'discount/apply': '/app/administrator/discounts/apply',
+    'errors/invalid_token': '/invalid-token',
+    'errors/access_denied': '/access-denied',
+    'discounts/reverse_discount': '/app/administrator/discounts/reverse',
+    'expenses/index': '/app/administrator/expenses',
+    'expenses/create': '/app/administrator/expenses/create',
+    family: '/app/administrator/family',
+    'family/index': '/app/administrator/family',
+    'family/compose-email': '/app/administrator/family/compose-email',
+    'families/import-legacy': '/app/families/import-legacy',
+    'administrator/expense_management': '/app/administrator/expenses',
+    'enroll_withdraw/new-students': '/app/admin/enrollment/new-students',
+    'enroll_withdraw/enrollment_withdrawal': '/app/administrator/enroll-withdraw/enrollment-withdrawal',
+    'emails/parent_email_extractor': '/app/administrator/parent-email-extractor',
+    'emails/broadcast': '/app/administrator/email-templates',
+    'grading/grading_main': '/app/grading',
+    'grading/below_sixty': '/app/grading/below-60',
+    'grading/below_sixty_email_editor': '/app/grading/below-60/email-editor',
+    'grading/homework_tracking': '/app/grading/homework-tracking',
+    'grading/participation': '/app/grading/participation',
+    'grading/placement_index': '/app/grading/placement-index',
+    'grading/placement': '/app/grading/placement',
+    'grading/schedule_meeting': '/app/grading/schedule-meeting',
+    'inventory/book/index': '/app/inventory/book',
+    'inventory/book/form': '/app/inventory/book/create',
+    'inventory/classroom/index': '/app/administrator/inventory/classroom',
+    'inventory/classroom/form': '/app/administrator/inventory/classroom/create',
+    'inventory/classroom/audit_form': '/app/administrator/inventory/classroom',
+    'inventory/kitchen/index': '/app/administrator/inventory/kitchen',
+    'inventory/kitchen/form': '/app/administrator/inventory/kitchen/create',
+    'inventory/office/index': '/app/administrator/inventory/office',
+    'inventory/office/form': '/app/administrator/inventory/office/create',
+    'inventory/movements/index': '/app/administrator/inventory/movements',
+    'inventory/movements/form': '/app/administrator/inventory/movements/create',
+    'inventory/movements/edit': '/app/administrator/inventory/movements',
+    'inventory/summary': '/app/administrator/inventory/summary',
+    'inventory/adjust_form': '/app/administrator/inventory/summary',
+    'inventory/teacher_distribute': '/app/teacher/inventory/book-distribute',
+    'inventory/books/distribute': '/app/teacher/inventory/book-distribute',
+    'attendance/teacher_attendance_month': '/app/admin/teacher-attendance/month',
+    'attendance/violations_pending': '/app/attendance/violations/pending',
+    'attendance/violations_notified': '/app/attendance/violations/notified',
+    'attendance/early_dismissals': '/app/attendance/early-dismissals',
+    'attendance/early_dismissals_add': '/app/attendance/early-dismissals/new',
+    'invoice_payment/invoice_management': '/app/administrator/invoice-payment',
+    'invoice_payment/pdf_template': '/app/administrator/invoice-payment',
+    'notifications/list_active': '/app/notifications/active',
+    'notifications/list_deleted': '/app/notifications/deleted',
+    'payment/manual_pay': '/app/administrator/payment/manual-pay',
+    'payment/manual_payment': '/app/administrator/payment/manual-payment',
+    'payment/notification_management': '/app/administrator/payment/notification-management',
+    'payment/unpaid_parents': '/app/payment/unpaid-parents',
+    'payment/discount': '/app/administrator/payment/discount-apply-student',
+    'payment/extra_charges': '/app/admin/charges',
+    'payment/financial_report': '/app/administrator/payment/financial-report',
+    'payment/financial_report_summary': '/app/administrator/payment/financial-report-summary',
+    'payment/payment_redirect': '/app/parent/payment-redirect',
+    'policy/school_policy': '/school-policy',
+    'policy/picture_policy': '/picture-policy',
+    'print_requests/admin_index': '/app/admin/print-requests',
+    'print_requests/teacher_index': '/app/teacher/print-requests',
+    'printables_reports/sticker_form': '/app/printables_reports/stickers',
+    'printables_reports/stickers': '/app/printables_reports/stickers',
+    'printables_reports/badge_form': '/app/administrator/printables/badges',
+    'printables_reports/report_card': '/app/administrator/printables/report-cards',
+    'reimbursements/index': '/app/administrator/reimbursements',
+    'reimbursements/create': '/app/administrator/reimbursements/create',
+    'reimbursements/under_processing': '/app/administrator/reimbursements/under-processing',
+    'refunds/list': '/app/refunds/list',
+    'report/combined': '/app/report/combined',
+    'rfid/rfid_coming_soon': '/app/rfid_coming_soon',
+    'rolepermission/list_roles': '/app/rolepermission/roles',
+    'rolepermission/permissionList': '/app/rolepermission/list_permissions',
+    'rolepermission/list_permissions': '/app/rolepermission/list_permissions',
+    'rolepermission/add_permission': '/app/rolepermission/permissions/create',
+    'rolepermission/add_role': '/app/rolepermission/roles/create',
+    'rolepermission/assign_role': '/app/rolepermission/assign',
+    'score_analysis/score_prediction': '/app/administrator/score-analysis/score-prediction',
+    'slips/preview_list': '/app/slips/preview',
+    'slips/slip_pdf': '/app/slips/print',
+    'staff/index': '/app/staff',
+    'staff/create': '/app/staff/create',
+    'student/score_card_list': '/app/student/score-card/list',
+    'student/score_card': '/app/student/score-card/list',
+    'whatsapp/manage_links': '/app/whatsapp/manage-links',
+    'whatsapp/parent_contacts': '/app/whatsapp/parent-contacts',
+    'whatsapp/parent_contacts_by_class': '/app/whatsapp/parent-contacts-by-class',
+    'winners/competitions/index': '/app/winners/competitions',
+    'user/welcome_back': '/app/user/welcome-back',
+    'user/login_activity': '/app/user/login-activity',
+    'user/user_list': '/app/user/user-list',
+    'user/create': '/app/user/create',
+    'user/forgot_password': '/forgot-password',
+    'user/reset_password': '/reset-password',
+    'user/set_password': '/set-password',
+    'user/password_set_success': '/password-set-success',
+    'user/login': '/login',
+    'user/register': '/register',
   }
 
-  return shortcuts[slug] ?? `/app/${slug}`
+  const mapped = shortcuts[slug]
+  if (mapped) return `${mapped}${querySuffix}`
+  return `/app/${slug}${querySuffix}`
 }
 
 export function isExternalNavUrl(url: string | null | undefined): boolean {

src/lib/portalAppearance.ts

@@ -0,0 +1,97 @@
+/** Parent / teacher portal look & feel (localStorage + `MainLayout` data-* hooks). */
+
+export type PortalDensity = 'comfortable' | 'compact'
+export type PortalFontScale = 'sm' | 'normal' | 'large' | 'xl'
+export type PortalFontFamily = 'default' | 'system' | 'readable' | 'modern'
+
+export const PORTAL_ACCENT_VALUES = [
+  'default',
+  'ocean',
+  'slate',
+  'violet',
+  'earth',
+  'rose',
+  'indigo',
+  'sky',
+  'crimson',
+  'emerald',
+] as const
+export type PortalAccent = (typeof PORTAL_ACCENT_VALUES)[number]
+/** `system` follows the device light/dark preference. */
+export type PortalColorMode = 'light' | 'dark' | 'system'
+
+export type PortalStylePrefs = {
+  density: PortalDensity
+  fontScale: PortalFontScale
+  fontFamily: PortalFontFamily
+  accent: PortalAccent
+  colorMode: PortalColorMode
+}
+
+const STORAGE_DENSITY = 'alrahma_portal_density'
+const STORAGE_FONT_SCALE = 'alrahma_portal_font_scale'
+/** Legacy key: `normal` | `large` — migrated into `fontScale` */
+const LEGACY_FONT_FLAG = 'alrahma_portal_font'
+const STORAGE_FONT_FAMILY = 'alrahma_portal_font_family'
+const STORAGE_ACCENT = 'alrahma_portal_accent'
+const STORAGE_COLOR_MODE = 'alrahma_portal_color_mode'
+
+function parseFontScale(raw: string | null): PortalFontScale {
+  if (raw === 'sm' || raw === 'normal' || raw === 'large' || raw === 'xl') return raw
+  return 'normal'
+}
+
+function parseFontFamily(raw: string | null): PortalFontFamily {
+  if (raw === 'system' || raw === 'readable' || raw === 'modern') return raw
+  return 'default'
+}
+
+function parseAccent(raw: string | null): PortalAccent {
+  if (raw && (PORTAL_ACCENT_VALUES as readonly string[]).includes(raw)) return raw as PortalAccent
+  return 'default'
+}
+
+function parseColorMode(raw: string | null): PortalColorMode {
+  if (raw === 'dark' || raw === 'system') return raw
+  return 'light'
+}
+
+export function readPortalStylePrefs(): PortalStylePrefs {
+  const d = localStorage.getItem(STORAGE_DENSITY)
+  let fontScale = parseFontScale(localStorage.getItem(STORAGE_FONT_SCALE))
+  if (!localStorage.getItem(STORAGE_FONT_SCALE)) {
+    const legacy = localStorage.getItem(LEGACY_FONT_FLAG)
+    if (legacy === 'large') fontScale = 'large'
+  }
+  return {
+    density: d === 'compact' ? 'compact' : 'comfortable',
+    fontScale,
+    fontFamily: parseFontFamily(localStorage.getItem(STORAGE_FONT_FAMILY)),
+    accent: parseAccent(localStorage.getItem(STORAGE_ACCENT)),
+    colorMode: parseColorMode(localStorage.getItem(STORAGE_COLOR_MODE)),
+  }
+}
+
+export function writePortalStylePrefs(prefs: PortalStylePrefs): void {
+  localStorage.setItem(STORAGE_DENSITY, prefs.density)
+  localStorage.setItem(STORAGE_FONT_SCALE, prefs.fontScale)
+  localStorage.setItem(STORAGE_FONT_FAMILY, prefs.fontFamily)
+  localStorage.setItem(STORAGE_ACCENT, prefs.accent)
+  localStorage.setItem(STORAGE_COLOR_MODE, prefs.colorMode)
+  localStorage.removeItem(LEGACY_FONT_FLAG)
+}
+
+/**
+ * Resolve stored `colorMode` to `light` | `dark`.
+ * When `colorMode` is `system`, pass `osPrefersDark` from a `matchMedia` listener, or omit to read once.
+ */
+export function resolvePortalColorMode(
+  prefs: PortalStylePrefs,
+  osPrefersDark?: boolean,
+): 'light' | 'dark' {
+  if (prefs.colorMode === 'dark') return 'dark'
+  if (prefs.colorMode === 'light') return 'light'
+  if (typeof osPrefersDark === 'boolean') return osPrefersDark ? 'dark' : 'light'
+  if (typeof window === 'undefined' || !window.matchMedia) return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}

src/lib/portalRoles.ts

@@ -0,0 +1,13 @@
+/** Normalize API role keys for comparisons (handles casing and spaces). */
+export function normalizePortalRole(role: string): string {
+  return role.trim().toLowerCase().replace(/\s+/g, '_')
+}
+
+export function isTeacherPortalRole(role: string): boolean {
+  const r = normalizePortalRole(role)
+  return r === 'teacher' || r === 'teacher_assistant'
+}
+
+export function isParentPortalRole(role: string): boolean {
+  return normalizePortalRole(role) === 'parent'
+}

src/pages/AdminProgressPages.tsx

@@ -1,24 +1,20 @@
-import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react'
+/**
+ * Barrel: class progress + student score card live under `pages/admin/`.
+ * Emergency contact admin screens remain here.
+ */
+export { ClassProgressListPage as AdminClassProgressListPage } from './classProgress/ClassProgressListPage'
+export { ClassProgressViewPage as AdminClassProgressViewPage } from './classProgress/ClassProgressViewPage'
+export { AdminStudentScoreCardPage } from './admin/AdminStudentScoreCardPage'
+
+import { type FormEvent, useEffect, useState, type ReactNode } from 'react'
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import {
   deleteAdministratorEmergencyContact,
   fetchAdministratorEmergencyContact,
   fetchAdministratorEmergencyContacts,
-  fetchClassProgressDetail,
-  fetchClassProgressGroups,
-  fetchClassProgressMeta,
-  fetchClassSections,
-  fetchStudentScoreCard,
-  searchAdministratorDashboard,
   updateAdministratorEmergencyContact,
 } from '../api/session'
-import type {
-  AdministratorDashboardSearchResponse,
-  ClassProgressGroupRow,
-  ClassProgressReportRow,
-  EmergencyContactGroupRow,
-  StudentScoreCardRow,
-} from '../api/types'
+import type { EmergencyContactGroupRow } from '../api/types'
 
 function PageShell({ title, children }: { title: string; children: ReactNode }) {
   return (
@@ -31,476 +27,6 @@ function PageShell({ title, children }: { title: string; children: ReactNode })
   )
 }
 
-function formatDate(value?: string | null, withTime = false) {
-  if (!value) return '—'
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-  return withTime ? date.toLocaleString() : date.toLocaleDateString()
-}
-
-function splitUnitTitle(unitTitle?: string | null) {
-  const raw = String(unitTitle ?? '').trim()
-  if (!raw) return { curriculum: [] as string[], custom: [] as string[] }
-  const segments = raw
-    .split(/\s*[;|]\s*/)
-    .map((part) => part.trim())
-    .filter(Boolean)
-  const curriculum: string[] = []
-  const custom: string[] = []
-  for (const segment of segments) {
-    if (/custom/i.test(segment)) custom.push(segment.replace(/^custom[:\s-]*/i, '').trim() || segment)
-    else curriculum.push(segment)
-  }
-  if (curriculum.length === 0 && custom.length === 0) curriculum.push(raw)
-  return { curriculum, custom }
-}
-
-function ClassProgressUnitDisplay({
-  unitTitle,
-  isQuran,
-  compact,
-}: {
-  unitTitle?: string | null
-  isQuran?: boolean
-  compact?: boolean
-}) {
-  const { curriculum, custom } = splitUnitTitle(unitTitle)
-  const labelCurriculum = isQuran ? 'Surah / curriculum' : 'Unit / chapter'
-  const labelCustom = isQuran ? 'Custom Surah / Arabic' : 'Custom subject(s)'
-
-  if (!String(unitTitle ?? '').trim()) return <span className="text-muted">-</span>
-
-  if (compact) {
-    return (
-      <>
-        {custom.length > 0 ? (
-          <div className="small">
-            <span className="badge text-bg-info me-1">{isQuran ? 'Custom' : 'Custom subject'}</span>
-            {custom.join(', ')}
-          </div>
-        ) : null}
-        {curriculum.length > 0 ? (
-          <div className={`small text-muted${custom.length > 0 ? ' mt-1' : ''}`}>{curriculum.join(' · ')}</div>
-        ) : null}
-      </>
-    )
-  }
-
-  return (
-    <>
-      {curriculum.length > 0 ? <div className="mb-2"><strong>{labelCurriculum}:</strong> {curriculum.join(' ; ')}</div> : null}
-      {custom.length > 0 ? <div className="mb-2"><strong>{labelCustom}:</strong> {custom.join(' ; ')}</div> : null}
-    </>
-  )
-}
-
-export function AdminClassProgressListPage() {
-  const [filters, setFilters] = useState({ weekStart: '', weekEnd: '', classSectionId: '', status: '' })
-  const [subjectSections, setSubjectSections] = useState<Record<string, { label?: string; db_subject?: string }>>({})
-  const [statusOptions, setStatusOptions] = useState<Record<string, string>>({})
-  const [classSections, setClassSections] = useState<Array<{ class_section_id?: number | null; class_section_name?: string | null }>>([])
-  const [items, setItems] = useState<ClassProgressGroupRow[]>([])
-  const [error, setError] = useState<string | null>(null)
-  const navigate = useNavigate()
-
-  async function load() {
-    try {
-      const [meta, sections, groups] = await Promise.all([
-        fetchClassProgressMeta(),
-        fetchClassSections({ perPage: 200 }),
-        fetchClassProgressGroups({
-          classSectionId: filters.classSectionId ? Number(filters.classSectionId) : null,
-          status: filters.status || null,
-          weekStart: filters.weekStart || null,
-          weekEnd: filters.weekEnd || null,
-          perPage: 200,
-        }),
-      ])
-      setSubjectSections(meta.data?.subject_sections ?? {})
-      setStatusOptions(meta.data?.status_options ?? {})
-      setClassSections(sections.data?.sections ?? [])
-      setItems(groups.data?.items ?? [])
-      setError(null)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Unable to load class progress.')
-    }
-  }
-
-  useEffect(() => {
-    void load()
-  }, [])
-
-  const itemsBySection = useMemo(() => {
-    const map = new Map<string, ClassProgressGroupRow[]>()
-    for (const item of items) {
-      const key = String(item.class_section_id ?? '0')
-      const bucket = map.get(key) ?? []
-      bucket.push(item)
-      map.set(key, bucket)
-    }
-    return Array.from(map.entries())
-  }, [items])
-
-  return (
-    <PageShell title="Class Progress Reports">
-      {error ? <div className="alert alert-danger">{error}</div> : null}
-      <div className="d-flex align-items-center justify-content-between mb-4">
-        <div className="text-muted">Filter by week, class, and status</div>
-        <Link className="btn btn-sm btn-outline-warning" to="/app/administrator/teacher_submissions">
-          Teachers &lt; 50%
-        </Link>
-      </div>
-      <form className="card shadow-sm mb-3" onSubmit={(e) => { e.preventDefault(); void load() }}>
-        <div className="card-body">
-          <div className="row g-3">
-            <div className="col-md-3"><label className="form-label">From</label><input type="date" className="form-control" value={filters.weekStart} onChange={(e) => setFilters((current) => ({ ...current, weekStart: e.target.value }))} /></div>
-            <div className="col-md-3"><label className="form-label">To</label><input type="date" className="form-control" value={filters.weekEnd} onChange={(e) => setFilters((current) => ({ ...current, weekEnd: e.target.value }))} /></div>
-            <div className="col-md-3">
-              <label className="form-label">Class/Section</label>
-              <select className="form-select" value={filters.classSectionId} onChange={(e) => setFilters((current) => ({ ...current, classSectionId: e.target.value }))}>
-                <option value="">All</option>
-                {classSections.map((section) => <option key={String(section.class_section_id ?? '')} value={section.class_section_id ?? ''}>{section.class_section_name}</option>)}
-              </select>
-            </div>
-            <div className="col-md-3">
-              <label className="form-label">Status</label>
-              <select className="form-select" value={filters.status} onChange={(e) => setFilters((current) => ({ ...current, status: e.target.value }))}>
-                <option value="">All</option>
-                {Object.entries(statusOptions).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
-              </select>
-            </div>
-          </div>
-          <div className="d-flex gap-2 mt-3">
-            <button className="btn btn-primary" type="submit">Apply</button>
-            <button className="btn btn-outline-secondary" type="button" onClick={() => { setFilters({ weekStart: '', weekEnd: '', classSectionId: '', status: '' }); void setTimeout(load, 0) }}>Reset</button>
-          </div>
-        </div>
-      </form>
-
-      <div className="card shadow-sm mt-4">
-        <div className="card-body pt-4">
-          {itemsBySection.length === 0 ? (
-            <div className="text-center text-muted py-4">No reports found.</div>
-          ) : (
-            <div className="accordion" id="adminProgressAccordion">
-              {itemsBySection.map(([sectionId, groups]) => (
-                <div className="accordion-item mb-2" key={sectionId}>
-                  <h2 className="accordion-header" id={`progress-heading-${sectionId}`}>
-                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target={`#progress-section-${sectionId}`}>
-                      {groups[0]?.class_section_name ?? `Section ${sectionId}`}
-                      <span className="badge bg-secondary ms-2">{groups.length} weeks</span>
-                    </button>
-                  </h2>
-                  <div id={`progress-section-${sectionId}`} className="accordion-collapse collapse" data-bs-parent="#adminProgressAccordion">
-                    <div className="accordion-body">
-                      <div className="table-responsive">
-                        <table className="table table-hover align-middle mb-0" data-no-mgmt-sticky>
-                          <thead className="table-light">
-                            <tr><th>Week</th><th>Subjects</th><th>Teacher</th><th className="text-end">Action</th></tr>
-                          </thead>
-                          <tbody>
-                            {groups.map((group) => {
-                              const reports = group.reports ?? {}
-                              const teacherSet = Array.from(new Set(Object.values(reports).map((report) => report.teacher_name).filter(Boolean)))
-                              const firstReport = Object.values(reports)[0]
-                              return (
-                                <tr key={`${sectionId}-${group.week_start}`}>
-                                  <td>
-                                    <div className="fw-semibold">{formatDate(group.week_start)} - {formatDate(group.week_end)}</div>
-                                  </td>
-                                  <td>
-                                    <div className="d-flex flex-column gap-2">
-                                      {Object.entries(subjectSections).map(([slug, section]) => {
-                                        const subjectName = section.db_subject ?? section.label ?? slug
-                                        const report = reports[subjectName]
-                                        return (
-                                          <div key={slug} className="border rounded-3 p-2">
-                                            <div className="d-flex justify-content-between align-items-center">
-                                              <strong className="small mb-0">{section.label ?? subjectName}</strong>
-                                              <span className={`badge ${report ? 'bg-secondary' : 'bg-light text-muted'}`}>{report?.status_label ?? 'No entry'}</span>
-                                            </div>
-                                            <div className="small">
-                                              {report ? (
-                                                <ClassProgressUnitDisplay unitTitle={report.unit_title} isQuran={subjectName === 'Quran/Arabic'} compact />
-                                              ) : (
-                                                <span className="text-muted">No submission</span>
-                                              )}
-                                            </div>
-                                          </div>
-                                        )
-                                      })}
-                                    </div>
-                                  </td>
-                                  <td>{teacherSet.join(', ') || '—'}</td>
-                                  <td className="text-end">
-                                    {firstReport?.id ? (
-                                      <button className="btn btn-sm btn-outline-primary" type="button" onClick={() => navigate(`/app/admin/progress/view/${firstReport.id}`)}>
-                                        View
-                                      </button>
-                                    ) : null}
-                                  </td>
-                                </tr>
-                              )
-                            })}
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </PageShell>
-  )
-}
-
-export function AdminClassProgressViewPage() {
-  const { id } = useParams()
-  const reportId = Number(id)
-  const [report, setReport] = useState<ClassProgressReportRow | null>(null)
-  const [weeklyReports, setWeeklyReports] = useState<ClassProgressReportRow[]>([])
-  const [subjectSections, setSubjectSections] = useState<Record<string, { label?: string; db_subject?: string }>>({})
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!reportId) return
-    ;(async () => {
-      try {
-        const [detail, meta] = await Promise.all([fetchClassProgressDetail(reportId), fetchClassProgressMeta()])
-        setReport(detail.data?.report ?? null)
-        setWeeklyReports(detail.data?.weekly_reports ?? [])
-        setSubjectSections(meta.data?.subject_sections ?? {})
-        setError(null)
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Unable to load progress report.')
-      }
-    })()
-  }, [reportId])
-
-  const reportsBySubject = useMemo(
-    () => Object.fromEntries(weeklyReports.map((entry) => [String(entry.subject ?? ''), entry])),
-    [weeklyReports],
-  )
-
-  const attachmentList = weeklyReports.flatMap((entry) => (entry.attachments ?? []).map((attachment) => ({
-    subject: entry.subject ?? 'Attachment',
-    attachment,
-  })))
-
-  return (
-    <PageShell title="Progress Report">
-      {error ? <div className="alert alert-danger">{error}</div> : null}
-      {report ? (
-        <>
-          <div className="d-flex align-items-center justify-content-between mb-3">
-            <div className="text-muted">{report.class_section_name ?? '-'} • {formatDate(report.week_start)} → {formatDate(report.week_end)}</div>
-            <Link to="/app/admin/progress" className="btn btn-outline-secondary">Back</Link>
-          </div>
-          <div className="row g-3">
-            <div className="col-lg-8">
-              {Object.entries(subjectSections).map(([slug, section]) => {
-                const subjectName = section.db_subject ?? section.label ?? slug
-                const entry = reportsBySubject[subjectName]
-                return (
-                  <div className="card shadow-sm mb-3" key={slug}>
-                    <div className="card-header bg-white"><strong>{section.label ?? subjectName}</strong></div>
-                    <div className="card-body">
-                      {!entry ? (
-                        <div className="text-muted">No entry submitted for this subject this week.</div>
-                      ) : (
-                        <>
-                          <div className="mb-2">
-                            <ClassProgressUnitDisplay unitTitle={entry.unit_title} isQuran={subjectName === 'Quran/Arabic'} />
-                          </div>
-                          <div className="mb-3"><strong>Activities</strong><div className="mt-1" style={{ whiteSpace: 'pre-wrap' }}>{entry.covered || '-'}</div></div>
-                          <div className="mb-3"><strong>{subjectName === 'Quran/Arabic' ? 'Arabic Practice / Homework' : 'Assigned Homework'}:</strong><div className="mt-1" style={{ whiteSpace: 'pre-wrap' }}>{entry.homework || '-'}</div></div>
-                          {(entry.attachments ?? []).length > 0 ? (
-                            <div className="mt-3">
-                              <strong>Attachments:</strong>
-                              <div className="d-flex flex-column gap-2 mt-2">
-                                {(entry.attachments ?? []).map((attachment) => (
-                                  <a key={attachment.id ?? attachment.download_url} className="btn btn-sm btn-outline-secondary text-start" href={attachment.download_url ?? '#'} target="_blank" rel="noreferrer">
-                                    {attachment.name ?? 'Attachment'}
-                                  </a>
-                                ))}
-                              </div>
-                            </div>
-                          ) : null}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-            <div className="col-lg-4">
-              <div className="card shadow-sm mb-3">
-                <div className="card-header bg-white"><strong>Summary</strong></div>
-                <div className="card-body">
-                  <div className="mb-2"><strong>Teacher:</strong> {report.teacher_name ?? '-'}</div>
-                  <div className="mb-2"><strong>Submitted:</strong> {formatDate(report.created_at, true)}</div>
-                  <div><strong>Status:</strong> {report.status_label ?? 'Unknown'}</div>
-                </div>
-              </div>
-              {(report.flags ?? []).length > 0 ? (
-                <div className="card shadow-sm mb-3">
-                  <div className="card-header bg-white"><strong>Checklist</strong></div>
-                  <div className="card-body d-flex flex-wrap gap-2">
-                    {(report.flags ?? []).map((flag) => <span key={flag} className="badge bg-light text-dark border">{flag.replace(/_/g, ' ')}</span>)}
-                  </div>
-                </div>
-              ) : null}
-              {attachmentList.length > 0 ? (
-                <div className="card shadow-sm">
-                  <div className="card-header bg-white"><strong>Attachments</strong></div>
-                  <div className="card-body">
-                    {attachmentList.map(({ subject, attachment }, index) => (
-                      <a key={`${attachment.id ?? index}`} className="btn btn-outline-primary w-100 text-start mb-2" href={attachment.download_url ?? '#'} target="_blank" rel="noreferrer">
-                        {`${subject} • ${attachment.name ?? 'Attachment'}`}
-                      </a>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          </div>
-        </>
-      ) : null}
-    </PageShell>
-  )
-}
-
-export function AdminStudentScoreCardPage() {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState<Array<Record<string, unknown>>>([])
-  const [selectedStudentId, setSelectedStudentId] = useState<number | null>(null)
-  const [selectedStudent, setSelectedStudent] = useState<{ firstname?: string | null; lastname?: string | null; school_id?: string | null } | null>(null)
-  const [rows, setRows] = useState<StudentScoreCardRow[]>([])
-  const [error, setError] = useState<string | null>(null)
-
-  async function runSearch(e?: FormEvent) {
-    e?.preventDefault()
-    if (!query.trim()) return
-    try {
-      const data: AdministratorDashboardSearchResponse = await searchAdministratorDashboard(query.trim())
-      setResults(data.results?.students ?? [])
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unable to search students.')
-    }
-  }
-
-  async function openScoreCard(studentId: number) {
-    try {
-      const data = await fetchStudentScoreCard(studentId)
-      setSelectedStudentId(studentId)
-      setSelectedStudent(data.student)
-      setRows(data.rows ?? [])
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unable to load student score card.')
-    }
-  }
-
-  return (
-    <PageShell title="Student Score Card (Admin)">
-      {error ? <div className="alert alert-danger">{error}</div> : null}
-      <div className="card shadow-sm mb-3">
-        <div className="card-body">
-          <form onSubmit={(e) => void runSearch(e)}>
-            <div className="row g-2 justify-content-center">
-              <div className="col-12 col-md-8 col-lg-6">
-                <div className="input-group">
-                  <span className="input-group-text">Search Student</span>
-                  <input className="form-control" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type School ID or Student Name" />
-                  <button className="btn btn-outline-secondary" type="button" onClick={() => setQuery('')}>Clear</button>
-                </div>
-                <small className="text-muted">Searches all grades.</small>
-              </div>
-            </div>
-            <button type="submit" className="d-none">Search</button>
-          </form>
-        </div>
-      </div>
-
-      {query.trim() && results.length === 0 ? <div className="alert alert-warning">No students found.</div> : null}
-      {results.length > 0 ? (
-        <div className="card shadow-sm mb-4">
-          <div className="card-header d-flex justify-content-between align-items-center"><strong>Results</strong><span className="text-muted small">Showing matching students</span></div>
-          <div className="card-body table-responsive pt-2">
-            <table className="table table-striped table-hover align-middle">
-              <thead className="table-light"><tr><th>School ID</th><th>Student</th><th></th></tr></thead>
-              <tbody>
-                {results.map((row) => (
-                  <tr key={String(row.id ?? '')}>
-                    <td>{String(row.school_id ?? '')}</td>
-                    <td>{`${String(row.firstname ?? '')} ${String(row.lastname ?? '')}`.trim()}</td>
-                    <td className="text-end">
-                      <button className="btn btn-sm btn-outline-primary" type="button" onClick={() => void openScoreCard(Number(row.id))}>Open Score Card</button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ) : null}
-
-      {selectedStudentId && selectedStudent ? (
-        <div className="card shadow-sm">
-          <div className="card-header">
-            <strong>{`${selectedStudent.firstname ?? ''} ${selectedStudent.lastname ?? ''}`.trim()}</strong>
-            <span className="text-muted ms-2">{selectedStudent.school_id ?? ''}</span>
-          </div>
-          <div className="card-body table-responsive">
-            <table className="table table-bordered table-sm align-middle mb-0">
-              <thead className="table-light">
-                <tr>
-                  <th>School Year</th>
-                  <th>Semester</th>
-                  <th>Class</th>
-                  <th>Homework</th>
-                  <th>Project</th>
-                  <th>Participation</th>
-                  <th>Quiz</th>
-                  <th>Test</th>
-                  <th>Attendance</th>
-                  <th>PTAP</th>
-                  <th>Midterm</th>
-                  <th>Semester</th>
-                  <th>Year Avg</th>
-                </tr>
-              </thead>
-              <tbody>
-                {rows.length === 0 ? <tr><td colSpan={13} className="text-muted">No score rows found.</td></tr> : rows.map((row, index) => (
-                  <tr key={`${row.school_year}-${row.semester}-${index}`}>
-                    <td>{row.school_year ?? '—'}</td>
-                    <td>{row.semester ?? '—'}</td>
-                    <td>{row.class_section_name ?? '—'}</td>
-                    <td>{row.homework_avg ?? '—'}</td>
-                    <td>{row.project_avg ?? '—'}</td>
-                    <td>{row.participation_score ?? '—'}</td>
-                    <td>{row.quiz_avg ?? '—'}</td>
-                    <td>{row.test_avg ?? '—'}</td>
-                    <td>{row.attendance_score ?? '—'}</td>
-                    <td>{row.ptap_score ?? '—'}</td>
-                    <td>{row.midterm_exam_score ?? '—'}</td>
-                    <td>{row.semester_score ?? '—'}</td>
-                    <td>{row.year_score ?? '—'}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ) : null}
-    </PageShell>
-  )
-}
-
 export function AdminEmergencyContactIndexPage() {
   const [groups, setGroups] = useState<EmergencyContactGroupRow[]>([])
   const [error, setError] = useState<string | null>(null)
@@ -530,25 +56,53 @@ export function AdminEmergencyContactIndexPage() {
       <div className="table-responsive">
         <table className="table table-bordered table-striped align-middle">
           <thead className="table-dark">
-            <tr><th>Parent Name</th><th>Students</th><th>Contact Name</th><th>Relation</th><th>Phone</th><th>Actions</th></tr>
+            <tr>
+              <th>Parent Name</th>
+              <th>Students</th>
+              <th>Contact Name</th>
+              <th>Relation</th>
+              <th>Phone</th>
+              <th>Actions</th>
+            </tr>
           </thead>
           <tbody>
             {groups.flatMap((group) =>
               (group.contacts ?? []).map((contact) => (
                 <tr key={contact.id}>
                   <td>{group.parent_name ?? '—'}</td>
-                  <td>{(group.students ?? []).map((student) => `${student.firstname ?? ''} ${student.lastname ?? ''}`.trim()).join(', ') || '—'}</td>
+                  <td>
+                    {(group.students ?? [])
+                      .map((student) => `${student.firstname ?? ''} ${student.lastname ?? ''}`.trim())
+                      .join(', ') || '—'}
+                  </td>
                   <td>{contact.name ?? '—'}</td>
                   <td>{contact.relation ?? '—'}</td>
                   <td>{contact.cellphone || group.parent_phones?.join(' / ') || 'N/A'}</td>
                   <td className="d-flex gap-2">
-                    <Link className="btn btn-sm btn-primary" to={`/app/administrator/emergency-contacts/${contact.id}/edit?parent_id=${group.parent_id}`}>Edit</Link>
-                    <button className="btn btn-sm btn-danger" type="button" onClick={() => void removeContact(contact.id, group.parent_id)}>Delete</button>
+                    <Link
+                      className="btn btn-sm btn-primary"
+                      to={`/app/administrator/emergency-contacts/${contact.id}/edit?parent_id=${group.parent_id}`}
+                    >
+                      Edit
+                    </Link>
+                    <button
+                      className="btn btn-sm btn-danger"
+                      type="button"
+                      onClick={() => void removeContact(contact.id, group.parent_id)}
+                    >
+                      Delete
+                    </button>
                   </td>
                 </tr>
               )),
             )}
-            {groups.length === 0 ? <tr><td colSpan={6} className="text-muted">No emergency contacts found.</td></tr> : null}
+            {groups.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="text-muted">
+                  No emergency contacts found.
+                </td>
+              </tr>
+            ) : null}
           </tbody>
         </table>
       </div>
@@ -609,13 +163,48 @@ export function AdminEmergencyContactEditPage() {
       <div className="card shadow-sm" style={{ maxWidth: 720 }}>
         <div className="card-body">
           <form onSubmit={(e) => void onSubmit(e)}>
-            <div className="mb-3"><label className="form-label">Name</label><input className="form-control" value={form.name} onChange={(e) => setForm((current) => ({ ...current, name: e.target.value }))} required /></div>
-            <div className="mb-3"><label className="form-label">Phone</label><input className="form-control" value={form.cellphone} onChange={(e) => setForm((current) => ({ ...current, cellphone: e.target.value }))} required /></div>
-            <div className="mb-3"><label className="form-label">Email</label><input type="email" className="form-control" value={form.email} onChange={(e) => setForm((current) => ({ ...current, email: e.target.value }))} /></div>
-            <div className="mb-3"><label className="form-label">Relation</label><input className="form-control" value={form.relation} onChange={(e) => setForm((current) => ({ ...current, relation: e.target.value }))} /></div>
+            <div className="mb-3">
+              <label className="form-label">Name</label>
+              <input
+                className="form-control"
+                value={form.name}
+                onChange={(e) => setForm((current) => ({ ...current, name: e.target.value }))}
+                required
+              />
+            </div>
+            <div className="mb-3">
+              <label className="form-label">Phone</label>
+              <input
+                className="form-control"
+                value={form.cellphone}
+                onChange={(e) => setForm((current) => ({ ...current, cellphone: e.target.value }))}
+                required
+              />
+            </div>
+            <div className="mb-3">
+              <label className="form-label">Email</label>
+              <input
+                type="email"
+                className="form-control"
+                value={form.email}
+                onChange={(e) => setForm((current) => ({ ...current, email: e.target.value }))}
+              />
+            </div>
+            <div className="mb-3">
+              <label className="form-label">Relation</label>
+              <input
+                className="form-control"
+                value={form.relation}
+                onChange={(e) => setForm((current) => ({ ...current, relation: e.target.value }))}
+              />
+            </div>
             <div className="d-flex gap-2">
-              <button className="btn btn-primary" type="submit">Update</button>
-              <Link className="btn btn-secondary" to="/app/administrator/emergency-contacts">Cancel</Link>
+              <button className="btn btn-primary" type="submit">
+                Update
+              </button>
+              <Link className="btn btn-secondary" to="/app/administrator/emergency-contacts">
+                Cancel
+              </Link>
             </div>
           </form>
         </div>

src/pages/AdministratorToolPages.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react'
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../api/http'
 import {
   assignTeacherClass,
   assignStudentClass,
@@ -769,7 +770,7 @@ function CalendarEventForm({
           </div>
         </div>
         <div className="card-footer d-flex gap-2 justify-content-end">
-          <button type="button" className="btn btn-secondary" onClick={() => navigate('/app/administrator/calendar_view')}>
+          <button type="button" className="btn btn-secondary" onClick={() => navigate('/app/administrator/events')}>
             Cancel
           </button>
           <button className="btn btn-primary" type="submit" disabled={submitting}>
@@ -817,7 +818,7 @@ export function AdminCalendarAddEventPage() {
       submitting={false}
       onSubmit={async (payload) => {
         await createAdministratorCalendarEvent(payload as never)
-        navigate('/app/administrator/calendar_view')
+        navigate('/app/administrator/events')
       }}
     />
   )
@@ -867,12 +868,14 @@ export function AdminCalendarEditPage() {
       submitting={false}
       onSubmit={async (payload) => {
         await updateAdministratorCalendarEvent(Number(eventId), payload)
-        navigate('/app/administrator/calendar_view')
+        navigate('/app/administrator/events')
       }}
     />
   )
 }
 
+/** School calendar admin — `GET /api/v1/settings/school-calendar/events` (JWT). SPA: `/app/administrator/events` or `calendar_view`. */
+
 export function AdminCalendarViewPage() {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
@@ -909,10 +912,13 @@ export function AdminCalendarViewPage() {
   }
 
   return (
-    <AdminParityShell title="School Calendar">
+    <AdminParityShell title="Event list">
       {error ? <div className="alert alert-danger">{error}</div> : null}
 
-      <div className="d-flex gap-2 mb-3 justify-content-end">
+      <div className="d-flex gap-2 mb-3 flex-wrap justify-content-between align-items-center">
+        <Link to="/app/administrator/calendar" className="btn btn-outline-secondary">
+          Browse calendar
+        </Link>
         <Link to={`/app/administrator/calendar_add_event${schoolYear || semester ? `?${new URLSearchParams({ ...(schoolYear ? { school_year: schoolYear } : {}), ...(semester ? { semester } : {}) }).toString()}` : ''}`} className="btn btn-success">
           Add New Event
         </Link>
@@ -1040,10 +1046,10 @@ export function AdminCalendarPage() {
   }, [events])
 
   return (
-    <AdminParityShell title="School Calendar">
+    <AdminParityShell title="School calendar">
       <div className="d-flex justify-content-end mb-3">
-        <Link to="/app/administrator/calendar_view" className="btn btn-outline-secondary">
-          Manage Events
+        <Link to="/app/administrator/events" className="btn btn-outline-secondary">
+          Manage events (list)
         </Link>
       </div>
       {error ? <div className="alert alert-danger">{error}</div> : null}
@@ -2314,7 +2320,7 @@ export function AdminParentProfilePage() {
         setFamilies((data.data?.families as Array<Record<string, unknown>>) ?? [])
         setError(null)
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Unable to load parent profiles.')
+        setError(e instanceof ApiHttpError ? e.message : e instanceof Error ? e.message : 'Unable to load parent profiles.')
       } finally {
         setLoading(false)
       }
@@ -2323,8 +2329,13 @@ export function AdminParentProfilePage() {
 
   async function loadGuardian(guardianId: number) {
     setSelectedGuardianId(guardianId)
-    const data = await fetchFamilyAdminIndex({ guardianId })
-    setFamilies((data.data?.families as Array<Record<string, unknown>>) ?? [])
+    setError(null)
+    try {
+      const data = await fetchFamilyAdminIndex({ guardianId })
+      setFamilies((data.data?.families as Array<Record<string, unknown>>) ?? [])
+    } catch (e) {
+      setError(e instanceof ApiHttpError ? e.message : e instanceof Error ? e.message : 'Unable to load families.')
+    }
   }
 
   return (
@@ -2622,6 +2633,106 @@ export function AdminSearchResultsPage() {
   )
 }
 
+/** Section-level promotion totals — `GET /api/v1/students/promotion-totals` (JWT). */
+export function AdminSectionsPromotionTotalsPage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [rows, setRows] = useState<StudentPromotionTotalsRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(year = schoolYear) {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchStudentPromotionTotals(year || undefined)
+      setRows(data.rows ?? [])
+      setSchoolYear(data.year ?? year ?? '')
+    } catch (e) {
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to load promotion totals.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  return (
+    <AdminParityShell title="Section promotion totals">
+      <p className="text-muted small mb-3">
+        Per-class/section student counts from the promotion pipeline. Pair with{' '}
+        <Link to="/app/administrator/sections/auto-distribute">auto-distribute sections</Link> to create
+        sections from these totals.
+      </p>
+
+      <div className="row g-2 align-items-end mb-3 flex-wrap">
+        <div className="col-sm-4 col-lg-3">
+          <label className="form-label">School year</label>
+          <input
+            className="form-control"
+            value={schoolYear}
+            onChange={(e) => setSchoolYear(e.target.value)}
+            placeholder="e.g. 2025-2026"
+          />
+        </div>
+        <div className="col-auto">
+          <button className="btn btn-outline-secondary" type="button" onClick={() => void load()}>
+            Refresh
+          </button>
+        </div>
+        <div className="col-auto">
+          <Link className="btn btn-outline-primary" to="/app/administrator/sections/auto-distribute">
+            Auto-distribute sections
+          </Link>
+        </div>
+      </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="table-responsive">
+        <table className="table table-sm table-striped align-middle">
+          <thead className="table-light">
+            <tr>
+              <th>Class / section</th>
+              <th className="text-end">Total students</th>
+              <th className="text-muted small">class_id</th>
+              <th className="text-muted small">class_section_id</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={4} className="text-muted">
+                  Loading…
+                </td>
+              </tr>
+            ) : rows.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="text-muted">
+                  No promotion totals for this school year.
+                </td>
+              </tr>
+            ) : (
+              rows.map((row, i) => {
+                const key = String(row.class_section_id ?? row.class_id ?? i)
+                return (
+                  <tr key={key}>
+                    <td>{row.class_section_name ?? '—'}</td>
+                    <td className="text-end">{Number(row.total ?? 0)}</td>
+                    <td className="text-muted small">{row.class_id ?? '—'}</td>
+                    <td className="text-muted small">{row.class_section_id ?? '—'}</td>
+                  </tr>
+                )
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
 export function AdminSectionsAutoDistributePage() {
   const [schoolYear, setSchoolYear] = useState('')
   const [studentsPerSection, setStudentsPerSection] = useState(20)
@@ -2990,12 +3101,23 @@ export function AdminSubjectCurriculumPage() {
   const [form, setForm] = useState({ class_id: '', subject: 'islamic', unit_number: '', unit_title: '', chapter_name: '' })
   const [editingId, setEditingId] = useState<number | null>(null)
   const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
 
   async function load() {
-    const data = await fetchSubjectCurriculum()
-    setClasses(data.classes ?? [])
-    setEntries(data.entries ?? [])
-    setSubjects(data.subject_labels ?? {})
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchSubjectCurriculum()
+      setClasses(data.classes ?? [])
+      setEntries(data.entries ?? [])
+      setSubjects(data.subject_labels ?? {})
+    } catch (e: unknown) {
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to load curriculum.')
+    } finally {
+      setLoading(false)
+    }
   }
 
   useEffect(() => {
@@ -3004,6 +3126,8 @@ export function AdminSubjectCurriculumPage() {
 
   async function submitForm(e: FormEvent) {
     e.preventDefault()
+    setSaving(true)
+    setError(null)
     const payload = {
       class_id: Number(form.class_id),
       subject: form.subject,
@@ -3011,27 +3135,49 @@ export function AdminSubjectCurriculumPage() {
       unit_title: form.unit_title || null,
       chapter_name: form.chapter_name,
     }
-    if (editingId) {
-      await updateSubjectCurriculum(editingId, payload)
-      setMessage('Curriculum entry updated.')
-    } else {
-      await createSubjectCurriculum(payload)
-      setMessage('Curriculum entry created.')
+    try {
+      if (editingId) {
+        await updateSubjectCurriculum(editingId, payload)
+        setMessage('Curriculum entry updated.')
+      } else {
+        await createSubjectCurriculum(payload)
+        setMessage('Curriculum entry created.')
+      }
+      setEditingId(null)
+      setForm({ class_id: '', subject: 'islamic', unit_number: '', unit_title: '', chapter_name: '' })
+      await load()
+    } catch (e: unknown) {
+      setMessage(null)
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to save curriculum entry.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function removeEntry(id: number) {
+    if (!confirm('Delete this curriculum entry?')) return
+    setError(null)
+    try {
+      await deleteSubjectCurriculum(id)
+      setMessage('Curriculum entry deleted.')
+      await load()
+    } catch (e: unknown) {
+      setMessage(null)
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to delete curriculum entry.')
     }
-    setEditingId(null)
-    setForm({ class_id: '', subject: 'islamic', unit_number: '', unit_title: '', chapter_name: '' })
-    await load()
   }
 
   return (
     <AdminParityShell title="Subject Curriculum">
       {message ? <div className="alert alert-info">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
       <div className="row g-4">
         <div className="col-lg-5">
           <div className="card shadow-sm">
             <div className="card-header">{editingId ? 'Edit curriculum entry' : 'Add new curriculum entry'}</div>
             <div className="card-body">
               <form onSubmit={(e) => void submitForm(e)}>
+                <fieldset disabled={loading || saving} className="border-0 m-0 p-0">
                 <div className="mb-3">
                   <label className="form-label">Class</label>
                   <select className="form-select" value={form.class_id} onChange={(e) => setForm((current) => ({ ...current, class_id: e.target.value }))} required>
@@ -3049,9 +3195,28 @@ export function AdminSubjectCurriculumPage() {
                 <div className="mb-3"><label className="form-label">Unit title</label><input className="form-control" value={form.unit_title} onChange={(e) => setForm((current) => ({ ...current, unit_title: e.target.value }))} /></div>
                 <div className="mb-3"><label className="form-label">Chapter / Surah</label><input className="form-control" value={form.chapter_name} onChange={(e) => setForm((current) => ({ ...current, chapter_name: e.target.value }))} required /></div>
                 <div className="d-flex gap-2">
-                  <button className="btn btn-primary flex-grow-1" type="submit">{editingId ? 'Apply changes' : 'Save curriculum entry'}</button>
-                  {editingId ? <button className="btn btn-outline-secondary" type="button" onClick={() => { setEditingId(null); setForm({ class_id: '', subject: 'islamic', unit_number: '', unit_title: '', chapter_name: '' }) }}>Cancel</button> : null}
+                  <button
+                    className="btn btn-primary flex-grow-1"
+                    type="submit"
+                    disabled={loading || saving}
+                  >
+                    {saving ? 'Saving…' : editingId ? 'Apply changes' : 'Save curriculum entry'}
+                  </button>
+                  {editingId ? (
+                    <button
+                      className="btn btn-outline-secondary"
+                      type="button"
+                      disabled={loading || saving}
+                      onClick={() => {
+                        setEditingId(null)
+                        setForm({ class_id: '', subject: 'islamic', unit_number: '', unit_title: '', chapter_name: '' })
+                      }}
+                    >
+                      Cancel
+                    </button>
+                  ) : null}
                 </div>
+                </fieldset>
               </form>
             </div>
           </div>
@@ -3063,19 +3228,56 @@ export function AdminSubjectCurriculumPage() {
               <table className="table table-bordered table-hover align-middle mb-0">
                 <thead className="table-light"><tr><th>Class</th><th>Subject</th><th>Unit</th><th>Unit title</th><th>Chapter / Surah</th><th>Actions</th></tr></thead>
                 <tbody>
-                  {entries.length === 0 ? <tr><td colSpan={6} className="text-muted">No curriculum records yet.</td></tr> : entries.map((entry) => (
-                    <tr key={entry.id}>
-                      <td>{entry.class_name ?? '—'}</td>
-                      <td>{subjects[entry.subject] ?? entry.subject}</td>
-                      <td>{entry.unit_number ?? '—'}</td>
-                      <td>{entry.unit_title ?? '—'}</td>
-                      <td>{entry.chapter_name}</td>
-                      <td className="d-flex gap-2">
-                        <button className="btn btn-sm btn-outline-primary" type="button" onClick={() => { setEditingId(entry.id); setForm({ class_id: String(entry.class_id), subject: entry.subject, unit_number: entry.unit_number ? String(entry.unit_number) : '', unit_title: entry.unit_title ?? '', chapter_name: entry.chapter_name }) }}>Edit</button>
-                        <button className="btn btn-sm btn-outline-danger" type="button" onClick={() => void deleteSubjectCurriculum(entry.id).then(load)}>Delete</button>
+                  {loading ? (
+                    <tr>
+                      <td colSpan={6} className="text-muted">
+                        Loading…
                       </td>
                     </tr>
-                  ))}
+                  ) : entries.length === 0 ? (
+                    <tr>
+                      <td colSpan={6} className="text-muted">
+                        No curriculum records yet.
+                      </td>
+                    </tr>
+                  ) : (
+                    entries.map((entry) => (
+                      <tr key={entry.id}>
+                        <td>{entry.class_name ?? '—'}</td>
+                        <td>{subjects[entry.subject] ?? entry.subject}</td>
+                        <td>{entry.unit_number ?? '—'}</td>
+                        <td>{entry.unit_title ?? '—'}</td>
+                        <td>{entry.chapter_name}</td>
+                        <td className="d-flex gap-2">
+                          <button
+                            className="btn btn-sm btn-outline-primary"
+                            type="button"
+                            disabled={saving}
+                            onClick={() => {
+                              setEditingId(entry.id)
+                              setForm({
+                                class_id: String(entry.class_id),
+                                subject: entry.subject,
+                                unit_number: entry.unit_number ? String(entry.unit_number) : '',
+                                unit_title: entry.unit_title ?? '',
+                                chapter_name: entry.chapter_name,
+                              })
+                            }}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="btn btn-sm btn-outline-danger"
+                            type="button"
+                            disabled={saving}
+                            onClick={() => void removeEntry(entry.id)}
+                          >
+                            Delete
+                          </button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
                 </tbody>
               </table>
             </div>
@@ -3183,24 +3385,35 @@ export function AdminTeacherClassAssignmentPage() {
 }
 
 export function AdminTeacherSubmissionsPage() {
+  const [searchParams] = useSearchParams()
   const [rows, setRows] = useState<TeacherSubmissionReportRow[]>([])
   const [summary, setSummary] = useState<{ total_items?: number; missing_items?: number; submitted_items?: number; submission_percentage?: number }>({})
   const [selected, setSelected] = useState<Record<string, boolean>>({})
   const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
   const [semester, setSemester] = useState<string | null>(null)
   const [schoolYear, setSchoolYear] = useState<string | null>(null)
 
   async function load() {
-    const data = await fetchTeacherSubmissions()
-    setRows(data.rows ?? [])
-    setSummary(data.summary ?? {})
-    setSemester(data.semester ?? null)
-    setSchoolYear(data.schoolYear ?? null)
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchTeacherSubmissions(searchParams)
+      setRows(data.rows ?? [])
+      setSummary(data.summary ?? {})
+      setSemester(data.semester ?? null)
+      setSchoolYear(data.schoolYear ?? null)
+    } catch (e: unknown) {
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to load teacher submissions.')
+    } finally {
+      setLoading(false)
+    }
   }
 
   useEffect(() => {
     void load()
-  }, [])
+  }, [searchParams])
 
   async function sendNotifications() {
     const notify = Object.entries(selected).filter(([, checked]) => checked).map(([id]) => Number(id))
@@ -3210,13 +3423,20 @@ export function AdminTeacherSubmissionsPage() {
         (row.teachers ?? []).map((teacher) => [String(teacher.id), row.missing_items ?? []]),
       ),
     )
-    const result = await notifyTeacherSubmissions({ notify, missing_items: missingItems })
-    setMessage(result.message ?? 'Notifications sent.')
+    try {
+      const result = await notifyTeacherSubmissions({ notify, missing_items: missingItems })
+      setMessage(result.message ?? 'Notifications sent.')
+      setError(null)
+    } catch (e: unknown) {
+      setMessage(null)
+      setError(e instanceof ApiHttpError ? e.message : 'Unable to send notifications.')
+    }
   }
 
   return (
     <AdminParityShell title="Teacher Submission Dashboard">
       {message ? <div className="alert alert-info">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
       <div className="row g-3 mb-4">
         <div className="col-sm-6 col-xl-3"><div className="card shadow-sm"><div className="card-body"><div className="text-uppercase small text-muted">Completion</div><div className="fs-3 fw-semibold">{summary.submission_percentage ?? 0}%</div></div></div></div>
         <div className="col-sm-6 col-xl-3"><div className="card shadow-sm"><div className="card-body"><div className="text-uppercase small text-muted">Missing Items</div><div className="fs-3 fw-semibold">{summary.missing_items ?? 0}</div></div></div></div>
@@ -3224,15 +3444,31 @@ export function AdminTeacherSubmissionsPage() {
         <div className="col-sm-6 col-xl-3"><div className="card shadow-sm"><div className="card-body"><div className="text-uppercase small text-muted">Term</div><div className="fs-6 fw-semibold">{`${semester ?? '—'} ${schoolYear ?? ''}`.trim()}</div></div></div></div>
       </div>
       <div className="d-flex justify-content-end mb-3">
-        <button className="btn btn-primary" type="button" onClick={() => void sendNotifications()}>Notify Selected Teachers</button>
+        <button
+          className="btn btn-primary"
+          type="button"
+          disabled={loading}
+          onClick={() => void sendNotifications()}
+        >
+          Notify Selected Teachers
+        </button>
       </div>
       <div className="table-responsive">
+        {loading ? <p className="text-muted">Loading…</p> : null}
         <table className="table table-striped table-bordered align-middle">
           <thead className="table-light">
             <tr><th>Notify</th><th>Class-Section</th><th>Teachers</th><th>Midterm Score</th><th>Midterm Comment</th><th>Participation</th><th>PTAP Comment</th><th>Attendance</th><th>Missing Items</th><th>Student Count</th></tr>
           </thead>
           <tbody>
-            {rows.length === 0 ? <tr><td colSpan={10} className="text-muted">No teacher-class assignments found for this term.</td></tr> : rows.map((row) => (
+            {!loading && rows.length === 0 ? (
+              <tr>
+                <td colSpan={10} className="text-muted">
+                  No teacher-class assignments found for this term.
+                </td>
+              </tr>
+            ) : null}
+            {!loading
+              ? rows.map((row) => (
               <tr key={String(row.class_section_id ?? row.class_section ?? '')}>
                 <td>
                   <div className="d-flex flex-column gap-1">
@@ -3254,7 +3490,8 @@ export function AdminTeacherSubmissionsPage() {
                 <td>{(row.missing_items ?? []).join(', ') || '—'}</td>
                 <td>{row.student_count ?? 0}</td>
               </tr>
-            ))}
+            ))
+              : null}
           </tbody>
         </table>
       </div>
@@ -3310,7 +3547,7 @@ export function AdminCourseMaterialsPage() {
             <Link className="btn btn-outline-primary" to="/app/administrator/class_section">
               Class Sections
             </Link>
-            <Link className="btn btn-outline-primary" to="/app/administrator/calendar_view">
+            <Link className="btn btn-outline-primary" to="/app/administrator/events">
               Calendar Events
             </Link>
           </div>

src/pages/FamiliesImportLegacyPage.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import { importLegacySecondParents } from '../api/session'
+
+type ImportSummary = {
+  created_users?: number
+  guardians_linked?: number
+  skipped?: number
+  total_source?: number
+}
+
+export function FamiliesImportLegacyPage() {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const [summary, setSummary] = useState<ImportSummary | null>(null)
+
+  async function runImport() {
+    const confirmed = window.confirm(
+      'Run the legacy second-parent import now? This will create users and attach guardians based on legacy records.',
+    )
+    if (!confirmed) return
+
+    setBusy(true)
+    setError(null)
+    setMessage(null)
+
+    try {
+      const res = await importLegacySecondParents()
+      setSummary(res.data ?? null)
+      setMessage(res.message ?? 'Legacy import completed.')
+    } catch (e) {
+      setSummary(null)
+      setError(e instanceof Error ? e.message : 'Legacy import failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container-fluid py-3">
+      <div className="mb-4">
+        <h2 className="h4 mb-1">Import Legacy Families</h2>
+        <p className="text-muted mb-0">
+          Import second parents from the legacy <code>parents</code> table into the new family
+          structure.
+        </p>
+      </div>
+
+      <div className="row g-3">
+        <div className="col-xl-7">
+          <div className="card shadow-sm">
+            <div className="card-header">Action</div>
+            <div className="card-body">
+              <div className="alert alert-warning small mb-3">
+                This operation can create secondary user accounts, link guardians to families, and
+                backfill student-family associations. Run it intentionally.
+              </div>
+
+              <ul className="small text-muted mb-4">
+                <li>Creates users for email-only second parents when no user already exists.</li>
+                <li>Links imported guardians into the family records for the primary parent.</li>
+                <li>Ensures students for the primary parent are attached to the same family.</li>
+              </ul>
+
+              <button
+                type="button"
+                className="btn btn-danger"
+                onClick={() => void runImport()}
+                disabled={busy}
+              >
+                {busy ? 'Importing…' : 'Run Legacy Import'}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-xl-5">
+          <div className="card shadow-sm">
+            <div className="card-header">Latest Result</div>
+            <div className="card-body">
+              {error ? <div className="alert alert-danger small">{error}</div> : null}
+              {message ? <div className="alert alert-success small">{message}</div> : null}
+
+              {summary ? (
+                <dl className="row mb-0">
+                  <dt className="col-7">Source rows</dt>
+                  <dd className="col-5 text-end">{summary.total_source ?? 0}</dd>
+
+                  <dt className="col-7">Users created</dt>
+                  <dd className="col-5 text-end">{summary.created_users ?? 0}</dd>
+
+                  <dt className="col-7">Guardians linked</dt>
+                  <dd className="col-5 text-end">{summary.guardians_linked ?? 0}</dd>
+
+                  <dt className="col-7">Skipped rows</dt>
+                  <dd className="col-5 text-end">{summary.skipped ?? 0}</dd>
+                </dl>
+              ) : (
+                <p className="text-muted mb-0 small">
+                  No import has been run in this session yet.
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/ForgotPasswordPage.tsx

@@ -1,42 +1,145 @@
+import { type FormEvent, useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { requestForgotPassword } from '../api/passwordFlow'
 
-/** Mirrors CodeIgniter `Views/user/forgot_password.php` shell; reset flow remains on the Laravel site. */
+/** Mirrors CodeIgniter `user/forgot_password.php` + confirmation modal from `password_reset_confirmation.php`. */
 export function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [confirmEmail, setConfirmEmail] = useState<string | null>(null)
+  const confirmModalRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!confirmEmail) return
+    const el = confirmModalRef.current
+    const B = (
+      window as unknown as {
+        bootstrap?: { Modal: { getOrCreateInstance: (n: HTMLElement) => { show: () => void } } }
+      }
+    ).bootstrap
+    if (el && B?.Modal?.getOrCreateInstance) {
+      B.Modal.getOrCreateInstance(el).show()
+    }
+  }, [confirmEmail])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      await requestForgotPassword(email)
+      setConfirmEmail(email.trim())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
     <div className="ci-auth-bg flex-grow-1 py-4">
-      <div className="registration-form ci-parity container mt-5 mb-5 text-center">
-        <div className="text-center mb-4">
-          <Link to="/">
-            <img
-              src="/alrahma_logo.png"
-              alt=""
-              style={{ width: 180, height: 120, objectFit: 'contain' }}
-              onError={(ev) => {
-                ;(ev.target as HTMLImageElement).style.display = 'none'
-              }}
+      <div className="registration-form ci-parity container mt-5 mb-5">
+        <form
+          className="text-start mx-auto"
+          style={{ maxWidth: 600 }}
+          onSubmit={(e) => void onSubmit(e)}
+          noValidate
+        >
+          <div className="text-center mb-4">
+            <Link to="/">
+              <img
+                src="/alrahma_logo.png"
+                alt=""
+                style={{ width: 180, height: 120, objectFit: 'contain' }}
+                onError={(ev) => {
+                  ;(ev.target as HTMLImageElement).style.display = 'none'
+                }}
+              />
+            </Link>
+          </div>
+
+          <h3 className="text-center text-success mb-4" style={{ fontFamily: 'Arial, sans-serif' }}>
+            Reset Your Password
+          </h3>
+
+          <div className="centered-paragraph mb-4 text-center text-muted">
+            <p className="mb-1">Please enter the email address you used to register with us.</p>
+            <p className="mb-0">We&apos;ll send you a link to reset your password.</p>
+          </div>
+
+          {error ? (
+            <div className="alert alert-danger text-center" role="alert">
+              {error}
+            </div>
+          ) : null}
+
+          <div className="form-group mb-3">
+            <label className="form-label visually-hidden" htmlFor="forgot-email">
+              Email
+            </label>
+            <input
+              type="email"
+              className="form-control item"
+              id="forgot-email"
+              name="email"
+              maxLength={50}
+              placeholder="Email Address"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="email"
             />
-          </Link>
-        </div>
+          </div>
 
-        <h3 className="text-center text-success mb-4" style={{ fontFamily: 'Arial, sans-serif' }}>
-          Reset Your Password
-        </h3>
+          <div className="d-grid mb-3">
+            <button type="submit" className="btn btn-success item" disabled={loading}>
+              {loading ? 'Sending…' : 'Reset Password'}
+            </button>
+          </div>
 
-        <div className="mx-auto mb-4 text-muted" style={{ maxWidth: 560 }}>
-          <p>Password reset requests are handled through the school&apos;s main website.</p>
-          <p className="mb-0">
-            If this SPA is only the API client, open the legacy site or contact the office for a
-            reset link.
-          </p>
-        </div>
+          <div className="text-center">
+            <p className="mb-0">Don&apos;t have an account?</p>
+            <Link className="d-inline-block mt-1" to="/register">
+              Register now
+            </Link>
+          </div>
+        </form>
+      </div>
 
-        <div className="d-grid gap-2" style={{ maxWidth: 400, margin: '0 auto' }}>
-          <Link className="btn btn-success item" to="/login">
-            Back to Sign in
-          </Link>
-          <Link className="btn btn-secondary item" to="/register">
-            Register now
-          </Link>
+      <div
+        className="modal fade"
+        id="emailConfirmModal"
+        tabIndex={-1}
+        ref={confirmModalRef}
+        aria-labelledby="emailConfirmLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog modal-dialog-centered modal-lg">
+          <div className="modal-content rounded-4 shadow border-0" style={{ maxWidth: 600, margin: 'auto' }}>
+            <div className="modal-body text-center">
+              <img
+                src="/alrahma_logo.png"
+                alt=""
+                style={{ width: 180, height: 120, objectFit: 'contain' }}
+                onError={(ev) => {
+                  ;(ev.target as HTMLImageElement).style.display = 'none'
+                }}
+              />
+              <h5 className="modal-title text-success" id="emailConfirmLabel">
+                Check Your Email
+              </h5>
+              <p className="lead mt-3 mb-2">
+                A link to reset the password has been sent to this email:
+                <br />
+                <strong>{confirmEmail ?? ''}</strong>
+              </p>
+              <p className="mb-0">Please check your inbox and follow the instructions to reset the password.</p>
+              <Link className="btn btn-success mt-3" to="/login">
+                Return to Login
+              </Link>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/pages/HomePage.css

@@ -0,0 +1,352 @@
+/* Ported from CodeIgniter `Views/index.php` — scoped to avoid overriding global layout. */
+.home-landing {
+  --home-primary: #3a8fd1;
+  --home-secondary: #2c5e8a;
+  --home-light-green: #e8f5e9;
+  font-family:
+    'Heebo',
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  color: #333;
+  background-color: #f8f9fa;
+}
+
+.home-landing .home-landing-brand {
+  box-shadow: 0 2px 10px rgba(53, 52, 52, 0.15);
+}
+
+.home-landing .home-landing-brand-inner {
+  min-height: 3.75rem;
+}
+
+.home-landing .home-landing-logo-wrap {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  border-radius: 10%;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.home-landing .home-landing-logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  border: 2px solid rgba(255, 255, 255, 0.85);
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.home-landing .home-landing-brand-title {
+  color: var(--home-secondary);
+  font-weight: 700;
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  line-height: 1.2;
+  text-align: left;
+  min-width: 0;
+}
+
+.home-landing .green-title {
+  color: var(--home-secondary);
+  font-weight: 700;
+}
+
+.home-landing .bg-light-green {
+  background-color: var(--home-light-green);
+}
+
+.home-landing .btn-home-cta {
+  background-color: #28a745;
+  border-color: #28a745;
+  color: #fff;
+}
+
+.home-landing .btn-home-cta:hover {
+  background-color: #218838;
+  border-color: #1e7e34;
+  color: #fff;
+}
+
+.home-landing .home-carousel .carousel-item {
+  height: 600px;
+  overflow: hidden;
+}
+
+.home-landing .home-carousel .carousel-item img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.home-landing .home-carousel .carousel-caption {
+  bottom: 20%;
+  text-align: left;
+  padding: 20px;
+  background: rgba(56, 55, 55, 0.1);
+  border-radius: 8px;
+  max-width: 600px;
+  left: 10%;
+  right: auto;
+  backdrop-filter: blur(5px);
+}
+
+.home-landing .home-carousel .carousel-caption h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: #fff !important;
+}
+
+.home-landing .home-carousel .carousel-caption p {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  color: #fff !important;
+}
+
+.home-landing .home-section-xl {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.home-landing .home-stats {
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.5rem 1.5rem;
+}
+
+.home-landing .home-stats .stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.home-landing .home-stats .stat-circle {
+  width: 190px;
+  height: 190px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
+}
+
+.home-landing .home-stats .stat-value {
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.home-landing .home-stats .stat-icon {
+  font-size: 2rem;
+  margin-bottom: 0.2rem;
+  opacity: 0.9;
+}
+
+.home-landing .home-stats .stat-title {
+  font-size: 1.1rem;
+  margin-top: 0.25rem;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.home-landing .home-stats .circle-primary {
+  background: radial-gradient(circle at 30% 30%, #0d6efd, #0044aa);
+}
+
+.home-landing .home-stats .circle-success {
+  background: radial-gradient(circle at 30% 30%, #198754, #0c4f2c);
+}
+
+.home-landing .home-stats .circle-warning {
+  background: radial-gradient(circle at 30% 30%, #daa544, #a66f00);
+}
+
+.home-landing .home-stats .circle-info {
+  background: radial-gradient(circle at 30% 30%, #0dcaf0, #047e9c);
+}
+
+.home-landing .home-stats .circle-light {
+  background: radial-gradient(circle at 30% 30%, #63af4c, #00eb7d);
+}
+
+.home-landing .row.bg-light.squared {
+  margin-bottom: 0 !important;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+}
+
+.home-landing .row.bg-light.squared .col-lg-6.text-center {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center;
+}
+
+.home-landing .image-container {
+  margin-right: 30px;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 0 15px 15px 0;
+}
+
+.home-landing .image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.home-landing .image-container:hover img {
+  transform: scale(1.05);
+}
+
+.home-landing .row.bg-light.squared .image-container {
+  position: relative !important;
+  margin: 0 auto !important;
+  width: 100%;
+  max-width: 520px;
+  overflow: visible;
+}
+
+.home-landing .image-column {
+  min-height: 400px;
+}
+
+.home-landing .about-img img {
+  border: 5px solid #fff;
+  box-shadow: 0 0 15px rgba(72, 236, 7, 0.1);
+}
+
+.home-landing .back-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 99;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.home-landing .back-to-top.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (max-width: 992px) {
+  .home-landing .home-carousel .carousel-item {
+    height: 500px;
+  }
+
+  .home-landing .home-carousel .carousel-caption {
+    bottom: 15%;
+    padding: 15px;
+    width: 80%;
+    left: 10%;
+  }
+
+  .home-landing .home-carousel .carousel-caption h2 {
+    font-size: 1.8rem;
+  }
+
+  .home-landing .home-carousel .carousel-caption p {
+    font-size: 1rem;
+  }
+
+  .home-landing .image-column {
+    min-height: 300px;
+    border-radius: 0 0 10px 10px !important;
+  }
+
+  .home-landing .rounded-end {
+    border-radius: 0 0 10px 10px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .home-landing .home-carousel .carousel-item {
+    height: 400px;
+  }
+
+  .home-landing .home-carousel .carousel-caption {
+    bottom: 10%;
+    width: 85%;
+    left: 7.5%;
+    padding: 12px;
+  }
+
+  .home-landing .home-carousel .carousel-caption h2 {
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .home-landing .home-carousel .carousel-caption p {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .home-landing .home-stats .stat-circle {
+    width: 160px;
+    height: 160px;
+  }
+
+  .home-landing .row.bg-light.squared .image-container {
+    max-width: 360px;
+    min-height: 0 !important;
+    position: relative;
+    margin-bottom: 2rem;
+  }
+
+  .home-landing .row.bg-light.squared .overlapping-image {
+    position: relative !important;
+    display: block;
+    width: 100% !important;
+    height: auto;
+    margin: 15px 0;
+    transform: none !important;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    border: 5px solid white;
+  }
+
+  .home-landing .row.bg-light.squared.position-relative.align-items-center {
+    margin-bottom: 3rem !important;
+  }
+}
+
+@media (max-width: 576px) {
+  .home-landing .home-carousel .carousel-item {
+    height: 350px;
+  }
+
+  .home-landing .home-carousel .carousel-caption {
+    bottom: 5%;
+    width: 90%;
+    left: 5%;
+    padding: 10px;
+  }
+
+  .home-landing .home-carousel .carousel-caption h2 {
+    font-size: 1.2rem;
+  }
+
+  .home-landing .home-carousel .carousel-caption p {
+    font-size: 0.8rem;
+  }
+}

src/pages/HomePage.tsx

@@ -1,78 +1,424 @@
+import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { fetchAdministratorDashboardMetrics } from '../api/session'
+import type { AdministratorDashboardMetricsResponse, AuthUser } from '../api/types'
 import { useAuth } from '../auth/AuthProvider'
+import './HomePage.css'
+
+/** Public home must not call administrator APIs unless the user is allowed (avoids 401 for teachers/guests). */
+function userMayLoadAdministratorHomeMetrics(user: AuthUser | null): boolean {
+  if (!user?.roles) return false
+  const r = user.roles
+  return Boolean(r.administrator || r.admin || r.super_admin)
+}
+
+/** Carousel + sections ported from CodeIgniter `Views/index.php` (Al Rahma public home). */
+const CAROUSEL_SLIDES = [
+  {
+    image: '/images/carousel-1.png',
+    alt: 'Not only a book to be read but a guide illuminating our lives.',
+    title: 'Not only a book to be read but a guide illuminating our lives.',
+    body:
+      'At Al Rahma Sunday School, we teach the Quran as a living guide, nurturing love and respect for the words of Allah (SWT). Our program supports each child’s journey through recitation, memorization, and age-appropriate translation and understanding.',
+  },
+  {
+    image: '/images/carousel-0.png',
+    alt: 'Faith and Knowledge Hand in Hand',
+    title: 'Faith and Knowledge Hand in Hand',
+    body:
+      'Our Sunday School program (Grades 1-9, Youth) is evenly divided between Islamic Studies in English—exploring topics about Allah, Islamic values, Muslim life and lessons from the Prophets—and Quran/Arabic studies focused on recitation, memorization and language. This balanced approach nurtures both understanding and practice of Islam.',
+  },
+  {
+    image: '/images/carousel-3.png',
+    alt: 'Nurturing Hearts and Minds',
+    title: 'Nurturing Hearts and Minds',
+    body:
+      'At our school, we inspire a lifelong love for Islamic values, for our worship rituals and our prophets through engaging lessons, interactive activities, and a supportive environment. Every student grows in knowledge, faith and character, learning to live the teachings of Islam in everyday life.',
+  },
+  {
+    image: '/images/carousel-4.png',
+    alt: 'Exciting Fun, Inside and Out!',
+    title: 'Exciting Fun, Inside and Out!',
+    body:
+      'From festive Eid celebrations to adventurous outdoor outings, our school events bring learning, laughter, and unforgettable memories together.',
+  },
+  {
+    image: '/images/carousel-5.png',
+    alt: 'Strengthening Faith, Character, and Community Bonds',
+    title: 'Strengthening Faith, Character, and Community Bonds',
+    body:
+      'A warm, faith-centered community helps children thrive, build confidence, compassion, and friendships.',
+  },
+] as const
+
+const STAT_DEF = [
+  { key: 'students', label: 'Students', circle: 'circle-primary', icon: 'bi-mortarboard' },
+  { key: 'teachers', label: 'Teachers', circle: 'circle-info', icon: 'bi-person-video3' },
+  { key: 'teacherAssistants', label: 'TAs', circle: 'circle-success', icon: 'bi-person-gear' },
+  { key: 'admins', label: 'Admins', circle: 'circle-warning', icon: 'bi-shield-check' },
+  { key: 'parents', label: 'Parents', circle: 'circle-light', icon: 'bi-people' },
+] as const
+
+type CountKey = (typeof STAT_DEF)[number]['key']
+
+function formatStat(
+  n: number | undefined,
+  numberFmt: Intl.NumberFormat,
+): string {
+  return typeof n === 'number' && Number.isFinite(n) ? numberFmt.format(n) : '—'
+}
 
-/** Public landing — structure inspired by CodeIgniter `Views/landing_page/guest_dashboard.php` hero. */
 export function HomePage() {
-  const { isAuthenticated } = useAuth()
+  const { token, user } = useAuth()
+  const numberFmt = useMemo(() => new Intl.NumberFormat(), [])
+  const [counts, setCounts] = useState<AdministratorDashboardMetricsResponse['counts']>({})
+  const [showTop, setShowTop] = useState(false)
+
+  const mayLoadMetrics = Boolean(token && userMayLoadAdministratorHomeMetrics(user))
+
+  useEffect(() => {
+    if (!mayLoadMetrics) {
+      setCounts({})
+      return
+    }
+
+    let cancelled = false
+    const loadStats = async () => {
+      try {
+        const data = await fetchAdministratorDashboardMetrics()
+        if (!cancelled) setCounts(data.counts ?? {})
+      } catch {
+        if (!cancelled) setCounts({})
+      }
+    }
+    void loadStats()
+    const interval = window.setInterval(() => void loadStats(), 60_000)
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') void loadStats()
+    }
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      cancelled = true
+      window.clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [mayLoadMetrics])
+
+  useEffect(() => {
+    const onScroll = () => setShowTop(window.scrollY > 100)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  function countFor(key: CountKey): string {
+    return formatStat(counts?.[key], numberFmt)
+  }
 
   return (
-    <div className="flex-grow-1">
-      <section className="hero-section position-relative overflow-hidden bg-white">
-        <div className="welcome-message text-center py-5 px-3">
-          <h1 className="display-5 fw-semibold text-success mb-2">
-            Welcome to Al Rahma Sunday School
-          </h1>
-          <h2 className="h4 text-secondary mb-3">
-            {isAuthenticated ? 'Welcome back' : 'Welcome, Guest!'}
-          </h2>
-          <p className="lead text-muted mx-auto mb-4" style={{ maxWidth: 640 }}>
-            Use the portal to manage enrollment, attendance, grades, and family information — the
-            same workflows as the CodeIgniter site, backed by the Laravel API.
-          </p>
-          <div className="d-flex flex-wrap justify-content-center gap-2">
-            {isAuthenticated ? (
-              <Link className="btn btn-success btn-lg px-4" to="/app/home">
-                Go to dashboard
-              </Link>
-            ) : (
-              <>
-                <Link className="btn btn-success btn-lg px-4" to="/login">
-                  Sign in
-                </Link>
-                <Link className="btn btn-outline-success btn-lg px-4" to="/register">
-                  Registration Form
-                </Link>
-              </>
-            )}
-            <Link className="btn btn-outline-secondary btn-lg" to="/docs">
-              API documentation
-            </Link>
-          </div>
+    <div className="home-landing flex-grow-1">
+      <div
+        id="homeMainCarousel"
+        className="carousel slide carousel-fade home-carousel"
+        data-bs-ride="carousel"
+      >
+        <div className="carousel-indicators">
+          {CAROUSEL_SLIDES.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              data-bs-target="#homeMainCarousel"
+              data-bs-slide-to={i}
+              className={i === 0 ? 'active' : undefined}
+              aria-current={i === 0 ? 'true' : undefined}
+              aria-label={`Slide ${i + 1}`}
+            />
+          ))}
         </div>
+        <div className="carousel-inner">
+          {CAROUSEL_SLIDES.map((slide, i) => (
+            <div key={slide.image} className={`carousel-item${i === 0 ? ' active' : ''}`}>
+              <img src={slide.image} className="d-block w-100" alt={slide.alt} />
+              <div className="carousel-caption">
+                <h2 className="mb-3">{slide.title}</h2>
+                <p className="mb-0">{slide.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <button
+          className="carousel-control-prev"
+          type="button"
+          data-bs-target="#homeMainCarousel"
+          data-bs-slide="prev"
+        >
+          <span className="carousel-control-prev-icon" aria-hidden />
+          <span className="visually-hidden">Previous</span>
+        </button>
+        <button
+          className="carousel-control-next"
+          type="button"
+          data-bs-target="#homeMainCarousel"
+          data-bs-slide="next"
+        >
+          <span className="carousel-control-next-icon" aria-hidden />
+          <span className="visually-hidden">Next</span>
+        </button>
+      </div>
+
+      <section className="text-center my-3">
+        <a
+          href="/account_creation_guide.pdf"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-decoration-none"
+          style={{ fontWeight: 900, color: '#000' }}
+        >
+          <h3 className="fw-bold my-0">
+            <span className="text-decoration-underline">
+              Join Al Rahma family today! Click here for a quick guide on how to create an account.
+            </span>
+          </h3>
+        </a>
       </section>
 
-      <section className="py-5 border-top bg-light">
+      <div className="container-xxl py-3 home-section-xl content-section">
         <div className="container">
-          <div className="row g-4 justify-content-center">
-            <div className="col-md-4">
-              <div className="card border-0 shadow-sm h-100">
-                <div className="card-body">
-                  <h3 className="h6 text-success">
-                    <i className="bi bi-house-door me-2" aria-hidden />
-                    Families
-                  </h3>
-                  <p className="small text-muted mb-0">
-                    Parents sign in after registration is activated by email.
-                  </p>
+          <div className="home-stats">
+            <h2 className="d-flex justify-content-center p-md-1 fs-3 fw-bold green-title mb-0">
+              Active Participants
+            </h2>
+            <br />
+            <div className="stats-row">
+              {STAT_DEF.map((s) => (
+                <div key={s.key} className={`stat-circle ${s.circle}`}>
+                  <div className="stat-icon">
+                    <i className={`bi ${s.icon}`} aria-hidden />
+                  </div>
+                  <div className="stat-value">{countFor(s.key)}</div>
+                  <div className="stat-title">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-xxl py-3 home-section-xl content-section">
+        <div className="container">
+          <div className="row bg-light squared align-items-center g-0">
+            <div className="col-lg-6">
+              <div className="d-flex flex-column justify-content-center p-4 p-md-5">
+                <h2 className="mb-4 fs-2 fw-bold green-title">
+                  Faith, Education and Community for Over 30 Years
+                </h2>
+                <p className="mb-4">
+                  The Islamic Society of Greater Lowell (ISGL), established in 1993 in Chelmsford,
+                  Massachusetts, serves as both a mosque and a vibrant community center. It provides a
+                  place of worship for Allah (SWT), offers Islamic education and facilitates religious
+                  and social activities for Muslims in the Merrimack Valley. As a non-profit,
+                  charitable, and tax-exempt organization, ISGL also provides essential services such as
+                  marriage ceremonies, burial arrangements and community support while promoting a
+                  greater understanding of Islam in America.
+                </p>
+                <p className="mb-4">
+                  Under the umbrella of ISGL, Al Rahma Sunday School has been serving the community for
+                  over thirty years. Throughout the decades, it has provided students with a strong
+                  foundation in Islamic Studies and Quran, fostering both knowledge and character. With
+                  its dedicated teachers and well-rounded academic program, the school continues to
+                  guide generations of Muslim youth in their faith, values and practice of Islam.
+                </p>
+                <p>For more information, click below to visit ISGL official website.</p>
+                <div>
+                  <a
+                    className="btn btn-home-cta px-4 py-2 fw-semibold"
+                    href="https://isgl.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ISGL Official Website
+                  </a>
                 </div>
               </div>
             </div>
-            <div className="col-md-4">
-              <div className="card border-0 shadow-sm h-100">
-                <div className="card-body">
-                  <h3 className="h6 text-success">
-                    <i className="bi bi-shield-lock me-2" aria-hidden />
-                    Secure portal
-                  </h3>
-                  <p className="small text-muted mb-0">
-                    Sessions use JWT from the Laravel API (<code>/api/v1/auth/login</code>).
-                  </p>
+            <div className="col-lg-6 image-column pe-lg-3">
+              <div className="position-relative h-100 w-100">
+                <img
+                  className="w-100 h-100 rounded-end"
+                  src="/images/isgl_home.png"
+                  alt="ISGL"
+                  style={{ objectFit: 'cover', minHeight: 280 }}
+                  onError={(e) => {
+                    const img = e.currentTarget
+                    img.onerror = null
+                    img.src = '/images/call-to-action.jpg'
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-xxl py-3 home-section-xl content-section">
+        <div className="container">
+          <div className="row bg-light squared align-items-center g-0">
+            <div className="col-lg-6">
+              <div className="d-flex flex-column justify-content-center p-4 p-md-5">
+                <h2 className="mb-4 fs-2 fw-bold green-title">Our Mission</h2>
+                <p>
+                  Al Rahma Sunday School&apos;s mission is to make the Masjid a central part of our
+                  Muslim children&apos;s lives from a very young age. We are dedicated to offering a
+                  strong, well-rounded curriculum in Quran, Arabic and Islamic Studies. Our goal is to
+                  deliver the highest quality education to help instill Islamic values, beliefs and
+                  practices in each student. Additionally, we regularly organize engaging and fun events
+                  throughout the year to make the learning experience more enjoyable and spiritually
+                  enriching.
+                </p>
+                <p className="mb-0">
+                  We deeply appreciate your continued support and cooperation in helping us fulfill this
+                  mission. Together, we can provide a strong Islamic foundation for our children and shape
+                  a future generation that is confident in their faith and rooted in Islamic values.
+                </p>
+              </div>
+            </div>
+            <div className="col-lg-6 about-img py-4 py-lg-0">
+              <div className="row g-2 justify-content-center">
+                <div className="col-12 text-center">
+                  <img
+                    className="img-fluid w-75 rounded-circle bg-light p-3"
+                    src="/images/about-1.jpg"
+                    alt=""
+                  />
+                </div>
+                <div className="col-6 text-start" style={{ marginTop: '-150px' }}>
+                  <img
+                    className="img-fluid w-100 rounded-circle bg-light p-3"
+                    src="/images/about-2.jpg"
+                    alt=""
+                  />
+                </div>
+                <div className="col-6 text-end" style={{ marginTop: '-150px' }}>
+                  <img
+                    className="img-fluid w-100 rounded-circle bg-light p-3"
+                    src="/images/about-3.jpg"
+                    alt=""
+                  />
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <div className="container-xxl py-3 home-section-xl content-section">
+        <div className="container">
+          <div className="row bg-light squared align-items-center g-0">
+            <div className="col-lg-6">
+              <div className="d-flex flex-column justify-content-center p-4 p-md-5">
+                <h2 className="mb-4 fs-2 fw-bold green-title">Become A Teacher or Admin</h2>
+                <p className="mb-4">
+                  Volunteering at Al Rahma Sunday School is a deeply fulfilling way to give back to the
+                  community and help shape the next generation. Whether you&apos;re passionate about
+                  teaching or prefer working behind the scenes, your time and dedication can make a
+                  lasting difference. Join a team committed to nurturing young minds and strengthening
+                  their connection to faith.
+                </p>
+                <p className="mb-4">
+                  As a volunteer teacher or teacher assistant, you&apos;ll have the opportunity to
+                  inspire, educate, and guide children on their spiritual journey. Teachers play a vital
+                  role in helping students understand the Quran, Islamic values, and the Arabic language
+                  in a warm and engaging classroom environment. Teacher assistants support instruction,
+                  help manage classroom activities, and provide one-on-one assistance to students when
+                  needed. Whether leading the class or lending a helping hand, your commitment can
+                  spark a lifelong love for learning and faith in the hearts of our students.
+                </p>
+                <p className="mb-4">
+                  Administrative volunteers are essential to the success of our school. From organizing
+                  materials and managing communications to helping coordinate school events and
+                  logistics, your work ensures a smooth and efficient learning experience for students
+                  and teachers alike. If you enjoy structured tasks, planning, or simply being helpful
+                  in a quiet but powerful way, this role is perfect for you.
+                </p>
+                <div>
+                  <Link className="btn btn-home-cta py-3 px-5 mt-1" to="/register">
+                    Get Started Now <i className="bi bi-arrow-right ms-2" aria-hidden />
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6 image-column pe-lg-3">
+              <div className="position-relative h-100 w-100">
+                <img
+                  className="w-100 h-100 rounded-end"
+                  src="/images/call-to-action.jpg"
+                  alt=""
+                  style={{ objectFit: 'cover', minHeight: 280 }}
+                  onError={(e) => {
+                    const img = e.currentTarget
+                    img.onerror = null
+                    img.src = '/images/isgl_home.png'
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-xxl py-3 home-section-xl content-section">
+        <div className="container">
+          <div className="row bg-light squared position-relative align-items-center g-0">
+            <div className="col-lg-6">
+              <div className="h-100 d-flex flex-column justify-content-center p-4 p-md-5">
+                <h2 className="mb-4 fs-2 fw-bold green-title">Our Curriculum and Grade Structure</h2>
+                <p>
+                  Our program spans nine structured grade levels, each building upon the previous
+                  year&apos;s knowledge to ensure a solid foundation in faith, character, and Islamic
+                  learning.
+                </p>
+                <p>
+                  Upon completing the 9th grade, students transition into our three-year Youth Program,
+                  which emphasizes deeper community engagement, personal development and practical
+                  application of Islamic principles. Participation in the Youth Program requires students
+                  to be at least 15 years old, ensuring they are mature enough to benefit from its
+                  advanced content.
+                </p>
+                <p>
+                  Starting this academic year, children must be at least 6 years old by 12-31-2025 to
+                  enroll in Grade 1. For younger learners, we are pleased to offer our newly established
+                  Kindergarten class, welcoming children who are at least 5 years old by 12-31-2025. This
+                  early education program is designed to introduce young minds to the basics of Islamic
+                  teachings in a warm, age-appropriate environment.
+                </p>
+                <div>
+                  <Link className="btn btn-home-cta py-3 px-5 mt-3" to="/register">
+                    Get Started Now <i className="bi bi-arrow-right ms-2" aria-hidden />
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6 text-start py-4 py-lg-0">
+              <div className="image-container mx-auto mx-lg-0">
+                <img
+                  src="/images/12.jpeg"
+                  className="overlapping-image image1"
+                  alt="Students and activities"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className={`btn btn-home-cta btn-lg rounded-1 back-to-top${showTop ? ' visible' : ''}`}
+        aria-label="Back to top"
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      >
+        <i className="bi bi-arrow-up" aria-hidden />
+      </button>
     </div>
   )
 }

src/pages/LoginPage.tsx

@@ -36,11 +36,19 @@ export function LoginPage() {
         return
       }
 
-      const isParentLogin =
-        result.selectedRole?.toLowerCase() === 'parent' ||
-        result.roles.some((role) => role.toLowerCase() === 'parent')
-      let target = from.startsWith('/app') ? from : '/app/home'
-      if (isParentLogin && target === '/app/home') target = '/app/parent/home'
+      const singleRole = result.roles.length === 1 ? result.roles[0].toLowerCase() : ''
+
+      let target = '/app/home'
+      if (from.startsWith('/app')) target = from
+      else if (from.startsWith('/docs')) target = from
+
+      if (result.roles.length === 1 && target === '/app/home') {
+        if (singleRole === 'parent') target = '/app/parent/home'
+        if (singleRole === 'teacher' || singleRole === 'teacher_assistant') {
+          target = '/app/teacher_dashboard'
+        }
+      }
+
       try {
         const dash = await fetchDashboardRoute()
         const route = dash.data?.dashboard?.route
@@ -50,6 +58,19 @@ export function LoginPage() {
         /* keep default */
       }
 
+      /* API default dashboard can point parents at teacher URLs (or vice versa); honor single-role account. */
+      if (result.roles.length === 1) {
+        if (singleRole === 'teacher' || singleRole === 'teacher_assistant') {
+          if (target === '/app/home' || target.startsWith('/app/parent')) {
+            target = '/app/teacher_dashboard'
+          }
+        } else if (singleRole === 'parent') {
+          if (target === '/app/home' || target.startsWith('/app/teacher')) {
+            target = '/app/parent/home'
+          }
+        }
+      }
+
       navigate(target, { replace: true })
     } finally {
       setBusy(false)

src/pages/NavBuilderPage.tsx

@@ -133,6 +133,10 @@ export function NavBuilderPage() {
     window.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
+  const editingItem = form.id
+    ? payload.items.find((item) => String(item.id) === form.id) ?? null
+    : null
+
   return (
     <div className="container-fluid px-0 nav-builder-page">
       <div className="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
@@ -240,9 +244,18 @@ export function NavBuilderPage() {
       <div className="row">
         <div className="col-lg-5">
           <div className="card mb-3">
-            <div className="card-header">Add / Edit Item</div>
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <span>{editingItem ? `Edit Item #${editingItem.id}` : 'Add / Edit Item'}</span>
+              {editingItem ? <span className="badge bg-primary">Editing</span> : null}
+            </div>
             <div className="card-body">
+              {editingItem ? (
+                <div className="alert alert-info py-2">
+                  Editing <strong>{editingItem.label}</strong>. Save will update the existing menu item.
+                </div>
+              ) : null}
               <form onSubmit={onSubmit}>
+                <input type="hidden" name="id" value={form.id} />
                 <div className="mb-2">
                   <label className="form-label" htmlFor="menu_parent_id">Parent</label>
                   <select
@@ -360,10 +373,10 @@ export function NavBuilderPage() {
                 </div>
 
                 <button className="btn btn-primary" type="submit" disabled={saving}>
-                  {saving ? 'Saving...' : 'Save'}
+                  {saving ? 'Saving...' : editingItem ? 'Update' : 'Save'}
                 </button>{' '}
                 <button className="btn btn-secondary" type="button" onClick={() => setForm(blankForm)}>
-                  Reset
+                  {editingItem ? 'Cancel edit' : 'Reset'}
                 </button>
               </form>
             </div>

src/pages/RoleSelectPage.tsx

@@ -1,79 +1,59 @@
-import { useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { fetchDashboardRoute } from '../api/session'
+import { Link } from 'react-router-dom'
 import { useAuth } from '../auth/AuthProvider'
-import { spaPathFromCiUrl } from '../lib/ciSpaPaths'
+import { useContinueWithRole } from '../hooks/useContinueWithRole'
 
 export function RoleSelectPage() {
-  const { user, roles, selectedRole, setSelectedRole } = useAuth()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const [busyRole, setBusyRole] = useState<string | null>(null)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const from = (location.state as { from?: string } | null)?.from ?? '/app/home'
-
-  async function continueLogin(nextRole: string) {
-    setBusy(true)
-    setBusyRole(nextRole)
-    setError(null)
-    setSelectedRole(nextRole)
-
-    let target = from.startsWith('/app') ? from : '/app/home'
-    if (nextRole.toLowerCase() === 'parent' && target === '/app/home') {
-      target = '/app/parent/home'
-    }
-    try {
-      const dash = await fetchDashboardRoute()
-      const route = dash.data?.dashboard?.route
-      const mapped = spaPathFromCiUrl(route)
-      if (mapped) target = mapped
-    } catch {
-      /* keep fallback target */
-    }
-
-    navigate(target, { replace: true })
-  }
+  const { user, roles } = useAuth()
+  const { continueWithRole, busy, busyRole, error } = useContinueWithRole()
 
   return (
-    <div className="container mt-5">
-      <div className="card shadow-sm border-0 mx-auto" style={{ maxWidth: 720 }}>
-        <div className="card-header bg-primary text-white">
-          <h4 className="mb-0">Select Account Type</h4>
+    <div className="registration-form container mt-5 mb-5">
+      <div className="row justify-content-center">
+        <div className="text-center mb-4">
+          <Link to="/">
+            <img
+              src="/images/alrahma_logo.png"
+              alt="Al Rahma Sunday School"
+              style={{ width: 180, height: 120, objectFit: 'contain' }}
+            />
+          </Link>
         </div>
-        <div className="card-body">
-          <p className="mb-4">
-            {user?.name ? `${user.name}, y` : 'Y'}ou have multiple roles. Please select the account
-            you&apos;d like to log into:
-          </p>
 
-          <div className="d-flex flex-wrap gap-3">
-            {roles.map((role) => (
-              <button
-                key={role}
-                type="button"
-                className={`btn ${
-                  selectedRole === role ? 'btn-primary' : 'btn-outline-primary'
-                }`}
-                onClick={() => {
-                  void continueLogin(role)
-                }}
-                disabled={busy}
-              >
-                {busy && busyRole === role
-                  ? 'Opening...'
-                  : role.replace(/_/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase())}
-              </button>
-            ))}
+        <h3 className="text-center text-success" style={{ fontFamily: 'Arial, sans-serif' }}>
+          Select Your Role to Log In
+        </h3>
+
+        <p className="text-center text-muted mt-2">
+          {user?.name ? `${user.name}, you` : 'You'} have multiple roles. Choose how you want to
+          continue.
+        </p>
+
+        <div className="d-flex flex-wrap justify-content-center gap-3 mt-4">
+          {roles.map((role) => {
+            const label = role.replace(/_/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase())
+            return (
+              <div key={role} className="mb-3 d-grid">
+                <button
+                  type="button"
+                  className="btn btn-lg btn-success"
+                  title={`Log in as ${label}`}
+                  onClick={() => {
+                    void continueWithRole(role)
+                  }}
+                  disabled={busy}
+                >
+                  {busy && busyRole === role ? 'Opening…' : label}
+                </button>
+              </div>
+            )
+          })}
+        </div>
+
+        {error ? (
+          <div className="alert alert-danger text-center mt-3" role="alert">
+            {error}
           </div>
-
-          {error ? (
-            <div className="alert alert-danger py-2 mt-3" role="alert">
-              {error}
-            </div>
-          ) : null}
-
-        </div>
+        ) : null}
       </div>
     </div>
   )

src/pages/admin/AdminStudentScoreCardPage.tsx

@@ -0,0 +1,286 @@
+import { type FormEvent, useEffect, useMemo, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import {
+  fetchStudentScoreCard,
+  searchAdministratorDashboard,
+} from '../../api/session'
+import type { AdministratorDashboardSearchResponse, StudentScoreCardRow } from '../../api/types'
+
+const MAX_RESULTS = 50
+
+function buildSuggestionValue(stu: Record<string, unknown>): string {
+  const schoolId = String(stu.school_id ?? '').trim()
+  const label = `${String(stu.firstname ?? '')} ${String(stu.lastname ?? '')}`.trim()
+  return schoolId !== '' ? `${schoolId} - ${label}` : label
+}
+
+/** CI `admin/student_score_card.php` — search, datalist, status badges, score table. */
+export function AdminStudentScoreCardPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const qParam = searchParams.get('q') ?? ''
+
+  const [query, setQuery] = useState(qParam)
+  const [suggestions, setSuggestions] = useState<Array<Record<string, unknown>>>([])
+  const [results, setResults] = useState<Array<Record<string, unknown>>>([])
+  const [selectedStudentId, setSelectedStudentId] = useState<number | null>(null)
+  const [selectedStudent, setSelectedStudent] = useState<{
+    firstname?: string | null
+    lastname?: string | null
+    school_id?: string | null
+  } | null>(null)
+  const [rows, setRows] = useState<StudentScoreCardRow[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const lastAutoQuery = useRef('')
+
+  const suggestionOptions = useMemo(() => {
+    const seen = new Set<string>()
+    const out: string[] = []
+    for (const stu of suggestions) {
+      const v = buildSuggestionValue(stu).trim()
+      if (!v || seen.has(v)) continue
+      seen.add(v)
+      out.push(v)
+    }
+    return out
+  }, [suggestions])
+
+  useEffect(() => {
+    setQuery(qParam)
+  }, [qParam])
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const data: AdministratorDashboardSearchResponse = await searchAdministratorDashboard('')
+        setSuggestions(data.results?.students ?? [])
+      } catch {
+        setSuggestions([])
+      }
+    })()
+  }, [])
+
+  useEffect(() => {
+    if (!qParam.trim()) return
+    void runSearchQuery(qParam)
+  }, [qParam])
+
+  async function runSearchQuery(q: string) {
+    const trimmed = q.trim()
+    if (!trimmed) return
+    try {
+      const data: AdministratorDashboardSearchResponse = await searchAdministratorDashboard(trimmed)
+      const list = data.results?.students ?? []
+      setResults(list.slice(0, MAX_RESULTS))
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to search students.')
+    }
+  }
+
+  async function runSearch(e?: FormEvent) {
+    e?.preventDefault()
+    const trimmed = query.trim()
+    setSearchParams(trimmed ? { q: trimmed } : {})
+    await runSearchQuery(trimmed)
+  }
+
+  async function openScoreCard(studentId: number) {
+    try {
+      const data = await fetchStudentScoreCard(studentId)
+      setSelectedStudentId(studentId)
+      setSelectedStudent(data.student)
+      setRows(data.rows ?? [])
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to load student score card.')
+    }
+  }
+
+  function tryAutoRun(currentValue: string) {
+    const val = currentValue.trim()
+    if (!val) return
+    if (suggestionOptions.includes(val) && val !== lastAutoQuery.current) {
+      lastAutoQuery.current = val
+      void runSearchQuery(val)
+      setSearchParams({ q: val })
+    }
+  }
+
+  return (
+    <div className="container-fluid py-4">
+      <style>{`
+        .admin-score-table { margin-top: 4px; }
+        .admin-score-table thead th { position: static; }
+      `}</style>
+      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
+        <div>
+          <h2 className="mb-0">Student Score Card (Admin)</h2>
+          <div className="text-muted small">Search for a student, then open their score card.</div>
+        </div>
+      </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card shadow-sm mb-3">
+        <div className="card-body">
+          <form
+            id="studentSearchForm"
+            onSubmit={(e) => void runSearch(e)}
+          >
+            <div className="row g-2 justify-content-center">
+              <div className="col-12 col-md-8 col-lg-6">
+                <div className="input-group">
+                  <span className="input-group-text">Search Student</span>
+                  <input
+                    id="globalStudentSearch"
+                    className="form-control"
+                    type="text"
+                    name="q"
+                    placeholder="Type School ID or Student Name"
+                    list="studentSuggestions"
+                    autoComplete="off"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    onInput={(e) => {
+                      const v = (e.target as HTMLInputElement).value
+                      window.setTimeout(() => tryAutoRun(v), 50)
+                    }}
+                  />
+                  <button
+                    id="globalStudentSearchClear"
+                    className="btn btn-outline-secondary"
+                    type="button"
+                    title="Clear search"
+                    onClick={() => {
+                      setQuery('')
+                      lastAutoQuery.current = ''
+                      setSearchParams({})
+                    }}
+                  >
+                    Clear
+                  </button>
+                </div>
+                <small className="text-muted">Searches all grades.</small>
+              </div>
+            </div>
+            <button type="submit" className="d-none">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <datalist id="studentSuggestions">
+        {suggestionOptions.map((v) => (
+          <option key={v} value={v} />
+        ))}
+      </datalist>
+
+      {query.trim() && results.length === 0 ? (
+        <div className="alert alert-warning">No students found.</div>
+      ) : null}
+
+      {results.length > 0 ? (
+        <div className="card shadow-sm">
+          <div className="card-header d-flex justify-content-between align-items-center">
+            <strong>Results</strong>
+            <span className="text-muted small">Showing up to {MAX_RESULTS}</span>
+          </div>
+          <div className="card-body table-responsive pt-2">
+            <table className="table table-striped table-hover align-middle admin-score-table no-mgmt-sticky" data-no-mgmt-sticky="1">
+              <thead className="table-light">
+                <tr>
+                  <th>School ID</th>
+                  <th>Student</th>
+                  <th>Status</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {results.map((s) => (
+                  <tr key={String(s.id ?? '')}>
+                    <td>{String(s.school_id ?? '')}</td>
+                    <td>{`${String(s.firstname ?? '')} ${String(s.lastname ?? '')}`.trim()}</td>
+                    <td>
+                      {Number(s.is_active ?? 0) === 1 ? (
+                        <span className="badge text-bg-success">Active</span>
+                      ) : (
+                        <span className="badge text-bg-secondary">Inactive</span>
+                      )}
+                    </td>
+                    <td className="text-end">
+                      <button
+                        className="btn btn-sm btn-outline-primary"
+                        type="button"
+                        onClick={() => void openScoreCard(Number(s.id))}
+                      >
+                        Open Score Card
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : null}
+
+      {selectedStudentId && selectedStudent ? (
+        <div className="card shadow-sm mt-4">
+          <div className="card-header">
+            <strong>{`${selectedStudent.firstname ?? ''} ${selectedStudent.lastname ?? ''}`.trim()}</strong>
+            <span className="text-muted ms-2">{selectedStudent.school_id ?? ''}</span>
+          </div>
+          <div className="card-body table-responsive">
+            <table className="table table-bordered table-sm align-middle mb-0">
+              <thead className="table-light">
+                <tr>
+                  <th>School Year</th>
+                  <th>Semester</th>
+                  <th>Class</th>
+                  <th>Homework</th>
+                  <th>Project</th>
+                  <th>Participation</th>
+                  <th>Quiz</th>
+                  <th>Test</th>
+                  <th>Attendance</th>
+                  <th>PTAP</th>
+                  <th>Midterm</th>
+                  <th>Semester</th>
+                  <th>Year Avg</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.length === 0 ? (
+                  <tr>
+                    <td colSpan={13} className="text-muted">
+                      No score rows found.
+                    </td>
+                  </tr>
+                ) : (
+                  rows.map((row, index) => (
+                    <tr key={`${row.school_year}-${row.semester}-${index}`}>
+                      <td>{row.school_year ?? '—'}</td>
+                      <td>{row.semester ?? '—'}</td>
+                      <td>{row.class_section_name ?? '—'}</td>
+                      <td>{row.homework_avg ?? '—'}</td>
+                      <td>{row.project_avg ?? '—'}</td>
+                      <td>{row.participation_score ?? '—'}</td>
+                      <td>{row.quiz_avg ?? '—'}</td>
+                      <td>{row.test_avg ?? '—'}</td>
+                      <td>{row.attendance_score ?? '—'}</td>
+                      <td>{row.ptap_score ?? '—'}</td>
+                      <td>{row.midterm_exam_score ?? '—'}</td>
+                      <td>{row.semester_score ?? '—'}</td>
+                      <td>{row.year_score ?? '—'}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/pages/attendance/AdministratorAbsencePage.tsx

@@ -0,0 +1,301 @@
+import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  fetchAdministratorAbsenceForm,
+  submitAdministratorAbsence,
+} from '../../api/session'
+import type { AdministratorAbsenceFormResponse } from '../../api/types'
+
+const DEFAULT_REASON_TYPES: Record<string, string> = {
+  sick: 'Illness / medical',
+  vacation: 'Vacation',
+  personal: 'Personal',
+  professional: 'Professional development',
+  other: 'Other',
+}
+
+function formatYmd(d: string): string {
+  const t = String(d).trim()
+  if (!/^\d{4}-\d{2}-\d{2}/.test(t)) return t
+  const date = new Date(t.slice(0, 10) + 'T12:00:00')
+  if (Number.isNaN(date.getTime())) return t
+  return date.toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+function normalizeFormPayload(body: AdministratorAbsenceFormResponse): {
+  adminName: string
+  semester: string
+  schoolYear: string
+  existing: NonNullable<AdministratorAbsenceFormResponse['existing']>
+  available: string[]
+  reasonTypes: Record<string, string>
+} {
+  const available =
+    body.availableDates?.length ? body.availableDates : body.available_dates ?? []
+  const schoolYear = body.schoolYear ?? body.school_year ?? ''
+  const reasonTypes =
+    body.reason_types && Object.keys(body.reason_types).length > 0
+      ? body.reason_types
+      : DEFAULT_REASON_TYPES
+  return {
+    adminName: String(body.admin_name ?? '').trim() || 'Administrator',
+    semester: String(body.semester ?? '').trim(),
+    schoolYear: String(schoolYear).trim(),
+    existing: body.existing ?? [],
+    available: [...new Set(available.map((d) => String(d).slice(0, 10)))].sort(),
+    reasonTypes,
+  }
+}
+
+/**
+ * Administrator absence requests — `GET`/`POST /api/v1/administrator/absence` (JWT Bearer).
+ * Pair with Laravel `routes/api.php` + OpenAPI docs.
+ */
+export function AdministratorAbsencePage() {
+  const [raw, setRaw] = useState<AdministratorAbsenceFormResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+  const [selectedDates, setSelectedDates] = useState<Set<string>>(() => new Set())
+  const [reasonType, setReasonType] = useState('')
+  const [reason, setReason] = useState('')
+
+  const normalized = useMemo(() => (raw ? normalizeFormPayload(raw) : null), [raw])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const body = await fetchAdministratorAbsenceForm()
+      setRaw(body)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load absence form.')
+      setRaw(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  useEffect(() => {
+    if (!normalized) return
+    const firstKey = Object.keys(normalized.reasonTypes)[0] ?? ''
+    setReasonType((current) => current || firstKey)
+  }, [normalized])
+
+  function toggleDate(ymd: string) {
+    setSelectedDates((prev) => {
+      const next = new Set(prev)
+      if (next.has(ymd)) next.delete(ymd)
+      else next.add(ymd)
+      return next
+    })
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setSuccess(null)
+    setError(null)
+    const dates = Array.from(selectedDates).sort()
+    if (dates.length === 0) {
+      setError('Select at least one date to request absence.')
+      return
+    }
+    if (!reason.trim()) {
+      setError('Please enter a reason.')
+      return
+    }
+    setSaving(true)
+    try {
+      const res = await submitAdministratorAbsence({
+        dates,
+        reason_type: reasonType || undefined,
+        reason: reason.trim(),
+      })
+      const msg =
+        res.message ??
+        (typeof res.saved === 'number'
+          ? `Saved ${res.saved} date(s).`
+          : 'Absence request submitted.')
+      setSuccess(msg)
+      setSelectedDates(new Set())
+      setReason('')
+      await load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to submit absence request.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="container-fluid py-4" style={{ maxWidth: 920 }}>
+      <div className="mb-4">
+        <h1 className="h3 mb-1">Administrator absence</h1>
+        <p className="text-muted mb-0">
+          Request scheduled time away. Uses{' '}
+          <code className="small">GET</code> / <code className="small">POST</code>{' '}
+          <code className="small">/api/v1/administrator/absence</code> with your session JWT.
+        </p>
+      </div>
+
+      {loading ? (
+        <div className="text-muted">Loading…</div>
+      ) : null}
+
+      {error ? (
+        <div className="alert alert-danger" role="alert">
+          {error}
+        </div>
+      ) : null}
+      {success ? (
+        <div className="alert alert-success" role="alert">
+          {success}
+        </div>
+      ) : null}
+
+      {normalized ? (
+        <>
+          <div className="card shadow-sm mb-4">
+            <div className="card-body">
+              <div className="row g-2 small">
+                <div className="col-md-4">
+                  <span className="text-muted">Admin</span>
+                  <div className="fw-semibold">{normalized.adminName}</div>
+                </div>
+                {normalized.semester ? (
+                  <div className="col-md-4">
+                    <span className="text-muted">Semester</span>
+                    <div className="fw-semibold">{normalized.semester}</div>
+                  </div>
+                ) : null}
+                {normalized.schoolYear ? (
+                  <div className="col-md-4">
+                    <span className="text-muted">School year</span>
+                    <div className="fw-semibold">{normalized.schoolYear}</div>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-4">
+            <div className="card-header">
+              <strong>Recorded absences</strong>
+            </div>
+            <div className="card-body p-0">
+              {normalized.existing.length === 0 ? (
+                <div className="p-3 text-muted small">No absence entries on file for this period.</div>
+              ) : (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped mb-0 align-middle">
+                    <thead className="table-light">
+                      <tr>
+                        <th>Date</th>
+                        <th>Status</th>
+                        <th>Reason</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {normalized.existing.map((row, i) => (
+                        <tr key={`${row.date}-${i}`}>
+                          <td>{row.date ? formatYmd(String(row.date)) : '—'}</td>
+                          <td>{row.status ?? '—'}</td>
+                          <td>{row.reason ?? '—'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm">
+            <div className="card-header">
+              <strong>Request absence</strong>
+            </div>
+            <div className="card-body">
+              {normalized.available.length === 0 ? (
+                <p className="text-muted mb-0">
+                  No open dates are available to select right now. Check back later or contact the office if you need an
+                  exception.
+                </p>
+              ) : (
+                <form onSubmit={(e) => void onSubmit(e)}>
+                  <fieldset disabled={saving}>
+                    <legend className="form-label fw-semibold">Dates</legend>
+                    <div className="row row-cols-1 row-cols-md-2 g-2 mb-4">
+                      {normalized.available.map((ymd) => (
+                        <div key={ymd} className="col">
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id={`abs-${ymd}`}
+                              checked={selectedDates.has(ymd)}
+                              onChange={() => toggleDate(ymd)}
+                            />
+                            <label className="form-check-label" htmlFor={`abs-${ymd}`}>
+                              {formatYmd(ymd)}
+                              <span className="text-muted small ms-1">({ymd})</span>
+                            </label>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="mb-3">
+                      <label className="form-label" htmlFor="absenceReasonType">
+                        Reason type
+                      </label>
+                      <select
+                        id="absenceReasonType"
+                        className="form-select"
+                        value={reasonType}
+                        onChange={(e) => setReasonType(e.target.value)}
+                      >
+                        {Object.entries(normalized.reasonTypes).map(([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="mb-3">
+                      <label className="form-label" htmlFor="absenceReason">
+                        Details <span className="text-danger">*</span>
+                      </label>
+                      <textarea
+                        id="absenceReason"
+                        className="form-control"
+                        rows={4}
+                        required
+                        value={reason}
+                        onChange={(e) => setReason(e.target.value)}
+                        placeholder="Brief explanation for HR / scheduling records."
+                      />
+                    </div>
+
+                    <button type="submit" className="btn btn-primary" disabled={saving}>
+                      {saving ? 'Submitting…' : 'Submit request'}
+                    </button>
+                  </fieldset>
+                </form>
+              )}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}

src/pages/attendance/AdminsAttendanceFormPage.tsx

@@ -0,0 +1,272 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import {
+  fetchAdministratorAdminAttendance,
+  saveAdministratorAdminAttendance,
+} from '../../api/session'
+import { TEACHER_ATTENDANCE_MONTH_PATH } from './attendancePaths'
+import type { AdministratorAdminAttendanceRow } from '../../api/types'
+
+function formatUsDate(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return ymd
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}
+
+/** Port of `Views/attendance/admins_attendance_form.php` — admin staff daily attendance. */
+export function AdminsAttendanceFormPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+  const date =
+    searchParams.get('date') ?? new Date().toISOString().slice(0, 10)
+
+  const [rows, setRows] = useState<AdministratorAdminAttendanceRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const data = await fetchAdministratorAdminAttendance({
+          date,
+          semester: semester || null,
+          schoolYear: schoolYear || null,
+        })
+        if (!cancelled) setRows(data.admins_grid ?? [])
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load admin attendance.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [date, semester, schoolYear])
+
+  const dateLabel = useMemo(() => formatUsDate(date), [date])
+
+  function setField(
+    userId: number,
+    patch: Partial<Pick<AdministratorAdminAttendanceRow, 'status' | 'reason'>>,
+  ) {
+    setRows((prev) =>
+      prev.map((r) =>
+        (r.user_id ?? 0) === userId ? { ...r, ...patch } : r,
+      ),
+    )
+  }
+
+  function markAllPresent() {
+    setRows((prev) => prev.map((r) => ({ ...r, status: 'present' })))
+  }
+
+  function clearAll() {
+    setRows((prev) => prev.map((r) => ({ ...r, status: '', reason: '' })))
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setSaving(true)
+    setMessage(null)
+    setError(null)
+    try {
+      const admins: Record<
+        string,
+        { status?: string | null; reason?: string | null; role_name?: string | null }
+      > = {}
+      for (const r of rows) {
+        const uid = r.user_id ?? 0
+        if (!uid) continue
+        admins[String(uid)] = {
+          status: r.status ?? '',
+          reason: r.reason ?? '',
+          role_name: r.role_name ?? 'Admin',
+        }
+      }
+      await saveAdministratorAdminAttendance({
+        date,
+        semester,
+        school_year: schoolYear,
+        admins,
+      })
+      setMessage('Saved.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function applyFilters(next: { school_year: string; semester: string; date: string }) {
+    const p = new URLSearchParams()
+    if (next.school_year) p.set('school_year', next.school_year)
+    if (next.semester) p.set('semester', next.semester)
+    if (next.date) p.set('date', next.date)
+    setSearchParams(p)
+  }
+
+  return (
+    <div className="container-xxl py-4">
+      <div className="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <h2 className="mb-0">Admin Attendance</h2>
+        <div className="d-flex gap-2">
+          <Link
+            className="btn btn-outline-secondary"
+            to={`${TEACHER_ATTENDANCE_MONTH_PATH}?${new URLSearchParams({ date, semester, school_year: schoolYear }).toString()}`}
+          >
+            ← Back to Monthly Attendance
+          </Link>
+        </div>
+      </div>
+
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <form
+        className="row gy-2 gx-3 align-items-end mb-3"
+        onSubmit={(e) => {
+          e.preventDefault()
+          const fd = new FormData(e.currentTarget)
+          applyFilters({
+            school_year: String(fd.get('school_year') ?? ''),
+            semester: String(fd.get('semester') ?? ''),
+            date: String(fd.get('date') ?? ''),
+          })
+        }}
+      >
+        <div className="col-sm-3">
+          <label className="form-label">School Year</label>
+          <input
+            type="text"
+            name="school_year"
+            className="form-control"
+            defaultValue={schoolYear}
+            placeholder="e.g. 2025-2026"
+          />
+        </div>
+        <div className="col-sm-2">
+          <label className="form-label">Semester</label>
+          <input
+            type="text"
+            name="semester"
+            className="form-control"
+            defaultValue={semester}
+            placeholder="Fall"
+          />
+        </div>
+        <div className="col-sm-3">
+          <label className="form-label">Date</label>
+          <input type="date" name="date" className="form-control" defaultValue={date} />
+        </div>
+        <div className="col-sm-4 d-flex gap-2">
+          <button type="submit" className="btn btn-secondary">
+            Load
+          </button>
+          <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={() => setSearchParams(new URLSearchParams())}
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+
+      <form onSubmit={onSubmit}>
+        <div className="card shadow-sm">
+          <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+            <div>
+              <strong>Admins on {dateLabel}</strong>
+              <span className="badge bg-secondary ms-2">{rows.length}</span>
+            </div>
+            <div className="d-flex gap-2">
+              <button type="button" className="btn btn-sm btn-outline-success" onClick={markAllPresent}>
+                Mark All Present
+              </button>
+              <button type="button" className="btn btn-sm btn-outline-secondary" onClick={clearAll}>
+                Clear All
+              </button>
+            </div>
+          </div>
+
+          <div className="card-body table-responsive">
+            {loading ? (
+              <p className="text-muted mb-0">Loading…</p>
+            ) : rows.length === 0 ? (
+              <div className="alert alert-info mb-0">No Admin users found for this day/term.</div>
+            ) : (
+              <table className="table table-bordered table-striped align-middle" id="adminsAttTable">
+                <thead className="table-light">
+                  <tr>
+                    <th className="text-center" style={{ width: 70 }}>
+                      #
+                    </th>
+                    <th>Name</th>
+                    <th className="text-center" style={{ width: 180 }}>
+                      Role
+                    </th>
+                    <th className="text-center" style={{ width: 220 }}>
+                      Status
+                    </th>
+                    <th>Reason</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((row, idx) => {
+                    const uid = row.user_id ?? 0
+                    const name =
+                      `${row.firstname ?? ''} ${row.lastname ?? ''}`.trim() || `User#${uid}`
+                    const stat = String(row.status ?? '').toLowerCase()
+                    return (
+                      <tr key={uid || idx}>
+                        <td className="text-center">{idx + 1}</td>
+                        <td>{name}</td>
+                        <td className="text-center">{row.role_name ?? 'Admin'}</td>
+                        <td className="text-center">
+                          <select
+                            className="form-select form-select-sm"
+                            value={stat === 'present' || stat === 'absent' || stat === 'late' ? stat : ''}
+                            onChange={(ev) =>
+                              setField(uid, { status: ev.target.value || null })
+                            }
+                          >
+                            <option value="">—</option>
+                            <option value="present">Present</option>
+                            <option value="absent">Absent</option>
+                            <option value="late">Late</option>
+                          </select>
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className="form-control form-control-sm"
+                            placeholder="Optional reason"
+                            value={row.reason ?? ''}
+                            onChange={(ev) => setField(uid, { reason: ev.target.value })}
+                          />
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+
+          <div className="card-footer d-flex justify-content-end">
+            <button type="submit" className="btn btn-primary" disabled={saving || rows.length === 0}>
+              {saving ? 'Saving…' : 'Save Admins Attendance'}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}

src/pages/attendance/AttendanceEditModal.tsx

@@ -0,0 +1,154 @@
+import { type FormEvent, useId, useState, type ChangeEvent } from 'react'
+import { updateAdministratorAttendance } from '../../api/session'
+
+export type AttendanceEditModalProps = {
+  studentId: string | number
+  studentFirst?: string | null
+  studentLast?: string | null
+  classId: number
+  sectionId: number
+  /** Called after successful save */
+  onSaved?: () => void
+}
+
+/**
+ * Port of `Views/attendance/edit_modal.php` — embedded in flows that need inline attendance edits.
+ * Mount inside a Bootstrap modal wrapper or render with `show` pattern.
+ */
+export function AttendanceEditModalBody({
+  studentId,
+  studentFirst,
+  studentLast,
+  classId,
+  sectionId,
+  onSaved,
+}: AttendanceEditModalProps) {
+  const uid = useId()
+  const statusId = `status-${uid}`
+  const dateId = `date-${uid}`
+  const reasonId = `reason-${uid}`
+  const reportedId = `reported-${uid}`
+
+  const [status, setStatus] = useState('present')
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10))
+  const [reason, setReason] = useState('')
+  const [reported, setReported] = useState('0')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const name = `${studentFirst ?? ''} ${studentLast ?? ''}`.trim() || `Student #${studentId}`
+
+  const reasonRequired = status === 'absent' || status === 'late'
+  const showReported = status === 'absent'
+
+  function onStatusChange(ev: ChangeEvent<HTMLSelectElement>) {
+    const v = ev.target.value
+    setStatus(v)
+    if (v !== 'absent') setReported('0')
+    if (v === 'present') setReason('')
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await updateAdministratorAttendance({
+        class_section_id: sectionId,
+        student_id: Number(studentId),
+        class_id: classId,
+        status: status as 'present' | 'absent' | 'late',
+        date,
+        reason: reasonRequired ? reason : '',
+        is_reported: showReported ? (reported === '1' ? 'yes' : 'no') : undefined,
+      })
+      onSaved?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+      <div className="mb-3">
+        <label className="form-label" htmlFor={statusId}>
+          Status
+        </label>
+        <select
+          id={statusId}
+          className="form-select attendance-status"
+          required
+          value={status}
+          onChange={onStatusChange}
+        >
+          <option value="present">Present</option>
+          <option value="late">Late</option>
+          <option value="absent">Absent</option>
+        </select>
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label" htmlFor={dateId}>
+          Date
+        </label>
+        <input
+          id={dateId}
+          type="date"
+          className="form-control"
+          required
+          value={date}
+          onChange={(ev) => setDate(ev.target.value)}
+        />
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label" htmlFor={reasonId}>
+          Reason
+        </label>
+        <textarea
+          id={reasonId}
+          name="reason"
+          className="form-control attendance-reason"
+          rows={3}
+          placeholder="Enter reason for absence or lateness"
+          value={reason}
+          disabled={!reasonRequired}
+          required={reasonRequired}
+          onChange={(ev) => setReason(ev.target.value)}
+        />
+      </div>
+
+      <div className={`mb-3${showReported ? '' : ' d-none'}`}>
+        <label className="form-label" htmlFor={reportedId}>
+          Absence Reported?
+        </label>
+        <select
+          id={reportedId}
+          className="form-select"
+          value={reported}
+          onChange={(ev) => setReported(ev.target.value)}
+        >
+          <option value="0">No</option>
+          <option value="1">Yes</option>
+        </select>
+        <div className="form-text">Select “Yes” if the parent/guardian reported this absence.</div>
+      </div>
+
+      <input type="hidden" name="student_id" value={String(studentId)} />
+
+      <div className="modal-footer px-0 pb-0">
+        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
+          Close
+        </button>
+        <button type="submit" className="btn btn-primary" disabled={saving}>
+          {saving ? 'Saving…' : 'Save changes'}
+        </button>
+      </div>
+
+      <p className="small text-muted mb-0 mt-2">{name}</p>
+    </form>
+  )
+}

src/pages/attendance/AttendanceStudentViolationsViewPage.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react'
+import { Link, useParams, useSearchParams } from 'react-router-dom'
+import { fetchAttendanceStudentViolationsView } from '../../api/session'
+import { ATTENDANCE_VIOLATIONS_PENDING_PATH } from './attendancePaths'
+
+/** Port of `Views/attendance/view.php` — student violation history. */
+export function AttendanceStudentViolationsViewPage() {
+  const { studentId } = useParams()
+  const [searchParams] = useSearchParams()
+  const code = searchParams.get('code')
+  const incidentDate = searchParams.get('incident_date')
+  const includeNotified = searchParams.get('include_notified')
+
+  const [data, setData] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!studentId) return
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const res = await fetchAttendanceStudentViolationsView(studentId, {
+          code,
+          incident_date: incidentDate,
+          include_notified: includeNotified ?? undefined,
+        })
+        if (!cancelled) setData(res)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [studentId, code, incidentDate, includeNotified])
+
+  const title = typeof data?.title === 'string' ? data.title : 'Attendance History'
+  const attendance = (data?.attendance as Array<Record<string, unknown>> | undefined) ?? []
+  const showViolationSummary = Boolean(data?.show_violation_summary)
+  const viCode = data?.violation_code
+  const viDateRaw = String(data?.violation_date ?? '')
+  const viNotif = data?.violation_notified
+
+  return (
+    <div className="container-xxl py-4">
+      <h2 className="text-center mt-2 mb-3">{title}</h2>
+
+      <div className="card mb-4">
+        <div className="card-body">
+          <Link to={ATTENDANCE_VIOLATIONS_PENDING_PATH} className="btn btn-secondary mb-3">
+            Back to Attendance
+          </Link>
+
+          <p className="text-muted small mb-3">
+            Showing absences and lates for this student within the violation window.
+          </p>
+
+          <h5 className="card-title mb-3">Attendance Violations</h5>
+
+          {loading ? (
+            <p className="text-muted">Loading…</p>
+          ) : error ? (
+            <div className="alert alert-danger">{error}</div>
+          ) : (
+            <div className="table-responsive">
+              <table className="table table-striped attendance-history-table">
+                <thead>
+                  <tr>
+                    <th>Date</th>
+                    <th>Status</th>
+                    <th>Reason</th>
+                    <th>Notified</th>
+                    <th>Reported</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {showViolationSummary && (viCode || viDateRaw) ? (
+                    <tr className="table-info">
+                      <td>{viDateRaw ? formatMdY(viDateRaw.slice(0, 10)) : '—'}</td>
+                      <td>{String(viCode ?? '—')}</td>
+                      <td>Violation summary</td>
+                      <td>{truthy(viNotif) ? 'Yes' : 'No'}</td>
+                      <td>—</td>
+                    </tr>
+                  ) : null}
+                  {attendance.length === 0 ? (
+                    <tr>
+                      <td colSpan={5} className="text-center text-muted">
+                        No attendance violations found for this student.
+                      </td>
+                    </tr>
+                  ) : (
+                    attendance.map((record, i) => (
+                      <ViolationRow key={i} record={record} />
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function truthy(v: unknown): boolean {
+  if (v === true || v === 1) return true
+  if (typeof v === 'string') return ['yes', '1', 'true'].includes(v.toLowerCase().trim())
+  return false
+}
+
+function ViolationRow({ record }: { record: Record<string, unknown> }) {
+  const dateStr = String(record.date ?? '').slice(0, 10)
+  const dateLabel = dateStr ? formatMdY(dateStr) : '—'
+  const statusRaw = String(record.status ?? '').toLowerCase().trim()
+  const reason = String(record.reason ?? '').trim()
+  const isNotified = truthy(record.is_notified)
+  const isReported = truthy(record.is_reported)
+
+  const isAbs =
+    statusRaw === 'absent' ||
+    statusRaw === 'abs' ||
+    statusRaw === 'a' ||
+    statusRaw.startsWith('abs')
+  const isLate = statusRaw === 'late' || statusRaw === 'l' || statusRaw.startsWith('late')
+
+  let status = statusRaw !== '' ? capitalize(statusRaw) : 'Unknown'
+  if (isAbs) status = isReported ? 'Reported Absence' : 'Unreported Absence'
+  else if (isLate) status = isReported ? 'Reported Late' : 'Unreported Late'
+
+  return (
+    <tr>
+      <td>{dateLabel}</td>
+      <td>{status}</td>
+      <td>{reason !== '' ? reason : 'No reason provided'}</td>
+      <td>{isNotified ? 'Yes' : 'No'}</td>
+      <td>{isReported ? 'Yes' : 'No'}</td>
+    </tr>
+  )
+}
+
+function capitalize(s: string): string {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s
+}
+
+function formatMdY(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return ymd
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}

src/pages/attendance/AttendanceTemplatesIndexPage.tsx

@@ -0,0 +1,215 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import {
+  deleteAttendanceCommentTemplate,
+  fetchAttendanceCommentTemplates,
+  saveAttendanceCommentTemplate,
+} from '../../api/session'
+import type { AttendanceCommentTemplate } from '../../api/types'
+
+/** Port of `Views/attendance_templates/index.php` — comment templates CRUD. */
+export function AttendanceTemplatesIndexPage() {
+  const [templates, setTemplates] = useState<AttendanceCommentTemplate[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [modal, setModal] = useState<AttendanceCommentTemplate | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const data = await fetchAttendanceCommentTemplates()
+        if (!cancelled) setTemplates(data.templates ?? [])
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Failed to load templates.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  async function refreshTemplates() {
+    try {
+      const data = await fetchAttendanceCommentTemplates()
+      setTemplates(data.templates ?? [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load templates.')
+    }
+  }
+
+  function openModal(t?: AttendanceCommentTemplate) {
+    setModal(
+      t ?? {
+        id: undefined,
+        min_score: undefined,
+        max_score: undefined,
+        template_text: '',
+        is_active: true,
+      },
+    )
+  }
+
+  async function onSave(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (!modal) return
+    const fd = new FormData(e.currentTarget)
+    const data: Record<string, string> = {}
+    fd.forEach((v, k) => {
+      data[k] = String(v)
+    })
+    if (modal.id != null) data.id = String(modal.id)
+    data.is_active = fd.get('is_active') === 'on' ? 'on' : ''
+    try {
+      await saveAttendanceCommentTemplate(data)
+      setModal(null)
+      await refreshTemplates()
+    } catch {
+      setError('Save failed.')
+    }
+  }
+
+  async function onDelete(id: number | undefined) {
+    if (id == null) return
+    if (!confirm('Delete this template?')) return
+    try {
+      await deleteAttendanceCommentTemplate(id)
+      await refreshTemplates()
+    } catch {
+      setError('Delete failed.')
+    }
+  }
+
+  return (
+    <div className="container-fluid py-4">
+      <div className="text-center mb-4">
+        <h2 className="mt-2 mb-3">Attendance Comment Templates</h2>
+      </div>
+
+      <div className="mb-4">
+        <button type="button" className="btn btn-success" onClick={() => openModal()}>
+          Add New Template
+        </button>
+      </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Min Score</th>
+              <th>Max Score</th>
+              <th>Template Text</th>
+              <th>Active</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6} className="text-center text-muted">
+                  Loading…
+                </td>
+              </tr>
+            ) : templates.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="text-center text-muted">
+                  No templates.
+                </td>
+              </tr>
+            ) : (
+              templates.map((t, ti) => (
+                <tr key={t.id ?? `tpl-${ti}`}>
+                  <td>{t.id ?? '—'}</td>
+                  <td>{t.min_score ?? '—'}</td>
+                  <td>{t.max_score ?? '—'}</td>
+                  <td style={{ maxWidth: 420, whiteSpace: 'pre-wrap' }}>{t.template_text ?? ''}</td>
+                  <td>{t.is_active ? 'Yes' : 'No'}</td>
+                  <td className="d-flex gap-1">
+                    <button type="button" className="btn btn-sm btn-warning" onClick={() => openModal(t)}>
+                      Edit
+                    </button>
+                    <button type="button" className="btn btn-sm btn-danger" onClick={() => onDelete(t.id)}>
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {modal ? (
+        <div className="modal show d-block" tabIndex={-1} style={{ background: 'rgba(0,0,0,0.4)' }}>
+          <div className="modal-dialog">
+            <form className="modal-content" onSubmit={onSave}>
+              <div className="modal-header">
+                <h5 className="modal-title">{modal.id ? 'Edit Template' : 'New Template'}</h5>
+                <button type="button" className="btn-close" aria-label="Close" onClick={() => setModal(null)} />
+              </div>
+              <div className="modal-body">
+                <input type="hidden" name="id" value={modal.id ?? ''} />
+                <div className="mb-3">
+                  <label className="form-label">Min Score</label>
+                  <input
+                    type="number"
+                    name="min_score"
+                    className="form-control"
+                    required
+                    defaultValue={modal.min_score ?? ''}
+                  />
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Max Score</label>
+                  <input
+                    type="number"
+                    name="max_score"
+                    className="form-control"
+                    required
+                    defaultValue={modal.max_score ?? ''}
+                  />
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Template Text</label>
+                  <textarea
+                    name="template_text"
+                    className="form-control"
+                    required
+                    rows={4}
+                    defaultValue={modal.template_text ?? ''}
+                  />
+                </div>
+                <div className="form-check mb-3">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    name="is_active"
+                    id="is_active"
+                    defaultChecked={Boolean(modal.is_active)}
+                  />
+                  <label className="form-check-label" htmlFor="is_active">
+                    Active
+                  </label>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setModal(null)}>
+                  Cancel
+                </button>
+                <button type="submit" className="btn btn-primary">
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/pages/attendance/AttendanceTrackingPage.tsx

@@ -0,0 +1,233 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { fetchAttendanceTrackingStudents, recordAttendanceTrackingEntry } from '../../api/session'
+
+/** Port of `Views/attendance/attendance_tracking.php` — record + student summary list. */
+export function AttendanceTrackingPage() {
+  const [title, setTitle] = useState('Attendance Tracking')
+  const [students, setStudents] = useState<Array<Record<string, unknown>>>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [studentId, setStudentId] = useState('')
+  const [recDate, setRecDate] = useState(() => new Date().toISOString().slice(0, 10))
+  const [isPresent, setIsPresent] = useState('1')
+  const [reason, setReason] = useState('')
+  const [isReported, setIsReported] = useState(false)
+  const [notified, setNotified] = useState(false)
+  const [flash, setFlash] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchAttendanceTrackingStudents()
+        if (!cancelled) {
+          setTitle(typeof data.title === 'string' ? data.title : 'Attendance Tracking')
+          setStudents(Array.isArray(data.students) ? data.students : [])
+          setError(null)
+        }
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  async function onRecord(e: FormEvent) {
+    e.preventDefault()
+    setFlash(null)
+    try {
+      await recordAttendanceTrackingEntry({
+        student_id: Number(studentId),
+        date: recDate,
+        is_present: isPresent === '1',
+        reason: isPresent === '0' ? reason : '',
+        is_reported: isReported ? 1 : 0,
+        notified: notified ? 1 : 0,
+      })
+      setFlash('Recorded.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Record failed.')
+    }
+  }
+
+  const showReason = isPresent === '0'
+
+  return (
+    <div className="container-xxl py-4">
+      <h2 className="text-center mt-2 mb-3">{title}</h2>
+      {flash ? <div className="alert alert-success">{flash}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card mb-4">
+        <div className="card-header">
+          <h5 className="mb-0">Record Attendance</h5>
+        </div>
+        <div className="card-body">
+          <form onSubmit={onRecord}>
+            <div className="row">
+              <div className="col-md-4 mb-3">
+                <label className="form-label" htmlFor="student_id">
+                  Student
+                </label>
+                <select
+                  id="student_id"
+                  className="form-select"
+                  required
+                  value={studentId}
+                  onChange={(ev) => setStudentId(ev.target.value)}
+                >
+                  <option value="">Select Student</option>
+                  {students.map((s, i) => {
+                    const id = String(s.id ?? s.student_id ?? '')
+                    const name = String((s.name ?? `${s.firstname ?? ''} ${s.lastname ?? ''}`.trim()) || id)
+                    return (
+                      <option key={id || String(i)} value={id}>
+                        {name}
+                      </option>
+                    )
+                  })}
+                </select>
+              </div>
+              <div className="col-md-3 mb-3">
+                <label className="form-label" htmlFor="date">
+                  Date
+                </label>
+                <input
+                  id="date"
+                  type="date"
+                  className="form-control"
+                  required
+                  value={recDate}
+                  onChange={(ev) => setRecDate(ev.target.value)}
+                />
+              </div>
+              <div className="col-md-3 mb-3">
+                <label className="form-label" htmlFor="is_present">
+                  Status
+                </label>
+                <select
+                  id="is_present"
+                  className="form-select"
+                  required
+                  value={isPresent}
+                  onChange={(ev) => setIsPresent(ev.target.value)}
+                >
+                  <option value="1">Present</option>
+                  <option value="0">Absent</option>
+                </select>
+              </div>
+              <div className="col-md-2 mb-3 d-flex align-items-end">
+                <button type="submit" className="btn btn-primary">
+                  Record
+                </button>
+              </div>
+            </div>
+
+            {showReason ? (
+              <div className="row mt-2">
+                <div className="col-md-6 mb-3">
+                  <label className="form-label" htmlFor="reason">
+                    Reason for Absence
+                  </label>
+                  <textarea
+                    id="reason"
+                    className="form-control"
+                    rows={2}
+                    value={reason}
+                    onChange={(ev) => setReason(ev.target.value)}
+                  />
+                </div>
+                <div className="col-md-6 mb-3 d-flex align-items-end gap-4 flex-wrap">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      id="is_reported"
+                      checked={isReported}
+                      onChange={(ev) => setIsReported(ev.target.checked)}
+                    />
+                    <label className="form-check-label" htmlFor="is_reported">
+                      Reported Absence
+                    </label>
+                  </div>
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      id="notified"
+                      checked={notified}
+                      onChange={(ev) => setNotified(ev.target.checked)}
+                    />
+                    <label className="form-check-label" htmlFor="notified">
+                      Parent Notified
+                    </label>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </form>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="card-header">
+          <h5 className="mb-0">Student List</h5>
+        </div>
+        <div className="card-body">
+          {loading ? (
+            <p className="text-muted mb-0">Loading students…</p>
+          ) : (
+            <div className="table-responsive">
+              <table className="table table-striped">
+                <thead>
+                  <tr>
+                    <th>Student Name</th>
+                    <th>Total Absences</th>
+                    <th>Last Absence Date</th>
+                    <th>Last Absence Reason</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {students.map((student, idx) => {
+                    const sid = String(student.id ?? student.student_id ?? idx)
+                    const name = String(student.name ?? `${student.firstname ?? ''} ${student.lastname ?? ''}`.trim())
+                    const totalAbs = student.total_absences
+                    const last = student.last_absence as Record<string, unknown> | undefined
+                    const lastDate = last?.date ? String(last.date).slice(0, 10) : ''
+                    const lastReason = last?.reason != null ? String(last.reason) : ''
+                    return (
+                      <tr key={sid}>
+                        <td>{name}</td>
+                        <td>{totalAbs != null ? String(totalAbs) : '—'}</td>
+                        <td>{lastDate ? formatMdY(lastDate) : 'N/A'}</td>
+                        <td>{lastReason || 'N/A'}</td>
+                        <td>
+                          <Link className="btn btn-sm btn-info" to={`/app/administrator/attendance/view/${sid}`}>
+                            View Details
+                          </Link>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatMdY(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return ymd
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}

src/pages/attendance/AttendanceViolationsHubPage.tsx

@@ -0,0 +1,91 @@
+import { type FormEvent, useMemo } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import {
+  ATTENDANCE_VIOLATIONS_NOTIFIED_PATH,
+  ATTENDANCE_VIOLATIONS_PENDING_PATH,
+} from './attendancePaths'
+
+/** Landing screen for attendance violations — links to pending / notified lists (same APIs as subpages). */
+export function AttendanceViolationsHubPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  const filterQuery = useMemo(() => {
+    const s = searchParams.toString()
+    return s ? `?${s}` : ''
+  }, [searchParams])
+
+  function applyFilter(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    if (sy) p.set('school_year', sy)
+    if (sem) p.set('semester', sem)
+    setSearchParams(p)
+  }
+
+  return (
+    <div className="container-fluid px-0">
+      <h2 className="text-center mt-4 mb-3">Attendance Violations</h2>
+      <p className="text-center text-muted small mb-4">
+        Review students who have crossed absence or late thresholds. Data loads on each list via the API.
+      </p>
+
+      <div className="d-flex justify-content-center mb-4">
+        <form className="row g-2 align-items-end" onSubmit={applyFilter}>
+          <div className="col-auto">
+            <label className="form-label small mb-0">School Year</label>
+            <input name="school_year" className="form-control form-control-sm" defaultValue={schoolYear} />
+          </div>
+          <div className="col-auto">
+            <label className="form-label small mb-0">Semester</label>
+            <input name="semester" className="form-control form-control-sm" defaultValue={semester} />
+          </div>
+          <div className="col-auto">
+            <button type="submit" className="btn btn-sm btn-secondary">
+              Apply
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div className="row g-3 justify-content-center px-2 pb-4">
+        <div className="col-12 col-md-5">
+          <div className="card border-0 rounded-3 shadow-sm h-100">
+            <div className="card-body d-flex flex-column">
+              <h5 className="card-title">Pending</h5>
+              <p className="card-text small text-muted flex-grow-1">
+                Students who need notification or follow-up per policy (team notify, auto email, etc.).
+              </p>
+              <Link
+                className="btn btn-primary"
+                to={`${ATTENDANCE_VIOLATIONS_PENDING_PATH}${filterQuery}`}
+              >
+                Open pending list
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="col-12 col-md-5">
+          <div className="card border-0 rounded-3 shadow-sm h-100">
+            <div className="card-body d-flex flex-column">
+              <h5 className="card-title">Notified</h5>
+              <p className="card-text small text-muted flex-grow-1">
+                Students whose parents were already notified; add or edit notes as needed.
+              </p>
+              <Link
+                className="btn btn-outline-primary"
+                to={`${ATTENDANCE_VIOLATIONS_NOTIFIED_PATH}${filterQuery}`}
+              >
+                Open notified list
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/attendance/ComposeAttendanceEmailPage.tsx

@@ -0,0 +1,177 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { fetchAttendanceComposeEmailContext, sendAttendanceViolationEmail } from '../../api/session'
+import { ATTENDANCE_VIOLATIONS_PENDING_PATH } from './attendancePaths'
+
+/** Port of `Views/attendance/compose_email.php` — rich body via large textarea (TinyMCE optional later). */
+export function ComposeAttendanceEmailPage() {
+  const [searchParams] = useSearchParams()
+  const studentId = searchParams.get('student_id') ?? ''
+  const code = searchParams.get('code') ?? ''
+  const variant = searchParams.get('variant') ?? ''
+  const incidentDate =
+    searchParams.get('incident_date') ?? new Date().toISOString().slice(0, 10)
+
+  const [to, setTo] = useState('')
+  const [subject, setSubject] = useState('')
+  const [bodyHtml, setBodyHtml] = useState('')
+  const [studentName, setStudentName] = useState('')
+  const [secondaryEmail, setSecondaryEmail] = useState('')
+  const [secondaryName, setSecondaryName] = useState('')
+  const [schoolYear, setSchoolYear] = useState('')
+  const [semester, setSemester] = useState('')
+  const missingParams = !studentId || !code
+  const [loading, setLoading] = useState(!missingParams)
+  const [error, setError] = useState<string | null>(
+    missingParams ? 'Missing student_id or code query parameters.' : null,
+  )
+  const [msg, setMsg] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (missingParams) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const ctx = await fetchAttendanceComposeEmailContext({
+          studentId,
+          code,
+          variant: variant || null,
+          incidentDate,
+        })
+        if (cancelled) return
+        setTo(String(ctx.parent_email ?? ctx.to ?? ''))
+        setSubject(String(ctx.subject ?? ''))
+        const initial = String(ctx.body_html ?? ctx.body_text ?? '')
+        setBodyHtml(initial)
+        setStudentName(String(ctx.student_name ?? ''))
+        setSecondaryEmail(String(ctx.secondary_email ?? ''))
+        setSecondaryName(String(ctx.secondary_name ?? ''))
+        setSchoolYear(String(ctx.school_year ?? ''))
+        setSemester(String(ctx.semester ?? ''))
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load compose context.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [studentId, code, variant, incidentDate, missingParams])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    setMsg(null)
+    try {
+      await sendAttendanceViolationEmail({
+        student_id: studentId,
+        code,
+        variant,
+        incident_date: incidentDate,
+        to,
+        subject,
+        body_html: bodyHtml,
+      })
+      setMsg('Email sent.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Send failed.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="container my-4">
+        <p className="text-muted">Loading compose form…</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container my-4">
+      <h2 className="text-center mb-3">Compose Attendance Email</h2>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {msg ? <div className="alert alert-success">{msg}</div> : null}
+
+      <div className="card shadow-sm">
+        <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <div>
+            <strong>{studentName}</strong>
+            <span className="badge bg-secondary ms-2">
+              {code}
+              {variant ? ` • ${variant}` : ''}
+            </span>
+          </div>
+          <div>
+            <span className="badge bg-primary">School Year: {schoolYear}</span>
+            {semester ? (
+              <span className="badge bg-info text-dark ms-1">Semester: {semester}</span>
+            ) : null}
+          </div>
+        </div>
+        <div className="card-body">
+          <form onSubmit={onSubmit}>
+            <div className="mb-3">
+              <label className="form-label">To</label>
+              <input
+                type="email"
+                className="form-control"
+                value={to}
+                onChange={(ev) => setTo(ev.target.value)}
+                required
+              />
+              <div className="form-text">Primary parent email (you can change it here).</div>
+            </div>
+
+            {secondaryEmail ? (
+              <div className="alert alert-light border d-flex align-items-start mb-3">
+                <div className="me-2">
+                  <i className="bi bi-files" aria-hidden />
+                </div>
+                <div>
+                  <strong>Second Parent (CC):</strong> {secondaryEmail}
+                  {secondaryName ? ` — ${secondaryName}` : ''}
+                </div>
+              </div>
+            ) : null}
+
+            <div className="mb-3">
+              <label className="form-label">Subject</label>
+              <input
+                type="text"
+                className="form-control"
+                value={subject}
+                onChange={(ev) => setSubject(ev.target.value)}
+                required
+              />
+            </div>
+
+            <div className="mb-3">
+              <label className="form-label">Body (HTML allowed)</label>
+              <textarea
+                className="form-control font-monospace"
+                rows={14}
+                value={bodyHtml}
+                onChange={(ev) => setBodyHtml(ev.target.value)}
+              />
+              <div className="form-text">Paste HTML or plain text; backend may sanitize.</div>
+            </div>
+
+            <div className="d-flex gap-2">
+              <Link to={ATTENDANCE_VIOLATIONS_PENDING_PATH} className="btn btn-outline-secondary">
+                Cancel
+              </Link>
+              <button type="submit" className="btn btn-primary" disabled={saving}>
+                {saving ? 'Sending…' : 'Send Email'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/attendance/EarlyDismissalsAddPage.tsx

@@ -0,0 +1,198 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { createEarlyDismissal, fetchEarlyDismissalStudentOptions } from '../../api/session'
+import { EARLY_DISMISSALS_PATH } from './attendancePaths'
+
+type StudentOpt = {
+  id: number
+  firstname: string
+  lastname: string
+  section?: string | null
+}
+
+/** Port of `Views/attendance/early_dismissals_add.php` */
+export function EarlyDismissalsAddPage() {
+  const [students, setStudents] = useState<StudentOpt[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+
+  const [query, setQuery] = useState('')
+  const [studentId, setStudentId] = useState<number | null>(null)
+  const [label, setLabel] = useState('')
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10))
+  const [dismissTime, setDismissTime] = useState('')
+  const [reason, setReason] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const data = await fetchEarlyDismissalStudentOptions()
+        if (cancelled) return
+        const raw = data.students ?? []
+        setStudents(
+          raw
+            .map((s) => ({
+              id: Number(s.id ?? 0),
+              firstname: String(s.firstname ?? ''),
+              lastname: String(s.lastname ?? ''),
+              section: s.class_section_name ?? null,
+            }))
+            .filter((s) => s.id > 0),
+        )
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load students.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const enriched = useMemo(() => {
+    const norm = (s: string) => s.toLowerCase().trim()
+    return students.map((s) => {
+      const display = `${s.firstname} ${s.lastname}${s.section ? ` — ${s.section}` : ''}`
+      const key = `${norm(s.firstname)} ${norm(s.lastname)} ${norm(s.section ?? '')}`
+      return { ...s, display, key }
+    })
+  }, [students])
+
+  const matches = useMemo(() => {
+    const q = query.toLowerCase().trim()
+    if (!q) return []
+    return enriched.filter((s) => s.key.includes(q)).slice(0, 20)
+  }, [enriched, query])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setError(null)
+    setMsg(null)
+    if (!studentId) {
+      setError('Please select a student from the list.')
+      return
+    }
+    try {
+      await createEarlyDismissal({
+        student_id: studentId,
+        date,
+        dismiss_time: dismissTime,
+        reason: reason || null,
+      })
+      setMsg('Early dismissal saved.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed.')
+    }
+  }
+
+  return (
+    <div className="container-xxl py-4">
+      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
+        <h2 className="mb-0">Add Early Dismissal</h2>
+        <Link to={EARLY_DISMISSALS_PATH} className="btn btn-outline-secondary">
+          Back to List
+        </Link>
+      </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {msg ? <div className="alert alert-success">{msg}</div> : null}
+
+      <div className="card shadow-sm">
+        <div className="card-body">
+          <form onSubmit={onSubmit}>
+            <div className="row gy-3">
+              <div className="col-md-5 position-relative">
+                <label className="form-label">Student</label>
+                <input
+                  type="text"
+                  className={`form-control${error && !studentId ? ' is-invalid' : ''}`}
+                  autoComplete="off"
+                  placeholder="Type student name to search…"
+                  value={label}
+                  onChange={(ev) => {
+                    setLabel(ev.target.value)
+                    setStudentId(null)
+                    setQuery(ev.target.value)
+                  }}
+                />
+                {query.trim() && matches.length > 0 ? (
+                  <div
+                    className="list-group position-absolute w-100 shadow-sm"
+                    style={{ zIndex: 1000, maxHeight: 240, overflow: 'auto' }}
+                  >
+                    {matches.map((m) => (
+                      <button
+                        key={m.id}
+                        type="button"
+                        className="list-group-item list-group-item-action"
+                        onClick={() => {
+                          setStudentId(m.id)
+                          setLabel(m.display)
+                          setQuery('')
+                        }}
+                      >
+                        {m.display}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+                <div className="form-text">Start typing first or last name, then pick from the list.</div>
+              </div>
+
+              <div className="col-md-3">
+                <label className="form-label">Date (Sunday)</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  required
+                  value={date}
+                  onChange={(ev) => setDate(ev.target.value)}
+                />
+              </div>
+
+              <div className="col-md-2">
+                <label className="form-label">Dismissal Time</label>
+                <input
+                  type="time"
+                  className="form-control"
+                  required
+                  value={dismissTime}
+                  onChange={(ev) => setDismissTime(ev.target.value)}
+                />
+              </div>
+
+              <div className="col-12">
+                <label className="form-label">Reason (optional)</label>
+                <textarea
+                  name="reason"
+                  className="form-control"
+                  rows={2}
+                  placeholder="e.g., Family appointment"
+                  value={reason}
+                  onChange={(ev) => setReason(ev.target.value)}
+                />
+              </div>
+
+              <div className="col-12 d-flex gap-2">
+                <button type="submit" className="btn btn-primary" disabled={loading}>
+                  Save Early Dismissal
+                </button>
+                <Link to={EARLY_DISMISSALS_PATH} className="btn btn-outline-secondary">
+                  Cancel
+                </Link>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="mt-3 small text-muted">
+        Note: Early dismissals do not change daily present/absent status; they are shown for staff awareness and
+        pickup coordination.
+      </div>
+    </div>
+  )
+}

src/pages/attendance/EarlyDismissalsPage.tsx

@@ -0,0 +1,220 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { fetchEarlyDismissals, uploadEarlyDismissalSignature } from '../../api/session'
+import { apiUrl } from '../../lib/apiOrigin'
+import { EARLY_DISMISSALS_NEW_PATH, EARLY_DISMISSALS_PATH } from './attendancePaths'
+
+function badgeClass(status: string): string {
+  if (status === 'processed') return 'success'
+  if (status === 'seen') return 'info'
+  return 'secondary'
+}
+
+/** Port of `Views/attendance/early_dismissals.php` */
+export function EarlyDismissalsPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  const [data, setData] = useState<Awaited<ReturnType<typeof fetchEarlyDismissals>> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [flash, setFlash] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const res = await fetchEarlyDismissals({
+          schoolYear: schoolYear || null,
+          semester: semester || null,
+        })
+        if (!cancelled) setData(res)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load early dismissals.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  async function onSignatureSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    try {
+      await uploadEarlyDismissalSignature(fd)
+      setFlash('Signature uploaded.')
+      const res = await fetchEarlyDismissals({
+        schoolYear: schoolYear || null,
+        semester: semester || null,
+      })
+      setData(res)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed.')
+    }
+  }
+
+  const groups = data?.groups ?? {}
+  const sigMap = data?.signatureByDate ?? {}
+
+  return (
+    <div className="container-xxl py-4">
+      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
+        <div>
+          <h2 className="mb-0">Early Dismissals</h2>
+          <small className="text-muted">Parent-submitted early dismissal requests</small>
+        </div>
+        <Link to={EARLY_DISMISSALS_NEW_PATH} className="btn btn-primary">
+          <i className="bi bi-plus-circle me-1" aria-hidden />
+          Add Early Dismissal
+        </Link>
+      </div>
+
+      <form
+        className="row gy-2 gx-3 align-items-end mb-4"
+        onSubmit={(ev) => {
+          ev.preventDefault()
+          const fd = new FormData(ev.currentTarget)
+          const p = new URLSearchParams()
+          const sy = String(fd.get('school_year') ?? '')
+          const sem = String(fd.get('semester') ?? '')
+          if (sy) p.set('school_year', sy)
+          if (sem) p.set('semester', sem)
+          setSearchParams(p)
+        }}
+      >
+        <div className="col-md-4">
+          <label className="form-label">School Year</label>
+          <input
+            type="text"
+            name="school_year"
+            className="form-control"
+            defaultValue={schoolYear}
+            placeholder="e.g. 2025-2026"
+          />
+        </div>
+        <div className="col-md-3">
+          <label className="form-label">Semester</label>
+          <select name="semester" className="form-select" defaultValue={semester}>
+            <option value="">All Semesters</option>
+            <option value="Fall">Fall</option>
+            <option value="Spring">Spring</option>
+          </select>
+        </div>
+        <div className="col-md-3 d-flex gap-2">
+          <button type="submit" className="btn btn-secondary mt-4">
+            Apply
+          </button>
+          <Link className="btn btn-outline-secondary mt-4" to={EARLY_DISMISSALS_PATH}>
+            Reset
+          </Link>
+        </div>
+      </form>
+
+      {flash ? <div className="alert alert-success">{flash}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      {loading ? (
+        <p className="text-muted">Loading…</p>
+      ) : Object.keys(groups).length === 0 ? (
+        <div className="alert alert-info">
+          No early dismissals found for the selected school year{semester ? ' and semester' : ''}.
+        </div>
+      ) : (
+        Object.entries(groups).map(([date, rows]) => {
+          const dateLabel =
+            /^\d{4}-\d{2}-\d{2}$/.test(date) && date !== 'Unknown'
+              ? formatMdY(date)
+              : date
+          const sig = sigMap[date]
+          return (
+            <div className="card shadow-sm mb-3" key={date}>
+              <div className="card-body">
+                <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
+                  <strong>{dateLabel}</strong>
+                  {date !== 'Unknown' ? (
+                    <div className="d-flex flex-wrap align-items-center gap-2">
+                      {sig?.filename ? (
+                        <>
+                          <a
+                            className="btn btn-sm btn-outline-primary"
+                            href={apiUrl(`/api/v1/files/early-dismissal-signatures/${encodeURIComponent(sig.filename ?? '')}`)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            View Signature
+                          </a>
+                          {sig.original_name ? (
+                            <span className="small text-muted">{sig.original_name}</span>
+                          ) : null}
+                        </>
+                      ) : (
+                        <span className="small text-muted">No signature uploaded</span>
+                      )}
+                      <form className="d-flex flex-wrap align-items-center gap-2" onSubmit={onSignatureSubmit}>
+                        <input type="hidden" name="report_date" value={date} />
+                        <input type="hidden" name="school_year" value={schoolYear} />
+                        <input type="hidden" name="semester" value={semester} />
+                        <input type="hidden" name="return_url" value={typeof window !== 'undefined' ? window.location.href : ''} />
+                        <input
+                          type="file"
+                          name="signature_file"
+                          className="form-control form-control-sm"
+                          accept=".jpg,.jpeg,.png,.webp,.gif,.pdf"
+                          required
+                        />
+                        <button type="submit" className="btn btn-sm btn-primary">
+                          {sig?.filename ? 'Replace' : 'Upload'}
+                        </button>
+                      </form>
+                    </div>
+                  ) : null}
+                </div>
+                <div className="table-responsive">
+                  <table className="table table-striped align-middle mb-0">
+                    <thead>
+                      <tr>
+                        <th>Student</th>
+                        <th>Class/Section</th>
+                        <th>Dismissal Time</th>
+                        <th>Reason</th>
+                        <th>Status</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {(rows as Array<Record<string, unknown>>).map((r, i) => (
+                        <tr key={i}>
+                          <td>{`${r.firstname ?? ''} ${r.lastname ?? ''}`.trim()}</td>
+                          <td>{String(r.class_section_name ?? '—')}</td>
+                          <td>
+                            {r.dismiss_time ? String(String(r.dismiss_time).slice(0, 5)) : '—'}
+                          </td>
+                          <td style={{ maxWidth: 420, whiteSpace: 'normal' }}>{String(r.reason ?? '')}</td>
+                          <td>
+                            <span className={`badge bg-${badgeClass(String(r.status ?? '').toLowerCase())}`}>
+                              {String(r.status ?? 'new').replace(/^\w/, (c) => c.toUpperCase())}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )
+        })
+      )}
+    </div>
+  )
+}
+
+function formatMdY(ymd: string): string {
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}

src/pages/attendance/ParentAttendanceReportsAdminPage.tsx

@@ -0,0 +1,171 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { fetchParentAttendanceReportsAdmin } from '../../api/session'
+import type { ParentAttendanceAdminReportRow } from '../../api/types'
+
+/** Port of `Views/attendance/parent_reports.php` */
+export function ParentAttendanceReportsAdminPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+  const start = searchParams.get('start') ?? new Date().toISOString().slice(0, 10)
+  const end = searchParams.get('end') ?? ''
+
+  const [rows, setRows] = useState<ParentAttendanceAdminReportRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchParentAttendanceReportsAdmin({
+          schoolYear: schoolYear || null,
+          semester: semester || null,
+          start: start || null,
+          end: end || null,
+        })
+        if (!cancelled) setRows(data.rows ?? [])
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load reports.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester, start, end])
+
+  function apply(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    const st = String(fd.get('start') ?? '')
+    const en = String(fd.get('end') ?? '')
+    if (sy) p.set('school_year', sy)
+    if (sem) p.set('semester', sem)
+    if (st) p.set('start', st)
+    if (en) p.set('end', en)
+    setSearchParams(p)
+  }
+
+  return (
+    <div className="container-xxl py-4">
+      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
+        <h2 className="mb-0">Parent Attendance Reports</h2>
+        <small className="text-muted">Submitted by parents (absent/late/early dismissal)</small>
+      </div>
+
+      <form className="row gy-2 gx-3 align-items-end mb-4" onSubmit={apply}>
+        <div className="col-md-3">
+          <label className="form-label">School Year</label>
+          <input
+            type="text"
+            name="school_year"
+            className="form-control"
+            defaultValue={schoolYear}
+            placeholder="e.g. 2025-2026"
+          />
+        </div>
+        <div className="col-md-2">
+          <label className="form-label">Semester</label>
+          <select name="semester" className="form-select" defaultValue={semester}>
+            <option value="">—</option>
+            <option value="Fall">Fall</option>
+            <option value="Spring">Spring</option>
+          </select>
+        </div>
+        <div className="col-md-2">
+          <label className="form-label">Start Date</label>
+          <input type="date" name="start" className="form-control" defaultValue={start} />
+        </div>
+        <div className="col-md-2">
+          <label className="form-label">End Date</label>
+          <input type="date" name="end" className="form-control" defaultValue={end} />
+        </div>
+        <div className="col-md-3 d-flex gap-2">
+          <button type="submit" className="btn btn-secondary mt-4">
+            Apply
+          </button>
+          <Link className="btn btn-outline-secondary mt-4" to="/app/administrator/attendance/parent-reports">
+            Reset
+          </Link>
+        </div>
+      </form>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card shadow-sm">
+        <div className="card-body table-responsive">
+          {loading ? (
+            <p className="text-muted mb-0">Loading…</p>
+          ) : (
+            <table className="table table-striped align-middle">
+              <thead>
+                <tr>
+                  <th>Date</th>
+                  <th>Student</th>
+                  <th>Class/Section</th>
+                  <th>Type</th>
+                  <th>Time</th>
+                  <th>Reason</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="text-center text-muted">
+                      No reports found for the selected range.
+                    </td>
+                  </tr>
+                ) : (
+                  rows.map((r, i) => (
+                    <tr key={i}>
+                      <td>{formatCellDate(r.report_date)}</td>
+                      <td>{`${String(r['firstname'] ?? '')} ${String(r['lastname'] ?? '')}`.trim()}</td>
+                      <td>{String(r.class_section_name ?? '—')}</td>
+                      <td className="text-capitalize">{String(r.type ?? '').replace(/_/g, ' ')}</td>
+                      <td>{timeCell(r)}</td>
+                      <td style={{ maxWidth: 360, whiteSpace: 'normal' }}>{String(r.reason ?? '')}</td>
+                      <td>
+                        <span
+                          className={`badge bg-${
+                            r.status === 'processed' ? 'success' : r.status === 'seen' ? 'info' : 'secondary'
+                          }`}
+                        >
+                          {String(r.status ?? 'new').replace(/^\w/, (c) => c.toUpperCase())}
+                        </span>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatCellDate(v: unknown): string {
+  if (v == null || v === '') return ''
+  const s = String(v).slice(0, 10)
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return String(v)
+  const [y, m, d] = s.split('-')
+  return `${m}-${d}-${y}`
+}
+
+function timeCell(r: ParentAttendanceAdminReportRow): string {
+  const t = String(r.type ?? '')
+  const arrival = r['arrival_time']
+  const dismiss = r['dismiss_time']
+  if (t === 'late' && arrival) return `Arrival: ${String(arrival).slice(0, 5)}`
+  if (t === 'early_dismissal' && dismiss) return `Dismiss: ${String(dismiss).slice(0, 5)}`
+  return '—'
+}

src/pages/attendance/TeacherAttendanceFormPage.tsx

@@ -0,0 +1,289 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { fetchTeacherStaffAttendance, saveTeacherStaffAttendance } from '../../api/session'
+import { TEACHER_ATTENDANCE_MONTH_PATH } from './attendancePaths'
+import type { TeacherStaffAttendanceRow } from '../../api/types'
+
+function formatUsDate(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return ymd
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}
+
+/** Port of `Views/attendance/teacher_attendance_form.php` */
+export function TeacherAttendanceFormPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+  const date =
+    searchParams.get('date') ?? new Date().toISOString().slice(0, 10)
+  const classSectionId = Number(searchParams.get('class_section_id') ?? '0')
+
+  const [sections, setSections] = useState<Record<string, string>>({})
+  const [grid, setGrid] = useState<TeacherStaffAttendanceRow[]>([])
+  const [locked, setLocked] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const data = await fetchTeacherStaffAttendance({
+          date,
+          semester: semester || null,
+          schoolYear: schoolYear || null,
+          classSectionId: classSectionId || null,
+        })
+        if (cancelled) return
+        setSections(data.sections ?? {})
+        setGrid(data.grid ?? [])
+        setLocked(Boolean(data.locked))
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load teacher attendance.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [date, semester, schoolYear, classSectionId])
+
+  const dateLabel = useMemo(() => formatUsDate(date), [date])
+
+  function setRow(tid: number, patch: Partial<TeacherStaffAttendanceRow>) {
+    setGrid((prev) =>
+      prev.map((r) => ((r.teacher_id ?? 0) === tid ? { ...r, ...patch } : r)),
+    )
+  }
+
+  function markAllPresent() {
+    setGrid((prev) => prev.map((r) => ({ ...r, status: 'present' })))
+  }
+
+  function clearAll() {
+    setGrid((prev) => prev.map((r) => ({ ...r, status: '', reason: '' })))
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (!classSectionId) return
+    setSaving(true)
+    setMessage(null)
+    setError(null)
+    try {
+      const teachers: Record<string, { status?: string | null; reason?: string | null }> = {}
+      for (const r of grid) {
+        const tid = r.teacher_id ?? 0
+        if (!tid) continue
+        teachers[String(tid)] = {
+          status: r.status ?? '',
+          reason: r.reason ?? '',
+        }
+      }
+      await saveTeacherStaffAttendance({
+        date,
+        semester,
+        school_year: schoolYear,
+        class_section_id: classSectionId,
+        teachers,
+      })
+      setMessage('Saved.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function applyFilters(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    const dt = String(fd.get('date') ?? '')
+    const cs = String(fd.get('class_section_id') ?? '0')
+    if (sy) p.set('school_year', sy)
+    if (sem) p.set('semester', sem)
+    if (dt) p.set('date', dt)
+    if (cs && cs !== '0') p.set('class_section_id', cs)
+    setSearchParams(p)
+  }
+
+  const sectionEntries = Object.entries(sections)
+
+  return (
+    <div className="container-xxl py-4">
+      <div className="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <h2 className="mb-0">Teacher Attendance</h2>
+        <Link
+          className="btn btn-outline-secondary"
+          to={`${TEACHER_ATTENDANCE_MONTH_PATH}?${new URLSearchParams({ date, semester, school_year: schoolYear }).toString()}`}
+        >
+          ← Back to Monthly Attendance
+        </Link>
+      </div>
+
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <form className="row gy-2 gx-3 align-items-end mb-3" onSubmit={applyFilters}>
+        <div className="col-sm-3">
+          <label className="form-label">School Year</label>
+          <input
+            type="text"
+            name="school_year"
+            className="form-control"
+            defaultValue={schoolYear}
+            placeholder="e.g. 2025-2026"
+          />
+        </div>
+        <div className="col-sm-2">
+          <label className="form-label">Semester</label>
+          <input
+            type="text"
+            name="semester"
+            className="form-control"
+            defaultValue={semester}
+            placeholder="Fall"
+          />
+        </div>
+        <div className="col-sm-3">
+          <label className="form-label">Date</label>
+          <input type="date" name="date" className="form-control" defaultValue={date} />
+        </div>
+        <div className="col-sm-4">
+          <label className="form-label">Class Section</label>
+          <select
+            name="class_section_id"
+            className="form-select"
+            defaultValue={classSectionId || 0}
+          >
+            <option value="0">— Choose Section —</option>
+            {sectionEntries.map(([id, label]) => (
+              <option key={id} value={id}>
+                {label} (ID: {id})
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-12 d-flex gap-2">
+          <button type="submit" className="btn btn-secondary">
+            Load
+          </button>
+          {classSectionId ? (
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              onClick={() => setSearchParams(new URLSearchParams())}
+            >
+              Reset
+            </button>
+          ) : null}
+        </div>
+      </form>
+
+      {!classSectionId ? null : (
+        <>
+          {locked ? (
+            <div className="alert alert-warning">
+              <strong>Note:</strong> Student/section attendance for this day appears to be <em>finalized</em>. Admin edits
+              to teacher attendance here are allowed and will not unlock the section.
+            </div>
+          ) : null}
+
+          <form onSubmit={onSubmit}>
+            <div className="card shadow-sm">
+              <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+                <strong>Teachers on {dateLabel}</strong>
+                <div className="d-flex gap-2">
+                  <button type="button" className="btn btn-sm btn-outline-success" onClick={markAllPresent}>
+                    Mark All Present
+                  </button>
+                  <button type="button" className="btn btn-sm btn-outline-secondary" onClick={clearAll}>
+                    Clear All
+                  </button>
+                </div>
+              </div>
+              <div className="card-body table-responsive">
+                {loading ? (
+                  <p className="text-muted mb-0">Loading…</p>
+                ) : grid.length === 0 ? (
+                  <p className="text-muted mb-0 text-center">No teachers found for this section/term.</p>
+                ) : (
+                  <table className="table table-bordered table-striped align-middle" id="teacherAttTable">
+                    <thead className="table-light">
+                      <tr>
+                        <th className="text-center" style={{ width: 70 }}>
+                          #
+                        </th>
+                        <th>Name</th>
+                        <th className="text-center" style={{ width: 160 }}>
+                          Role
+                        </th>
+                        <th className="text-center" style={{ width: 200 }}>
+                          Status
+                        </th>
+                        <th>Reason</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {grid.map((row, idx) => {
+                        const tid = row.teacher_id ?? 0
+                        const name =
+                          `${row.firstname ?? ''} ${row.lastname ?? ''}`.trim() || `User#${tid}`
+                        const pos = String(row.position ?? '').toLowerCase()
+                        const stat = String(row.status ?? '').toLowerCase()
+                        return (
+                          <tr key={tid || idx}>
+                            <td className="text-center">{idx + 1}</td>
+                            <td>{name}</td>
+                            <td className="text-center">{pos === 'main' ? 'Main Teacher' : 'Assistant'}</td>
+                            <td className="text-center">
+                              <select
+                                className="form-select form-select-sm"
+                                value={
+                                  stat === 'present' || stat === 'absent' || stat === 'late' ? stat : ''
+                                }
+                                onChange={(ev) => setRow(tid, { status: ev.target.value || null })}
+                              >
+                                <option value="">—</option>
+                                <option value="present">Present</option>
+                                <option value="absent">Absent</option>
+                                <option value="late">Late</option>
+                              </select>
+                            </td>
+                            <td>
+                              <input
+                                type="text"
+                                className="form-control form-control-sm"
+                                placeholder="Optional reason"
+                                value={row.reason ?? ''}
+                                onChange={(ev) => setRow(tid, { reason: ev.target.value })}
+                              />
+                            </td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+              <div className="card-footer d-flex justify-content-end">
+                <button type="submit" className="btn btn-primary" disabled={saving || grid.length === 0}>
+                  {saving ? 'Saving…' : 'Save Changes'}
+                </button>
+              </div>
+            </div>
+          </form>
+        </>
+      )}
+    </div>
+  )
+}

src/pages/attendance/TeacherAttendanceMonthPage.css

@@ -0,0 +1,77 @@
+/* From CI `teacher_attendance_month.php` embedded styles — monthly staff grids */
+.att-month-wrap .month-grid-wrap {
+  overflow-x: auto;
+}
+
+.att-month-wrap .month-grid thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #f8f9fa;
+}
+
+.att-month-wrap .sticky-col {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  background: #fff;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.att-month-wrap .sticky-col-2 {
+  position: sticky;
+  left: 180px;
+  z-index: 3;
+  background: #fff;
+}
+
+.att-month-wrap .sticky-col-3 {
+  position: sticky;
+  left: 460px;
+  z-index: 3;
+  background: #fff;
+}
+
+.att-month-wrap .no-school-day {
+  background-color: #cff4fc !important;
+}
+
+.att-month-wrap .att-select.form-select.form-select-sm {
+  min-width: 54px;
+  padding-left: 6px;
+  padding-right: 18px;
+  line-height: 1.1;
+  border: 1px solid #adb5bd;
+}
+
+.att-month-wrap .att-select.att-present {
+  background: #157347;
+  color: #fff;
+  border-color: #0f5132;
+}
+
+.att-month-wrap .att-select.att-absent {
+  background: #bb2d3b;
+  color: #fff;
+  border-color: #842029;
+}
+
+.att-month-wrap .att-select.att-late {
+  background: #ffca2c;
+  color: #111;
+  border-color: #997404;
+}
+
+.att-month-wrap .att-select.att-none {
+  background: #fff;
+  color: #212529;
+  border-color: #adb5bd;
+}
+
+.att-month-wrap .badge-cell.bg-info {
+  min-width: 32px;
+  padding: 4px 0;
+}

src/pages/attendance/TeacherAttendanceMonthPage.tsx

@@ -0,0 +1,551 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { apiUrl } from '../../lib/apiOrigin'
+import {
+  fetchStaffMonthlyAttendanceOverview,
+  saveStaffMonthlyAttendanceCell,
+} from '../../api/session'
+import type {
+  StaffMonthlyAdminRow,
+  StaffMonthlyOverviewPayload,
+  StaffMonthlySection,
+  StaffMonthlyTeacherRow,
+} from '../../api/types'
+import './TeacherAttendanceMonthPage.css'
+import { TEACHER_ATTENDANCE_MONTH_PATH } from './attendancePaths'
+
+function inferSemesterByDate(dateStr: string, schoolYear: string): string {
+  try {
+    if (!schoolYear.includes('-')) return ''
+    const parts = schoolYear.split('-')
+    const y1 = parseInt(parts[0]!, 10)
+    const y2 = parseInt(parts[1]!, 10)
+    if (!y1 || !y2) return ''
+    const fallStart = new Date(`${y1}-09-21T00:00:00Z`)
+    const fallEnd = new Date(`${y2}-01-18T00:00:00Z`)
+    const spStart = new Date(`${y2}-01-25T00:00:00Z`)
+    const spEnd = new Date(`${y2}-05-30T00:00:00Z`)
+    const d = new Date(`${dateStr}T00:00:00Z`)
+    if (d >= fallStart && d <= fallEnd) return 'Fall'
+    if (d >= spStart && d <= spEnd) return 'Spring'
+    const m = d.getUTCMonth() + 1
+    return m >= 9 || m <= 1 ? 'Fall' : 'Spring'
+  } catch {
+    return ''
+  }
+}
+
+function selectClass(
+  value: string,
+): 'att-select form-select form-select-sm att-none' | 'att-select form-select form-select-sm att-present' | 'att-select form-select form-select-sm att-absent' | 'att-select form-select form-select-sm att-late' {
+  const v = value.toLowerCase()
+  if (v === 'present') return 'att-select form-select form-select-sm att-present'
+  if (v === 'absent') return 'att-select form-select form-select-sm att-absent'
+  if (v === 'late') return 'att-select form-select form-select-sm att-late'
+  return 'att-select form-select form-select-sm att-none'
+}
+
+/** Port of `Views/attendance/teacher_attendance_month.php` — interactive monthly grids (JWT; no CI CSRF). */
+export function TeacherAttendanceMonthPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const semesterParam = searchParams.get('semester') ?? '---'
+  const schoolYearParam = searchParams.get('school_year') ?? ''
+
+  const [payload, setPayload] = useState<StaffMonthlyOverviewPayload | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [toast, setToast] = useState<{ ok: boolean; text: string } | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const data = await fetchStaffMonthlyAttendanceOverview({
+          semester: semesterParam === '---' ? null : semesterParam,
+          schoolYear: schoolYearParam || null,
+        })
+        if (!cancelled) setPayload(data)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load monthly attendance.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [semesterParam, schoolYearParam])
+
+  const filters = payload?.filters ?? {}
+  const sundays = payload?.sundays ?? []
+  const noSchoolSet = useMemo(
+    () => new Set(payload?.noSchoolDays ?? []),
+    [payload?.noSchoolDays],
+  )
+  const isCurrentYear = payload?.isCurrentYear !== false
+  const schoolYears = useMemo(() => {
+    const raw = payload?.schoolYears ?? []
+    const ys: string[] = []
+    for (const y of raw) {
+      if (typeof y === 'string') ys.push(y)
+      else if (y && typeof y === 'object' && 'school_year' in y && y.school_year)
+        ys.push(String(y.school_year))
+    }
+    if (ys.length === 0 && schoolYearParam) ys.push(schoolYearParam)
+    return ys
+  }, [payload?.schoolYears, schoolYearParam])
+
+  async function onCellChange(
+    kind: 'teacher' | 'admin',
+    patch: {
+      userId: string
+      date: string
+      status: string
+      roleName: string
+      sectionCode?: string | null
+    },
+  ) {
+    if (!isCurrentYear) {
+      setToast({ ok: false, text: 'Editing disabled for non-current year' })
+      return
+    }
+    let semesterForSave = filters.semester ?? semesterParam
+    if (semesterForSave === '---') {
+      semesterForSave = inferSemesterByDate(patch.date, filters.school_year ?? schoolYearParam)
+    }
+    const body: Record<string, string> = {
+      date: patch.date,
+      status: patch.status,
+      user_id: patch.userId,
+      semester: semesterForSave,
+      school_year: filters.school_year ?? schoolYearParam,
+      role_name: patch.roleName,
+      type: kind,
+    }
+    if (patch.sectionCode) body.section_id = patch.sectionCode
+
+    try {
+      await saveStaffMonthlyAttendanceCell(body)
+      setToast({ ok: true, text: 'Saved' })
+      const data = await fetchStaffMonthlyAttendanceOverview({
+        semester: semesterParam === '---' ? null : semesterParam,
+        schoolYear: schoolYearParam || null,
+      })
+      setPayload(data)
+    } catch {
+      setToast({ ok: false, text: 'Save failed' })
+    }
+  }
+
+  function applyFilter(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '---')
+    if (sy) p.set('school_year', sy)
+    p.set('semester', sem)
+    setSearchParams(p)
+  }
+
+  const queryString =
+    filters.semester && filters.school_year
+      ? `?${new URLSearchParams({
+          semester: filters.semester === '---' ? '' : filters.semester,
+          school_year: filters.school_year,
+        }).toString()}`
+      : ''
+
+  return (
+    <div className="container-fluid py-4 att-month-wrap">
+      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
+        <h2 className="mb-0">Admin &amp; Teacher — Monthly Attendance</h2>
+        <div className="legend small">
+          <span className="badge bg-success">P</span>
+          <span className="ms-1">Present</span>
+          <span className="badge bg-danger ms-3">A</span>
+          <span className="ms-1">Absent</span>
+          <span className="badge bg-warning text-dark ms-3">L</span>
+          <span className="ms-1">Late</span>
+          <span className="badge bg-info text-dark ms-3">NS</span>
+          <span className="ms-1">No School</span>
+          <span className="ms-3 text-muted">—</span>
+          <span className="ms-1">No entry</span>
+        </div>
+      </div>
+
+      {toast ? (
+        <div className={`alert alert-${toast.ok ? 'success' : 'danger'} py-2`}>{toast.text}</div>
+      ) : null}
+
+      {payload?.missingYear ? (
+        <div className="alert alert-warning" role="alert">
+          Current school year is not configured. This page is read-only until configured (key:{' '}
+          <code>school_year</code>).
+        </div>
+      ) : null}
+
+      <form className="row gy-2 gx-3 align-items-end justify-content-center mb-4" onSubmit={applyFilter}>
+        <div className="col-md-3">
+          <label className="form-label">School Year</label>
+          <select name="school_year" className="form-select" defaultValue={schoolYearParam}>
+            {schoolYears.map((y) => (
+              <option key={y} value={y}>
+                {y}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-md-2">
+          <label className="form-label">Semester</label>
+          <select name="semester" className="form-select" defaultValue={semesterParam}>
+            {['---', 'Fall', 'Spring'].map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-md-4 d-flex gap-2">
+          <button type="submit" className="btn btn-secondary">
+            Load
+          </button>
+          <Link className="btn btn-outline-secondary" to={TEACHER_ATTENDANCE_MONTH_PATH}>
+            Reset
+          </Link>
+          <a
+            className="btn btn-outline-primary"
+            href={apiUrl(`/api/v1/attendance/staff/month-overview.csv${queryString}`)}
+          >
+            Export CSV
+          </a>
+        </div>
+      </form>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {loading ? (
+        <p className="text-muted">Loading…</p>
+      ) : (
+        <>
+          <div className="card shadow-sm mb-4">
+            <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+              <div>
+                <strong>
+                  Teachers &amp; Assistants — Sundays in{' '}
+                  <span>{filters.range_label ?? filters.month_label ?? schoolYearParam}</span>
+                </strong>
+                {!isCurrentYear ? <span className="badge bg-secondary ms-2">Read-only (Past Year)</span> : null}
+              </div>
+              <small className="text-muted">Use the dropdowns to set attendance inline</small>
+            </div>
+            <div className="card-body month-grid-wrap">
+              <TeachersGrid
+                sections={payload?.sections ?? []}
+                sundays={sundays}
+                noSchoolSet={noSchoolSet}
+                isCurrentYear={isCurrentYear}
+                onCellChange={(p) => void onCellChange('teacher', p)}
+              />
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-4">
+            <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+              <div>
+                <strong>
+                  Admins — Sundays in{' '}
+                  <span>{filters.range_label ?? filters.month_label ?? schoolYearParam}</span>
+                </strong>
+                <span className="text-muted ms-2">(All roles except Parent/Guest/Teacher/Teacher Assistant)</span>
+              </div>
+            </div>
+            <div className="card-body month-grid-wrap">
+              <AdminsGrid
+                admins={payload?.admins ?? []}
+                sundays={sundays}
+                noSchoolSet={noSchoolSet}
+                isCurrentYear={isCurrentYear}
+                onCellChange={(p) => void onCellChange('admin', p)}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+function TeachersGrid({
+  sections,
+  sundays,
+  noSchoolSet,
+  isCurrentYear,
+  onCellChange,
+}: {
+  sections: StaffMonthlySection[]
+  sundays: string[]
+  noSchoolSet: Set<string>
+  isCurrentYear: boolean
+  onCellChange: (p: {
+    userId: string
+    date: string
+    status: string
+    roleName: string
+    sectionCode?: string | null
+  }) => void
+}) {
+  if (!sections.length) {
+    return <div className="alert alert-info mb-0">No sections with assigned teachers found for this term.</div>
+  }
+
+  return (
+    <table className="table table-bordered table-striped month-grid align-middle">
+      <thead>
+        <tr>
+          <th className="sticky-col" style={{ minWidth: 180 }}>
+            Class / Section
+          </th>
+          <th className="sticky-col-2" style={{ minWidth: 280 }}>
+            Teacher
+          </th>
+          <th className="sticky-col-3 text-center" style={{ minWidth: 120 }}>
+            Role
+          </th>
+          {sundays.map((day) => (
+            <th
+              key={day}
+              className={`text-center${noSchoolSet.has(day) ? ' no-school-day' : ''}`}
+              style={{ minWidth: 56 }}
+              title={day}
+            >
+              {day.slice(5, 7)}-{day.slice(8, 10)}
+            </th>
+          ))}
+          <th className="text-center" style={{ minWidth: 70 }}>
+            P
+          </th>
+          <th className="text-center" style={{ minWidth: 70 }}>
+            A
+          </th>
+          <th className="text-center" style={{ minWidth: 70 }}>
+            L
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {sections.flatMap((section) => {
+          const teachers = section.teachers ?? []
+          const rowSpan = teachers.length || 1
+          if (!teachers.length) return []
+          return teachers.map((teacher, t) => (
+            <TeacherRow
+              key={`${section.section_code}-${teacher.user_id ?? teacher.teacher_id}-${t}`}
+              section={section}
+              teacher={teacher}
+              tIndex={t}
+              rowSpan={rowSpan}
+              sundays={sundays}
+              noSchoolSet={noSchoolSet}
+              isCurrentYear={isCurrentYear}
+              onCellChange={onCellChange}
+            />
+          ))
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+function TeacherRow({
+  section,
+  teacher,
+  tIndex,
+  rowSpan,
+  sundays,
+  noSchoolSet,
+  isCurrentYear,
+  onCellChange,
+}: {
+  section: StaffMonthlySection
+  teacher: StaffMonthlyTeacherRow
+  tIndex: number
+  rowSpan: number
+  sundays: string[]
+  noSchoolSet: Set<string>
+  isCurrentYear: boolean
+  onCellChange: (p: {
+    userId: string
+    date: string
+    status: string
+    roleName: string
+    sectionCode?: string | null
+  }) => void
+}) {
+  const uid = String(teacher.user_id ?? teacher.teacher_id ?? '')
+  const roleText =
+    String(teacher.position ?? '').toLowerCase() === 'main' ? 'Main' : 'Assistant'
+  const totals = teacher.totals ?? {}
+
+  return (
+    <tr>
+      {tIndex === 0 ? (
+        <td className="sticky-col" rowSpan={rowSpan} style={{ minWidth: 180 }}>
+          {section.label ?? section.section_code ?? '—'}
+        </td>
+      ) : null}
+      <td className="sticky-col-2">{teacher.name ?? '—'}</td>
+      <td className="sticky-col-3 text-center">{roleText}</td>
+      {sundays.map((day) => {
+        if (noSchoolSet.has(day)) {
+          return (
+            <td key={day} className="text-center no-school-day">
+              <span className="badge-cell bg-info text-dark">NS</span>
+            </td>
+          )
+        }
+        const st = String(teacher.cells?.[day]?.status ?? '').toLowerCase()
+        const val = st === 'present' || st === 'absent' || st === 'late' ? st : ''
+        return (
+          <td key={day} className="text-center">
+            <select
+              disabled={!isCurrentYear}
+              className={selectClass(val)}
+              value={val}
+              onChange={(ev) =>
+                onCellChange({
+                  userId: uid,
+                  date: day,
+                  status: ev.target.value,
+                  roleName: roleText,
+                  sectionCode: section.section_code ?? null,
+                })
+              }
+            >
+              <option value="">—</option>
+              <option value="present">P</option>
+              <option value="absent">A</option>
+              <option value="late">L</option>
+            </select>
+          </td>
+        )
+      })}
+      <td className="text-center">
+        <strong>{totals.p ?? 0}</strong>
+      </td>
+      <td className="text-center">
+        <strong>{totals.a ?? 0}</strong>
+      </td>
+      <td className="text-center">
+        <strong>{totals.l ?? 0}</strong>
+      </td>
+    </tr>
+  )
+}
+
+function AdminsGrid({
+  admins,
+  sundays,
+  noSchoolSet,
+  isCurrentYear,
+  onCellChange,
+}: {
+  admins: StaffMonthlyAdminRow[]
+  sundays: string[]
+  noSchoolSet: Set<string>
+  isCurrentYear: boolean
+  onCellChange: (p: {
+    userId: string
+    date: string
+    status: string
+    roleName: string
+    sectionCode?: string | null
+  }) => void
+}) {
+  if (!admins.length) {
+    return <div className="alert alert-info mb-0">No admin users found for this term.</div>
+  }
+
+  return (
+    <table className="table table-bordered table-striped month-grid align-middle">
+      <thead>
+        <tr>
+          <th className="sticky-col" style={{ minWidth: 180 }}>
+            Admin
+          </th>
+          <th className="sticky-col-2 text-center" style={{ minWidth: 240 }}>
+            Role
+          </th>
+          {sundays.map((day) => (
+            <th
+              key={day}
+              className={`text-center${noSchoolSet.has(day) ? ' no-school-day' : ''}`}
+              style={{ minWidth: 56 }}
+              title={day}
+            >
+              {day.slice(5, 7)}-{day.slice(8, 10)}
+            </th>
+          ))}
+          <th className="text-center">P</th>
+          <th className="text-center">A</th>
+          <th className="text-center">L</th>
+        </tr>
+      </thead>
+      <tbody>
+        {admins.map((admin) => {
+          const uid = String(admin.user_id ?? '')
+          const totals = admin.totals ?? {}
+          return (
+            <tr key={uid}>
+              <td className="sticky-col">{admin.name ?? '—'}</td>
+              <td className="sticky-col-2 text-center">{admin.role ?? '—'}</td>
+              {sundays.map((day) => {
+                if (noSchoolSet.has(day)) {
+                  return (
+                    <td key={day} className="text-center no-school-day">
+                      <span className="badge-cell bg-info text-dark">NS</span>
+                    </td>
+                  )
+                }
+                const st = String(admin.cells?.[day]?.status ?? '').toLowerCase()
+                const val = st === 'present' || st === 'absent' || st === 'late' ? st : ''
+                return (
+                  <td key={day} className="text-center">
+                    <select
+                      disabled={!isCurrentYear}
+                      className={selectClass(val)}
+                      value={val}
+                      onChange={(ev) =>
+                        onCellChange({
+                          userId: uid,
+                          date: day,
+                          status: ev.target.value,
+                          roleName: admin.role ?? 'Admin',
+                        })
+                      }
+                    >
+                      <option value="">—</option>
+                      <option value="present">P</option>
+                      <option value="absent">A</option>
+                      <option value="late">L</option>
+                    </select>
+                  </td>
+                )
+              })}
+              <td className="text-center">
+                <strong>{totals.p ?? 0}</strong>
+              </td>
+              <td className="text-center">
+                <strong>{totals.a ?? 0}</strong>
+              </td>
+              <td className="text-center">
+                <strong>{totals.l ?? 0}</strong>
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}

src/pages/attendance/ViolationsPages.tsx

@@ -0,0 +1,546 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import {
+  fetchAttendanceViolationsNotified,
+  fetchAttendanceViolationsPending,
+  saveAttendanceViolationNote,
+} from '../../api/session'
+import type { AttendanceViolationStudentRow } from '../../api/types'
+import {
+  ATTENDANCE_VIOLATIONS_NOTIFIED_PATH,
+  ATTENDANCE_VIOLATIONS_PENDING_PATH,
+} from './attendancePaths'
+
+function studentIdOf(st: AttendanceViolationStudentRow): number {
+  return Number(st.student_id ?? st.id ?? 0)
+}
+
+function studentNameOf(st: AttendanceViolationStudentRow): string {
+  const n =
+    (st.name as string | undefined) ||
+    (st.student_name as string | undefined) ||
+    `${String(st.firstname ?? st.first_name ?? '')} ${String(st.lastname ?? st.last_name ?? '')}`.trim()
+  const sid = studentIdOf(st)
+  return n || (sid ? `Student #${sid}` : '—')
+}
+
+/** Port of `Views/attendance/violations_pending.php` */
+export function ViolationsPendingPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  const filterQuery = useMemo(() => {
+    const s = searchParams.toString()
+    return s ? `?${s}` : ''
+  }, [searchParams])
+
+  const [rows, setRows] = useState<AttendanceViolationStudentRow[]>([])
+  const [debug, setDebug] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [q, setQ] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchAttendanceViolationsPending({
+          schoolYear: schoolYear || null,
+          semester: semester || null,
+        })
+        if (!cancelled) {
+          setRows(data.students ?? [])
+          setDebug((data.debug as Record<string, unknown>) ?? null)
+        }
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load violations.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  const filtered = useMemo(() => {
+    const s = q.trim().toLowerCase()
+    if (!s) return rows
+    return rows.filter((r) => studentNameOf(r).toLowerCase().includes(s))
+  }, [rows, q])
+
+  function applyFilter(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    if (sy) p.set('school_year', sy)
+    if (sem) p.set('semester', sem)
+    setSearchParams(p)
+  }
+
+  return (
+    <div className="container-fluid px-0">
+      <h2 className="text-center mt-4 mb-3">Pending Attendance Violations</h2>
+      <div className="d-flex justify-content-center mb-2">
+        <form className="row g-2 align-items-end" onSubmit={applyFilter}>
+          <div className="col-auto">
+            <label className="form-label small mb-0">School Year</label>
+            <input name="school_year" className="form-control form-control-sm" defaultValue={schoolYear} />
+          </div>
+          <div className="col-auto">
+            <label className="form-label small mb-0">Semester</label>
+            <input name="semester" className="form-control form-control-sm" defaultValue={semester} />
+          </div>
+          <div className="col-auto">
+            <button type="submit" className="btn btn-sm btn-secondary">
+              Apply
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {error ? <div className="alert alert-danger mx-3">{error}</div> : null}
+
+      <div className="row g-0">
+        <div className="col-12">
+          <div className="card border-0 rounded-3 shadow-sm mx-2">
+            <div className="card-header d-flex flex-wrap gap-2 justify-content-between align-items-center">
+              <h5 className="mt-2 mb-0">Pending Attendance Violations</h5>
+              <div className="d-flex flex-wrap gap-2 align-items-center">
+                <span className="badge bg-primary">School Year: {schoolYear || '—'}</span>
+                {semester ? <span className="badge bg-secondary">Semester: {semester}</span> : null}
+                <Link
+                  to={`${ATTENDANCE_VIOLATIONS_NOTIFIED_PATH}${filterQuery}`}
+                  className="btn btn-outline-dark btn-sm"
+                >
+                  View Notified
+                </Link>
+              </div>
+            </div>
+            <div className="card-body">
+              <div className="row mb-3">
+                <div className="col-md-4">
+                  <input
+                    type="search"
+                    className="form-control form-control-sm"
+                    placeholder="Quick filter…"
+                    value={q}
+                    onChange={(ev) => setQ(ev.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div className="d-flex flex-wrap gap-3 mb-3 small">
+                <Legend dot="#e6f7ff" label="1 Absence — Auto Email" dark />
+                <Legend dot="#fadb14" label="2 Absences — Team Notify" dark />
+                <Legend dot="#fa8c16" label="3 Absences — Team Notify" />
+                <Legend dot="#ff4d4f" label="4 Absences / Expel / 4 Lates" />
+                <Legend dot="#bae7ff" label="2 Lates — Auto Email" dark />
+                <Legend dot="#002766" label="3 Lates / mixed — Team Notify" />
+              </div>
+
+              {loading ? (
+                <p className="text-muted">Loading…</p>
+              ) : filtered.length === 0 ? (
+                <>
+                  <div className="alert alert-info mb-2">No attendance violations found.</div>
+                  {debug ? (
+                    <div className="alert alert-secondary small">
+                      <strong>Debug</strong>
+                      <pre className="mb-0 small">{JSON.stringify(debug, null, 2)}</pre>
+                    </div>
+                  ) : null}
+                </>
+              ) : (
+                <div className="table-responsive">
+                  <table className="table table-striped table-hover align-middle w-100 small">
+                    <thead className="table-dark">
+                      <tr>
+                        <th>Student</th>
+                        <th>Grade</th>
+                        <th>Violation</th>
+                        <th>Type</th>
+                        <th className="text-center">Abs</th>
+                        <th className="text-center">Late</th>
+                        <th>Last Incident</th>
+                        <th>Action</th>
+                        <th>Notified?</th>
+                        <th>#</th>
+                        <th>Parent</th>
+                        <th>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filtered.map((st, idx) => (
+                        <PendingRow key={studentIdOf(st) || idx} st={st} />
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Legend({ dot, label, dark }: { dot: string; label: string; dark?: boolean }) {
+  return (
+    <span>
+      <span
+        className="badge rounded-pill"
+        style={{ backgroundColor: dot, color: dark ? '#000' : '#fff' }}
+      >
+        &nbsp;&nbsp;
+      </span>{' '}
+      {label}
+    </span>
+  )
+}
+
+function PendingRow({ st }: { st: AttendanceViolationStudentRow }) {
+  const sid = studentIdOf(st)
+  const name = studentNameOf(st)
+  const grade = String(st.class_name ?? st.class_section_name ?? '')
+  const viTitle = String(st.violation ?? '')
+  const viCode = String(st.violation_code ?? '')
+  const viType = String(st.type ?? '')
+  const viColor = String(st.color ?? '#6c757d')
+  const action = String(st.action ?? '')
+  const absences = (st.absences as unknown[]) ?? []
+  const lates = (st.lates as unknown[]) ?? []
+  const lastDate = st.last_date as string | undefined
+  const incidentYmd = lastDate ? String(lastDate).slice(0, 10) : ''
+  const notified = Boolean(st.is_notified)
+  const notifCnt = Number(st.notif_counter ?? 0)
+  const parentEmail = String(st.parent_email ?? '')
+  const parentName = String(st.parent_name ?? '')
+  const parentLabel = parentName || parentEmail || 'View'
+
+  const isLight = ['#bae7ff', '#e6f7ff', '#fadb14'].includes(viColor.toLowerCase())
+  const badgeCls = `badge rounded-pill ${isLight ? 'text-dark' : 'text-light'}`
+
+  const composeBase = `/app/administrator/attendance/compose-email?student_id=${sid}&code=${encodeURIComponent(viCode)}`
+  const incidentParam = incidentYmd ? `&incident_date=${encodeURIComponent(incidentYmd)}` : ''
+
+  return (
+    <tr style={{ borderLeft: `6px solid ${viColor}` }}>
+      <td>
+        <Link to={`/app/administrator/family?student_id=${sid}`} className="text-decoration-none">
+          {name}
+        </Link>
+      </td>
+      <td>{grade}</td>
+      <td>
+        <span className={badgeCls} style={{ backgroundColor: viColor }}>
+          {viTitle}
+        </span>
+      </td>
+      <td className="text-capitalize">{viType || '—'}</td>
+      <td className="text-center">{absences.length}</td>
+      <td className="text-center">{lates.length}</td>
+      <td>{incidentYmd ? formatMdY(incidentYmd) : '—'}</td>
+      <td>
+        {action === 'auto_email' ? (
+          <span className="badge bg-primary">Auto Email</span>
+        ) : action === 'expel_notify' ? (
+          <span className="badge bg-danger">Expel Notify</span>
+        ) : (
+          <span className="badge bg-warning text-dark">Team Notify</span>
+        )}
+      </td>
+      <td>
+        <span className={`badge ${notified ? 'bg-success' : 'bg-warning text-dark'}`}>
+          {notified ? 'Yes' : 'No'}
+        </span>
+      </td>
+      <td>{notifCnt}</td>
+      <td>
+        <Link to={`/app/administrator/family?student_id=${sid}`} className="text-decoration-none">
+          {parentLabel}
+        </Link>
+        {parentEmail ? (
+          <a className="ms-2" href={`mailto:${parentEmail}`} title="Email parent">
+            <i className="bi bi-envelope" aria-hidden />
+          </a>
+        ) : null}
+      </td>
+      <td className="text-nowrap">
+        <Link
+          className="btn btn-sm btn-info"
+          to={`/app/administrator/attendance/view/${sid}?code=${encodeURIComponent(viCode)}${incidentParam}`}
+        >
+          Details
+        </Link>
+        {action === 'auto_email' ? (
+          <Link
+            className="btn btn-sm btn-primary ms-1"
+            to={`${composeBase}&variant=default${incidentParam}`}
+          >
+            Compose Auto Email
+          </Link>
+        ) : (
+          <span className="btn-group ms-1">
+            <Link className="btn btn-sm btn-success" to={`${composeBase}&variant=answered${incidentParam}`}>
+              Answered
+            </Link>
+            <Link className="btn btn-sm btn-warning" to={`${composeBase}&variant=no_answer${incidentParam}`}>
+              No Answer
+            </Link>
+          </span>
+        )}
+      </td>
+    </tr>
+  )
+}
+
+/** Port of `Views/attendance/violations_notified.php` */
+export function ViolationsNotifiedPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  const filterQuery = useMemo(() => {
+    const s = searchParams.toString()
+    return s ? `?${s}` : ''
+  }, [searchParams])
+
+  const [rows, setRows] = useState<AttendanceViolationStudentRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [noteModal, setNoteModal] = useState<AttendanceViolationStudentRow | null>(null)
+  const [noteText, setNoteText] = useState('')
+  const [savingNote, setSavingNote] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchAttendanceViolationsNotified({
+          schoolYear: schoolYear || null,
+          semester: semester || null,
+        })
+        if (!cancelled) setRows(data.students ?? [])
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  function applyFilter(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const p = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    if (sy) p.set('school_year', sy)
+    if (sem) p.set('semester', sem)
+    setSearchParams(p)
+  }
+
+  async function submitNote(e: FormEvent) {
+    e.preventDefault()
+    if (!noteModal) return
+    setSavingNote(true)
+    try {
+      const sid = studentIdOf(noteModal)
+      const code = String(noteModal.reason ?? noteModal.violation_code ?? '')
+      const lastDate = noteModal.last_date as string | undefined
+      const incidentYmd = lastDate ? String(lastDate).slice(0, 10) : ''
+      await saveAttendanceViolationNote({
+        student_id: String(sid),
+        code,
+        incident_date: incidentYmd,
+        note: noteText,
+        return_url: typeof window !== 'undefined' ? window.location.href : '',
+      })
+      setNoteModal(null)
+      setNoteText('')
+    } catch {
+      setError('Unable to save note.')
+    } finally {
+      setSavingNote(false)
+    }
+  }
+
+  return (
+    <div className="container-fluid px-0">
+      <h2 className="text-center mt-4 mb-3">Notified Attendance Violations</h2>
+      <div className="d-flex justify-content-center mb-2">
+        <form className="row g-2 align-items-end" onSubmit={applyFilter}>
+          <div className="col-auto">
+            <label className="form-label small mb-0">School Year</label>
+            <input name="school_year" className="form-control form-control-sm" defaultValue={schoolYear} />
+          </div>
+          <div className="col-auto">
+            <label className="form-label small mb-0">Semester</label>
+            <input name="semester" className="form-control form-control-sm" defaultValue={semester} />
+          </div>
+          <div className="col-auto">
+            <button type="submit" className="btn btn-sm btn-secondary">
+              Apply
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {error ? <div className="alert alert-danger mx-3">{error}</div> : null}
+
+      <div className="card border-0 rounded-3 shadow-sm mx-2">
+        <div className="card-header d-flex flex-wrap gap-2 justify-content-between align-items-center">
+          <h5 className="mt-2 mb-0">Notified Attendance Violations</h5>
+          <div className="d-flex flex-wrap gap-2 align-items-center">
+            <span className="badge bg-primary">School Year: {schoolYear || '—'}</span>
+            {semester ? <span className="badge bg-secondary">Semester: {semester}</span> : null}
+            <Link to={`${ATTENDANCE_VIOLATIONS_PENDING_PATH}${filterQuery}`} className="btn btn-outline-dark btn-sm">
+              View Pending
+            </Link>
+          </div>
+        </div>
+        <div className="card-body">
+          {loading ? (
+            <p className="text-muted">Loading…</p>
+          ) : rows.length === 0 ? (
+            <div className="alert alert-info mb-0">No notified violations found.</div>
+          ) : (
+            <div className="table-responsive">
+              <table className="table table-striped table-hover align-middle w-100 small">
+                <thead className="table-dark">
+                  <tr>
+                    <th>Student</th>
+                    <th>Grade</th>
+                    <th>Last Incident</th>
+                    <th>Reason</th>
+                    <th>Note</th>
+                    <th>Parent</th>
+                    <th>Notified On</th>
+                    <th>Details</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((st, idx) => (
+                    <NotifiedRow
+                      key={studentIdOf(st) || idx}
+                      st={st}
+                      onEditNote={() => {
+                        setNoteModal(st)
+                        setNoteText(String(st.note ?? ''))
+                      }}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {noteModal ? (
+        <div className="modal show d-block" tabIndex={-1} style={{ background: 'rgba(0,0,0,0.4)' }}>
+          <div className="modal-dialog">
+            <form className="modal-content" onSubmit={submitNote}>
+              <div className="modal-header">
+                <h5 className="modal-title">Comment / Note</h5>
+                <button type="button" className="btn-close" aria-label="Close" onClick={() => setNoteModal(null)} />
+              </div>
+              <div className="modal-body">
+                <textarea
+                  className="form-control"
+                  rows={5}
+                  required
+                  value={noteText}
+                  onChange={(ev) => setNoteText(ev.target.value)}
+                />
+              </div>
+              <div className="modal-footer">
+                <button type="submit" className="btn btn-primary" disabled={savingNote}>
+                  Save Note
+                </button>
+                <button type="button" className="btn btn-outline-secondary" onClick={() => setNoteModal(null)}>
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function NotifiedRow({
+  st,
+  onEditNote,
+}: {
+  st: AttendanceViolationStudentRow
+  onEditNote: () => void
+}) {
+  const sid = studentIdOf(st)
+  const name = studentNameOf(st)
+  const grade = String(st.class_section_name ?? st.class_name ?? '')
+  const lastDate = st.last_date ?? st.date
+  const incidentYmd = lastDate ? String(lastDate).slice(0, 10) : ''
+  const reason = String(st.reason ?? '')
+  const note = String(st.note ?? '')
+  const parentName = String(st.parent_name ?? '')
+  const notifiedAt = st.updated_at ?? st.date
+  const code = String(st.reason ?? st.violation_code ?? '')
+  const viColor = String(st.color ?? '#0d6efd')
+
+  return (
+    <tr style={{ borderLeft: `6px solid ${viColor}` }}>
+      <td>
+        <Link to={`/app/administrator/family?student_id=${sid}`} className="text-decoration-none">
+          {name}
+        </Link>
+      </td>
+      <td>{grade}</td>
+      <td>{incidentYmd ? formatMdY(incidentYmd) : '—'}</td>
+      <td>{reason || '—'}</td>
+      <td style={{ maxWidth: 280 }}>
+        {note ? (
+          <span className="small">{note.length > 120 ? `${note.slice(0, 120)}…` : note}</span>
+        ) : null}
+        <button type="button" className="btn btn-sm btn-outline-primary ms-1" onClick={onEditNote}>
+          {note ? 'Edit note' : 'Add note'}
+        </button>
+      </td>
+      <td>
+        {parentName ? (
+          <Link to={`/app/administrator/family?student_id=${sid}`} className="text-decoration-none">
+            {parentName}
+          </Link>
+        ) : (
+          <span className="text-muted">—</span>
+        )}
+      </td>
+      <td>{notifiedAt ? formatMdY(String(notifiedAt).slice(0, 10)) : '—'}</td>
+      <td>
+        <Link
+          className="btn btn-sm btn-info"
+          to={`/app/administrator/attendance/view/${sid}?code=${encodeURIComponent(code)}&incident_date=${encodeURIComponent(incidentYmd)}&include_notified=1`}
+        >
+          Details
+        </Link>
+      </td>
+    </tr>
+  )
+}
+
+function formatMdY(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return ymd
+  const [y, m, d] = ymd.split('-')
+  return `${m}-${d}-${y}`
+}

src/pages/attendance/attendancePaths.ts

@@ -0,0 +1,11 @@
+/** Monthly teacher/staff attendance (JWT `GET /api/v1/attendance/staff/month-overview`, POST `month-save`). */
+export const TEACHER_ATTENDANCE_MONTH_PATH = '/app/admin/teacher-attendance/month'
+
+/** Attendance violation queues (JWT `GET /api/v1/attendance/violations/pending|notified`, POST `save-note`, etc.). */
+export const ATTENDANCE_VIOLATIONS_PATH = '/app/attendance/violations'
+export const ATTENDANCE_VIOLATIONS_PENDING_PATH = `${ATTENDANCE_VIOLATIONS_PATH}/pending`
+export const ATTENDANCE_VIOLATIONS_NOTIFIED_PATH = `${ATTENDANCE_VIOLATIONS_PATH}/notified`
+
+/** Early dismissals list + add form (JWT `GET/POST /api/v1/attendance/early-dismissals`, `student-options`, signature upload). */
+export const EARLY_DISMISSALS_PATH = '/app/attendance/early-dismissals'
+export const EARLY_DISMISSALS_NEW_PATH = `${EARLY_DISMISSALS_PATH}/new`

src/pages/attendance/index.ts

@@ -0,0 +1,14 @@
+export { AdministratorAbsencePage } from './AdministratorAbsencePage'
+export { AdminsAttendanceFormPage } from './AdminsAttendanceFormPage'
+export { AttendanceTrackingPage } from './AttendanceTrackingPage'
+export { ComposeAttendanceEmailPage } from './ComposeAttendanceEmailPage'
+export { EarlyDismissalsAddPage } from './EarlyDismissalsAddPage'
+export { EarlyDismissalsPage } from './EarlyDismissalsPage'
+export { AttendanceEditModalBody } from './AttendanceEditModal'
+export { ParentAttendanceReportsAdminPage } from './ParentAttendanceReportsAdminPage'
+export { TeacherAttendanceFormPage } from './TeacherAttendanceFormPage'
+export { TeacherAttendanceMonthPage } from './TeacherAttendanceMonthPage'
+export { AttendanceStudentViolationsViewPage } from './AttendanceStudentViolationsViewPage'
+export { AttendanceViolationsHubPage } from './AttendanceViolationsHubPage'
+export { ViolationsNotifiedPage, ViolationsPendingPage } from './ViolationsPages'
+export { AttendanceTemplatesIndexPage } from './AttendanceTemplatesIndexPage'

src/pages/classPrep/ClassPrepListPage.tsx

@@ -0,0 +1,349 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchClassPrepIndex, saveClassPrepAdjustment } from '../../api/session'
+import type { ClassPrepIndexResponse, ClassPrepSectionRow } from '../../api/types'
+
+function adjustQty(input: HTMLInputElement, delta: number) {
+  const curr = parseInt(input.value, 10) || 0
+  input.value = String(curr + delta)
+}
+
+function defaultSchoolYear() {
+  const y = new Date().getFullYear()
+  return `${y}-${y + 1}`
+}
+
+export function ClassPrepListPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? defaultSchoolYear()
+  const semester = searchParams.get('semester') ?? ''
+
+  const [data, setData] = useState<ClassPrepIndexResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [savingId, setSavingId] = useState<string | null>(null)
+  const [saveMsg, setSaveMsg] = useState<string | null>(null)
+
+  const yearOptions = useMemo(() => {
+    const out: string[] = []
+    for (let y = new Date().getFullYear(); y >= 2020; y--) out.push(`${y}-${y + 1}`)
+    return out
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    fetchClassPrepIndex({
+      school_year: schoolYear,
+      semester: semester || undefined,
+    })
+      .then((d) => {
+        if (!cancelled) setData(d)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Failed to load class preparation data.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  const onFilterSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const fd = new FormData(e.currentTarget)
+      const sy = String(fd.get('school_year') ?? '')
+      const sem = String(fd.get('semester') ?? '')
+      const next = new URLSearchParams()
+      if (sy) next.set('school_year', sy)
+      if (sem) next.set('semester', sem)
+      setSearchParams(next)
+    },
+    [setSearchParams],
+  )
+
+  async function onSaveAdjustment(prep: ClassPrepSectionRow, form: HTMLFormElement) {
+    setSavingId(String(prep.class_section_id))
+    setSaveMsg(null)
+    const fd = new FormData(form)
+    const adjustments: Record<string, number> = {}
+    fd.forEach((v, k) => {
+      if (k.startsWith('adj__')) {
+        const name = k.slice(5)
+        adjustments[name] = parseInt(String(v), 10) || 0
+      }
+    })
+    try {
+      await saveClassPrepAdjustment({
+        class_section_id: prep.class_section_id,
+        school_year: schoolYear,
+        semester: semester || undefined,
+        adjustments,
+      })
+      setSaveMsg('Saved.')
+      const fresh = await fetchClassPrepIndex({
+        school_year: schoolYear,
+        semester: semester || undefined,
+      })
+      setData(fresh)
+    } catch (e: unknown) {
+      setSaveMsg(e instanceof ApiHttpError ? e.message : 'Save failed.')
+    } finally {
+      setSavingId(null)
+    }
+  }
+
+  const printBase = `/app/administrator/class-prep/print`
+  const semQuery = semester ? `?semester=${encodeURIComponent(semester)}` : ''
+
+  return (
+    <div className="container-fluid">
+      <div className="wrapper">
+        <h2 className="text-center mt-4 mb-3">Class Preparation</h2>
+
+        <form onSubmit={onFilterSubmit} className="mb-4 d-flex align-items-center gap-2 flex-wrap">
+          <label htmlFor="school_year" className="form-label mb-0">
+            School Year:
+          </label>
+          <select
+            name="school_year"
+            id="school_year"
+            className="form-select form-select-sm w-auto"
+            defaultValue={schoolYear}
+          >
+            {yearOptions.map((y) => (
+              <option key={y} value={y}>
+                {y}
+              </option>
+            ))}
+          </select>
+          <label htmlFor="semester" className="form-label mb-0">
+            Semester:
+          </label>
+          <select
+            name="semester"
+            id="semester"
+            className="form-select form-select-sm w-auto"
+            defaultValue={semester}
+          >
+            <option value="">—</option>
+            <option value="Fall">Fall</option>
+            <option value="Spring">Spring</option>
+          </select>
+          <button type="submit" className="btn btn-sm btn-primary">
+            Calculate Items
+          </button>
+        </form>
+
+        {loading ? (
+          <p className="text-muted">Loading…</p>
+        ) : error ? (
+          <div className="alert alert-danger">{error}</div>
+        ) : null}
+
+        {saveMsg ? (
+          <div className="alert alert-info py-2" role="status">
+            {saveMsg}
+          </div>
+        ) : null}
+
+        <div className="row g-3">
+          {(data?.prep_results ?? []).map((prep) => {
+            const adjMap = prep.adjustments ?? {}
+            return (
+              <div key={String(prep.class_section_id)} className="col-12 col-lg-6">
+                <div className="card shadow-sm border-0 h-100 classprep-card">
+                  <div className="card-header d-flex justify-content-between align-items-center bg-light border-0">
+                    <div>
+                      <div className="fw-semibold mb-1">{prep.class_section}</div>
+                      {prep.needs_print ? (
+                        <span className="badge bg-danger">Updated since last print</span>
+                      ) : (
+                        <span className="badge bg-success">Up-to-date</span>
+                      )}
+                      {prep.last_printed_at ? (
+                        <small className="text-muted ms-2">Last printed: {prep.last_printed_at}</small>
+                      ) : null}
+                    </div>
+                    <div className="small text-muted text-end">
+                      Students:
+                      <br />
+                      <span className="badge bg-secondary">{prep.student_count}</span>
+                    </div>
+                  </div>
+
+                  <div className="card-body">
+                    <div className="row g-3">
+                      <div className="col-12 col-md-7">
+                        <div className="fw-semibold mb-2">Prep Items</div>
+                        <ul className="list-group list-group-flush small border rounded overflow-hidden">
+                          {Object.entries(prep.prep_items ?? {}).map(([item, qty]) => (
+                            <li
+                              key={item}
+                              className={`list-group-item d-flex justify-content-between align-items-center ${
+                                Number(qty) === 0 ? 'text-muted classprep-muted-soft' : ''
+                              }`}
+                            >
+                              <span>{item}</span>
+                              <span
+                                className={`badge rounded-pill ${
+                                  Number(qty) > 0 ? 'bg-primary' : 'bg-secondary'
+                                }`}
+                              >
+                                {Number(qty)}
+                              </span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      <div className="col-12 col-md-5">
+                        <div className="fw-semibold mb-2">Adjustments (Tables)</div>
+                        <form
+                          className="d-grid gap-2"
+                          onSubmit={(e) => {
+                            e.preventDefault()
+                            void onSaveAdjustment(prep, e.currentTarget)
+                          }}
+                        >
+                          {Object.entries(adjMap).map(([item, value]) => (
+                            <div key={item}>
+                              <label className="form-label mb-1 small text-muted d-block">{item}</label>
+                              <div className="input-group input-group-sm">
+                                <button
+                                  type="button"
+                                  className="btn btn-outline-secondary"
+                                  onClick={(ev) => {
+                                    const input = ev.currentTarget.parentElement?.querySelector(
+                                      'input[type="number"]',
+                                    ) as HTMLInputElement | null
+                                    if (input) adjustQty(input, -1)
+                                  }}
+                                  aria-label={`Decrease ${item}`}
+                                >
+                                  −
+                                </button>
+                                <input
+                                  type="number"
+                                  className="form-control text-center"
+                                  name={`adj__${item}`}
+                                  defaultValue={Number(value)}
+                                  readOnly
+                                />
+                                <button
+                                  type="button"
+                                  className="btn btn-outline-secondary"
+                                  onClick={(ev) => {
+                                    const input = ev.currentTarget.parentElement?.querySelector(
+                                      'input[type="number"]',
+                                    ) as HTMLInputElement | null
+                                    if (input) adjustQty(input, 1)
+                                  }}
+                                  aria-label={`Increase ${item}`}
+                                >
+                                  +
+                                </button>
+                              </div>
+                            </div>
+                          ))}
+                          <div className="d-flex justify-content-end">
+                            <button
+                              type="submit"
+                              className="btn btn-sm btn-primary"
+                              disabled={savingId === String(prep.class_section_id)}
+                            >
+                              {savingId === String(prep.class_section_id) ? 'Saving…' : 'Save'}
+                            </button>
+                          </div>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="card-footer bg-transparent border-0 d-flex justify-content-end">
+                    <Link
+                      to={`${printBase}/${encodeURIComponent(String(prep.class_section_id))}/${encodeURIComponent(schoolYear)}${semQuery}`}
+                      className={`btn btn-lg ${prep.needs_print ? 'btn-danger' : 'btn-success'}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Print
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="mt-5">
+          <h5 className="mb-3">Totals for All Used Items</h5>
+          <div className="table-responsive">
+            <table className="table table-sm table-bordered align-middle">
+              <thead className="table-light">
+                <tr>
+                  <th>Item</th>
+                  <th className="text-end">Total Needed</th>
+                  <th className="text-end">In Inventory</th>
+                  <th className="text-end">Short By</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(data?.total_needed ?? {}).map(([item, needed]) => {
+                  const have = Number((data?.available ?? {})[item] ?? 0)
+                  const short = Math.max(0, Number(needed) - have)
+                  return (
+                    <tr key={item} className={short > 0 ? 'table-warning' : ''}>
+                      <td>{item}</td>
+                      <td className="text-end">{Number(needed)}</td>
+                      <td className="text-end">{have}</td>
+                      <td
+                        className={`text-end ${short > 0 ? 'text-danger fw-bold' : 'text-success'}`}
+                      >
+                        {short}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {data?.shortages && Object.keys(data.shortages).length > 0 ? (
+            <div className="alert alert-danger mt-3">
+              <strong>Shortages Detected</strong>
+              <ul className="mb-0">
+                {Object.entries(data.shortages).map(([item, short]) => (
+                  <li key={item}>
+                    {item}: short by {Number(short)} pcs
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : data && Object.keys(data.total_needed ?? {}).length > 0 ? (
+            <div className="alert alert-success mt-3">All items are available in stock.</div>
+          ) : null}
+        </div>
+      </div>
+
+      <style>{`
+        .classprep-muted-soft { opacity: 0.55; }
+        .classprep-card { border-radius: 12px; }
+        .classprep-card .card-header {
+          border-top-left-radius: 12px;
+          border-top-right-radius: 12px;
+        }
+        .classprep-card .card-footer {
+          border-bottom-left-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      `}</style>
+    </div>
+  )
+}

src/pages/classPrep/ClassPrepPrintPage.css

@@ -0,0 +1,52 @@
+.classprep-print-root {
+  font-family: Arial, sans-serif;
+  padding: 2rem;
+}
+
+.classprep-print-root .prep-label {
+  border: 2px solid #000;
+  padding: 2rem;
+  max-width: 400px;
+  margin: auto;
+  text-align: center;
+}
+
+.classprep-print-root .prep-label h2 {
+  font-size: clamp(2rem, 8vw, 5rem);
+  margin-bottom: 1rem;
+}
+
+.classprep-print-root .prep-label ul {
+  list-style: none;
+  padding-left: 0;
+  font-size: clamp(1.25rem, 5vw, 3rem);
+}
+
+@media print {
+  .management-app > header,
+  .mgmt-sidebar,
+  .mgmt-sidebar-toggle,
+  .mgmt-sidebar-backdrop,
+  .footer-back {
+    display: none !important;
+  }
+
+  .management-main {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .classprep-print-root {
+    padding: 0;
+  }
+
+  .classprep-print-root .prep-label {
+    border: none;
+    page-break-after: always;
+  }
+}

src/pages/classPrep/ClassPrepPrintPage.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useParams, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchClassPrepPrintPayload } from '../../api/session'
+import './ClassPrepPrintPage.css'
+
+const PREFERRED_ORDER = [
+  'Grade Box',
+  'Large Table',
+  'Regular Chair',
+  'Small Chair',
+  'Small Table',
+  'Teacher Chair',
+  'Trash Bin',
+  'White Board',
+]
+
+function orderPrepItems(prepItems: Record<string, number>): [string, number][] {
+  const ordered: [string, number][] = []
+  for (const k of PREFERRED_ORDER) {
+    if (Object.prototype.hasOwnProperty.call(prepItems, k)) {
+      ordered.push([k, prepItems[k]!])
+    }
+  }
+  for (const [k, v] of Object.entries(prepItems)) {
+    if (!ordered.some(([ok]) => ok === k)) ordered.push([k, v])
+  }
+  return ordered
+}
+
+export function ClassPrepPrintPage() {
+  const { sectionId, schoolYear } = useParams<{ sectionId: string; schoolYear: string }>()
+  const [searchParams] = useSearchParams()
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [title, setTitle] = useState<string>('Class')
+  const [items, setItems] = useState<Record<string, number>>({})
+  const [error, setError] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+  const printedRef = useRef(false)
+
+  const decoded = useMemo(
+    () => ({
+      sectionId: sectionId ? decodeURIComponent(sectionId) : '',
+      schoolYear: schoolYear ? decodeURIComponent(schoolYear) : '',
+    }),
+    [sectionId, schoolYear],
+  )
+
+  useEffect(() => {
+    printedRef.current = false
+  }, [decoded.sectionId, decoded.schoolYear, semester])
+
+  useEffect(() => {
+    if (!decoded.sectionId || !decoded.schoolYear) return
+    let cancelled = false
+    setReady(false)
+    fetchClassPrepPrintPayload({
+      sectionId: decoded.sectionId,
+      schoolYear: decoded.schoolYear,
+      semester,
+    })
+      .then((res) => {
+        if (cancelled) return
+        setTitle(res.class_section?.trim() || `Section ${decoded.sectionId}`)
+        setItems(res.prep_items ?? {})
+        setReady(true)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) {
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load print data.')
+          setReady(false)
+        }
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [decoded.sectionId, decoded.schoolYear, semester])
+
+  useEffect(() => {
+    if (!ready || error || printedRef.current) return
+    printedRef.current = true
+    const t = window.setTimeout(() => window.print(), 400)
+    return () => window.clearTimeout(t)
+  }, [ready, error])
+
+  const rows = orderPrepItems(items).filter(([, q]) => Number(q) > 0)
+
+  return (
+    <div className="classprep-print-root">
+      {error ? (
+        <p className="text-danger p-4">{error}</p>
+      ) : (
+        <div className="prep-label">
+          <h2>Grade {title}</h2>
+          <ul>
+            {rows.length === 0 ? (
+              <li>No items needed</li>
+            ) : (
+              rows.map(([name, qty]) => (
+                <li key={name}>
+                  <strong>{qty}</strong> {name}
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/classProgress/ClassProgressListPage.tsx

@@ -0,0 +1,359 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import {
+  fetchClassProgressGroups,
+  fetchClassProgressMeta,
+  fetchClassSections,
+} from '../../api/session'
+import type { ClassProgressGroupRow } from '../../api/types'
+import { ClassProgressUnitDisplay } from './ClassProgressUnitDisplay'
+import { formatProgressDate } from './classProgressUtils'
+
+/** CI `admin/class_progress_list.php` — accordion by class section, filters, submission badges when API provides stats. */
+export function ClassProgressListPage() {
+  const [filters, setFilters] = useState({ weekStart: '', weekEnd: '', classSectionId: '', status: '' })
+  const [subjectSections, setSubjectSections] = useState<Record<string, { label?: string; db_subject?: string }>>({})
+  const [statusOptions, setStatusOptions] = useState<Record<string, string>>({})
+  const [classSections, setClassSections] = useState<
+    Array<{ class_section_id?: number | null; class_section_name?: string | null }>
+  >([])
+  const [items, setItems] = useState<ClassProgressGroupRow[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  /** Server may later expose `low_progress_section_ids`; until then keep empty (CI disables button). */
+  const lowProgressSectionIds: number[] = []
+
+  const lowProgressQuery = lowProgressSectionIds.join(',')
+  const lowProgressUrl =
+    lowProgressQuery === ''
+      ? '/app/administrator/teacher-submissions'
+      : `/app/administrator/teacher-submissions?low_progress_sections=${encodeURIComponent(lowProgressQuery)}`
+
+  async function load() {
+    try {
+      const [meta, sections, groups] = await Promise.all([
+        fetchClassProgressMeta(),
+        fetchClassSections({ perPage: 200 }),
+        fetchClassProgressGroups({
+          classSectionId: filters.classSectionId ? Number(filters.classSectionId) : null,
+          status: filters.status || null,
+          weekStart: filters.weekStart || null,
+          weekEnd: filters.weekEnd || null,
+          perPage: 200,
+        }),
+      ])
+      setSubjectSections(meta.data?.subject_sections ?? {})
+      setStatusOptions(meta.data?.status_options ?? {})
+      setClassSections(sections.data?.sections ?? [])
+      setItems(groups.data?.items ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load class progress.')
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  const groupsBySection = useMemo(() => {
+    const m = new Map<number, ClassProgressGroupRow[]>()
+    for (const item of items) {
+      const sid = Number(item.class_section_id ?? 0)
+      if (!sid) continue
+      const arr = m.get(sid) ?? []
+      arr.push(item)
+      m.set(sid, arr)
+    }
+    return m
+  }, [items])
+
+  const subjectCount = Object.keys(subjectSections).length
+
+  function teacherLabelForGroup(group: ClassProgressGroupRow): string {
+    const reports = group.reports ?? {}
+    const teacherCounts: Record<string, number> = {}
+    const teacherLatest: Record<string, string> = {}
+    for (const report of Object.values(reports)) {
+      const name = String(report?.teacher_name ?? '').trim()
+      if (!name) continue
+      teacherCounts[name] = (teacherCounts[name] ?? 0) + 1
+      const stamp = String(report?.updated_at ?? report?.created_at ?? '')
+      if (stamp !== '' && (!teacherLatest[name] || stamp > teacherLatest[name])) {
+        teacherLatest[name] = stamp
+      }
+    }
+    if (!Object.keys(teacherCounts).length) return '—'
+    let bestName = ''
+    let bestCount = -1
+    let bestStamp = ''
+    for (const [name, count] of Object.entries(teacherCounts)) {
+      const stamp = teacherLatest[name] ?? ''
+      if (count > bestCount || (count === bestCount && stamp > bestStamp)) {
+        bestName = name
+        bestCount = count
+        bestStamp = stamp
+      }
+    }
+    return bestName || '—'
+  }
+
+  return (
+    <>
+      <style>{`
+        .admin-progress-table thead th {
+          position: static !important;
+          top: auto !important;
+          z-index: auto !important;
+          background: #f8f9fa;
+          white-space: nowrap;
+          line-height: 1.2;
+          padding-top: .75rem;
+          padding-bottom: .75rem;
+        }
+        .admin-progress-table td { vertical-align: top; }
+        .bg-orange { background-color: #fd7e14 !important; }
+      `}</style>
+      <div className="container py-4">
+        <div className="mb-4 pb-3 border-bottom">
+          <div className="d-flex align-items-center justify-content-between">
+            <div>
+              <h3 className="mb-0">Class Progress Reports</h3>
+              <div className="text-muted">Filter by week, class, and status</div>
+            </div>
+            <div>
+              <Link
+                className={`btn btn-sm btn-outline-warning${lowProgressSectionIds.length === 0 ? ' disabled' : ''}`}
+                to={lowProgressUrl}
+                aria-disabled={lowProgressSectionIds.length === 0}
+                tabIndex={lowProgressSectionIds.length === 0 ? -1 : undefined}
+                onClick={(e) => {
+                  if (lowProgressSectionIds.length === 0) e.preventDefault()
+                }}
+              >
+                Teachers &lt; 50%
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {error ? <div className="alert alert-danger">{error}</div> : null}
+
+        <form
+          className="card shadow-sm mb-3"
+          onSubmit={(e) => {
+            e.preventDefault()
+            void load()
+          }}
+        >
+          <div className="card-body">
+            <div className="row g-3">
+              <div className="col-md-3">
+                <label className="form-label">From</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  value={filters.weekStart}
+                  onChange={(e) => setFilters((c) => ({ ...c, weekStart: e.target.value }))}
+                />
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">To</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  value={filters.weekEnd}
+                  onChange={(e) => setFilters((c) => ({ ...c, weekEnd: e.target.value }))}
+                />
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">Class/Section</label>
+                <select
+                  className="form-select"
+                  value={filters.classSectionId}
+                  onChange={(e) => setFilters((c) => ({ ...c, classSectionId: e.target.value }))}
+                >
+                  <option value="">All</option>
+                  {classSections.map((section) => (
+                    <option key={String(section.class_section_id ?? '')} value={section.class_section_id ?? ''}>
+                      {section.class_section_name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-3">
+                <label className="form-label">Status</label>
+                <select
+                  className="form-select"
+                  value={filters.status}
+                  onChange={(e) => setFilters((c) => ({ ...c, status: e.target.value }))}
+                >
+                  <option value="">All</option>
+                  {Object.entries(statusOptions).map(([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <div className="d-flex gap-2 mt-3">
+              <button className="btn btn-primary" type="submit">
+                Apply
+              </button>
+              <button
+                className="btn btn-outline-secondary"
+                type="button"
+                onClick={() => {
+                  setFilters({ weekStart: '', weekEnd: '', classSectionId: '', status: '' })
+                  window.setTimeout(() => void load(), 0)
+                }}
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        </form>
+
+        <div className="card shadow-sm mt-5">
+          <div className="card-body pt-4">
+            {classSections.length === 0 ? (
+              <div className="text-center text-muted py-4">No class sections found.</div>
+            ) : (
+              <div className="accordion" id="adminProgressAccordion">
+                {classSections.map((cs) => {
+                  const sectionId = Number(cs.class_section_id ?? 0)
+                  const sectionName = cs.class_section_name ?? 'Unknown Section'
+                  const sectionGroups = groupsBySection.get(sectionId) ?? []
+                  const hasReports = sectionGroups.length > 0
+                  const collapseId = `progress-section-${sectionId}`
+                  const headingId = `progress-heading-${sectionId}`
+                  const submissionLabel = 'Submitted: N/A'
+                  const badgeClass = 'bg-secondary'
+                  return (
+                    <div className="accordion-item mb-2" key={sectionId || sectionName}>
+                      <h2 className="accordion-header" id={headingId}>
+                        <button
+                          className="accordion-button collapsed"
+                          type="button"
+                          data-bs-toggle="collapse"
+                          data-bs-target={`#${collapseId}`}
+                          aria-expanded="false"
+                          aria-controls={collapseId}
+                        >
+                          {sectionName}
+                          <span className={`badge ${badgeClass} ms-2`}>{submissionLabel}</span>
+                          <span className="badge bg-info text-dark ms-2">Units: {subjectCount}</span>
+                          {hasReports ? (
+                            <span className="badge bg-secondary ms-2">{sectionGroups.length} weeks</span>
+                          ) : null}
+                        </button>
+                      </h2>
+                      <div
+                        id={collapseId}
+                        className="accordion-collapse collapse"
+                        aria-labelledby={headingId}
+                        data-bs-parent="#adminProgressAccordion"
+                      >
+                        <div className="accordion-body">
+                          {!hasReports ? (
+                            <div className="text-muted">No reports found for this section.</div>
+                          ) : (
+                            <div className="table-responsive">
+                              <table
+                                className="table table-hover align-middle mb-0 admin-progress-table no-mgmt-sticky"
+                                data-no-mgmt-sticky
+                              >
+                                <thead className="table-light">
+                                  <tr>
+                                    <th>Week</th>
+                                    <th>Subjects</th>
+                                    <th>Teacher</th>
+                                    <th className="text-end">Action</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {sectionGroups.map((group, groupIndex) => {
+                                    const reports = group.reports ?? {}
+                                    const reportValues = Object.values(reports)
+                                    const firstReport = reportValues[0]
+                                    const exampleId = firstReport?.id
+                                    const reportKey = reportValues
+                                      .map((report) => String(report?.id ?? report?.subject ?? report?.teacher_name ?? ''))
+                                      .filter(Boolean)
+                                      .sort()
+                                      .join('-')
+                                    const weekLabel = `${formatProgressDate(group.week_start)} – ${formatProgressDate(group.week_end)}`
+                                    return (
+                                      <tr
+                                        key={`${sectionId}-${group.week_start}-${group.week_end}-${reportKey || exampleId || 'group'}-${groupIndex}`}
+                                      >
+                                        <td>
+                                          <div className="fw-semibold">{weekLabel}</div>
+                                        </td>
+                                        <td>
+                                          <div className="d-flex flex-column gap-2">
+                                            {Object.entries(subjectSections).map(([slug, section]) => {
+                                              const subjectName = section.db_subject ?? section.label ?? slug
+                                              const report = reports[subjectName]
+                                              const statusTag = report
+                                                ? (report.status_label ?? 'Unknown')
+                                                : 'No entry'
+                                              const badgeClassInner = report ? 'bg-secondary' : 'bg-light text-muted'
+                                              return (
+                                                <div key={slug} className="border rounded-3 p-2">
+                                                  <div className="d-flex justify-content-between align-items-center">
+                                                    <strong className="small mb-0">
+                                                      {section.label ?? subjectName}
+                                                    </strong>
+                                                    <span className={`badge ${badgeClassInner}`}>{statusTag}</span>
+                                                  </div>
+                                                  <div className="small">
+                                                    {report ? (
+                                                      <ClassProgressUnitDisplay
+                                                        unitTitle={report.unit_title}
+                                                        isQuran={subjectName === 'Quran/Arabic'}
+                                                        compact
+                                                      />
+                                                    ) : (
+                                                      <span className="text-muted">No submission</span>
+                                                    )}
+                                                  </div>
+                                                </div>
+                                              )
+                                            })}
+                                          </div>
+                                        </td>
+                                        <td>{teacherLabelForGroup(group)}</td>
+                                        <td className="text-end">
+                                          {exampleId ? (
+                                            <button
+                                              className="btn btn-sm btn-outline-primary"
+                                              type="button"
+                                              onClick={() => navigate(`/app/admin/progress/view/${exampleId}`)}
+                                            >
+                                              View
+                                            </button>
+                                          ) : null}
+                                        </td>
+                                      </tr>
+                                    )
+                                  })}
+                                </tbody>
+                              </table>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/pages/classProgress/ClassProgressUnitDisplay.tsx

@@ -0,0 +1,57 @@
+import { splitUnitTitle } from './classProgressUtils'
+
+/** CI `admin/partials/class_progress_unit_display.php` */
+export function ClassProgressUnitDisplay({
+  unitTitle,
+  isQuran,
+  compact,
+}: {
+  unitTitle?: string | null
+  isQuran?: boolean
+  compact?: boolean
+}) {
+  const { curriculum, custom } = splitUnitTitle(unitTitle)
+  const labelCurriculum = isQuran ? 'Surah / curriculum' : 'Unit / chapter'
+  const labelCustom = isQuran ? 'Custom Surah / Arabic' : 'Custom subject(s)'
+
+  if (!String(unitTitle ?? '').trim()) return <span className="text-muted">-</span>
+
+  if (compact) {
+    return (
+      <>
+        {custom.length > 0 ? (
+          <div className="small">
+            <span className="badge text-bg-info me-1">{isQuran ? 'Custom' : 'Custom subject'}</span>
+            {custom.join(', ')}
+          </div>
+        ) : null}
+        {curriculum.length > 0 ? (
+          <div className={`small text-muted${custom.length > 0 ? ' mt-1' : ''}`}>{curriculum.join(' · ')}</div>
+        ) : null}
+        {custom.length === 0 && curriculum.length === 0 ? (
+          <div className="small text-muted">{String(unitTitle)}</div>
+        ) : null}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {curriculum.length > 0 ? (
+        <div className="mb-2">
+          <strong>{labelCurriculum}:</strong> {curriculum.join(' ; ')}
+        </div>
+      ) : null}
+      {custom.length > 0 ? (
+        <div className="mb-2">
+          <strong>{labelCustom}:</strong> {custom.join(' ; ')}
+        </div>
+      ) : null}
+      {curriculum.length === 0 && custom.length === 0 ? (
+        <div className="mb-2">
+          <strong>{labelCurriculum}:</strong> {String(unitTitle)}
+        </div>
+      ) : null}
+    </>
+  )
+}

src/pages/classProgress/ClassProgressViewPage.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { apiUrl } from '../../lib/apiOrigin'
+import { fetchClassProgressDetail, fetchClassProgressMeta } from '../../api/session'
+import type { ClassProgressReportRow } from '../../api/types'
+import { ClassProgressUnitDisplay } from './ClassProgressUnitDisplay'
+import { FLAG_LABELS, formatProgressDate } from './classProgressUtils'
+
+function attachmentHref(att: {
+  id?: number
+  download_url?: string | null
+  legacy?: boolean | number | null
+}) {
+  if (att.download_url) return att.download_url
+  const id = att.id
+  if (!id) return '#'
+  const legacy = Boolean(att.legacy)
+  return legacy
+    ? apiUrl(`/admin/progress/attachment/${id}`)
+    : apiUrl(`/admin/progress/attachment-file/${id}`)
+}
+
+/** CI `admin/class_progress_view.php` */
+export function ClassProgressViewPage() {
+  const { id } = useParams()
+  const reportId = Number(id)
+  const [report, setReport] = useState<ClassProgressReportRow | null>(null)
+  const [weeklyReports, setWeeklyReports] = useState<ClassProgressReportRow[]>([])
+  const [subjectSections, setSubjectSections] = useState<Record<string, { label?: string; db_subject?: string }>>({})
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!reportId) return
+    ;(async () => {
+      try {
+        const [detail, meta] = await Promise.all([
+          fetchClassProgressDetail(reportId),
+          fetchClassProgressMeta(),
+        ])
+        setReport(detail.data?.report ?? null)
+        setWeeklyReports(detail.data?.weekly_reports ?? [])
+        setSubjectSections(meta.data?.subject_sections ?? {})
+        setError(null)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load progress report.')
+      }
+    })()
+  }, [reportId])
+
+  const reportsBySubject = useMemo(
+    () => Object.fromEntries(weeklyReports.map((entry) => [String(entry.subject ?? ''), entry])),
+    [weeklyReports],
+  )
+
+  const attachments = weeklyReports.flatMap((entry) =>
+    (entry.attachments ?? []).map((attachment) => ({
+      subject: entry.subject ?? 'Attachment',
+      attachment,
+      report_id: entry.id,
+    })),
+  )
+
+  return (
+    <div className="container py-4">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {report ? (
+        <>
+          <div className="d-flex align-items-center justify-content-between mb-3">
+            <div>
+              <h3 className="mb-0">Progress Report</h3>
+              <div className="text-muted">
+                {report.class_section_name ?? '-'} • {formatProgressDate(report.week_start)} →{' '}
+                {formatProgressDate(report.week_end)}
+              </div>
+            </div>
+            <Link to="/app/admin/progress" className="btn btn-outline-secondary">
+              Back
+            </Link>
+          </div>
+
+          <div className="row g-3">
+            <div className="col-lg-8">
+              {Object.entries(subjectSections).map(([slug, section]) => {
+                const subjectName = section.db_subject ?? section.label ?? slug
+                const isQuran = subjectName === 'Quran/Arabic'
+                const homeworkLabel = isQuran ? 'Arabic Practice / Homework' : 'Assigned Homework'
+                const entry = reportsBySubject[subjectName]
+                return (
+                  <div className="card shadow-sm mb-3" key={slug}>
+                    <div className="card-header bg-white d-flex align-items-center justify-content-between">
+                      <strong className="mb-0">{section.label ?? subjectName}</strong>
+                    </div>
+                    <div className="card-body">
+                      {!entry ? (
+                        <div className="text-muted">No entry submitted for this subject this week.</div>
+                      ) : (
+                        <>
+                          <div className="mb-2">
+                            <ClassProgressUnitDisplay
+                              unitTitle={entry.unit_title}
+                              isQuran={isQuran}
+                              compact={false}
+                            />
+                          </div>
+                          {String(entry.materials ?? '').trim() ? (
+                            <div className="mb-2">
+                              <strong>Materials:</strong> {entry.materials}
+                            </div>
+                          ) : null}
+                          <div className="mb-3">
+                            <strong>Activities</strong>
+                            <div className="mt-1" style={{ whiteSpace: 'pre-wrap' }}>
+                              {entry.covered || '-'}
+                            </div>
+                          </div>
+                          <div className="mb-3">
+                            <strong>{homeworkLabel}:</strong>
+                            <div className="mt-1" style={{ whiteSpace: 'pre-wrap' }}>
+                              {entry.homework || '-'}
+                            </div>
+                          </div>
+                          {(entry.attachments ?? []).length > 0 ? (
+                            <div className="mt-3">
+                              <strong>Attachments:</strong>
+                              <div className="d-flex flex-column gap-2 mt-2">
+                                {(entry.attachments ?? []).map((att) => {
+                                  const linkId = att.id ?? entry.id
+                                  return (
+                                    <a
+                                      key={String(att.id ?? att.name ?? '')}
+                                      className="btn btn-sm btn-outline-secondary text-start"
+                                      href={attachmentHref({ ...att, id: linkId })}
+                                      target="_blank"
+                                      rel="noreferrer"
+                                    >
+                                      {att.name ?? 'Attachment'}
+                                    </a>
+                                  )
+                                })}
+                              </div>
+                            </div>
+                          ) : null}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            <div className="col-lg-4">
+              <div className="card shadow-sm mb-3">
+                <div className="card-header bg-white">
+                  <strong>Summary</strong>
+                </div>
+                <div className="card-body">
+                  <div className="mb-2">
+                    <strong>Teacher:</strong> {String(report.teacher_name ?? '').trim() || '-'}
+                  </div>
+                  <div className="mb-2">
+                    <strong>Submitted:</strong> {formatProgressDate(report.created_at, true)}
+                  </div>
+                  <div>
+                    <strong>Status:</strong> {report.status_label ?? 'Unknown'}
+                  </div>
+                </div>
+              </div>
+
+              {(report.flags ?? []).length > 0 ? (
+                <div className="card shadow-sm mb-3">
+                  <div className="card-header bg-white">
+                    <strong>Checklist</strong>
+                  </div>
+                  <div className="card-body d-flex flex-wrap gap-2">
+                    {(report.flags ?? []).map((flag) => (
+                      <span key={flag} className="badge bg-light text-dark border">
+                        {FLAG_LABELS[flag] ?? flag.replace(/_/g, ' ')}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+
+              {attachments.length > 0 ? (
+                <div className="card shadow-sm">
+                  <div className="card-header bg-white">
+                    <strong>Attachments</strong>
+                  </div>
+                  <div className="card-body">
+                    {attachments.map((item, index) => {
+                      const att = item.attachment
+                      const linkId = att.id ?? item.report_id
+                      if (!linkId) return null
+                      const label = `${item.subject} • ${att.name ?? 'Attachment'}`
+                      return (
+                        <a
+                          key={`${linkId}-${index}`}
+                          className="btn btn-outline-primary w-100 text-start mb-2"
+                          href={attachmentHref({ ...att, id: linkId })}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {label}
+                        </a>
+                      )
+                    })}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}

src/pages/classProgress/classProgressUtils.ts

@@ -0,0 +1,31 @@
+/** Mirrors `ClassProgressController::splitUnitTitleForDisplay` / CI `class_progress_unit_display.php`. */
+
+export function formatProgressDate(value?: string | null, withTime = false) {
+  if (!value) return '—'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return withTime ? date.toLocaleString() : date.toLocaleDateString()
+}
+
+export function splitUnitTitle(unitTitle?: string | null) {
+  const raw = String(unitTitle ?? '').trim()
+  if (!raw) return { curriculum: [] as string[], custom: [] as string[] }
+  const segments = raw
+    .split(/\s*[;|]\s*/)
+    .map((part) => part.trim())
+    .filter(Boolean)
+  const curriculum: string[] = []
+  const custom: string[] = []
+  for (const segment of segments) {
+    if (/custom/i.test(segment)) custom.push(segment.replace(/^custom[:\s-]*/i, '').trim() || segment)
+    else curriculum.push(segment)
+  }
+  if (curriculum.length === 0 && custom.length === 0) curriculum.push(raw)
+  return { curriculum, custom }
+}
+
+export const FLAG_LABELS: Record<string, string> = {
+  homework_assigned: 'Homework assigned',
+  quiz_done: 'Quiz / check-in completed',
+  materials_missing: 'Materials needed',
+}

src/pages/communications/CommunicationsIndexPage.tsx

@@ -0,0 +1,374 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import {
+  fetchCommunicationsCompose,
+  fetchFamilyGuardians,
+  fetchStudentFamilies,
+  previewCommunicationsEmail,
+  sendCommunicationsEmail,
+} from '../../api/session'
+import type { CommunicationsStudentOption } from '../../api/types'
+import { useAuth } from '../../auth/AuthProvider'
+
+export function CommunicationsIndexPage() {
+  const { user } = useAuth()
+  const [searchParams] = useSearchParams()
+  const preStudent = searchParams.get('student_id')
+  const preTemplate = searchParams.get('template_key') ?? ''
+
+  const [students, setStudents] = useState<CommunicationsStudentOption[]>([])
+  const [templates, setTemplates] = useState<{ template_key: string; name?: string | null }[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [studentId, setStudentId] = useState('')
+  const [familyId, setFamilyId] = useState('')
+  const [familyOptions, setFamilyOptions] = useState<{ id: number; label: string }[]>([])
+  const [loadingFamilies, setLoadingFamilies] = useState(false)
+  const [templateKey, setTemplateKey] = useState(preTemplate)
+
+  const [recipients, setRecipients] = useState<string[]>([])
+  const [subject, setSubject] = useState('')
+  const [body, setBody] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [sendMsg, setSendMsg] = useState<string | null>(null)
+  const prefillDone = useRef<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetchCommunicationsCompose()
+      .then((ctx) => {
+        if (cancelled) return
+        setStudents(ctx.students ?? [])
+        setTemplates(ctx.templates ?? [])
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Failed to load compose options.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    prefillDone.current = null
+  }, [preStudent])
+
+  async function loadGuardians(fid: string) {
+    setRecipients([])
+    if (!fid) return
+    try {
+      const res = await fetchFamilyGuardians(Number(fid))
+      const list = (res as { data?: unknown }).data
+      const rows = Array.isArray(list) ? list : []
+      const emails: string[] = []
+      for (const g of rows as { email?: string | null; receive_emails?: boolean }[]) {
+        if (g.receive_emails && g.email) emails.push(g.email.trim())
+      }
+      setRecipients([...new Set(emails)])
+    } catch {
+      setRecipients([])
+    }
+  }
+
+  async function loadFamilies(sid: string) {
+    setFamilyId('')
+    setRecipients([])
+    setFamilyOptions([])
+    if (!sid) return
+    setLoadingFamilies(true)
+    try {
+      const res = await fetchStudentFamilies(Number(sid))
+      const list = (res as { data?: unknown }).data
+      const rows = Array.isArray(list) ? list : []
+      const mapped = rows.map((f: { id?: number; household_name?: string; is_primary_home?: boolean }) => ({
+        id: Number(f.id),
+        label:
+          (f.household_name?.trim() || '') !== ''
+            ? String(f.household_name)
+            : `Family #${f.id}` + (f.is_primary_home ? ' (primary)' : ''),
+      }))
+      setFamilyOptions(mapped)
+      if (mapped.length > 0) {
+        const first = String(mapped[0]!.id)
+        setFamilyId(first)
+        void loadGuardians(first)
+      }
+    } catch {
+      setFamilyOptions([])
+    } finally {
+      setLoadingFamilies(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!preStudent || students.length === 0) return
+    if (!students.some((s) => String(s.id) === preStudent)) return
+    if (prefillDone.current === preStudent) return
+    prefillDone.current = preStudent
+    setStudentId(preStudent)
+    void loadFamilies(preStudent)
+  }, [preStudent, students])
+
+  async function refreshPreview() {
+    if (!studentId || !familyId || !templateKey) return
+    setBusy(true)
+    setSendMsg(null)
+    try {
+      const vars: Record<string, string> = {
+        school_name: 'Al Rahma Sunday School',
+        teacher_name: user?.name ?? 'Teacher',
+        class_section: '',
+        student_grade: '',
+        attendance_message: '',
+        assessment_name: '',
+        score_obtained: '',
+        score_total: '',
+        teacher_comments: '',
+        behavior_summary: '',
+        actions_taken: '',
+        next_steps: '',
+      }
+      const data = await previewCommunicationsEmail({
+        student_id: Number(studentId),
+        family_id: Number(familyId),
+        template_key: templateKey,
+        vars,
+      })
+      if (data.subject) setSubject(data.subject)
+      if (data.html)
+        setBody(data.html.replace(/<br\s*\/?>/gi, '\n'))
+    } catch (e: unknown) {
+      setSendMsg(e instanceof ApiHttpError ? e.message : 'Preview failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function onSend(e: React.FormEvent) {
+    e.preventDefault()
+    if (!studentId || !familyId || !templateKey || !subject.trim()) return
+    setBusy(true)
+    setSendMsg(null)
+    try {
+      await sendCommunicationsEmail({
+        student_id: Number(studentId),
+        family_id: Number(familyId),
+        template_key: templateKey,
+        subject: subject.trim(),
+        body,
+        recipients,
+      })
+      setSendMsg('Message sent.')
+    } catch (err: unknown) {
+      setSendMsg(err instanceof ApiHttpError ? err.message : 'Send failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function removeRecipient(email: string) {
+    setRecipients((r) => r.filter((x) => x !== email))
+  }
+
+  const previewSafe = useMemo(() => ({ __html: body.replace(/\n/g, '<br/>') }), [body])
+
+  return (
+    <div className="container my-4">
+      <h2 className="mb-3">Family Communications</h2>
+
+      {loading ? (
+        <p className="text-muted">Loading…</p>
+      ) : error ? (
+        <div className="alert alert-danger">{error}</div>
+      ) : null}
+
+      <div className="card">
+        <div className="card-header">Compose</div>
+        <div className="card-body">
+          <form id="comm-form" onSubmit={onSend}>
+            <div className="row g-3">
+              <div className="col-md-4">
+                <label className="form-label" htmlFor="student_id">
+                  Student
+                </label>
+                <select
+                  className="form-select"
+                  id="student_id"
+                  name="student_id"
+                  required
+                  value={studentId}
+                  onChange={(ev) => {
+                    const v = ev.target.value
+                    setStudentId(v)
+                    void loadFamilies(v)
+                  }}
+                >
+                  <option value="">Select…</option>
+                  {students.map((st) => (
+                    <option key={st.id} value={st.id}>
+                      {[st.lastname, st.firstname].filter(Boolean).join(', ') || `Student ${st.id}`}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-4">
+                <label className="form-label" htmlFor="family_id">
+                  Family (if multiple)
+                </label>
+                <select
+                  className="form-select"
+                  id="family_id"
+                  name="family_id"
+                  required
+                  disabled={!studentId || loadingFamilies}
+                  value={familyId}
+                  onChange={(ev) => {
+                    const v = ev.target.value
+                    setFamilyId(v)
+                    void loadGuardians(v)
+                  }}
+                >
+                  <option value="">{studentId ? 'Select…' : 'Select a student first…'}</option>
+                  {familyOptions.map((f) => (
+                    <option key={f.id} value={f.id}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-4">
+                <label className="form-label" htmlFor="template_key">
+                  Subject Category
+                </label>
+                <select
+                  className="form-select"
+                  id="template_key"
+                  name="template_key"
+                  required
+                  value={templateKey}
+                  onChange={(ev) => setTemplateKey(ev.target.value)}
+                >
+                  <option value="">Select…</option>
+                  {templates.map((t) => (
+                    <option key={t.template_key} value={t.template_key}>
+                      {(t.name?.trim() || t.template_key) as string}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            <div className="mt-3">
+              <label className="form-label">Recipients (Guardians)</label>
+              <div className="d-flex flex-wrap gap-2">
+                {recipients.map((em) => (
+                  <span key={em} className="badge bg-light text-dark border">
+                    {em}{' '}
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-link p-0 ms-1"
+                      onClick={() => removeRecipient(em)}
+                      aria-label={`Remove ${em}`}
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <hr />
+            <div className="row g-3">
+              <div className="col-md-8">
+                <label className="form-label" htmlFor="subject">
+                  Email Subject
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="subject"
+                  name="subject"
+                  required
+                  value={subject}
+                  onChange={(ev) => setSubject(ev.target.value)}
+                />
+              </div>
+              <div className="col-md-4 d-flex align-items-end">
+                <button
+                  type="button"
+                  className="btn btn-outline-secondary ms-auto"
+                  disabled={busy}
+                  onClick={() => void refreshPreview()}
+                >
+                  Refresh Preview
+                </button>
+              </div>
+              <div className="col-12">
+                <label className="form-label" htmlFor="body">
+                  Email Body (editable)
+                </label>
+                <textarea
+                  className="form-control"
+                  id="body"
+                  name="body"
+                  rows={10}
+                  required
+                  value={body}
+                  onChange={(ev) => setBody(ev.target.value)}
+                />
+              </div>
+            </div>
+
+            {sendMsg ? (
+              <div
+                className={`alert mt-3 py-2 ${sendMsg.includes('fail') ? 'alert-danger' : 'alert-success'}`}
+              >
+                {sendMsg}
+              </div>
+            ) : null}
+
+            <div className="mt-3 d-flex gap-2">
+              <button type="submit" className="btn btn-primary" disabled={busy}>
+                Send
+              </button>
+              <button
+                type="button"
+                className="btn btn-outline-primary"
+                data-bs-toggle="modal"
+                data-bs-target="#communicationsPreviewModal"
+              >
+                Preview
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="modal fade" id="communicationsPreviewModal" tabIndex={-1}>
+        <div className="modal-dialog modal-lg modal-dialog-scrollable">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Email Preview</h5>
+              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+            </div>
+            <div className="modal-body">
+              <h6 className="mb-3">{subject}</h6>
+              <div dangerouslySetInnerHTML={previewSafe} />
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/competitionWinners/CompetitionWinnerFormPage.tsx

@@ -0,0 +1,87 @@
+import { useParams } from 'react-router-dom'
+import { ApiScopeNote, CompetitionPageShell } from './competitionWinnersShared'
+
+/** CI `admin/competition_winners/form.php` — layout parity; persist requires admin competition APIs. */
+export function CompetitionWinnerFormPage() {
+  const { id } = useParams()
+  const isEdit = Boolean(id)
+
+  return (
+    <CompetitionPageShell title={isEdit ? 'Edit Competition' : 'Create Competition'}>
+      <ApiScopeNote>
+        Saving competitions and per-class prize grids requires POST endpoints that mirror CI (
+        <code>store</code>, <code>update</code>). Connect the API to enable the fields below.
+      </ApiScopeNote>
+
+      <div className="card shadow-sm">
+        <div className="card-body row g-3">
+          <div className="col-md-8">
+            <label className="form-label">Title *</label>
+            <input className="form-control" disabled placeholder="Competition title" />
+          </div>
+          <div className="col-md-6">
+            <label className="form-label">Class Section (optional)</label>
+            <select className="form-select" disabled>
+              <option value="">All classes</option>
+            </select>
+            <div className="form-text">Leave empty to manage winners for all classes.</div>
+          </div>
+          <div className="col-md-3">
+            <label className="form-label">Semester</label>
+            <input className="form-control" disabled />
+          </div>
+          <div className="col-md-3">
+            <label className="form-label">School Year</label>
+            <input className="form-control" disabled placeholder="2025-2026" />
+            <div className="form-text">Counts use the school year above.</div>
+          </div>
+          <div className="col-md-4">
+            <label className="form-label">Start Date</label>
+            <input className="form-control" type="date" disabled />
+          </div>
+          <div className="col-md-4">
+            <label className="form-label">End Date</label>
+            <input className="form-control" type="date" disabled />
+          </div>
+
+          <div className="col-12">
+            <h5 className="mt-2">Winners per Class</h5>
+            <div className="table-responsive">
+              <table className="table table-bordered table-sm" data-no-mgmt-sticky>
+                <thead className="table-light">
+                  <tr>
+                    <th>Class</th>
+                    <th style={{ width: 140 }}>Students</th>
+                    <th style={{ width: 140 }}>Auto Winners</th>
+                    <th style={{ width: 150 }}>Questions</th>
+                    <th style={{ width: 120 }}>1st</th>
+                    <th style={{ width: 120 }}>2nd</th>
+                    <th style={{ width: 120 }}>3rd</th>
+                    <th style={{ width: 120 }}>4th</th>
+                    <th style={{ width: 120 }}>5th</th>
+                    <th style={{ width: 120 }}>6th</th>
+                    <th style={{ width: 160 }}>Override</th>
+                    <th style={{ width: 140 }}>Final Winners</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td colSpan={12} className="text-muted small">
+                      Class rows load from the backend when competition settings APIs are available.
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="col-12">
+            <button type="button" className="btn btn-primary" disabled>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </CompetitionPageShell>
+  )
+}

src/pages/competitionWinners/CompetitionWinnerPreviewPage.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { fetchPublishedCompetition } from '../../api/session'
+import type { PublicCompetitionRow, PublicCompetitionWinnerRow } from '../../api/types'
+import { ApiScopeNote, CompetitionPageShell, competitionLabel } from './competitionWinnersShared'
+
+function usePublishedCompetition(id: number) {
+  const [competition, setCompetition] = useState<PublicCompetitionRow | null>(null)
+  const [winnersByClass, setWinnersByClass] = useState<Record<string, PublicCompetitionWinnerRow[]>>({})
+  const [sectionMap, setSectionMap] = useState<Record<string, string>>({})
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!Number.isFinite(id) || id <= 0) return
+    ;(async () => {
+      try {
+        const response = await fetchPublishedCompetition(id)
+        if (!response.status || !response.data) {
+          setError(response.message ?? 'Competition not found.')
+          return
+        }
+        setCompetition(response.data.competition)
+        setWinnersByClass(response.data.winners_by_class ?? {})
+        setSectionMap(response.data.section_map ?? {})
+        setError(null)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load winners.')
+      }
+    })()
+  }, [id])
+
+  return { competition, winnersByClass, sectionMap, error }
+}
+
+/** CI `admin/competition_winners/preview.php` */
+export function CompetitionWinnerPreviewPage() {
+  const { id } = useParams()
+  const competitionId = Number(id)
+  const { competition, winnersByClass, sectionMap, error } = usePublishedCompetition(competitionId)
+
+  return (
+    <CompetitionPageShell title="Preview Winners">
+      <ApiScopeNote>
+        Preview reflects published winners from the public API. Unpublished drafts are not shown until the backend exposes an
+        admin preview.
+      </ApiScopeNote>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {competition ? (
+        <>
+          <div className="mb-3">
+            <div>
+              <strong>Competition:</strong> {competitionLabel(competition)}
+            </div>
+            <div>
+              <strong>School Year:</strong> {competition.school_year ?? '—'}
+            </div>
+          </div>
+          {Object.keys(winnersByClass).length === 0 ? (
+            <div className="alert alert-warning">No published winners found for this competition.</div>
+          ) : (
+            Object.entries(winnersByClass).map(([classId, rows]) => (
+              <div key={classId} className="mb-4">
+                <h5 className="mt-4">Top Winners - {sectionMap[classId] ?? `Class ${classId}`}</h5>
+                <table className="table table-bordered table-sm">
+                  <thead className="table-light">
+                    <tr>
+                      <th>Rank</th>
+                      <th>Student</th>
+                      <th>Score</th>
+                      <th>Prize</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows.map((row, index) => (
+                      <tr key={`${classId}-${index}`}>
+                        <td>{row.rank ?? index + 1}</td>
+                        <td>
+                          {row.name ??
+                            (`${row.firstname ?? ''} ${row.lastname ?? ''}`.trim() ||
+                              `Student #${row.student_id ?? ''}`)}
+                        </td>
+                        <td>{row.score ?? '—'}</td>
+                        <td>{row.prize_amount ?? '—'}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ))
+          )}
+        </>
+      ) : null}
+    </CompetitionPageShell>
+  )
+}

src/pages/competitionWinners/CompetitionWinnerScoresPage.tsx

@@ -0,0 +1,156 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link, useParams, useSearchParams } from 'react-router-dom'
+import {
+  fetchCompetitionScoresDetail,
+  saveCompetitionScores,
+} from '../../api/session'
+import type { CompetitionScoresEditResponse, CompetitionScoreStudentRow } from '../../api/types'
+import {
+  ApiScopeNote,
+  CompetitionPageShell,
+  COMPETITION_WINNERS_BASE,
+  competitionLabel,
+} from './competitionWinnersShared'
+
+/** CI `admin/competition_winners/scores.php` — enter scores (teacher competition API). */
+export function CompetitionWinnerScoresPage() {
+  const { id } = useParams()
+  const competitionId = Number(id)
+  const [searchParams, setSearchParams] = useSearchParams()
+  const selectedClassId = Number(searchParams.get('class_section_id') ?? 0) || null
+  const [data, setData] = useState<CompetitionScoresEditResponse | null>(null)
+  const [scores, setScores] = useState<Record<string, number | string>>({})
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(classSectionId = selectedClassId) {
+    try {
+      const response = await fetchCompetitionScoresDetail(competitionId, classSectionId)
+      setData(response)
+      setScores(response.scoreMap ?? {})
+      setError(response.ok ? null : response.message ?? 'Unable to load competition scores.')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load competition scores.')
+    }
+  }
+
+  useEffect(() => {
+    if (!Number.isFinite(competitionId) || competitionId <= 0) return
+    void load()
+  }, [competitionId, selectedClassId])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (!competitionId) return
+    try {
+      const result = await saveCompetitionScores(competitionId, {
+        class_section_id: data?.classSectionId ?? selectedClassId,
+        scores,
+      })
+      setMessage(result.message ?? 'Scores saved.')
+      if (result.ok) {
+        await load()
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to save scores.')
+    }
+  }
+
+  return (
+    <CompetitionPageShell title="Enter Scores">
+      <ApiScopeNote>
+        Uses the teacher-facing competition-scores API; your account must be assigned to the class section being scored.
+      </ApiScopeNote>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {data?.competition ? (
+        <>
+          <div className="mb-3">
+            <div>
+              <strong>Competition:</strong> {competitionLabel(data.competition)}
+            </div>
+            <div>
+              <strong>Class Section:</strong> {data.classSectionName ?? '—'}
+            </div>
+            <div>
+              <strong>Students:</strong> {data.classStudentCount ?? 0} | <strong>Questions:</strong>{' '}
+              {data.questionCount ?? '—'}
+            </div>
+          </div>
+          <form onSubmit={(e) => void onSubmit(e)}>
+            {data.classSelectionLocked === false ? (
+              <div className="mb-3" style={{ maxWidth: 360 }}>
+                <label className="form-label">Class Section ID</label>
+                <input
+                  className="form-control"
+                  value={String(selectedClassId ?? data.classSectionId ?? '')}
+                  onChange={(e) => setSearchParams(e.target.value ? { class_section_id: e.target.value } : {})}
+                />
+              </div>
+            ) : null}
+            <div className="table-responsive">
+              <table className="table table-bordered table-sm align-middle">
+                <thead className="table-light">
+                  <tr>
+                    <th>School ID</th>
+                    <th>Student</th>
+                    <th>Score{data.questionCount ? ` (max ${data.questionCount})` : ''}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(data.students ?? []).length === 0 ? (
+                    <tr>
+                      <td colSpan={3} className="text-muted">
+                        No students loaded for this competition.
+                      </td>
+                    </tr>
+                  ) : (
+                    (data.students ?? []).map((student: CompetitionScoreStudentRow) => {
+                      const studentId = Number(student.id ?? student.student_id ?? 0)
+                      const name =
+                        `${student.firstname ?? ''} ${student.lastname ?? ''}`.trim() ||
+                        `Student #${studentId}`
+                      return (
+                        <tr key={studentId}>
+                          <td>{student.school_id ?? studentId}</td>
+                          <td>{name}</td>
+                          <td>
+                            <input
+                              className="form-control form-control-sm"
+                              type="number"
+                              step="1"
+                              min="0"
+                              max={data.questionCount ?? undefined}
+                              disabled={Boolean(data.isLocked)}
+                              value={String(scores[String(studentId)] ?? '')}
+                              onChange={(e) =>
+                                setScores((current) => ({
+                                  ...current,
+                                  [String(studentId)]: e.target.value,
+                                }))
+                              }
+                            />
+                          </td>
+                        </tr>
+                      )
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="d-flex gap-2 mt-3">
+              <button className="btn btn-primary" disabled={Boolean(data.isLocked)}>
+                Save Scores
+              </button>
+              <Link className="btn btn-outline-secondary" to={`${COMPETITION_WINNERS_BASE}/${competitionId}/preview`}>
+                Preview
+              </Link>
+            </div>
+          </form>
+        </>
+      ) : (
+        <p className="text-muted mb-0">No competition data loaded.</p>
+      )}
+    </CompetitionPageShell>
+  )
+}

src/pages/competitionWinners/CompetitionWinnerWinnersPage.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { fetchPublishedCompetition } from '../../api/session'
+import type { PublicCompetitionRow, PublicCompetitionWinnerRow } from '../../api/types'
+import { ApiScopeNote, CompetitionPageShell, competitionLabel } from './competitionWinnersShared'
+
+function usePublishedCompetitionFull(id: number) {
+  const [competition, setCompetition] = useState<PublicCompetitionRow | null>(null)
+  const [winnersByClass, setWinnersByClass] = useState<Record<string, PublicCompetitionWinnerRow[]>>({})
+  const [sectionMap, setSectionMap] = useState<Record<string, string>>({})
+  const [questionCounts, setQuestionCounts] = useState<Record<string, number>>({})
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!Number.isFinite(id) || id <= 0) return
+    ;(async () => {
+      try {
+        const response = await fetchPublishedCompetition(id)
+        if (!response.status || !response.data) {
+          setError(response.message ?? 'Competition not found.')
+          return
+        }
+        setCompetition(response.data.competition)
+        setWinnersByClass(response.data.winners_by_class ?? {})
+        setSectionMap(response.data.section_map ?? {})
+        setQuestionCounts(response.data.question_counts ?? {})
+        setError(null)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load winners.')
+      }
+    })()
+  }, [id])
+
+  return { competition, winnersByClass, sectionMap, questionCounts, error }
+}
+
+/** CI `admin/competition_winners/winners.php` */
+export function CompetitionWinnerWinnersPage() {
+  const { id } = useParams()
+  const competitionId = Number(id)
+  const { competition, winnersByClass, sectionMap, questionCounts, error } =
+    usePublishedCompetitionFull(competitionId)
+
+  const flatRows = useMemo(
+    () =>
+      Object.entries(winnersByClass).flatMap(([classId, rows]) =>
+        rows.map((row) => ({ ...row, _classId: classId })),
+      ),
+    [winnersByClass],
+  )
+
+  const totalPrize = flatRows.reduce((sum, row) => sum + Number(row.prize_amount ?? 0), 0)
+
+  return (
+    <CompetitionPageShell title="School Winners">
+      <ApiScopeNote>
+        Prize totals and rankings come from the published winners API. Export to recognition PDF requires an admin endpoint if
+        not yet in Laravel.
+      </ApiScopeNote>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {competition ? (
+        <>
+          <div className="mb-3">
+            <div>
+              <strong>Competition:</strong> {competitionLabel(competition)}
+            </div>
+            <div>
+              <strong>School Year:</strong> {competition.school_year ?? '—'}
+            </div>
+            <div>
+              <strong>Published:</strong> {competition.is_published ? 'Yes' : 'No'}
+            </div>
+          </div>
+          {flatRows.length === 0 ? (
+            <div className="alert alert-warning">No published winners yet.</div>
+          ) : (
+            <div className="table-responsive">
+              <table className="table table-bordered table-sm">
+                <thead className="table-light">
+                  <tr>
+                    <th>Class</th>
+                    <th>Student</th>
+                    <th>Rank</th>
+                    <th>Score</th>
+                    <th>Question Count</th>
+                    <th>Prize</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {flatRows.map((row, index) => (
+                    <tr key={`${row._classId}-${index}`}>
+                      <td>{sectionMap[String(row._classId)] ?? `Class ${row._classId}`}</td>
+                      <td>
+                        {row.name ??
+                          (`${row.firstname ?? ''} ${row.lastname ?? ''}`.trim() ||
+                            `Student #${row.student_id ?? ''}`)}
+                      </td>
+                      <td>{row.rank ?? '—'}</td>
+                      <td>{row.score ?? '—'}</td>
+                      <td>{questionCounts[String(row._classId)] ?? '—'}</td>
+                      <td>{row.prize_amount ?? '—'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+                <tfoot>
+                  <tr>
+                    <th colSpan={5} className="text-end">
+                      Total Prizes
+                    </th>
+                    <th>{totalPrize.toFixed(2)}</th>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </>
+      ) : null}
+    </CompetitionPageShell>
+  )
+}

src/pages/competitionWinners/CompetitionWinnersIndexPage.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { fetchCompetitionScoresIndex, fetchPublishedCompetitions } from '../../api/session'
+import type { CompetitionScoresIndexCompetitionRow, PublicCompetitionRow } from '../../api/types'
+import { ApiScopeNote, CompetitionPageShell, COMPETITION_WINNERS_BASE } from './competitionWinnersShared'
+
+/** CI `admin/competition_winners/index.php` */
+export function CompetitionWinnersIndexPage() {
+  const [publishedRows, setPublishedRows] = useState<PublicCompetitionRow[]>([])
+  const [adminRows, setAdminRows] = useState<CompetitionScoresIndexCompetitionRow[]>([])
+  const [sectionMap, setSectionMap] = useState<Record<string, string>>({})
+  const [activeClassName, setActiveClassName] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const [published, teacher] = await Promise.allSettled([
+          fetchPublishedCompetitions(),
+          fetchCompetitionScoresIndex(),
+        ])
+
+        if (published.status === 'fulfilled') {
+          setPublishedRows(published.value.data?.competitions ?? [])
+        }
+
+        if (teacher.status === 'fulfilled') {
+          setAdminRows(teacher.value.competitions ?? [])
+          setSectionMap(teacher.value.sectionMap ?? {})
+          setActiveClassName(teacher.value.activeClassName ?? null)
+        }
+
+        if (published.status === 'rejected' && teacher.status === 'rejected') {
+          setError('Unable to load competition winners data.')
+        }
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load competition winners data.')
+      }
+    })()
+  }, [])
+
+  const tableRows = useMemo(() => {
+    if (adminRows.length > 0) return adminRows
+    return publishedRows.map((r) => ({
+      id: r.id,
+      title: r.title,
+      class_section_id: r.class_section_id,
+      is_locked: r.is_locked,
+      is_published: r.is_published,
+    })) as CompetitionScoresIndexCompetitionRow[]
+  }, [adminRows, publishedRows])
+
+  return (
+    <CompetitionPageShell title="Competition Winners">
+      <ApiScopeNote>
+        Lock/unlock, export quiz, and competition CRUD match CI once Laravel exposes those admin routes. Score entry and
+        published winners work with the current API.
+      </ApiScopeNote>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <div />
+        <Link className="btn btn-primary" to={`${COMPETITION_WINNERS_BASE}/create`}>
+          + New Competition
+        </Link>
+      </div>
+
+      <div className="table-responsive">
+        <table className="table table-bordered table-sm align-middle mb-0" data-no-mgmt-sticky>
+          <thead className="table-light">
+            <tr>
+              <th>ID</th>
+              <th>Title</th>
+              <th>Class Section</th>
+              <th>Winners Rule</th>
+              <th>Published</th>
+              <th>Locked</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tableRows.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="text-muted">
+                  No competitions found.
+                </td>
+              </tr>
+            ) : (
+              tableRows.map((c) => {
+                const sectionId = Number(c.class_section_id ?? 0)
+                const sectionName =
+                  sectionId > 0 ? (sectionMap[String(sectionId)] ?? String(sectionId)) : 'All'
+                const isLocked = Boolean(c.is_locked)
+                const isPublished = Boolean(c.is_published)
+                const id = Number(c.id)
+                return (
+                  <tr key={id}>
+                    <td>{id}</td>
+                    <td>{String(c.title ?? `Competition #${id}`)}</td>
+                    <td>{sectionName}</td>
+                    <td>Tiered per class</td>
+                    <td>{isPublished ? 'Yes' : 'No'}</td>
+                    <td>{isLocked ? 'Yes' : 'No'}</td>
+                    <td>
+                      <div className="d-flex flex-wrap gap-1">
+                        <Link
+                          className="btn btn-sm btn-outline-secondary"
+                          to={`${COMPETITION_WINNERS_BASE}/${id}/settings`}
+                        >
+                          Settings
+                        </Link>
+                        <Link className="btn btn-sm btn-outline-primary" to={`${COMPETITION_WINNERS_BASE}/${id}`}>
+                          Enter Scores
+                        </Link>
+                        <Link
+                          className="btn btn-sm btn-outline-secondary"
+                          to={`${COMPETITION_WINNERS_BASE}/${id}/preview`}
+                        >
+                          Preview
+                        </Link>
+                        <Link
+                          className="btn btn-sm btn-outline-secondary"
+                          to={`${COMPETITION_WINNERS_BASE}/${id}/winners`}
+                        >
+                          Winners
+                        </Link>
+                        <button type="button" className="btn btn-sm btn-outline-success" disabled title="Requires API">
+                          Export Scores to Quiz
+                        </button>
+                        {isLocked ? (
+                          <button type="button" className="btn btn-sm btn-outline-warning" disabled title="Requires API">
+                            Unlock
+                          </button>
+                        ) : (
+                          <button type="button" className="btn btn-sm btn-outline-danger" disabled title="Requires API">
+                            Lock
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {activeClassName ? (
+        <p className="text-muted small mt-3 mb-0">Active class context: {activeClassName}</p>
+      ) : null}
+    </CompetitionPageShell>
+  )
+}

src/pages/competitionWinners/competitionWinnersShared.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+/** Canonical SPA base for competition winners admin (JWT `GET /api/v1/competition-scores`, etc.). */
+export const COMPETITION_WINNERS_BASE = '/app/competition-winners'
+
+export function CompetitionPageShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="container-fluid py-3">
+      <div className="mb-4">
+        <h2 className="h4 mb-1">{title}</h2>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export function formatCompetitionDate(value?: string | null) {
+  if (!value) return '—'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString()
+}
+
+export function competitionLabel(row?: { title?: string | null; id?: number | null } | null) {
+  return row?.title ?? `Competition #${row?.id ?? ''}`
+}
+
+/** Soft notice when admin CRUD APIs are not wired (CI `competition_winners/index.php` expects full admin actions). */
+export function ApiScopeNote({ children }: { children: ReactNode }) {
+  return <div className="alert alert-info border-0 bg-light">{children}</div>
+}

src/pages/configuration/ConfigurationViewPage.tsx

@@ -0,0 +1,268 @@
+import { useEffect, useState } from 'react'
+import { ApiHttpError } from '../../api/http'
+import {
+  createConfigurationEntry,
+  deleteConfigurationEntry,
+  fetchConfigurations,
+  updateConfigurationEntry,
+} from '../../api/session'
+import type { ConfigurationRow } from '../../api/types'
+
+export function ConfigurationViewPage() {
+  const [rows, setRows] = useState<ConfigurationRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [flash, setFlash] = useState<string | null>(null)
+
+  const [showAdd, setShowAdd] = useState(false)
+  const [newKey, setNewKey] = useState('')
+  const [newVal, setNewVal] = useState('')
+
+  const [editOpen, setEditOpen] = useState(false)
+  const [editRow, setEditRow] = useState<ConfigurationRow | null>(null)
+  const [editKey, setEditKey] = useState('')
+  const [editVal, setEditVal] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  async function reload() {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchConfigurations()
+      setRows(data.configs ?? [])
+    } catch (e: unknown) {
+      setError(e instanceof ApiHttpError ? e.message : 'Failed to load configuration.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void reload()
+  }, [])
+
+  async function onAdd(e: React.FormEvent) {
+    e.preventDefault()
+    if (!newKey.trim() || !newVal.trim()) return
+    setBusy(true)
+    setFlash(null)
+    try {
+      await createConfigurationEntry({ config_key: newKey.trim(), config_value: newVal.trim() })
+      setFlash('Saved.')
+      setNewKey('')
+      setNewVal('')
+      setShowAdd(false)
+      await reload()
+    } catch (err: unknown) {
+      setFlash(err instanceof ApiHttpError ? err.message : 'Save failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function openEdit(row: ConfigurationRow) {
+    setEditRow(row)
+    setEditKey(row.config_key)
+    setEditVal(row.config_value)
+    setEditOpen(true)
+  }
+
+  async function onEditSave(e: React.FormEvent) {
+    e.preventDefault()
+    if (!editRow) return
+    setBusy(true)
+    setFlash(null)
+    try {
+      await updateConfigurationEntry(editRow.id, {
+        config_key: editKey.trim(),
+        config_value: editVal.trim(),
+      })
+      setFlash('Updated.')
+      setEditOpen(false)
+      setEditRow(null)
+      await reload()
+    } catch (err: unknown) {
+      setFlash(err instanceof ApiHttpError ? err.message : 'Update failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function onDelete(id: number | string) {
+    if (!window.confirm('Are you sure you want to delete this config?')) return
+    setBusy(true)
+    setFlash(null)
+    try {
+      await deleteConfigurationEntry(id)
+      setFlash('Deleted.')
+      await reload()
+    } catch (err: unknown) {
+      setFlash(err instanceof ApiHttpError ? err.message : 'Delete failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container-fluid py-3">
+      <div className="text-center mb-4">
+        <h2 className="mt-4 mb-3">Configuration Management</h2>
+      </div>
+
+      {flash ? (
+        <div className={`alert ${flash.includes('fail') ? 'alert-danger' : 'alert-success'}`}>{flash}</div>
+      ) : null}
+
+      {loading ? (
+        <p className="text-muted text-center">Loading configurations…</p>
+      ) : error ? (
+        <div className="alert alert-danger">{error}</div>
+      ) : null}
+
+      {showAdd ? (
+        <form onSubmit={onAdd} className="mb-4 border rounded p-3 bg-light">
+          <div className="row">
+            <div className="col-md-4 mb-3">
+              <label className="form-label" htmlFor="new_config_key">
+                Config Key
+              </label>
+              <input
+                id="new_config_key"
+                className="form-control"
+                value={newKey}
+                onChange={(ev) => setNewKey(ev.target.value)}
+                required
+              />
+            </div>
+            <div className="col-md-4 mb-3">
+              <label className="form-label" htmlFor="new_config_value">
+                Config Value
+              </label>
+              <input
+                id="new_config_value"
+                className="form-control"
+                value={newVal}
+                onChange={(ev) => setNewVal(ev.target.value)}
+                required
+              />
+            </div>
+          </div>
+          <div className="d-flex gap-2">
+            <button type="submit" className="btn btn-primary" disabled={busy}>
+              Save
+            </button>
+            <button type="button" className="btn btn-secondary" onClick={() => setShowAdd(false)}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      ) : null}
+
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Config Key</th>
+              <th>Config Value</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {!loading && rows.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="text-center text-muted">
+                  No configurations found.
+                </td>
+              </tr>
+            ) : (
+              rows.map((row) => (
+                <tr key={String(row.id)}>
+                  <td>{String(row.id)}</td>
+                  <td>{row.config_key}</td>
+                  <td>{row.config_value}</td>
+                  <td className="d-flex gap-1 flex-wrap">
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-warning"
+                      onClick={() => openEdit(row)}
+                      disabled={busy}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-danger"
+                      onClick={() => void onDelete(row.id)}
+                      disabled={busy}
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mb-4">
+        <button type="button" className="btn btn-success" onClick={() => setShowAdd((v) => !v)}>
+          {showAdd ? 'Hide form' : 'Add New Config'}
+        </button>
+      </div>
+
+      {editOpen ? (
+        <div className="modal fade show d-block" tabIndex={-1} style={{ background: 'rgba(0,0,0,0.4)' }}>
+          <div className="modal-dialog">
+            <form className="modal-content" onSubmit={onEditSave}>
+              <div className="modal-header">
+                <h5 className="modal-title">Edit Configuration</h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  aria-label="Close"
+                  onClick={() => setEditOpen(false)}
+                />
+              </div>
+              <div className="modal-body">
+                <div className="mb-3">
+                  <label className="form-label" htmlFor="modal_config_key">
+                    Config Key
+                  </label>
+                  <input
+                    id="modal_config_key"
+                    className="form-control"
+                    value={editKey}
+                    onChange={(ev) => setEditKey(ev.target.value)}
+                    required
+                  />
+                </div>
+                <div className="mb-3">
+                  <label className="form-label" htmlFor="modal_config_value">
+                    Config Value
+                  </label>
+                  <input
+                    id="modal_config_value"
+                    className="form-control"
+                    value={editVal}
+                    onChange={(ev) => setEditVal(ev.target.value)}
+                    required
+                  />
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setEditOpen(false)}>
+                  Cancel
+                </button>
+                <button type="submit" className="btn btn-primary" disabled={busy}>
+                  Save changes
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/pages/discounts/AcademicFilterBar.tsx

@@ -0,0 +1,87 @@
+import { type FormEvent } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+
+function defaultSchoolYear() {
+  const y = new Date().getFullYear()
+  return `${y}-${y + 1}`
+}
+
+export function AcademicFilterBar({ schoolYears }: { schoolYears?: string[] }) {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  const years =
+    schoolYears && schoolYears.length > 0
+      ? schoolYears
+      : (() => {
+          const out: string[] = []
+          for (let y = new Date().getFullYear(); y >= 2020; y--) out.push(`${y}-${y + 1}`)
+          return out
+        })()
+
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const next = new URLSearchParams()
+    const sy = String(fd.get('school_year') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    if (sy) next.set('school_year', sy)
+    if (sem) next.set('semester', sem)
+    navigate({ pathname, search: next.toString() ? `?${next}` : '' })
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="row g-2 align-items-center justify-content-center mb-3"
+    >
+      <div className="col-auto">
+        <label className="form-label mb-0">School year</label>
+      </div>
+      <div className="col-auto">
+        <select
+          name="school_year"
+          className="form-select form-select-sm"
+          style={{ minWidth: 180 }}
+          defaultValue={schoolYear || years[0] || defaultSchoolYear()}
+        >
+          {years.map((y) => (
+            <option key={y} value={y}>
+              {y}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="col-auto">
+        <label className="form-label mb-0">Semester</label>
+      </div>
+      <div className="col-auto">
+        <select
+          name="semester"
+          className="form-select form-select-sm"
+          style={{ minWidth: 140 }}
+          defaultValue={semester}
+        >
+          <option value="">—</option>
+          <option value="Fall">Fall</option>
+          <option value="Spring">Spring</option>
+        </select>
+      </div>
+      <div className="col-auto">
+        <button type="submit" className="btn btn-secondary btn-sm">
+          Apply
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm ms-1"
+          onClick={() => navigate({ pathname, search: '' })}
+        >
+          Reset
+        </button>
+      </div>
+    </form>
+  )
+}

src/pages/discounts/DiscountApplyVoucherPage.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { applyDiscountVoucher, fetchDiscountApplyContext } from '../../api/session'
+import type { DiscountApplyParentRow, DiscountVoucherRow } from '../../api/types'
+import { AcademicFilterBar } from './AcademicFilterBar'
+
+export function DiscountApplyVoucherPage() {
+  const [searchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? undefined
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [vouchers, setVouchers] = useState<DiscountVoucherRow[]>([])
+  const [voucherId, setVoucherId] = useState('')
+  const [allowAdditional, setAllowAdditional] = useState(true)
+  const [parents, setParents] = useState<DiscountApplyParentRow[]>([])
+  const [selected, setSelected] = useState<Record<string, boolean>>({})
+  const [checkAll, setCheckAll] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchDiscountApplyContext({ school_year: schoolYear, semester })
+      .then((d) => {
+        if (cancelled) return
+        setParents(d.parents ?? [])
+        setVouchers(d.vouchers ?? [])
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load parents or vouchers.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  const selectableParents = useMemo(
+    () =>
+      parents.filter((p) => {
+        if (!p.has_discount) return true
+        return allowAdditional
+      }),
+    [parents, allowAdditional],
+  )
+
+  function toggleParent(id: string, enabled: boolean) {
+    if (!enabled) return
+    setSelected((s) => ({ ...s, [id]: !s[id] }))
+  }
+
+  function onCheckAll(checked: boolean) {
+    setCheckAll(checked)
+    const next: Record<string, boolean> = {}
+    if (checked) {
+      for (const p of selectableParents) {
+        next[String(p.id)] = true
+      }
+    }
+    setSelected(next)
+  }
+
+  useEffect(() => {
+    setSelected({})
+    setCheckAll(false)
+  }, [allowAdditional, parents])
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!voucherId) return
+    const ids = Object.entries(selected)
+      .filter(([, on]) => on)
+      .map(([id]) => id)
+    if (ids.length === 0) {
+      setMsg('Select at least one parent.')
+      return
+    }
+    setBusy(true)
+    setMsg(null)
+    try {
+      await applyDiscountVoucher({
+        voucher_id: voucherId,
+        parent_ids: ids,
+        allow_additional: allowAdditional,
+        school_year: schoolYear,
+        semester,
+      })
+      setMsg('Voucher applied.')
+    } catch (err: unknown) {
+      setMsg(err instanceof ApiHttpError ? err.message : 'Apply failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1>Apply Discount Voucher</h1>
+      <AcademicFilterBar />
+
+      {loading ? <p className="text-muted">Loading…</p> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {msg ? (
+        <div className={`alert ${msg.includes('fail') || msg.includes('Select') ? 'alert-warning' : 'alert-success'}`}>
+          {msg}
+        </div>
+      ) : null}
+
+      <form onSubmit={onSubmit}>
+        <div className="d-flex gap-2 mb-3 justify-content-end">
+          <button type="submit" className="btn btn-success" disabled={busy || loading}>
+            Apply Voucher
+          </button>
+          <Link to="/app/administrator/discounts" className="btn btn-info">
+            Cancel
+          </Link>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="voucher_id">
+            Select Voucher Code
+          </label>
+          <select
+            name="voucher_id"
+            id="voucher_id"
+            className="form-select"
+            required
+            value={voucherId}
+            onChange={(ev) => setVoucherId(ev.target.value)}
+          >
+            <option value="">-- Select Voucher --</option>
+            {vouchers.map((v) => (
+              <option key={String(v.id)} value={String(v.id)}>
+                {v.code} ({String(v.discount_type)} —{' '}
+                {v.discount_type === 'percent' ? `${v.discount_value}%` : `$${v.discount_value}`})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="form-check mb-3">
+          <input
+            className="form-check-input"
+            type="checkbox"
+            id="allowAdditional"
+            checked={allowAdditional}
+            onChange={(ev) => setAllowAdditional(ev.target.checked)}
+          />
+          <label className="form-check-label" htmlFor="allowAdditional">
+            Allow additional discounts for parents who already have discounts
+          </label>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label">Select Parents</label>
+          <div className="table-responsive">
+            <table className="table table-bordered">
+              <thead>
+                <tr>
+                  <th>
+                    <input
+                      type="checkbox"
+                      checked={checkAll}
+                      onChange={(ev) => onCheckAll(ev.target.checked)}
+                      aria-label="Select all"
+                    />
+                  </th>
+                  <th>Parent ID</th>
+                  <th>Parent Name</th>
+                  <th>Email</th>
+                  <th>Has Discount?</th>
+                  <th>Total Discount Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                {parents.map((parent) => {
+                  const id = String(parent.id)
+                  const hasDisc = Boolean(parent.has_discount)
+                  const enabled = !hasDisc || allowAdditional
+                  return (
+                    <tr key={id}>
+                      <td>
+                        <input
+                          type="checkbox"
+                          name={`parent_${id}`}
+                          className="form-check-input"
+                          checked={Boolean(selected[id])}
+                          disabled={!enabled}
+                          onChange={() => toggleParent(id, enabled)}
+                        />
+                      </td>
+                      <td>{parent.school_id ?? 'N/A'}</td>
+                      <td>
+                        {[parent.firstname, parent.lastname].filter(Boolean).join(' ') || '—'}
+                      </td>
+                      <td>{parent.email ?? '—'}</td>
+                      <td>{hasDisc ? 'Yes' : 'No'}</td>
+                      <td>${Number(parent.total_discount ?? 0).toFixed(2)}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}

src/pages/discounts/DiscountCreatePage.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { createDiscountVoucher } from '../../api/session'
+
+export function DiscountCreatePage() {
+  const navigate = useNavigate()
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const code = String(fd.get('code') ?? '').trim()
+    const description = String(fd.get('description') ?? '')
+    const discount_type = String(fd.get('discount_type') ?? 'percent')
+    const discount_value = Number(fd.get('discount_value'))
+    const max_uses_raw = String(fd.get('max_uses') ?? '').trim()
+    const valid_from = String(fd.get('valid_from') ?? '').trim()
+    const valid_until = String(fd.get('valid_until') ?? '').trim()
+    const is_active = fd.get('is_active') === 'on'
+
+    setBusy(true)
+    setError(null)
+    try {
+      await createDiscountVoucher({
+        code,
+        description,
+        discount_type,
+        discount_value,
+        max_uses: max_uses_raw === '' ? null : Number(max_uses_raw),
+        valid_from: valid_from || null,
+        valid_until: valid_until || null,
+        is_active,
+      })
+      navigate('/app/administrator/discounts')
+    } catch (err: unknown) {
+      setError(err instanceof ApiHttpError ? err.message : 'Could not save voucher.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function autoGenerateCode() {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+    let code = ''
+    for (let i = 0; i < 10; i++) code += chars.charAt(Math.floor(Math.random() * chars.length))
+    const input = document.getElementById('discount_code_input') as HTMLInputElement | null
+    if (input) input.value = code
+    const desc = document.getElementById('discount_description') as HTMLTextAreaElement | null
+    if (desc) {
+      desc.value = desc.value.replace(/^Auto-generated on \d{4}-\d{2}-\d{2}\s*[—-]\s*reason:\s*/i, '')
+    }
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1>Create Discount Voucher</h1>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <form method="post" onSubmit={onSubmit}>
+        <div className="mb-3">
+          <label className="form-label" htmlFor="discount_code_input">
+            Voucher Code
+          </label>
+          <div className="input-group">
+            <input
+              type="text"
+              name="code"
+              id="discount_code_input"
+              className="form-control"
+              placeholder="Enter or generate a code (e.g. WELCOME10)"
+              required
+            />
+            <button type="button" className="btn btn-outline-secondary" onClick={autoGenerateCode}>
+              Auto Generate
+            </button>
+          </div>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="discount_description">
+            Description / Reason
+          </label>
+          <textarea
+            name="description"
+            id="discount_description"
+            className="form-control"
+            rows={3}
+            placeholder="Reason for this voucher."
+          />
+          <div className="form-text">Visible to admins only; not shown to parents.</div>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="discount_type">
+            Discount Type
+          </label>
+          <select name="discount_type" id="discount_type" className="form-select" required>
+            <option value="percent">Percentage (%)</option>
+            <option value="fixed">Fixed Amount ($)</option>
+          </select>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="discount_value">
+            Discount Value
+          </label>
+          <input
+            type="number"
+            name="discount_value"
+            id="discount_value"
+            className="form-control"
+            step="0.01"
+            min="0"
+            placeholder="e.g. 10 for 10% or 50 for $50"
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="max_uses">
+            Maximum Uses
+          </label>
+          <input
+            type="number"
+            name="max_uses"
+            id="max_uses"
+            className="form-control"
+            placeholder="Leave empty for unlimited"
+          />
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="valid_from">
+            Valid From
+          </label>
+          <input type="date" name="valid_from" id="valid_from" className="form-control" />
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="valid_until">
+            Valid Until
+          </label>
+          <input type="date" name="valid_until" id="valid_until" className="form-control" />
+        </div>
+
+        <div className="form-check mb-3">
+          <input
+            type="checkbox"
+            name="is_active"
+            id="is_active"
+            className="form-check-input"
+            defaultChecked
+          />
+          <label className="form-check-label" htmlFor="is_active">
+            Active
+          </label>
+        </div>
+
+        <button type="submit" className="btn btn-success" disabled={busy}>
+          Save Voucher
+        </button>
+        <Link to="/app/administrator/discounts" className="btn btn-info ms-2">
+          Cancel
+        </Link>
+      </form>
+    </div>
+  )
+}

src/pages/discounts/DiscountListPage.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchDiscountsList } from '../../api/session'
+import type { DiscountVoucherRow } from '../../api/types'
+import { AcademicFilterBar } from './AcademicFilterBar'
+
+function formatValidityDate(value?: string | null) {
+  if (value == null || String(value).trim() === '') return 'N/A'
+  const s = String(value)
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s)
+  if (m) return `${m[2]}-${m[3]}-${m[1]}`
+  const d = new Date(s)
+  return Number.isNaN(d.getTime()) ? s : d.toLocaleDateString()
+}
+
+export function DiscountListPage() {
+  const [searchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? undefined
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [vouchers, setVouchers] = useState<DiscountVoucherRow[]>([])
+  const [schoolYears, setSchoolYears] = useState<string[] | undefined>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchDiscountsList({ school_year: schoolYear, semester })
+      .then((d) => {
+        if (cancelled) return
+        setVouchers(d.vouchers ?? [])
+        setSchoolYears(d.school_years)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load discounts.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  return (
+    <div className="container-fluid mt-4">
+      <h2 className="text-center mt-4 mb-3">Discounts</h2>
+      <AcademicFilterBar schoolYears={schoolYears} />
+
+      <div className="d-flex gap-2 mb-3 justify-content-end">
+        <Link to="/app/administrator/discounts/create" className="btn btn-primary">
+          Create New Voucher
+        </Link>
+        <Link to="/app/administrator/discounts/apply" className="btn btn-success">
+          Apply Voucher to Parents
+        </Link>
+        <Link to="/app/administrator/discounts/reverse" className="btn btn-outline-warning">
+          Reverse Discount
+        </Link>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading…</p>
+      ) : error ? (
+        <div className="alert alert-danger">{error}</div>
+      ) : null}
+
+      <div className="table-responsive">
+        <table className="table table-striped w-100">
+          <thead>
+            <tr>
+              <th>Code</th>
+              <th>Type</th>
+              <th>Value</th>
+              <th>Max Uses</th>
+              <th>Times Used</th>
+              <th>Validity</th>
+              <th>Status</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {vouchers.map((v) => (
+              <tr key={String(v.id)}>
+                <td>{v.code}</td>
+                <td>{String(v.discount_type).charAt(0).toUpperCase() + String(v.discount_type).slice(1)}</td>
+                <td>
+                  {v.discount_type === 'percent'
+                    ? `${v.discount_value}%`
+                    : `$${Number(v.discount_value).toFixed(2)}`}
+                </td>
+                <td>{v.max_uses != null && v.max_uses !== '' ? String(v.max_uses) : '∞'}</td>
+                <td>{v.times_used != null ? String(v.times_used) : '—'}</td>
+                <td>
+                  {formatValidityDate(v.valid_from)} → {formatValidityDate(v.valid_until)}
+                </td>
+                <td>
+                  <span className={`badge ${v.is_active ? 'bg-success' : 'bg-secondary'}`}>
+                    {v.is_active ? 'Active' : 'Inactive'}
+                  </span>
+                </td>
+                <td>
+                  <span className="text-muted small">Edit (API)</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

src/pages/discounts/ReverseDiscountPage.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchDiscountApplyContext, reverseDiscountApplication } from '../../api/session'
+import type { DiscountApplyParentRow, DiscountVoucherRow } from '../../api/types'
+import { AcademicFilterBar } from './AcademicFilterBar'
+
+/**
+ * Parity for a legacy `reverse_discount` admin view (not present in the CI tree we inspected).
+ * Uses the same parent/voucher context as “apply voucher”; backend should filter rows as needed.
+ */
+export function ReverseDiscountPage() {
+  const [searchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? undefined
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [vouchers, setVouchers] = useState<DiscountVoucherRow[]>([])
+  const [parents, setParents] = useState<DiscountApplyParentRow[]>([])
+  const [voucherId, setVoucherId] = useState('')
+  const [reason, setReason] = useState('')
+  const [selected, setSelected] = useState<Record<string, boolean>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchDiscountApplyContext({ school_year: schoolYear, semester })
+      .then((d) => {
+        if (cancelled) return
+        setVouchers(d.vouchers ?? [])
+        setParents(d.parents ?? [])
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load data.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  function toggle(id: string) {
+    setSelected((s) => ({ ...s, [id]: !s[id] }))
+  }
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const ids = Object.entries(selected)
+      .filter(([, on]) => on)
+      .map(([id]) => id)
+    if (ids.length === 0) {
+      setMsg('Select at least one parent.')
+      return
+    }
+    setBusy(true)
+    setMsg(null)
+    try {
+      await reverseDiscountApplication({
+        voucher_id: voucherId || undefined,
+        parent_ids: ids,
+        reason: reason.trim() || undefined,
+        school_year: schoolYear,
+        semester,
+      })
+      setMsg('Reverse request submitted.')
+    } catch (err: unknown) {
+      setMsg(err instanceof ApiHttpError ? err.message : 'Request failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1 className="h2">Reverse Discount</h1>
+      <p className="text-muted">
+        Remove or roll back a voucher application for selected parents. The API route is{' '}
+        <code>/api/v1/discounts/reverse</code>.
+      </p>
+
+      <AcademicFilterBar />
+
+      {loading ? <p className="text-muted">Loading…</p> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {msg ? (
+        <div
+          className={`alert ${msg.includes('fail') || msg.includes('Select') ? 'alert-warning' : 'alert-success'}`}
+        >
+          {msg}
+        </div>
+      ) : null}
+
+      <form onSubmit={onSubmit}>
+        <div className="mb-3">
+          <label className="form-label" htmlFor="reverse_voucher">
+            Voucher (optional filter)
+          </label>
+          <select
+            id="reverse_voucher"
+            className="form-select"
+            value={voucherId}
+            onChange={(ev) => setVoucherId(ev.target.value)}
+          >
+            <option value="">— Any / not specified —</option>
+            {vouchers.map((v) => (
+              <option key={String(v.id)} value={String(v.id)}>
+                {v.code}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="reverse_reason">
+            Reason (optional)
+          </label>
+          <textarea
+            id="reverse_reason"
+            className="form-control"
+            rows={2}
+            value={reason}
+            onChange={(ev) => setReason(ev.target.value)}
+          />
+        </div>
+
+        <div className="d-flex gap-2 mb-3 justify-content-end">
+          <button type="submit" className="btn btn-warning" disabled={busy || loading}>
+            Reverse discount
+          </button>
+          <Link to="/app/administrator/discounts" className="btn btn-outline-secondary">
+            Back to list
+          </Link>
+        </div>
+
+        <div className="table-responsive">
+          <table className="table table-bordered">
+            <thead>
+              <tr>
+                <th>Select</th>
+                <th>Parent ID</th>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Has discount?</th>
+              </tr>
+            </thead>
+            <tbody>
+              {parents.map((parent) => {
+                const id = String(parent.id)
+                return (
+                  <tr key={id}>
+                    <td>
+                      <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={Boolean(selected[id])}
+                        onChange={() => toggle(id)}
+                      />
+                    </td>
+                    <td>{parent.school_id ?? 'N/A'}</td>
+                    <td>{[parent.firstname, parent.lastname].filter(Boolean).join(' ') || '—'}</td>
+                    <td>{parent.email ?? '—'}</td>
+                    <td>{parent.has_discount ? 'Yes' : 'No'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </form>
+    </div>
+  )
+}

src/pages/emails/EmailPreviewLayout.css

@@ -0,0 +1,46 @@
+/* Mirrors CodeIgniter `layout/email_layout.php` — scoped for admin preview only */
+.email-preview-root {
+  font-family: Arial, sans-serif;
+  background-color: #f9f9f9;
+  padding: 40px 0;
+  margin: 0;
+  min-height: 100%;
+}
+
+.email-preview-root .email-preview-container {
+  background-color: #ffffff;
+  max-width: 600px;
+  margin: auto;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.email-preview-root .email-preview-nopicture {
+  text-align: center;
+  padding: 10px;
+}
+
+.email-preview-root .email-preview-logo {
+  max-height: 200px;
+  width: 150px;
+  height: 110px;
+  object-fit: contain;
+}
+
+.email-preview-root .email-preview-body {
+  padding: 10px;
+  color: #333333;
+}
+
+.email-preview-root .email-preview-footer {
+  text-align: center;
+  font-size: 14px;
+  color: #777777;
+  padding: 20px;
+  background-color: #f1f1f1;
+}
+
+.email-preview-root a {
+  color: #007bff;
+}

src/pages/emails/EmailPreviewLayout.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import './EmailPreviewLayout.css'
+
+const DEFAULT_SITE = 'https://alrahmaisgl.org'
+const LOGO_SRC = `${DEFAULT_SITE}/assets/images/alrahma_logo.png`
+
+export function EmailPreviewLayout({
+  children,
+}: {
+  /** Reserved for future Helmet / window title parity with CI `$subject` */
+  subject?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="email-preview-root">
+      <div className="email-preview-container">
+        <div className="email-preview-nopicture">
+          <img
+            src={LOGO_SRC}
+            alt=""
+            className="email-preview-logo"
+            width={150}
+            height={110}
+            decoding="async"
+          />
+        </div>
+        <div className="email-preview-body">{children}</div>
+        <div className="email-preview-footer">
+          <p>
+            Visit us:{' '}
+            <a href={DEFAULT_SITE} target="_blank" rel="noreferrer noopener">
+              {DEFAULT_SITE}
+            </a>
+          </p>
+          <p>
+            Contact:{' '}
+            <a href="mailto:alrahma.isgl@gmail.com">alrahma.isgl@gmail.com</a>
+          </p>
+          <p>Address: 5 Courthouse Lane, Chelmsford, MA 01824</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/emails/EmailTemplatePreviewPage.tsx

@@ -0,0 +1,34 @@
+import { Link, useParams } from 'react-router-dom'
+import { EmailPreviewLayout } from './EmailPreviewLayout'
+import { EMAIL_TEMPLATE_REGISTRY, isEmailTemplateSlug } from './emailTemplatesRegistry'
+
+export function EmailTemplatePreviewPage() {
+  const { templateId } = useParams<{ templateId: string }>()
+  const slug = templateId ?? ''
+
+  if (!isEmailTemplateSlug(slug)) {
+    return (
+      <div className="container py-4">
+        <div className="alert alert-warning">Unknown template: {slug}</div>
+        <Link to="/app/administrator/email-templates">Back to list</Link>
+      </div>
+    )
+  }
+
+  const entry = EMAIL_TEMPLATE_REGISTRY[slug]
+
+  return (
+    <div className="container-fluid py-3">
+      <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
+        <Link to="/app/administrator/email-templates" className="btn btn-sm btn-outline-secondary">
+          ← All templates
+        </Link>
+        <h2 className="h5 mb-0">{entry.title}</h2>
+      </div>
+      <p className="small text-muted mb-3">
+        CI: <code>{entry.ciView}</code>
+      </p>
+      <EmailPreviewLayout>{entry.render()}</EmailPreviewLayout>
+    </div>
+  )
+}

src/pages/emails/EmailTemplatesIndexPage.tsx

@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom'
+import { EMAIL_TEMPLATE_REGISTRY, type EmailTemplateSlug } from './emailTemplatesRegistry'
+
+const SLUGS = Object.keys(EMAIL_TEMPLATE_REGISTRY) as EmailTemplateSlug[]
+
+export function EmailTemplatesIndexPage() {
+  return (
+    <div className="container-fluid py-3">
+      <h2 className="h4 mb-3">Email templates (preview)</h2>
+      <p className="text-muted small mb-4">
+        React previews matching CodeIgniter <code>Views/emails/*.php</code>. Laravel should render the same HTML for
+        outgoing mail; this UI is for QA and copy review.
+      </p>
+      <div className="mb-3">
+        <Link to="/app/administrator/parent-email-extractor" className="btn btn-outline-primary btn-sm">
+          Parent email extractor tool
+        </Link>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-sm table-striped align-middle">
+          <thead>
+            <tr>
+              <th>Template</th>
+              <th>CI view</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {SLUGS.sort().map((slug) => {
+              const row = EMAIL_TEMPLATE_REGISTRY[slug]
+              return (
+                <tr key={slug}>
+                  <td>{row.title}</td>
+                  <td>
+                    <code className="small">{row.ciView}</code>
+                  </td>
+                  <td className="text-end">
+                    <Link className="btn btn-sm btn-outline-secondary" to={`/app/administrator/email-templates/${slug}`}>
+                      Preview
+                    </Link>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

src/pages/emails/ParentEmailExtractorPage.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useMemo, useState } from 'react'
+import { apiUrl } from '../../lib/apiOrigin'
+
+const EMAIL_RE = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi
+
+function normalizeEmail(e: string) {
+  return e.trim().toLowerCase()
+}
+
+function extractEmailsFromCSVText(text: string) {
+  const found = text.match(EMAIL_RE) || []
+  return Array.from(new Set(found.map(normalizeEmail)))
+}
+
+function extractEmailsFromTextarea(text: string) {
+  return Array.from(
+    new Set(
+      text
+        .split(/\n|,|;|\t/)
+        .map(normalizeEmail)
+        .filter((x) => x && x.includes('@')),
+    ),
+  )
+}
+
+function downloadCSV(filename: string, rows: string[]) {
+  const csvContent = 'data:text/csv;charset=utf-8,' + rows.map((r) => `"${r.replace(/"/g, '""')}"`).join('\n')
+  const encodedUri = encodeURI(csvContent)
+  const link = document.createElement('a')
+  link.setAttribute('href', encodedUri)
+  link.setAttribute('download', filename)
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * Admin tool ported from `app/Views/emails/parent_email_extractor.php` (client-side compare; no jQuery DataTables).
+ */
+export function ParentEmailExtractorPage() {
+  const defaultApi = useMemo(() => apiUrl('/api/emails'), [])
+  const [apiUrlInput, setApiUrlInput] = useState(defaultApi)
+  const [csvSummary, setCsvSummary] = useState('')
+  const [compareSummary, setCompareSummary] = useState('')
+  const [usersText, setUsersText] = useState('')
+  const [parentsText, setParentsText] = useState('')
+  const [csvEmails, setCsvEmails] = useState<Set<string>>(new Set())
+  const [existed, setExisted] = useState<string[]>([])
+  const [needToAdd, setNeedToAdd] = useState<{ email: string; source: string }[]>([])
+
+  const usersEmails = useMemo(() => extractEmailsFromTextarea(usersText), [usersText])
+  const parentsEmails = useMemo(() => extractEmailsFromTextarea(parentsText), [parentsText])
+
+  const handleParseCsv = useCallback(async (file: File | undefined) => {
+    if (!file) {
+      window.alert('Please choose a CSV file.')
+      return
+    }
+    const text = await file.text()
+    const emails = extractEmailsFromCSVText(text)
+    setCsvEmails(new Set(emails))
+    setCsvSummary(`Found ${emails.length} unique emails in CSV.`)
+  }, [])
+
+  const handleFetchApi = useCallback(async () => {
+    const url = apiUrlInput.trim()
+    if (!url) {
+      window.alert('Enter your /api/emails endpoint URL.')
+      return
+    }
+    try {
+      const res = await fetch(url)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = (await res.json()) as { users?: string[]; parents?: string[] }
+      const users = (data.users ?? []).map(normalizeEmail).filter(Boolean)
+      const parents = (data.parents ?? []).map(normalizeEmail).filter(Boolean)
+      setUsersText(users.join('\n'))
+      setParentsText(parents.join('\n'))
+      window.alert(`Fetched ${users.length} users and ${parents.length} parents emails.`)
+    } catch (e) {
+      console.error(e)
+      window.alert('Failed to fetch API. See console for details.')
+    }
+  }, [apiUrlInput])
+
+  const handleCompare = useCallback(() => {
+    const u = new Set(usersEmails)
+    const p = new Set(parentsEmails)
+    const dbSet = new Set([...u, ...p])
+
+    const existedList = [...csvEmails].filter((e) => dbSet.has(e)).sort()
+    const needEmails = [...dbSet].filter((e) => !csvEmails.has(e)).sort()
+    const needRows = needEmails.map((e) => {
+      const inUsers = u.has(e)
+      const inParents = p.has(e)
+      let source = ''
+      if (inUsers && inParents) source = 'Users + Parents'
+      else if (inUsers) source = 'Users'
+      else if (inParents) source = 'Parents'
+      return { email: e, source }
+    })
+
+    setExisted(existedList)
+    setNeedToAdd(needRows)
+    setCompareSummary(
+      `Compared CSV (${csvEmails.size}) vs DB (${dbSet.size} unique: ${u.size} users + ${p.size} parents).`,
+    )
+  }, [csvEmails, usersEmails, parentsEmails])
+
+  const handleReset = useCallback(() => {
+    setCsvEmails(new Set())
+    setCsvSummary('')
+    setCompareSummary('')
+    setUsersText('')
+    setParentsText('')
+    setApiUrlInput(defaultApi)
+    setExisted([])
+    setNeedToAdd([])
+  }, [defaultApi])
+
+  return (
+    <div className="container my-4">
+      <h2 className="text-center mb-2">Parent Email Extractor</h2>
+      <p className="text-center mb-4 text-muted">
+        Upload a CSV file with emails, compare against your database emails, and see matches and gaps.
+      </p>
+
+      <div className="row g-3">
+        <div className="col-12 col-lg-6">
+          <div className="card shadow-sm">
+            <div className="card-body">
+              <h5 className="card-title mb-3">1) Upload CSV of emails (source)</h5>
+              <div className="row g-2 align-items-center">
+                <div className="col-12 col-md-8">
+                  <input
+                    type="file"
+                    accept=".csv"
+                    className="form-control"
+                    onChange={(ev) => {
+                      const f = ev.target.files?.[0]
+                      void handleParseCsv(f)
+                    }}
+                  />
+                </div>
+              </div>
+              <p className="text-muted small mt-2 mb-0">
+                The CSV can be a single column of emails or multi-column. This tool extracts any values that look like
+                emails.
+              </p>
+              {csvSummary ? <div className="text-muted small mt-2">{csvSummary}</div> : null}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-12 col-lg-6">
+          <div className="card shadow-sm h-100">
+            <div className="card-body">
+              <h5 className="card-title mb-3">2) Provide database emails</h5>
+              <div className="mb-2">
+                <span className="fw-semibold">Option A:</span> Paste emails (one per line)
+              </div>
+              <label className="form-label small text-muted">First parent&apos;s email</label>
+              <textarea
+                className="form-control"
+                rows={4}
+                placeholder={'user1@example.com\nuser2@example.com'}
+                value={usersText}
+                onChange={(e) => setUsersText(e.target.value)}
+              />
+              <label className="form-label small text-muted mt-3">Second parent&apos;s email</label>
+              <textarea
+                className="form-control"
+                rows={4}
+                placeholder={'parent1@example.com\nparent2@example.com'}
+                value={parentsText}
+                onChange={(e) => setParentsText(e.target.value)}
+              />
+              <div className="text-center text-muted my-2">— or —</div>
+              <div className="mb-2">
+                <span className="fw-semibold">Option B:</span> Fetch from API
+              </div>
+              <div className="row g-2 align-items-center">
+                <div className="col-12 col-md-8">
+                  <input
+                    type="url"
+                    className="form-control"
+                    value={apiUrlInput}
+                    onChange={(e) => setApiUrlInput(e.target.value)}
+                  />
+                </div>
+                <div className="col-12 col-md-4 text-md-end">
+                  <button type="button" className="btn btn-outline-secondary w-100" onClick={() => void handleFetchApi()}>
+                    Fetch
+                  </button>
+                </div>
+              </div>
+              <p className="text-muted small mt-2 mb-0">
+                Provide a backend endpoint that returns JSON like: <code>{'{"users": [...], "parents": [...]}'}</code>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card shadow-sm mt-3">
+        <div className="card-body">
+          <h5 className="card-title mb-3">3) Compare</h5>
+          <div className="d-flex flex-wrap gap-2">
+            <button type="button" className="btn btn-primary" onClick={handleCompare}>
+              Run Comparison
+            </button>
+            <button type="button" className="btn btn-outline-secondary" onClick={handleReset}>
+              Reset
+            </button>
+          </div>
+          {compareSummary ? <div className="text-muted small mt-2">{compareSummary}</div> : null}
+
+          <div className="row g-3 mt-2">
+            <div className="col-12 col-lg-6">
+              <div className="p-3 border rounded-3 bg-light">
+                <h6 className="d-flex align-items-center gap-2 mb-2">
+                  Existed emails <span className="badge bg-success-subtle text-success">{existed.length}</span>
+                </h6>
+                <div className="table-responsive" style={{ maxHeight: 320 }}>
+                  <table className="table table-striped table-hover table-sm w-100">
+                    <thead>
+                      <tr>
+                        <th>Email</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {existed.map((em) => (
+                        <tr key={em}>
+                          <td>{em}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="d-flex justify-content-end mt-2">
+                  <button
+                    type="button"
+                    className="btn btn-outline-secondary btn-sm"
+                    onClick={() => downloadCSV('existed_emails.csv', existed)}
+                  >
+                    Download CSV
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="col-12 col-lg-6">
+              <div className="p-3 border rounded-3 bg-light">
+                <h6 className="d-flex align-items-center gap-2 mb-2">
+                  Need to add email <span className="badge bg-danger-subtle text-danger">{needToAdd.length}</span>
+                </h6>
+                <div className="text-muted small mb-2">
+                  Emails present in database (users or parents) but <strong>NOT</strong> in your uploaded CSV.
+                </div>
+                <div className="table-responsive" style={{ maxHeight: 320 }}>
+                  <table className="table table-striped table-hover table-sm w-100">
+                    <thead>
+                      <tr>
+                        <th>Email</th>
+                        <th>Source</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {needToAdd.map((row) => (
+                        <tr key={row.email}>
+                          <td>{row.email}</td>
+                          <td>{row.source}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="d-flex justify-content-end mt-2">
+                  <button
+                    type="button"
+                    className="btn btn-outline-secondary btn-sm"
+                    onClick={() => downloadCSV('need_to_add_emails.csv', needToAdd.map((r) => r.email))}
+                  >
+                    Download CSV
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="alert alert-info mt-3 mb-0 p-2">
+            <ul className="mb-0 small">
+              <li>Comparison is case-insensitive and trims whitespace.</li>
+              <li>Duplicates are removed within each source before comparison.</li>
+              <li>CSV parsing extracts any values that resemble valid email addresses from any column.</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/emails/bodies/AttendanceEmailBodies.tsx

@@ -0,0 +1,392 @@
+import { formatLocalDate } from '../textUtils'
+
+export function FinalWarningBody({
+  parent_name = 'Parent/Guardian',
+  student_name = 'your student',
+  class_section_name,
+  date_fmt,
+  semester,
+  school_year,
+}: {
+  parent_name?: string
+  student_name?: string
+  class_section_name?: string
+  date_fmt?: string
+  semester?: string
+  school_year?: string
+}) {
+  return (
+    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        This is a <strong>final warning</strong> concerning the attendance of <strong>{student_name}</strong>
+        {class_section_name ? ` (${class_section_name})` : ''}
+        {date_fmt ? ` as of ${date_fmt}` : ''}. Continued unexcused absences
+        {semester && school_year ? ` during ${semester} ${school_year}` : ''} may result in dismissal from the
+        program.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        If there are special circumstances we should be aware of, please contact the school at{' '}
+        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        Sincerely,
+        <br />
+        Al Rahma Sunday School
+      </p>
+    </div>
+  )
+}
+
+export function FollowUpBody(props: Parameters<typeof FinalWarningBody>[0]) {
+  const {
+    parent_name = 'Parent/Guardian',
+    student_name = 'your student',
+    class_section_name,
+    date_fmt,
+    semester,
+    school_year,
+  } = props
+  return (
+    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        We&apos;re reaching out regarding <strong>{student_name}</strong>
+        {class_section_name ? ` (${class_section_name})` : ''}
+        {date_fmt ? ` on ${date_fmt}` : ''}. We noticed recent unexcused absences
+        {semester && school_year ? ` during ${semester} ${school_year}` : ''}. Please let us know in advance
+        about any upcoming absences.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        If there are special circumstances we should be aware of, please contact the school at{' '}
+        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        Thank you,
+        <br />
+        Al Rahma Sunday School
+      </p>
+    </div>
+  )
+}
+
+export function DismissalBody(props: Parameters<typeof FinalWarningBody>[0]) {
+  const {
+    parent_name = 'Parent/Guardian',
+    student_name = 'your student',
+    class_section_name,
+    date_fmt,
+    semester,
+    school_year,
+  } = props
+  return (
+    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        We regret to inform you that <strong>{student_name}</strong>
+        {class_section_name ? ` (${class_section_name})` : ''} has been <strong>dismissed</strong>
+        {semester && school_year ? ` for ${semester} ${school_year}` : ''}
+        due to repeated unexcused absences{date_fmt ? ` as of ${date_fmt}` : ''}.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        If you believe this decision was made in error or wish to discuss next steps, please contact the school at{' '}
+        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
+      </p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        Sincerely,
+        <br />
+        Al Rahma Sunday School
+      </p>
+    </div>
+  )
+}
+
+type AttendanceStudentRow = {
+  name?: string
+  date?: string
+  date_label?: string
+  class_label?: string
+  type_label?: string
+  arrival_time?: string
+  dismiss_time?: string
+}
+
+export function ParentAttendanceAdminBody({
+  recipient_parent = { firstname: 'Taylor', lastname: 'Jordan', email: 'parent@example.com', cellphone: '555-0100' },
+  primary_parent,
+  students = [
+    {
+      name: 'Ahmad Khan',
+      date_label: '04-15-2026',
+      class_label: 'Grade 5-A',
+      type_label: 'Absent',
+      arrival_time: '',
+      dismiss_time: '',
+    },
+  ] as AttendanceStudentRow[],
+  type_label = 'Attendance Update',
+  reason,
+  semester = 'Fall',
+  school_year = '2025-2026',
+  submitted_at = 'April 15, 2026 10:22 AM',
+}: {
+  recipient_parent?: Record<string, string | undefined>
+  primary_parent?: Record<string, string | undefined>
+  students?: AttendanceStudentRow[]
+  type_label?: string
+  reason?: string
+  semester?: string
+  school_year?: string
+  submitted_at?: string
+}) {
+  const submitterName =
+    `${recipient_parent.firstname ?? ''} ${recipient_parent.lastname ?? ''}`.trim() || 'Parent/Guardian'
+  const primaryName = primary_parent
+    ? `${primary_parent.firstname ?? ''} ${primary_parent.lastname ?? ''}`.trim()
+    : ''
+
+  return (
+    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 15, color: '#333', lineHeight: 1.5 }}>
+      <p>
+        <strong>Parent Submission Received</strong>
+      </p>
+      <p>
+        {submitterName} submitted an {type_label.toLowerCase()} request:
+      </p>
+      {students.length > 0 ? (
+        <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', fontSize: 14 }}>
+          <thead>
+            <tr>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Student</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Date</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Class</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {students.map((student, idx) => {
+              const dateDisplay =
+                student.date_label ||
+                (student.date ? formatLocalDate(student.date) : '—')
+              return (
+                <tr key={idx}>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{student.name ?? 'Student'}</td>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{dateDisplay}</td>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
+                    {student.class_label ?? 'Not Assigned'}
+                  </td>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
+                    {student.type_label ?? ''}
+                    <br />
+                    {student.arrival_time ? <>Arrive ~ {student.arrival_time}<br /></> : null}
+                    {student.dismiss_time ? <>Pickup @ {student.dismiss_time}<br /></> : null}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      ) : null}
+      {reason ? (
+        <p>
+          <strong>Reason:</strong> {reason}
+        </p>
+      ) : null}
+      <p style={{ marginTop: 16 }}>
+        <strong>Contact Info</strong>
+      </p>
+      <ul style={{ paddingLeft: 20, marginTop: 0 }}>
+        <li>Submitter Email: {recipient_parent.email ?? 'N/A'}</li>
+        {recipient_parent.cellphone ? <li>Submitter Phone: {recipient_parent.cellphone}</li> : null}
+        {primaryName && primaryName !== submitterName ? (
+          <li>
+            Primary Parent: {primaryName} ({primary_parent?.email ?? 'N/A'})
+          </li>
+        ) : null}
+      </ul>
+      {(semester || school_year) && (
+        <p style={{ marginTop: 0 }}>
+          Semester/Year: {`${semester ?? ''} ${school_year ?? ''}`.trim()}
+        </p>
+      )}
+      {submitted_at ? <p style={{ marginTop: 0 }}>Submitted: {submitted_at}</p> : null}
+      <p style={{ marginTop: 20, fontSize: 14, color: '#555' }}>
+        Logged automatically by the Parent Attendance Report form.
+      </p>
+    </div>
+  )
+}
+
+export function ParentAttendanceParentBody({
+  recipient_parent = { firstname: 'Taylor', lastname: 'Jordan' },
+  students = [
+    {
+      name: 'Ahmad Khan',
+      date_label: '04-15-2026',
+      class_label: 'Grade 5-A',
+      type_label: 'Absent',
+    },
+  ] as AttendanceStudentRow[],
+  type_label = 'Attendance Update',
+  reason,
+  semester = 'Fall',
+  school_year = '2025-2026',
+  submitted_at = 'April 15, 2026 10:22 AM',
+}: {
+  recipient_parent?: Record<string, string | undefined>
+  students?: AttendanceStudentRow[]
+  type_label?: string
+  reason?: string
+  semester?: string
+  school_year?: string
+  submitted_at?: string
+}) {
+  let parentName = `${recipient_parent.firstname ?? ''} ${recipient_parent.lastname ?? ''}`.trim()
+  if (!parentName) parentName = 'Parent/Guardian'
+
+  return (
+    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 15, color: '#333', lineHeight: 1.5 }}>
+      <p>Dear {parentName},</p>
+      <p>
+        Thank you for letting us know about your child&apos;s {type_label.toLowerCase()}. We have recorded your
+        submission.
+      </p>
+      {students.length > 0 ? (
+        <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', fontSize: 14 }}>
+          <thead>
+            <tr>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Student</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Date</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Class</th>
+              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Details</th>
+            </tr>
+          </thead>
+          <tbody>
+            {students.map((student, idx) => (
+              <tr key={idx}>
+                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{student.name ?? 'Student'}</td>
+                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
+                  {student.date_label || (student.date ? formatLocalDate(student.date) : '—')}
+                </td>
+                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
+                  {student.class_label ?? 'Not Assigned'}
+                </td>
+                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
+                  {student.type_label ?? ''}
+                  <br />
+                  {student.arrival_time ? <>Arrive ~ {student.arrival_time}<br /></> : null}
+                  {student.dismiss_time ? <>Pickup @ {student.dismiss_time}<br /></> : null}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : null}
+      {reason ? (
+        <p>
+          <strong>Reason provided:</strong> {reason}
+        </p>
+      ) : null}
+      {(semester || school_year) && (
+        <p style={{ marginTop: 0 }}>
+          Semester/Year: {`${semester ?? ''} ${school_year ?? ''}`.trim()}
+        </p>
+      )}
+      {submitted_at ? <p style={{ marginTop: 0 }}>Submitted: {submitted_at}</p> : null}
+      <p>
+        Our admin team and your child&apos;s teacher will be notified. If you need to make a change, please update
+        the form before the cutoff time or contact the school office.
+      </p>
+      <p style={{ marginTop: 20 }}>
+        Jazakum Allahu khairan,
+        <br />
+        Al Rahma Sunday School
+      </p>
+    </div>
+  )
+}
+
+export function BelowSixtyPerformanceBody({
+  parent_name = 'Parent/Guardian',
+  student_name = 'your student',
+  class_section_name = 'Grade 5-A',
+  semester = 'Fall',
+  school_year = '2025-2026',
+  scores = {
+    homework_avg: 55,
+    project_avg: 58,
+    participation_score: 60,
+    test_avg: 52,
+    ptap_score: 59,
+    attendance_score: 70,
+    midterm_exam_score: 48,
+    semester_score: 55,
+  } as Record<string, number | string | null | undefined>,
+  comment = 'Please reach out to discuss support options.',
+}: {
+  parent_name?: string
+  student_name?: string
+  class_section_name?: string
+  semester?: string
+  school_year?: string
+  scores?: Record<string, number | string | null | undefined>
+  comment?: string
+}) {
+  const rows: [string, keyof typeof scores][] = [
+    ['Homework Avg', 'homework_avg'],
+    ['Project Avg', 'project_avg'],
+    ['Participation', 'participation_score'],
+    ['Test Avg', 'test_avg'],
+    ['PTAP Score', 'ptap_score'],
+    ['Attendance', 'attendance_score'],
+    ['Midterm Score', 'midterm_exam_score'],
+    ['Semester Score', 'semester_score'],
+  ]
+  return (
+    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+        We are reaching out about <strong>{student_name}</strong>
+        {class_section_name ? ` (${class_section_name})` : ''}
+        {semester || school_year ? ` for ${`${semester ?? ''} ${school_year ?? ''}`.trim()}.` : '.'} The current
+        semester performance is below 60.
+      </p>
+      <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', fontSize: 14 }}>
+        <thead>
+          <tr>
+            <th style={{ border: '1px solid #ddd', padding: 6, textAlign: 'left' }}>Item</th>
+            <th style={{ border: '1px solid #ddd', padding: 6, textAlign: 'left' }}>Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(([label, key]) => {
+            const val = scores[key]
+            const display =
+              val === null || val === undefined || val === ''
+                ? '—'
+                : typeof val === 'number'
+                  ? val.toFixed(2)
+                  : String(val)
+            return (
+              <tr key={label}>
+                <td style={{ border: '1px solid #ddd', padding: 6 }}>{label}</td>
+                <td style={{ border: '1px solid #ddd', padding: 6 }}>{display}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      {comment ? (
+        <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
+          <strong>Teacher Comment:</strong> {comment}
+        </p>
+      ) : null}
+      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Please contact the school to discuss support plans for your child.</p>
+      <p style={{ margin: 0, lineHeight: 1.5 }}>
+        Thank you,
+        <br />
+        Al Rahma Sunday School
+      </p>
+    </div>
+  )
+}

src/pages/emails/bodies/EnrollmentEmailBodies.tsx

@@ -0,0 +1,858 @@
+import { joinNamesAnd, normalizeStudentNames, PORTAL_HREF } from '../textUtils'
+
+const btnStyle: React.CSSProperties = {
+  display: 'inline-block',
+  padding: '10px 16px',
+  textDecoration: 'none',
+  borderRadius: 6,
+  background: '#198754',
+  color: '#ffffff',
+  fontWeight: 600,
+  fontSize: 16,
+}
+
+function AccessAccount() {
+  return (
+    <p style={{ margin: '16px 0' }}>
+      <a href={PORTAL_HREF} target="_blank" rel="noopener noreferrer" style={btnStyle}>
+        Access My Account
+      </a>
+    </p>
+  )
+}
+
+export function StatusAdmissionReviewBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
+}: {
+  parentName?: string
+  studentName?: string | string[]
+}) {
+  const multi = Array.isArray(studentName) && studentName.length > 1
+  return (
+    <>
+      <h2 style={{ fontSize: 22, fontWeight: 'bold' }}>Admission Under Review</h2>
+      <p style={{ fontSize: 16 }}>Dear {parentName},</p>
+      {multi ? (
+        <>
+          <p style={{ fontSize: 16 }}>
+            Thank you for submitting the enrollment application for the following {studentName.length} students:
+          </p>
+          <ul style={{ fontSize: 16 }}>
+            {(studentName as string[]).map((s, i) => (
+              <li key={i}>{s}</li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <p style={{ fontSize: 16 }}>
+          Thank you for submitting the enrollment application for{' '}
+          {Array.isArray(studentName) ? studentName[0] : studentName}.
+        </p>
+      )}
+      <p style={{ fontSize: 16 }}>
+        Your application{multi ? 's are' : ' is'} currently under review by our admissions committee. This
+        process typically takes 1–2 business days.
+      </p>
+      <p style={{ fontSize: 16 }}>You will be notified immediately once a decision has been made.</p>
+      <p style={{ fontSize: 16 }}>You can check your application status at any time through the parent portal.</p>
+      <AccessAccount />
+      <p style={{ fontSize: 16 }}>
+        Best regards,
+        <br />
+        Admissions Team
+      </p>
+    </>
+  )
+}
+
+export function StatusDeniedBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
+  students,
+}: {
+  parentName?: string
+  studentName?: string | string[]
+  students?: { name?: string; reason?: string }[]
+}) {
+  const names = normalizeStudentNames(
+    Array.isArray(studentName) ? studentName : studentName ? [studentName] : [],
+  )
+  const isMulti = names.length > 1
+  const studentLabel =
+    names.length === 0
+      ? 'your student'
+      : names.length === 1
+        ? names[0]!
+        : names.length === 2
+          ? `${names[0]} and ${names[1]}`
+          : `${names.slice(0, -1).join(', ')}, and ${names[names.length - 1]}`
+
+  const hasReasons = students?.some((s) => s.reason)
+
+  return (
+    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
+      <h2>Admission Decision</h2>
+      <p>Dear {parentName},</p>
+      {isMulti ? (
+        <>
+          <p>
+            Thank you for your interest in our school and for applying for admission for the following {names.length}{' '}
+            students:
+          </p>
+          <ul style={{ paddingLeft: 20 }}>
+            {names.map((n, i) => (
+              <li key={i}>{n}</li>
+            ))}
+          </ul>
+          <p>After careful consideration, we regret to inform you that we are unable to grant admission at this time.</p>
+        </>
+      ) : (
+        <>
+          <p>Thank you for your interest in our school and for applying for {studentLabel}&apos;s admission.</p>
+          <p>After careful consideration, we regret to inform you that we are unable to grant admission at this time.</p>
+        </>
+      )}
+      {hasReasons && students ? (
+        <>
+          <p>Where available, we&apos;ve included brief context for your reference:</p>
+          <ul style={{ paddingLeft: 20 }}>
+            {students.map((s, i) => (
+              <li key={i}>
+                <strong>{s.name ?? ''}:</strong> {s.reason ?? 'No additional details provided.'}
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+      <p>This decision was made after a thorough review of all applications received, and we acknowledge that it may be disappointing.</p>
+      <p>We encourage you to consider applying again in the future as circumstances may change.</p>
+      <p>
+        If you would like feedback on your application, please contact us at{' '}
+        <a href="mailto:alrahma.isgl@gmail.com">alrahma.isgl@gmail.com</a>.
+      </p>
+      <p>
+        Best regards,
+        <br />
+        Admissions&nbsp;Committee
+      </p>
+    </div>
+  )
+}
+
+type EnrolledStudent = {
+  name?: string
+  studentId?: string
+  gradeLevel?: string
+  teacherName?: string
+  startDate?: string
+}
+
+export function StatusEnrolledBody({
+  parentName = 'Parent',
+  schoolYear = '2025-2026',
+  portalLink = PORTAL_HREF,
+  students,
+  studentName,
+  studentId,
+  gradeLevel,
+  teacherName,
+  startDate,
+}: {
+  parentName?: string
+  schoolYear?: string
+  portalLink?: string
+  students?: EnrolledStudent[]
+  studentName?: string | string[]
+  studentId?: string
+  gradeLevel?: string
+  teacherName?: string
+  startDate?: string
+}) {
+  let studentsArr: EnrolledStudent[] = students ?? []
+  if (studentsArr.length === 0 && studentName) {
+    const n = Array.isArray(studentName) ? studentName[0] : studentName
+    if (n)
+      studentsArr = [
+        { name: n, studentId, gradeLevel, teacherName, startDate },
+      ]
+  }
+  studentsArr = studentsArr.filter((s) => (s.name ?? '').trim() !== '')
+  const isMulti = studentsArr.length > 1
+  const fmt = (d?: string) => {
+    if (!d) return null
+    const t = Date.parse(d)
+    return Number.isNaN(t) ? d : new Date(t).toLocaleDateString()
+  }
+
+  return (
+    <div style={{ fontSize: 18, lineHeight: 1.6 }}>
+      <h2>Enrollment Confirmed</h2>
+      <p>Dear {parentName},</p>
+      {isMulti ? (
+        <>
+          <p>
+            We are pleased to inform you that the following {studentsArr.length} students are now officially enrolled for
+            the {schoolYear} school year:
+          </p>
+          <ul style={{ margin: '0 0 16px 20px' }}>
+            {studentsArr.map((st, i) => {
+              const bits = [
+                st.gradeLevel ? `Grade: ${st.gradeLevel}` : null,
+                st.teacherName ? `Teacher: ${st.teacherName}` : null,
+                fmt(st.startDate) ? `Start: ${fmt(st.startDate)}` : null,
+              ].filter(Boolean)
+              return (
+                <li key={i}>
+                  <strong>{st.name}</strong>
+                  {bits.length > 0 ? <span style={{ color: '#6c757d' }}> ({bits.join(' • ')})</span> : null}
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      ) : (
+        <p>
+          We are pleased to inform you that <strong>{studentsArr[0]?.name ?? 'your student'}</strong> is now officially
+          enrolled for the {schoolYear} school year.
+        </p>
+      )}
+      <p style={{ margin: '16px 0' }}>
+        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={{ ...btnStyle, fontSize: 18, padding: '12px 18px' }}>
+          Access My Account
+        </a>
+      </p>
+      <p>Welcome to our school community!</p>
+      <p>
+        Best regards,
+        <br />
+        Admissions Team
+      </p>
+    </div>
+  )
+}
+
+export function StatusNotEnrolledBody({
+  parentName = 'Parent',
+  studentName = 'Sara Ali',
+  portalLink = PORTAL_HREF,
+}: {
+  parentName?: string
+  studentName?: string
+  portalLink?: string
+}) {
+  return (
+    <>
+      <h2>Enrollment Not Started</h2>
+      <p>Dear {parentName},</p>
+      <p>We noticed that you haven&apos;t started the enrollment process for {studentName} yet.</p>
+      <p>To begin the enrollment process, please log in to your parent portal and complete the application form.</p>
+      <p>
+        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={btnStyle}>
+          Access Parent Portal
+        </a>
+      </p>
+      <p>If you need any assistance, please contact our admissions office.</p>
+      <p>
+        Best regards,
+        <br />
+        Admissions Team
+      </p>
+    </>
+  )
+}
+
+export function StatusPaymentPendingBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
+}: {
+  parentName?: string
+  studentName?: string | string[]
+}) {
+  const displayNames = Array.isArray(studentName)
+    ? studentName.map((n) => String(n).trim()).filter(Boolean)
+    : normalizeStudentNames(studentName)
+
+  const verb = displayNames.length > 1 ? 'have' : 'has'
+
+  return (
+    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
+      <p>Dear {parentName},</p>
+      {displayNames.length > 1 ? (
+        <>
+          <p>Congratulations! We are pleased to inform you that the following students have been accepted for admission to our school:</p>
+          <table role="presentation" cellPadding={0} cellSpacing={0} style={{ borderCollapse: 'collapse' }}>
+            <tbody>
+              {displayNames.map((n, i) => (
+                <tr key={i}>
+                  <td style={{ width: 24, fontSize: 0, lineHeight: 0 }}>&nbsp;</td>
+                  <td style={{ fontSize: 16, lineHeight: 1.5, padding: '0 8px 2px 0', verticalAlign: 'top' }}>&bull;</td>
+                  <td style={{ fontSize: 16, lineHeight: 1.5, padding: '0 0 2px 0', verticalAlign: 'top' }}>{n}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p>
+            We are excited to welcome your family to our community and look forward to supporting your children&apos;s
+            growth in both faith and learning.
+          </p>
+        </>
+      ) : displayNames.length === 1 ? (
+        <>
+          <p>
+            Congratulations! We are pleased to inform you that {displayNames[0]} {verb} been accepted for admission to
+            our school.
+          </p>
+          <p>
+            We are excited to welcome your family to our community and look forward to supporting your child&apos;s growth
+            in both faith and learning.
+          </p>
+        </>
+      ) : (
+        <p>Congratulations! We are pleased to inform you that your student has been accepted for admission to our school.</p>
+      )}
+      <p>
+        <strong>Next steps:</strong> Please log in to the parent portal and visit the <em>Invoice</em> tab to review your
+        invoice details. The balance must be paid in person on the first day of school to complete the enrollment process.
+      </p>
+      <AccessAccount />
+      <p>
+        Best regards,
+        <br />
+        Admissions Committee
+      </p>
+    </div>
+  )
+}
+
+export function StatusRefundPendingBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali'] as string | string[],
+  refundAmount = '$150.00',
+}: {
+  parentName?: string
+  studentName?: string | string[]
+  refundAmount?: string
+}) {
+  const multi = Array.isArray(studentName) && studentName.length > 1
+  return (
+    <>
+      <h2>Refund Processing</h2>
+      <p>Dear {parentName},</p>
+      {multi ? (
+        <>
+          <p>Your withdrawal requests for the following {studentName.length} students have been approved:</p>
+          <ul style={{ paddingLeft: 20 }}>
+            {(studentName as string[]).map((name, i) => (
+              <li key={i}>{name}</li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <p>
+          Your withdrawal request for {Array.isArray(studentName) ? studentName[0] : studentName ?? 'your student'} has
+          been approved.
+        </p>
+      )}
+      <p>
+        {refundAmount ? `A refund in the amount of ${refundAmount} is being processed.` : 'A refund is being processed.'}{' '}
+        Please allow 7–10 business days for the refund to be issued to your original payment method.
+      </p>
+      <p>You will receive a confirmation email once the refund has been processed.</p>
+      <p>If you have any questions, please contact our billing department.</p>
+      <AccessAccount />
+      <p>
+        Best regards,
+        <br />
+        Billing Department
+      </p>
+    </>
+  )
+}
+
+export function StatusWaitlistBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
+}: {
+  parentName?: string
+  studentName?: string | string[]
+}) {
+  const names = Array.isArray(studentName)
+    ? studentName
+    : studentName
+      ? [studentName]
+      : []
+  let isMulti = names.length > 1
+  let studentLabel = joinNamesAnd(names) || 'your student'
+  if (names.length === 1) {
+    isMulti = false
+    studentLabel = names[0]!
+  }
+
+  return (
+    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
+      <p>Dear {parentName},</p>
+      {isMulti ? (
+        <>
+          <p>
+            Thank you for your interest in our school and for applying for admission for the following {names.length}{' '}
+            students:
+          </p>
+          <ul style={{ paddingLeft: 20 }}>
+            {names.map((n, i) => (
+              <li key={i}>{n}</li>
+            ))}
+          </ul>
+          <p>
+            After careful review, we are unable to grant immediate admission at this time. However, we are pleased to
+            place these students on our waitlist for the upcoming school year. Should seats become available, we will
+            notify you right away.
+          </p>
+          <p>
+            We understand this may not be the outcome you had hoped for, but please know that your applications remain
+            active and under consideration. In the meantime, you may check the status of your applications at any time
+            through the parent portal.
+          </p>
+        </>
+      ) : (
+        <>
+          <p>Thank you for your interest in our school and for applying for {studentLabel}&apos;s admission.</p>
+          <p>
+            After careful review, we are unable to grant immediate admission at this time. However, we are pleased to
+            place {studentLabel} on our waitlist for the upcoming school year. Should a seat become available, we will
+            notify you right away.
+          </p>
+          <p>
+            We understand this may not be the outcome you had hoped for, but please know that the application remains
+            active and under consideration. In the meantime, you may check the status of the application at any time
+            through the parent portal.
+          </p>
+        </>
+      )}
+      <AccessAccount />
+      <p>
+        Best regards,
+        <br />
+        Admissions Committee
+      </p>
+    </div>
+  )
+}
+
+export function StatusWithdrawReviewBody({
+  parentName = 'Parent',
+  studentName = ['Sara Ali'] as string | string[],
+}: {
+  parentName?: string
+  studentName?: string | string[]
+}) {
+  const multi = Array.isArray(studentName) && studentName.length > 1
+  return (
+    <>
+      <h2>Withdrawal Request Under Review</h2>
+      <p>Dear {parentName},</p>
+      {multi ? (
+        <>
+          <p>We have received your request to withdraw the following {studentName.length} students from our school:</p>
+          <ul style={{ paddingLeft: 20, fontSize: 14 }}>
+            {(studentName as string[]).map((n, i) => (
+              <li key={i}>{n}</li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <p>
+          We have received your request to withdraw {Array.isArray(studentName) ? studentName[0] : studentName ?? 'your student'} from our school.
+        </p>
+      )}
+      <p>This request is currently under review by our administration. We will contact you within 3–5 business days regarding the next steps.</p>
+      <p>If you have any questions or need to provide additional information, please contact our registrar&apos;s office.</p>
+      <AccessAccount />
+      <p>
+        Best regards,
+        <br />
+        Registrar&apos;s Office
+      </p>
+    </>
+  )
+}
+
+type WithdrawRow = { name?: string; withdrawalDate?: string }
+
+export function StatusWithdrawnBody({
+  parentName = 'Parent',
+  studentName = 'Sara Ali',
+  withdrawalDate = 'June 1, 2026',
+  withdrawals,
+}: {
+  parentName?: string
+  studentName?: string | string[]
+  withdrawalDate?: string
+  withdrawals?: WithdrawRow[]
+}) {
+  let farewell: string
+  if (withdrawals && withdrawals.length > 0) {
+    farewell =
+      joinNamesAnd(
+        withdrawals.map((w) => w.name).filter((n): n is string => Boolean(n && String(n).trim())),
+      ) || 'your student'
+  } else if (Array.isArray(studentName)) {
+    const n = studentName.map((x) => String(x).trim()).filter(Boolean)
+    farewell = joinNamesAnd(n) || 'your student'
+  } else {
+    farewell = studentName ?? 'your student'
+  }
+
+  return (
+    <>
+      <h2>Withdrawal Complete</h2>
+      <p>Dear {parentName},</p>
+      {withdrawals && withdrawals.length > 0 ? (
+        <>
+          <p>This email confirms the following students have been officially withdrawn from our school:</p>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
+            <thead>
+              <tr>
+                <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Student</th>
+                <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Effective Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {withdrawals.map((w, i) => (
+                <tr key={i}>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{w.name ?? ''}</td>
+                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{w.withdrawalDate ?? ''}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      ) : Array.isArray(studentName) && studentName.length > 1 ? (
+        <>
+          <p>
+            This email confirms the following {studentName.length} students have been officially withdrawn from our school
+            {withdrawalDate ? ` effective ${withdrawalDate}` : ''}:
+          </p>
+          <ul style={{ paddingLeft: 20 }}>
+            {studentName.map((n, i) => (
+              <li key={i}>{n}</li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <p>
+          This email confirms that {Array.isArray(studentName) ? studentName[0] : studentName} has been officially withdrawn from our school
+          {withdrawalDate ? ` effective ${withdrawalDate}` : ''}.
+        </p>
+      )}
+      <p>The refund process has been completed. You should see the credit in your account within 3–5 business days.</p>
+      <p>We&apos;re sorry to see you go and wish {farewell} all the best in their future educational endeavors.</p>
+      <p>If you would like to re-enroll in the future, please don&apos;t hesitate to contact us.</p>
+      <AccessAccount />
+      <p>
+        Best regards,
+        <br />
+        Registrar&apos;s Office
+      </p>
+    </>
+  )
+}
+
+type PaymentStudent = { firstname?: string; lastname?: string }
+
+export function PaymentReceiptBody({
+  parentName = 'Parent',
+  invoiceNumber = 'INV-1001',
+  invoiceId = '1001',
+  transactionId = 'TXN-ABC123',
+  paymentDate = 'April 10, 2026',
+  method = 'Check',
+  checkNumber = '1024',
+  installmentSeq = 2,
+  amount = '$250.00',
+  invoiceDiscount,
+  invoiceTotal = '$1,200.00',
+  preBalance = '$500.00',
+  postBalance = '$250.00',
+  students = [{ firstname: 'Sara', lastname: 'Ali' }] as PaymentStudent[],
+  portalLink = PORTAL_HREF,
+}: {
+  parentName?: string
+  invoiceNumber?: string | number
+  invoiceId?: string | number
+  transactionId?: string
+  paymentDate?: string
+  method?: string
+  checkNumber?: string
+  installmentSeq?: number | string
+  amount?: string
+  invoiceDiscount?: string
+  invoiceTotal?: string
+  preBalance?: string
+  postBalance?: string
+  students?: PaymentStudent[]
+  portalLink?: string
+}) {
+  const invDisplay =
+    invoiceNumber !== undefined && invoiceNumber !== '' ? String(invoiceNumber) : String(invoiceId ?? '')
+  return (
+    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
+      <p>Dear {parentName},</p>
+      <p>We have received your payment. Below are the details of your transaction:</p>
+      <table
+        border={0}
+        cellPadding={8}
+        cellSpacing={0}
+        style={{ borderCollapse: 'collapse', width: '100%', fontSize: 16 }}
+      >
+        <tbody>
+          <tr style={{ backgroundColor: '#f5f5f5' }}>
+            <td>
+              <strong>Invoice Number:</strong>
+            </td>
+            <td>#{invDisplay}</td>
+          </tr>
+          <tr>
+            <td>
+              <strong>Transaction ID:</strong>
+            </td>
+            <td>{transactionId}</td>
+          </tr>
+          <tr style={{ backgroundColor: '#f5f5f5' }}>
+            <td>
+              <strong>Payment Date:</strong>
+            </td>
+            <td>{paymentDate}</td>
+          </tr>
+          <tr>
+            <td>
+              <strong>Payment Method:</strong>
+            </td>
+            <td>
+              {method}
+              {checkNumber ? ` (Check #${checkNumber})` : ''}
+            </td>
+          </tr>
+          <tr style={{ backgroundColor: '#f5f5f5' }}>
+            <td>
+              <strong>Installment #:</strong>
+            </td>
+            <td>{String(installmentSeq)}</td>
+          </tr>
+          <tr>
+            <td>
+              <strong>Amount Paid:</strong>
+            </td>
+            <td>
+              <strong style={{ color: 'green' }}>{amount}</strong>
+            </td>
+          </tr>
+          {invoiceDiscount ? (
+            <tr style={{ backgroundColor: '#f5f5f5' }}>
+              <td>
+                <strong>Discount Applied (This Invoice):</strong>
+              </td>
+              <td>{invoiceDiscount}</td>
+            </tr>
+          ) : null}
+          <tr style={{ backgroundColor: '#f5f5f5' }}>
+            <td>
+              <strong>Total Invoice Amount:</strong>
+            </td>
+            <td>{invoiceTotal}</td>
+          </tr>
+          <tr>
+            <td>
+              <strong>Previous Balance:</strong>
+            </td>
+            <td>{preBalance}</td>
+          </tr>
+          <tr style={{ backgroundColor: '#f5f5f5' }}>
+            <td>
+              <strong>New Balance:</strong>
+            </td>
+            <td>
+              <strong>{postBalance}</strong>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      {students.length > 0 ? (
+        <>
+          <p style={{ marginTop: 20 }}>
+            <strong>Students linked to this invoice:</strong>
+          </p>
+          <ul>
+            {students.map((s, i) => (
+              <li key={i}>{`${s.firstname ?? ''} ${s.lastname ?? ''}`.trim()}</li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+      <p style={{ marginTop: 16 }}>You can view this invoice and your full payment history in your account:</p>
+      <p>
+        <a
+          href={portalLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'inline-block',
+            padding: '10px 16px',
+            textDecoration: 'none',
+            borderRadius: 6,
+            background: '#198754',
+            color: '#ffffff',
+            fontWeight: 600,
+            fontSize: 16,
+          }}
+        >
+          Access My Account
+        </a>
+      </p>
+      <p>Thank you for your payment and continued support.</p>
+      <p style={{ marginTop: 20 }}>
+        Warm regards,
+        <br />
+        <strong>Al Rahma Sunday School</strong>
+      </p>
+    </div>
+  )
+}
+
+export function ExtraChargeNoticeBody({
+  title = 'Account Charge Update',
+  parentName = 'Parent',
+  schoolYear = '2025-2026',
+  semester = 'Fall',
+  typeLabel = 'Fee adjustment',
+  chargeTitle = 'Materials fee',
+  chargeDesc = 'Additional materials for semester projects.',
+  amountSigned = '-$25.00',
+  amountAbs = '$25.00',
+  invoiceTotal = '$1,225.00',
+  preBalance = '$500.00',
+  postBalance = '$525.00',
+  invoiceNumber = 'INV-1001',
+  invoiceId = '1001',
+  dueDate = 'May 1, 2026',
+  createdAt = 'April 12, 2026',
+  portalLink = PORTAL_HREF,
+  students = [{ name: 'Sara Ali', class: 'Grade 5-A' }],
+}: {
+  title?: string
+  parentName?: string
+  schoolYear?: string
+  semester?: string
+  typeLabel?: string
+  chargeTitle?: string
+  chargeDesc?: string
+  amountSigned?: string
+  amountAbs?: string
+  invoiceTotal?: string
+  preBalance?: string
+  postBalance?: string
+  invoiceNumber?: string
+  invoiceId?: string | number
+  dueDate?: string
+  createdAt?: string
+  portalLink?: string
+  students?: { name?: string; class?: string }[]
+}) {
+  return (
+    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 14, color: '#212529', lineHeight: 1.5 }}>
+      <h2 style={{ margin: '0 0 10px', fontSize: 18 }}>{title}</h2>
+      <p style={{ margin: '0 0 12px' }}>Hello {parentName},</p>
+      <p style={{ margin: '0 0 12px' }}>
+        An update was made to your account for{' '}
+        <strong>
+          {schoolYear} {semester ? `(${semester})` : ''}
+        </strong>
+        .
+      </p>
+      <table cellPadding={0} cellSpacing={0} width="100%" style={{ borderCollapse: 'collapse', margin: '8px 0 16px' }}>
+        <tbody>
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa', width: '35%' }}>Type</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{typeLabel}</td>
+          </tr>
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Title</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{chargeTitle}</td>
+          </tr>
+          {chargeDesc ? (
+            <tr>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Details</td>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', whiteSpace: 'pre-wrap' }}>
+                {chargeDesc}
+              </td>
+            </tr>
+          ) : null}
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Amount</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
+              <strong>{amountSigned}</strong> (absolute: {amountAbs})
+            </td>
+          </tr>
+          {dueDate ? (
+            <tr>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Due Date</td>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{dueDate}</td>
+            </tr>
+          ) : null}
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Invoice</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
+              {invoiceNumber || `INV-${invoiceId}`}
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Invoice Total</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{invoiceTotal}</td>
+          </tr>
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Previous Balance</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{preBalance}</td>
+          </tr>
+          <tr>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>New Balance</td>
+            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
+              <strong>{postBalance}</strong>
+            </td>
+          </tr>
+          {createdAt ? (
+            <tr>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Recorded At</td>
+              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{createdAt}</td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
+      <p style={{ margin: '0 0 18px' }}>
+        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={btnStyle}>
+          Access My Account
+        </a>
+      </p>
+      {students.length > 0 ? (
+        <>
+          <p style={{ margin: '16px 0 8px' }}>
+            <strong>Students on your account:</strong>
+          </p>
+          <ul style={{ margin: 0, paddingLeft: 20 }}>
+            {students.map((s, i) => (
+              <li key={i}>
+                {s.name}
+                {s.class ? ` - ${s.class}` : ''}
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+      <p style={{ margin: '18px 0 6px' }}>Thank you,</p>
+      <p style={{ marginTop: 20 }}>
+        Warm regards,
+        <br />
+        <strong>Al Rahma Sunday School</strong>
+      </p>
+    </div>
+  )
+}

src/pages/emails/bodies/MiscEmailBodies.tsx

@@ -0,0 +1,415 @@
+import { PORTAL_HREF } from '../textUtils'
+
+export function WelcomeParentBody({
+  recipientName = 'Parent',
+  orgName = 'Al Rahma Sunday School',
+  activationLink = `${PORTAL_HREF}/login`,
+  contactInfo = 'alrahma.isgl@gmail.com',
+}: {
+  recipientName?: string
+  orgName?: string
+  activationLink?: string
+  contactInfo?: string
+}) {
+  return (
+    <>
+      <p style={{ fontSize: 18 }}>Dear {recipientName},</p>
+      <p style={{ fontSize: 18 }}>
+        Thank you for creating an account with us — we&apos;re thrilled to welcome you to{' '}
+        <strong>{orgName}</strong> community!
+      </p>
+      <p style={{ fontSize: 18 }}>To activate your account, click the link below:</p>
+      <p>
+        <a href={activationLink} style={{ fontSize: 18, color: '#007bff' }}>
+          Activate my account
+        </a>
+      </p>
+      <p style={{ fontSize: 18 }}>Once activated you will be able to:</p>
+      <ul style={{ fontSize: 18 }}>
+        <li>Access your dashboard</li>
+        <li>Register and enroll your child(ren) in classes</li>
+        <li>Receive school notifications and updates</li>
+      </ul>
+      <p style={{ fontSize: 18 }}>
+        Contact us at{' '}
+        <a href={`mailto:${contactInfo}`} style={{ color: '#0000EE' }}>
+          {contactInfo}
+        </a>{' '}
+        if you have any questions.
+      </p>
+      <p style={{ fontSize: 18 }}>
+        Warm regards,
+        <br />
+        <strong>{orgName}</strong>
+      </p>
+    </>
+  )
+}
+
+export function WelcomeStaffBody({
+  recipientName = 'Teacher',
+  orgName = 'Al Rahma Sunday School',
+  activationLink = `${PORTAL_HREF}/login`,
+  contactInfo = 'alrahma.isgl@gmail.com',
+}: {
+  recipientName?: string
+  orgName?: string
+  activationLink?: string
+  contactInfo?: string
+}) {
+  return (
+    <>
+      <p style={{ fontSize: 18 }}>Dear {recipientName},</p>
+      <p style={{ fontSize: 18 }}>
+        Thank you for creating an account with us — we&apos;re thrilled to welcome you to <strong>{orgName}</strong>{' '}
+        community!
+      </p>
+      <p style={{ fontSize: 18 }}>To activate your account, click the link below:</p>
+      <p>
+        <a href={activationLink} style={{ fontSize: 18, color: '#007bff' }}>
+          Activate my account
+        </a>
+      </p>
+      <p style={{ fontSize: 18 }}>Once activated you will be able to:</p>
+      <ul style={{ fontSize: 18 }}>
+        <li>Access your dashboard</li>
+        <li>Receive school notifications and updates</li>
+      </ul>
+      <p style={{ fontSize: 18 }}>
+        Contact us at{' '}
+        <a href={`mailto:${contactInfo}`} style={{ color: '#0000EE' }}>
+          {contactInfo}
+        </a>{' '}
+        if you have any questions.
+      </p>
+      <p style={{ fontSize: 18 }}>
+        Warm regards,
+        <br />
+        <strong>{orgName}</strong>
+      </p>
+    </>
+  )
+}
+
+export function WelcomeUserBody({
+  user = { firstname: 'Friend' },
+}: {
+  user?: { firstname?: string }
+}) {
+  const first = user.firstname ?? 'User'
+  return (
+    <>
+      <h2>Welcome, {first.charAt(0).toUpperCase() + first.slice(1)}!</h2>
+      <p>
+        Thank you for registering with <strong>Al Rahma Sunday School</strong>! We&apos;re excited to have you as part of
+        our growing community.
+      </p>
+      <p>
+        At Al Rahma, we&apos;re committed to nurturing spiritual growth, knowledge and strong Islamic values in a welcoming
+        and engaging environment. Whether you&apos;re a new student, a parent or a community member, we&apos;re thrilled to
+        begin this journey with you.
+      </p>
+      <p>Here&apos;s what you can expect as a new member:</p>
+      <ul>
+        <li>📚 Access to enriching Islamic studies and Quranic education</li>
+        <li>🤝 A warm and supportive learning environment</li>
+        <li>🕌 Regular events, announcements and community updates</li>
+      </ul>
+      <p style={{ fontSize: 16 }}>
+        Click{' '}
+        <a href={`${PORTAL_HREF}/login`} target="_blank" rel="noopener noreferrer">
+          here
+        </a>{' '}
+        to login to your account securely to access your parent portal. There you can register and enroll your child(ren)
+        in classes, check their enrollment status and track their academic progress, view/print your invoice, and check
+        school events and calendar.
+      </p>
+      <p>
+        Need help or have questions? Don&apos;t hesitate to{' '}
+        <a href="mailto:alrahma.isgl@gmail.com">contact us</a>. We&apos;re here to support you every step of the way.
+      </p>
+      <p>
+        Once again, welcome to the Al Rahma Sunday School family. We look forward to a wonderful and meaningful experience
+        together!
+      </p>
+      <p>
+        Warm regards,
+        <br />
+        <strong>Al Rahma Sunday School Team</strong>
+      </p>
+    </>
+  )
+}
+
+export function ResetPasswordBody({
+  resetLink = `${PORTAL_HREF}/forgot-password`,
+  orgName = 'Al Rahma Sunday School',
+}: {
+  resetLink?: string
+  orgName?: string
+}) {
+  return (
+    <>
+      <p style={{ fontSize: 18 }}>Hello,</p>
+      <p style={{ fontSize: 18 }}>
+        We received a request to reset your password. If you initiated this request, please click on the link below to set
+        a new password:
+      </p>
+      <p style={{ fontSize: 18 }}>
+        <a href={resetLink} style={{ color: '#007bff' }}>
+          Reset Password
+        </a>
+      </p>
+      <p style={{ fontSize: 18 }}>If you did not request a password reset, please discard this email.</p>
+      <p style={{ fontSize: 18 }}>
+        Warm regards,
+        <br />
+        <strong>{orgName}</strong>
+      </p>
+    </>
+  )
+}
+
+export function StudentRemovedBody({
+  parent_name = 'Parent/Guardian',
+  student_name = 'Sara Ali',
+  signature = 'AlRahma School Administration',
+}: {
+  parent_name?: string
+  student_name?: string
+  signature?: string
+}) {
+  return (
+    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', color: '#222', fontSize: 16, lineHeight: 1.6 }}>
+      <p style={{ margin: '0 0 12px' }}>Dear {parent_name},</p>
+      <p style={{ margin: '0 0 12px' }}>
+        We are writing to inform you that{' '}
+        {student_name ? (
+          <>
+            your child, <strong>{student_name}</strong>,
+          </>
+        ) : (
+          'your child'
+        )}{' '}
+        has been officially withdrawn from the school&apos;s enrollment list, effective immediately.
+      </p>
+      <p style={{ margin: '0 0 12px' }}>
+        To ensure confidentiality and accuracy, we kindly request that you contact the school directly. This will allow us
+        to provide complete information and discuss any necessary next steps.
+      </p>
+      <p style={{ margin: '0 0 12px' }}>Thank you for your understanding. We look forward to speaking with you soon.</p>
+      <p style={{ margin: 0 }}>
+        Sincerely,
+        <br />
+        {signature}
+      </p>
+    </div>
+  )
+}
+
+export function SupportNewAccountBody({
+  user = { id: '42', firstname: 'Jamie', lastname: 'Rivera', email: 'new.user@example.com' },
+}: {
+  user?: { id?: string | number; firstname?: string; lastname?: string; email?: string }
+}) {
+  return (
+    <>
+      <h2>📬 New Account Created</h2>
+      <p>
+        <strong>Name:</strong> {user.firstname} {user.lastname}
+      </p>
+      <p>
+        <strong>Email:</strong> {user.email ?? 'N/A'}
+      </p>
+      <p>
+        <strong>User ID:</strong> {user.id ?? 'N/A'}
+      </p>
+      <p>This user has just completed account setup. Please verify and take any necessary actions.</p>
+    </>
+  )
+}
+
+export function AdminStudentRegisteredBody({
+  student = {
+    firstname: 'Sara',
+    lastname: 'Ali',
+    parents: { firstname: 'Parent', lastname: 'One', email: 'parent@example.com' },
+  },
+}: {
+  student?: {
+    firstname?: string
+    lastname?: string
+    parents?: { firstname?: string; lastname?: string; email?: string }
+  }
+}) {
+  const p = student.parents
+  return (
+    <>
+      <h2>🎓 New Student Registered</h2>
+      <p>
+        <strong>Student Name:</strong> {student.firstname} {student.lastname}
+      </p>
+      {p ? (
+        <>
+          <h3>👪 Parent Info</h3>
+          <p>
+            <strong>Parent:</strong> {p.firstname} {p.lastname}
+            <br />
+            <strong>Email:</strong> {p.email ?? 'N/A'}
+          </p>
+        </>
+      ) : null}
+      <p>The student has just been registered. Please review their information and verify if needed.</p>
+    </>
+  )
+}
+
+export function CalendarNotificationBody({
+  event = {
+    title: 'Community Iftar',
+    date: '2026-05-01',
+    event_type: 'Community',
+    description: 'Join us after Maghrib for a community gathering.',
+  },
+  calendarUrl = `${PORTAL_HREF}/calendar`,
+}: {
+  event?: { title?: string; date?: string; event_type?: string; description?: string }
+  calendarUrl?: string
+}) {
+  const eventTitle = event.title?.trim() || 'School Calendar Update'
+  const eventType = event.event_type?.trim() || 'General'
+  const raw = event.date?.trim()
+  const eventDate = raw
+    ? new Date(`${raw}T12:00:00`).toLocaleDateString(undefined, {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      })
+    : 'TBD'
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', lineHeight: 1.6 }}>
+      <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{eventTitle}</h1>
+      <p style={{ margin: '0.25rem 0' }}>
+        <strong>Date:</strong> {eventDate}
+      </p>
+      <p style={{ margin: '0.25rem 0' }}>
+        <strong>Type:</strong> {eventType}
+      </p>
+      {event.description ? (
+        <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{event.description}</p>
+      ) : null}
+      <p style={{ margin: '0.25rem 0' }}>
+        Visit the{' '}
+        <a href={calendarUrl}>{calendarUrl}</a> to see the calendar.
+      </p>
+    </div>
+  )
+}
+
+export function EventBroadcastBody({
+  event = {
+    event_name: 'Science Fair',
+    expiration_date: '2026-06-15',
+    event_category: 'Academic',
+    amount: 15,
+    description: '<p>Bring your poster boards.</p>',
+  },
+  flyerUrl = '',
+  eventUrl = `${PORTAL_HREF}/parent/events`,
+}: {
+  event?: {
+    event_name?: string
+    expiration_date?: string
+    event_category?: string
+    amount?: number | string | null
+    description?: string
+  }
+  flyerUrl?: string
+  eventUrl?: string
+}) {
+  const eventName = (event.event_name ?? 'Upcoming Event').trim()
+  const eventCategory = (event.event_category ?? '').trim()
+  const raw = (event.expiration_date ?? '').trim()
+  const eventDate = raw
+    ? new Date(`${raw}T12:00:00`).toLocaleDateString(undefined, {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      })
+    : 'TBD'
+  const amountRaw = event.amount
+  const amount =
+    amountRaw !== null && amountRaw !== undefined && amountRaw !== ''
+      ? Number(amountRaw).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+      : null
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', lineHeight: 1.6 }}>
+      <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{eventName}</h1>
+      <p style={{ margin: '0.25rem 0' }}>
+        <strong>Date:</strong> {eventDate}
+      </p>
+      {eventCategory ? (
+        <p style={{ margin: '0.25rem 0' }}>
+          <strong>Category:</strong> {eventCategory}
+        </p>
+      ) : null}
+      {amount !== null ? (
+        <p style={{ margin: '0.25rem 0' }}>
+          <strong>Amount:</strong> ${amount}
+        </p>
+      ) : null}
+      {event.description ? (
+        <div style={{ margin: '0.75rem 0' }} dangerouslySetInnerHTML={{ __html: event.description }} />
+      ) : null}
+      {flyerUrl ? (
+        <>
+          <div style={{ margin: '1rem 0' }}>
+            <img
+              src={flyerUrl}
+              alt={`Event flyer for ${eventName}`}
+              style={{ display: 'block', maxWidth: '100%', height: 'auto', border: '1px solid #ddd', borderRadius: 8 }}
+            />
+          </div>
+          <p style={{ margin: '0.75rem 0' }}>
+            Flyer:{' '}
+            <a href={flyerUrl}>{flyerUrl}</a>
+          </p>
+        </>
+      ) : null}
+      <p style={{ margin: '0.75rem 0' }}>
+        For more details, please contact the school office or review the parent event page.
+      </p>
+      <p style={{ margin: '0.25rem 0' }}>
+        <a href={eventUrl}>{eventUrl}</a>
+      </p>
+    </div>
+  )
+}
+
+export function CustomHtmlBody({
+  body_html = '<p>Custom <strong>HTML</strong> from the sender.</p>',
+}: {
+  body_html?: string
+}) {
+  return <div dangerouslySetInnerHTML={{ __html: body_html }} />
+}
+
+/** `_wrap_layout.php`: inner HTML passed into email_layout */
+export function WrapLayoutSampleBody({
+  body_html = '<p style="font-size:16px;">Inner HTML injected via <code>$body_html</code> (CI <code>_wrap_layout.php</code>).</p>',
+}: {
+  body_html?: string
+}) {
+  return <div dangerouslySetInnerHTML={{ __html: body_html }} />
+}
+
+/** `broadcast_wrapper.php`: content slot */
+export function BroadcastWrapperSampleBody({
+  content = '<p>This area maps to <code>$content</code> in <code>broadcast_wrapper.php</code>.</p>',
+}: {
+  content?: string
+}) {
+  return <div dangerouslySetInnerHTML={{ __html: content }} />
+}

src/pages/emails/bodies/WhatsAppEmailBodies.tsx

@@ -0,0 +1,206 @@
+import { formatSectionName, joinWithAnd } from '../whatsappInviteUtils'
+
+type WaItem = {
+  class_section_name?: string
+  invite_link?: string
+  qr_src?: string
+}
+
+export function WhatsAppInviteBody({
+  parent = { firstname: 'Fatima', lastname: 'Hassan' },
+  items = [
+    {
+      class_section_name: '5-A',
+      invite_link: 'https://chat.whatsapp.com/example',
+      qr_src: '',
+    },
+  ] as WaItem[],
+  sections,
+  links,
+  qrImageUrl,
+}: {
+  parent?: { firstname?: string; lastname?: string }
+  items?: WaItem[]
+  sections?: WaItem[]
+  links?: string[]
+  qrImageUrl?: string
+}) {
+  const displayName = `${parent.firstname ?? ''} ${parent.lastname ?? ''}`.trim()
+  const sectionNames = (sections ?? []).map((s) => s.class_section_name ?? '')
+  const linkFallback = links?.[0] ?? sections?.[0]?.invite_link ?? '#'
+  const introSections =
+    items.length > 0 ? items.map((i) => i.class_section_name ?? 'Class') : sectionNames
+
+  const formattedSections = introSections.map((s) => formatSectionName(String(s)))
+  const sectionList = joinWithAnd(formattedSections) || 'your class'
+
+  const useItems = items.length > 0
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#fff',
+        borderRadius: 8,
+        padding: 30,
+        maxWidth: 720,
+        margin: 'auto',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+        fontFamily: "'Segoe UI', Arial, sans-serif",
+        color: '#333',
+        lineHeight: 1.8,
+      }}
+    >
+      <p style={{ fontSize: 18 }}>Assalamu Alaikum {displayName},</p>
+      <p style={{ fontSize: 18 }}>
+        We are excited to welcome you to this school year at <strong>Al Rahma Sunday School</strong>. As we approach our
+        fourth week of learning, we ask Allah (SWT) to make this year successful and beneficial for all our children.
+      </p>
+      <p style={{ fontSize: 18 }}>
+        You have been identified as a parent or guardian of at least one child in <strong>{sectionList}</strong> this year.
+        We are inviting you to join the WhatsApp group(s) that include other parents and your child&apos;s instructors. The
+        WhatsApp group(s) will be used to share important information about curriculum assignments and school events.
+      </p>
+      <p style={{ fontSize: 18 }}>
+        Additionally, by joining these groups, you automatically become part of the{' '}
+        <strong>Al Rahma Sunday School Community</strong>, which hosts all grade groups within the school. Through this
+        community, you will receive important alerts and messages from the school administration.
+      </p>
+      <h2 style={{ fontSize: 22, color: '#1c5f2c', fontWeight: 600, marginTop: 22 }}>
+        Your WhatsApp Group(s){items.length ? ` (${items.length})` : ''}
+      </h2>
+
+      {useItems ? (
+        items.map((it, i) => {
+          const sectionLabel = formatSectionName(it.class_section_name ?? 'Class')
+          const inviteLink = it.invite_link ?? '#'
+          const qrSrc = it.qr_src ?? ''
+          return (
+            <div
+              key={i}
+              style={{
+                border: '1px solid #e8e8e8',
+                borderRadius: 10,
+                padding: 16,
+                margin: '16px 0',
+                background: '#fff',
+              }}
+            >
+              <div style={{ fontWeight: 700, marginBottom: 10, fontSize: 22 }}>
+                {i + 1}) {sectionLabel}
+              </div>
+              <div style={{ textAlign: 'center', marginTop: 10, marginBottom: 20 }}>
+                <a
+                  href={inviteLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    display: 'inline-block',
+                    backgroundColor: '#25D366',
+                    color: '#fff',
+                    padding: '14px 28px',
+                    borderRadius: 8,
+                    textDecoration: 'none',
+                    fontWeight: 600,
+                    fontSize: 20,
+                  }}
+                >
+                  Join WhatsApp Group
+                </a>
+                <div style={{ marginTop: 15 }}>
+                  {qrSrc ? (
+                    <img src={qrSrc} alt={`QR for ${sectionLabel}`} width={260} height={260} style={{ display: 'block', margin: 'auto' }} />
+                  ) : (
+                    <div style={{ color: '#777', fontSize: 20 }}>
+                      <em>QR unavailable</em>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })
+      ) : (
+        <div style={{ border: '1px solid #e8e8e8', borderRadius: 10, padding: 16, margin: '16px 0', background: '#fff' }}>
+          <div style={{ fontWeight: 700, marginBottom: 10, fontSize: 22 }}>
+            {joinWithAnd(sectionNames.map((s) => formatSectionName(s))) || 'Class'}
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 16 }}>
+            <div style={{ flex: '1 1 280px', minWidth: 260 }}>
+              <a
+                href={linkFallback}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'inline-block',
+                  backgroundColor: '#25D366',
+                  color: '#fff',
+                  padding: '14px 24px',
+                  borderRadius: 8,
+                  textDecoration: 'none',
+                  fontWeight: 600,
+                  fontSize: 20,
+                }}
+              >
+                Join WhatsApp Group
+              </a>
+              <div style={{ marginTop: 10 }}>
+                <a href={linkFallback} target="_blank" rel="noopener noreferrer" style={{ fontSize: 18, color: '#0b6ef6', wordBreak: 'break-all' }}>
+                  {linkFallback}
+                </a>
+              </div>
+            </div>
+            <div style={{ flex: '0 0 260px', textAlign: 'center' }}>
+              {qrImageUrl ? (
+                <img src={qrImageUrl} alt="WhatsApp QR Code" width={260} height={260} style={{ display: 'block', margin: 'auto' }} />
+              ) : (
+                <div style={{ color: '#777', fontSize: 20 }}>
+                  <em>QR unavailable</em>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <p style={{ marginTop: 22, fontSize: 18, color: '#555', textAlign: 'center' }}>
+        Jazakum Allah Khair,
+        <br />
+        <strong>Al Rahma Sunday School Administration</strong>
+      </p>
+    </div>
+  )
+}
+
+/** CI file is plain-text draft — rendered as fixed message */
+export function WhatsAppGroupInvitationDraftBody() {
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', fontSize: 16, lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>
+      {`titile : Invitation to Join Youth WhatsApp Group
+
+
+Assalam Alaikum Parents and Guardians,
+
+We are excited to welcome you to this school year at Al Rahma Sunday School.
+
+We are heading towards the 4th week of learning this coming Sunday and we ask Allah swt to make this year successful and beneficial for our children.
+
+You have been identified as a parent/guardian to at least one child in Youth this year, and we are inviting you to join the WhatsApp group that will be hosting all other parents who have their children in the same grade along with their respective instructors Br Sheraz, Br Umar Farooq, Br Hassan, Br Nabil, Sr Mariama and Sr Zainab. The WhatsApp group will be used to communicate important matters about curriculum, assignments and events.
+
+Also, by joining Youth, you are automatically joining Al Rahma Sunday School Community which hosts all grade groups within the school, you will be able to receive important alerts and messages from school administration through the WhatsApp community as well.
+
+Two ways to join:
+
+1- If you are seeing this email in your desktop/laptop, then use your smart phone to scan the QR code below:
+
+image.png
+
+
+2- If you are seeing this email in your smart phone, then simply click on this link below to join:
+
+Youth WhatsApp Invitation Link
+
+Jazakum Allah Khair,
+-Al Rahma Admin`}
+    </div>
+  )
+}

src/pages/emails/emailTemplatesRegistry.tsx

@@ -0,0 +1,238 @@
+import type { JSX } from 'react'
+import {
+  BelowSixtyPerformanceBody,
+  DismissalBody,
+  FinalWarningBody,
+  FollowUpBody,
+  ParentAttendanceAdminBody,
+  ParentAttendanceParentBody,
+} from './bodies/AttendanceEmailBodies'
+import {
+  ExtraChargeNoticeBody,
+  PaymentReceiptBody,
+  StatusAdmissionReviewBody,
+  StatusDeniedBody,
+  StatusEnrolledBody,
+  StatusNotEnrolledBody,
+  StatusPaymentPendingBody,
+  StatusRefundPendingBody,
+  StatusWaitlistBody,
+  StatusWithdrawReviewBody,
+  StatusWithdrawnBody,
+} from './bodies/EnrollmentEmailBodies'
+import {
+  AdminStudentRegisteredBody,
+  BroadcastWrapperSampleBody,
+  CalendarNotificationBody,
+  CustomHtmlBody,
+  EventBroadcastBody,
+  ResetPasswordBody,
+  StudentRemovedBody,
+  SupportNewAccountBody,
+  WelcomeParentBody,
+  WelcomeStaffBody,
+  WelcomeUserBody,
+  WrapLayoutSampleBody,
+} from './bodies/MiscEmailBodies'
+import { WhatsAppGroupInvitationDraftBody, WhatsAppInviteBody } from './bodies/WhatsAppEmailBodies'
+
+export type EmailTemplateSlug =
+  | 'final-warning'
+  | 'follow-up'
+  | 'parent-attendance-admin'
+  | 'parent-attendance-parent'
+  | 'below-sixty-performance'
+  | 'dismissal'
+  | 'payment-receipt'
+  | 'extra-charge-notice'
+  | 'reset-password'
+  | 'welcome-parent'
+  | 'welcome-staff'
+  | 'welcome-user'
+  | 'student-removed'
+  | 'support-new-account'
+  | 'admin-student-registered'
+  | 'status-admission-review'
+  | 'status-denied'
+  | 'status-enrolled'
+  | 'status-not-enrolled'
+  | 'status-payment-pending'
+  | 'status-refund-pending'
+  | 'status-waitlist'
+  | 'status-withdraw-review'
+  | 'status-withdrawn'
+  | 'calendar-notification'
+  | 'event-broadcast'
+  | 'custom-html'
+  | 'wrap-layout-sample'
+  | 'broadcast-wrapper-sample'
+  | 'whatsapp-invite'
+  | 'whatsapp-group-invitation'
+
+export type RegistryEntry = {
+  title: string
+  ciView: string
+  render: () => JSX.Element
+}
+
+export const EMAIL_TEMPLATE_REGISTRY: Record<EmailTemplateSlug, RegistryEntry> = {
+  'final-warning': {
+    title: 'Final attendance warning',
+    ciView: 'app/Views/emails/final_warning.php',
+    render: () => <FinalWarningBody />,
+  },
+  'follow-up': {
+    title: 'Attendance follow-up',
+    ciView: 'app/Views/emails/follow_up.php',
+    render: () => <FollowUpBody />,
+  },
+  dismissal: {
+    title: 'Dismissal (absences)',
+    ciView: 'app/Views/emails/dismissal.php',
+    render: () => <DismissalBody />,
+  },
+  'parent-attendance-admin': {
+    title: 'Parent attendance — admin notification',
+    ciView: 'app/Views/emails/parent_attendance_admin.php',
+    render: () => <ParentAttendanceAdminBody />,
+  },
+  'parent-attendance-parent': {
+    title: 'Parent attendance — confirmation to parent',
+    ciView: 'app/Views/emails/parent_attendance_parent.php',
+    render: () => <ParentAttendanceParentBody />,
+  },
+  'below-sixty-performance': {
+    title: 'Below 60 performance',
+    ciView: 'app/Views/emails/below_sixty_performance.php',
+    render: () => <BelowSixtyPerformanceBody />,
+  },
+  'payment-receipt': {
+    title: 'Payment receipt',
+    ciView: 'app/Views/emails/payment_receipt.php',
+    render: () => <PaymentReceiptBody />,
+  },
+  'extra-charge-notice': {
+    title: 'Extra charge notice',
+    ciView: 'app/Views/emails/extra_charge_notice.php',
+    render: () => <ExtraChargeNoticeBody />,
+  },
+  'reset-password': {
+    title: 'Reset password',
+    ciView: 'app/Views/emails/reset_password.php',
+    render: () => <ResetPasswordBody />,
+  },
+  'welcome-parent': {
+    title: 'Welcome — parent activation',
+    ciView: 'app/Views/emails/welcome_parent.php',
+    render: () => <WelcomeParentBody />,
+  },
+  'welcome-staff': {
+    title: 'Welcome — staff activation',
+    ciView: 'app/Views/emails/welcome_staff.php',
+    render: () => <WelcomeStaffBody />,
+  },
+  'welcome-user': {
+    title: 'Welcome — generic user',
+    ciView: 'app/Views/emails/welcome_user.php',
+    render: () => <WelcomeUserBody />,
+  },
+  'student-removed': {
+    title: 'Student removed',
+    ciView: 'app/Views/emails/student_removed.php',
+    render: () => <StudentRemovedBody />,
+  },
+  'support-new-account': {
+    title: 'Support — new account alert',
+    ciView: 'app/Views/emails/support_new_account.php',
+    render: () => <SupportNewAccountBody />,
+  },
+  'admin-student-registered': {
+    title: 'Admin — student registered',
+    ciView: 'app/Views/emails/admin_student_registered.php',
+    render: () => <AdminStudentRegisteredBody />,
+  },
+  'status-admission-review': {
+    title: 'Status — admission under review',
+    ciView: 'app/Views/emails/status_admission_review.php',
+    render: () => <StatusAdmissionReviewBody />,
+  },
+  'status-denied': {
+    title: 'Status — admission denied',
+    ciView: 'app/Views/emails/status_denied.php',
+    render: () => <StatusDeniedBody />,
+  },
+  'status-enrolled': {
+    title: 'Status — enrolled',
+    ciView: 'app/Views/emails/status_enrolled.php',
+    render: () => <StatusEnrolledBody />,
+  },
+  'status-not-enrolled': {
+    title: 'Status — not enrolled',
+    ciView: 'app/Views/emails/status_not_enrolled.php',
+    render: () => <StatusNotEnrolledBody />,
+  },
+  'status-payment-pending': {
+    title: 'Status — payment pending',
+    ciView: 'app/Views/emails/status_payment_pending.php',
+    render: () => <StatusPaymentPendingBody />,
+  },
+  'status-refund-pending': {
+    title: 'Status — refund pending',
+    ciView: 'app/Views/emails/status_refund_pending.php',
+    render: () => <StatusRefundPendingBody />,
+  },
+  'status-waitlist': {
+    title: 'Status — waitlist',
+    ciView: 'app/Views/emails/status_waitlist.php',
+    render: () => <StatusWaitlistBody />,
+  },
+  'status-withdraw-review': {
+    title: 'Status — withdraw under review',
+    ciView: 'app/Views/emails/status_withdraw_review.php',
+    render: () => <StatusWithdrawReviewBody />,
+  },
+  'status-withdrawn': {
+    title: 'Status — withdrawn',
+    ciView: 'app/Views/emails/status_withdrawn.php',
+    render: () => <StatusWithdrawnBody />,
+  },
+  'calendar-notification': {
+    title: 'Calendar notification',
+    ciView: 'app/Views/emails/calendar_notification.php',
+    render: () => <CalendarNotificationBody />,
+  },
+  'event-broadcast': {
+    title: 'Event broadcast',
+    ciView: 'app/Views/emails/event_broadcast.php',
+    render: () => <EventBroadcastBody />,
+  },
+  'custom-html': {
+    title: 'Custom HTML body',
+    ciView: 'app/Views/emails/custom_html.php',
+    render: () => <CustomHtmlBody />,
+  },
+  'wrap-layout-sample': {
+    title: 'Wrap layout ($body_html)',
+    ciView: 'app/Views/emails/_wrap_layout.php',
+    render: () => <WrapLayoutSampleBody />,
+  },
+  'broadcast-wrapper-sample': {
+    title: 'Broadcast wrapper ($content)',
+    ciView: 'app/Views/emails/broadcast_wrapper.php',
+    render: () => <BroadcastWrapperSampleBody />,
+  },
+  'whatsapp-invite': {
+    title: 'WhatsApp invite',
+    ciView: 'app/Views/emails/whatsapp_invite.php',
+    render: () => <WhatsAppInviteBody />,
+  },
+  'whatsapp-group-invitation': {
+    title: 'WhatsApp group invitation (draft text)',
+    ciView: 'app/Views/emails/whatsapp_group_invitation.php',
+    render: () => <WhatsAppGroupInvitationDraftBody />,
+  },
+}
+
+export function isEmailTemplateSlug(s: string): s is EmailTemplateSlug {
+  return s in EMAIL_TEMPLATE_REGISTRY
+}

src/pages/emails/index.ts

@@ -0,0 +1,4 @@
+export { EmailPreviewLayout } from './EmailPreviewLayout'
+export { EmailTemplatesIndexPage } from './EmailTemplatesIndexPage'
+export { EmailTemplatePreviewPage } from './EmailTemplatePreviewPage'
+export { ParentEmailExtractorPage } from './ParentEmailExtractorPage'

src/pages/emails/textUtils.ts

@@ -0,0 +1,33 @@
+/** Normalize CI `$studentName` string | string[] into display lists */
+export function normalizeStudentNames(studentName: string | string[] | undefined): string[] {
+  if (studentName == null) return []
+  if (Array.isArray(studentName))
+    return studentName.map((n) => String(n).trim()).filter(Boolean)
+  const s = String(studentName).trim()
+  if (!s) return []
+  return s
+    .split(/\s*,\s*|\s*,?\s+and\s+/i)
+    .map((x) => x.trim())
+    .filter(Boolean)
+}
+
+export function joinNamesAnd(names: string[]): string {
+  const n = names.length
+  if (n === 0) return ''
+  if (n === 1) return names[0]!
+  if (n === 2) return `${names[0]} and ${names[1]}`
+  return `${names.slice(0, -1).join(', ')}, and ${names[n - 1]}`
+}
+
+export const PORTAL_HREF = 'https://alrahmaisgl.org'
+
+export function formatLocalDate(d: string | undefined): string {
+  if (!d) return '—'
+  const t = Date.parse(d)
+  if (Number.isNaN(t)) return d
+  return new Date(t).toLocaleDateString(undefined, {
+    month: '2-digit',
+    day: '2-digit',
+    year: 'numeric',
+  })
+}

src/pages/emails/whatsappInviteUtils.ts

@@ -0,0 +1,32 @@
+/** Ports CI `whatsapp_invite.php` section-name helpers */
+
+export function formatSectionName(section: string): string {
+  const raw = section.trim()
+  if (raw === '') return 'Class'
+
+  if (/^\s*grade\s+/i.test(raw)) {
+    return 'Grade ' + raw.replace(/^\s*grade\s+/i, '').trim()
+  }
+
+  const up = raw.toUpperCase()
+  if (up === 'KG') return 'KG'
+  if (up === 'YOUTH') return 'Youth'
+
+  const m = raw.match(/^\s*(\d{1,2})(?:\s*-\s*([A-Za-z]))?\s*$/)
+  if (m) {
+    const grade = Number(m[1])
+    const sec = m[2] ? String(m[2]).toUpperCase() : ''
+    return 'Grade ' + grade + (sec ? '-' + sec : '')
+  }
+
+  return 'Grade ' + raw.charAt(0).toUpperCase() + raw.slice(1)
+}
+
+export function joinWithAnd(items: Array<string | null | undefined>): string {
+  const arr = items.filter((v): v is string => Boolean(v && String(v).trim()))
+  const n = arr.length
+  if (n === 0) return ''
+  if (n === 1) return arr[0]!
+  if (n === 2) return `${arr[0]} and ${arr[1]}`
+  return `${arr.slice(0, -1).join(', ')} and ${arr[n - 1]}`
+}

src/pages/enrollWithdraw/EnrollmentWithdrawalPage.tsx

@@ -0,0 +1,505 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import {
+  fetchEnrollmentWithdrawalPage,
+  postEnrollmentWithdrawalAssignClass,
+  postEnrollmentWithdrawalStatusBatch,
+  postGenerateInvoiceForParent,
+} from '../../api/session'
+import type {
+  EnrollmentWithdrawalClassOption,
+  EnrollmentWithdrawalStudentRow,
+} from '../../api/types'
+import {
+  EnrollmentStatusBadge,
+  NewStudentBadge,
+  normStatus,
+  RemovedPriorYearBadge,
+} from './enrollmentStatusUi'
+import './enrollWithdrawPages.css'
+
+const STATUS_OPTIONS = [
+  'admission under review',
+  'payment pending',
+  'enrolled',
+  'withdraw under review',
+  'refund pending',
+  'withdrawn',
+  'waitlist',
+  'denied',
+] as const
+
+const SHOULD_INVOICE = new Set([
+  'payment pending',
+  'enrolled',
+  'withdrawn',
+  'refund pending',
+  'withdraw under review',
+])
+
+function sidOf(row: EnrollmentWithdrawalStudentRow): number {
+  return Number(row.student_id ?? row.id ?? 0)
+}
+
+function pidOf(row: EnrollmentWithdrawalStudentRow): number {
+  return Number(row.parent_id ?? row.guardian_id ?? 0)
+}
+
+function formatRegistrationDate(raw?: string | null): string {
+  if (raw == null || String(raw).trim() === '') return '-'
+  const s = String(raw)
+  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s)
+  if (iso) return `${iso[2]}-${iso[3]}-${iso[1]}`
+  const d = new Date(s)
+  return Number.isNaN(d.getTime()) ? s : `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}-${d.getFullYear()}`
+}
+
+function classOptionValue(c: EnrollmentWithdrawalClassOption): string {
+  const v = c.class_section_id ?? c.id
+  return v !== undefined && v !== null ? String(v) : ''
+}
+
+function classOptionLabel(c: EnrollmentWithdrawalClassOption): string {
+  const label = String(c.class_section_name ?? c.name ?? '').trim()
+  const id = classOptionValue(c)
+  return label || `Section ${id}`
+}
+
+export function EnrollmentWithdrawalPage() {
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const [searchParams] = useSearchParams()
+  const schoolYearParam = searchParams.get('schoolYear') ?? ''
+  const semesterParam = searchParams.get('semester') ?? ''
+
+  const [rows, setRows] = useState<EnrollmentWithdrawalStudentRow[]>([])
+  const [classes, setClasses] = useState<EnrollmentWithdrawalClassOption[]>([])
+  const [schoolYears, setSchoolYears] = useState<string[]>([])
+  const [selectedYear, setSelectedYear] = useState('')
+  const [currentYear, setCurrentYear] = useState('')
+  const [missingYear, setMissingYear] = useState(false)
+  const [isCurrentYear, setIsCurrentYear] = useState(true)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [toast, setToast] = useState<{ ok: boolean; message: string } | null>(null)
+  const [bulkWorking, setBulkWorking] = useState(false)
+
+  /** Pending edits: undefined means “use row value”. */
+  const [pendingStatus, setPendingStatus] = useState<Record<number, string>>({})
+  const [pendingClass, setPendingClass] = useState<Record<number, string>>({})
+
+  const readOnly = missingYear || !isCurrentYear
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchEnrollmentWithdrawalPage({
+      schoolYear: schoolYearParam || undefined,
+      semester: semesterParam || undefined,
+    })
+      .then((d) => {
+        if (cancelled) return
+        setRows(d.students)
+        setClasses(d.classes)
+        setSchoolYears(d.schoolYears.length > 0 ? d.schoolYears : [])
+        setSelectedYear(d.selectedYear)
+        setCurrentYear(d.currentYear)
+        setMissingYear(d.missingYear)
+        setIsCurrentYear(d.isCurrentYear)
+        setPendingStatus({})
+        setPendingClass({})
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load enrollment data.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYearParam, semesterParam])
+
+  useEffect(() => {
+    if (!toast) return
+    const t = window.setTimeout(() => setToast(null), 4000)
+    return () => window.clearTimeout(t)
+  }, [toast])
+
+  const effectiveStatus = useMemo(() => {
+    const out: Record<number, string> = {}
+    for (const row of rows) {
+      const sid = sidOf(row)
+      if (!sid) continue
+      const base = String(row.enrollment_status ?? '').trim()
+      out[sid] = pendingStatus[sid] ?? base
+    }
+    return out
+  }, [rows, pendingStatus])
+
+  function onFilterSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fd = new FormData(e.currentTarget)
+    const sy = String(fd.get('schoolYear') ?? '')
+    const sem = String(fd.get('semester') ?? '')
+    const next = new URLSearchParams()
+    if (sy) next.set('schoolYear', sy)
+    if (sem) next.set('semester', sem)
+    navigate({ pathname, search: next.toString() ? `?${next}` : '' })
+  }
+
+  async function onBulkSaveGenerate() {
+    if (readOnly) return
+    setBulkWorking(true)
+    const errors: string[] = []
+    const batchUpdates: { student_id: number; enrollment_status: string }[] = []
+    const parentInvoice = new Set<number>()
+
+    type Task = {
+      studentId: number
+      parentId: number
+      classId: string
+    }
+    type StatusTask = { studentId: number; parentId: number; desired: string }
+
+    const tasks: Task[] = []
+    const statusTasks: StatusTask[] = []
+
+    for (const row of rows) {
+      const studentId = sidOf(row)
+      const parentId = pidOf(row)
+      if (!studentId) continue
+
+      const prev = normStatus(row.enrollment_status ?? '')
+      const desiredRaw = (pendingStatus[studentId] ?? String(row.enrollment_status ?? '')).trim()
+      const desired = normStatus(desiredRaw)
+      const classId = pendingClass[studentId] ?? ''
+
+      const aur = normStatus('admission under review')
+      const pp = normStatus('payment pending')
+      const isAurToPp = prev === aur && desired === pp
+
+      if (isAurToPp && classId) {
+        tasks.push({ studentId, parentId, classId })
+        continue
+      }
+
+      if (desired && desired !== prev) {
+        if (isAurToPp && !classId) continue
+        statusTasks.push({
+          studentId,
+          parentId,
+          desired: desiredRaw.trim(),
+        })
+      }
+    }
+
+    if (tasks.length === 0 && statusTasks.length === 0) {
+      setToast({
+        ok: false,
+        message:
+          'Nothing to process. Set statuses as needed; for payment pending from admission under review, pick a class section.',
+      })
+      setBulkWorking(false)
+      return
+    }
+
+    for (const t of tasks) {
+      try {
+        if (!t.parentId) throw new Error('Missing parent for student.')
+        await postEnrollmentWithdrawalAssignClass({
+          student_id: t.studentId,
+          parent_id: t.parentId,
+          class_section_id: t.classId,
+        })
+        batchUpdates.push({ student_id: t.studentId, enrollment_status: 'payment pending' })
+        parentInvoice.add(t.parentId)
+      } catch (e: unknown) {
+        errors.push(
+          `Assign class (student ${t.studentId}): ${e instanceof ApiHttpError ? e.message : String(e)}`,
+        )
+      }
+    }
+
+    for (const s of statusTasks) {
+      batchUpdates.push({ student_id: s.studentId, enrollment_status: s.desired })
+      const n = normStatus(s.desired)
+      if (s.parentId && SHOULD_INVOICE.has(n)) parentInvoice.add(s.parentId)
+    }
+
+    const mergedByStudent = new Map<number, string>()
+    for (const u of batchUpdates) mergedByStudent.set(u.student_id, u.enrollment_status)
+    const deduped = [...mergedByStudent.entries()].map(([student_id, enrollment_status]) => ({
+      student_id,
+      enrollment_status,
+    }))
+
+    try {
+      if (deduped.length > 0) {
+        await postEnrollmentWithdrawalStatusBatch({
+          updates: deduped,
+          school_year: selectedYear || undefined,
+          semester: semesterParam || undefined,
+        })
+      }
+    } catch (e: unknown) {
+      errors.push(e instanceof ApiHttpError ? e.message : 'Status update failed.')
+    }
+
+    for (const pid of parentInvoice) {
+      if (!pid) continue
+      try {
+        await postGenerateInvoiceForParent(pid)
+      } catch {
+        /* non-fatal, mirrors legacy */
+      }
+    }
+
+    try {
+      const refreshed = await fetchEnrollmentWithdrawalPage({
+        schoolYear: schoolYearParam || undefined,
+        semester: semesterParam || undefined,
+      })
+      setRows(refreshed.students)
+      setClasses(refreshed.classes)
+      setSchoolYears(refreshed.schoolYears.length > 0 ? refreshed.schoolYears : [])
+      setSelectedYear(refreshed.selectedYear)
+      setCurrentYear(refreshed.currentYear)
+      setMissingYear(refreshed.missingYear)
+      setIsCurrentYear(refreshed.isCurrentYear)
+      setPendingStatus({})
+      setPendingClass({})
+    } catch {
+      /* ignore refresh failure */
+    }
+
+    if (errors.length > 0) setToast({ ok: false, message: errors[0] ?? 'Some updates failed.' })
+    else setToast({ ok: true, message: 'Saved and invoices queued.' })
+
+    setBulkWorking(false)
+  }
+
+  const yearSelectValue =
+    schoolYearParam || selectedYear || (schoolYears.length > 0 ? schoolYears[0] : '')
+  const semesterSelectValue = semesterParam
+
+  return (
+    <div className="container-fluid">
+      <div className="wrapper">
+        <div className="content" />
+        <h2 className="text-center mt-4 mb-3">Manage Enrollment &amp; Withdrawal</h2>
+
+        {missingYear ? (
+          <div className="alert alert-warning d-flex align-items-center" role="alert">
+            <div>
+              Current school year is not configured. This page is read-only until configured in{' '}
+              <Link to="/app/administrator/configuration_view" className="alert-link">
+                Add/Edit Configuration
+              </Link>{' '}
+              (key: <code>school_year</code>).
+            </div>
+          </div>
+        ) : null}
+
+        {toast ? (
+          <div className={`alert ${toast.ok ? 'alert-success' : 'alert-danger'}`} role="alert">
+            {toast.message}
+          </div>
+        ) : null}
+
+        <div className="row g-2 align-items-center justify-content-center mb-2">
+          <div className="col-auto">
+            <label htmlFor="schoolYearSelect" className="col-form-label">
+              School year
+            </label>
+          </div>
+          <div className="col-auto">
+            <form className="d-flex align-items-center gap-2 flex-wrap" onSubmit={onFilterSubmit}>
+              <select
+                id="schoolYearSelect"
+                name="schoolYear"
+                className="form-select form-select-sm"
+                style={{ minWidth: 180 }}
+                defaultValue={yearSelectValue}
+                key={`${yearSelectValue}-${semesterSelectValue}`}
+              >
+                {schoolYears.length > 0 ? (
+                  schoolYears.map((y) => (
+                    <option key={y} value={y}>
+                      {y}
+                    </option>
+                  ))
+                ) : (
+                  <option value={yearSelectValue}>{yearSelectValue || '—'}</option>
+                )}
+              </select>
+              <label htmlFor="ewSemester" className="col-form-label">
+                Semester
+              </label>
+              <select
+                id="ewSemester"
+                name="semester"
+                className="form-select form-select-sm"
+                style={{ minWidth: 140 }}
+                defaultValue={semesterSelectValue}
+              >
+                <option value="">—</option>
+                <option value="Fall">Fall</option>
+                <option value="Spring">Spring</option>
+              </select>
+              <button type="submit" className="btn btn-secondary btn-sm">
+                Apply
+              </button>
+            </form>
+          </div>
+          {selectedYear && currentYear && selectedYear !== currentYear ? (
+            <div className="col-auto">
+              <span className="badge bg-secondary">Read-only (Past Year)</span>
+            </div>
+          ) : null}
+        </div>
+
+        {loading ? <p className="text-muted text-center">Loading…</p> : null}
+        {!loading && error ? <div className="alert alert-danger">{error}</div> : null}
+
+        <div className="table-responsive">
+          <table className="table table-bordered table-striped mt-4 align-middle">
+            <thead>
+              <tr>
+                <th>Registration Date</th>
+                <th>Parent/Guardian</th>
+                <th>Student Name</th>
+                <th>New Student</th>
+                <th>Removed (Prior Years)</th>
+                <th>Current Class</th>
+                <th>Actual Status</th>
+                <th>Update Enrollment Status</th>
+                <th>Assign Class</th>
+              </tr>
+            </thead>
+            <tbody>
+              {!loading && !error && rows.length === 0 ? (
+                <tr>
+                  <td colSpan={9}>No students available.</td>
+                </tr>
+              ) : null}
+              {rows.map((student) => {
+                const sid = sidOf(student)
+                const pid = pidOf(student)
+                const eff = normStatus(effectiveStatus[sid] ?? '')
+                const base = String(student.enrollment_status ?? '').trim()
+                const selectVal = pendingStatus[sid] ?? base
+                const aur = normStatus('admission under review')
+                const pending =
+                  normStatus(selectVal) !== normStatus(base) ||
+                  (eff === aur && (pendingClass[sid] ?? '') !== '')
+                const showAssign = eff === aur
+                const familyHref =
+                  sid > 0 ? `/app/administrator/family?student_id=${encodeURIComponent(String(sid))}` : '#'
+
+                return (
+                  <tr key={sid || `${student.firstname}-${student.lastname}`} data-student-id={sid} data-parent-id={pid}>
+                    <td>{formatRegistrationDate(student.registration_date)}</td>
+                    <td>{student.parent_label ?? 'Unknown Parent'}</td>
+                    <td>
+                      {sid ? (
+                        <Link to={familyHref} className="text-decoration-none">
+                          {student.firstname ?? ''} {student.lastname ?? ''}
+                        </Link>
+                      ) : (
+                        <>
+                          {student.firstname ?? ''} {student.lastname ?? ''}
+                        </>
+                      )}
+                    </td>
+                    <td>
+                      <NewStudentBadge value={student.new_student} />
+                    </td>
+                    <td>
+                      <RemovedPriorYearBadge value={student.removed_previous_year} />
+                    </td>
+                    <td>{student.class_section ?? 'Class not Assigned'}</td>
+                    <td>
+                      <EnrollmentStatusBadge status={student.enrollment_status ?? 'not enrolled'} />
+                    </td>
+                    <td>
+                      <select
+                        className={`form-control enrollment-status form-select form-select-sm ${pending ? 'pending-status-select' : ''}`}
+                        disabled={readOnly}
+                        value={selectVal}
+                        onChange={(e) => {
+                          const v = e.target.value
+                          setPendingStatus((p) => {
+                            const next = { ...p, [sid]: v }
+                            if (normStatus(v) === normStatus(student.enrollment_status ?? '')) {
+                              delete next[sid]
+                            }
+                            return next
+                          })
+                          if (normStatus(v) !== aur) {
+                            setPendingClass((c) => {
+                              const next = { ...c }
+                              delete next[sid]
+                              return next
+                            })
+                          }
+                        }}
+                      >
+                        {STATUS_OPTIONS.map((opt) => (
+                          <option key={opt} value={opt}>
+                            {opt}
+                          </option>
+                        ))}
+                      </select>
+                    </td>
+                    <td>
+                      {showAssign ? (
+                        <select
+                          className="form-select form-select-sm assign-class-select"
+                          disabled={readOnly}
+                          value={pendingClass[sid] ?? ''}
+                          onChange={(e) =>
+                            setPendingClass((c) => ({ ...c, [sid]: e.target.value }))
+                          }
+                        >
+                          <option value="">— Select class section —</option>
+                          {classes.map((cls) => {
+                            const val = classOptionValue(cls)
+                            if (!val) return null
+                            return (
+                              <option key={val} value={val}>
+                                {classOptionLabel(cls)}
+                              </option>
+                            )
+                          })}
+                        </select>
+                      ) : (
+                        <span className="text-muted">—</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="d-flex justify-content-center gap-2 my-3 align-items-center">
+          <button
+            type="button"
+            className="btn btn-success btn-lg"
+            disabled={readOnly || bulkWorking}
+            title={readOnly ? 'Editing disabled for non-current year or missing configuration.' : undefined}
+            onClick={() => void onBulkSaveGenerate()}
+          >
+            Save &amp; Generate Invoice
+          </button>
+          {bulkWorking ? <span className="small text-muted">Processing…</span> : null}
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/enrollWithdraw/RegisteredStudentsPage.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchRegisteredNewStudents } from '../../api/session'
+import type { RegisteredNewStudentRow } from '../../api/types'
+import { AcademicFilterBar } from '../discounts/AcademicFilterBar'
+import {
+  EnrollmentStatusBadge,
+  NewStudentBadge,
+} from './enrollmentStatusUi'
+
+/** Admin new-students list — `GET /api/v1/administrator/enroll-withdrawal/registered-new-students` (JWT). SPA: `/app/admin/enrollment/new-students`. */
+
+function formatRegistrationDate(raw?: string | null): string {
+  if (raw == null || String(raw).trim() === '') return '-'
+  const s = String(raw)
+  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s)
+  if (iso) return `${iso[2]}-${iso[3]}-${iso[1]}`
+  const d = new Date(s)
+  return Number.isNaN(d.getTime()) ? s : `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}-${d.getFullYear()}`
+}
+
+export function RegisteredStudentsPage() {
+  const [searchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? undefined
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [rows, setRows] = useState<RegisteredNewStudentRow[]>([])
+  const [schoolYears, setSchoolYears] = useState<string[] | undefined>(undefined)
+  const [totalNew, setTotalNew] = useState<number | undefined>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [contactModal, setContactModal] = useState<RegisteredNewStudentRow | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchRegisteredNewStudents({ school_year: schoolYear, semester })
+      .then((d) => {
+        if (cancelled) return
+        setRows(d.new_students ?? [])
+        setTotalNew(d.total_new)
+        setSchoolYears(d.school_years)
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load registered students.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  return (
+    <div className="container-fluid">
+      <div className="wrapper">
+        <div className="content" />
+        <h2 className="text-center mt-4 mb-3">
+          Registered Students
+          {totalNew !== undefined ? (
+            <span className="badge bg-secondary ms-2">{totalNew}</span>
+          ) : null}
+        </h2>
+        <AcademicFilterBar schoolYears={schoolYears} />
+
+        {loading ? <p className="text-muted text-center">Loading…</p> : null}
+        {!loading && error ? <div className="alert alert-danger">{error}</div> : null}
+
+        <div className="table-responsive">
+          <table className="table table-bordered table-striped mt-4 align-middle w-100">
+            <thead>
+              <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>New Student</th>
+                <th>Current Class</th>
+                <th>Actual Status</th>
+                <th>Age</th>
+                <th>Registration Date</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {!loading && !error && rows.length === 0 ? (
+                <tr>
+                  <td colSpan={8} className="text-center">
+                    No students found.
+                  </td>
+                </tr>
+              ) : null}
+              {rows.map((student) => {
+                const sid = Number(student.id ?? 0)
+                const familyHref =
+                  sid > 0 ? `/app/administrator/family?student_id=${encodeURIComponent(String(sid))}` : '#'
+                return (
+                  <tr key={sid || `${student.firstname}-${student.lastname}`}>
+                    <td>
+                      <Link to={familyHref} className="text-decoration-none">
+                        {student.firstname ?? ''}
+                      </Link>
+                    </td>
+                    <td>
+                      <Link to={familyHref} className="text-decoration-none">
+                        {student.lastname ?? ''}
+                      </Link>
+                    </td>
+                    <td>
+                      <NewStudentBadge value={student.new_student} />
+                    </td>
+                    <td>{student.class_section ?? 'Class not Assigned'}</td>
+                    <td>
+                      <EnrollmentStatusBadge
+                        status={student.enrollment_status ?? 'not enrolled'}
+                        deniedVariant="light"
+                      />
+                    </td>
+                    <td>{student.age !== undefined && student.age !== null ? String(student.age) : '-'}</td>
+                    <td>{formatRegistrationDate(student.registration_date)}</td>
+                    <td>
+                      <button
+                        type="button"
+                        className="btn btn-warning btn-sm"
+                        onClick={() => setContactModal(student)}
+                      >
+                        Contact Information
+                      </button>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {contactModal ? (
+        <div
+          className="modal fade show d-block"
+          tabIndex={-1}
+          role="dialog"
+          aria-modal="true"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.35)' }}
+          onClick={() => setContactModal(null)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') setContactModal(null)
+          }}
+        >
+          <div className="modal-dialog modal-lg modal-dialog-scrollable" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-content shadow">
+              <div className="modal-header bg-primary text-white">
+                <h5 className="modal-title">
+                  Contact Info — {contactModal.firstname ?? ''} {contactModal.lastname ?? ''}
+                </h5>
+                <button
+                  type="button"
+                  className="btn-close btn-close-white"
+                  aria-label="Close"
+                  onClick={() => setContactModal(null)}
+                />
+              </div>
+              <div className="modal-body">
+                <h5 className="mb-3 border-bottom pb-1">Parent Information</h5>
+                <div className="row mb-3">
+                  <div className="col-md-6">
+                    <p>
+                      <strong>Name:</strong>{' '}
+                      {`${String(contactModal.parent_firstname ?? '')} ${String(contactModal.parent_lastname ?? '')}`.trim()}
+                    </p>
+                    <p>
+                      <strong>Phone:</strong> {contactModal.parent_phone ?? 'N/A'}
+                    </p>
+                  </div>
+                  <div className="col-md-6">
+                    <p>
+                      <strong>Email:</strong> {contactModal.parent_email ?? 'N/A'}
+                    </p>
+                  </div>
+                </div>
+                <h5 className="mb-3 border-bottom pb-1">Emergency Contact</h5>
+                <div className="row">
+                  <div className="col-md-6">
+                    <p>
+                      <strong>Name:</strong> {contactModal.emergency_name ?? 'N/A'}
+                    </p>
+                    <p>
+                      <strong>Relationship:</strong> {contactModal.emergency_relationship ?? 'N/A'}
+                    </p>
+                    <p>
+                      <strong>Phone:</strong> {contactModal.emergency_phone ?? 'N/A'}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setContactModal(null)}>
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/pages/enrollWithdraw/enrollWithdrawPages.css

@@ -0,0 +1,4 @@
+.pending-status-select {
+  border: 2px solid #ffc107 !important;
+  box-shadow: 0 0 0 0.1rem rgba(255, 193, 7, 0.35);
+}

src/pages/enrollWithdraw/enrollmentStatusUi.tsx

@@ -0,0 +1,54 @@
+/** Enrollment status badges aligned with legacy PHP enroll_withdraw views. */
+
+export function normStatus(v: string | undefined | null): string {
+  return String(v ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/[_\s]+/g, ' ')
+}
+
+type DeniedVariant = 'light' | 'dark'
+
+export function EnrollmentStatusBadge({
+  status,
+  deniedVariant = 'dark',
+}: {
+  status?: string | null
+  deniedVariant?: DeniedVariant
+}) {
+  const s = normStatus(status || 'not enrolled')
+
+  if (s === 'admission under review')
+    return <span className="badge bg-primary">admission under review</span>
+  if (s === 'payment pending')
+    return <span className="badge bg-warning text-dark">payment pending</span>
+  if (s === 'enrolled') return <span className="badge bg-success">enrolled</span>
+  if (s === 'withdraw under review')
+    return <span className="badge bg-warning text-dark">withdraw under review</span>
+  if (s === 'refund pending')
+    return <span className="badge bg-info text-dark">refund pending</span>
+  if (s === 'withdrawn') return <span className="badge bg-danger">withdrawn</span>
+  if (s === 'waitlist') return <span className="badge bg-secondary">waitlist</span>
+  if (s === 'denied')
+    return deniedVariant === 'light' ? (
+      <span className="badge bg-light">denied</span>
+    ) : (
+      <span className="badge bg-dark">denied</span>
+    )
+  if (s === 'not enrolled')
+    return <span className="badge bg-danger text-dark">not enrolled</span>
+  return <span className="badge bg-light text-dark">unknown</span>
+}
+
+export function NewStudentBadge({ value }: { value?: string | null }) {
+  const v = String(value ?? '').trim()
+  if (v === 'Yes') return <span className="badge bg-warning text-dark">Yes</span>
+  if (v === 'No') return <span className="badge bg-success">No</span>
+  return <span className="badge bg-light text-dark">Unknown</span>
+}
+
+export function RemovedPriorYearBadge({ value }: { value?: string | null }) {
+  const v = String(value ?? '').trim()
+  if (v === 'Yes') return <span className="badge bg-danger text-light">Yes</span>
+  return <span className="badge bg-secondary">No</span>
+}

src/pages/enrollWithdraw/index.ts

@@ -0,0 +1,2 @@
+export { RegisteredStudentsPage } from './RegisteredStudentsPage'
+export { EnrollmentWithdrawalPage } from './EnrollmentWithdrawalPage'