diff --git a/src/App.tsx b/src/App.tsx
index 7b416fc..c0409e2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,6 +38,186 @@ const CiPlaceholderPage = lazy(() =>
 const NavBuilderPage = lazy(() =>
   import('./pages/NavBuilderPage').then((m) => ({ default: m.NavBuilderPage })),
 )
+const AdminBroadcastEmailPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({ default: m.AdminBroadcastEmailPage })),
+)
+const AdminCalendarPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({ default: m.AdminCalendarPage })),
+)
+const AdminCalendarViewPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({ default: m.AdminCalendarViewPage })),
+)
+const AdminCalendarAddEventPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminCalendarAddEventPage,
+  })),
+)
+const AdminCalendarEditPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({ default: m.AdminCalendarEditPage })),
+)
+const AdminClassAssignmentPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminClassAssignmentPage,
+  })),
+)
+const AdminClassSectionPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({ default: m.AdminClassSectionPage })),
+)
+const AdminClassWarningModalPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminClassWarningModalPage,
+  })),
+)
+const AdminCourseMaterialsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminCourseMaterialsPage,
+  })),
+)
+const AdminDailyAttendancePage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminDailyAttendancePage,
+  })),
+)
+const AdminDailyAttendanceAnalysisPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminDailyAttendanceAnalysisPage,
+  })),
+)
+const AdminExamDraftsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminExamDraftsPage,
+  })),
+)
+const AdminGradingManagementPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminGradingManagementPage,
+  })),
+)
+const AdminIpBansPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminIpBansPage,
+  })),
+)
+const AdminLateSlipLogsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminLateSlipLogsPage,
+  })),
+)
+const AdminManageUsersPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminManageUsersPage,
+  })),
+)
+const AdminNotificationsAlertsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminNotificationsAlertsPage,
+  })),
+)
+const AdminParentProfilePage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminParentProfilePage,
+  })),
+)
+const AdminPaypalTransactionsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminPaypalTransactionsPage,
+  })),
+)
+const AdminPrintNotificationAdminsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminPrintNotificationAdminsPage,
+  })),
+)
+const AdminRemovedStudentsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminRemovedStudentsPage,
+  })),
+)
+const AdminSearchResultsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminSearchResultsPage,
+  })),
+)
+const AdminSectionsAutoDistributePage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminSectionsAutoDistributePage,
+  })),
+)
+const AdminStudentClassAssignmentPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminStudentClassAssignmentPage,
+  })),
+)
+const AdminStudentProfilesPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminStudentProfilesPage,
+  })),
+)
+const AdminSubjectCurriculumPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminSubjectCurriculumPage,
+  })),
+)
+const AdminTeacherClassAssignmentPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminTeacherClassAssignmentPage,
+  })),
+)
+const AdminTeacherSubmissionsPage = lazy(() =>
+  import('./pages/AdministratorToolPages').then((m) => ({
+    default: m.AdminTeacherSubmissionsPage,
+  })),
+)
+const CompetitionWinnersIndexPage = lazy(() =>
+  import('./pages/CompetitionWinnerPages').then((m) => ({
+    default: m.CompetitionWinnersIndexPage,
+  })),
+)
+const CompetitionWinnerFormPage = lazy(() =>
+  import('./pages/CompetitionWinnerPages').then((m) => ({
+    default: m.CompetitionWinnerFormPage,
+  })),
+)
+const CompetitionWinnerScoresPage = lazy(() =>
+  import('./pages/CompetitionWinnerPages').then((m) => ({
+    default: m.CompetitionWinnerScoresPage,
+  })),
+)
+const CompetitionWinnerPreviewPage = lazy(() =>
+  import('./pages/CompetitionWinnerPages').then((m) => ({
+    default: m.CompetitionWinnerPreviewPage,
+  })),
+)
+const CompetitionWinnerWinnersPage = lazy(() =>
+  import('./pages/CompetitionWinnerPages').then((m) => ({
+    default: m.CompetitionWinnerWinnersPage,
+  })),
+)
+const AdminClassProgressListPage = lazy(() =>
+  import('./pages/AdminProgressPages').then((m) => ({
+    default: m.AdminClassProgressListPage,
+  })),
+)
+const AdminClassProgressViewPage = lazy(() =>
+  import('./pages/AdminProgressPages').then((m) => ({
+    default: m.AdminClassProgressViewPage,
+  })),
+)
+const AdminStudentScoreCardPage = lazy(() =>
+  import('./pages/AdminProgressPages').then((m) => ({
+    default: m.AdminStudentScoreCardPage,
+  })),
+)
+const AdminEmergencyContactIndexPage = lazy(() =>
+  import('./pages/AdminProgressPages').then((m) => ({
+    default: m.AdminEmergencyContactIndexPage,
+  })),
+)
+const AdminEmergencyContactEditPage = lazy(() =>
+  import('./pages/AdminProgressPages').then((m) => ({
+    default: m.AdminEmergencyContactEditPage,
+  })),
+)
 const ParentHomePage = lazy(() =>
   import('./pages/parent/ParentHomePage').then((m) => ({ default: m.ParentHomePage })),
 )
