feat: enhance textbook reader with anchor text support and improve knowledge point management

src/modules/classes/components/class-detail/class-students-widget.tsx

@@ -0,0 +1,106 @@
+
+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"
+import { formatDate } from "@/shared/lib/utils"
+
+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>
+  )
+}