@hed-hog/lms 0.0.319 → 0.0.320

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

@@ -0,0 +1,1278 @@
+'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 EvaluationsReportPage() {
+  const t = useTranslations('lms.EvaluationsPage');
+  const router = useRouter();
+  const { request } = useApp();
+
+  // View mode
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:reports: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.reports'), href: '/lms/reports' },
+            { 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/paths')}
+                            >
+                              <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>
+                    <div className="min-w-0 flex-1 space-y-1">
+                      <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>
+  );
+}