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:
SpecialX
@@ -7,152 +7,154 @@ import { cn, formatDate } from "@/shared/lib/utils"
|
||||
import { Exam } from "../types"
|
||||
import { ExamActions } from "./exam-actions"
|
||||
|
||||
export const examColumns: ColumnDef<Exam>[] = [
|
||||
{
|
||||
id: "select",
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
checked={table.getIsAllPageRowsSelected()}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
size: 36,
|
||||
},
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Exam Info",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-base">{row.original.title}</span>
|
||||
{row.original.tags && row.original.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.original.tags.slice(0, 2).map((t, idx) => (
|
||||
<Badge key={`${t}-${idx}`} variant="secondary" className="h-5 px-1.5 text-[10px]">
|
||||
{t}
|
||||
</Badge>
|
||||
))}
|
||||
{row.original.tags.length > 2 && (
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-[10px]">+{row.original.tags.length - 2}</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-medium text-foreground/80">{row.original.subject}</span>
|
||||
<span>•</span>
|
||||
<span>{row.original.grade}</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status
|
||||
// Use 'default' as base for published/success to ensure type safety,
|
||||
// but override with className below
|
||||
const variant: BadgeProps["variant"] =
|
||||
status === "published"
|
||||
? "default"
|
||||
: status === "archived"
|
||||
? "secondary"
|
||||
: "outline"
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant={variant}
|
||||
className={cn(
|
||||
"capitalize",
|
||||
status === "published" && "bg-green-600 hover:bg-green-700 border-transparent",
|
||||
status === "draft" && "bg-amber-100 text-amber-800 hover:bg-amber-200 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"
|
||||
)}
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
)
|
||||
type TranslationFn = (key: string, params?: Record<string, unknown>) => string
|
||||
|
||||
export function createExamColumns(t: TranslationFn): ColumnDef<Exam>[] {
|
||||
return [
|
||||
{
|
||||
id: "select",
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
checked={table.getIsAllPageRowsSelected()}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label={t("exam.actions.selectAll")}
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label={t("exam.actions.selectRow")}
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
size: 36,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "stats",
|
||||
header: "Stats",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-col gap-1 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-foreground">{row.original.questionCount} Qs</span>
|
||||
<span>•</span>
|
||||
<span>{row.original.totalScore} Pts</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span>{row.original.durationMin} min</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "difficulty",
|
||||
header: "Difficulty",
|
||||
cell: ({ row }) => {
|
||||
const diff = row.original.difficulty
|
||||
return (
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: t("exam.columns.examInfo"),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((level) => (
|
||||
<div
|
||||
key={level}
|
||||
className={cn(
|
||||
"h-1.5 w-3 rounded-full",
|
||||
level <= diff
|
||||
? diff <= 2 ? "bg-green-500" : diff === 3 ? "bg-yellow-500" : "bg-red-500"
|
||||
: "bg-muted"
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-base">{row.original.title}</span>
|
||||
{row.original.tags && row.original.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.original.tags.slice(0, 2).map((tag, idx) => (
|
||||
<Badge key={`${tag}-${idx}`} variant="secondary" className="h-5 px-1.5 text-[10px]">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
{row.original.tags.length > 2 && (
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-[10px]">+{row.original.tags.length - 2}</Badge>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-medium text-foreground/80">{row.original.subject}</span>
|
||||
<span>•</span>
|
||||
<span>{row.original.grade}</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground font-medium">
|
||||
{diff === 1 ? "Easy" : diff === 2 ? "Easy-Med" : diff === 3 ? "Medium" : diff === 4 ? "Med-Hard" : "Hard"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "dates",
|
||||
header: "Date",
|
||||
cell: ({ row }) => {
|
||||
const scheduled = row.original.scheduledAt
|
||||
const created = row.original.createdAt
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 text-xs">
|
||||
{scheduled ? (
|
||||
<>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-400">Scheduled</span>
|
||||
<span className="text-muted-foreground">{formatDate(scheduled)}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-muted-foreground">Created</span>
|
||||
<span>{formatDate(created)}</span>
|
||||
</>
|
||||
)}
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: t("exam.columns.status"),
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status
|
||||
const variant: BadgeProps["variant"] =
|
||||
status === "published"
|
||||
? "default"
|
||||
: status === "archived"
|
||||
? "secondary"
|
||||
: "outline"
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant={variant}
|
||||
className={cn(
|
||||
"capitalize",
|
||||
status === "published" && "bg-green-600 hover:bg-green-700 border-transparent",
|
||||
status === "draft" && "bg-amber-100 text-amber-800 hover:bg-amber-200 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"
|
||||
)}
|
||||
>
|
||||
{t(`exam.status.${status}`)}
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "stats",
|
||||
header: t("exam.columns.stats"),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-col gap-1 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-foreground">{row.original.questionCount} {t("exam.columns.questions")}</span>
|
||||
<span>•</span>
|
||||
<span>{row.original.totalScore} {t("exam.columns.points")}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span>{row.original.durationMin} min</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => <ExamActions exam={row.original} />,
|
||||
},
|
||||
]
|
||||
{
|
||||
accessorKey: "difficulty",
|
||||
header: t("exam.columns.difficulty"),
|
||||
cell: ({ row }) => {
|
||||
const diff = row.original.difficulty
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((level) => (
|
||||
<div
|
||||
key={level}
|
||||
className={cn(
|
||||
"h-1.5 w-3 rounded-full",
|
||||
level <= diff
|
||||
? diff <= 2 ? "bg-green-500" : diff === 3 ? "bg-yellow-500" : "bg-red-500"
|
||||
: "bg-muted"
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground font-medium">
|
||||
{t(`exam.difficulty.${diff}`)}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "dates",
|
||||
header: t("exam.columns.date"),
|
||||
cell: ({ row }) => {
|
||||
const scheduled = row.original.scheduledAt
|
||||
const created = row.original.createdAt
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 text-xs">
|
||||
{scheduled ? (
|
||||
<>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-400">{t("exam.columns.scheduled")}</span>
|
||||
<span className="text-muted-foreground">{formatDate(scheduled)}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-muted-foreground">{t("exam.columns.created")}</span>
|
||||
<span>{formatDate(created)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => <ExamActions exam={row.original} />,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user