feat(exam-homework): add audit report, i18n, error boundaries, and permission hardening
- Add comprehensive audit report for exam and homework module - Create exam-homework i18n message files (zh-CN + en) and register namespace - Add permission check to gradeHomeworkSubmissionAction to prevent horizontal privilege escalation - Add Error Boundary + loading.tsx for 5 key pages (exam build/proctoring, homework assignment/submissions, student assignment) - Refactor exam-columns to createExamColumns(t) factory for i18n support - Refactor exam-data-table to manage columns internally via useTranslations - Replace hardcoded strings with i18n keys in all exam/homework components and pages - Add getHomeworkSubmissionForGrading data-access for secure grading flow
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { AlertCircle } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export default function AssignmentDetailError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
const t = useTranslations("examHomework")
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
|
||||
<EmptyState
|
||||
icon={AlertCircle}
|
||||
title={t("homework.error.notFound")}
|
||||
description={t("homework.error.assignmentNotFound")}
|
||||
action={{
|
||||
label: t("common.retry"),
|
||||
onClick: () => reset(),
|
||||
}}
|
||||
className="border-none shadow-none h-auto"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
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-7 w-48" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<div className="rounded-md border bg-card">
|
||||
<div className="p-4 space-y-3">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { AlertCircle } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export default function SubmissionsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
const t = useTranslations("examHomework")
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
|
||||
<EmptyState
|
||||
icon={AlertCircle}
|
||||
title={t("homework.error.notFound")}
|
||||
description={t("homework.error.submissionNotFound")}
|
||||
action={{
|
||||
label: t("common.retry"),
|
||||
onClick: () => reset(),
|
||||
}}
|
||||
className="border-none shadow-none h-auto"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
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-7 w-40" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<div className="rounded-md border bg-card">
|
||||
<div className="p-4 space-y-3">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { JSX } from "react"
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import {
|
||||
@@ -18,6 +19,7 @@ export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function HomeworkAssignmentSubmissionsPage({ params }: { params: Promise<{ id: string }> }): Promise<JSX.Element> {
|
||||
const { id } = await params
|
||||
const t = await getTranslations("examHomework")
|
||||
const [assignment, submissions] = await Promise.all([
|
||||
getHomeworkAssignmentById(id),
|
||||
getHomeworkSubmissions({ assignmentId: id }),
|
||||
@@ -28,24 +30,24 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Submissions</h1>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{t("homework.grade.submissions")}</h1>
|
||||
<p className="text-muted-foreground truncate">{assignment.title}</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Exam: {assignment.sourceExamTitle}</span>
|
||||
<span>{t("homework.grade.exam")}: {assignment.sourceExamTitle}</span>
|
||||
<span aria-hidden="true">•</span>
|
||||
<span className="tabular-nums">Targets: {assignment.targetCount}</span>
|
||||
<span className="tabular-nums">{t("homework.grade.targets")}: {assignment.targetCount}</span>
|
||||
<span aria-hidden="true">•</span>
|
||||
<span className="tabular-nums">Submitted: {assignment.submittedCount}</span>
|
||||
<span className="tabular-nums">{t("homework.grade.submittedCount")}: {assignment.submittedCount}</span>
|
||||
<span aria-hidden="true">•</span>
|
||||
<span className="tabular-nums">Graded: {assignment.gradedCount}</span>
|
||||
<span className="tabular-nums">{t("homework.grade.gradedCount")}: {assignment.gradedCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/teacher/homework/submissions">Back</Link>
|
||||
<Link href="/teacher/homework/submissions">{t("homework.grade.back")}</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/homework/assignments/${id}`}>Open Assignment</Link>
|
||||
<Link href={`/teacher/homework/assignments/${id}`}>{t("homework.grade.openAssignment")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,11 +56,11 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Student</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Submitted</TableHead>
|
||||
<TableHead>Score</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
<TableHead>{t("homework.grade.student")}</TableHead>
|
||||
<TableHead>{t("homework.grade.status")}</TableHead>
|
||||
<TableHead>{t("homework.grade.submitted")}</TableHead>
|
||||
<TableHead>{t("homework.grade.score")}</TableHead>
|
||||
<TableHead>{t("homework.grade.action")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@@ -69,13 +71,13 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{s.status}
|
||||
</Badge>
|
||||
{s.isLate ? <span className="ml-2 text-xs text-destructive">Late</span> : null}
|
||||
{s.isLate ? <span className="ml-2 text-xs text-destructive">{t("homework.grade.late")}</span> : null}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{s.submittedAt ? formatDate(s.submittedAt) : "-"}</TableCell>
|
||||
<TableCell className="tabular-nums">{typeof s.score === "number" ? s.score : "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/teacher/homework/submissions/${s.id}`} className="text-sm underline-offset-4 hover:underline">
|
||||
Grade
|
||||
{t("homework.grade.title")}
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex w-full justify-center items-center min-h-[calc(100vh-160px)] p-8 max-w-[1200px] mx-auto">
|
||||
<div className="w-full space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<Skeleton className="h-[600px] w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,16 +11,22 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import { Progress } from "@/shared/components/ui/progress"
|
||||
import { ListPagination, computePagination, paginate } from "@/shared/components/ui/list-pagination"
|
||||
import { formatDate, formatNumber } from "@/shared/lib/utils"
|
||||
import { getParam, type SearchParams } from "@/shared/lib/search-params"
|
||||
import { getHomeworkAssignments } from "@/modules/homework/data-access"
|
||||
import { getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { PenTool, PlusCircle } from "lucide-react"
|
||||
import { PenTool, PlusCircle, AlertCircle } from "lucide-react"
|
||||
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
export default async function AssignmentsPage({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<JSX.Element> {
|
||||
const t = await getTranslations("examHomework")
|
||||
const sp = await searchParams
|
||||
const rawClassId = getParam(sp, "classId")
|
||||
const creatorId = await getTeacherIdForMutations()
|
||||
@@ -36,19 +42,26 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
|
||||
const hasAssignments = assignments.length > 0
|
||||
const className = filteredClassId ? classes.find((c) => c.id === filteredClassId)?.name : undefined
|
||||
|
||||
// 分页计算
|
||||
const { page } = computePagination(sp, PAGE_SIZE)
|
||||
const total = assignments.length
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
const currentPage = Math.min(page, totalPages)
|
||||
const pagedAssignments = paginate(assignments, currentPage, PAGE_SIZE)
|
||||
|
||||
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">Assignments</h1>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{t("homework.list.title")}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{filteredClassId ? `Filtered by class: ${className ?? filteredClassId}` : "Manage homework assignments."}
|
||||
{filteredClassId ? t("homework.list.filterByClass", { className: className ?? filteredClassId }) : t("homework.list.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{filteredClassId ? (
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/teacher/homework/assignments">Clear filter</Link>
|
||||
<Link href="/teacher/homework/assignments">{t("homework.list.clearFilters")}</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button asChild>
|
||||
@@ -60,7 +73,7 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
|
||||
}
|
||||
>
|
||||
<PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Create Assignment
|
||||
{t("homework.list.create")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
@@ -68,11 +81,11 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
|
||||
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
title="No assignments"
|
||||
description={filteredClassId ? "No assignments for this class yet." : "You haven't created any assignments yet."}
|
||||
title={t("homework.list.empty")}
|
||||
description={filteredClassId ? t("homework.list.emptyFiltered") : t("homework.list.emptyDescription")}
|
||||
icon={PenTool}
|
||||
action={{
|
||||
label: "Create Assignment",
|
||||
label: t("homework.list.create"),
|
||||
href:
|
||||
filteredClassId
|
||||
? `/teacher/homework/assignments/create?classId=${encodeURIComponent(filteredClassId)}`
|
||||
@@ -84,36 +97,73 @@ export default async function AssignmentsPage({ searchParams }: { searchParams:
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead>Source Exam</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead className="w-[260px]">{t("homework.list.columns.title")}</TableHead>
|
||||
<TableHead>{t("homework.list.columns.status")}</TableHead>
|
||||
<TableHead>{t("homework.list.columns.dueAt")}</TableHead>
|
||||
<TableHead className="w-[180px]">{t("homework.list.columns.submissionRate")}</TableHead>
|
||||
<TableHead className="text-right">{t("homework.list.columns.averageScore")}</TableHead>
|
||||
<TableHead className="text-right">{t("homework.list.columns.overdue")}</TableHead>
|
||||
<TableHead>{t("homework.list.columns.sourceExam")}</TableHead>
|
||||
<TableHead>{t("homework.list.columns.createdAt")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{assignments.map((a) => (
|
||||
<TableRow key={a.id}>
|
||||
<TableCell className="font-medium">
|
||||
<Link
|
||||
href={`/teacher/homework/assignments/${a.id}`}
|
||||
className="hover:underline line-clamp-2 max-w-[240px]"
|
||||
>
|
||||
{a.title}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell className="text-muted-foreground truncate max-w-[200px]">{a.sourceExamTitle}</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{formatDate(a.createdAt)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{pagedAssignments.map((a) => {
|
||||
const submissionRate = a.targetCount > 0 ? (a.submittedCount / a.targetCount) * 100 : 0
|
||||
const hasOverdue = a.overdueCount > 0
|
||||
return (
|
||||
<TableRow key={a.id}>
|
||||
<TableCell className="font-medium">
|
||||
<Link
|
||||
href={`/teacher/homework/assignments/${a.id}`}
|
||||
className="hover:underline line-clamp-2 max-w-[240px]"
|
||||
>
|
||||
{a.title}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{t(`homework.status.${a.status}`)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={submissionRate} className="h-2 w-24" aria-label={t("homework.list.columns.submissionRate")} />
|
||||
<span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
|
||||
{a.submittedCount}/{a.targetCount}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">
|
||||
{a.averageScore !== null ? formatNumber(a.averageScore, 1) : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{hasOverdue ? (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<AlertCircle className="h-3 w-3" aria-hidden="true" />
|
||||
{a.overdueCount}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground tabular-nums">0</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground truncate max-w-[160px]">{a.sourceExamTitle}</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{formatDate(a.createdAt)}</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<ListPagination
|
||||
page={currentPage}
|
||||
pageSize={PAGE_SIZE}
|
||||
total={total}
|
||||
totalPages={totalPages}
|
||||
basePath="/teacher/homework/assignments"
|
||||
searchParams={sp}
|
||||
itemLabel={t("homework.list.pagination.itemLabel")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user