50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import type { HomeworkAssignmentQuestionAnalytics } from "@/modules/homework/types"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { ScrollArea } from "@/shared/components/ui/scroll-area"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
|
|
|
export function HomeworkAssignmentQuestionErrorDetailsCard({
|
|
questions,
|
|
gradedSampleCount,
|
|
}: {
|
|
questions: HomeworkAssignmentQuestionAnalytics[]
|
|
gradedSampleCount: number
|
|
}) {
|
|
return (
|
|
<Card className="md:col-span-1">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Question Error Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{questions.length === 0 || gradedSampleCount === 0 ? (
|
|
<div className="p-4 text-sm text-muted-foreground">No data available.</div>
|
|
) : (
|
|
<ScrollArea className="h-72">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[70px]">Question</TableHead>
|
|
<TableHead className="text-right">Error Count</TableHead>
|
|
<TableHead className="text-right">Error Rate</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{questions.map((q, index) => (
|
|
<TableRow key={q.questionId}>
|
|
<TableCell className="text-sm">
|
|
<div className="font-medium">Q{index + 1}</div>
|
|
</TableCell>
|
|
<TableCell className="text-right text-sm tabular-nums">{q.errorCount}</TableCell>
|
|
<TableCell className="text-right text-sm tabular-nums">{(q.errorRate * 100).toFixed(1)}%</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|