refactor(attendance,elective): 审计第二轮 — 全量完成 P0/P1 改进项

P0 修复：
- 页面层 i18n 全量补齐（admin/teacher/parent/student × attendance/elective）
- types.ts 状态标签常量迁移至 constants.ts（i18n key + Badge variant）
- 修复 getTranslations 导入路径（next-intl → next-intl/server）

P1 改进：
- 解耦 parent 模块对 attendance 类型的直接依赖（本地 view-model 类型）
- 导出纯函数（computeStats/buildWarnings/buildLotteryRankCase 等）
- 统一空状态为 EmptyState 组件
- 清理死代码读 Action（attendance 5 个 + elective 3 个）
- 预留监控埋点接口（trackEvent 13 个新事件名）
- 补齐骨架屏 loading.tsx（8 个页面）
- AlertDialog 替换 window.confirm（student-selection-view）
- a11y 改进（aria-label/role/键盘导航）

修复：
- AttendanceStatus 从 constants.ts 重导出，消除 types/constants 双源混乱
- buildWarnings 的 Translator 类型改用 ReturnType<typeof useTranslations>

src/app/(dashboard)/admin/attendance/loading.tsx

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-4 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-16" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/admin/attendance/page.tsx

@@ -1,7 +1,8 @@
-import Link from "next/link"
+import Link from "next/link"
 import type { Metadata } from "next"
 import type { JSX } from "react"
 import { BarChart3, ClipboardList } from "lucide-react"
+import { getTranslations } from "next-intl/server"
 
 import { Button } from "@/shared/components/ui/button"
 import { EmptyState } from "@/shared/components/ui/empty-state"
@@ -15,11 +16,6 @@ import { AttendanceStatsCards } from "@/modules/attendance/components/attendance
 import { AttendanceRecordList } from "@/modules/attendance/components/attendance-record-list"
 import type { AttendanceStatus } from "@/modules/attendance/types"
 
-export const metadata: Metadata = {
-  title: "考勤总览 - Next_Edu",
-  description: "查看全校所有班级的考勤记录",
-}
-
 export const dynamic = "force-dynamic"
 
 const isValidAttendanceStatus = (v?: string): v is AttendanceStatus =>
