Module Update

src/modules/textbooks/components/knowledge-point-panel.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { Card, CardContent } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Button } from "@/shared/components/ui/button"
+import { Tag, Trash2 } from "lucide-react"
+import { KnowledgePoint } from "../types"
+import { CreateKnowledgePointDialog } from "./create-knowledge-point-dialog"
+import { deleteKnowledgePointAction } from "../actions"
+import { toast } from "sonner"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+
+interface KnowledgePointPanelProps {
+  knowledgePoints: KnowledgePoint[]
+  selectedChapterId: string | null
+  textbookId: string
+}
+
+export function KnowledgePointPanel({ 
+  knowledgePoints, 
+  selectedChapterId, 
+  textbookId 
+}: KnowledgePointPanelProps) {
+  
+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this knowledge point?")) return
+    
+    const result = await deleteKnowledgePointAction(id, textbookId)
+    if (result.success) {
+      toast.success(result.message)
+    } else {
+      toast.error(result.message)
+    }
+  }
+
+  // Filter KPs for the selected chapter
+  const chapterKPs = selectedChapterId 
+    ? knowledgePoints.filter(kp => kp.chapterId === selectedChapterId)
+    : []
+
+  return (
+    <div className="h-full flex flex-col space-y-4">
+      <div className="flex items-center justify-between px-2">
+        <h3 className="font-semibold flex items-center gap-2">
+            <Tag className="h-4 w-4" />
+            Knowledge Points
+        </h3>
+        {selectedChapterId && (
+            <CreateKnowledgePointDialog 
+                chapterId={selectedChapterId} 
+                textbookId={textbookId} 
+            />
+        )}
+      </div>
+
+      <ScrollArea className="flex-1 -mx-2 px-2">
+        {selectedChapterId ? (
+            chapterKPs.length > 0 ? (
+                <div className="space-y-3">
+                    {chapterKPs.map((kp) => (
+                        <Card key={kp.id} className="relative group">
+                            <CardContent className="p-3">
+                                <div className="flex justify-between items-start gap-2">
+                                    <div className="space-y-1">
+                                        <div className="font-medium text-sm leading-tight">
+                                            {kp.name}
+                                        </div>
+                                        {kp.description && (
+                                            <p className="text-xs text-muted-foreground line-clamp-2">
+                                                {kp.description}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1"
+                                        onClick={() => handleDelete(kp.id)}
+                                    >
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                    </Button>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            ) : (
+                <div className="text-sm text-muted-foreground text-center py-8 border rounded-md border-dashed bg-muted/30">
+                    No knowledge points linked to this chapter yet.
+                </div>
+            )
+        ) : (
+            <div className="text-sm text-muted-foreground text-center py-8">
+                Select a chapter to manage its knowledge points.
+            </div>
+        )}
+      </ScrollArea>
+    </div>
+  )
+}