260 lines
10 KiB
TypeScript
260 lines
10 KiB
TypeScript
import Link from "next/link"
|
|
import { Suspense } from "react"
|
|
import { BarChart3 } from "lucide-react"
|
|
|
|
import { getClassHomeworkInsights, getTeacherClasses } from "@/modules/classes/data-access"
|
|
import { InsightsFilters } from "@/modules/classes/components/insights-filters"
|
|
import { EmptyState } from "@/shared/components/ui/empty-state"
|
|
import { Skeleton } from "@/shared/components/ui/skeleton"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
|
import { formatDate } from "@/shared/lib/utils"
|
|
|
|
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
|
|
}
|
|
|
|
const formatNumber = (v: number | null, digits = 1) => {
|
|
if (typeof v !== "number" || Number.isNaN(v)) return "-"
|
|
return v.toFixed(digits)
|
|
}
|
|
|
|
function InsightsResultsFallback() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{Array.from({ length: 3 }).map((_, idx) => (
|
|
<div key={idx} className="rounded-lg border bg-card">
|
|
<div className="p-6">
|
|
<Skeleton className="h-5 w-28" />
|
|
<Skeleton className="mt-3 h-8 w-20" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="rounded-md border bg-card">
|
|
<div className="p-4">
|
|
<Skeleton className="h-8 w-full" />
|
|
</div>
|
|
<div className="space-y-2 p-4 pt-0">
|
|
{Array.from({ length: 8 }).map((_, idx) => (
|
|
<Skeleton key={idx} className="h-10 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function InsightsResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
|
const params = await searchParams
|
|
const classId = getParam(params, "classId")
|
|
|
|
if (!classId || classId === "all") {
|
|
return (
|
|
<EmptyState
|
|
icon={BarChart3}
|
|
title="Select a class to view insights"
|
|
description="Pick a class to see latest homework and historical score statistics."
|
|
className="h-[360px] bg-card"
|
|
/>
|
|
)
|
|
}
|
|
|
|
const insights = await getClassHomeworkInsights({ classId, limit: 50 })
|
|
if (!insights) {
|
|
return (
|
|
<EmptyState
|
|
icon={BarChart3}
|
|
title="Class not found"
|
|
description="This class may not exist or is not accessible."
|
|
className="h-[360px] bg-card"
|
|
/>
|
|
)
|
|
}
|
|
|
|
const hasAssignments = insights.assignments.length > 0
|
|
|
|
if (!hasAssignments) {
|
|
return (
|
|
<EmptyState
|
|
icon={BarChart3}
|
|
title="No homework data for this class"
|
|
description="No homework assignments were targeted to students in this class yet."
|
|
className="h-[360px] bg-card"
|
|
/>
|
|
)
|
|
}
|
|
|
|
const latest = insights.latest
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">Students</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{insights.studentCounts.total}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Active {insights.studentCounts.active} · Inactive {insights.studentCounts.inactive}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">Assignments</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{insights.assignments.length}</div>
|
|
<div className="text-xs text-muted-foreground">Latest: {latest ? formatDate(latest.createdAt) : "-"}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">Overall scores</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Median {formatNumber(insights.overallScores.median, 1)} · Count {insights.overallScores.count}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{latest && (
|
|
<Card>
|
|
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<CardTitle className="text-base">Latest assignment</CardTitle>
|
|
<div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span className="font-medium text-foreground">{latest.title}</span>
|
|
<Badge variant="outline" className="capitalize">
|
|
{latest.status}
|
|
</Badge>
|
|
<span>·</span>
|
|
<span>{formatDate(latest.createdAt)}</span>
|
|
{latest.dueAt ? (
|
|
<>
|
|
<span>·</span>
|
|
<span>Due {formatDate(latest.dueAt)}</span>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href={`/teacher/homework/assignments/${latest.assignmentId}`}>Open</Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>Submissions</Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 md:grid-cols-5">
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Targeted</div>
|
|
<div className="text-lg font-semibold">{latest.targetCount}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Submitted</div>
|
|
<div className="text-lg font-semibold">{latest.submittedCount}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Graded</div>
|
|
<div className="text-lg font-semibold">{latest.gradedCount}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Average</div>
|
|
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.avg, 1)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Median</div>
|
|
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.median, 1)}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="rounded-md border bg-card">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Assignment</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Due</TableHead>
|
|
<TableHead className="text-right">Targeted</TableHead>
|
|
<TableHead className="text-right">Submitted</TableHead>
|
|
<TableHead className="text-right">Graded</TableHead>
|
|
<TableHead className="text-right">Avg</TableHead>
|
|
<TableHead className="text-right">Median</TableHead>
|
|
<TableHead className="text-right">Min</TableHead>
|
|
<TableHead className="text-right">Max</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{insights.assignments.map((a) => (
|
|
<TableRow key={a.assignmentId}>
|
|
<TableCell className="font-medium">
|
|
<Link href={`/teacher/homework/assignments/${a.assignmentId}`} className="hover:underline">
|
|
{a.title}
|
|
</Link>
|
|
<div className="text-xs text-muted-foreground">Created {formatDate(a.createdAt)}</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className="capitalize">
|
|
{a.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
|
<TableCell className="text-right">{a.targetCount}</TableCell>
|
|
<TableCell className="text-right">{a.submittedCount}</TableCell>
|
|
<TableCell className="text-right">{a.gradedCount}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(a.scoreStats.avg, 1)}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(a.scoreStats.median, 1)}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(a.scoreStats.min, 0)}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(a.scoreStats.max, 0)}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default async function ClassInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
|
const classes = await getTeacherClasses()
|
|
|
|
return (
|
|
<div className="flex h-full flex-col space-y-8 p-8">
|
|
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">Class Insights</h2>
|
|
<p className="text-muted-foreground">Latest homework and historical score statistics for a class.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
|
|
<InsightsFilters classes={classes} />
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<InsightsResultsFallback />}>
|
|
<InsightsResults searchParams={searchParams} />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|