feat(app): add error/loading boundaries across all dashboard routes and new routes

- Add error.tsx and loading.tsx boundaries for admin, parent, student, teacher routes

- Add admin announcements edit, audit-logs overview, curriculum-map, invitation-codes, permissions, questions, roles routes

- Add admin elective detail and components, files, course-plans, users, scheduling boundaries

- Add messages group-compose route

- Add parent course-plans, elective, grades report-card, practice routes

- Add student course-plans, elective detail, error-book dialogs, grades report-card, learning study-path, leave, schedule boundaries

- Add teacher attendance report, classes boundaries, course-plans boundaries, elective, exams analytics/edit-rich/all/create/new, grades report-card, homework boundaries, leave, lesson-plans calendar

- Add auth loading, onboarding loading, api cron

src/app/(dashboard)/student/elective/page.tsx

@@ -1,10 +1,12 @@
+import { Suspense } from "react"
 import { getTranslations } from "next-intl/server"
-import { getAuthContext } from "@/shared/lib/auth-guard"
+import { requirePermission } from "@/shared/lib/auth-guard"
+import { Permissions } from "@/shared/types/permissions"
 
-import { getAvailableCoursesForStudent, getStudentSelections } from "@/modules/elective/data-access-selections"
-import { StudentSelectionView } from "@/modules/elective/components/student-selection-view"
-import { ElectiveFilters } from "@/modules/elective/components/elective-filters"
-import { getParam, type SearchParams } from "@/shared/lib/search-params"
+import { MySelectionsLoader } from "./_components/my-selections-loader"
+import { AvailableCoursesLoader } from "./_components/available-courses-loader"
+import { MySelectionsSkeleton, AvailableCoursesSkeleton } from "./loading"
+import type { SearchParams } from "@/shared/lib/search-params"
 
 export const dynamic = "force-dynamic"
 
@@ -14,35 +16,24 @@ export default async function StudentElectivePage({
   searchParams: Promise<SearchParams>
 }) {
   const t = await getTranslations("elective")
-  const ctx = await getAuthContext()
+  const ctx = await requirePermission(Permissions.ELECTIVE_READ)
   const studentId = ctx.userId
 
-  const [sp, availableCourses, mySelections] = await Promise.all([
-    searchParams,
-    getAvailableCoursesForStudent(studentId),
-    getStudentSelections(studentId),
-  ])
-
-  const q = (getParam(sp, "q") || "").toLowerCase().trim()
-  const modeFilter = getParam(sp, "mode") || "all"
-
-  const filteredCourses = availableCourses.filter((c) => {
-    if (q && !c.name.toLowerCase().includes(q) && !(c.teacherName?.toLowerCase().includes(q) ?? false)) return false
-    if (modeFilter !== "all" && c.selectionMode !== modeFilter) return false
-    return true
-  })
-
   return (
     <div className="space-y-8">
       <div>
         <h2 className="text-2xl font-bold tracking-tight">{t("title.student")}</h2>
         <p className="text-muted-foreground">{t("description.student")}</p>
       </div>
-      {availableCourses.length > 0 && <ElectiveFilters />}
-      <StudentSelectionView
-        availableCourses={filteredCourses}
-        mySelections={mySelections}
-      />
+      <Suspense fallback={<MySelectionsSkeleton />}>
+        <MySelectionsLoader studentId={studentId} />
+      </Suspense>
+      <Suspense fallback={<AvailableCoursesSkeleton />}>
+        <AvailableCoursesLoader
+          studentId={studentId}
+          searchParams={searchParams}
+        />
+      </Suspense>
     </div>
   )
 }