@hed-hog/lms 0.0.320 → 0.0.322

package/hedhog/frontend/app/evaluations/page.tsx.ejs

@@ -1,621 +1,621 @@
-'use client';
-
-// ─── THIS FILE IS THE EVALUATION TOPICS MANAGEMENT PAGE ───────────────────────
-// The ratings/report page was moved to: /lms/reports/evaluations/page.tsx
-
-import {
-  EmptyState,
-  Page,
-  PageHeader,
-  PaginationFooter,
-} from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
-import {
-  DndContext,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  arrayMove,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  BookOpen,
-  GraduationCap,
-  GripVertical,
-  ListChecks,
-  MessageSquare,
-  Pencil,
-  Plus,
-  Search,
-  Star,
-  Trash2,
-  Users,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { toast } from 'sonner';
-import { EvaluationTopicFormSheet } from './_components/evaluation-topic-form-sheet';
-import {
-  TARGET_TYPE_COLORS,
-  TARGET_TYPE_OPTIONS,
-  type ApiEvaluationTopicList,
-  type EvaluationTargetType,
-  type EvaluationTopicItem,
-} from './_components/evaluation-topic-types';
-
-// ── SortableTopicRow ──────────────────────────────────────────────────────────
-
-interface SortableTopicRowProps {
-  item: EvaluationTopicItem;
-  onEdit: (item: EvaluationTopicItem) => void;
-  onDelete: (item: EvaluationTopicItem) => void;
-}
-
-function SortableTopicRow({ item, onEdit, onDelete }: SortableTopicRowProps) {
-  const t = useTranslations('lms.EvaluationTopicsPage');
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.id });
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.4 : undefined,
-  };
-
-  return (
-    <TableRow
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'group cursor-pointer',
-        isDragging && 'bg-muted/50 shadow-md'
-      )}
-      onClick={() => onEdit(item)}
-    >
-      <TableCell className="w-8 pr-0" onClick={(e) => e.stopPropagation()}>
-        <button
-          {...attributes}
-          {...listeners}
-          className="flex cursor-grab touch-none items-center justify-center rounded p-1 text-muted-foreground/40 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
-          tabIndex={-1}
-        >
-          <GripVertical className="size-4" />
-        </button>
-      </TableCell>
-      <TableCell>
-        <div className="flex flex-col gap-0.5">
-          <span className="font-medium">{item.name}</span>
-          {item.description && (
-            <span className="max-w-xs truncate text-xs text-muted-foreground">
-              {item.description}
-            </span>
-          )}
-        </div>
-      </TableCell>
-      <TableCell>
-        <span
-          className={cn(
-            'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
-            TARGET_TYPE_COLORS[item.targetType]
-          )}
-        >
-          {t(`targetType.${item.targetType}`)}
-        </span>
-      </TableCell>
-      <TableCell className="text-sm text-muted-foreground">
-        {item.ratingCount}
-      </TableCell>
-      <TableCell>
-        <Badge
-          variant={item.isActive ? 'default' : 'secondary'}
-          className={cn(
-            'text-xs',
-            item.isActive
-              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
-              : ''
-          )}
-        >
-          {item.isActive ? t('status.active') : t('status.inactive')}
-        </Badge>
-      </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8"
-            onClick={() => onEdit(item)}
-          >
-            <Pencil className="size-3.5" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 text-destructive hover:text-destructive"
-            onClick={() => onDelete(item)}
-            disabled={item.ratingCount > 0}
-            title={
-              item.ratingCount > 0 ? t('delete.disabledTooltip') : undefined
-            }
-          >
-            <Trash2 className="size-3.5" />
-          </Button>
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const PAGE_SIZE = 20;
-
-const TARGET_TYPE_ICONS: Record<EvaluationTargetType, React.ReactNode> = {
-  course: <BookOpen className="size-4" />,
-  course_lesson: <BookOpen className="size-4" />,
-  course_class_session: <Users className="size-4" />,
-  question: <MessageSquare className="size-4" />,
-  exam: <GraduationCap className="size-4" />,
-};
-
-// ── Page ──────────────────────────────────────────────────────────────────────
-
-export default function EvaluationTopicsPage() {
-  const t = useTranslations('lms.EvaluationTopicsPage');
-  const { request } = useApp();
-
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [activeTab, setActiveTab] = useState<EvaluationTargetType | 'all'>(
-    'all'
-  );
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [editingItem, setEditingItem] = useState<EvaluationTopicItem | null>(
-    null
-  );
-  const [deletingItem, setDeletingItem] = useState<EvaluationTopicItem | null>(
-    null
-  );
-  const [deleting, setDeleting] = useState(false);
-  const [localTopics, setLocalTopics] = useState<EvaluationTopicItem[]>([]);
-  const [reordering, setReordering] = useState(false);
-
-  // Debounce search
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(
-      () => setDebouncedSearch(searchInput),
-      400
-    );
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [searchInput]);
-
-  // Reset page on filter/tab change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [debouncedSearch, activeTab]);
-
-  const {
-    data: topicList,
-    isLoading,
-    refetch,
-  } = useQuery<ApiEvaluationTopicList>({
-    queryKey: [
-      'lms-evaluation-topics',
-      currentPage,
-      PAGE_SIZE,
-      debouncedSearch,
-      activeTab,
-    ],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', String(currentPage));
-      params.set('pageSize', String(PAGE_SIZE));
-      if (debouncedSearch) params.set('search', debouncedSearch);
-      if (activeTab !== 'all') params.set('targetType', activeTab);
-      const res = await request<ApiEvaluationTopicList>({
-        url: `/lms/evaluations/topics?${params.toString()}`,
-        method: 'GET',
-      });
-      return res.data;
-    },
-    placeholderData: (previous) =>
-      previous ?? {
-        data: [],
-        total: 0,
-        page: 1,
-        pageSize: PAGE_SIZE,
-        lastPage: 1,
-      },
-  });
-
-  const topics = topicList?.data ?? [];
-  const totalItems = topicList?.total ?? 0;
-
-  // Sync local order whenever server data refreshes
-  useEffect(() => {
-    setLocalTopics(topics);
-  }, [topics]);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
-  );
-
-  const { data: allTopics } = useQuery<ApiEvaluationTopicList>({
-    queryKey: ['lms-evaluation-topics-all-summary'],
-    queryFn: async () => {
-      const res = await request<ApiEvaluationTopicList>({
-        url: '/lms/evaluations/topics?pageSize=1000',
-        method: 'GET',
-      });
-      return res.data;
-    },
-  });
-
-  const kpiItems = useMemo<KpiCardItem[]>(() => {
-    const all = allTopics?.data ?? [];
-    const total = allTopics?.total ?? 0;
-    const active = all.filter((t) => t.isActive).length;
-    const inactive = all.filter((t) => !t.isActive).length;
-    const withRatings = all.filter((t) => t.ratingCount > 0).length;
-
-    return [
-      {
-        key: 'total',
-        title: t('kpi.total'),
-        value: total,
-        icon: ListChecks,
-        description: t('kpi.totalDesc'),
-        loading: false,
-        iconContainerClassName: 'bg-blue-500/10 text-blue-600',
-        accentClassName: 'from-blue-500/25 via-blue-500/10 to-transparent',
-      },
-      {
-        key: 'active',
-        title: t('kpi.active'),
-        value: active,
-        icon: Star,
-        description: t('kpi.activeDesc'),
-        loading: false,
-        iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
-        accentClassName:
-          'from-emerald-500/25 via-emerald-500/10 to-transparent',
-      },
-      {
-        key: 'inactive',
-        title: t('kpi.inactive'),
-        value: inactive,
-        icon: X,
-        description: t('kpi.inactiveDesc'),
-        loading: false,
-        iconContainerClassName: 'bg-red-500/10 text-red-600',
-        accentClassName: 'from-red-500/25 via-red-500/10 to-transparent',
-      },
-      {
-        key: 'withRatings',
-        title: t('kpi.withRatings'),
-        value: withRatings,
-        icon: Users,
-        description: t('kpi.withRatingsDesc'),
-        loading: false,
-        iconContainerClassName: 'bg-violet-500/10 text-violet-700',
-        accentClassName: 'from-violet-500/25 via-purple-500/10 to-transparent',
-      },
-    ];
-  }, [t, allTopics]);
-
-  function openCreate() {
-    setEditingItem(null);
-    setSheetOpen(true);
-  }
-
-  function openEdit(item: EvaluationTopicItem) {
-    setEditingItem(item);
-    setSheetOpen(true);
-  }
-
-  async function handleDelete() {
-    if (!deletingItem) return;
-    setDeleting(true);
-    try {
-      await request({
-        url: `/lms/evaluations/topics/${deletingItem.id}`,
-        method: 'DELETE',
-      });
-      toast.success(t('delete.success'));
-      setDeletingItem(null);
-      refetch();
-    } catch (err: any) {
-      const msg = err?.response?.data?.message ?? t('delete.error');
-      toast.error(msg);
-    } finally {
-      setDeleting(false);
-    }
-  }
-
-  function handleSheetSuccess() {
-    refetch();
-  }
-
-  async function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const oldIndex = localTopics.findIndex((t) => t.id === Number(active.id));
-    const newIndex = localTopics.findIndex((t) => t.id === Number(over.id));
-    if (oldIndex === -1 || newIndex === -1) return;
-    const reordered = arrayMove(localTopics, oldIndex, newIndex);
-    setLocalTopics(reordered);
-    setReordering(true);
-    try {
-      await request({
-        url: '/lms/evaluations/topics/reorder',
-        method: 'PATCH',
-        data: { ids: reordered.map((item) => item.id) },
-      });
-      toast.success(t('reorder.success'));
-      refetch();
-    } catch {
-      setLocalTopics(topics);
-      toast.error(t('reorder.error'));
-    } finally {
-      setReordering(false);
-    }
-  }
-
-  const tabItems: { value: EvaluationTargetType | 'all'; label: string }[] = [
-    { value: 'all', label: t('tabs.all') },
-    ...TARGET_TYPE_OPTIONS.map((opt) => ({
-      value: opt.value,
-      label: t(`targetType.${opt.labelKey}`),
-    })),
-  ];
-
-  return (
-    <Page>
-      <div className="space-y-6">
-        <PageHeader
-          title={t('title')}
-          description={t('description')}
-          breadcrumbs={[
-            { label: t('breadcrumbs.home'), href: '/' },
-            { label: t('breadcrumbs.lms'), href: '/lms' },
-            { label: t('breadcrumbs.evaluations') },
-          ]}
-          actions={
-            <Button onClick={openCreate}>
-              <Plus className="mr-2 size-4" />
-              {t('newTopic')}
-            </Button>
-          }
-        />
-
-        <KpiCardsGrid items={kpiItems} />
-
-        {/* Toolbar */}
-        <div className="flex flex-wrap items-center gap-2">
-          <div className="flex min-w-40 flex-1 items-center gap-2">
-            <Input
-              className="min-w-0 flex-1"
-              placeholder={t('filters.searchPlaceholder')}
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-            />
-            <Button
-              type="button"
-              variant="default"
-              size="icon"
-              className="shrink-0"
-            >
-              <Search className="size-4" />
-            </Button>
-          </div>
-
-          {searchInput && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                setSearchInput('');
-                setDebouncedSearch('');
-              }}
-              className="h-9 px-2 text-muted-foreground"
-            >
-              <X className="mr-1 size-3.5" />
-              {t('filters.clear')}
-            </Button>
-          )}
-        </div>
-
-        {/* Tabs by target type */}
-        <Tabs
-          value={activeTab}
-          onValueChange={(v) => setActiveTab(v as EvaluationTargetType | 'all')}
-        >
-          <TabsList className="flex-wrap">
-            {tabItems.map((tab) => (
-              <TabsTrigger key={tab.value} value={tab.value}>
-                {tab.value !== 'all' && (
-                  <span className="mr-1.5">
-                    {TARGET_TYPE_ICONS[tab.value as EvaluationTargetType]}
-                  </span>
-                )}
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-
-          {tabItems.map((tab) => (
-            <TabsContent key={tab.value} value={tab.value} className="mt-4">
-              {isLoading ? (
-                <div className="overflow-hidden rounded-xl border border-border/70">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-8 pr-0" />
-                        <TableHead>{t('columns.name')}</TableHead>
-                        <TableHead>{t('columns.targetType')}</TableHead>
-                        <TableHead>{t('columns.ratings')}</TableHead>
-                        <TableHead>{t('columns.status')}</TableHead>
-                        <TableHead className="w-20" />
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {Array.from({ length: 5 }).map((_, i) => (
-                        <TableRow key={i}>
-                          {Array.from({ length: 6 }).map((__, j) => (
-                            <TableCell key={j}>
-                              <Skeleton className="h-4 w-full" />
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              ) : topics.length === 0 ? (
-                <EmptyState
-                  icon={<ListChecks className="size-8" />}
-                  title={t('empty.title')}
-                  description={t('empty.description')}
-                  actionLabel={t('newTopic')}
-                  actionIcon={<Plus className="mr-2 size-4" />}
-                  onAction={openCreate}
-                />
-              ) : (
-                <DndContext
-                  sensors={sensors}
-                  collisionDetection={closestCenter}
-                  onDragEnd={handleDragEnd}
-                >
-                  <SortableContext
-                    items={localTopics.map((item) => item.id)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    <div className="overflow-hidden rounded-xl border border-border/70">
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="w-8 pr-0" />
-                            <TableHead>{t('columns.name')}</TableHead>
-                            <TableHead>{t('columns.targetType')}</TableHead>
-                            <TableHead>{t('columns.ratings')}</TableHead>
-                            <TableHead>{t('columns.status')}</TableHead>
-                            <TableHead className="w-20" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {localTopics.map((item) => (
-                            <SortableTopicRow
-                              key={item.id}
-                              item={item}
-                              onEdit={openEdit}
-                              onDelete={setDeletingItem}
-                            />
-                          ))}
-                        </TableBody>
-                      </Table>
-                    </div>
-                  </SortableContext>
-                </DndContext>
-              )}
-            </TabsContent>
-          ))}
-        </Tabs>
-
-        {/* Pagination */}
-        {!isLoading && totalItems > PAGE_SIZE && (
-          <div className="mt-6">
-            <PaginationFooter
-              currentPage={currentPage}
-              pageSize={PAGE_SIZE}
-              totalItems={totalItems}
-              onPageChange={setCurrentPage}
-              onPageSizeChange={() => {}}
-              pageSizeOptions={[PAGE_SIZE]}
-            />
-          </div>
-        )}
-      </div>
-
-      <EvaluationTopicFormSheet
-        open={sheetOpen}
-        onOpenChange={setSheetOpen}
-        editingItem={editingItem}
-        onSuccess={handleSheetSuccess}
-      />
-
-      <AlertDialog
-        open={!!deletingItem}
-        onOpenChange={(open) => {
-          if (!open) setDeletingItem(null);
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('delete.title')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('delete.description', { name: deletingItem?.name ?? '' })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleting}>
-              {t('delete.cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleDelete}
-              disabled={deleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {deleting ? t('delete.deleting') : t('delete.confirm')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Page>
-  );
-}
+'use client';
+
+// ─── THIS FILE IS THE EVALUATION TOPICS MANAGEMENT PAGE ───────────────────────
+// The ratings/report page was moved to: /lms/reports/evaluations/page.tsx
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import {
+  DndContext,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  BookOpen,
+  GraduationCap,
+  GripVertical,
+  ListChecks,
+  MessageSquare,
+  Pencil,
+  Plus,
+  Search,
+  Star,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { EvaluationTopicFormSheet } from './_components/evaluation-topic-form-sheet';
+import {
+  TARGET_TYPE_COLORS,
+  TARGET_TYPE_OPTIONS,
+  type ApiEvaluationTopicList,
+  type EvaluationTargetType,
+  type EvaluationTopicItem,
+} from './_components/evaluation-topic-types';
+
+// ── SortableTopicRow ──────────────────────────────────────────────────────────
+
+interface SortableTopicRowProps {
+  item: EvaluationTopicItem;
+  onEdit: (item: EvaluationTopicItem) => void;
+  onDelete: (item: EvaluationTopicItem) => void;
+}
+
+function SortableTopicRow({ item, onEdit, onDelete }: SortableTopicRowProps) {
+  const t = useTranslations('lms.EvaluationTopicsPage');
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : undefined,
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'group cursor-pointer',
+        isDragging && 'bg-muted/50 shadow-md'
+      )}
+      onClick={() => onEdit(item)}
+    >
+      <TableCell className="w-8 pr-0" onClick={(e) => e.stopPropagation()}>
+        <button
+          {...attributes}
+          {...listeners}
+          className="flex cursor-grab touch-none items-center justify-center rounded p-1 text-muted-foreground/40 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
+          tabIndex={-1}
+        >
+          <GripVertical className="size-4" />
+        </button>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-col gap-0.5">
+          <span className="font-medium">{item.name}</span>
+          {item.description && (
+            <span className="max-w-xs truncate text-xs text-muted-foreground">
+              {item.description}
+            </span>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>
+        <span
+          className={cn(
+            'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
+            TARGET_TYPE_COLORS[item.targetType]
+          )}
+        >
+          {t(`targetType.${item.targetType}`)}
+        </span>
+      </TableCell>
+      <TableCell className="text-sm text-muted-foreground">
+        {item.ratingCount}
+      </TableCell>
+      <TableCell>
+        <Badge
+          variant={item.isActive ? 'default' : 'secondary'}
+          className={cn(
+            'text-xs',
+            item.isActive
+              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
+              : ''
+          )}
+        >
+          {item.isActive ? t('status.active') : t('status.inactive')}
+        </Badge>
+      </TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={() => onEdit(item)}
+          >
+            <Pencil className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8 text-destructive hover:text-destructive"
+            onClick={() => onDelete(item)}
+            disabled={item.ratingCount > 0}
+            title={
+              item.ratingCount > 0 ? t('delete.disabledTooltip') : undefined
+            }
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 20;
+
+const TARGET_TYPE_ICONS: Record<EvaluationTargetType, React.ReactNode> = {
+  course: <BookOpen className="size-4" />,
+  course_lesson: <BookOpen className="size-4" />,
+  course_class_session: <Users className="size-4" />,
+  question: <MessageSquare className="size-4" />,
+  exam: <GraduationCap className="size-4" />,
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function EvaluationTopicsPage() {
+  const t = useTranslations('lms.EvaluationTopicsPage');
+  const { request } = useApp();
+
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [activeTab, setActiveTab] = useState<EvaluationTargetType | 'all'>(
+    'all'
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<EvaluationTopicItem | null>(
+    null
+  );
+  const [deletingItem, setDeletingItem] = useState<EvaluationTopicItem | null>(
+    null
+  );
+  const [deleting, setDeleting] = useState(false);
+  const [localTopics, setLocalTopics] = useState<EvaluationTopicItem[]>([]);
+  const [reordering, setReordering] = useState(false);
+
+  // Debounce search
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(
+      () => setDebouncedSearch(searchInput),
+      400
+    );
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [searchInput]);
+
+  // Reset page on filter/tab change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch, activeTab]);
+
+  const {
+    data: topicList,
+    isLoading,
+    refetch,
+  } = useQuery<ApiEvaluationTopicList>({
+    queryKey: [
+      'lms-evaluation-topics',
+      currentPage,
+      PAGE_SIZE,
+      debouncedSearch,
+      activeTab,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(currentPage));
+      params.set('pageSize', String(PAGE_SIZE));
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (activeTab !== 'all') params.set('targetType', activeTab);
+      const res = await request<ApiEvaluationTopicList>({
+        url: `/lms/evaluations/topics?${params.toString()}`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: PAGE_SIZE,
+        lastPage: 1,
+      },
+  });
+
+  const topics = topicList?.data ?? [];
+  const totalItems = topicList?.total ?? 0;
+
+  // Sync local order whenever server data refreshes
+  useEffect(() => {
+    setLocalTopics(topics);
+  }, [topics]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
+  );
+
+  const { data: allTopics } = useQuery<ApiEvaluationTopicList>({
+    queryKey: ['lms-evaluation-topics-all-summary'],
+    queryFn: async () => {
+      const res = await request<ApiEvaluationTopicList>({
+        url: '/lms/evaluations/topics?pageSize=1000',
+        method: 'GET',
+      });
+      return res.data;
+    },
+  });
+
+  const kpiItems = useMemo<KpiCardItem[]>(() => {
+    const all = allTopics?.data ?? [];
+    const total = allTopics?.total ?? 0;
+    const active = all.filter((t) => t.isActive).length;
+    const inactive = all.filter((t) => !t.isActive).length;
+    const withRatings = all.filter((t) => t.ratingCount > 0).length;
+
+    return [
+      {
+        key: 'total',
+        title: t('kpi.total'),
+        value: total,
+        icon: ListChecks,
+        description: t('kpi.totalDesc'),
+        loading: false,
+        iconContainerClassName: 'bg-blue-500/10 text-blue-600',
+        accentClassName: 'from-blue-500/25 via-blue-500/10 to-transparent',
+      },
+      {
+        key: 'active',
+        title: t('kpi.active'),
+        value: active,
+        icon: Star,
+        description: t('kpi.activeDesc'),
+        loading: false,
+        iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+        accentClassName:
+          'from-emerald-500/25 via-emerald-500/10 to-transparent',
+      },
+      {
+        key: 'inactive',
+        title: t('kpi.inactive'),
+        value: inactive,
+        icon: X,
+        description: t('kpi.inactiveDesc'),
+        loading: false,
+        iconContainerClassName: 'bg-red-500/10 text-red-600',
+        accentClassName: 'from-red-500/25 via-red-500/10 to-transparent',
+      },
+      {
+        key: 'withRatings',
+        title: t('kpi.withRatings'),
+        value: withRatings,
+        icon: Users,
+        description: t('kpi.withRatingsDesc'),
+        loading: false,
+        iconContainerClassName: 'bg-violet-500/10 text-violet-700',
+        accentClassName: 'from-violet-500/25 via-purple-500/10 to-transparent',
+      },
+    ];
+  }, [t, allTopics]);
+
+  function openCreate() {
+    setEditingItem(null);
+    setSheetOpen(true);
+  }
+
+  function openEdit(item: EvaluationTopicItem) {
+    setEditingItem(item);
+    setSheetOpen(true);
+  }
+
+  async function handleDelete() {
+    if (!deletingItem) return;
+    setDeleting(true);
+    try {
+      await request({
+        url: `/lms/evaluations/topics/${deletingItem.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('delete.success'));
+      setDeletingItem(null);
+      refetch();
+    } catch (err: any) {
+      const msg = err?.response?.data?.message ?? t('delete.error');
+      toast.error(msg);
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  function handleSheetSuccess() {
+    refetch();
+  }
+
+  async function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = localTopics.findIndex((t) => t.id === Number(active.id));
+    const newIndex = localTopics.findIndex((t) => t.id === Number(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    const reordered = arrayMove(localTopics, oldIndex, newIndex);
+    setLocalTopics(reordered);
+    setReordering(true);
+    try {
+      await request({
+        url: '/lms/evaluations/topics/reorder',
+        method: 'PATCH',
+        data: { ids: reordered.map((item) => item.id) },
+      });
+      toast.success(t('reorder.success'));
+      refetch();
+    } catch {
+      setLocalTopics(topics);
+      toast.error(t('reorder.error'));
+    } finally {
+      setReordering(false);
+    }
+  }
+
+  const tabItems: { value: EvaluationTargetType | 'all'; label: string }[] = [
+    { value: 'all', label: t('tabs.all') },
+    ...TARGET_TYPE_OPTIONS.map((opt) => ({
+      value: opt.value,
+      label: t(`targetType.${opt.labelKey}`),
+    })),
+  ];
+
+  return (
+    <Page>
+      <div className="space-y-6">
+        <PageHeader
+          title={t('title')}
+          description={t('description')}
+          breadcrumbs={[
+            { label: t('breadcrumbs.home'), href: '/' },
+            { label: t('breadcrumbs.lms'), href: '/lms' },
+            { label: t('breadcrumbs.evaluations') },
+          ]}
+          actions={
+            <Button onClick={openCreate}>
+              <Plus className="mr-2 size-4" />
+              {t('newTopic')}
+            </Button>
+          }
+        />
+
+        <KpiCardsGrid items={kpiItems} />
+
+        {/* Toolbar */}
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex min-w-40 flex-1 items-center gap-2">
+            <Input
+              className="min-w-0 flex-1"
+              placeholder={t('filters.searchPlaceholder')}
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+            />
+            <Button
+              type="button"
+              variant="default"
+              size="icon"
+              className="shrink-0"
+            >
+              <Search className="size-4" />
+            </Button>
+          </div>
+
+          {searchInput && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setSearchInput('');
+                setDebouncedSearch('');
+              }}
+              className="h-9 px-2 text-muted-foreground"
+            >
+              <X className="mr-1 size-3.5" />
+              {t('filters.clear')}
+            </Button>
+          )}
+        </div>
+
+        {/* Tabs by target type */}
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as EvaluationTargetType | 'all')}
+        >
+          <TabsList className="flex-wrap">
+            {tabItems.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.value !== 'all' && (
+                  <span className="mr-1.5">
+                    {TARGET_TYPE_ICONS[tab.value as EvaluationTargetType]}
+                  </span>
+                )}
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {tabItems.map((tab) => (
+            <TabsContent key={tab.value} value={tab.value} className="mt-4">
+              {isLoading ? (
+                <div className="overflow-hidden rounded-xl border border-border/70">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-8 pr-0" />
+                        <TableHead>{t('columns.name')}</TableHead>
+                        <TableHead>{t('columns.targetType')}</TableHead>
+                        <TableHead>{t('columns.ratings')}</TableHead>
+                        <TableHead>{t('columns.status')}</TableHead>
+                        <TableHead className="w-20" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <TableRow key={i}>
+                          {Array.from({ length: 6 }).map((__, j) => (
+                            <TableCell key={j}>
+                              <Skeleton className="h-4 w-full" />
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              ) : topics.length === 0 ? (
+                <EmptyState
+                  icon={<ListChecks className="size-8" />}
+                  title={t('empty.title')}
+                  description={t('empty.description')}
+                  actionLabel={t('newTopic')}
+                  actionIcon={<Plus className="mr-2 size-4" />}
+                  onAction={openCreate}
+                />
+              ) : (
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleDragEnd}
+                >
+                  <SortableContext
+                    items={localTopics.map((item) => item.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <div className="overflow-hidden rounded-xl border border-border/70">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="w-8 pr-0" />
+                            <TableHead>{t('columns.name')}</TableHead>
+                            <TableHead>{t('columns.targetType')}</TableHead>
+                            <TableHead>{t('columns.ratings')}</TableHead>
+                            <TableHead>{t('columns.status')}</TableHead>
+                            <TableHead className="w-20" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {localTopics.map((item) => (
+                            <SortableTopicRow
+                              key={item.id}
+                              item={item}
+                              onEdit={openEdit}
+                              onDelete={setDeletingItem}
+                            />
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              )}
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        {/* Pagination */}
+        {!isLoading && totalItems > PAGE_SIZE && (
+          <div className="mt-6">
+            <PaginationFooter
+              currentPage={currentPage}
+              pageSize={PAGE_SIZE}
+              totalItems={totalItems}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={() => {}}
+              pageSizeOptions={[PAGE_SIZE]}
+            />
+          </div>
+        )}
+      </div>
+
+      <EvaluationTopicFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        editingItem={editingItem}
+        onSuccess={handleSheetSuccess}
+      />
+
+      <AlertDialog
+        open={!!deletingItem}
+        onOpenChange={(open) => {
+          if (!open) setDeletingItem(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('delete.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('delete.description', { name: deletingItem?.name ?? '' })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>
+              {t('delete.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={deleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleting ? t('delete.deleting') : t('delete.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}