378 lines
16 KiB
TypeScript
378 lines
16 KiB
TypeScript
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
import { BookOpen, Calendar, ChevronRight, Clock, Users } from "lucide-react"
|
|
|
|
import { getClassHomeworkInsights, getClassSchedule, getClassStudents } from "@/modules/classes/data-access"
|
|
import { ScheduleView } from "@/modules/classes/components/schedule-view"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
|
import { cn, 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)
|
|
}
|
|
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2)
|
|
}
|
|
|
|
export default async function ClassDetailPage({
|
|
params,
|
|
searchParams,
|
|
}: {
|
|
params: Promise<{ id: string }>
|
|
searchParams: Promise<SearchParams>
|
|
}) {
|
|
const { id } = await params
|
|
const sp = await searchParams
|
|
const hw = getParam(sp, "hw")
|
|
const hwFilter = hw === "active" || hw === "overdue" ? hw : "all"
|
|
|
|
const [insights, students, schedule] = await Promise.all([
|
|
getClassHomeworkInsights({ classId: id, limit: 50 }),
|
|
getClassStudents({ classId: id }),
|
|
getClassSchedule({ classId: id }),
|
|
])
|
|
|
|
if (!insights) return notFound()
|
|
|
|
const latest = insights.latest
|
|
const filteredAssignments = insights.assignments.filter((a) => {
|
|
if (hwFilter === "all") return true
|
|
if (hwFilter === "overdue") return a.isOverdue
|
|
if (hwFilter === "active") return a.isActive
|
|
return true
|
|
})
|
|
const hasAssignments = filteredAssignments.length > 0
|
|
const scheduleBuilderClasses = [
|
|
{
|
|
id: insights.class.id,
|
|
name: insights.class.name,
|
|
grade: insights.class.grade,
|
|
homeroom: insights.class.homeroom ?? null,
|
|
room: insights.class.room ?? null,
|
|
studentCount: insights.studentCounts.total,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-full space-y-8 p-8">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center gap-2 text-muted-foreground mb-2">
|
|
<Link href="/teacher/classes/my" className="hover:text-foreground transition-colors">
|
|
My Classes
|
|
</Link>
|
|
<ChevronRight className="h-4 w-4" />
|
|
<span className="text-foreground font-medium">{insights.class.name}</span>
|
|
</div>
|
|
<h2 className="text-3xl font-bold tracking-tight">{insights.class.name}</h2>
|
|
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<Badge variant="secondary" className="rounded-sm font-normal">
|
|
{insights.class.grade}
|
|
</Badge>
|
|
{insights.class.homeroom && (
|
|
<>
|
|
<span className="w-1 h-1 rounded-full bg-border" />
|
|
<span>Homeroom: {insights.class.homeroom}</span>
|
|
</>
|
|
)}
|
|
{insights.class.room && (
|
|
<>
|
|
<span className="w-1 h-1 rounded-full bg-border" />
|
|
<span>Room: {insights.class.room}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button asChild variant="outline">
|
|
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
<Users className="mr-2 h-4 w-4" />
|
|
Students
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="outline">
|
|
<Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
<Calendar className="mr-2 h-4 w-4" />
|
|
Schedule
|
|
</Link>
|
|
</Button>
|
|
<Button asChild>
|
|
<Link href={`/teacher/homework/assignments/create?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
Create Homework
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Students</CardTitle>
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{insights.studentCounts.total}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{insights.studentCounts.active} active · {insights.studentCounts.inactive} inactive
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Schedule Items</CardTitle>
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{schedule.length}</div>
|
|
<div className="text-xs text-muted-foreground">Weekly sessions</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Assignments</CardTitle>
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">
|
|
{insights.assignments.filter((a) => a.isActive).length}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{insights.assignments.filter((a) => a.isOverdue).length} overdue
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Class Average</CardTitle>
|
|
<BookOpen className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}%</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Based on {insights.overallScores.count} graded submissions
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-7">
|
|
{/* Main Content Area */}
|
|
<div className="lg:col-span-4 space-y-6">
|
|
{/* Latest Homework */}
|
|
{latest && (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<CardTitle>Latest Homework</CardTitle>
|
|
<CardDescription>Most recent assignment activity</CardDescription>
|
|
</div>
|
|
<Badge variant={latest.isActive ? "default" : "secondary"}>
|
|
{latest.status}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex flex-col gap-4 rounded-lg border p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<Link
|
|
href={`/teacher/homework/assignments/${latest.assignmentId}`}
|
|
className="font-semibold hover:underline"
|
|
>
|
|
{latest.title}
|
|
</Link>
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span>Due {latest.dueAt ? formatDate(latest.dueAt) : "No due date"}</span>
|
|
<span>·</span>
|
|
<span>{latest.submittedCount}/{latest.targetCount} Submitted</span>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>
|
|
Grade
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 border-t pt-4">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold">{latest.gradedCount}</div>
|
|
<div className="text-xs text-muted-foreground">Graded</div>
|
|
</div>
|
|
<div className="text-center border-l border-r">
|
|
<div className="text-2xl font-bold">{formatNumber(latest.scoreStats.avg, 1)}</div>
|
|
<div className="text-xs text-muted-foreground">Average</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold">{formatNumber(latest.scoreStats.median, 1)}</div>
|
|
<div className="text-xs text-muted-foreground">Median</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Students Preview */}
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<div className="space-y-1">
|
|
<CardTitle>Students</CardTitle>
|
|
<CardDescription>Recently active students</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
View All
|
|
<ChevronRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{students.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No students enrolled yet.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{students.slice(0, 5).map((s) => (
|
|
<div key={s.id} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarImage src={s.image || undefined} />
|
|
<AvatarFallback>{getInitials(s.name)}</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<div className="font-medium text-sm">{s.name}</div>
|
|
<div className="text-xs text-muted-foreground">{s.email}</div>
|
|
</div>
|
|
</div>
|
|
<Badge variant={s.status === "active" ? "outline" : "secondary"} className="text-xs font-normal">
|
|
{s.status}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar Area */}
|
|
<div className="lg:col-span-3 space-y-6">
|
|
{/* Schedule Widget */}
|
|
<Card className="h-fit">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Schedule</CardTitle>
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScheduleView schedule={schedule} classes={scheduleBuilderClasses} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Homework History */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>History</CardTitle>
|
|
<div className="flex gap-2 mt-2">
|
|
<Button
|
|
size="sm"
|
|
variant={hwFilter === "all" ? "secondary" : "ghost"}
|
|
asChild
|
|
className="h-7 px-2 text-xs"
|
|
>
|
|
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}`}>All</Link>
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={hwFilter === "active" ? "secondary" : "ghost"}
|
|
asChild
|
|
className="h-7 px-2 text-xs"
|
|
>
|
|
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=active`}>Active</Link>
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={hwFilter === "overdue" ? "secondary" : "ghost"}
|
|
asChild
|
|
className="h-7 px-2 text-xs"
|
|
>
|
|
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=overdue`}>Overdue</Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<div className="divide-y">
|
|
{filteredAssignments.slice(0, 5).map((a) => (
|
|
<div key={a.assignmentId} className="p-4 hover:bg-muted/50 transition-colors">
|
|
<div className="flex items-start justify-between gap-4 mb-2">
|
|
<Link
|
|
href={`/teacher/homework/assignments/${a.assignmentId}`}
|
|
className="text-sm font-medium hover:underline line-clamp-1"
|
|
>
|
|
{a.title}
|
|
</Link>
|
|
<Badge variant={a.isActive ? "default" : "secondary"} className="shrink-0 text-[10px] h-5">
|
|
{a.status}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
|
<span>Due {a.dueAt ? formatDate(a.dueAt) : "-"}</span>
|
|
<div className="flex gap-3">
|
|
<span>{a.submittedCount} submitted</span>
|
|
<span>{formatNumber(a.scoreStats.avg, 0)}% avg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{filteredAssignments.length === 0 && (
|
|
<div className="p-8 text-center text-sm text-muted-foreground">
|
|
No assignments found
|
|
</div>
|
|
)}
|
|
</div>
|
|
{filteredAssignments.length > 5 && (
|
|
<div className="p-2 border-t text-center">
|
|
<Button variant="ghost" size="sm" className="w-full text-muted-foreground" asChild>
|
|
<Link href={`/teacher/homework/assignments?classId=${encodeURIComponent(insights.class.id)}`}>
|
|
View All Assignments
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|