@hed-hog/lms 0.0.318 → 0.0.320

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

@@ -1,1250 +1,621 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PageHeader,
-  PaginationFooter,
-  ViewModeToggle,
-} from '@/components/entity-list';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { EntityPicker } from '@/components/ui/entity-picker';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
-import { cn } from '@/lib/utils';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { format, parseISO } from 'date-fns';
-import { motion } from 'framer-motion';
-import {
-  Award,
-  BookOpen,
-  CalendarIcon,
-  ExternalLink,
-  GraduationCap,
-  MessageSquare,
-  MoreHorizontal,
-  Search,
-  Star,
-  Users,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import type { DateRange } from 'react-day-picker';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-type EvaluationTarget =
-  | 'course'
-  | 'course_lesson'
-  | 'course_class_session'
-  | 'question'
-  | 'exam';
-
-interface EvaluationItem {
-  id: number;
-  topicName: string;
-  topicDescription: string | null;
-  targetType: EvaluationTarget;
-  targetName: string;
-  score: number;
-  comment: string | null;
-  evaluatorName: string | null;
-  evaluatorId: number | null;
-  courseName: string | null;
-  courseId: number | null;
-  className: string | null;
-  classId: number | null;
-  instructorName: string | null;
-  instructorId: number | null;
-  createdAt: string;
-  topicAvgScore: number;
-  topicRatingCount: number;
-}
-
-type ApiEvaluationList = {
-  data: EvaluationItem[];
-  total: number;
-  page: number;
-  pageSize: number;
-  lastPage: number;
-};
-
-type ApiEvaluationStats = {
-  totalEvaluations: number;
-  averageScore: number;
-  topicsEvaluated: number;
-  totalEvaluators: number;
-};
-
-type FilterOption = { id: number; label: string };
-
-type ApiEvaluationFilterOptions = {
-  courses: FilterOption[];
-  classes: FilterOption[];
-  instructors: FilterOption[];
-  evaluators: FilterOption[];
-};
-
-type ViewMode = 'cards' | 'list';
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const PAGE_SIZES = [12, 24, 48];
-
-// ── Animations ────────────────────────────────────────────────────────────────
-
-const fadeUp = {
-  hidden: { opacity: 0, y: 16 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.3 } } as const,
-};
-
-const stagger = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.05 } },
-};
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function StarRating({ score, size = 16 }: { score: number; size?: number }) {
-  return (
-    <div className="flex items-center gap-0.5">
-      {Array.from({ length: 5 }, (_, i) => {
-        const filled = score >= i + 1;
-        const half = !filled && score >= i + 0.5;
-        return (
-          <div
-            key={i}
-            className="relative shrink-0"
-            style={{ width: size, height: size }}
-          >
-            <Star
-              className="absolute text-muted-foreground/25"
-              style={{ width: size, height: size }}
-            />
-            {(filled || half) && (
-              <div
-                className="absolute overflow-hidden"
-                style={{ width: filled ? '100%' : '50%' }}
-              >
-                <Star
-                  className="text-yellow-400"
-                  fill="currentColor"
-                  style={{ width: size, height: size }}
-                />
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-const TARGET_TYPE_COLORS: Record<EvaluationTarget, string> = {
-  course:
-    'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-  course_lesson:
-    'bg-green-100 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800',
-  course_class_session:
-    'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800',
-  question:
-    'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800',
-  exam: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800',
-};
-
-function TargetTypeBadge({
-  targetType,
-  label,
-}: {
-  targetType: EvaluationTarget;
-  label: string;
-}) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
-        TARGET_TYPE_COLORS[targetType]
-      )}
-    >
-      {label}
-    </span>
-  );
-}
-
-// ── Card helpers ──────────────────────────────────────────────────────────────
-
-const COURSE_AVATAR_COLORS = [
-  'bg-blue-500',
-  'bg-emerald-500',
-  'bg-violet-500',
-  'bg-orange-500',
-  'bg-rose-500',
-];
-
-function getCourseColor(courseId: number | null): string {
-  if (courseId === null) return 'bg-blue-500';
-  return (
-    COURSE_AVATAR_COLORS[(courseId - 1) % COURSE_AVATAR_COLORS.length] ??
-    'bg-blue-500'
-  );
-}
-
-function getInitials(name: string | null): string {
-  if (!name) return '?';
-  return name
-    .split(' ')
-    .slice(0, 2)
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase();
-}
-
-function getScoreColor(score: number): string {
-  if (score >= 4) return 'stroke-emerald-500';
-  if (score >= 3) return 'stroke-yellow-400';
-  if (score >= 2) return 'stroke-orange-500';
-  return 'stroke-red-500';
-}
-
-function getScoreBgColor(score: number): string {
-  if (score >= 4) return 'bg-emerald-500';
-  if (score >= 3) return 'bg-yellow-400';
-  if (score >= 2) return 'bg-orange-500';
-  return 'bg-red-500';
-}
-
-function ScoreArcChart({ score }: { score: number }) {
-  const size = 110;
-  const cx = size / 2;
-  const cy = size / 2;
-  const radius = 42;
-  const strokeWidth = 10;
-  const circumference = 2 * Math.PI * radius;
-  const filled = (score / 5) * circumference;
-  const empty = circumference - filled;
-  return (
-    <div
-      className="relative flex shrink-0 items-center justify-center"
-      style={{ width: size, height: size }}
-    >
-      <svg
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        className="absolute inset-0"
-      >
-        <circle
-          cx={cx}
-          cy={cy}
-          r={radius}
-          fill="none"
-          strokeWidth={strokeWidth}
-          className="stroke-muted"
-        />
-        <circle
-          cx={cx}
-          cy={cy}
-          r={radius}
-          fill="none"
-          strokeWidth={strokeWidth}
-          strokeDasharray={`${filled} ${empty}`}
-          strokeLinecap="round"
-          transform={`rotate(-90 ${cx} ${cy})`}
-          className={getScoreColor(score)}
-        />
-      </svg>
-      <div className="relative flex flex-col items-center">
-        <span className="text-2xl font-bold tabular-nums leading-none">
-          {score.toFixed(1)}
-        </span>
-        <span className="text-xs text-muted-foreground/70">/ 5</span>
-      </div>
-    </div>
-  );
-}
-
-function getTargetUrl(targetType: EvaluationTarget): string {
-  const urls: Record<EvaluationTarget, string> = {
-    course: '/lms/courses',
-    course_lesson: '/lms/courses',
-    course_class_session: '/lms/classes',
-    question: '/lms/exams',
-    exam: '/lms/exams',
-  };
-  return urls[targetType];
-}
-
-function getTargetIcon(targetType: EvaluationTarget): ReactNode {
-  const icons: Record<EvaluationTarget, ReactNode> = {
-    course: <BookOpen className="size-4 text-muted-foreground" />,
-    course_lesson: <BookOpen className="size-4 text-muted-foreground" />,
-    course_class_session: <Users className="size-4 text-muted-foreground" />,
-    question: <MessageSquare className="size-4 text-muted-foreground" />,
-    exam: <GraduationCap className="size-4 text-muted-foreground" />,
-  };
-  return icons[targetType];
-}
-
-// ── Page ──────────────────────────────────────────────────────────────────────
-
-export default function EvaluationsPage() {
-  const t = useTranslations('lms.EvaluationsPage');
-  const router = useRouter();
-  const { request } = useApp();
-
-  // View mode
-  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
-    storageKey: 'lms:evaluations:view-mode',
-    defaultValue: 'cards',
-    allowedValues: ['cards', 'list'],
-  });
-
-  // Filters
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [filtroCurso, setFiltroCurso] = useState<number | null>(null);
-  const [filtroTurma, setFiltroTurma] = useState<number | null>(null);
-  const [filtroInstrutor, setFiltroInstrutor] = useState<number | null>(null);
-  const [filtroAluno, setFiltroAluno] = useState<number | null>(null);
-  const [dateRange, setDateRange] = useState<DateRange | undefined>();
-  const [datePopoverOpen, setDatePopoverOpen] = 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]);
-
-  // Sheet
-  const [selectedItem, setSelectedItem] = useState<EvaluationItem | null>(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
-
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-
-  // Reset page when filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [
-    debouncedSearch,
-    filtroCurso,
-    filtroTurma,
-    filtroInstrutor,
-    filtroAluno,
-    dateRange,
-  ]);
-
-  // API queries
-  const { data: evaluationList, isLoading: listLoading } = useQuery<ApiEvaluationList>({
-    queryKey: ['lms-evaluations', currentPage, pageSize, debouncedSearch, filtroCurso, filtroTurma, filtroInstrutor, filtroAluno, dateRange],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', String(currentPage));
-      params.set('pageSize', String(pageSize));
-      if (debouncedSearch) params.set('search', debouncedSearch);
-      if (filtroCurso !== null) params.set('courseId', String(filtroCurso));
-      if (filtroTurma !== null) params.set('classId', String(filtroTurma));
-      if (filtroInstrutor !== null) params.set('instructorId', String(filtroInstrutor));
-      if (filtroAluno !== null) params.set('evaluatorId', String(filtroAluno));
-      if (dateRange?.from) params.set('dateFrom', dateRange.from.toISOString());
-      if (dateRange?.to) params.set('dateTo', dateRange.to.toISOString());
-      const response = await request<ApiEvaluationList>({ url: `/lms/evaluations?${params.toString()}`, method: 'GET' });
-      return response.data;
-    },
-    placeholderData: (previous) => previous ?? { data: [], total: 0, page: 1, pageSize: 12, lastPage: 1 },
-  });
-
-  const { data: statsData, isLoading: statsLoading } = useQuery<ApiEvaluationStats>({
-    queryKey: ['lms-evaluations-stats'],
-    queryFn: async () => {
-      const response = await request<ApiEvaluationStats>({ url: '/lms/evaluations/stats', method: 'GET' });
-      return response.data;
-    },
-  });
-
-  const { data: filterOptionsData } = useQuery<ApiEvaluationFilterOptions>({
-    queryKey: ['lms-evaluations-filter-options'],
-    queryFn: async () => {
-      const response = await request<ApiEvaluationFilterOptions>({ url: '/lms/evaluations/filter-options', method: 'GET' });
-      return response.data;
-    },
-  });
-
-  const isLoading = listLoading || statsLoading;
-  const paginatedItems: EvaluationItem[] = evaluationList?.data ?? [];
-  const totalItems = evaluationList?.total ?? 0;
-
-  const hasActiveFilters =
-    debouncedSearch !== '' ||
-    filtroCurso !== null ||
-    filtroTurma !== null ||
-    filtroInstrutor !== null ||
-    filtroAluno !== null ||
-    dateRange !== undefined;
-
-  function clearFilters() {
-    setSearchInput('');
-    setDebouncedSearch('');
-    setFiltroCurso(null);
-    setFiltroTurma(null);
-    setFiltroInstrutor(null);
-    setFiltroAluno(null);
-    setDateRange(undefined);
-    setCurrentPage(1);
-  }
-
-  // KPI cards
-  const kpiItems = useMemo<KpiCardItem[]>(
-    () => [
-      {
-        key: 'total',
-        title: t('kpi.totalEvaluations'),
-        value: statsData?.totalEvaluations ?? '—',
-        icon: Star,
-        description: t('kpi.totalEvaluationsDesc'),
-        loading: isLoading,
-        iconContainerClassName: 'bg-yellow-500/10 text-yellow-600',
-        accentClassName: 'from-yellow-500/25 via-amber-500/10 to-transparent',
-      },
-      {
-        key: 'average',
-        title: t('kpi.averageScore'),
-        value: statsData ? `${statsData.averageScore.toFixed(1)} / 5.0` : '—',
-        icon: Award,
-        description: t('kpi.averageScoreDesc'),
-        loading: isLoading,
-        iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
-        accentClassName:
-          'from-emerald-500/25 via-emerald-500/10 to-transparent',
-      },
-      {
-        key: 'topics',
-        title: t('kpi.topicsEvaluated'),
-        value: statsData?.topicsEvaluated ?? '—',
-        icon: BookOpen,
-        description: t('kpi.topicsEvaluatedDesc'),
-        loading: isLoading,
-        iconContainerClassName: 'bg-sky-500/10 text-sky-700',
-        accentClassName: 'from-sky-500/25 via-blue-500/10 to-transparent',
-      },
-      {
-        key: 'evaluators',
-        title: t('kpi.totalEvaluators'),
-        value: statsData?.totalEvaluators ?? '—',
-        icon: Users,
-        description: t('kpi.totalEvaluatorsDesc'),
-        loading: isLoading,
-        iconContainerClassName: 'bg-violet-500/10 text-violet-700',
-        accentClassName: 'from-violet-500/25 via-purple-500/10 to-transparent',
-      },
-    ],
-    [t, isLoading, statsData]
-  );
-
-  function openDetail(item: EvaluationItem) {
-    setSelectedItem(item);
-    setSheetOpen(true);
-  }
-
-  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') },
-          ]}
-        />
-
-        <KpiCardsGrid items={kpiItems} />
-
-        {/* Toolbar */}
-        <div className="space-y-3">
-          <form
-            onSubmit={(e) => e.preventDefault()}
-            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="submit"
-                variant="default"
-                size="icon"
-                className="shrink-0"
-              >
-                <Search className="size-4" />
-              </Button>
-            </div>
-
-            <EntityPicker
-              className="w-50 shrink-0"
-              placeholder={t('filters.allCourses')}
-              value={filtroCurso}
-              onChange={(val) =>
-                setFiltroCurso(val === null ? null : Number(val))
-              }
-              options={filterOptionsData?.courses ?? []}
-              allowEmptySelection
-              emptySelectionLabel={t('filters.allCourses')}
-              showCreateButton={false}
-              clearable
-            />
-
-            <EntityPicker
-              className="w-50 shrink-0"
-              placeholder={t('filters.allClasses')}
-              value={filtroTurma}
-              onChange={(val) =>
-                setFiltroTurma(val === null ? null : Number(val))
-              }
-              options={filterOptionsData?.classes ?? []}
-              allowEmptySelection
-              emptySelectionLabel={t('filters.allClasses')}
-              showCreateButton={false}
-              clearable
-            />
-
-            <EntityPicker
-              className="w-50 shrink-0"
-              placeholder={t('filters.allInstructors')}
-              value={filtroInstrutor}
-              onChange={(val) =>
-                setFiltroInstrutor(val === null ? null : Number(val))
-              }
-              options={filterOptionsData?.instructors ?? []}
-              allowEmptySelection
-              emptySelectionLabel={t('filters.allInstructors')}
-              showCreateButton={false}
-              clearable
-            />
-
-            <EntityPicker
-              className="w-50 shrink-0"
-              placeholder={t('filters.allStudents')}
-              value={filtroAluno}
-              onChange={(val) =>
-                setFiltroAluno(val === null ? null : Number(val))
-              }
-              options={filterOptionsData?.evaluators ?? []}
-              allowEmptySelection
-              emptySelectionLabel={t('filters.allStudents')}
-              showCreateButton={false}
-              clearable
-            />
-
-            <Popover open={datePopoverOpen} onOpenChange={setDatePopoverOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className={cn(
-                    'h-9 shrink-0 gap-1.5 text-sm font-normal',
-                    dateRange && 'border-primary/50 bg-primary/5 text-primary'
-                  )}
-                >
-                  <CalendarIcon className="size-4 shrink-0" />
-                  <span>
-                    {dateRange?.from
-                      ? dateRange.to
-                        ? `${format(dateRange.from, 'MMM d')} – ${format(dateRange.to, 'MMM d')}`
-                        : format(dateRange.from, 'MMM d')
-                      : t('filters.dateRange')}
-                  </span>
-                  {dateRange && (
-                    <span
-                      role="button"
-                      aria-label="Clear date range"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setDateRange(undefined);
-                        setDatePopoverOpen(false);
-                      }}
-                      className="ml-0.5 rounded-sm opacity-60 hover:opacity-100"
-                    >
-                      <X className="size-3" />
-                    </span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="end">
-                <Calendar
-                  mode="range"
-                  selected={dateRange}
-                  onSelect={setDateRange}
-                  numberOfMonths={2}
-                  initialFocus
-                />
-                {dateRange?.from && (
-                  <div className="flex items-center justify-between border-t border-border/50 px-3 py-2">
-                    <span className="text-xs text-muted-foreground">
-                      {dateRange.to
-                        ? `${format(dateRange.from, 'MMM d')} – ${format(dateRange.to, 'MMM d, yyyy')}`
-                        : format(dateRange.from, 'MMM d, yyyy')}
-                    </span>
-                    <Button
-                      type="button"
-                      size="sm"
-                      className="h-7 px-3 text-xs"
-                      onClick={() => setDatePopoverOpen(false)}
-                    >
-                      {t('filters.apply')}
-                    </Button>
-                  </div>
-                )}
-              </PopoverContent>
-            </Popover>
-
-            <ViewModeToggle
-              viewMode={viewMode}
-              onViewModeChange={setViewMode}
-              listLabel={t('viewMode.list')}
-              cardsLabel={t('viewMode.cards')}
-            />
-          </form>
-
-          <div className="flex items-center justify-between gap-3">
-            <p className="text-sm text-muted-foreground">
-              {totalItems}{' '}
-              {totalItems !== 1
-                ? t('pagination.itemsPlural')
-                : t('pagination.items')}
-            </p>
-            {hasActiveFilters && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={clearFilters}
-                className="h-8 px-2 text-muted-foreground"
-              >
-                <X className="mr-1 size-3.5" />
-                {t('filters.clear')}
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* Content */}
-        {isLoading ? (
-          viewMode === 'cards' ? (
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <Card key={i} className="overflow-hidden">
-                  <CardContent className="p-4">
-                    <div className="mb-2 flex items-center justify-between">
-                      <Skeleton className="h-5 w-16 rounded-full" />
-                      <Skeleton className="h-4 w-20" />
-                    </div>
-                    <div className="mb-3 flex items-start gap-3">
-                      <Skeleton className="size-10 shrink-0 rounded-lg" />
-                      <div className="min-w-0 flex-1 space-y-1.5">
-                        <Skeleton className="h-4 w-3/4" />
-                        <Skeleton className="h-3.5 w-1/2" />
-                      </div>
-                    </div>
-                    <div className="mb-3 flex gap-1">
-                      {Array.from({ length: 5 }).map((__, j) => (
-                        <Skeleton key={j} className="size-3.5 rounded-sm" />
-                      ))}
-                    </div>
-                    <div className="flex items-center gap-2 border-t border-border/50 pt-3">
-                      <Skeleton className="size-6 rounded-full" />
-                      <Skeleton className="h-3 w-24" />
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          ) : (
-            <div className="overflow-hidden rounded-xl border border-border/70">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('columns.topic')}</TableHead>
-                    <TableHead>{t('columns.target')}</TableHead>
-                    <TableHead>{t('columns.score')}</TableHead>
-                    <TableHead>{t('columns.course')}</TableHead>
-                    <TableHead>{t('columns.class')}</TableHead>
-                    <TableHead>{t('columns.student')}</TableHead>
-                    <TableHead>{t('columns.instructor')}</TableHead>
-                    <TableHead>{t('columns.date')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {Array.from({ length: 6 }).map((_, i) => (
-                    <TableRow key={i}>
-                      {Array.from({ length: 8 }).map((__, j) => (
-                        <TableCell key={j}>
-                          <Skeleton className="h-4 w-full" />
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )
-        ) : paginatedItems.length === 0 ? (
-          <EmptyState
-            icon={<Star className="size-8" />}
-            title={t('empty.title')}
-            description={t('empty.description')}
-          />
-        ) : viewMode === 'cards' ? (
-          <motion.div
-            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-            variants={stagger}
-            initial="hidden"
-            animate="show"
-          >
-            {paginatedItems.map((item) => (
-              <motion.div key={item.id} variants={fadeUp}>
-                <Card
-                  className="cursor-pointer overflow-hidden transition-shadow hover:shadow-md"
-                  onClick={() => openDetail(item)}
-                >
-                  <CardContent className="p-4">
-                    {/* Header: badge + date + menu */}
-                    <div className="mb-2 flex items-center justify-between gap-2">
-                      <TargetTypeBadge
-                        targetType={item.targetType}
-                        label={t(`targetType.${item.targetType}`)}
-                      />
-                      <div className="flex items-center gap-1">
-                        <span className="text-xs text-muted-foreground">
-                          {format(parseISO(item.createdAt), 'MMM d, yyyy')}
-                        </span>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="size-6 shrink-0"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <MoreHorizontal className="size-3.5" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => router.push('/lms/courses')}
-                            >
-                              <BookOpen className="mr-2 size-3.5" />
-                              {t('dropdown.viewCourse')}
-                            </DropdownMenuItem>
-                            {item.className && (
-                              <DropdownMenuItem
-                                onClick={() => router.push('/lms/classes')}
-                              >
-                                <Users className="mr-2 size-3.5" />
-                                {t('dropdown.viewClass')}
-                              </DropdownMenuItem>
-                            )}
-                            <DropdownMenuItem
-                              onClick={() => router.push('/lms/training')}
-                            >
-                              <GraduationCap className="mr-2 size-3.5" />
-                              {t('dropdown.viewStudent')}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => openDetail(item)}>
-                              <Star className="mr-2 size-3.5" />
-                              {t('dropdown.viewDetails')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </div>
-
-                    {/* Course logo + topic */}
-                    <div className="mb-3 flex items-start gap-3">
-                      <div
-                        className={cn(
-                          'flex size-10 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white',
-                          getCourseColor(item.courseId)
-                        )}
-                      >
-                        {item.courseName?.[0] ?? '?'}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="font-semibold leading-snug line-clamp-1">
-                          {item.topicName}
-                        </p>
-                        <p className="text-sm text-muted-foreground line-clamp-1">
-                          {item.targetName}
-                        </p>
-                      </div>
-                    </div>
-
-                    {/* Score */}
-                    <div className="mb-3 flex items-center gap-2">
-                      <StarRating score={item.score} size={14} />
-                      <span className="text-sm font-medium tabular-nums">
-                        {item.score.toFixed(1)}
-                      </span>
-                    </div>
-
-                    {/* Footer: student avatar + class/instructor */}
-                    <div className="flex items-center justify-between gap-2 border-t border-border/50 pt-3">
-                      <div className="flex min-w-0 items-center gap-2">
-                        <Avatar className="size-6 shrink-0">
-                          <AvatarFallback className="text-xs">
-                            {getInitials(item.evaluatorName)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="truncate text-xs font-medium">
-                          {item.evaluatorName}
-                        </span>
-                      </div>
-                      {(item.className || item.instructorName) && (
-                        <div className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
-                          {item.className && (
-                            <span className="max-w-24 truncate">
-                              {item.className}
-                            </span>
-                          )}
-                          {item.className && item.instructorName && (
-                            <span>·</span>
-                          )}
-                          {item.instructorName && (
-                            <span className="max-w-24 truncate">
-                              {item.instructorName}
-                            </span>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        ) : (
-          <div className="overflow-hidden rounded-xl border border-border/70">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('columns.topic')}</TableHead>
-                  <TableHead>{t('columns.target')}</TableHead>
-                  <TableHead>{t('columns.score')}</TableHead>
-                  <TableHead>{t('columns.course')}</TableHead>
-                  <TableHead>{t('columns.class')}</TableHead>
-                  <TableHead>{t('columns.student')}</TableHead>
-                  <TableHead>{t('columns.instructor')}</TableHead>
-                  <TableHead>{t('columns.date')}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedItems.map((item) => (
-                  <TableRow
-                    key={item.id}
-                    className="cursor-pointer"
-                    onClick={() => openDetail(item)}
-                  >
-                    <TableCell className="font-medium">
-                      {item.topicName}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-col gap-1">
-                        <TargetTypeBadge
-                          targetType={item.targetType}
-                          label={t(`targetType.${item.targetType}`)}
-                        />
-                        <span className="text-xs text-muted-foreground">
-                          {item.targetName}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-1.5">
-                        <StarRating score={item.score} size={13} />
-                        <span className="text-sm tabular-nums">
-                          {item.score.toFixed(1)}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-sm">{item.courseName}</TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
-                      {item.className ?? '—'}
-                    </TableCell>
-                    <TableCell className="text-sm">
-                      {item.evaluatorName}
-                    </TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
-                      {item.instructorName ?? '—'}
-                    </TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
-                      {format(parseISO(item.createdAt), 'MMM d, yyyy')}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-
-        {/* Pagination */}
-        {!isLoading && totalItems > 0 && (
-          <div className="mt-6">
-            <PaginationFooter
-              currentPage={currentPage}
-              pageSize={pageSize}
-              totalItems={totalItems}
-              onPageChange={setCurrentPage}
-              onPageSizeChange={(nextSize) => {
-                setPageSize(nextSize);
-                setCurrentPage(1);
-              }}
-              pageSizeOptions={PAGE_SIZES}
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Detail Sheet */}
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent
-          side="right"
-          className="w-full overflow-y-auto p-0 sm:max-w-xl"
-        >
-          {selectedItem && (
-            <>
-              {/* Hero band */}
-              <div className="border-b border-border/50 px-6 pb-5 pt-6">
-                <SheetHeader className="space-y-0">
-                  <div className="flex items-start gap-4">
-                    <div
-                      className={cn(
-                        'flex size-14 shrink-0 items-center justify-center rounded-xl text-2xl font-bold text-white shadow-sm',
-                        getCourseColor(selectedItem.courseId)
-                      )}
-                    >
-                      {selectedItem.courseName?.[0] ?? '?'}
-                      <div className="mb-2">
-                        <TargetTypeBadge
-                          targetType={selectedItem.targetType}
-                          label={t(`targetType.${selectedItem.targetType}`)}
-                        />
-                      </div>
-                      <SheetTitle className="text-xl leading-snug">
-                        {selectedItem.topicName}
-                      </SheetTitle>
-                      {selectedItem.topicDescription && (
-                        <p className="mt-1.5 text-sm text-muted-foreground">
-                          {selectedItem.topicDescription}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </SheetHeader>
-              </div>
-
-              {/* Body */}
-              <div className="space-y-6 px-6 py-6">
-                {/* Score + comparison */}
-                {(() => {
-                  const avg = selectedItem.topicAvgScore;
-                  const count = selectedItem.topicRatingCount;
-                  const delta =
-                    Math.round((selectedItem.score - avg) * 10) / 10;
-                  return (
-                    <div className="rounded-xl border border-border/50 bg-muted/20 p-5">
-                      {/* Arc + stars row */}
-                      <div className="flex items-center gap-6">
-                        <ScoreArcChart score={selectedItem.score} />
-                        <div className="flex-1 space-y-2">
-                          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                            {t('sheet.scoreLabel')}
-                          </p>
-                          <StarRating score={selectedItem.score} size={22} />
-                          <p className="text-sm text-muted-foreground">
-                            <span className="text-lg font-bold text-foreground tabular-nums">
-                              {selectedItem.score.toFixed(1)}
-                            </span>{' '}
-                            / 5.0
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Comparison bars */}
-                      <div className="mt-4 space-y-3 border-t border-border/40 pt-4">
-                        <div className="flex items-center justify-between">
-                          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                            {t('sheet.comparison')}
-                          </p>
-                          {delta !== 0 && (
-                            <span
-                              className={cn(
-                                'text-xs font-semibold tabular-nums',
-                                delta > 0
-                                  ? 'text-emerald-600 dark:text-emerald-400'
-                                  : 'text-red-500 dark:text-red-400'
-                              )}
-                            >
-                              {delta > 0 ? '▲' : '▼'}{' '}
-                              {Math.abs(delta).toFixed(1)}
-                            </span>
-                          )}
-                        </div>
-
-                        <div className="space-y-1">
-                          <div className="flex items-center justify-between text-xs">
-                            <span className="text-muted-foreground">
-                              {t('sheet.thisEvaluation')}
-                            </span>
-                            <span className="font-semibold tabular-nums">
-                              {selectedItem.score.toFixed(1)}
-                            </span>
-                          </div>
-                          <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
-                            <div
-                              className={cn(
-                                'h-full rounded-full transition-all duration-500',
-                                getScoreBgColor(selectedItem.score)
-                              )}
-                              style={{
-                                width: `${(selectedItem.score / 5) * 100}%`,
-                              }}
-                            />
-                          </div>
-                        </div>
-
-                        <div className="space-y-1">
-                          <div className="flex items-center justify-between text-xs">
-                            <span className="text-muted-foreground">
-                              {t('sheet.targetAverage')} ({count}{' '}
-                              {t('sheet.ratings')})
-                            </span>
-                            <span className="tabular-nums text-muted-foreground">
-                              {avg.toFixed(1)}
-                            </span>
-                          </div>
-                          <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
-                            <div
-                              className="h-full rounded-full bg-muted-foreground/40 transition-all duration-500"
-                              style={{ width: `${(avg / 5) * 100}%` }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })()}
-
-                {/* Target */}
-                <div>
-                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    {t('sheet.targetLabel')}
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      window.open(
-                        getTargetUrl(selectedItem.targetType),
-                        '_blank'
-                      )
-                    }
-                    className="flex w-full items-center gap-3 rounded-lg border border-border/50 bg-card p-3 text-left transition-colors hover:bg-muted/40"
-                  >
-                    <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border/60 bg-background">
-                      {getTargetIcon(selectedItem.targetType)}
-                    </span>
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm font-medium">
-                        {selectedItem.targetName}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {t(`targetType.${selectedItem.targetType}`)}
-                      </p>
-                    </div>
-                    <ExternalLink className="size-3.5 shrink-0 text-muted-foreground" />
-                  </button>
-                </div>
-
-                {/* Comment */}
-                {selectedItem.comment ? (
-                  <div>
-                    <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                      <MessageSquare className="size-3.5" />
-                      Comment
-                    </p>
-                    <p className="rounded-lg border border-border/50 bg-muted/20 px-4 py-3 text-sm leading-relaxed">
-                      {selectedItem.comment}
-                    </p>
-                  </div>
-                ) : (
-                  <p className="text-xs italic text-muted-foreground">
-                    {t('sheet.noComment')}
-                  </p>
-                )}
-
-                {/* People */}
-                <div>
-                  <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    {t('sheet.people')}
-                  </p>
-                  <div className="grid grid-cols-2 gap-3">
-                    <button
-                      type="button"
-                      onClick={() => window.open('/contact/accounts', '_blank')}
-                      className="flex items-center gap-3 rounded-lg border border-border/50 bg-card p-3 text-left transition-colors hover:bg-muted/40"
-                    >
-                      <Avatar className="size-9 shrink-0">
-                        <AvatarFallback className="bg-sky-100 text-xs font-semibold text-sky-700 dark:bg-sky-950 dark:text-sky-300">
-                          {getInitials(selectedItem.evaluatorName)}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-medium">
-                          {selectedItem.evaluatorName}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {t('sheet.evaluatorLabel')}
-                        </p>
-                      </div>
-                    </button>
-
-                    {selectedItem.instructorName && (
-                      <button
-                        type="button"
-                        onClick={() =>
-                          window.open('/contact/accounts', '_blank')
-                        }
-                        className="flex items-center gap-3 rounded-lg border border-border/50 bg-card p-3 text-left transition-colors hover:bg-muted/40"
-                      >
-                        <Avatar className="size-9 shrink-0">
-                          <AvatarFallback className="bg-violet-100 text-xs font-semibold text-violet-700 dark:bg-violet-950 dark:text-violet-300">
-                            {getInitials(selectedItem.instructorName)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <div className="min-w-0">
-                          <p className="truncate text-sm font-medium">
-                            {selectedItem.instructorName}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {t('sheet.instructorLabel')}
-                          </p>
-                        </div>
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                {/* Course & Class */}
-                <div>
-                  <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    {t('sheet.courseLabel')}
-                  </p>
-                  <div className="space-y-2">
-                    <button
-                      type="button"
-                      onClick={() => window.open('/lms/courses', '_blank')}
-                      className="flex w-full items-center gap-3 rounded-lg border border-border/50 bg-card p-3 text-left transition-colors hover:bg-muted/40"
-                    >
-                      <div
-                        className={cn(
-                          'flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white',
-                          getCourseColor(selectedItem.courseId)
-                        )}
-                      >
-                        {selectedItem.courseName?.[0] ?? '?'}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate text-sm font-medium">
-                          {selectedItem.courseName}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {t('sheet.courseLabel')}
-                        </p>
-                      </div>
-                      <ExternalLink className="size-3.5 shrink-0 text-muted-foreground" />
-                    </button>
-
-                    {selectedItem.className && (
-                      <button
-                        type="button"
-                        onClick={() => window.open('/lms/classes', '_blank')}
-                        className="flex w-full items-center gap-3 rounded-lg border border-border/50 bg-card p-3 text-left transition-colors hover:bg-muted/40"
-                      >
-                        <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border/60 bg-background">
-                          <Users className="size-4 text-muted-foreground" />
-                        </span>
-                        <div className="min-w-0 flex-1">
-                          <p className="truncate text-sm font-medium">
-                            {selectedItem.className}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {t('sheet.classLabel')}
-                          </p>
-                        </div>
-                        <ExternalLink className="size-3.5 shrink-0 text-muted-foreground" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                {/* Date */}
-                <div className="flex items-center justify-between border-t border-border/50 pt-4">
-                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <CalendarIcon className="size-3.5" />
-                    {t('sheet.dateLabel')}
-                  </span>
-                  <span className="text-sm font-medium">
-                    {format(parseISO(selectedItem.createdAt), 'MMMM d, yyyy')}
-                  </span>
-                </div>
-              </div>
-            </>
-          )}
-        </SheetContent>
-      </Sheet>
-    </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>
+  );
+}