106 lines
4.2 KiB
TypeScript
106 lines
4.2 KiB
TypeScript
|
|
import Link from "next/link"
|
|
import { ChevronRight, Users } from "lucide-react"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
|
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"
|
|
|
|
interface StudentSummary {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
image?: string | null
|
|
status: string
|
|
subjectScores?: Record<string, number | null>
|
|
}
|
|
|
|
interface ClassStudentsWidgetProps {
|
|
classId: string
|
|
students: StudentSummary[]
|
|
}
|
|
|
|
export function ClassStudentsWidget({ classId, students }: ClassStudentsWidgetProps) {
|
|
const activeCount = students.filter(s => s.status === "active").length
|
|
|
|
return (
|
|
<Card className="h-fit">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<div className="space-y-1">
|
|
<CardTitle className="text-base font-semibold">Students</CardTitle>
|
|
<CardDescription>
|
|
{activeCount} active students
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(classId)}`}>
|
|
View All
|
|
<ChevronRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="pt-4">
|
|
{students.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center space-y-3 py-8 text-center">
|
|
<div className="rounded-full bg-muted p-3">
|
|
<Users className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">No students enrolled yet.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{students.slice(0, 6).map((student) => (
|
|
<div key={student.id} className="flex flex-col gap-2 rounded-lg border p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={student.image || undefined} alt={student.name} />
|
|
<AvatarFallback className="text-xs">
|
|
{student.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-0.5">
|
|
<div className="text-sm font-medium leading-none">{student.name}</div>
|
|
<div className="text-xs text-muted-foreground line-clamp-1">{student.email}</div>
|
|
</div>
|
|
</div>
|
|
<Badge
|
|
variant={student.status === "active" ? "outline" : "secondary"}
|
|
className="text-[10px] capitalize"
|
|
>
|
|
{student.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Subject Scores */}
|
|
{student.subjectScores && Object.keys(student.subjectScores).length > 0 && (
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
|
{Object.entries(student.subjectScores).map(([subject, score]) => (
|
|
<div key={subject} className="flex items-center gap-1.5 rounded bg-muted/50 px-2 py-1 text-[10px]">
|
|
<span className="font-medium text-muted-foreground">{subject}</span>
|
|
{score !== null ? (
|
|
<span className={score >= 60 ? "font-semibold text-primary" : "font-semibold text-destructive"}>
|
|
{score}
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|