@@ -229,6 +409,48 @@ export default function App() {
                   <Route index element={<Navigate to="home" replace />} />
                   <Route path="select-role" element={<RoleSelectPage />} />
                   <Route path="home" element={<AppHome />} />
+                  <Route path="admin/dashboard" element={<AppHome />} />
+                  <Route path="administrator/dashboard" element={<AppHome />} />
+                  <Route path="administrator/administratordashboard" element={<AppHome />} />
+                  <Route path="administrator/broadcast_email" element={<AdminBroadcastEmailPage />} />
+                  <Route path="administrator/calendar" element={<AdminCalendarPage />} />
+                  <Route path="administrator/calendar_view" element={<AdminCalendarViewPage />} />
+                  <Route path="administrator/calendar_add_event" element={<AdminCalendarAddEventPage />} />
+                  <Route path="administrator/calendar_edit/:eventId" element={<AdminCalendarEditPage />} />
+                  <Route path="administrator/class_assignment" element={<AdminClassAssignmentPage />} />
+                  <Route path="administrator/class_section" element={<AdminClassSectionPage />} />
+                  <Route path="administrator/class_warning_modal" element={<AdminClassWarningModalPage />} />
+                  <Route path="administrator/course_materials" element={<AdminCourseMaterialsPage />} />
+                  <Route path="administrator/daily_attendance" element={<AdminDailyAttendancePage />} />
+                  <Route path="administrator/daily_attendance_analysis" element={<AdminDailyAttendanceAnalysisPage />} />
+                  <Route path="administrator/exam_drafts" element={<AdminExamDraftsPage />} />
+                  <Route path="administrator/grading_management" element={<AdminGradingManagementPage />} />
+                  <Route path="administrator/ip_bans" element={<AdminIpBansPage />} />
+                  <Route path="administrator/late_slip_logs" element={<AdminLateSlipLogsPage />} />
+                  <Route path="administrator/manage_users" element={<AdminManageUsersPage />} />
+                  <Route path="administrator/notifications_alerts" element={<AdminNotificationsAlertsPage />} />
+                  <Route path="administrator/parent_profile" element={<AdminParentProfilePage />} />
+                  <Route path="administrator/paypal_transactions" element={<AdminPaypalTransactionsPage />} />
+                  <Route path="administrator/print_notification_admins" element={<AdminPrintNotificationAdminsPage />} />
+                  <Route path="administrator/removed_students" element={<AdminRemovedStudentsPage />} />
+                  <Route path="administrator/search_results" element={<AdminSearchResultsPage />} />
+                  <Route path="administrator/sections_auto_distribute" element={<AdminSectionsAutoDistributePage />} />
+                  <Route path="administrator/student_class_assignment" element={<AdminStudentClassAssignmentPage />} />
+                  <Route path="administrator/student_profiles" element={<AdminStudentProfilesPage />} />
+                  <Route path="administrator/subject_curriculum" element={<AdminSubjectCurriculumPage />} />
+                  <Route path="administrator/teacher_class_assignment" element={<AdminTeacherClassAssignmentPage />} />
+                  <Route path="administrator/teacher_submissions" element={<AdminTeacherSubmissionsPage />} />
+                  <Route path="admin/competition-winners" element={<CompetitionWinnersIndexPage />} />
+                  <Route path="admin/competition-winners/create" element={<CompetitionWinnerFormPage />} />
+                  <Route path="admin/competition-winners/:id/settings" element={<CompetitionWinnerFormPage />} />
+                  <Route path="admin/competition-winners/:id" element={<CompetitionWinnerScoresPage />} />
+                  <Route path="admin/competition-winners/:id/preview" element={<CompetitionWinnerPreviewPage />} />
+                  <Route path="admin/competition-winners/:id/winners" element={<CompetitionWinnerWinnersPage />} />
+                  <Route path="admin/progress" element={<AdminClassProgressListPage />} />
+                  <Route path="admin/progress/view/:id" element={<AdminClassProgressViewPage />} />
+                  <Route path="administrator/student-score-card" element={<AdminStudentScoreCardPage />} />
+                  <Route path="administrator/emergency-contacts" element={<AdminEmergencyContactIndexPage />} />
+                  <Route path="administrator/emergency-contacts/:contactId/edit" element={<AdminEmergencyContactEditPage />} />
                   <Route path="nav-builder" element={<NavBuilderPage />} />
                 </Route>
 
diff --git a/src/api/session.ts b/src/api/session.ts
index 6fa22ee..7189e3d 100644
--- a/src/api/session.ts
+++ b/src/api/session.ts
@@ -1,11 +1,25 @@
 import { apiUrl } from '../lib/apiOrigin'
 import { apiFetch, getStoredToken } from './http'
 import type {
+  AdministratorAbsenceFormResponse,
+  AdministratorAbsenceSubmitResponse,
+  AdministratorAdminAttendanceResponse,
+  AdministratorDailyAttendanceResponse,
+  AdministratorDashboardMetricsResponse,
+  AdministratorDashboardSearchResponse,
   ApiEnvelope,
+  BroadcastEmailOptionsResponse,
+  BroadcastEmailSendResponse,
+  ClassSectionShowResponse,
+  ClassSectionsResponse,
   DashboardPayload,
+  FamilyAdminIndexResponse,
+  GradingOverviewResponse,
+  IpBansResponse,
   LoginFailure,
   LoginResponse,
   LoginSuccess,
+  LateSlipLogsResponse,
   NavBuilderDataResponse,
   NavBuilderDeleteResponse,
   NavBuilderSaveResponse,
@@ -19,16 +33,41 @@ import type {
   ParentRegistrationOverviewResponse,
   ParentEmergencyContactsResponse,
   ParentAttendanceReportsListResponse,
+  SchoolCalendarListResponse,
+  SchoolCalendarOptionsResponse,
+  SchoolCalendarShowResponse,
   ParentAuthorizedUsersApiResponse,
   ParentMessagesResponse,
+  NotificationAlertsResponse,
+  PaypalTransactionsResponse,
+  PrintNotificationRecipientsResponse,
   SchoolCalendarEventsResponse,
+  StudentAssignmentsResponse,
   StudentScoresResponse,
   ReportCardAcknowledgementResponse,
   ReportCardMetaResponse,
+  RemovedStudentsResponse,
   ClassProgressGroupsResponse,
+  ClassProgressMetaResponse,
   ClassProgressShowResponse,
   ParentProfileRecord,
   ContactSubmitResponse,
+  CompetitionScoresEditResponse,
+  CompetitionScoresIndexResponse,
+  ExamDraftAdminResponse,
+  PublicCompetitionIndexResponse,
+  PublicCompetitionShowResponse,
+  StudentDirectoryResponse,
+  StudentScoreCardResponse,
+  StudentEmergencyContactResponse,
+  StudentParentResponse,
+  StudentPromotionTotalsResponse,
+  SubjectCurriculumResponse,
+  TeacherClassAssignmentsResponse,
+  TeacherSubmissionsResponse,
+  EmergencyContactGroupsResponse,
+  EmergencyContactShowResponse,
+  UsersResponse,
 } from './types'
 
 export async function loginRequest(
@@ -57,6 +96,702 @@ export async function fetchDashboardRoute(): Promise<ApiEnvelope<DashboardPayloa
   return apiFetch<ApiEnvelope<DashboardPayload>>('/api/v1/dashboard/route')
 }
 
+export async function fetchAdministratorDashboardMetrics(): Promise<AdministratorDashboardMetricsResponse> {
+  return apiFetch<AdministratorDashboardMetricsResponse>('/api/v1/administrator/dashboard/metrics')
+}
+
+export async function searchAdministratorDashboard(query: string): Promise<AdministratorDashboardSearchResponse> {
+  const q = query.trim()
+  const qs = q ? `?query=${encodeURIComponent(q)}` : ''
+  return apiFetch<AdministratorDashboardSearchResponse>(`/api/v1/administrator/dashboard/user-search${qs}`)
+}
+
+export async function fetchAdministratorAbsenceForm(): Promise<AdministratorAbsenceFormResponse> {
+  return apiFetch<AdministratorAbsenceFormResponse>('/api/v1/administrator/absence')
+}
+
+export async function submitAdministratorAbsence(payload: {
+  dates: string[]
+  reason_type?: string
+  reason: string
+}): Promise<AdministratorAbsenceSubmitResponse> {
+  return apiFetch<AdministratorAbsenceSubmitResponse>('/api/v1/administrator/absence', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchAdministratorDailyAttendance(
+  params?: { semester?: string | null; schoolYear?: string | null },
+): Promise<AdministratorDailyAttendanceResponse> {
+  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<AdministratorDailyAttendanceResponse>(`/api/v1/attendance/admin/daily${qs}`)
+}
+
+export async function addAdministratorAttendanceEntry(payload: {
+  class_section_id: number
+  student_id: number
+  school_id?: string | null
+  status: 'present' | 'absent' | 'late'
+  date?: string | null
+  reason?: string | null
+  class_id?: number | null
+  is_reported?: 'yes' | 'no' | null
+}): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>('/api/v1/attendance/admin/add-entry', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateAdministratorAttendance(payload: {
+  class_section_id: number
+  student_id: number
+  school_id?: string | null
+  status: 'present' | 'absent' | 'late'
+  date: string
+  reason?: string | null
+  class_id?: number | null
+  semester?: string | null
+  school_year?: string | null
+  is_reported?: string | null
+}): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>('/api/v1/attendance/admin/update', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchAdministratorAdminAttendance(
+  params?: { date?: string | null; semester?: string | null; schoolYear?: string | null },
+): Promise<AdministratorAdminAttendanceResponse> {
+  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)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<AdministratorAdminAttendanceResponse>(`/api/v1/attendance/staff/admins${qs}`)
+}
+
+export async function saveAdministratorAdminAttendance(payload: {
+  date: string
+  semester: string
+  school_year: string
+  admins: Record<
+    string,
+    {
+      status?: string | null
+      reason?: string | null
+      role_name?: string | null
+      role_slug?: string | null
+    }
+  >
+}): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>('/api/v1/attendance/staff/admins/save', {
+    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')
+}
+
+export async function sendBroadcastEmail(payload: {
+  from_key: string
+  mode: 'personalized' | 'standard'
+  subject: string
+  body_html: string
+  wrap_layout?: boolean
+  preheader?: string
+  cta_text?: string
+  cta_url?: string
+  test_email?: string
+  send_test_only?: boolean
+  parent_ids?: number[]
+}): Promise<BroadcastEmailSendResponse> {
+  return apiFetch<BroadcastEmailSendResponse>('/api/v1/broadcast-email/send', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchSchoolCalendarOptions(): Promise<SchoolCalendarOptionsResponse> {
+  return apiFetch<SchoolCalendarOptionsResponse>('/api/v1/settings/school-calendar/options')
+}
+
+export async function fetchAdministratorCalendarEvents(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+  audience?: 'admin' | 'teacher' | 'parent' | null
+}): Promise<SchoolCalendarListResponse> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.audience) query.set('audience', params.audience)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<SchoolCalendarListResponse>(`/api/v1/settings/school-calendar/events${qs}`)
+}
+
+export async function fetchAdministratorCalendarEvent(eventId: number): Promise<SchoolCalendarShowResponse> {
+  return apiFetch<SchoolCalendarShowResponse>(`/api/v1/settings/school-calendar/events/${eventId}`)
+}
+
+export async function createAdministratorCalendarEvent(payload: {
+  title: string
+  description?: string
+  event_type?: string
+  date: string
+  notify_parent?: boolean
+  notify_teacher?: boolean
+  notify_admin?: boolean
+  no_school?: boolean
+  school_year?: string
+  semester?: string
+  send_email_parent?: boolean
+  send_email_teacher?: boolean
+  send_email_admin?: boolean
+}): Promise<SchoolCalendarShowResponse> {
+  return apiFetch<SchoolCalendarShowResponse>('/api/v1/settings/school-calendar/events', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateAdministratorCalendarEvent(
+  eventId: number,
+  payload: Record<string, unknown>,
+): Promise<SchoolCalendarShowResponse> {
+  return apiFetch<SchoolCalendarShowResponse>(`/api/v1/settings/school-calendar/events/${eventId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function deleteAdministratorCalendarEvent(eventId: number): Promise<ApiEnvelope<null>> {
+  return apiFetch<ApiEnvelope<null>>(`/api/v1/settings/school-calendar/events/${eventId}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchStudentAssignments(
+  schoolYear?: string | null,
+): Promise<StudentAssignmentsResponse> {
+  const query = schoolYear ? `?school_year=${encodeURIComponent(schoolYear)}` : ''
+  return apiFetch<StudentAssignmentsResponse>(`/api/v1/students/assignments${query}`)
+}
+
+export async function assignStudentClass(payload: {
+  student_id: number
+  class_section_ids?: number[]
+  class_section_id?: number[]
+  is_event_only?: boolean
+}): Promise<{ ok: boolean; message?: string }> {
+  return apiFetch<{ ok: boolean; message?: string }>('/api/v1/students/assign-class', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      student_id: payload.student_id,
+      class_section_id: payload.class_section_id ?? payload.class_section_ids ?? [],
+      is_event_only: payload.is_event_only ?? false,
+    }),
+  })
+}
+
+export async function removeStudentClass(payload: {
+  student_id: number
+  class_section_id: number
+}): Promise<{ ok: boolean; message?: string }> {
+  return apiFetch<{ ok: boolean; message?: string }>('/api/v1/students/remove-class', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchRemovedStudents(
+  schoolYear?: string | null,
+): Promise<RemovedStudentsResponse> {
+  const query = schoolYear ? `?school_year=${encodeURIComponent(schoolYear)}` : ''
+  return apiFetch<RemovedStudentsResponse>(`/api/v1/students/removed${query}`)
+}
+
+export async function setStudentActive(payload: {
+  student_id: number
+  is_active: boolean
+}): Promise<{ ok: boolean; message?: string }> {
+  return apiFetch<{ ok: boolean; message?: string }>('/api/v1/students/set-active', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function autoDistributeStudents(payload: {
+  class_id?: number
+  class_section_id?: number
+  students_per_section: number
+  school_year?: string | null
+}): Promise<ApiEnvelope<{ sections?: Array<Record<string, unknown>>; message?: string }>> {
+  return apiFetch<ApiEnvelope<{ sections?: Array<Record<string, unknown>>; message?: string }>>(
+    '/api/v1/students/auto-distribute',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export async function fetchStudentPromotionTotals(
+  schoolYear?: string | null,
+): Promise<StudentPromotionTotalsResponse> {
+  const query = schoolYear ? `?school_year=${encodeURIComponent(schoolYear)}` : ''
+  return apiFetch<StudentPromotionTotalsResponse>(`/api/v1/students/promotion-totals${query}`)
+}
+
+export async function fetchStudentDirectory(
+  schoolYear?: string | null,
+): Promise<StudentDirectoryResponse> {
+  const query = schoolYear ? `?school_year=${encodeURIComponent(schoolYear)}` : ''
+  return apiFetch<StudentDirectoryResponse>(`/api/v1/students${query}`)
+}
+
+export async function updateStudentProfile(
+  studentId: number,
+  payload: Record<string, unknown>,
+): Promise<{ ok: boolean; message?: string }> {
+  return apiFetch<{ ok: boolean; message?: string }>(`/api/v1/students/${studentId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchStudentParent(studentId: number): Promise<StudentParentResponse> {
+  return apiFetch<StudentParentResponse>(`/api/v1/students/${studentId}/parents`)
+}
+
+export async function fetchStudentEmergencyContacts(
+  studentId: number,
+): Promise<StudentEmergencyContactResponse> {
+  return apiFetch<StudentEmergencyContactResponse>(`/api/v1/students/${studentId}/emergency-contacts`)
+}
+
+export async function fetchTeacherClassAssignments(
+  schoolYear?: string | null,
+): Promise<TeacherClassAssignmentsResponse> {
+  const query = schoolYear ? `?school_year=${encodeURIComponent(schoolYear)}` : ''
+  return apiFetch<TeacherClassAssignmentsResponse>(
+    `/api/v1/administrator/teacher-class/assignments${query}`,
+  )
+}
+
+export async function assignTeacherClass(payload: {
+  teacher_id: number
+  class_section_id: number
+  teacher_role?: string
+  school_year?: string
+}): Promise<{ ok: boolean; message?: string; position?: string | null }> {
+  return apiFetch<{ ok: boolean; message?: string; position?: string | null }>(
+    '/api/v1/administrator/teacher-class/assign',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export async function deleteTeacherClassAssignment(payload: {
+  teacher_id: number
+  class_section_id: number
+  position: 'main' | 'ta'
+  school_year?: string
+}): Promise<{ ok: boolean; message?: string }> {
+  return apiFetch<{ ok: boolean; message?: string }>(
+    '/api/v1/administrator/teacher-class/delete',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export async function fetchTeacherSubmissions(): Promise<TeacherSubmissionsResponse> {
+  return apiFetch<TeacherSubmissionsResponse>('/api/v1/administrator/teacher-submissions')
+}
+
+export async function fetchPublishedCompetitions(): Promise<PublicCompetitionIndexResponse> {
+  return apiFetch<PublicCompetitionIndexResponse>('/api/winners/competitions', {}, { attachAuth: false })
+}
+
+export async function fetchPublishedCompetition(id: number): Promise<PublicCompetitionShowResponse> {
+  return apiFetch<PublicCompetitionShowResponse>(`/api/winners/competitions/${id}`, {}, { attachAuth: false })
+}
+
+export async function fetchCompetitionScoresIndex(
+  classSectionId?: number | null,
+): Promise<CompetitionScoresIndexResponse> {
+  const query = classSectionId ? `?class_section_id=${encodeURIComponent(String(classSectionId))}` : ''
+  return apiFetch<CompetitionScoresIndexResponse>(`/api/v1/competition-scores${query}`)
+}
+
+export async function fetchCompetitionScoresDetail(
+  id: number,
+  classSectionId?: number | null,
+): Promise<CompetitionScoresEditResponse> {
+  const query = classSectionId ? `?class_section_id=${encodeURIComponent(String(classSectionId))}` : ''
+  return apiFetch<CompetitionScoresEditResponse>(`/api/v1/competition-scores/${id}${query}`)
+}
+
+export async function saveCompetitionScores(
+  id: number,
+  payload: { class_section_id?: number | null; scores: Record<string, number | string> },
+): Promise<{ ok: boolean; message?: string; savedCount?: number; invalidScores?: string[] }> {
+  return apiFetch<{ ok: boolean; message?: string; savedCount?: number; invalidScores?: string[] }>(
+    `/api/v1/competition-scores/${id}`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export async function notifyTeacherSubmissions(payload: {
+  notify: number[]
+  missing_items?: Record<string, string[]>
+}): Promise<{ message?: string; sent?: number; failed?: number }> {
+  return apiFetch<{ message?: string; sent?: number; failed?: number }>(
+    '/api/v1/administrator/teacher-submissions/notify',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export async function fetchSubjectCurriculum(): Promise<SubjectCurriculumResponse> {
+  return apiFetch<SubjectCurriculumResponse>('/api/v1/subjects/curriculum')
+}
+
+export async function createSubjectCurriculum(payload: {
+  class_id: number
+  subject: string
+  unit_number?: number | null
+  unit_title?: string | null
+  chapter_name: string
+}): Promise<ApiEnvelope<{ entry?: unknown }>> {
+  return apiFetch<ApiEnvelope<{ entry?: unknown }>>('/api/v1/subjects/curriculum', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateSubjectCurriculum(
+  id: number,
+  payload: Record<string, unknown>,
+): Promise<ApiEnvelope<{ entry?: unknown }>> {
+  return apiFetch<ApiEnvelope<{ entry?: unknown }>>(`/api/v1/subjects/curriculum/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function deleteSubjectCurriculum(id: number): Promise<ApiEnvelope<null>> {
+  return apiFetch<ApiEnvelope<null>>(`/api/v1/subjects/curriculum/${id}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchClassSections(params?: {
+  search?: string
+  schoolYear?: string | null
+  semester?: string | null
+  page?: number
+  perPage?: number
+}): Promise<ClassSectionsResponse> {
+  const query = new URLSearchParams()
+  if (params?.search) query.set('search', params.search)
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.page) query.set('page', String(params.page))
+  if (params?.perPage) query.set('per_page', String(params.perPage))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<ClassSectionsResponse>(`/api/v1/class-sections${qs}`)
+}
+
+export async function fetchClassSection(sectionId: number): Promise<ClassSectionShowResponse> {
+  return apiFetch<ClassSectionShowResponse>(`/api/v1/class-sections/${sectionId}`)
+}
+
+export async function createClassSection(payload: {
+  class_id: number
+  class_section_id: number
+  class_section_name: string
+  semester: string
+  school_year: string
+}): Promise<ClassSectionShowResponse> {
+  return apiFetch<ClassSectionShowResponse>('/api/v1/class-sections', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function updateClassSection(
+  sectionId: number,
+  payload: Partial<{
+    class_id: number
+    class_section_id: number
+    class_section_name: string
+    semester: string
+    school_year: string
+  }>,
+): Promise<ClassSectionShowResponse> {
+  return apiFetch<ClassSectionShowResponse>(`/api/v1/class-sections/${sectionId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function deleteClassSection(sectionId: number): Promise<ApiEnvelope<null>> {
+  return apiFetch<ApiEnvelope<null>>(`/api/v1/class-sections/${sectionId}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchExamDraftAdminData(): Promise<ExamDraftAdminResponse> {
+  return apiFetch<ExamDraftAdminResponse>('/api/v1/exams/drafts/admin')
+}
+
+async function fetchMultipartJson<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 Error(msg || `HTTP ${res.status}`)
+  }
+  return body as T
+}
+
+export async function uploadLegacyExamDraft(payload: {
+  class_section_id: number
+  school_year: string
+  semester: string
+  exam_type?: string
+  old_exam_file: File
+}): Promise<{ ok: boolean; message?: string }> {
+  const formData = new FormData()
+  formData.set('class_section_id', String(payload.class_section_id))
+  formData.set('school_year', payload.school_year)
+  formData.set('semester', payload.semester)
+  if (payload.exam_type) formData.set('exam_type', payload.exam_type)
+  formData.set('old_exam_file', payload.old_exam_file)
+  return fetchMultipartJson('/api/v1/exams/drafts/admin/legacy', formData)
+}
+
+export async function reviewExamDraft(payload: {
+  draft_id: number
+  review_status?: string
+  admin_comments?: string
+  final_file?: File | null
+}): Promise<{ ok: boolean; message?: string }> {
+  const formData = new FormData()
+  formData.set('draft_id', String(payload.draft_id))
+  if (payload.review_status) formData.set('review_status', payload.review_status)
+  if (payload.admin_comments) formData.set('admin_comments', payload.admin_comments)
+  if (payload.final_file) formData.set('final_file', payload.final_file)
+  return fetchMultipartJson('/api/v1/exams/drafts/admin/review', formData)
+}
+
+export async function fetchGradingOverview(params?: {
+  classId?: number | null
+  semester?: string | null
+  schoolYear?: string | null
+}): Promise<GradingOverviewResponse> {
+  const query = new URLSearchParams()
+  if (params?.classId) query.set('class_id', String(params.classId))
+  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<GradingOverviewResponse>(`/api/v1/grading/overview${qs}`)
+}
+
+export async function fetchIpBans(params?: {
+  status?: 'all' | 'active'
+  page?: number
+  perPage?: number
+}): Promise<IpBansResponse> {
+  const query = new URLSearchParams()
+  if (params?.status) query.set('status', params.status)
+  if (params?.page) query.set('page', String(params.page))
+  if (params?.perPage) query.set('per_page', String(params.perPage))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<IpBansResponse>(`/api/v1/ip-bans${qs}`)
+}
+
+export async function banIp(payload: {
+  id?: number
+  ip?: string
+  hours?: number
+}): Promise<ApiEnvelope<{ ban?: unknown }>> {
+  return apiFetch<ApiEnvelope<{ ban?: unknown }>>('/api/v1/ip-bans/ban', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function unbanIp(payload: {
+  id?: number
+  ip?: string
+  all?: boolean
+}): Promise<ApiEnvelope<{ ban?: unknown; count?: number }>> {
+  return apiFetch<ApiEnvelope<{ ban?: unknown; count?: number }>>('/api/v1/ip-bans/unban', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function fetchLateSlipLogs(params?: {
+  schoolYear?: string | null
+  semester?: string | null
+  q?: string
+  dateFrom?: string
+  dateTo?: string
+  page?: number
+  perPage?: number
+}): Promise<LateSlipLogsResponse> {
+  const query = new URLSearchParams()
+  if (params?.schoolYear) query.set('school_year', params.schoolYear)
+  if (params?.semester) query.set('semester', params.semester)
+  if (params?.q) query.set('q', params.q)
+  if (params?.dateFrom) query.set('date_from', params.dateFrom)
+  if (params?.dateTo) query.set('date_to', params.dateTo)
+  if (params?.page) query.set('page', String(params.page))
+  if (params?.perPage) query.set('per_page', String(params.perPage))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<LateSlipLogsResponse>(`/api/v1/attendance/late-slip-logs${qs}`)
+}
+
+export async function deleteLateSlipLog(id: number): Promise<ApiEnvelope<null>> {
+  return apiFetch<ApiEnvelope<null>>(`/api/v1/attendance/late-slip-logs/${id}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function fetchUsers(params?: {
+  sort?: string
+  order?: 'asc' | 'desc'
+}): Promise<UsersResponse> {
+  const query = new URLSearchParams()
+  if (params?.sort) query.set('sort', params.sort)
+  if (params?.order) query.set('order', params.order)
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<UsersResponse>(`/api/v1/users${qs}`)
+}
+
+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 fetchNotificationAlerts(): Promise<NotificationAlertsResponse> {
+  return apiFetch<NotificationAlertsResponse>('/api/v1/administrator/notifications/alerts')
+}
+
+export async function saveNotificationAlerts(
+  subjects: Record<string, string[]>,
+): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>('/api/v1/administrator/notifications/alerts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ subjects }),
+  })
+}
+
+export async function fetchPrintNotificationRecipients(): Promise<PrintNotificationRecipientsResponse> {
+  return apiFetch<PrintNotificationRecipientsResponse>(
+    '/api/v1/administrator/notifications/print-recipients',
+  )
+}
+
+export async function savePrintNotificationRecipients(
+  notify: Record<string, number | boolean>,
+): Promise<{ message?: string }> {
+  return apiFetch<{ message?: string }>(
+    '/api/v1/administrator/notifications/print-recipients',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ notify }),
+    },
+  )
+}
+
+export async function fetchFamilyAdminIndex(params?: {
+  studentId?: number | null
+  guardianId?: number | null
+}): Promise<FamilyAdminIndexResponse> {
+  const query = new URLSearchParams()
+  if (params?.studentId) query.set('student_id', String(params.studentId))
+  if (params?.guardianId) query.set('guardian_id', String(params.guardianId))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<FamilyAdminIndexResponse>(`/api/v1/family-admin${qs}`)
+}
+
+export async function fetchPaypalTransactions(params?: {
+  q?: string
+  perPage?: number
+}): Promise<PaypalTransactionsResponse> {
+  const query = new URLSearchParams()
+  if (params?.q) query.set('q', params.q)
+  if (params?.perPage) query.set('per_page', String(params.perPage))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<PaypalTransactionsResponse>(`/api/v1/paypal-transactions${qs}`)
+}
+
+export async function fetchPaypalTransactionsCsv(params?: { q?: string }): Promise<Blob> {
+  const headers = new Headers({ Accept: 'text/csv' })
+  const token = getStoredToken()
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+  const query = new URLSearchParams()
+  if (params?.q) query.set('q', params.q)
+  const suffix = query.size > 0 ? `?${query.toString()}` : ''
+  const res = await fetch(apiUrl(`/api/v1/paypal-transactions/csv${suffix}`), { headers })
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  return res.blob()
+}
+
 export async function fetchNavMenu(): Promise<NavMenuResponse> {
   return apiFetch<NavMenuResponse>('/api/v1/nav-builder/menu')
 }
@@ -208,14 +943,95 @@ export async function fetchReportCardAcknowledgement(
   )
 }
 
-export async function fetchClassProgressGroups(): Promise<ClassProgressGroupsResponse> {
-  return apiFetch<ClassProgressGroupsResponse>('/api/v1/class-progress?group_by_week=1')
+export async function fetchClassProgressGroups(params?: {
+  classSectionId?: number | null
+  status?: string | null
+  weekStart?: string | null
+  weekEnd?: string | null
+  subject?: string | null
+  page?: number
+  perPage?: number
+}): Promise<ClassProgressGroupsResponse> {
+  const query = new URLSearchParams()
+  query.set('group_by_week', '1')
+  if (params?.classSectionId) query.set('class_section_id', String(params.classSectionId))
+  if (params?.status) query.set('status', params.status)
+  if (params?.weekStart) query.set('week_start', params.weekStart)
+  if (params?.weekEnd) query.set('week_end', params.weekEnd)
+  if (params?.subject) query.set('subject', params.subject)
+  if (params?.page) query.set('page', String(params.page))
+  if (params?.perPage) query.set('per_page', String(params.perPage))
+  return apiFetch<ClassProgressGroupsResponse>(`/api/v1/class-progress?${query.toString()}`)
 }
 
 export async function fetchClassProgressDetail(id: number): Promise<ClassProgressShowResponse> {
   return apiFetch<ClassProgressShowResponse>(`/api/v1/class-progress/${id}`)
 }
 
+export async function fetchClassProgressMeta(params?: {
+  classId?: number | null
+  sundayCount?: number | null
+}): Promise<ClassProgressMetaResponse> {
+  const query = new URLSearchParams()
+  if (params?.classId) query.set('class_id', String(params.classId))
+  if (params?.sundayCount) query.set('sunday_count', String(params.sundayCount))
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<ClassProgressMetaResponse>(`/api/v1/class-progress/meta${qs}`)
+}
+
+export async function fetchStudentScoreCard(studentId: number): Promise<StudentScoreCardResponse> {
+  return apiFetch<StudentScoreCardResponse>(`/api/v1/students/${studentId}/score-card`)
+}
+
+export async function fetchAdministratorEmergencyContacts(params?: {
+  parentId?: number | null
+  parentIds?: number[]
+}): Promise<EmergencyContactGroupsResponse> {
+  const query = new URLSearchParams()
+  if (params?.parentId) query.set('parent_id', String(params.parentId))
+  for (const id of params?.parentIds ?? []) {
+    query.append('parent_ids[]', String(id))
+  }
+  const qs = query.size > 0 ? `?${query.toString()}` : ''
+  return apiFetch<EmergencyContactGroupsResponse>(`/api/v1/administrator/emergency-contacts${qs}`)
+}
+
+export async function fetchAdministratorEmergencyContact(
+  contactId: number,
+  parentId: number,
+): Promise<EmergencyContactShowResponse> {
+  return apiFetch<EmergencyContactShowResponse>(
+    `/api/v1/administrator/emergency-contacts/${contactId}?parent_id=${encodeURIComponent(String(parentId))}`,
+  )
+}
+
+export async function updateAdministratorEmergencyContact(
+  contactId: number,
+  payload: {
+    parent_id: number
+    name: string
+    cellphone: string
+    email?: string | null
+    relation?: string | null
+  },
+): Promise<EmergencyContactShowResponse> {
+  return apiFetch<EmergencyContactShowResponse>(`/api/v1/administrator/emergency-contacts/${contactId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+}
+
+export async function deleteAdministratorEmergencyContact(
+  contactId: number,
+  parentId: number,
+): Promise<{ ok: true }> {
+  return apiFetch<{ ok: true }>(
+    `/api/v1/administrator/emergency-contacts/${contactId}?parent_id=${encodeURIComponent(String(parentId))}`,
+    { method: 'DELETE' },
+  )
+}
+
 export async function updateParentProfile(
   payload: Required<
     Pick<
diff --git a/src/api/types.ts b/src/api/types.ts
index ce43736..3d9772b 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -87,6 +87,120 @@ export type NavBuilderDataResponse = ApiEnvelope<{ data: NavBuilderData }>
 export type NavBuilderSaveResponse = ApiEnvelope<{ id: number }>
 export type NavBuilderDeleteResponse = ApiEnvelope<null>
 
+export type AdministratorDashboardMetricsResponse = {
+  counts?: {
+    students?: number
+    teachers?: number
+    teacherAssistants?: number
+    admins?: number
+    parents?: number
+  }
+  recentActivities?: Array<{
+    login_time?: string | null
+    email?: string | null
+  }>
+  meta?: {
+    schoolYear?: string | null
+    semester?: string | null
+  }
+}
+
+export type AdministratorDashboardSearchResponse = {
+  query: string
+  results: {
+    users?: Record<string, unknown>[]
+    students?: Record<string, unknown>[]
+    parents?: Record<string, unknown>[]
+    staff?: Record<string, unknown>[]
+    emergency_contacts?: Record<string, unknown>[]
+  }
+  scope_used?: string
+  scope_label?: string
+  total_found?: number
+}
+
+export type AdministratorAbsenceRow = {
+  date?: string | null
+  status?: string | null
+  reason?: string | null
+}
+
+export type AdministratorAbsenceFormResponse = {
+  admin_name?: string | null
+  semester?: string | null
+  schoolYear?: string | null
+  existing?: AdministratorAbsenceRow[]
+  availableDates?: string[]
+}
+
+export type AdministratorAbsenceSubmitResponse = {
+  message?: string
+  saved?: number
+  dates?: string[]
+}
+
+export type AdministratorDailyAttendanceEntry = {
+  date?: string | null
+  status?: string | null
+  reason?: string | null
+  is_reported?: string | null
+  modified_by?: string | number | null
+}
+
+export type AdministratorDailyAttendanceSummary = {
+  total_presence?: number
+  total_late?: number
+  total_absence?: number
+  total_attendance?: number
+}
+
+export type AdministratorDailyAttendanceStudent = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+  school_id?: string | null
+}
+
+export type AdministratorDailyAttendanceSection = {
+  id?: number
+  class_id?: number
+  class_section_id?: number | string
+  class_section_name?: string | null
+}
+
+export type AdministratorDailyAttendanceResponse = {
+  attendance_data?: Record<string, Record<string, AdministratorDailyAttendanceEntry[]>>
+  attendance_record?: Record<string, Record<string, AdministratorDailyAttendanceSummary>>
+  students_by_section?: Record<string, AdministratorDailyAttendanceStudent[]>
+  grades?: Record<string, AdministratorDailyAttendanceSection[]>
+  dates_by_section?: Record<string, string[]>
+  date_list?: string[]
+  no_school_days?: Record<string, boolean>
+  total_passed_days?: number
+  semester?: string | null
+  school_year?: string | null
+  current_admin_name?: string | null
+}
+
+export type AdministratorAdminAttendanceRow = {
+  user_id?: number
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+  role_name?: string | null
+  role_slug?: string | null
+  status?: string | null
+  reason?: string | null
+  date?: string | null
+}
+
+export type AdministratorAdminAttendanceResponse = {
+  semester?: string | null
+  school_year?: string | null
+  date?: string | null
+  admins_grid?: AdministratorAdminAttendanceRow[]
+}
+
 export type ParentAttendanceRow = {
   firstname: string
   lastname: string
@@ -158,6 +272,646 @@ export type ContactSubmitResponse = {
   message?: string
 }
 
+export type BroadcastEmailParentOption = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+  school_id?: string | null
+}
+
+export type BroadcastEmailSenderOption = {
+  key: string
+  label: string
+}
+
+export type BroadcastEmailOptionsResponse = {
+  ok: true
+  parents: BroadcastEmailParentOption[]
+  fromOptions: BroadcastEmailSenderOption[]
+}
+
+export type BroadcastEmailSendResponse = {
+  ok: boolean
+  message?: string
+  stats?: {
+    mode?: string
+    sent?: number
+    attempted?: number
+    failed?: number
+  }
+}
+
+export type SchoolCalendarDetailRow = {
+  id: number
+  title: string
+  description?: string
+  event_type?: string | null
+  date: string
+  notify_parent?: number
+  notify_teacher?: number
+  notify_admin?: number
+  no_school?: number
+  semester?: string
+  school_year?: string
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+export type SchoolCalendarOptionsResponse = ApiEnvelope<{
+  event_types: string[]
+  defaults: {
+    school_year?: string | null
+    semester?: string | null
+  }
+}>
+
+export type SchoolCalendarListResponse = ApiEnvelope<{
+  events: SchoolCalendarEventRow[]
+}>
+
+export type SchoolCalendarShowResponse = ApiEnvelope<{
+  event: SchoolCalendarDetailRow
+}>
+
+export type ClassSectionRow = {
+  id: number
+  class_id?: number | null
+  class_section_id?: number | null
+  class_section_name?: string | null
+  class_name?: string | null
+  semester?: string | null
+  school_year?: string | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+export type ClassSectionsResponse = ApiEnvelope<{
+  sections: ClassSectionRow[]
+  meta?: {
+    current_page?: number
+    per_page?: number
+    total?: number
+    last_page?: number
+  }
+}>
+
+export type ClassSectionShowResponse = ApiEnvelope<{
+  section: ClassSectionRow
+}>
+
+export type StudentAssignmentRow = {
+  student_id: number
+  name: string
+  age?: number | string | null
+  email?: string | null
+  phone?: string | null
+  registration_grade?: string | null
+  class_section_name?: string | null
+  class_section_names?: string[]
+  class_section_ids?: number[]
+  new_student?: string | null
+  registration_date?: string | null
+  school_year?: string | null
+  semester?: string | null
+}
+
+export type StudentAssignmentOption = {
+  id: number
+  class_section_id: number
+  class_section_name: string
+  school_year?: string | null
+}
+
+export type StudentAssignmentsResponse = {
+  ok: true
+  students: StudentAssignmentRow[]
+  classes: StudentAssignmentOption[]
+  schoolYears: string[]
+  selectedYear?: string | null
+  currentYear?: string | null
+  isCurrentYear?: boolean
+}
+
+export type ExamDraftRow = {
+  id: number
+  teacher_id: number
+  class_section_id: number
+  class_section_name?: string | null
+  semester?: string | null
+  school_year?: string | null
+  exam_type?: string | null
+  draft_title?: string | null
+  description?: string | null
+  teacher_file?: string | null
+  teacher_filename?: string | null
+  status?: string | null
+  admin_id?: number | null
+  admin_comments?: string | null
+  reviewed_at?: string | null
+  final_file?: string | null
+  final_filename?: string | null
+  final_pdf_file?: string | null
+  version?: number | null
+  previous_draft_id?: number | null
+  is_legacy?: boolean | number | null
+  teacher_first?: string | null
+  teacher_last?: string | null
+  admin_first?: string | null
+  admin_last?: string | null
+}
+
+export type ExamDraftAdminResponse = {
+  ok: true
+  drafts: ExamDraftRow[]
+  class_sections: Array<{ class_section_id: number; class_section_name: string }>
+  legacy_by_class: Record<
+    string,
+    {
+      class_section_id: number
+      class_section_name: string
+      items: ExamDraftRow[]
+    }
+  >
+  exam_types: string[]
+  status_options: string[]
+  school_year?: string | null
+  semester?: string | null
+  allowed_extensions?: string[]
+  max_upload_bytes?: number
+}
+
+export type GradingOverviewStudentRow = {
+  id: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  class_id?: number
+  ptap?: number | string | null
+  semester_score?: number | string | null
+  attendance?: number | string | null
+  homework_avg?: number | string | null
+  project_avg?: number | string | null
+  quiz_avg?: number | string | null
+  participation?: number | string | null
+  midterm_exam?: number | string | null
+  final_exam?: number | string | null
+  matched_biz_csid?: number | null
+  matched_pk_csid?: number | null
+  placement_level?: string | null
+}
+
+export type GradingOverviewResponse = {
+  ok: true
+  grades: Record<string, Array<{ class_section_id: number; class_section_name: string }>>
+  students_by_section: Record<string, GradingOverviewStudentRow[]>
+  semester?: string | null
+  school_year?: string | null
+  requested_class_id?: number | null
+  semester_options?: string[]
+  scores_released?: boolean
+  scores_released_fall?: boolean
+  scores_released_spring?: boolean
+  score_locks?: Record<string, boolean>
+}
+
+export type IpBanRow = {
+  id: number
+  ip_address?: string | null
+  attempts?: number
+  last_attempt_at?: string | null
+  blocked_until?: string | null
+  is_active?: boolean
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+export type IpBansResponse = ApiEnvelope<{
+  bans: IpBanRow[]
+  meta?: {
+    current_page?: number
+    per_page?: number
+    total?: number
+    last_page?: number
+  }
+}>
+
+export type LateSlipLogRow = {
+  id: number
+  school_year?: string | null
+  semester?: string | null
+  student_name?: string | null
+  slip_date?: string | null
+  time_in?: string | null
+  grade?: string | null
+  reason?: string | null
+  admin_name?: string | null
+  printed_by?: string | null
+  printed_at?: string | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+export type LateSlipLogsResponse = ApiEnvelope<{
+  logs: LateSlipLogRow[]
+  meta?: {
+    current_page?: number
+    per_page?: number
+    total?: number
+    last_page?: number
+  }
+}>
+
+export type UserListRow = {
+  user?: {
+    id?: number
+    firstname?: string | null
+    lastname?: string | null
+    email?: string | null
+    status?: string | null
+    cellphone?: string | null
+    gender?: string | null
+    address_street?: string | null
+    city?: string | null
+    state?: string | null
+    zip?: string | null
+    school_year?: string | null
+    semester?: string | null
+    [key: string]: unknown
+  } | null
+  roles?: Array<{ id?: number; name?: string | null; slug?: string | null }>
+  role_ids?: number[]
+  parent_type?: string
+  second_from_parents?: string
+}
+
+export type UsersResponse = {
+  ok: true
+  users: UserListRow[]
+}
+
+export type NotificationAdminRow = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+}
+
+export type NotificationAlertsResponse = {
+  admins: NotificationAdminRow[]
+  subjects: Record<string, string>
+  assignedSubjects: Record<string, Record<string, boolean>>
+  tableReady: boolean
+}
+
+export type PrintNotificationRecipientsResponse = {
+  admins: NotificationAdminRow[]
+  assigned: Record<string, boolean>
+  tableReady: boolean
+}
+
+export type FamilyGuardianRow = {
+  user_id?: number
+  firstname?: string | null
+  lastname?: string | null
+  email?: string | null
+  cellphone?: string | null
+  relation?: string | null
+  is_primary?: boolean
+  receive_emails?: boolean
+  receive_sms?: boolean
+}
+
+export type FamilyStudentRow = {
+  id?: number
+  firstname?: string | null
+  lastname?: string | null
+  school_id?: string | null
+  class_section_name?: string | null
+  [key: string]: unknown
+}
+
+export type FamilyRow = {
+  id: number
+  family_code?: string
+  household_name?: string
+  address_line1?: string
+  address_line2?: string
+  city?: string
+  state?: string
+  postal_code?: string
+  country?: string
+  primary_phone?: string
+  preferred_lang?: string
+  preferred_contact_method?: string
+  is_active?: boolean
+  is_primary_home?: boolean
+  guardians?: FamilyGuardianRow[]
+  students?: FamilyStudentRow[]
+  [key: string]: unknown
+}
+
+export type FamilyAdminIndexResponse = ApiEnvelope<{
+  student?: { id?: number; firstname?: string | null; lastname?: string | null } | null
+  families: FamilyRow[]
+  guardians: Record<string, unknown>[]
+  students: Record<string, unknown>[]
+  searchStudents: Record<string, unknown>[]
+  searchGuardians: NotificationAdminRow[]
+  resolved_student_id?: number | null
+}>
+
+export type PaypalTransactionRow = {
+  id: number
+  transaction_id?: string | null
+  order_id?: string | null
+  parent_school_id?: string | null
+  payer_email?: string | null
+  amount?: number
+  net_amount?: number
+  currency?: string | null
+  status?: string | null
+  event_type?: string | null
+  created_at?: string | null
+}
+
+export type PaypalTransactionsResponse = {
+  ok: true
+  transactions: PaypalTransactionRow[]
+  pagination?: {
+    current_page?: number
+    per_page?: number
+    total?: number
+    last_page?: number
+  }
+}
+
+export type RemovedStudentRow = {
+  id: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  gender?: string | null
+  age?: number | string | null
+  class_sections?: string[]
+  class_section_name?: string | null
+}
+
+export type RemovedStudentsResponse = {
+  ok: true
+  active_students: RemovedStudentRow[]
+  removed_students: RemovedStudentRow[]
+  school_year?: string | null
+}
+
+export type StudentPromotionTotalsRow = {
+  class_id?: number | null
+  class_section_id?: number | null
+  class_section_name?: string | null
+  total?: number
+}
+
+export type StudentPromotionTotalsResponse = {
+  ok: true
+  year?: string | null
+  rows: StudentPromotionTotalsRow[]
+}
+
+export type StudentDirectoryRow = {
+  id: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+  dob?: string | null
+  age?: number | null
+  gender?: string | null
+  is_active?: boolean | number | null
+  registration_grade?: string | null
+  is_new?: boolean | number | null
+  photo_consent?: boolean | number | null
+  parent_id?: number | null
+  registration_date?: string | null
+  tuition_paid?: boolean | number | null
+  semester?: string | null
+  year_of_registration?: string | number | null
+  school_year?: string | null
+  medical_conditions?: string | null
+  allergies?: string | null
+}
+
+export type StudentDirectoryResponse = {
+  ok: true
+  students: StudentDirectoryRow[]
+  school_year?: string | null
+  current_year?: string | null
+}
+
+export type StudentParentResponse = {
+  ok: true
+  student_id: number
+  parent?: {
+    id?: number
+    firstname?: string | null
+    lastname?: string | null
+    email?: string | null
+    cellphone?: string | null
+  } | null
+}
+
+export type StudentEmergencyContactResponse = {
+  ok: true
+  student_id: number
+  rows: Array<Record<string, unknown>>
+}
+
+export type TeacherClassAssignmentRow = {
+  teacher_id: number
+  firstname?: string | null
+  lastname?: string | null
+  name?: string | null
+  email?: string | null
+  cellphone?: string | null
+  role?: string | null
+  school_year?: string | null
+  main_assignments?: Array<{
+    section_id?: number
+    class_section_name?: string | null
+    role?: string | null
+    semester?: string | null
+    school_year?: string | null
+  }>
+  ta_assignments?: Array<{
+    section_id?: number
+    class_section_name?: string | null
+    role?: string | null
+    semester?: string | null
+    school_year?: string | null
+  }>
+}
+
+export type TeacherClassOption = {
+  class_section_id: number
+  class_section_name: string
+  class_id?: number | null
+  class_name?: string | null
+  teacher_role?: string | null
+  school_year?: string | null
+  semester?: string | null
+}
+
+export type TeacherClassAssignmentsResponse = {
+  ok: true
+  school_year?: string | null
+  teachers: TeacherClassAssignmentRow[]
+  classes: TeacherClassOption[]
+}
+
+export type TeacherSubmissionTeacherRow = {
+  id: number
+  label: string
+  role_key?: string | null
+}
+
+export type TeacherSubmissionReportRow = {
+  class_section?: string | null
+  class_section_id?: number
+  teachers?: TeacherSubmissionTeacherRow[]
+  midterm_score_status?: string | null
+  midterm_comment_status?: string | null
+  participation_status?: string | null
+  ptap_comment_status?: string | null
+  attendance_status?: string | null
+  missing_items?: string[]
+  student_count?: number
+}
+
+export type TeacherSubmissionsResponse = {
+  rows: TeacherSubmissionReportRow[]
+  semester?: string | null
+  schoolYear?: string | null
+  notificationHistory?: Record<string, unknown>
+  summary?: {
+    total_items?: number
+    missing_items?: number
+    submitted_items?: number
+    submission_percentage?: number
+  }
+}
+
+export type SubjectCurriculumClassRow = {
+  id: number
+  class_name: string
+  school_year?: string | null
+}
+
+export type SubjectCurriculumEntryRow = {
+  id: number
+  class_id: number
+  class_name?: string | null
+  subject: string
+  unit_number?: number | string | null
+  unit_title?: string | null
+  chapter_name: string
+}
+
+export type SubjectCurriculumResponse = {
+  ok: true
+  classes: SubjectCurriculumClassRow[]
+  entries: SubjectCurriculumEntryRow[]
+  subject_labels: Record<string, string>
+}
+
+export type PublicCompetitionRow = {
+  id: number
+  title?: string | null
+  class_section_id?: number | null
+  semester?: string | null
+  school_year?: string | null
+  is_published?: boolean | number | null
+  is_locked?: boolean | number | null
+  published_at?: string | null
+  [key: string]: unknown
+}
+
+export type PublicCompetitionIndexResponse = {
+  status: boolean
+  data?: {
+    competitions: PublicCompetitionRow[]
+  }
+  message?: string
+}
+
+export type PublicCompetitionWinnerRow = {
+  student_id?: number
+  class_section_id?: number
+  rank?: number
+  score?: number | string | null
+  prize_amount?: number | string | null
+  firstname?: string | null
+  lastname?: string | null
+  class_section_name?: string | null
+  name?: string | null
+  [key: string]: unknown
+}
+
+export type PublicCompetitionShowResponse = {
+  status: boolean
+  data?: {
+    competition: PublicCompetitionRow
+    winners_by_class: Record<string, PublicCompetitionWinnerRow[]>
+    section_map: Record<string, string>
+    question_counts: Record<string, number>
+  }
+  message?: string
+}
+
+export type CompetitionScoresIndexCompetitionRow = {
+  id: number
+  title?: string | null
+  class_section_id?: number | null
+  is_locked?: boolean | number | null
+  is_published?: boolean | number | null
+  [key: string]: unknown
+}
+
+export type CompetitionScoresIndexResponse = {
+  ok: true
+  competitions: CompetitionScoresIndexCompetitionRow[]
+  activeClassId?: number
+  activeClassName?: string | null
+  questionCounts?: Record<string, number>
+  scoreCounts?: Record<string, number>
+  studentTotal?: number
+  sectionMap?: Record<string, string>
+  schoolYear?: string | null
+  semester?: string | null
+  hasClasses?: boolean
+}
+
+export type CompetitionScoreStudentRow = {
+  id?: number
+  student_id?: number
+  school_id?: string | null
+  firstname?: string | null
+  lastname?: string | null
+}
+
+export type CompetitionScoresEditResponse = {
+  ok: boolean
+  competition?: PublicCompetitionRow
+  students?: CompetitionScoreStudentRow[]
+  scoreMap?: Record<string, number | string>
+  classSectionId?: number
+  classSectionName?: string | null
+  classStudentCount?: number
+  questionCount?: number | null
+  classSelectionLocked?: boolean
+  isLocked?: boolean
+  schoolYear?: string | null
+  semester?: string | null
+  message?: string
+}
+
 /** Loose JSON payloads for complex parent dashboards (events, registration, attendance report form). */
 export type ParentEventsResponse = Record<string, unknown>
 export type ParentRegistrationResponse = Record<string, unknown>
@@ -259,6 +1013,36 @@ export type StudentScoresResponse = {
   rows: StudentScoreRow[]
 }
 
+export type StudentScoreCardStudent = {
+  id: number
+  firstname?: string | null
+  lastname?: string | null
+  school_id?: string | null
+}
+
+export type StudentScoreCardRow = {
+  school_year?: string | null
+  semester?: string | null
+  homework_avg?: number | string | null
+  project_avg?: number | string | null
+  participation_score?: number | string | null
+  quiz_avg?: number | string | null
+  test_avg?: number | string | null
+  attendance_score?: number | string | null
+  ptap_score?: number | string | null
+  midterm_exam_score?: number | string | null
+  semester_score?: number | string | null
+  class_section_name?: string | null
+  comments?: Record<string, string>
+  year_score?: number | string | null
+}
+
+export type StudentScoreCardResponse = {
+  ok: true
+  student: StudentScoreCardStudent
+  rows: StudentScoreCardRow[]
+}
+
 export type ReportCardStudentMetaRow = {
   id: number
   firstname: string
@@ -289,6 +1073,7 @@ export type ClassProgressReportRow = {
   id: number
   teacher_name?: string | null
   class_section_name?: string | null
+  class_section_id?: number | null
   subject?: string | null
   unit_title?: string | null
   status?: string | null
@@ -296,9 +1081,12 @@ export type ClassProgressReportRow = {
   covered?: string | null
   homework?: string | null
   support_needed?: string | null
+  flags?: string[]
   week_start?: string | null
   week_end?: string | null
-  attachments?: { id?: number; original_name?: string | null; url?: string | null }[]
+  created_at?: string | null
+  updated_at?: string | null
+  attachments?: { id?: number; name?: string | null; file_path?: string | null; download_url?: string | null }[]
 }
 
 export type ClassProgressGroupRow = {
@@ -316,10 +1104,58 @@ export type ClassProgressGroupsResponse = ApiEnvelope<{
 
 export type ClassProgressShowResponse = ApiEnvelope<{
   report?: ClassProgressReportRow
-  weekly_reports?: Record<string, ClassProgressReportRow>
+  weekly_reports?: ClassProgressReportRow[]
   status_options?: Record<string, string>
 }>
 
+export type ClassProgressMetaResponse = ApiEnvelope<{
+  subject_sections?: Record<string, { label?: string; db_subject?: string }>
+  status_options?: Record<string, string>
+  sunday_options?: string[]
+  curriculum?: Record<string, Array<Record<string, unknown>>>
+}>
+
+export type EmergencyContactGroupRow = {
+  parent_id: number
+  parent_name?: string | null
+  parent_phones?: string[]
+  students?: Array<{
+    id?: number
+    student_id?: number
+    firstname?: string | null
+    lastname?: string | null
+  }>
+  contacts?: Array<{
+    id: number
+    parent_id?: number
+    name?: string | null
+    cellphone?: string | null
+    email?: string | null
+    relation?: string | null
+    semester?: string | null
+    school_year?: string | null
+  }>
+}
+
+export type EmergencyContactGroupsResponse = {
+  ok: true
+  groups: EmergencyContactGroupRow[]
+}
+
+export type EmergencyContactShowResponse = {
+  ok: true
+  contact: {
+    id: number
+    parent_id: number
+    name?: string | null
+    cellphone?: string | null
+    email?: string | null
+    relation?: string | null
+    semester?: string | null
+    school_year?: string | null
+  }
+}
+
 export type ParentRegistrationOverviewResponse = {
   ok: true
   parent: ParentProfileRecord | null
diff --git a/src/lib/ciSpaPaths.ts b/src/lib/ciSpaPaths.ts
index 7495084..e0cb781 100644
--- a/src/lib/ciSpaPaths.ts
+++ b/src/lib/ciSpaPaths.ts
@@ -22,6 +22,37 @@ export function spaPathFromCiUrl(url: string | null | undefined): string | null
     'teacher/dashboard': '/app/teacher/dashboard',
     'administrator/dashboard': '/app/administrator/dashboard',
     'administrator/administratordashboard': '/app/admin/dashboard',
+    'administrator/daily_attendance': '/app/administrator/daily_attendance',
+    'administrator/daily_attendance_analysis': '/app/administrator/daily_attendance_analysis',
+    '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/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/student_class_assignment': '/app/administrator/student_class_assignment',
+    'administrator/student_profiles': '/app/administrator/student_profiles',
+    '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',
+    'admin/class_progress_list': '/app/admin/progress',
+    'admin/class_progress_view': '/app/admin/progress',
+    'administrator/student_score_card': '/app/administrator/student-score-card',
+    'administrator/emergency_contact': '/app/administrator/emergency-contacts',
+    'administrator/emergency_contact/index': '/app/administrator/emergency-contacts',
+    'administrator/emergency_contact/edit': '/app/administrator/emergency-contacts',
     'nav-builder': '/app/nav-builder',
     'api/nav-builder': '/app/nav-builder',
     'parent/parent_dashboard': '/app/parent/home',
diff --git a/src/pages/AdminProgressPages.tsx b/src/pages/AdminProgressPages.tsx
new file mode 100644
index 0000000..40c3d44
--- /dev/null
+++ b/src/pages/AdminProgressPages.tsx
@@ -0,0 +1,625 @@
+import { useEffect, useMemo, useState, type FormEvent, 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'
+
+function PageShell({ 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>
+  )
+}
+
+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)
+
+  async function load() {
+    try {
+      const data = await fetchAdministratorEmergencyContacts()
+      setGroups(data.groups ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load emergency contacts.')
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function removeContact(contactId: number, parentId: number) {
+    await deleteAdministratorEmergencyContact(contactId, parentId)
+    await load()
+  }
+
+  return (
+    <PageShell title="Emergency Contact Information">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <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>
+          </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>{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>
+                  </td>
+                </tr>
+              )),
+            )}
+            {groups.length === 0 ? <tr><td colSpan={6} className="text-muted">No emergency contacts found.</td></tr> : null}
+          </tbody>
+        </table>
+      </div>
+    </PageShell>
+  )
+}
+
+export function AdminEmergencyContactEditPage() {
+  const { contactId } = useParams()
+  const [searchParams] = useSearchParams()
+  const parentId = Number(searchParams.get('parent_id') ?? 0)
+  const [form, setForm] = useState({ name: '', cellphone: '', email: '', relation: '' })
+  const [error, setError] = useState<string | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!contactId || !parentId) return
+    ;(async () => {
+      try {
+        const data = await fetchAdministratorEmergencyContact(Number(contactId), parentId)
+        setForm({
+          name: data.contact.name ?? '',
+          cellphone: data.contact.cellphone ?? '',
+          email: data.contact.email ?? '',
+          relation: data.contact.relation ?? '',
+        })
+        setError(null)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load emergency contact.')
+      }
+    })()
+  }, [contactId, parentId])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (!contactId || !parentId) return
+    try {
+      await updateAdministratorEmergencyContact(Number(contactId), {
+        parent_id: parentId,
+        name: form.name,
+        cellphone: form.cellphone,
+        email: form.email || null,
+        relation: form.relation || null,
+      })
+      setMessage('Emergency contact updated.')
+      setError(null)
+      navigate('/app/administrator/emergency-contacts')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to update emergency contact.')
+    }
+  }
+
+  return (
+    <PageShell title="Edit Emergency Contact">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      <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="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>
+            </div>
+          </form>
+        </div>
+      </div>
+    </PageShell>
+  )
+}
diff --git a/src/pages/AdministratorToolPages.tsx b/src/pages/AdministratorToolPages.tsx
new file mode 100644
index 0000000..3c3fddd
--- /dev/null
+++ b/src/pages/AdministratorToolPages.tsx
@@ -0,0 +1,3321 @@
+import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react'
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import {
+  assignTeacherClass,
+  assignStudentClass,
+  autoDistributeStudents,
+  banIp,
+  createSubjectCurriculum,
+  createAdministratorCalendarEvent,
+  createClassSection,
+  deleteSubjectCurriculum,
+  deleteAdministratorCalendarEvent,
+  deleteClassSection,
+  deleteLateSlipLog,
+  deleteTeacherClassAssignment,
+  deleteUser,
+  fetchAdministratorCalendarEvent,
+  fetchAdministratorCalendarEvents,
+  fetchAdministratorDailyAttendance,
+  fetchBroadcastEmailOptions,
+  fetchClassSections,
+  fetchExamDraftAdminData,
+  fetchFamilyAdminIndex,
+  fetchGradingOverview,
+  fetchIpBans,
+  fetchLateSlipLogs,
+  fetchNotificationAlerts,
+  fetchPaypalTransactions,
+  fetchPaypalTransactionsCsv,
+  fetchPrintNotificationRecipients,
+  fetchSchoolCalendarOptions,
+  fetchRemovedStudents,
+  fetchStudentDirectory,
+  fetchStudentEmergencyContacts,
+  fetchStudentParent,
+  fetchStudentPromotionTotals,
+  fetchSubjectCurriculum,
+  fetchStudentAssignments,
+  fetchTeacherClassAssignments,
+  fetchTeacherSubmissions,
+  fetchUsers,
+  notifyTeacherSubmissions,
+  removeStudentClass,
+  reviewExamDraft,
+  saveNotificationAlerts,
+  savePrintNotificationRecipients,
+  searchAdministratorDashboard,
+  sendBroadcastEmail,
+  setStudentActive,
+  unbanIp,
+  uploadLegacyExamDraft,
+  updateAdministratorCalendarEvent,
+  updateClassSection,
+  updateStudentProfile,
+  updateSubjectCurriculum,
+} from '../api/session'
+import type {
+  AdministratorDashboardSearchResponse,
+  BroadcastEmailParentOption,
+  ClassSectionRow,
+  ExamDraftRow,
+  GradingOverviewStudentRow,
+  NotificationAdminRow,
+  RemovedStudentRow,
+  SchoolCalendarDetailRow,
+  SchoolCalendarEventRow,
+  StudentDirectoryRow,
+  StudentAssignmentOption,
+  StudentAssignmentRow,
+  StudentPromotionTotalsRow,
+  SubjectCurriculumEntryRow,
+  TeacherClassAssignmentRow,
+  TeacherClassOption,
+  TeacherSubmissionReportRow,
+  UserListRow,
+} from '../api/types'
+import { apiUrl } from '../lib/apiOrigin'
+
+function AdminParityShell({
+  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>
+  )
+}
+
+function formatDate(value?: string | null) {
+  if (!value) return '—'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString()
+}
+
+function formatDateInput(value?: string | null) {
+  return value ? String(value).slice(0, 10) : ''
+}
+
+function monthLabel(value: string) {
+  const date = new Date(`${value}T00:00:00`)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleString(undefined, { month: 'long', year: 'numeric' })
+}
+
+function eventAudienceBadges(row: SchoolCalendarDetailRow | SchoolCalendarEventRow) {
+  const props: Record<string, unknown> =
+    'extendedProps' in row
+      ? { ...(row.extendedProps ?? {}) }
+      : {
+          notify_parent: (row as SchoolCalendarDetailRow).notify_parent,
+          notify_teacher: (row as SchoolCalendarDetailRow).notify_teacher,
+          notify_admin: (row as SchoolCalendarDetailRow).notify_admin,
+        }
+  return [
+    props.notify_parent ? 'Parents' : null,
+    props.notify_teacher ? 'Teachers' : null,
+    props.notify_admin ? 'Admins' : null,
+  ].filter(Boolean) as string[]
+}
+
+type AttendanceSectionSnapshot = {
+  sectionId: string
+  classId: number
+  className: string
+  students: Array<{
+    id: number
+    schoolId: string
+    name: string
+    summary: { present: number; late: number; absent: number; total: number }
+    entriesByDate: Record<string, { status: string; reason?: string | null }>
+  }>
+  dates: string[]
+}
+
+function buildAttendanceSections(data: Awaited<ReturnType<typeof fetchAdministratorDailyAttendance>>): AttendanceSectionSnapshot[] {
+  const grades = data.grades ?? {}
+  const studentsBySection = data.students_by_section ?? {}
+  const attendanceData = data.attendance_data ?? {}
+  const attendanceRecord = data.attendance_record ?? {}
+  const datesBySection = data.dates_by_section ?? {}
+  const sections: AttendanceSectionSnapshot[] = []
+
+  for (const [classIdKey, sectionRows] of Object.entries(grades)) {
+    for (const row of sectionRows ?? []) {
+      const sectionId = String(row.class_section_id ?? row.id ?? '')
+      if (!sectionId) continue
+      const students = (studentsBySection[sectionId] ?? []).map((student) => {
+        const studentId = Number(student.id)
+        const entries = attendanceData[sectionId]?.[String(studentId)] ?? []
+        const summary = attendanceRecord[sectionId]?.[String(studentId)] ?? {}
+        return {
+          id: studentId,
+          schoolId: student.school_id ?? '—',
+          name: `${student.firstname ?? ''} ${student.lastname ?? ''}`.trim() || `Student ${studentId}`,
+          summary: {
+            present: Number(summary.total_presence ?? 0),
+            late: Number(summary.total_late ?? 0),
+            absent: Number(summary.total_absence ?? 0),
+            total: Number(summary.total_attendance ?? 0),
+          },
+          entriesByDate: Object.fromEntries(
+            entries.map((entry) => [
+              String(entry.date ?? ''),
+              {
+                status: String(entry.status ?? ''),
+                reason: entry.reason ?? null,
+              },
+            ]),
+          ),
+        }
+      })
+
+      if (students.length === 0) continue
+
+      sections.push({
+        sectionId,
+        classId: Number(classIdKey),
+        className: row.class_section_name ?? `Section ${sectionId}`,
+        students,
+        dates: datesBySection[sectionId] ?? [],
+      })
+    }
+  }
+
+  return sections.sort((a, b) => {
+    if (a.classId !== b.classId) return a.classId - b.classId
+    return a.className.localeCompare(b.className)
+  })
+}
+
+function buildAttendanceAnalysis(sections: AttendanceSectionSnapshot[]) {
+  const overall = { present: 0, late: 0, absent: 0 }
+  const byClass = new Map<string, { present: number; late: number; absent: number; totalStudents: number }>()
+  const studentsNeedingAttention: Array<{
+    name: string
+    schoolId: string
+    className: string
+    absent: number
+    late: number
+  }> = []
+
+  for (const section of sections) {
+    if (!byClass.has(section.className)) {
+      byClass.set(section.className, { present: 0, late: 0, absent: 0, totalStudents: section.students.length })
+    }
+    const bucket = byClass.get(section.className)!
+
+    for (const student of section.students) {
+      overall.present += student.summary.present
+      overall.late += student.summary.late
+      overall.absent += student.summary.absent
+      bucket.present += student.summary.present
+      bucket.late += student.summary.late
+      bucket.absent += student.summary.absent
+
+      if (student.summary.absent > 0 || student.summary.late > 0) {
+        studentsNeedingAttention.push({
+          name: student.name,
+          schoolId: student.schoolId,
+          className: section.className,
+          absent: student.summary.absent,
+          late: student.summary.late,
+        })
+      }
+    }
+  }
+
+  studentsNeedingAttention.sort((a, b) => {
+    if (b.absent !== a.absent) return b.absent - a.absent
+    if (b.late !== a.late) return b.late - a.late
+    return a.name.localeCompare(b.name)
+  })
+
+  return { overall, byClass: Array.from(byClass.entries()), studentsNeedingAttention }
+}
+
+export function AdminBroadcastEmailPage() {
+  const [parents, setParents] = useState<BroadcastEmailParentOption[]>([])
+  const [fromOptions, setFromOptions] = useState<{ key: string; label: string }[]>([])
+  const [selectedIds, setSelectedIds] = useState<number[]>([])
+  const [filter, setFilter] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [form, setForm] = useState({
+    from_key: '',
+    mode: 'personalized' as 'personalized' | 'standard',
+    subject: '',
+    body_html: '',
+    wrap_layout: true,
+    preheader: '',
+    cta_text: '',
+    cta_url: '',
+    test_email: '',
+  })
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchBroadcastEmailOptions()
+        if (cancelled) return
+        setParents(data.parents ?? [])
+        setFromOptions(data.fromOptions ?? [])
+        setForm((current) => ({
+          ...current,
+          from_key: current.from_key || data.fromOptions?.[0]?.key || '',
+        }))
+        setError(null)
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : 'Unable to load broadcast email options.')
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const filteredParents = useMemo(() => {
+    const q = filter.trim().toLowerCase()
+    if (!q) return parents
+    return parents.filter((row) => {
+      const haystack = `${row.firstname ?? ''} ${row.lastname ?? ''} ${row.email ?? ''} ${row.school_id ?? ''}`.toLowerCase()
+      return haystack.includes(q)
+    })
+  }, [filter, parents])
+
+  function toggleSelected(id: number) {
+    setSelectedIds((current) =>
+      current.includes(id) ? current.filter((item) => item !== id) : [...current, id],
+    )
+  }
+
+  function selectAllFiltered() {
+    setSelectedIds(Array.from(new Set([...selectedIds, ...filteredParents.map((row) => row.id)])))
+  }
+
+  async function submit(sendTestOnly: boolean) {
+    setSubmitting(true)
+    setMessage(null)
+    setError(null)
+    try {
+      const result = await sendBroadcastEmail({
+        ...form,
+        send_test_only: sendTestOnly,
+        parent_ids: sendTestOnly ? [] : selectedIds,
+      })
+      if (!result.ok) {
+        setError(result.message ?? 'Broadcast failed.')
+      } else {
+        setMessage(result.message ?? 'Broadcast sent.')
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Broadcast failed.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <AdminParityShell title="Broadcast Email to Parents">
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card mb-3">
+        <div className="card-header">Email Details</div>
+        <div className="card-body row g-3">
+          <div className="col-md-6">
+            <label className="form-label">From</label>
+            <select
+              className="form-select"
+              value={form.from_key}
+              onChange={(event) => setForm((current) => ({ ...current, from_key: event.target.value }))}
+              disabled={loading || submitting}
+            >
+              {fromOptions.map((option) => (
+                <option key={option.key} value={option.key}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="col-md-6">
+            <label className="form-label">Send Mode</label>
+            <select
+              className="form-select"
+              value={form.mode}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  mode: event.target.value as 'personalized' | 'standard',
+                }))
+              }
+              disabled={submitting}
+            >
+              <option value="personalized">Personalized</option>
+              <option value="standard">Standard</option>
+            </select>
+          </div>
+
+          <div className="col-md-8">
+            <label className="form-label">Subject</label>
+            <input
+              className="form-control"
+              value={form.subject}
+              onChange={(event) => setForm((current) => ({ ...current, subject: event.target.value }))}
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="col-md-4 d-flex align-items-end">
+            <div className="form-check">
+              <input
+                id="wrap_layout"
+                className="form-check-input"
+                type="checkbox"
+                checked={form.wrap_layout}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, wrap_layout: event.target.checked }))
+                }
+                disabled={submitting}
+              />
+              <label className="form-check-label" htmlFor="wrap_layout">
+                Wrap with email layout
+              </label>
+            </div>
+          </div>
+
+          <div className="col-12">
+            <label className="form-label">Message (HTML)</label>
+            <textarea
+              className="form-control"
+              rows={10}
+              value={form.body_html}
+              onChange={(event) => setForm((current) => ({ ...current, body_html: event.target.value }))}
+              placeholder="Dear {{name}}, ..."
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="col-md-6">
+            <label className="form-label">Preheader</label>
+            <input
+              className="form-control"
+              value={form.preheader}
+              onChange={(event) => setForm((current) => ({ ...current, preheader: event.target.value }))}
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="col-md-3">
+            <label className="form-label">CTA Text</label>
+            <input
+              className="form-control"
+              value={form.cta_text}
+              onChange={(event) => setForm((current) => ({ ...current, cta_text: event.target.value }))}
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="col-md-3">
+            <label className="form-label">CTA URL</label>
+            <input
+              className="form-control"
+              value={form.cta_url}
+              onChange={(event) => setForm((current) => ({ ...current, cta_url: event.target.value }))}
+              disabled={submitting}
+            />
+          </div>
+        </div>
+        <div className="card-footer d-flex flex-wrap gap-2 align-items-center">
+          <div className="input-group" style={{ maxWidth: 420 }}>
+            <span className="input-group-text">Test email</span>
+            <input
+              className="form-control"
+              type="email"
+              value={form.test_email}
+              onChange={(event) => setForm((current) => ({ ...current, test_email: event.target.value }))}
+              disabled={submitting}
+            />
+            <button
+              className="btn btn-outline-primary"
+              type="button"
+              onClick={() => submit(true)}
+              disabled={submitting}
+            >
+              Send Test Only
+            </button>
+          </div>
+          <span className="ms-auto fw-semibold">Selected: {selectedIds.length}</span>
+          <button
+            className="btn btn-primary"
+            type="button"
+            onClick={() => submit(false)}
+            disabled={submitting || selectedIds.length === 0}
+          >
+            Send Broadcast
+          </button>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
+          <span>Parents</span>
+          <div className="d-flex gap-2">
+            <input
+              className="form-control form-control-sm"
+              style={{ minWidth: 260 }}
+              placeholder="Filter by name, email, school ID"
+              value={filter}
+              onChange={(event) => setFilter(event.target.value)}
+            />
+            <button className="btn btn-sm btn-outline-secondary" type="button" onClick={selectAllFiltered}>
+              Select Filtered
+            </button>
+            <button
+              className="btn btn-sm btn-outline-secondary"
+              type="button"
+              onClick={() => setSelectedIds([])}
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+        <div className="card-body p-0">
+          <div className="table-responsive">
+            <table className="table table-striped table-hover align-middle mb-0">
+              <thead className="table-dark">
+                <tr>
+                  <th style={{ width: 48 }}>#</th>
+                  <th>Name</th>
+                  <th>Email</th>
+                  <th>School ID</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td colSpan={4} className="text-muted">Loading parents…</td>
+                  </tr>
+                ) : filteredParents.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="text-muted">No parents found.</td>
+                  </tr>
+                ) : (
+                  filteredParents.map((row) => (
+                    <tr key={row.id}>
+                      <td>
+                        <input
+                          type="checkbox"
+                          className="form-check-input"
+                          checked={selectedIds.includes(row.id)}
+                          onChange={() => toggleSelected(row.id)}
+                        />
+                      </td>
+                      <td>{`${row.firstname ?? ''} ${row.lastname ?? ''}`.trim() || '—'}</td>
+                      <td>{row.email ?? '—'}</td>
+                      <td>{row.school_id ?? '—'}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+function CalendarEventForm({
+  title,
+  initial,
+  submitLabel,
+  onSubmit,
+  submitting,
+}: {
+  title: string
+  initial: Partial<SchoolCalendarDetailRow> & {
+    event_types?: string[]
+    defaults?: { school_year?: string | null; semester?: string | null }
+  }
+  submitLabel: string
+  onSubmit: (payload: Record<string, unknown>) => Promise<void>
+  submitting: boolean
+}) {
+  const navigate = useNavigate()
+  const [form, setForm] = useState({
+    title: initial.title ?? '',
+    description: initial.description ?? '',
+    event_type: initial.event_type ?? '',
+    date: formatDateInput(initial.date),
+    notify_parent: Boolean(initial.notify_parent),
+    notify_teacher: Boolean(initial.notify_teacher),
+    notify_admin: Boolean(initial.notify_admin),
+    no_school: Boolean(initial.no_school),
+    send_email_parent: false,
+    send_email_teacher: false,
+    send_email_admin: false,
+    school_year: initial.school_year ?? initial.defaults?.school_year ?? '',
+    semester: initial.semester ?? initial.defaults?.semester ?? '',
+  })
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setForm({
+      title: initial.title ?? '',
+      description: initial.description ?? '',
+      event_type: initial.event_type ?? '',
+      date: formatDateInput(initial.date),
+      notify_parent: Boolean(initial.notify_parent),
+      notify_teacher: Boolean(initial.notify_teacher),
+      notify_admin: Boolean(initial.notify_admin),
+      no_school: Boolean(initial.no_school),
+      send_email_parent: false,
+      send_email_teacher: false,
+      send_email_admin: false,
+      school_year: initial.school_year ?? initial.defaults?.school_year ?? '',
+      semester: initial.semester ?? initial.defaults?.semester ?? '',
+    })
+  }, [initial])
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault()
+    setError(null)
+    try {
+      await onSubmit(form)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Unable to ${submitLabel.toLowerCase()}.`)
+    }
+  }
+
+  return (
+    <AdminParityShell title={title}>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <form className="card" onSubmit={handleSubmit}>
+        <div className="card-body row g-3">
+          <div className="col-12">
+            <div className="form-check form-switch mb-2">
+              <input
+                id="no_school"
+                className="form-check-input"
+                type="checkbox"
+                checked={form.no_school}
+                onChange={(event) => setForm((current) => ({ ...current, no_school: event.target.checked }))}
+              />
+              <label className="form-check-label" htmlFor="no_school">
+                No School Day
+              </label>
+            </div>
+            <label className="form-label">Title</label>
+            <input
+              className="form-control"
+              value={form.title}
+              onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))}
+              required
+            />
+          </div>
+
+          <div className="col-12">
+            <label className="form-label">Description</label>
+            <textarea
+              className="form-control"
+              rows={4}
+              value={form.description}
+              onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))}
+            />
+          </div>
+
+          <div className="col-md-4">
+            <label className="form-label">Event Type</label>
+            <select
+              className="form-select"
+              value={form.event_type}
+              onChange={(event) => setForm((current) => ({ ...current, event_type: event.target.value }))}
+            >
+              <option value="">— Select event type —</option>
+              {(initial.event_types ?? []).map((type) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="col-md-4">
+            <label className="form-label">Event Date</label>
+            <input
+              className="form-control"
+              type="date"
+              value={form.date}
+              onChange={(event) => setForm((current) => ({ ...current, date: event.target.value }))}
+              required
+            />
+          </div>
+
+          <div className="col-md-4">
+            <label className="form-label">School Year</label>
+            <input
+              className="form-control"
+              value={form.school_year}
+              onChange={(event) => setForm((current) => ({ ...current, school_year: event.target.value }))}
+            />
+          </div>
+
+          <div className="col-md-4">
+            <label className="form-label">Semester</label>
+            <select
+              className="form-select"
+              value={form.semester}
+              onChange={(event) => setForm((current) => ({ ...current, semester: event.target.value }))}
+            >
+              <option value="">—</option>
+              <option value="Fall">Fall</option>
+              <option value="Spring">Spring</option>
+            </select>
+          </div>
+
+          <div className="col-md-8">
+            <label className="form-label d-block">Calendar Display</label>
+            <div className="d-flex gap-3 flex-wrap">
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.notify_parent}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, notify_parent: event.target.checked }))
+                  }
+                />
+                Parents
+              </label>
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.notify_teacher}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, notify_teacher: event.target.checked }))
+                  }
+                />
+                Teachers
+              </label>
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.notify_admin}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, notify_admin: event.target.checked }))
+                  }
+                />
+                Admins
+              </label>
+            </div>
+          </div>
+
+          <div className="col-12">
+            <label className="form-label d-block">Email Notifications</label>
+            <div className="d-flex gap-3 flex-wrap">
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.send_email_parent}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, send_email_parent: event.target.checked }))
+                  }
+                />
+                Send to Parents
+              </label>
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.send_email_teacher}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, send_email_teacher: event.target.checked }))
+                  }
+                />
+                Send to Teachers
+              </label>
+              <label className="form-check-label">
+                <input
+                  className="form-check-input me-1"
+                  type="checkbox"
+                  checked={form.send_email_admin}
+                  onChange={(event) =>
+                    setForm((current) => ({ ...current, send_email_admin: event.target.checked }))
+                  }
+                />
+                Send to Admins
+              </label>
+            </div>
+          </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')}>
+            Cancel
+          </button>
+          <button className="btn btn-primary" type="submit" disabled={submitting}>
+            {submitLabel}
+          </button>
+        </div>
+      </form>
+    </AdminParityShell>
+  )
+}
+
+export function AdminCalendarAddEventPage() {
+  const navigate = useNavigate()
+  const [options, setOptions] = useState<{ event_types: string[]; defaults: { school_year?: string | null; semester?: string | null } } | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchSchoolCalendarOptions()
+        if (!cancelled) setOptions(data.data ?? null)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (loading && !options) {
+    return <AdminParityShell title="Add Event"><p className="text-muted">Loading…</p></AdminParityShell>
+  }
+
+  return (
+    <CalendarEventForm
+      title="Add Event"
+      initial={{
+        event_types: options?.event_types ?? [],
+        defaults: options?.defaults,
+      }}
+      submitLabel="Add Event"
+      submitting={false}
+      onSubmit={async (payload) => {
+        await createAdministratorCalendarEvent(payload as never)
+        navigate('/app/administrator/calendar_view')
+      }}
+    />
+  )
+}
+
+export function AdminCalendarEditPage() {
+  const navigate = useNavigate()
+  const { eventId } = useParams()
+  const [options, setOptions] = useState<{ event_types: string[]; defaults: { school_year?: string | null; semester?: string | null } } | null>(null)
+  const [event, setEvent] = useState<SchoolCalendarDetailRow | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const [optionsRes, eventRes] = await Promise.all([
+          fetchSchoolCalendarOptions(),
+          fetchAdministratorCalendarEvent(Number(eventId)),
+        ])
+        if (cancelled) return
+        setOptions(optionsRes.data ?? null)
+        setEvent(eventRes.data?.event ?? null)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [eventId])
+
+  if (loading || !event) {
+    return <AdminParityShell title="Edit Event"><p className="text-muted">Loading…</p></AdminParityShell>
+  }
+
+  return (
+    <CalendarEventForm
+      title="Edit Event"
+      initial={{
+        ...event,
+        event_types: options?.event_types ?? [],
+        defaults: options?.defaults,
+      }}
+      submitLabel="Update Event"
+      submitting={false}
+      onSubmit={async (payload) => {
+        await updateAdministratorCalendarEvent(Number(eventId), payload)
+        navigate('/app/administrator/calendar_view')
+      }}
+    />
+  )
+}
+
+export function AdminCalendarViewPage() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [events, setEvents] = useState<SchoolCalendarEventRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const schoolYear = searchParams.get('school_year') ?? ''
+  const semester = searchParams.get('semester') ?? ''
+
+  async function load() {
+    setLoading(true)
+    try {
+      const data = await fetchAdministratorCalendarEvents({
+        schoolYear: schoolYear || null,
+        semester: semester || null,
+      })
+      setEvents(data.data?.events ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load calendar events.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [schoolYear, semester])
+
+  async function onDelete(eventId: number) {
+    if (!window.confirm('Delete this event?')) return
+    await deleteAdministratorCalendarEvent(eventId)
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="School Calendar">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="d-flex gap-2 mb-3 justify-content-end">
+        <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>
+      </div>
+
+      <form
+        className="mb-3 d-flex gap-2 justify-content-center align-items-end flex-wrap"
+        onSubmit={(event) => {
+          event.preventDefault()
+          const formData = new FormData(event.currentTarget)
+          const next = new URLSearchParams()
+          const year = String(formData.get('school_year') ?? '')
+          const sem = String(formData.get('semester') ?? '')
+          if (year) next.set('school_year', year)
+          if (sem) next.set('semester', sem)
+          setSearchParams(next)
+        }}
+      >
+        <div>
+          <label className="form-label">School Year</label>
+          <input name="school_year" className="form-control" defaultValue={schoolYear} />
+        </div>
+        <div>
+          <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="d-flex gap-2">
+          <button className="btn btn-secondary" type="submit">Apply</button>
+          <button className="btn btn-outline-secondary" type="button" onClick={() => setSearchParams(new URLSearchParams())}>
+            Reset
+          </button>
+        </div>
+      </form>
+
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Title</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Date</th>
+              <th>Audience</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={7} className="text-muted">Loading events…</td></tr>
+            ) : events.length === 0 ? (
+              <tr><td colSpan={7} className="text-muted">No events found.</td></tr>
+            ) : (
+              events.map((row) => (
+                <tr key={row.id ?? row.title + row.start}>
+                  <td>{row.id ?? '—'}</td>
+                  <td>{row.title}</td>
+                  <td>{String(row.extendedProps?.event_type ?? '—')}</td>
+                  <td>{row.description || '—'}</td>
+                  <td>{formatDate(row.start)}</td>
+                  <td>{eventAudienceBadges(row).join(', ') || '—'}</td>
+                  <td className="d-flex gap-2 flex-wrap">
+                    {row.id ? (
+                      <>
+                        <button className="btn btn-primary btn-sm" type="button" onClick={() => navigate(`/app/administrator/calendar_edit/${row.id}`)}>
+                          Edit
+                        </button>
+                        <button className="btn btn-danger btn-sm" type="button" onClick={() => onDelete(row.id as number)}>
+                          Delete
+                        </button>
+                      </>
+                    ) : (
+                      <span className="text-muted small">Meeting event</span>
+                    )}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminCalendarPage() {
+  const [events, setEvents] = useState<SchoolCalendarEventRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchAdministratorCalendarEvents()
+        if (cancelled) return
+        setEvents(data.data?.events ?? [])
+        setError(null)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load calendar.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SchoolCalendarEventRow[]>()
+    for (const row of events) {
+      const key = formatDateInput(row.start).slice(0, 7)
+      if (!map.has(key)) map.set(key, [])
+      map.get(key)?.push(row)
+    }
+    return Array.from(map.entries())
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([month, rows]) => ({ month, rows }))
+  }, [events])
+
+  return (
+    <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>
+      </div>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {loading ? (
+        <p className="text-muted">Loading calendar…</p>
+      ) : grouped.length === 0 ? (
+        <p className="text-muted">No calendar events found.</p>
+      ) : (
+        <div className="row g-3">
+          {grouped.map((group) => (
+            <div key={group.month} className="col-12 col-xl-6">
+              <div className="card h-100">
+                <div className="card-header">{monthLabel(`${group.month}-01`)}</div>
+                <div className="list-group list-group-flush">
+                  {group.rows.map((row) => (
+                    <div key={String(row.id ?? row.start + row.title)} className="list-group-item">
+                      <div className="d-flex justify-content-between gap-3">
+                        <div>
+                          <div className="fw-semibold">{row.title}</div>
+                          <div className="small text-muted">{formatDate(row.start)}</div>
+                          {row.description ? <div className="small mt-1">{row.description}</div> : null}
+                        </div>
+                        <div className="text-end small text-muted">
+                          <div>{String(row.extendedProps?.event_type ?? 'General')}</div>
+                          <div>{eventAudienceBadges(row).join(', ') || '—'}</div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </AdminParityShell>
+  )
+}
+
+export function AdminClassAssignmentPage() {
+  const [assignments, setAssignments] = useState<StudentAssignmentRow[]>([])
+  const [classes, setClasses] = useState<StudentAssignmentOption[]>([])
+  const [schoolYears, setSchoolYears] = useState<string[]>([])
+  const [selectedYear, setSelectedYear] = useState('')
+  const [selectedClassByStudent, setSelectedClassByStudent] = useState<Record<number, number>>({})
+  const [loading, setLoading] = useState(true)
+  const [savingStudentId, setSavingStudentId] = useState<number | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(year?: string | null) {
+    setLoading(true)
+    try {
+      const data = await fetchStudentAssignments(year ?? null)
+      setAssignments(data.students ?? [])
+      setClasses(data.classes ?? [])
+      setSchoolYears(data.schoolYears ?? [])
+      setSelectedYear(data.selectedYear ?? '')
+      setSelectedClassByStudent(
+        Object.fromEntries(
+          (data.students ?? []).map((row) => [
+            row.student_id,
+            Number(row.class_section_ids?.[0] ?? 0),
+          ]),
+        ),
+      )
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load class assignments.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load(null)
+  }, [])
+
+  async function saveStudent(studentId: number) {
+    const classSectionId = selectedClassByStudent[studentId]
+    if (!classSectionId) return
+    setSavingStudentId(studentId)
+    setMessage(null)
+    setError(null)
+    try {
+      const result = await assignStudentClass({
+        student_id: studentId,
+        class_section_ids: [classSectionId],
+      })
+      if (!result.ok) {
+        setError(result.message ?? 'Unable to assign class.')
+      } else {
+        setMessage('Class assignment updated.')
+        await load(selectedYear)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to assign class.')
+    } finally {
+      setSavingStudentId(null)
+    }
+  }
+
+  return (
+    <AdminParityShell title="Classes Lists">
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <form
+        className="row g-2 align-items-center justify-content-center mb-3"
+        onSubmit={(event) => {
+          event.preventDefault()
+          void load(selectedYear)
+        }}
+      >
+        <div className="col-auto">
+          <label className="form-label mb-0">School year</label>
+        </div>
+        <div className="col-auto">
+          <select
+            className="form-select form-select-sm"
+            style={{ minWidth: 200 }}
+            value={selectedYear}
+            onChange={(event) => setSelectedYear(event.target.value)}
+          >
+            {schoolYears.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-auto d-flex gap-2">
+          <button type="submit" className="btn btn-secondary btn-sm">Apply</button>
+          <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => void load(null)}>
+            Reset
+          </button>
+        </div>
+      </form>
+
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead>
+            <tr>
+              <th>Student</th>
+              <th>Age</th>
+              <th>Registration Grade</th>
+              <th>Current Class</th>
+              <th>Assign Class</th>
+              <th>Contact</th>
+              <th>Save</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={7} className="text-muted">Loading assignments…</td></tr>
+            ) : assignments.length === 0 ? (
+              <tr><td colSpan={7} className="text-muted">No students found.</td></tr>
+            ) : (
+              assignments.map((row) => (
+                <tr key={row.student_id}>
+                  <td>{row.name}</td>
+                  <td>{row.age ?? '—'}</td>
+                  <td>{row.registration_grade ?? '—'}</td>
+                  <td>{row.class_section_name ?? 'No class assigned'}</td>
+                  <td>
+                    <select
+                      className="form-select form-select-sm"
+                      value={selectedClassByStudent[row.student_id] ?? 0}
+                      onChange={(event) =>
+                        setSelectedClassByStudent((current) => ({
+                          ...current,
+                          [row.student_id]: Number(event.target.value),
+                        }))
+                      }
+                    >
+                      <option value={0}>Select class</option>
+                      {classes.map((section) => (
+                        <option key={section.id} value={section.class_section_id}>
+                          {section.class_section_name}
+                        </option>
+                      ))}
+                    </select>
+                  </td>
+                  <td>
+                    <div>{row.email || '—'}</div>
+                    <div className="small text-muted">{row.phone || '—'}</div>
+                  </td>
+                  <td>
+                    <button
+                      className="btn btn-primary btn-sm"
+                      type="button"
+                      disabled={!selectedClassByStudent[row.student_id] || savingStudentId === row.student_id}
+                      onClick={() => void saveStudent(row.student_id)}
+                    >
+                      {savingStudentId === row.student_id ? 'Saving…' : 'Assign'}
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminClassSectionPage() {
+  const [sections, setSections] = useState<ClassSectionRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [editingId, setEditingId] = useState<number | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [form, setForm] = useState({
+    class_id: '',
+    class_section_id: '',
+    class_section_name: '',
+    semester: '',
+    school_year: '',
+  })
+
+  async function load(searchValue = '') {
+    setLoading(true)
+    try {
+      const data = await fetchClassSections({ search: searchValue || undefined, perPage: 100 })
+      setSections(data.data?.sections ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load class sections.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load('')
+  }, [])
+
+  function startEdit(row: ClassSectionRow) {
+    setEditingId(row.id)
+    setForm({
+      class_id: String(row.class_id ?? ''),
+      class_section_id: String(row.class_section_id ?? ''),
+      class_section_name: row.class_section_name ?? '',
+      semester: row.semester ?? '',
+      school_year: row.school_year ?? '',
+    })
+  }
+
+  function resetForm() {
+    setEditingId(null)
+    setForm({
+      class_id: '',
+      class_section_id: '',
+      class_section_name: '',
+      semester: '',
+      school_year: '',
+    })
+  }
+
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    setSaving(true)
+    setMessage(null)
+    setError(null)
+    try {
+      const payload = {
+        class_id: Number(form.class_id),
+        class_section_id: Number(form.class_section_id),
+        class_section_name: form.class_section_name,
+        semester: form.semester,
+        school_year: form.school_year,
+      }
+      if (editingId) {
+        await updateClassSection(editingId, payload)
+        setMessage('Class section updated.')
+      } else {
+        await createClassSection(payload)
+        setMessage('Class section created.')
+      }
+      resetForm()
+      await load(search)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to save class section.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function remove(sectionId: number) {
+    if (!window.confirm('Delete this class section?')) return
+    await deleteClassSection(sectionId)
+    await load(search)
+  }
+
+  return (
+    <AdminParityShell title="Classes">
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card mb-4">
+        <div className="card-header">{editingId ? 'Edit Class' : 'Add New Class'}</div>
+        <div className="card-body">
+          <form className="row g-3" onSubmit={submit}>
+            <div className="col-md-3">
+              <label className="form-label">Class ID</label>
+              <input className="form-control" value={form.class_id} onChange={(event) => setForm((current) => ({ ...current, class_id: event.target.value }))} required />
+            </div>
+            <div className="col-md-3">
+              <label className="form-label">Section ID</label>
+              <input className="form-control" value={form.class_section_id} onChange={(event) => setForm((current) => ({ ...current, class_section_id: event.target.value }))} required />
+            </div>
+            <div className="col-md-3">
+              <label className="form-label">Name</label>
+              <input className="form-control" value={form.class_section_name} onChange={(event) => setForm((current) => ({ ...current, class_section_name: event.target.value }))} required />
+            </div>
+            <div className="col-md-1">
+              <label className="form-label">Semester</label>
+              <input className="form-control" value={form.semester} onChange={(event) => setForm((current) => ({ ...current, semester: event.target.value }))} required />
+            </div>
+            <div className="col-md-2">
+              <label className="form-label">School Year</label>
+              <input className="form-control" value={form.school_year} onChange={(event) => setForm((current) => ({ ...current, school_year: event.target.value }))} required />
+            </div>
+            <div className="col-12 d-flex gap-2 justify-content-end">
+              {editingId ? <button type="button" className="btn btn-secondary" onClick={resetForm}>Cancel</button> : null}
+              <button className="btn btn-primary" type="submit" disabled={saving}>
+                {saving ? 'Saving…' : editingId ? 'Update Class' : 'Create Class'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="d-flex justify-content-end mb-3">
+        <div className="input-group" style={{ maxWidth: 340 }}>
+          <input className="form-control" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search class sections" />
+          <button className="btn btn-outline-secondary" type="button" onClick={() => void load(search)}>
+            Search
+          </button>
+        </div>
+      </div>
+
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Class ID</th>
+              <th>Section ID</th>
+              <th>Name</th>
+              <th>Semester</th>
+              <th>School Year</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={7} className="text-muted">Loading classes…</td></tr>
+            ) : sections.length === 0 ? (
+              <tr><td colSpan={7} className="text-muted">No class sections found.</td></tr>
+            ) : (
+              sections.map((row) => (
+                <tr key={row.id}>
+                  <td>{row.id}</td>
+                  <td>{row.class_id ?? '—'}</td>
+                  <td>{row.class_section_id ?? '—'}</td>
+                  <td>{row.class_section_name ?? '—'}</td>
+                  <td>{row.semester ?? '—'}</td>
+                  <td>{row.school_year ?? '—'}</td>
+                  <td className="d-flex gap-2">
+                    <button className="btn btn-warning btn-sm" type="button" onClick={() => startEdit(row)}>
+                      Edit
+                    </button>
+                    <button className="btn btn-danger btn-sm" type="button" onClick={() => void remove(row.id)}>
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminDailyAttendancePage() {
+  const [data, setData] = useState<Awaited<ReturnType<typeof fetchAdministratorDailyAttendance>> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [activeSectionId, setActiveSectionId] = useState<string>('')
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const result = await fetchAdministratorDailyAttendance()
+        if (cancelled) return
+        setData(result)
+        const sections = buildAttendanceSections(result)
+        setActiveSectionId(sections[0]?.sectionId ?? '')
+        setError(null)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load attendance.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const sections = useMemo(() => (data ? buildAttendanceSections(data) : []), [data])
+  const activeSection = sections.find((row) => row.sectionId === activeSectionId) ?? sections[0]
+  const visibleDates = activeSection?.dates.slice(-8) ?? []
+
+  return (
+    <AdminParityShell title="Attendance Management">
+      <div className="d-flex justify-content-end mb-3">
+        <Link
+          className="btn btn-outline-primary"
+          to="/app/administrator/daily_attendance_analysis"
+        >
+          Attendance Analysis
+        </Link>
+      </div>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {loading ? (
+        <p className="text-muted">Loading attendance…</p>
+      ) : sections.length === 0 ? (
+        <p className="text-muted">No attendance sections found.</p>
+      ) : (
+        <>
+          <ul className="nav nav-tabs flex-wrap mb-3">
+            {sections.map((section) => (
+              <li key={section.sectionId} className="nav-item">
+                <button
+                  type="button"
+                  className={`nav-link ${section.sectionId === activeSection?.sectionId ? 'active' : ''}`}
+                  onClick={() => setActiveSectionId(section.sectionId)}
+                >
+                  {section.className}
+                </button>
+              </li>
+            ))}
+          </ul>
+
+          {activeSection ? (
+            <div className="table-responsive">
+              <table className="table table-bordered table-striped align-middle">
+                <thead>
+                  <tr>
+                    <th>School ID</th>
+                    <th>Student Name</th>
+                    {visibleDates.map((date) => (
+                      <th key={date}>{formatDate(date)}</th>
+                    ))}
+                    <th>Present</th>
+                    <th>Late</th>
+                    <th>Absent</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {activeSection.students.map((student) => (
+                    <tr key={student.id}>
+                      <td>{student.schoolId}</td>
+                      <td>{student.name}</td>
+                      {visibleDates.map((date) => {
+                        const entry = student.entriesByDate[date]
+                        return (
+                          <td key={date}>
+                            <span className={`badge text-bg-${
+                              entry?.status === 'present'
+                                ? 'success'
+                                : entry?.status === 'late'
+                                  ? 'warning'
+                                  : entry?.status === 'absent'
+                                    ? 'danger'
+                                    : 'secondary'
+                            }`}>
+                              {entry?.status ? entry.status : '—'}
+                            </span>
+                          </td>
+                        )
+                      })}
+                      <td>{student.summary.present}</td>
+                      <td>{student.summary.late}</td>
+                      <td>{student.summary.absent}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : null}
+        </>
+      )}
+    </AdminParityShell>
+  )
+}
+
+export function AdminDailyAttendanceAnalysisPage() {
+  const [data, setData] = useState<Awaited<ReturnType<typeof fetchAdministratorDailyAttendance>> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const result = await fetchAdministratorDailyAttendance()
+        if (cancelled) return
+        setData(result)
+        setError(null)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load attendance analysis.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const sections = useMemo(() => (data ? buildAttendanceSections(data) : []), [data])
+  const analysis = useMemo(() => buildAttendanceAnalysis(sections), [sections])
+  const total = analysis.overall.present + analysis.overall.late + analysis.overall.absent
+
+  return (
+    <AdminParityShell title="Attendance Analysis">
+      <div className="d-flex justify-content-end mb-3">
+        <Link className="btn btn-outline-secondary" to="/app/administrator/daily_attendance">
+          Back to Attendance
+        </Link>
+      </div>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {loading ? (
+        <p className="text-muted">Loading analysis…</p>
+      ) : (
+        <div className="row g-3">
+          <div className="col-md-4">
+            <div className="card h-100">
+              <div className="card-body">
+                <h5 className="card-title">Overall</h5>
+                <p className="mb-2">Present: {analysis.overall.present}</p>
+                <p className="mb-2">Late: {analysis.overall.late}</p>
+                <p className="mb-0">Absent: {analysis.overall.absent}</p>
+                <hr />
+                <p className="mb-0 small text-muted">Total attendance marks: {total}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="col-md-8">
+            <div className="card h-100">
+              <div className="card-body">
+                <h5 className="card-title">By Class</h5>
+                <div className="table-responsive">
+                  <table className="table table-sm align-middle mb-0">
+                    <thead>
+                      <tr>
+                        <th>Class</th>
+                        <th>Students</th>
+                        <th>Present</th>
+                        <th>Late</th>
+                        <th>Absent</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {analysis.byClass.map(([className, row]) => (
+                        <tr key={className}>
+                          <td>{className}</td>
+                          <td>{row.totalStudents}</td>
+                          <td>{row.present}</td>
+                          <td>{row.late}</td>
+                          <td>{row.absent}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="col-12">
+            <div className="card">
+              <div className="card-body">
+                <h5 className="card-title">Students Needing Attention</h5>
+                <div className="table-responsive">
+                  <table className="table table-striped align-middle mb-0">
+                    <thead>
+                      <tr>
+                        <th>Student</th>
+                        <th>School ID</th>
+                        <th>Class</th>
+                        <th>Absent</th>
+                        <th>Late</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {analysis.studentsNeedingAttention.length === 0 ? (
+                        <tr><td colSpan={5} className="text-muted">No absences or tardies recorded.</td></tr>
+                      ) : (
+                        analysis.studentsNeedingAttention.slice(0, 50).map((student) => (
+                          <tr key={`${student.schoolId}-${student.name}`}>
+                            <td>{student.name}</td>
+                            <td>{student.schoolId}</td>
+                            <td>{student.className}</td>
+                            <td>{student.absent}</td>
+                            <td>{student.late}</td>
+                          </tr>
+                        ))
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </AdminParityShell>
+  )
+}
+
+export function AdminExamDraftsPage() {
+  const [data, setData] = useState<Awaited<ReturnType<typeof fetchExamDraftAdminData>> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const [legacyFile, setLegacyFile] = useState<File | null>(null)
+  const [legacyForm, setLegacyForm] = useState({
+    class_section_id: '',
+    school_year: '',
+    semester: '',
+    exam_type: '',
+  })
+  const [reviewState, setReviewState] = useState<Record<number, { review_status: string; admin_comments: string; final_file: File | null }>>({})
+
+  async function load() {
+    setLoading(true)
+    try {
+      const result = await fetchExamDraftAdminData()
+      setData(result)
+      setLegacyForm((current) => ({
+        ...current,
+        school_year: current.school_year || result.school_year || '',
+        semester: current.semester || result.semester || '',
+      }))
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load exam drafts.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function submitLegacy(event: FormEvent) {
+    event.preventDefault()
+    if (!legacyFile) return
+    try {
+      const result = await uploadLegacyExamDraft({
+        class_section_id: Number(legacyForm.class_section_id),
+        school_year: legacyForm.school_year,
+        semester: legacyForm.semester,
+        exam_type: legacyForm.exam_type || undefined,
+        old_exam_file: legacyFile,
+      })
+      setMessage(result.message ?? 'Legacy exam uploaded.')
+      setLegacyFile(null)
+      await load()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to upload legacy exam.')
+    }
+  }
+
+  async function submitReview(draft: ExamDraftRow) {
+    const row = reviewState[draft.id] ?? { review_status: '', admin_comments: '', final_file: null }
+    try {
+      const result = await reviewExamDraft({
+        draft_id: draft.id,
+        review_status: row.review_status || undefined,
+        admin_comments: row.admin_comments || undefined,
+        final_file: row.final_file,
+      })
+      setMessage(result.message ?? 'Draft review updated.')
+      await load()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to review draft.')
+    }
+  }
+
+  const teacherFileUrl = (name?: string | null) => (name ? apiUrl(`/api/v1/files/exams/teacher/${encodeURIComponent(name)}`) : null)
+  const finalFileUrl = (name?: string | null) => (name ? apiUrl(`/api/v1/files/exams/final/${encodeURIComponent(name)}`) : null)
+
+  return (
+    <AdminParityShell title="Exam Draft Submissions">
+      {message ? <div className="alert alert-success">{message}</div> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card mb-4">
+        <div className="card-header">Upload Legacy Exam</div>
+        <div className="card-body">
+          <form className="row g-3" onSubmit={submitLegacy}>
+            <div className="col-md-3">
+              <label className="form-label">Class Section</label>
+              <select className="form-select" value={legacyForm.class_section_id} onChange={(event) => setLegacyForm((current) => ({ ...current, class_section_id: event.target.value }))} required>
+                <option value="">Select class</option>
+                {(data?.class_sections ?? []).map((section) => (
+                  <option key={section.class_section_id} value={section.class_section_id}>
+                    {section.class_section_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="col-md-2">
+              <label className="form-label">School Year</label>
+              <input className="form-control" value={legacyForm.school_year} onChange={(event) => setLegacyForm((current) => ({ ...current, school_year: event.target.value }))} required />
+            </div>
+            <div className="col-md-2">
+              <label className="form-label">Semester</label>
+              <input className="form-control" value={legacyForm.semester} onChange={(event) => setLegacyForm((current) => ({ ...current, semester: event.target.value }))} required />
+            </div>
+            <div className="col-md-2">
+              <label className="form-label">Exam Type</label>
+              <select className="form-select" value={legacyForm.exam_type} onChange={(event) => setLegacyForm((current) => ({ ...current, exam_type: event.target.value }))}>
+                <option value="">Legacy Exam</option>
+                {(data?.exam_types ?? []).map((type) => <option key={type} value={type}>{type}</option>)}
+              </select>
+            </div>
+            <div className="col-md-3">
+              <label className="form-label">File</label>
+              <input className="form-control" type="file" accept={(data?.allowed_extensions ?? ['doc','docx','pdf']).map((ext) => `.${ext}`).join(',')} onChange={(event) => setLegacyFile(event.target.files?.[0] ?? null)} required />
+            </div>
+            <div className="col-12 d-flex justify-content-end">
+              <button className="btn btn-primary" type="submit" disabled={!legacyFile}>Upload</button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="card-header">Submissions</div>
+        <div className="card-body p-0">
+          <div className="table-responsive">
+            <table className="table table-striped align-middle mb-0">
+              <thead>
+                <tr>
+                  <th>Teacher</th>
+                  <th>Class</th>
+                  <th>Title</th>
+                  <th>Type</th>
+                  <th>Version</th>
+                  <th>Status</th>
+                  <th>Files</th>
+                  <th>Review</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr><td colSpan={8} className="text-muted">Loading drafts…</td></tr>
+                ) : (data?.drafts ?? []).length === 0 ? (
+                  <tr><td colSpan={8} className="text-muted">No exam drafts found.</td></tr>
+                ) : (
+                  (data?.drafts ?? []).map((draft) => {
+                    const teacherName = `${draft.teacher_first ?? ''} ${draft.teacher_last ?? ''}`.trim() || 'Admin upload'
+                    const state = reviewState[draft.id] ?? { review_status: draft.status ?? '', admin_comments: draft.admin_comments ?? '', final_file: null }
+                    return (
+                      <tr key={draft.id}>
+                        <td>{teacherName}</td>
+                        <td>{draft.class_section_name ?? '—'}</td>
+                        <td>
+                          <div className="fw-semibold">{draft.draft_title ?? 'Untitled'}</div>
+                          <div className="small text-muted">{draft.description ?? ''}</div>
+                        </td>
+                        <td>{draft.exam_type ?? '—'}</td>
+                        <td>{draft.version ?? 1}</td>
+                        <td><span className="badge text-bg-secondary">{draft.status ?? '—'}</span></td>
+                        <td>
+                          <div className="d-flex flex-column gap-1">
+                            {teacherFileUrl(draft.teacher_file) ? <a href={teacherFileUrl(draft.teacher_file)!} target="_blank" rel="noreferrer">Teacher file</a> : null}
+                            {finalFileUrl(draft.final_pdf_file ?? draft.final_file) ? <a href={finalFileUrl(draft.final_pdf_file ?? draft.final_file)!} target="_blank" rel="noreferrer">Final file</a> : null}
+                          </div>
+                        </td>
+                        <td style={{ minWidth: 260 }}>
+                          <div className="vstack gap-2">
+                            <select className="form-select form-select-sm" value={state.review_status} onChange={(event) => setReviewState((current) => ({ ...current, [draft.id]: { ...state, review_status: event.target.value } }))}>
+                              <option value="">Select status</option>
+                              {(data?.status_options ?? []).map((status) => <option key={status} value={status}>{status}</option>)}
+                            </select>
+                            <textarea className="form-control form-control-sm" rows={2} value={state.admin_comments} onChange={(event) => setReviewState((current) => ({ ...current, [draft.id]: { ...state, admin_comments: event.target.value } }))} placeholder="Comments" />
+                            <input className="form-control form-control-sm" type="file" accept={(data?.allowed_extensions ?? ['doc','docx','pdf']).map((ext) => `.${ext}`).join(',')} onChange={(event) => setReviewState((current) => ({ ...current, [draft.id]: { ...state, final_file: event.target.files?.[0] ?? null } }))} />
+                            <button className="btn btn-sm btn-outline-primary" type="button" onClick={() => void submitReview(draft)}>
+                              Save Review
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminGradingManagementPage() {
+  const [data, setData] = useState<Awaited<ReturnType<typeof fetchGradingOverview>> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [activeGradeKey, setActiveGradeKey] = useState<string>('')
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const result = await fetchGradingOverview()
+        if (cancelled) return
+        setData(result)
+        setActiveGradeKey(Object.keys(result.grades ?? {})[0] ?? '')
+        setError(null)
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Unable to load grading management.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const grades = data?.grades ?? {}
+  const studentsBySection = data?.students_by_section ?? {}
+  const actionTypes = ['homework', 'quiz', 'project', 'midterm', 'final', 'comments']
+
+  return (
+    <AdminParityShell title="Score Management">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {loading ? (
+        <p className="text-muted">Loading grading overview…</p>
+      ) : Object.keys(grades).length === 0 ? (
+        <p className="text-muted">No grading sections found.</p>
+      ) : (
+        <>
+          <ul className="nav nav-tabs justify-content-center flex-wrap">
+            {Object.keys(grades).map((classId) => (
+              <li key={classId} className="nav-item">
+                <button
+                  type="button"
+                  className={`nav-link ${classId === activeGradeKey ? 'active' : ''}`}
+                  onClick={() => setActiveGradeKey(classId)}
+                >
+                  {Number(classId) === 12 ? 'Youth' : `Grade ${classId}`}
+                </button>
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-4">
+            {(grades[activeGradeKey] ?? []).map((section) => {
+              const rows: GradingOverviewStudentRow[] = studentsBySection[String(section.class_section_id)] ?? []
+              if (rows.length === 0) return null
+              return (
+                <div key={section.class_section_id} className="mb-4">
+                  <h4 className="text-center mt-4">{section.class_section_name}</h4>
+                  <div className="table-responsive">
+                    <table className="table table-bordered table-striped align-middle">
+                      <thead>
+                        <tr>
+                          <th>Student Name</th>
+                          <th>School ID</th>
+                          <th>Actions</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {rows.map((student) => (
+                          <tr key={student.id}>
+                            <td>{`${student.firstname ?? ''} ${student.lastname ?? ''}`.trim()}</td>
+                            <td>{student.school_id ?? '—'}</td>
+                            <td>
+                              {actionTypes.map((type) => (
+                                <Link
+                                  key={type}
+                                  className="btn btn-sm btn-outline-primary m-1"
+                                  to={`/app/grading/scores/${type}/${section.class_section_id}/${student.id}`}
+                                >
+                                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                                </Link>
+                              ))}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+    </AdminParityShell>
+  )
+}
+
+export function AdminIpBansPage() {
+  const [status, setStatus] = useState<'all' | 'active'>('all')
+  const [rows, setRows] = useState<Array<Record<string, unknown>>>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(currentStatus = status) {
+    setLoading(true)
+    try {
+      const data = await fetchIpBans({ status: currentStatus, perPage: 100 })
+      setRows((data.data?.bans as Array<Record<string, unknown>>) ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load IP bans.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load(status)
+  }, [status])
+
+  async function onUnban(id?: number, all = false) {
+    await unbanIp(all ? { all: true } : { id })
+    await load()
+  }
+
+  async function onBan(id?: number) {
+    await banIp({ id, hours: 24 })
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="IP Bans">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div className="d-flex align-items-center gap-2">
+          <label>Show</label>
+          <select className="form-select form-select-sm" style={{ minWidth: 160 }} value={status} onChange={(e) => setStatus(e.target.value as 'all' | 'active')}>
+            <option value="all">All entries</option>
+            <option value="active">Active bans only</option>
+          </select>
+        </div>
+        <button className="btn btn-danger btn-sm" type="button" onClick={() => void onUnban(undefined, true)}>
+          Unban All
+        </button>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-striped table-hover align-middle">
+          <thead className="table-dark">
+            <tr>
+              <th>ID</th>
+              <th>IP Address</th>
+              <th>Attempts</th>
+              <th>Last Attempt</th>
+              <th>Blocked Until</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Updated</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={9} className="text-muted">Loading IP bans…</td></tr>
+            ) : rows.length === 0 ? (
+              <tr><td colSpan={9} className="text-muted">No IP ban records found.</td></tr>
+            ) : rows.map((row) => {
+              const id = Number(row.id ?? 0)
+              const active = Boolean(row.is_active)
+              return (
+                <tr key={id}>
+                  <td>{id}</td>
+                  <td>{String(row.ip_address ?? '—')}</td>
+                  <td>{String(row.attempts ?? 0)}</td>
+                  <td>{formatDate(String(row.last_attempt_at ?? ''))}</td>
+                  <td>{formatDate(String(row.blocked_until ?? ''))}</td>
+                  <td><span className={`badge ${active ? 'bg-danger' : 'bg-secondary'}`}>{active ? 'Active' : 'Not Active'}</span></td>
+                  <td>{formatDate(String(row.created_at ?? ''))}</td>
+                  <td>{formatDate(String(row.updated_at ?? ''))}</td>
+                  <td className="d-flex gap-2">
+                    {active ? (
+                      <button className="btn btn-sm btn-primary" type="button" onClick={() => void onUnban(id)}>
+                        Unban
+                      </button>
+                    ) : (
+                      <>
+                        <button className="btn btn-sm btn-warning" type="button" onClick={() => void onBan(id)}>
+                          Ban 24h
+                        </button>
+                        <button className="btn btn-sm btn-secondary" type="button" onClick={() => void onUnban(id)}>
+                          Clear Attempts
+                        </button>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminLateSlipLogsPage() {
+  const [filters, setFilters] = useState({ schoolYear: '', semester: '', q: '', dateFrom: '', dateTo: '' })
+  const [rows, setRows] = useState<Array<Record<string, unknown>>>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load() {
+    setLoading(true)
+    try {
+      const data = await fetchLateSlipLogs({ ...filters, perPage: 100 })
+      setRows((data.data?.logs as Array<Record<string, unknown>>) ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load late slip logs.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  return (
+    <AdminParityShell title="Late Slip Logs">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <form className="row g-2 align-items-end mb-3" onSubmit={(e) => { e.preventDefault(); void load() }}>
+        <div className="col-auto"><label className="form-label">School Year</label><input className="form-control" value={filters.schoolYear} onChange={(e) => setFilters((c) => ({ ...c, schoolYear: e.target.value }))} /></div>
+        <div className="col-auto"><label className="form-label">Semester</label><select className="form-select" value={filters.semester} onChange={(e) => setFilters((c) => ({ ...c, semester: e.target.value }))}><option value="">—</option><option value="Fall">Fall</option><option value="Spring">Spring</option></select></div>
+        <div className="col-auto"><label className="form-label">Student</label><input className="form-control" value={filters.q} onChange={(e) => setFilters((c) => ({ ...c, q: e.target.value }))} /></div>
+        <div className="col-auto"><label className="form-label">From</label><input type="date" className="form-control" value={filters.dateFrom} onChange={(e) => setFilters((c) => ({ ...c, dateFrom: e.target.value }))} /></div>
+        <div className="col-auto"><label className="form-label">To</label><input type="date" className="form-control" value={filters.dateTo} onChange={(e) => setFilters((c) => ({ ...c, dateTo: e.target.value }))} /></div>
+        <div className="col-auto d-flex gap-2"><button className="btn btn-primary" type="submit">Filter</button><button className="btn btn-secondary" type="button" onClick={() => { setFilters({ schoolYear: '', semester: '', q: '', dateFrom: '', dateTo: '' }); }}>Reset</button></div>
+      </form>
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead><tr><th>ID</th><th>Printed At</th><th>Student</th><th>Grade</th><th>Date</th><th>Time In</th><th>Reason</th><th>School Year</th><th>Admin</th><th>Action</th></tr></thead>
+          <tbody>
+            {loading ? <tr><td colSpan={10} className="text-muted">Loading logs…</td></tr> : rows.length === 0 ? <tr><td colSpan={10} className="text-muted">No late slip logs found.</td></tr> : rows.map((row) => (
+              <tr key={String(row.id ?? '')}>
+                <td>{String(row.id ?? '')}</td>
+                <td>{formatDate(String(row.printed_at ?? ''))}</td>
+                <td>{String(row.student_name ?? '—')}</td>
+                <td>{String(row.grade ?? '—')}</td>
+                <td>{formatDate(String(row.slip_date ?? ''))}</td>
+                <td>{String(row.time_in ?? '—')}</td>
+                <td>{String(row.reason ?? '—')}</td>
+                <td>{String(row.school_year ?? '—')}</td>
+                <td>{String(row.admin_name ?? '—')}</td>
+                <td><button className="btn btn-sm btn-outline-danger" type="button" onClick={() => void deleteLateSlipLog(Number(row.id)).then(load)}>Delete</button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminManageUsersPage() {
+  const [rows, setRows] = useState<UserListRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load() {
+    setLoading(true)
+    try {
+      const data = await fetchUsers({ sort: 'lastname', order: 'asc' })
+      setRows(data.users ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load users.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { void load() }, [])
+
+  return (
+    <AdminParityShell title="Manage Users">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <div className="table-responsive">
+        <table className="table table-bordered mt-3 align-middle">
+          <thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Role</th><th>Actions</th></tr></thead>
+          <tbody>
+            {loading ? <tr><td colSpan={5} className="text-muted">Loading users…</td></tr> : rows.length === 0 ? <tr><td colSpan={5} className="text-muted">No users found.</td></tr> : rows.map((row) => {
+              const user = row.user ?? {}
+              const id = Number(user.id ?? 0)
+              const name = `${String(user.firstname ?? '')} ${String(user.lastname ?? '')}`.trim()
+              return (
+                <tr key={id}>
+                  <td>{id}</td>
+                  <td>{name || '—'}</td>
+                  <td>{String(user.email ?? '—')}</td>
+                  <td>{(row.roles ?? []).map((r) => String(r.name ?? '')).filter(Boolean).join(', ') || '—'}</td>
+                  <td><button className="btn btn-sm btn-danger" type="button" onClick={() => void deleteUser(id).then(load)}>Delete</button></td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+function AdminNotificationMatrix({
+  title,
+  admins,
+  columns,
+  checkedMap,
+  onSave,
+  tableReady,
+}: {
+  title: string
+  admins: NotificationAdminRow[]
+  columns: Array<{ key: string; label: string }>
+  checkedMap: Record<string, Record<string, boolean>>
+  onSave: (value: Record<string, Record<string, boolean>>) => Promise<void>
+  tableReady: boolean
+}) {
+  const [state, setState] = useState(checkedMap)
+  useEffect(() => setState(checkedMap), [checkedMap])
+  return (
+    <AdminParityShell title={title}>
+      {!tableReady ? <div className="alert alert-warning">Notification subject storage is not available.</div> : null}
+      <div className="card">
+        <div className="card-header d-flex justify-content-between"><span>Admins</span><button className="btn btn-primary btn-sm" type="button" disabled={!tableReady} onClick={() => void onSave(state)}>Save</button></div>
+        <div className="card-body p-0">
+          <div className="table-responsive">
+            <table className="table table-striped align-middle mb-0">
+              <thead className="table-dark"><tr><th>#</th><th>Name</th><th>Email</th>{columns.map((c) => <th key={c.key} className="text-center">{c.label}</th>)}</tr></thead>
+              <tbody>
+                {admins.length === 0 ? <tr><td colSpan={3 + columns.length} className="text-center text-muted">No admins found.</td></tr> : admins.map((admin, index) => {
+                  const id = String(admin.id)
+                  return (
+                    <tr key={id}>
+                      <td>{index + 1}</td>
+                      <td>{`${admin.firstname ?? ''} ${admin.lastname ?? ''}`.trim() || `Admin #${id}`}</td>
+                      <td>{admin.email ?? ''}</td>
+                      {columns.map((c) => (
+                        <td key={c.key} className="text-center">
+                          <input className="form-check-input" type="checkbox" checked={Boolean(state[id]?.[c.key])} disabled={!tableReady} onChange={(e) => setState((current) => ({ ...current, [id]: { ...(current[id] ?? {}), [c.key]: e.target.checked } }))} />
+                        </td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminNotificationsAlertsPage() {
+  const [admins, setAdmins] = useState<NotificationAdminRow[]>([])
+  const [subjects, setSubjects] = useState<Record<string, string>>({})
+  const [assigned, setAssigned] = useState<Record<string, Record<string, boolean>>>({})
+  const [tableReady, setTableReady] = useState(false)
+
+  useEffect(() => {
+    ;(async () => {
+      const data = await fetchNotificationAlerts()
+      setAdmins(data.admins ?? [])
+      setSubjects(data.subjects ?? {})
+      setAssigned(data.assignedSubjects ?? {})
+      setTableReady(Boolean(data.tableReady))
+    })()
+  }, [])
+
+  return (
+    <AdminNotificationMatrix
+      title="Admin Notification Subjects"
+      admins={admins}
+      columns={Object.entries(subjects).map(([key, label]) => ({ key, label }))}
+      checkedMap={assigned}
+      tableReady={tableReady}
+      onSave={async (value) => {
+        const payload: Record<string, string[]> = {}
+        for (const [adminId, map] of Object.entries(value)) {
+          payload[adminId] = Object.entries(map).filter(([, checked]) => checked).map(([key]) => key)
+        }
+        await saveNotificationAlerts(payload)
+      }}
+    />
+  )
+}
+
+export function AdminPrintNotificationAdminsPage() {
+  const [admins, setAdmins] = useState<NotificationAdminRow[]>([])
+  const [assigned, setAssigned] = useState<Record<string, boolean>>({})
+  const [tableReady, setTableReady] = useState(false)
+
+  useEffect(() => {
+    ;(async () => {
+      const data = await fetchPrintNotificationRecipients()
+      setAdmins(data.admins ?? [])
+      setAssigned(data.assigned ?? {})
+      setTableReady(Boolean(data.tableReady))
+    })()
+  }, [])
+
+  return (
+    <AdminNotificationMatrix
+      title="Print Notification Recipients"
+      admins={admins}
+      columns={[{ key: 'print_requests', label: 'Send Print Alerts' }]}
+      checkedMap={Object.fromEntries(Object.entries(assigned).map(([id, checked]) => [id, { print_requests: checked }]))}
+      tableReady={tableReady}
+      onSave={async (value) => {
+        const payload: Record<string, number> = {}
+        for (const [adminId, map] of Object.entries(value)) {
+          if (map.print_requests) payload[adminId] = 1
+        }
+        await savePrintNotificationRecipients(payload)
+      }}
+    />
+  )
+}
+
+export function AdminParentProfilePage() {
+  const [guardians, setGuardians] = useState<NotificationAdminRow[]>([])
+  const [selectedGuardianId, setSelectedGuardianId] = useState<number | null>(null)
+  const [families, setFamilies] = useState<Array<Record<string, unknown>>>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      setLoading(true)
+      try {
+        const data = await fetchFamilyAdminIndex()
+        setGuardians(data.data?.searchGuardians ?? [])
+        setFamilies((data.data?.families as Array<Record<string, unknown>>) ?? [])
+        setError(null)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unable to load parent profiles.')
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  async function loadGuardian(guardianId: number) {
+    setSelectedGuardianId(guardianId)
+    const data = await fetchFamilyAdminIndex({ guardianId })
+    setFamilies((data.data?.families as Array<Record<string, unknown>>) ?? [])
+  }
+
+  return (
+    <AdminParityShell title="Parent Profiles">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <div className="row g-3">
+        <div className="col-lg-4">
+          <div className="card">
+            <div className="card-header">Guardians</div>
+            <div className="list-group list-group-flush" style={{ maxHeight: 520, overflow: 'auto' }}>
+              {loading ? <div className="list-group-item text-muted">Loading guardians…</div> : guardians.map((guardian) => (
+                <button key={guardian.id} type="button" className={`list-group-item list-group-item-action ${selectedGuardianId === guardian.id ? 'active' : ''}`} onClick={() => void loadGuardian(guardian.id)}>
+                  <div>{`${guardian.firstname ?? ''} ${guardian.lastname ?? ''}`.trim()}</div>
+                  <div className="small">{guardian.email ?? ''}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="col-lg-8">
+          <div className="card">
+            <div className="card-header">Families</div>
+            <div className="card-body">
+              {families.length === 0 ? <p className="text-muted mb-0">Select a guardian to view family details.</p> : families.map((family) => (
+                <div key={String(family.id ?? '')} className="border rounded p-3 mb-3">
+                  <h5 className="mb-1">{String(family.household_name ?? 'Household')}</h5>
+                  <div className="small text-muted mb-2">{String(family.address_line1 ?? '')} {String(family.city ?? '')} {String(family.state ?? '')}</div>
+                  <div className="mb-2"><strong>Phone:</strong> {String(family.primary_phone ?? '—')}</div>
+                  <div><strong>Students</strong></div>
+                  <ul className="mb-0">
+                    {Array.isArray(family.students) && family.students.length > 0 ? family.students.map((student, idx) => (
+                      <li key={idx}>{`${String(student.firstname ?? '')} ${String(student.lastname ?? '')}`.trim()} {student.class_section_name ? `(${String(student.class_section_name)})` : ''}</li>
+                    )) : <li className="text-muted">No students linked.</li>}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminPaypalTransactionsPage() {
+  const [q, setQ] = useState('')
+  const [rows, setRows] = useState<Array<Record<string, unknown>>>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(query = q) {
+    setLoading(true)
+    try {
+      const data = await fetchPaypalTransactions({ q: query || undefined, perPage: 100 })
+      setRows((data.transactions as Array<Record<string, unknown>>) ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load PayPal transactions.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { void load('') }, [])
+
+  async function exportCsv() {
+    const blob = await fetchPaypalTransactionsCsv({ q: q || undefined })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = 'paypal_transactions.csv'
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <AdminParityShell title="PayPal Transactions">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <div className="d-flex gap-2 mb-3 justify-content-end">
+        <input className="form-control" style={{ maxWidth: 320 }} placeholder="Search transactions" value={q} onChange={(e) => setQ(e.target.value)} />
+        <button className="btn btn-primary" type="button" onClick={() => void load()}>Search</button>
+        <button className="btn btn-success" type="button" onClick={() => void exportCsv()}>Export CSV</button>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-striped align-middle">
+          <thead><tr><th>ID</th><th>Transaction ID</th><th>Order ID</th><th>Parent School ID</th><th>Email</th><th>Amount</th><th>Net Amount</th><th>Currency</th><th>Status</th><th>Event Type</th><th>Date</th></tr></thead>
+          <tbody>
+            {loading ? <tr><td colSpan={11} className="text-muted">Loading transactions…</td></tr> : rows.length === 0 ? <tr><td colSpan={11} className="text-muted">No transactions found.</td></tr> : rows.map((row) => (
+              <tr key={String(row.id ?? '')}>
+                <td>{String(row.id ?? '')}</td>
+                <td>{String(row.transaction_id ?? '—')}</td>
+                <td>{String(row.order_id ?? '—')}</td>
+                <td>{String(row.parent_school_id ?? '—')}</td>
+                <td>{String(row.payer_email ?? '—')}</td>
+                <td>{Number(row.amount ?? 0).toFixed(2)}</td>
+                <td>{Number(row.net_amount ?? 0).toFixed(2)}</td>
+                <td>{String(row.currency ?? '—')}</td>
+                <td>{String(row.status ?? '—')}</td>
+                <td>{String(row.event_type ?? '—')}</td>
+                <td>{formatDate(String(row.created_at ?? ''))}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+function submissionBadgeClass(status?: string | null) {
+  const normalized = String(status ?? '').toLowerCase()
+  if (normalized === 'submitted') return 'bg-success'
+  if (normalized === 'partial') return 'bg-warning text-dark'
+  return 'bg-secondary'
+}
+
+export function AdminRemovedStudentsPage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [activeStudents, setActiveStudents] = useState<RemovedStudentRow[]>([])
+  const [removedStudents, setRemovedStudents] = useState<RemovedStudentRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  async function load(year = schoolYear) {
+    setLoading(true)
+    try {
+      const data = await fetchRemovedStudents(year || undefined)
+      setActiveStudents(data.active_students ?? [])
+      setRemovedStudents(data.removed_students ?? [])
+      setSchoolYear(data.school_year ?? year ?? '')
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load removed students.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function toggleStudent(studentId: number, isActive: boolean) {
+    await setStudentActive({ student_id: studentId, is_active: isActive })
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="Student Removal">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <form className="row g-2 align-items-end mb-3" onSubmit={(e) => { e.preventDefault(); void load() }}>
+        <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="2025-2026" />
+        </div>
+        <div className="col-auto">
+          <button className="btn btn-primary" type="submit">Apply</button>
+        </div>
+      </form>
+      <div className="row g-4">
+        <div className="col-xl-6">
+          <div className="card shadow-sm">
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <span>Active Students</span>
+              <span className="badge bg-primary">{activeStudents.length}</span>
+            </div>
+            <div className="table-responsive">
+              <table className="table table-striped table-hover align-middle mb-0">
+                <thead className="table-dark">
+                  <tr><th>School ID</th><th>First Name</th><th>Last Name</th><th>Class</th><th>Action</th></tr>
+                </thead>
+                <tbody>
+                  {loading ? <tr><td colSpan={5} className="text-muted">Loading students…</td></tr> : activeStudents.length === 0 ? <tr><td colSpan={5} className="text-muted">No active students found.</td></tr> : activeStudents.map((student) => (
+                    <tr key={student.id}>
+                      <td>{student.school_id ?? '—'}</td>
+                      <td>{student.firstname ?? '—'}</td>
+                      <td>{student.lastname ?? '—'}</td>
+                      <td>{student.class_section_name ?? 'No class assigned'}</td>
+                      <td><button className="btn btn-outline-danger btn-sm" type="button" onClick={() => void toggleStudent(student.id, false)}>Remove</button></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="col-xl-6">
+          <div className="card shadow-sm">
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <span>Removed Students</span>
+              <span className="badge bg-secondary">{removedStudents.length}</span>
+            </div>
+            <div className="table-responsive">
+              <table className="table table-striped table-hover align-middle mb-0">
+                <thead className="table-dark">
+                  <tr><th>School ID</th><th>First Name</th><th>Last Name</th><th>Last Class</th><th>Action</th></tr>
+                </thead>
+                <tbody>
+                  {loading ? <tr><td colSpan={5} className="text-muted">Loading students…</td></tr> : removedStudents.length === 0 ? <tr><td colSpan={5} className="text-muted">No removed students found.</td></tr> : removedStudents.map((student) => (
+                    <tr key={student.id}>
+                      <td>{student.school_id ?? '—'}</td>
+                      <td>{student.firstname ?? '—'}</td>
+                      <td>{student.lastname ?? '—'}</td>
+                      <td>{student.class_section_name ?? 'No class assigned'}</td>
+                      <td><button className="btn btn-outline-success btn-sm" type="button" onClick={() => void toggleStudent(student.id, true)}>Restore</button></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminSearchResultsPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const initialQuery = searchParams.get('query') ?? ''
+  const [query, setQuery] = useState(initialQuery)
+  const [result, setResult] = useState<AdministratorDashboardSearchResponse | null>(null)
+  const [loading, setLoading] = useState(Boolean(initialQuery))
+  const [error, setError] = useState<string | null>(null)
+
+  async function runSearch(value: string) {
+    const trimmed = value.trim()
+    if (!trimmed) {
+      setResult(null)
+      setSearchParams({})
+      return
+    }
+    setLoading(true)
+    try {
+      const data = await searchAdministratorDashboard(trimmed)
+      setResult(data)
+      setSearchParams({ query: trimmed })
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to load search results.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (initialQuery) void runSearch(initialQuery)
+  }, [])
+
+  const groups = [
+    { key: 'users', label: 'Users' },
+    { key: 'students', label: 'Students' },
+    { key: 'parents', label: 'Parents' },
+    { key: 'staff', label: 'Staff' },
+    { key: 'emergency_contacts', label: 'Emergency Contacts' },
+  ] as const
+
+  return (
+    <AdminParityShell title="Search Results">
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <form className="d-flex gap-2 mb-4" onSubmit={(e) => { e.preventDefault(); void runSearch(query) }}>
+        <input className="form-control" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Enter search term" required />
+        <button className="btn btn-primary" type="submit">Search</button>
+      </form>
+      {!result && !loading ? <p className="text-muted mb-0">Enter a search term to view results.</p> : null}
+      {loading ? <p className="text-muted">Loading search results…</p> : null}
+      {result && groups.map((group) => {
+        const rows = result.results?.[group.key] ?? []
+        if (!rows || rows.length === 0) return null
+        const columns = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
+        return (
+          <div key={group.key} className="card shadow-sm mb-4">
+            <div className="card-header">{group.label}</div>
+            <div className="table-responsive">
+              <table className="table table-bordered table-sm align-middle mb-0">
+                <thead className="table-light">
+                  <tr>{columns.map((column) => <th key={column}>{column.replace(/_/g, ' ')}</th>)}</tr>
+                </thead>
+                <tbody>
+                  {rows.map((row, index) => (
+                    <tr key={`${group.key}-${index}`}>
+                      {columns.map((column) => <td key={column}>{String(row[column] ?? '—')}</td>)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )
+      })}
+      {result && groups.every((group) => (result.results?.[group.key] ?? []).length === 0) ? (
+        <p className="text-muted">No results found.</p>
+      ) : null}
+    </AdminParityShell>
+  )
+}
+
+export function AdminSectionsAutoDistributePage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [studentsPerSection, setStudentsPerSection] = useState(20)
+  const [rows, setRows] = useState<StudentPromotionTotalsRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [message, setMessage] = useState<string | null>(null)
+  const [distribution, setDistribution] = useState<Record<string, string[]>>({})
+
+  async function load(year = schoolYear) {
+    setLoading(true)
+    try {
+      const data = await fetchStudentPromotionTotals(year || undefined)
+      setRows(data.rows ?? [])
+      setSchoolYear(data.year ?? year ?? '')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function runDistribution(row: StudentPromotionTotalsRow) {
+    const response = await autoDistributeStudents({
+      class_id: row.class_id ?? undefined,
+      class_section_id: row.class_section_id ?? undefined,
+      students_per_section: studentsPerSection,
+      school_year: schoolYear || undefined,
+    })
+    const sections = (response.data?.sections ?? []).map((section) => {
+      const name = String(section.class_section_name ?? 'Section')
+      const total = Number(section.total ?? 0)
+      return `${name}: ${total}`
+    })
+    setDistribution((current) => ({ ...current, [String(row.class_section_id ?? row.class_id ?? '')]: sections }))
+    setMessage(response.message ?? 'Distribution completed.')
+  }
+
+  async function runAll() {
+    for (const row of rows) {
+      // eslint-disable-next-line no-await-in-loop
+      await runDistribution(row)
+    }
+  }
+
+  return (
+    <AdminParityShell title="Auto-Distribute Students into Sections">
+      {message ? <div className="alert alert-info">{message}</div> : null}
+      <div className="row g-2 align-items-end mb-3">
+        <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)} />
+        </div>
+        <div className="col-sm-4 col-lg-3">
+          <label className="form-label">Students per section</label>
+          <input type="number" min={1} className="form-control" value={studentsPerSection} onChange={(e) => setStudentsPerSection(Number(e.target.value) || 1)} />
+        </div>
+        <div className="col-auto"><button className="btn btn-outline-secondary" type="button" onClick={() => void load()}>Refresh Totals</button></div>
+        <div className="col-auto"><button className="btn btn-primary" type="button" onClick={() => void runAll()} disabled={rows.length === 0}>Generate All</button></div>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-sm table-striped align-middle">
+          <thead className="table-light">
+            <tr><th>Class</th><th>Total</th><th>Sections Needed</th><th>Generated Sections</th><th>Actions</th></tr>
+          </thead>
+          <tbody>
+            {loading ? <tr><td colSpan={5} className="text-muted">Loading totals…</td></tr> : rows.length === 0 ? <tr><td colSpan={5} className="text-muted">No section totals found.</td></tr> : rows.map((row) => {
+              const total = Number(row.total ?? 0)
+              const needed = studentsPerSection > 0 ? Math.ceil(total / studentsPerSection) : 0
+              const key = String(row.class_section_id ?? row.class_id ?? '')
+              return (
+                <tr key={key}>
+                  <td>{row.class_section_name ?? '—'}</td>
+                  <td>{total}</td>
+                  <td>{needed || '—'}</td>
+                  <td>{distribution[key]?.join(', ') ?? '—'}</td>
+                  <td><button className="btn btn-sm btn-primary" type="button" onClick={() => void runDistribution(row)}>Generate Sections</button></td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminStudentClassAssignmentPage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [students, setStudents] = useState<StudentAssignmentRow[]>([])
+  const [classes, setClasses] = useState<StudentAssignmentOption[]>([])
+  const [selectedStudentId, setSelectedStudentId] = useState<number | null>(null)
+  const [selectedClassIds, setSelectedClassIds] = useState<number[]>([])
+  const [eventOnly, setEventOnly] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [message, setMessage] = useState<string | null>(null)
+
+  async function load(year = schoolYear) {
+    setLoading(true)
+    try {
+      const data = await fetchStudentAssignments(year || undefined)
+      setStudents(data.students ?? [])
+      setClasses(data.classes ?? [])
+      setSchoolYear(data.selectedYear ?? year ?? '')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function submitAssignment() {
+    if (!selectedStudentId || selectedClassIds.length === 0) return
+    const result = await assignStudentClass({
+      student_id: selectedStudentId,
+      class_section_id: selectedClassIds,
+      is_event_only: eventOnly,
+    })
+    setMessage(result.message ?? 'Classes assigned successfully.')
+    setSelectedStudentId(null)
+    setSelectedClassIds([])
+    setEventOnly(false)
+    await load()
+  }
+
+  async function removeAssignment(studentId: number, classSectionId: number) {
+    const result = await removeStudentClass({ student_id: studentId, class_section_id: classSectionId })
+    setMessage(result.message ?? 'Class removed successfully.')
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="Student Class Assignment">
+      {message ? <div className="alert alert-info">{message}</div> : null}
+      <div className="row g-3 mb-4">
+        <div className="col-lg-4">
+          <label className="form-label">School Year</label>
+          <div className="d-flex gap-2">
+            <input className="form-control" value={schoolYear} onChange={(e) => setSchoolYear(e.target.value)} />
+            <button className="btn btn-outline-secondary" type="button" onClick={() => void load()}>Apply</button>
+          </div>
+        </div>
+        <div className="col-lg-8">
+          <div className="card shadow-sm">
+            <div className="card-body row g-2 align-items-end">
+              <div className="col-md-4">
+                <label className="form-label">Student</label>
+                <select className="form-select" value={selectedStudentId ?? ''} onChange={(e) => setSelectedStudentId(e.target.value ? Number(e.target.value) : null)}>
+                  <option value="">Select student…</option>
+                  {students.map((student) => <option key={student.student_id} value={student.student_id}>{student.name}</option>)}
+                </select>
+              </div>
+              <div className="col-md-5">
+                <label className="form-label">Class(es)</label>
+                <select
+                  className="form-select"
+                  multiple
+                  size={6}
+                  value={selectedClassIds.map(String)}
+                  onChange={(e) => setSelectedClassIds(Array.from(e.target.selectedOptions).map((option) => Number(option.value)))}
+                >
+                  {classes.map((classRow) => <option key={classRow.class_section_id} value={classRow.class_section_id}>{classRow.class_section_name}</option>)}
+                </select>
+              </div>
+              <div className="col-md-3">
+                <div className="form-check mb-2">
+                  <input id="eventOnly" className="form-check-input" type="checkbox" checked={eventOnly} onChange={(e) => setEventOnly(e.target.checked)} />
+                  <label className="form-check-label" htmlFor="eventOnly">Event class only</label>
+                </div>
+                <button className="btn btn-primary w-100" type="button" onClick={() => void submitAssignment()} disabled={!selectedStudentId || selectedClassIds.length === 0}>Assign Class</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-striped table-hover align-middle">
+          <thead className="table-dark">
+            <tr><th>Student Name</th><th>Age</th><th>Registration Grade</th><th>New Student</th><th>Assigned Classes</th><th>Registration Date</th><th>School Year</th></tr>
+          </thead>
+          <tbody>
+            {loading ? <tr><td colSpan={7} className="text-muted">Loading students…</td></tr> : students.length === 0 ? <tr><td colSpan={7} className="text-muted">No students found.</td></tr> : students.map((student) => (
+              <tr key={student.student_id}>
+                <td>{student.name}</td>
+                <td>{student.age ?? '—'}</td>
+                <td>{student.registration_grade ?? '—'}</td>
+                <td>{student.new_student ?? '—'}</td>
+                <td>
+                  {student.class_section_ids && student.class_section_ids.length > 0 ? (
+                    <div className="d-flex flex-wrap gap-2">
+                      {student.class_section_ids.map((classId, index) => (
+                        <span key={`${student.student_id}-${classId}`} className="badge bg-success d-inline-flex align-items-center gap-2">
+                          <span>{student.class_section_names?.[index] ?? `Class ${classId}`}</span>
+                          <button className="btn-close btn-close-white" style={{ fontSize: 10 }} type="button" aria-label="Remove class" onClick={() => void removeAssignment(student.student_id, classId)} />
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-muted">No class assigned</span>
+                  )}
+                </td>
+                <td>{formatDate(student.registration_date)}</td>
+                <td>{student.school_year ?? '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminStudentProfilesPage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [students, setStudents] = useState<StudentDirectoryRow[]>([])
+  const [editing, setEditing] = useState<StudentDirectoryRow | null>(null)
+  const [parentDetails, setParentDetails] = useState<Record<string, unknown> | null>(null)
+  const [emergencyContacts, setEmergencyContacts] = useState<Array<Record<string, unknown>>>([])
+  const [message, setMessage] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  async function load(year = schoolYear) {
+    setLoading(true)
+    try {
+      const data = await fetchStudentDirectory(year || undefined)
+      setStudents(data.students ?? [])
+      setSchoolYear(data.school_year ?? year ?? '')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function openDetails(student: StudentDirectoryRow) {
+    setEditing(student)
+    const [parent, contacts] = await Promise.all([
+      fetchStudentParent(student.id),
+      fetchStudentEmergencyContacts(student.id),
+    ])
+    setParentDetails(parent.parent ?? null)
+    setEmergencyContacts(contacts.rows ?? [])
+  }
+
+  async function saveStudent() {
+    if (!editing) return
+    const result = await updateStudentProfile(editing.id, {
+      school_id: editing.school_id ?? '',
+      firstname: editing.firstname ?? '',
+      lastname: editing.lastname ?? '',
+      dob: editing.dob ?? '',
+      age: editing.age ?? null,
+      gender: editing.gender ?? 'Male',
+      registration_grade: editing.registration_grade ?? '',
+      photo_consent: Boolean(editing.photo_consent),
+      parent_id: editing.parent_id ?? 0,
+      registration_date: editing.registration_date ?? null,
+      tuition_paid: Boolean(editing.tuition_paid),
+      year_of_registration: editing.year_of_registration ?? '',
+      school_year: editing.school_year ?? '',
+      semester: editing.semester ?? '',
+      is_new: Boolean(editing.is_new),
+      is_active: Boolean(editing.is_active),
+      medical_conditions: editing.medical_conditions ?? '',
+      allergies: editing.allergies ?? '',
+    })
+    setMessage(result.message ?? 'Student updated successfully.')
+    setEditing(null)
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="Student Profiles">
+      {message ? <div className="alert alert-info">{message}</div> : null}
+      <div className="d-flex gap-2 mb-3">
+        <input className="form-control" style={{ maxWidth: 240 }} value={schoolYear} onChange={(e) => setSchoolYear(e.target.value)} placeholder="School year" />
+        <button className="btn btn-outline-secondary" type="button" onClick={() => void load()}>Apply</button>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-striped table-hover align-middle">
+          <thead className="table-dark">
+            <tr><th>School ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Age</th><th>Gender</th><th>Assigned Grade</th><th>Active</th><th>Photo Consent</th><th>Registration Date</th><th>Action</th></tr>
+          </thead>
+          <tbody>
+            {loading ? <tr><td colSpan={11} className="text-muted">Loading students…</td></tr> : students.length === 0 ? <tr><td colSpan={11} className="text-muted">No students found.</td></tr> : students.map((student) => (
+              <tr key={student.id}>
+                <td>{student.school_id ?? '—'}</td>
+                <td>{student.firstname ?? '—'}</td>
+                <td>{student.lastname ?? '—'}</td>
+                <td>{formatDate(student.dob)}</td>
+                <td>{student.age ?? '—'}</td>
+                <td>{student.gender ?? '—'}</td>
+                <td>{student.registration_grade ?? '—'}</td>
+                <td>{Boolean(student.is_active) ? 'Yes' : 'No'}</td>
+                <td>{Boolean(student.photo_consent) ? 'Yes' : 'No'}</td>
+                <td>{formatDate(student.registration_date)}</td>
+                <td><button className="btn btn-sm btn-primary" type="button" onClick={() => void openDetails(student)}>View / Edit</button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {editing ? (
+        <div className="modal d-block position-static mt-4" role="dialog" aria-modal="true">
+          <div className="modal-dialog modal-xl">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Edit Student - {`${editing.firstname ?? ''} ${editing.lastname ?? ''}`.trim()}</h5>
+                <button className="btn-close" type="button" onClick={() => setEditing(null)} />
+              </div>
+              <div className="modal-body">
+                <div className="row g-3">
+                  <div className="col-md-4"><label className="form-label">School ID</label><input className="form-control" value={editing.school_id ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, school_id: e.target.value } : current)} /></div>
+                  <div className="col-md-4"><label className="form-label">First Name</label><input className="form-control" value={editing.firstname ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, firstname: e.target.value } : current)} /></div>
+                  <div className="col-md-4"><label className="form-label">Last Name</label><input className="form-control" value={editing.lastname ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, lastname: e.target.value } : current)} /></div>
+                  <div className="col-md-3"><label className="form-label">DOB</label><input type="date" className="form-control" value={formatDateInput(editing.dob)} onChange={(e) => setEditing((current) => current ? { ...current, dob: e.target.value } : current)} /></div>
+                  <div className="col-md-2"><label className="form-label">Age</label><input type="number" className="form-control" value={editing.age ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, age: Number(e.target.value) || null } : current)} /></div>
+                  <div className="col-md-3"><label className="form-label">Gender</label><select className="form-select" value={editing.gender ?? 'Male'} onChange={(e) => setEditing((current) => current ? { ...current, gender: e.target.value } : current)}><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select></div>
+                  <div className="col-md-4"><label className="form-label">Registration Grade</label><input className="form-control" value={editing.registration_grade ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, registration_grade: e.target.value } : current)} /></div>
+                  <div className="col-md-6"><label className="form-label">Medical Conditions</label><input className="form-control" value={editing.medical_conditions ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, medical_conditions: e.target.value } : current)} /></div>
+                  <div className="col-md-6"><label className="form-label">Allergies</label><input className="form-control" value={editing.allergies ?? ''} onChange={(e) => setEditing((current) => current ? { ...current, allergies: e.target.value } : current)} /></div>
+                </div>
+                <hr />
+                <div className="row g-4">
+                  <div className="col-md-6">
+                    <h6>Parent Information</h6>
+                    {parentDetails ? (
+                      <div className="small">
+                        <div>{`${String(parentDetails.firstname ?? '')} ${String(parentDetails.lastname ?? '')}`.trim()}</div>
+                        <div>{String(parentDetails.email ?? '—')}</div>
+                        <div>{String(parentDetails.cellphone ?? '—')}</div>
+                      </div>
+                    ) : <p className="text-muted small mb-0">No parent record found.</p>}
+                  </div>
+                  <div className="col-md-6">
+                    <h6>Emergency Contacts</h6>
+                    {emergencyContacts.length === 0 ? <p className="text-muted small mb-0">No emergency contacts found.</p> : (
+                      <ul className="small mb-0">
+                        {emergencyContacts.map((contact, index) => <li key={index}>{String(contact.emergency_contact_name ?? contact.name ?? 'Contact')} - {String(contact.cellphone ?? '—')}</li>)}
+                      </ul>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button className="btn btn-secondary" type="button" onClick={() => setEditing(null)}>Close</button>
+                <button className="btn btn-primary" type="button" onClick={() => void saveStudent()}>Save</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </AdminParityShell>
+  )
+}
+
+export function AdminSubjectCurriculumPage() {
+  const [classes, setClasses] = useState<Array<{ id: number; class_name: string }>>([])
+  const [entries, setEntries] = useState<SubjectCurriculumEntryRow[]>([])
+  const [subjects, setSubjects] = useState<Record<string, string>>({})
+  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)
+
+  async function load() {
+    const data = await fetchSubjectCurriculum()
+    setClasses(data.classes ?? [])
+    setEntries(data.entries ?? [])
+    setSubjects(data.subject_labels ?? {})
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function submitForm(e: FormEvent) {
+    e.preventDefault()
+    const payload = {
+      class_id: Number(form.class_id),
+      subject: form.subject,
+      unit_number: form.unit_number ? Number(form.unit_number) : null,
+      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.')
+    }
+    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}
+      <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)}>
+                <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>
+                    <option value="">Select a class</option>
+                    {classes.map((classRow) => <option key={classRow.id} value={classRow.id}>{classRow.class_name}</option>)}
+                  </select>
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Subject</label>
+                  <select className="form-select" value={form.subject} onChange={(e) => setForm((current) => ({ ...current, subject: e.target.value }))} required>
+                    {Object.entries(subjects).map(([key, label]) => <option key={key} value={key}>{label}</option>)}
+                  </select>
+                </div>
+                <div className="mb-3"><label className="form-label">Unit / Term number</label><input type="number" className="form-control" value={form.unit_number} onChange={(e) => setForm((current) => ({ ...current, unit_number: e.target.value }))} /></div>
+                <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}
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div className="col-lg-7">
+          <div className="card shadow-sm">
+            <div className="card-header">Current curriculum entries</div>
+            <div className="table-responsive">
+              <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>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminTeacherClassAssignmentPage() {
+  const [schoolYear, setSchoolYear] = useState('')
+  const [teachers, setTeachers] = useState<TeacherClassAssignmentRow[]>([])
+  const [classes, setClasses] = useState<TeacherClassOption[]>([])
+  const [selectedTeacherId, setSelectedTeacherId] = useState<number | null>(null)
+  const [selectedClassId, setSelectedClassId] = useState<number | null>(null)
+  const [selectedRole, setSelectedRole] = useState('')
+  const [message, setMessage] = useState<string | null>(null)
+
+  async function load(year = schoolYear) {
+    const data = await fetchTeacherClassAssignments(year || undefined)
+    setTeachers(data.teachers ?? [])
+    setClasses(data.classes ?? [])
+    setSchoolYear(data.school_year ?? year ?? '')
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function submitAssignment() {
+    if (!selectedTeacherId || !selectedClassId) return
+    const teacher = teachers.find((row) => row.teacher_id === selectedTeacherId)
+      const result = await assignTeacherClass({
+      teacher_id: selectedTeacherId,
+      class_section_id: selectedClassId,
+      teacher_role: selectedRole || (teacher?.role ?? undefined),
+      school_year: schoolYear || undefined,
+    })
+    setMessage(result.message ?? 'Class assigned successfully.')
+    setSelectedTeacherId(null)
+    setSelectedClassId(null)
+    setSelectedRole('')
+    await load()
+  }
+
+  async function removeAssignment(teacherId: number, classSectionId: number, position: 'main' | 'ta') {
+    const result = await deleteTeacherClassAssignment({
+      teacher_id: teacherId,
+      class_section_id: classSectionId,
+      position,
+      school_year: schoolYear || undefined,
+    })
+    setMessage(result.message ?? 'Assignment removed.')
+    await load()
+  }
+
+  return (
+    <AdminParityShell title="Teacher Class Assignments">
+      {message ? <div className="alert alert-info">{message}</div> : null}
+      <div className="row g-3 mb-4">
+        <div className="col-lg-3"><label className="form-label">School Year</label><div className="d-flex gap-2"><input className="form-control" value={schoolYear} onChange={(e) => setSchoolYear(e.target.value)} /><button className="btn btn-outline-secondary" type="button" onClick={() => void load()}>Apply</button></div></div>
+        <div className="col-lg-3"><label className="form-label">Teacher</label><select className="form-select" value={selectedTeacherId ?? ''} onChange={(e) => { const id = e.target.value ? Number(e.target.value) : null; setSelectedTeacherId(id); const teacher = teachers.find((row) => row.teacher_id === id); setSelectedRole(String(teacher?.role ?? '')) }}><option value="">Select teacher…</option>{teachers.map((teacher) => <option key={teacher.teacher_id} value={teacher.teacher_id}>{teacher.name ?? `${teacher.firstname ?? ''} ${teacher.lastname ?? ''}`.trim()}</option>)}</select></div>
+        <div className="col-lg-4"><label className="form-label">Class</label><select className="form-select" value={selectedClassId ?? ''} onChange={(e) => setSelectedClassId(e.target.value ? Number(e.target.value) : null)}><option value="">Select class…</option>{classes.map((classRow) => <option key={classRow.class_section_id} value={classRow.class_section_id}>{classRow.class_section_name}</option>)}</select></div>
+        <div className="col-lg-2 d-grid"><button className="btn btn-primary align-self-end" type="button" onClick={() => void submitAssignment()} disabled={!selectedTeacherId || !selectedClassId}>Assign Class</button></div>
+      </div>
+      <div className="table-responsive">
+        <table className="table table-striped table-hover align-middle">
+          <thead className="table-dark"><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone</th><th>Role</th><th>Assigned Classes</th><th>School Year</th></tr></thead>
+          <tbody>
+            {teachers.length === 0 ? <tr><td colSpan={8} className="text-muted">No teachers found.</td></tr> : teachers.map((teacher, index) => (
+              <tr key={teacher.teacher_id}>
+                <td>{index + 1}</td>
+                <td>{teacher.firstname ?? '—'}</td>
+                <td>{teacher.lastname ?? '—'}</td>
+                <td>{teacher.email ?? '—'}</td>
+                <td>{teacher.cellphone ?? '—'}</td>
+                <td>{teacher.role ? teacher.role.replace(/_/g, ' ') : '—'}</td>
+                <td>
+                  {[...(teacher.main_assignments ?? []), ...(teacher.ta_assignments ?? [])].length === 0 ? <span className="text-muted">No classes assigned</span> : (
+                    <ul className="list-unstyled mb-0">
+                      {(teacher.main_assignments ?? []).map((assignment) => (
+                        <li key={`main-${teacher.teacher_id}-${assignment.section_id}`} className="mb-1 d-flex align-items-center justify-content-between gap-2">
+                          <span><strong>{assignment.class_section_name ?? 'Class'}</strong> (Main)</span>
+                          <button className="btn btn-outline-danger btn-sm" type="button" onClick={() => void removeAssignment(teacher.teacher_id, Number(assignment.section_id), 'main')}>Remove</button>
+                        </li>
+                      ))}
+                      {(teacher.ta_assignments ?? []).map((assignment) => (
+                        <li key={`ta-${teacher.teacher_id}-${assignment.section_id}`} className="mb-1 d-flex align-items-center justify-content-between gap-2">
+                          <span><strong>{assignment.class_section_name ?? 'Class'}</strong> (TA)</span>
+                          <button className="btn btn-outline-danger btn-sm" type="button" onClick={() => void removeAssignment(teacher.teacher_id, Number(assignment.section_id), 'ta')}>Remove</button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </td>
+                <td>{teacher.school_year ?? schoolYear ?? '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminTeacherSubmissionsPage() {
+  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 [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)
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  async function sendNotifications() {
+    const notify = Object.entries(selected).filter(([, checked]) => checked).map(([id]) => Number(id))
+    if (notify.length === 0) return
+    const missingItems = Object.fromEntries(
+      rows.flatMap((row) =>
+        (row.teachers ?? []).map((teacher) => [String(teacher.id), row.missing_items ?? []]),
+      ),
+    )
+    const result = await notifyTeacherSubmissions({ notify, missing_items: missingItems })
+    setMessage(result.message ?? 'Notifications sent.')
+  }
+
+  return (
+    <AdminParityShell title="Teacher Submission Dashboard">
+      {message ? <div className="alert alert-info">{message}</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>
+        <div className="col-sm-6 col-xl-3"><div className="card shadow-sm"><div className="card-body"><div className="text-uppercase small text-muted">Submitted</div><div className="fs-3 fw-semibold">{summary.submitted_items ?? 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">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>
+      </div>
+      <div className="table-responsive">
+        <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) => (
+              <tr key={String(row.class_section_id ?? row.class_section ?? '')}>
+                <td>
+                  <div className="d-flex flex-column gap-1">
+                    {(row.teachers ?? []).map((teacher) => (
+                      <label key={teacher.id} className="form-check mb-0">
+                        <input className="form-check-input" type="checkbox" checked={Boolean(selected[String(teacher.id)])} onChange={(e) => setSelected((current) => ({ ...current, [String(teacher.id)]: e.target.checked }))} />
+                        <span className="form-check-label ms-2">{teacher.label}</span>
+                      </label>
+                    ))}
+                  </div>
+                </td>
+                <td>{row.class_section ?? '—'}</td>
+                <td>{(row.teachers ?? []).map((teacher) => teacher.label).join(', ') || '—'}</td>
+                <td><span className={`badge ${submissionBadgeClass(row.midterm_score_status)}`}>{row.midterm_score_status ?? 'missing'}</span></td>
+                <td><span className={`badge ${submissionBadgeClass(row.midterm_comment_status)}`}>{row.midterm_comment_status ?? 'missing'}</span></td>
+                <td><span className={`badge ${submissionBadgeClass(row.participation_status)}`}>{row.participation_status ?? 'missing'}</span></td>
+                <td><span className={`badge ${submissionBadgeClass(row.ptap_comment_status)}`}>{row.ptap_comment_status ?? 'missing'}</span></td>
+                <td><span className={`badge ${submissionBadgeClass(row.attendance_status)}`}>{row.attendance_status ?? 'missing'}</span></td>
+                <td>{(row.missing_items ?? []).join(', ') || '—'}</td>
+                <td>{row.student_count ?? 0}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminClassWarningModalPage() {
+  const [searchParams] = useSearchParams()
+  const warningMessage = searchParams.get('message') ?? 'An unexpected class assignment issue occurred.'
+
+  return (
+    <AdminParityShell title="Warning">
+      <div className="modal d-block position-static" role="alertdialog" aria-modal="true">
+        <div className="modal-dialog modal-dialog-centered">
+          <div className="modal-content border-warning">
+            <div className="modal-header bg-warning text-dark">
+              <h5 className="modal-title">
+                <i className="bi bi-exclamation-triangle-fill me-2" aria-hidden />Warning
+              </h5>
+            </div>
+            <div className="modal-body text-dark fs-6">{warningMessage}</div>
+            <div className="modal-footer justify-content-between">
+              <Link to="/app/administrator/class_assignment" className="btn btn-secondary">
+                Back to Class Assignment
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
+
+export function AdminCourseMaterialsPage() {
+  return (
+    <AdminParityShell title="Course Materials">
+      <div className="alert alert-secondary">
+        The legacy `course_materials.php` view only contained hardcoded sample rows, and there is no
+        matching course-materials API in the current backend.
+      </div>
+      <div className="card">
+        <div className="card-body">
+          <p className="mb-3">
+            I converted this page into an explicit admin placeholder instead of wiring a fake upload
+            form with no backend. The current API-backed alternatives in this app are class progress,
+            assignments, and class sections.
+          </p>
+          <div className="d-flex gap-2 flex-wrap">
+            <Link className="btn btn-outline-primary" to="/app/administrator/class_assignment">
+              Class Assignment
+            </Link>
+            <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">
+              Calendar Events
+            </Link>
+          </div>
+        </div>
+      </div>
+    </AdminParityShell>
+  )
+}
diff --git a/src/pages/AppHome.tsx b/src/pages/AppHome.tsx
index d0462ba..8b0db37 100644
--- a/src/pages/AppHome.tsx
+++ b/src/pages/AppHome.tsx
@@ -1,29 +1,39 @@
-import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { fetchDashboardRoute } from '../api/session'
+import { useEffect, useState, type FormEvent } from 'react'
+import {
+  fetchAdministratorDashboardMetrics,
+  searchAdministratorDashboard,
+} from '../api/session'
 import { useAuth } from '../auth/AuthProvider'
+import type {
+  AdministratorDashboardMetricsResponse,
+  AdministratorDashboardSearchResponse,
+} from '../api/types'
 
 export function AppHome() {
   const { user } = useAuth()
-  const [route, setRoute] = useState<string | null>(null)
-  const [roles, setRoles] = useState<string[]>([])
+  const [metrics, setMetrics] = useState<AdministratorDashboardMetricsResponse | null>(null)
+  const [query, setQuery] = useState('')
+  const [search, setSearch] = useState<AdministratorDashboardSearchResponse | null>(null)
+  const [loadingMetrics, setLoadingMetrics] = useState(true)
+  const [searching, setSearching] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     let cancelled = false
     ;(async () => {
+      setLoadingMetrics(true)
       try {
-        const res = await fetchDashboardRoute()
-        const d = res.data?.dashboard
-        if (!cancelled && d) {
-          setRoute(d.route)
-          setRoles(d.roles ?? [])
+        const data = await fetchAdministratorDashboardMetrics()
+        if (!cancelled) {
+          setMetrics(data)
           setError(null)
         }
       } catch (e) {
         if (!cancelled) {
           setError(e instanceof Error ? e.message : 'Unable to load dashboard.')
         }
+      } finally {
+        if (!cancelled) setLoadingMetrics(false)
       }
     })()
     return () => {
@@ -31,74 +41,183 @@ export function AppHome() {
     }
   }, [])
 
-  const roleKeys = user?.roles ? Object.keys(user.roles).filter((k) => user.roles[k]) : []
+  async function onSearch(event: FormEvent) {
+    event.preventDefault()
+    setSearching(true)
+    setError(null)
+    try {
+      const results = await searchAdministratorDashboard(query)
+      setSearch(results)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unable to search dashboard records.')
+    } finally {
+      setSearching(false)
+    }
+  }
+
+  const counts = metrics?.counts ?? {}
+  const statCards = [
+    { key: 'students', title: 'Students', icon: 'bi bi-mortarboard', value: counts.students ?? 0, tone: 'primary' },
+    { key: 'teachers', title: 'Teachers', icon: 'bi bi-person-video3', value: counts.teachers ?? 0, tone: 'success' },
+    { key: 'teacherAssistants', title: 'Teacher Assistants', icon: 'bi bi-people', value: counts.teacherAssistants ?? 0, tone: 'warning' },
+    { key: 'admins', title: 'Admins', icon: 'bi bi-person-badge', value: counts.admins ?? 0, tone: 'info' },
+    { key: 'parents', title: 'Parents', icon: 'bi bi-people-fill', value: counts.parents ?? 0, tone: 'light' },
+  ] as const
 
   return (
-    <div>
-      <h2 className="h4 mb-3">Welcome</h2>
-      <p className="lead mb-4">
-        Signed in as <strong>{user?.name}</strong>.
-      </p>
+    <div className="container-fluid admin-dashboard">
+      <section className="mb-4">
+        <h2>Welcome, {user?.name || 'Administrator'}</h2>
+        <p>Here is an overview of your site's activity.</p>
+      </section>
 
-      <div className="row g-3 mb-4">
-        <div className="col-md-6">
-          <div className="card border-0 shadow-sm h-100">
-            <div className="card-body">
-              <h3 className="h6 text-muted">Roles (from login)</h3>
+      <section className="mb-5">
+        <h2 className="mb-3">Search</h2>
+        {error ? <div className="alert alert-danger">{error}</div> : null}
+
+        <form className="mb-3" onSubmit={onSearch}>
+          <div className="input-group">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Search name, email, phone, school ID, badge code..."
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              required
+            />
+            <button className="btn btn-outline-secondary" type="submit" disabled={searching}>
+              {searching ? 'Searching...' : 'Search'}
+            </button>
+          </div>
+          <div className="form-text">Supports Users, Parents, Staff, Students, and Emergency Contacts.</div>
+        </form>
+
+        {search?.query ? (
+          <div className="mb-2 small text-muted">
+            Showing results for: <strong>{search.query}</strong>
+          </div>
+        ) : null}
+
+        {search && (
+          <div className="row g-3">
+            <SearchTable title="Users" icon="bi bi-people" columns={['Name', 'Email', 'Phone', 'School ID']} rows={search.results.users ?? []} renderRow={(row) => [
+              `${stringValue(row.firstname)} ${stringValue(row.lastname)}`.trim() || '—',
+              stringValue(row.email),
+              stringValue(row.cellphone),
+              stringValue(row.school_id),
+            ]} />
+            <SearchTable title="Students" icon="bi bi-mortarboard" columns={['School ID', 'Name', 'Gender', 'DOB']} rows={search.results.students ?? []} renderRow={(row) => [
+              stringValue(row.school_id),
+              `${stringValue(row.firstname)} ${stringValue(row.lastname)}`.trim() || '—',
+              stringValue(row.gender),
+              stringValue(row.dob),
+            ]} />
+            <SearchTable title="Parents" icon="bi bi-people-fill" columns={['First Parent ID', 'Second Parent', 'Email', 'Phone']} rows={search.results.parents ?? []} renderRow={(row) => [
+              stringValue(row.firstparent_id),
+              `${stringValue(row.secondparent_firstname)} ${stringValue(row.secondparent_lastname)}`.trim() || '—',
+              stringValue(row.secondparent_email),
+              stringValue(row.secondparent_phone),
+            ]} />
+            <SearchTable title="Staff" icon="bi bi-person-badge" columns={['Role', 'Name', 'Email', 'Phone', 'Status']} rows={search.results.staff ?? []} renderRow={(row) => [
+              stringValue(row.role_name),
+              `${stringValue(row.firstname)} ${stringValue(row.lastname)}`.trim() || '—',
+              stringValue(row.email),
+              stringValue(row.phone),
+              stringValue(row.active_role),
+            ]} />
+            <SearchTable title="Emergency Contacts" icon="bi bi-telephone-outbound" columns={['Name', 'Relation', 'Phone', 'Email']} rows={search.results.emergency_contacts ?? []} renderRow={(row) => [
+              stringValue(row.emergency_contact_name),
+              stringValue(row.relation),
+              stringValue(row.cellphone),
+              stringValue(row.email),
+            ]} fullWidth />
+          </div>
+        )}
+      </section>
+
+      <section className="mb-5">
+        <h2 className="mb-4 text-center">Statistics</h2>
+        {loadingMetrics ? (
+          <p className="text-muted text-center">Loading...</p>
+        ) : (
+          <div className="stats-row">
+            {statCards.map((item) => (
+              <div key={item.key} className={`stat-circle circle-${item.tone}`}>
+                <div className="stat-icon"><i className={item.icon} aria-hidden /></div>
+                <div className="stat-value">{item.value}</div>
+                <div className="stat-title">{item.title}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section>
+        <h2 className="mb-3">Recent Activity</h2>
+        <div className="card border-0 shadow-sm">
+          <div className="card-body">
+            {(metrics?.recentActivities ?? []).length === 0 ? (
+              <p className="text-muted mb-0">No recent login activity.</p>
+            ) : (
               <ul className="mb-0">
-                {roleKeys.length ? (
-                  roleKeys.map((r) => <li key={r}>{r}</li>)
-                ) : (
-                  <li className="text-muted">None reported</li>
-                )}
+                {(metrics?.recentActivities ?? []).map((item, index) => (
+                  <li key={`${item.email ?? 'activity'}-${index}`}>
+                    {item.email ?? 'Unknown user'} <span className="text-muted">· {item.login_time ?? '—'}</span>
+                  </li>
+                ))}
               </ul>
-            </div>
+            )}
           </div>
         </div>
-        <div className="col-md-6">
-          <div className="card border-0 shadow-sm h-100">
-            <div className="card-body">
-              <h3 className="h6 text-muted">Dashboard route (API)</h3>
-              {error ? (
-                <p className="text-danger small mb-0">{error}</p>
-              ) : (
-                <>
-                  <p className="mb-1">
-                    <code>{route ?? '—'}</code>
-                  </p>
-                  <p className="small text-muted mb-0">
-                    Resolved roles: {roles.length ? roles.join(', ') : '—'}
-                  </p>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
+      </section>
+    </div>
+  )
+}
 
-      <div className="border rounded p-3 bg-white">
-        <h3 className="h6">Shortcuts</h3>
-        <ul className="mb-0">
-          <li>
-            <Link to="/app/parent/home">Parent — Dashboard</Link> (parity with
-            CodeIgniter <code>parent/parent_dashboard</code>)
-          </li>
-          <li>
-            <Link to="/app/parent/attendance">Parent — Attendance</Link> (parity
-            with CodeIgniter <code>Views/parent/attendance.php</code>)
-          </li>
-          <li>
-            <Link to="/app/parent/home">Parent — All pages</Link> (navigation for
-            every view under <code>Views/parent/</code>)
-          </li>
-          <li>
-            <Link to="/docs">Public API docs (Swagger)</Link>
-          </li>
-          <li>            
-            <code>app/Views</code> screen as an <code>/app/…</code> parity route
-          </li>
-        </ul>
+function SearchTable({
+  title,
+  icon,
+  columns,
+  rows,
+  renderRow,
+  fullWidth = false,
+}: {
+  title: string
+  icon: string
+  columns: string[]
+  rows: Record<string, unknown>[]
+  renderRow: (row: Record<string, unknown>) => string[]
+  fullWidth?: boolean
+}) {
+  return (
+    <div className={`col-12 ${fullWidth ? '' : 'col-lg-6'}`}>
+      <div className="card">
+        <div className="card-header"><i className={`${icon} me-1`} aria-hidden />{title}</div>
+        <div className="card-body p-0">
+          <div className="table-responsive">
+            <table className="table table-sm mb-0">
+              <thead>
+                <tr>{columns.map((column) => <th key={column}>{column}</th>)}</tr>
+              </thead>
+              <tbody>
+                {rows.length === 0 ? (
+                  <tr><td colSpan={columns.length} className="text-muted">No {title.toLowerCase()} found.</td></tr>
+                ) : (
+                  rows.map((row, index) => (
+                    <tr key={String(row.id ?? `${title}-${index}`)}>
+                      {renderRow(row).map((cell, cellIndex) => <td key={`${index}-${cellIndex}`}>{cell || '—'}</td>)}
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   )
 }
+
+function stringValue(value: unknown) {
+  return value == null || value === '' ? '—' : String(value)
+}
diff --git a/src/pages/CompetitionWinnerPages.tsx b/src/pages/CompetitionWinnerPages.tsx
new file mode 100644
index 0000000..f6ef168
--- /dev/null
+++ b/src/pages/CompetitionWinnerPages.tsx
@@ -0,0 +1,445 @@
+import { useEffect, useMemo, useState, type FormEvent } from 'react'
+import { Link, useParams, useSearchParams } from 'react-router-dom'
+import {
+  fetchCompetitionScoresDetail,
+  fetchCompetitionScoresIndex,
+  fetchPublishedCompetition,
+  fetchPublishedCompetitions,
+  saveCompetitionScores,
+} from '../api/session'
+import type {
+  CompetitionScoreStudentRow,
+  CompetitionScoresEditResponse,
+  CompetitionScoresIndexCompetitionRow,
+  PublicCompetitionRow,
+  PublicCompetitionWinnerRow,
+} from '../api/types'
+
+function PageShell({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="container-fluid py-3">
+      <div className="mb-4">
+        <h2 className="h4 mb-1">{title}</h2>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function formatDate(value?: string | null) {
+  if (!value) return '—'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString()
+}
+
+function competitionLabel(row?: PublicCompetitionRow | null) {
+  return row?.title ?? `Competition #${row?.id ?? ''}`
+}
+
+function noteCard(children: React.ReactNode) {
+  return <div className="alert alert-warning">{children}</div>
+}
+
+export function CompetitionWinnersIndexPage() {
+  const [rows, setRows] = useState<PublicCompetitionRow[]>([])
+  const [teacherRows, setTeacherRows] = useState<CompetitionScoresIndexCompetitionRow[]>([])
+  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') {
+          setRows(published.value.data?.competitions ?? [])
+        }
+
+        if (teacher.status === 'fulfilled') {
+          setTeacherRows(teacher.value.competitions ?? [])
+          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.')
+      }
+    })()
+  }, [])
+
+  return (
+    <PageShell title="Competition Winners">
+      {noteCard(
+        <>
+          The current API exposes published winners data and teacher score entry. I could not find routed admin APIs for
+          create, settings, publish, lock, unlock, export quiz, or recognition PDF.
+        </>,
+      )}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+
+      <div className="card shadow-sm mb-4">
+        <div className="card-header">Published Competitions</div>
+        <div className="table-responsive">
+          <table className="table table-bordered table-sm align-middle mb-0">
+            <thead className="table-light">
+              <tr>
+                <th>ID</th>
+                <th>Title</th>
+                <th>Semester</th>
+                <th>School Year</th>
+                <th>Published</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.length === 0 ? (
+                <tr><td colSpan={6} className="text-muted">No published competitions found.</td></tr>
+              ) : rows.map((row) => (
+                <tr key={row.id}>
+                  <td>{row.id}</td>
+                  <td>{competitionLabel(row)}</td>
+                  <td>{row.semester ?? '—'}</td>
+                  <td>{row.school_year ?? '—'}</td>
+                  <td>{formatDate(row.published_at)}</td>
+                  <td className="d-flex gap-2 flex-wrap">
+                    <Link className="btn btn-sm btn-outline-secondary" to={`/app/admin/competition-winners/${row.id}/preview`}>Preview</Link>
+                    <Link className="btn btn-sm btn-outline-secondary" to={`/app/admin/competition-winners/${row.id}/winners`}>Winners</Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="card shadow-sm">
+        <div className="card-header">Teacher Score Entry Competitions{activeClassName ? ` - ${activeClassName}` : ''}</div>
+        <div className="table-responsive">
+          <table className="table table-bordered table-sm align-middle mb-0">
+            <thead className="table-light">
+              <tr>
+                <th>ID</th>
+                <th>Title</th>
+                <th>Published</th>
+                <th>Locked</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {teacherRows.length === 0 ? (
+                <tr><td colSpan={5} className="text-muted">No teacher competition score entries available for this account.</td></tr>
+              ) : teacherRows.map((row) => (
+                <tr key={row.id}>
+                  <td>{row.id}</td>
+                  <td>{row.title ?? `Competition #${row.id}`}</td>
+                  <td>{row.is_published ? 'Yes' : 'No'}</td>
+                  <td>{row.is_locked ? 'Yes' : 'No'}</td>
+                  <td>
+                    <Link className="btn btn-sm btn-outline-primary" to={`/app/admin/competition-winners/${row.id}`}>Enter Scores</Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </PageShell>
+  )
+}
+
+export function CompetitionWinnerFormPage() {
+  const { id } = useParams()
+
+  return (
+    <PageShell title={id ? 'Edit Competition' : 'Create Competition'}>
+      {noteCard(
+        <>
+          This screen depends on admin competition management endpoints that are not currently routed in the Laravel API.
+          The SPA can show published winners and teacher score entry, but it cannot safely create or update competition settings
+          without those endpoints.
+        </>,
+      )}
+      <div className="card shadow-sm">
+        <div className="card-body">
+          <div className="row g-3">
+            <div className="col-md-8"><label className="form-label">Title</label><input className="form-control" disabled value="" /></div>
+            <div className="col-md-4"><label className="form-label">Class Section</label><input className="form-control" disabled value="" /></div>
+            <div className="col-md-3"><label className="form-label">Semester</label><input className="form-control" disabled value="" /></div>
+            <div className="col-md-3"><label className="form-label">School Year</label><input className="form-control" disabled value="" /></div>
+            <div className="col-md-3"><label className="form-label">Start Date</label><input className="form-control" disabled value="" /></div>
+            <div className="col-md-3"><label className="form-label">End Date</label><input className="form-control" disabled value="" /></div>
+          </div>
+        </div>
+      </div>
+    </PageShell>
+  )
+}
+
+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 (
+    <PageShell title="Enter Scores">
+      {noteCard(
+        <>
+          This page uses the teacher-facing `competition-scores` API. It works only when the logged-in account is assigned to the
+          target class section.
+        </>,
+      )}
+      {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">
+              <button className="btn btn-primary" disabled={Boolean(data.isLocked)}>Save Scores</button>
+              <Link className="btn btn-outline-secondary" to={`/app/admin/competition-winners/${competitionId}/preview`}>Preview</Link>
+            </div>
+          </form>
+        </>
+      ) : (
+        <p className="text-muted mb-0">No competition data loaded.</p>
+      )}
+    </PageShell>
+  )
+}
+
+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 [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 }
+}
+
+export function CompetitionWinnerPreviewPage() {
+  const { id } = useParams()
+  const competitionId = Number(id)
+  const { competition, winnersByClass, sectionMap, error } = usePublishedCompetition(competitionId)
+
+  return (
+    <PageShell title="Preview Winners">
+      {noteCard('This preview is backed by the public published-winners API. Unpublished preview data is not exposed by the current backend.')}
+      {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}
+    </PageShell>
+  )
+}
+
+export function CompetitionWinnerWinnersPage() {
+  const { id } = useParams()
+  const competitionId = Number(id)
+  const { competition, winnersByClass, sectionMap, questionCounts, error } = usePublishedCompetition(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 (
+    <PageShell title="School Winners">
+      {noteCard('This page uses the public published-winners API. The admin-only recognition PDF endpoint is not currently exposed in the Laravel API.')}
+      {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}
+    </PageShell>
+  )
+}
diff --git a/src/pages/RoleSelectPage.tsx b/src/pages/RoleSelectPage.tsx
index 0282b91..fb34ca7 100644
--- a/src/pages/RoleSelectPage.tsx
+++ b/src/pages/RoleSelectPage.tsx
@@ -8,22 +8,19 @@ export function RoleSelectPage() {
   const { user, roles, selectedRole, setSelectedRole } = useAuth()
   const navigate = useNavigate()
   const location = useLocation()
-  const [pickedRole, setPickedRole] = useState<string | null>(selectedRole)
+  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() {
-    if (!pickedRole) {
-      setError('Please select a role to continue.')
-      return
-    }
+  async function continueLogin(nextRole: string) {
     setBusy(true)
+    setBusyRole(nextRole)
     setError(null)
-    setSelectedRole(pickedRole)
+    setSelectedRole(nextRole)
 
     let target = from.startsWith('/app') ? from : '/app/home'
-    if (pickedRole.toLowerCase() === 'parent' && target === '/app/home') {
+    if (nextRole.toLowerCase() === 'parent' && target === '/app/home') {
       target = '/app/parent/home'
     }
     try {
@@ -39,41 +36,43 @@ export function RoleSelectPage() {
   }
 
   return (
-    <div className="container py-4">
-      <div className="card border-0 shadow-sm mx-auto" style={{ maxWidth: 640 }}>
-        <div className="card-body p-4">
-          <h2 className="h4 mb-2">Select role</h2>
-          <p className="text-muted mb-3">
-            {user?.name ? `Signed in as ${user.name}.` : 'Signed in successfully.'} Choose a role
-            to continue.
+    <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>
+        <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="list-group mb-3">
+          <div className="d-flex flex-wrap gap-3">
             {roles.map((role) => (
               <button
                 key={role}
                 type="button"
-                className={`list-group-item list-group-item-action text-start ${
-                  pickedRole === role ? 'active' : ''
+                className={`btn ${
+                  selectedRole === role ? 'btn-primary' : 'btn-outline-primary'
                 }`}
-                onClick={() => setPickedRole(role)}
+                onClick={() => {
+                  void continueLogin(role)
+                }}
+                disabled={busy}
               >
-                {role}
+                {busy && busyRole === role
+                  ? 'Opening...'
+                  : role.replace(/_/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase())}
               </button>
             ))}
           </div>
 
           {error ? (
-            <div className="alert alert-danger py-2" role="alert">
+            <div className="alert alert-danger py-2 mt-3" role="alert">
               {error}
             </div>
           ) : null}
 
-          <div className="d-grid">
-            <button type="button" className="btn btn-success" onClick={continueLogin} disabled={busy}>
-              {busy ? 'Continuing…' : 'Continue'}
-            </button>
-          </div>
         </div>
       </div>
     </div>