@@ -33,6 +29,7 @@ export default async function AdminAttendancePage({
   await requirePermission(Permissions.ATTENDANCE_READ)
   const sp = await searchParams
   const ctx = await getAuthContext()
+  const t = await getTranslations("attendance")
 
   const classId = getSearchParam(sp, "classId")
   const statusParam = getSearchParam(sp, "status")
@@ -62,13 +59,13 @@ export default async function AdminAttendancePage({
     <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h2 className="text-2xl font-bold tracking-tight">考勤总览</h2>
-          <p className="text-muted-foreground">查看全校所有班级的考勤记录。</p>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.adminOverview")}</h2>
+          <p className="text-muted-foreground">{t("description.adminOverview")}</p>
         </div>
         <Button asChild variant="outline">
           <Link href="/teacher/attendance/stats">
             <BarChart3 className="mr-2 h-4 w-4" />
-            统计分析
+            {t("actions.stats")}
           </Link>
         </Button>
       </div>
@@ -79,8 +76,8 @@ export default async function AdminAttendancePage({
 
       {result.items.length === 0 && !classId && !status && !date ? (
         <EmptyState
-          title="暂无考勤记录"
-          description="系统中尚未产生任何考勤记录。"
+          title={t("list.empty")}
+          description={t("list.emptyDescription")}
           icon={ClipboardList}
         />
       ) : (

src/app/(dashboard)/admin/elective/[id]/edit/loading.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-9 w-full" />
+            </div>
+          ))}
+          <Skeleton className="h-10 w-32" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/admin/elective/[id]/edit/page.tsx

@@ -1,16 +1,11 @@
 import { notFound } from "next/navigation"
-import type { Metadata } from "next"
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 
 import { getElectiveCourseById } from "@/modules/elective/data-access"
 import { getGrades, getStaffOptions, getSubjectOptions } from "@/modules/school/data-access"
 import { ElectiveCourseForm } from "@/modules/elective/components/elective-course-form"
 
-export const metadata: Metadata = {
-  title: "编辑选修课程 - Next_Edu",
-  description: "更新选修课程详情",
-}
-
 export const dynamic = "force-dynamic"
 
 export default async function EditElectiveCoursePage({
@@ -18,6 +13,7 @@ export default async function EditElectiveCoursePage({
 }: {
   params: Promise<{ id: string }>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("elective")
   const { id } = await params
 
   const [course, subjects, grades, teachers] = await Promise.all([
@@ -32,15 +28,15 @@ export default async function EditElectiveCoursePage({
   return (
     <div className="flex h-full flex-col space-y-8 p-8">
       <div>
-        <h2 className="text-2xl font-bold tracking-tight">编辑选修课程</h2>
-        <p className="text-muted-foreground">更新选修课程详情。</p>
+        <h2 className="text-2xl font-bold tracking-tight">{t("title.edit")}</h2>
+        <p className="text-muted-foreground">{t("description.edit")}</p>
       </div>
       <ElectiveCourseForm
         mode="edit"
         course={course}
         subjects={subjects}
         grades={grades.map((g) => ({ id: g.id, name: g.name }))}
-        teachers={teachers.map((t) => ({ id: t.id, name: t.name }))}
+        teachers={teachers.map((teacher) => ({ id: teacher.id, name: teacher.name }))}
         backHref="/admin/elective"
       />
     </div>

src/app/(dashboard)/admin/elective/create/loading.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-9 w-full" />
+            </div>
+          ))}
+          <Skeleton className="h-10 w-32" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/admin/elective/create/page.tsx

@@ -1,17 +1,13 @@
-import type { Metadata } from "next"
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 
 import { getGrades, getStaffOptions, getSubjectOptions } from "@/modules/school/data-access"
 import { ElectiveCourseForm } from "@/modules/elective/components/elective-course-form"
 
-export const metadata: Metadata = {
-  title: "新建选修课程 - Next_Edu",
-  description: "创建新的选修课程",
-}
-
 export const dynamic = "force-dynamic"
 
 export default async function CreateElectiveCoursePage(): Promise<JSX.Element> {
+  const t = await getTranslations("elective")
   const [subjects, grades, teachers] = await Promise.all([
     getSubjectOptions(),
     getGrades(),
@@ -21,14 +17,14 @@ export default async function CreateElectiveCoursePage(): Promise<JSX.Element> {
   return (
     <div className="flex h-full flex-col space-y-8 p-8">
       <div>
-        <h2 className="text-2xl font-bold tracking-tight">新建选修课程</h2>
-        <p className="text-muted-foreground">创建新的选修课程。</p>
+        <h2 className="text-2xl font-bold tracking-tight">{t("title.create")}</h2>
+        <p className="text-muted-foreground">{t("description.create")}</p>
       </div>
       <ElectiveCourseForm
         mode="create"
         subjects={subjects}
         grades={grades.map((g) => ({ id: g.id, name: g.name }))}
-        teachers={teachers.map((t) => ({ id: t.id, name: t.name }))}
+        teachers={teachers.map((teacher) => ({ id: teacher.id, name: teacher.name }))}
         backHref="/admin/elective"
       />
     </div>

src/app/(dashboard)/admin/elective/loading.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader>
+              <Skeleton className="h-5 w-32" />
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-8 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -1,16 +1,12 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next"
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 
 import { getElectiveCourses } from "@/modules/elective/data-access"
 import { ElectiveCourseList } from "@/modules/elective/components/elective-course-list"
 import { getSearchParam, type SearchParams } from "@/shared/lib/utils"
 import type { ElectiveCourseStatus } from "@/modules/elective/types"
 
-export const metadata: Metadata = {
-  title: "选修课程 - Next_Edu",
-  description: "管理选修课程、开放/关闭选课与抽签",
-}
-
 export const dynamic = "force-dynamic"
 
 const isValidStatus = (v?: string): v is ElectiveCourseStatus =>
@@ -22,6 +18,7 @@ export default async function AdminElectivePage({
   searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
   const sp = await searchParams
+  const t = await getTranslations("elective")
   const statusParam = getSearchParam(sp, "status")
   const status = isValidStatus(statusParam) ? statusParam : undefined
 
@@ -30,9 +27,9 @@ export default async function AdminElectivePage({
   return (
     <div className="flex h-full flex-col space-y-8 p-8">
       <div className="space-y-1">
-        <h2 className="text-2xl font-bold tracking-tight">选修课程</h2>
+        <h2 className="text-2xl font-bold tracking-tight">{t("title.adminList")}</h2>
         <p className="text-muted-foreground">
-          管理选修课程、开放/关闭选课与抽签。
+          {t("description.adminList")}
         </p>
       </div>
       <ElectiveCourseList

src/app/(dashboard)/parent/attendance/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 import { getStudentAttendanceSummary } from "@/modules/attendance/data-access-stats"
 import { StudentAttendanceView } from "@/modules/attendance/components/student-attendance-view"
@@ -5,21 +6,25 @@ import {
   ParentChildrenDataPage,
   ParentNoChildrenPage,
 } from "@/modules/parent/components/parent-children-data-page"
+import { ParentAttendanceWarning } from "@/modules/parent/components/parent-attendance-warning"
+import { ParentAttendanceRateCard } from "@/modules/parent/components/parent-attendance-rate-card"
+import { ParentAttendanceCalendar } from "@/modules/parent/components/parent-attendance-calendar"
 import { CalendarCheck } from "lucide-react"
 
 export const dynamic = "force-dynamic"
 
 export default async function ParentAttendancePage() {
+  const t = await getTranslations("attendance")
   const ctx = await getAuthContext()
 
   if (ctx.dataScope.type !== "children" || ctx.dataScope.childrenIds.length === 0) {
     return (
       <ParentNoChildrenPage
-        title="Children Attendance"
-        description="View your children's attendance records."
+        title={t("title.parent")}
+        description={t("description.parent")}
         icon={CalendarCheck}
-        emptyTitle="No children linked"
-        emptyDescription="Your account is not linked to any student accounts yet. Please contact the school administrator."
+        emptyTitle={t("parent.noChildrenTitle")}
+        emptyDescription={t("parent.noChildrenDescription")}
       />
     )
   }
@@ -37,18 +42,27 @@ export default async function ParentAttendancePage() {
 
   return (
     <ParentChildrenDataPage
-      title="Children Attendance"
-      description="View your children's attendance records."
+      title={t("title.parent")}
+      description={t("parent.compareDescription")}
       icon={CalendarCheck}
-      noRecordsTitle="No attendance records"
-      noRecordsDescription="Your children don't have any attendance records yet."
+      noRecordsTitle={t("list.empty")}
+      noRecordsDescription={t("parent.noRecordsDescription")}
       items={validSummaries}
       renderItem={(summary) => (
-        <>
+        <div className="space-y-6">
           <h3 className="text-lg font-semibold border-b pb-2">{summary.studentName}</h3>
+          <ParentAttendanceCalendar summary={summary} />
           <StudentAttendanceView summary={summary} />
-        </>
+        </div>
       )}
+      headerExtra={
+        validSummaries.length > 0 ? (
+          <div className="space-y-4">
+            <ParentAttendanceRateCard summaries={validSummaries} />
+            <ParentAttendanceWarning summaries={validSummaries} />
+          </div>
+        ) : null
+      }
     />
   )
 }

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

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 import { getStudentAttendanceSummary } from "@/modules/attendance/data-access-stats"
 import { StudentAttendanceView } from "@/modules/attendance/components/student-attendance-view"
@@ -8,19 +9,20 @@ export const dynamic = "force-dynamic"
 
 export default async function StudentAttendancePage() {
   const ctx = await getAuthContext()
+  const t = await getTranslations("attendance")
 
   const summary = await getStudentAttendanceSummary(ctx.userId)
 
   if (!summary) {
     return (
-      <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+      <div className="space-y-8">
         <div>
-          <h2 className="text-2xl font-bold tracking-tight">My Attendance</h2>
-          <p className="text-muted-foreground">View your attendance records.</p>
+          <h2 className="text-2xl font-bold tracking-tight">{t("title.student")}</h2>
+          <p className="text-muted-foreground">{t("description.student")}</p>
         </div>
         <EmptyState
-          title="No user found"
-          description="Unable to load your student profile."
+          title={t("errors.notFound")}
+          description={t("errors.unexpected")}
           icon={UserX}
           className="border-none shadow-none"
         />
@@ -29,10 +31,10 @@ export default async function StudentAttendancePage() {
   }
 
   return (
-    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+    <div className="space-y-8">
       <div>
-        <h2 className="text-2xl font-bold tracking-tight">My Attendance</h2>
-        <p className="text-muted-foreground">View your attendance records and statistics.</p>
+        <h2 className="text-2xl font-bold tracking-tight">{t("title.student")}</h2>
+        <p className="text-muted-foreground">{t("description.student")}</p>
       </div>
       <StudentAttendanceView summary={summary} />
     </div>

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

@@ -1,23 +1,19 @@
+import { getTranslations } from "next-intl/server"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 
 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"
 
 export const dynamic = "force-dynamic"
 
-type SearchParams = { [key: string]: string | string[] | undefined }
-
-const getParam = (params: SearchParams, key: string) => {
-  const v = params[key]
-  return Array.isArray(v) ? v[0] : v
-}
-
 export default async function StudentElectivePage({
   searchParams,
 }: {
   searchParams: Promise<SearchParams>
 }) {
+  const t = await getTranslations("elective")
   const ctx = await getAuthContext()
   const studentId = ctx.userId
 
@@ -39,10 +35,8 @@ export default async function StudentElectivePage({
   return (
     <div className="space-y-8">
       <div>
-        <h2 className="text-2xl font-bold tracking-tight">Elective Courses</h2>
-        <p className="text-muted-foreground">
-          Browse available electives and manage your selections.
-        </p>
+        <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

src/app/(dashboard)/teacher/attendance/loading.tsx

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-4 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-16" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/attendance/page.tsx

@@ -1,8 +1,10 @@
 import type { JSX } from "react"
 import Link from "next/link"
 import { PlusCircle, BarChart3, ClipboardList } from "lucide-react"
+import { getTranslations } from "next-intl/server"
 import { Button } from "@/shared/components/ui/button"
 import { EmptyState } from "@/shared/components/ui/empty-state"
+import { ListPagination, computePagination, paginate } from "@/shared/components/ui/list-pagination"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { getTeacherClasses } from "@/modules/classes/data-access"
@@ -25,6 +27,8 @@ function parseAttendanceStatus(v?: string): AttendanceStatus | undefined {
   return v && VALID_STATUSES.has(v) ? (v as AttendanceStatus) : undefined
 }
 
+const PAGE_SIZE = 20
+
 export default async function TeacherAttendancePage({
   searchParams,
 }: {
@@ -32,6 +36,7 @@ export default async function TeacherAttendancePage({
 }): Promise<JSX.Element> {
   const sp = await searchParams
   const ctx = await getAuthContext()
+  const t = await getTranslations("attendance")
 
   const classId = getParam(sp, "classId")
   const status = getParam(sp, "status")
@@ -49,24 +54,32 @@ export default async function TeacherAttendancePage({
   ])
   const classOptions = classes.map((c) => ({ id: c.id, name: c.name }))
 
+  // 分页计算
+  const { page } = computePagination(sp, PAGE_SIZE)
+  const total = result.items.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const pagedRecords = paginate(result.items, currentPage, PAGE_SIZE)
+  const hasFilters = Boolean(classId || status || date)
+
   return (
     <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Attendance</h1>
-          <p className="text-muted-foreground">Manage student attendance records.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherRecords")}</h1>
+          <p className="text-muted-foreground">{t("description.teacherRecords")}</p>
         </div>
         <div className="flex items-center gap-2">
           <Button asChild variant="outline">
             <Link href="/teacher/attendance/stats">
               <BarChart3 className="mr-2 h-4 w-4" aria-hidden="true" />
-              Statistics
+              {t("actions.stats")}
             </Link>
           </Button>
           <Button asChild>
             <Link href="/teacher/attendance/sheet">
               <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
-              Take Attendance
+              {t("actions.record")}
             </Link>
           </Button>
         </div>
@@ -74,18 +87,31 @@ export default async function TeacherAttendancePage({
 
       <AttendanceFilters classes={classOptions} />
 
-      {result.items.length === 0 && !classId && !status && !date ? (
+      {result.items.length === 0 && !hasFilters ? (
         <EmptyState
-          title="No attendance records"
-          description="Start by taking attendance for your classes."
+          title={t("list.empty")}
+          description={t("list.emptyTeacherDescription")}
           icon={ClipboardList}
           action={{
-            label: "Take Attendance",
+            label: t("actions.record"),
             href: "/teacher/attendance/sheet",
           }}
         />
       ) : (
-        <AttendanceRecordList records={result.items} />
+        <div className="space-y-4">
+          <AttendanceRecordList records={pagedRecords} />
+          {total > 0 ? (
+            <ListPagination
+              page={currentPage}
+              pageSize={PAGE_SIZE}
+              total={total}
+              totalPages={totalPages}
+              basePath="/teacher/attendance"
+              searchParams={sp}
+              itemLabel={t("stats.totalRecords")}
+            />
+          ) : null}
+        </div>
       )}
     </div>
   )

src/app/(dashboard)/teacher/attendance/sheet/loading.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Card>
+        <CardHeader className="space-y-2">
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex gap-3">
+            <Skeleton className="h-9 w-48" />
+            <Skeleton className="h-9 w-40" />
+          </div>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/attendance/sheet/page.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 import { getTeacherClasses } from "@/modules/classes/data-access"
 import { getClassStudentsForAttendance } from "@/modules/attendance/data-access"
 import { AttendanceSheet } from "@/modules/attendance/components/attendance-sheet"
@@ -11,6 +12,7 @@ export default async function AttendanceSheetPage({
 }: {
   searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("attendance")
   const sp = await searchParams
 
   const defaultClassId = getParam(sp, "classId")
@@ -27,10 +29,8 @@ export default async function AttendanceSheetPage({
   return (
     <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">Take Attendance</h1>
-        <p className="text-muted-foreground">
-          Select a class and date, then mark attendance for each student.
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title.sheet")}</h1>
+        <p className="text-muted-foreground">{t("sheet.description")}</p>
       </div>
 
       <AttendanceSheet

src/app/(dashboard)/teacher/attendance/stats/loading.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Skeleton className="h-10 w-full max-w-md" />
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-4 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-16" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/attendance/stats/page.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 import { getTeacherClasses } from "@/modules/classes/data-access"
 import { getClassAttendanceStats } from "@/modules/attendance/data-access-stats"
 import { AttendanceStatsCard } from "@/modules/attendance/components/attendance-stats-card"
@@ -15,6 +16,7 @@ export default async function AttendanceStatsPage({
 }: {
   searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("attendance")
   const sp = await searchParams
 
   const classId = getParam(sp, "classId")
@@ -27,12 +29,12 @@ export default async function AttendanceStatsPage({
     return (
       <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Attendance Statistics</h1>
-          <p className="text-muted-foreground">View class attendance statistics.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherStats")}</h1>
+          <p className="text-muted-foreground">{t("description.teacherStats")}</p>
         </div>
         <EmptyState
-          title="No classes"
-          description="You don't have any classes yet."
+          title={t("stats.noClasses")}
+          description={t("stats.noClassesDescription")}
           icon={BarChart3}
           className="border-none shadow-none"
         />
@@ -53,8 +55,8 @@ export default async function AttendanceStatsPage({
   return (
     <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">Attendance Statistics</h1>
-        <p className="text-muted-foreground">View class attendance statistics and trends.</p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title.teacherStats")}</h1>
+        <p className="text-muted-foreground">{t("description.teacherStats")}</p>
       </div>
 
       <AttendanceStatsClassSelector
@@ -68,14 +70,14 @@ export default async function AttendanceStatsPage({
         <>
           <AttendanceStatsCard stats={summary.stats} />
           <div>
-            <h2 className="mb-4 text-lg font-semibold">Student Records</h2>
+            <h2 className="mb-4 text-lg font-semibold">{t("stats.studentRecords")}</h2>
             <AttendanceRecordList records={summary.studentRecords} />
           </div>
         </>
       ) : (
         <EmptyState
-          title="No data"
-          description="No attendance data available for this class."
+          title={t("stats.noData")}
+          description={t("stats.noDataDescription")}
           icon={BarChart3}
           className="border-none shadow-none"
         />

src/app/(dashboard)/teacher/elective/loading.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader>
+              <Skeleton className="h-5 w-32" />
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-8 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { getTranslations } from "next-intl/server"
 import { getAuthContext } from "@/shared/lib/auth-guard"
 import { getParam, type SearchParams } from "@/shared/lib/search-params"
 import { getElectiveCourses } from "@/modules/elective/data-access"
@@ -23,6 +24,7 @@ export default async function TeacherElectivePage({
 }: {
   searchParams: Promise<SearchParams>
 }): Promise<JSX.Element> {
+  const t = await getTranslations("elective")
   const ctx = await getAuthContext()
   const teacherId = ctx.userId
 
@@ -37,10 +39,8 @@ export default async function TeacherElectivePage({
   return (
     <div className="flex h-full flex-col space-y-8 p-8">
       <div className="space-y-1">
-        <h1 className="text-2xl font-bold tracking-tight">My Elective Courses</h1>
-        <p className="text-muted-foreground">
-          View and manage the elective courses you teach.
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title.teacher")}</h1>
+        <p className="text-muted-foreground">{t("description.teacher")}</p>
       </div>
       <ElectiveCourseList
         courses={courses}