@hed-hog/lms 0.0.327 → 0.0.329

package/hedhog/frontend/app/courses/[id]/_components/CourseSummaryCard.tsx.ejs

@@ -1,60 +0,0 @@
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { CalendarDays, Percent, Users, Video } from 'lucide-react';
-
-interface CourseSummaryCardProps {
-  course: {
-    totalAlunos?: number;
-    conclusaoMedia?: number;
-    totalAulas?: number;
-    totalSessoes?: number;
-  } | null;
-}
-
-export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
-  return (
-    <KpiCardsGrid
-      items={[
-        {
-          key: 'students',
-          title: 'Total Alunos',
-          value: (course?.totalAlunos ?? 0).toLocaleString('pt-BR'),
-          icon: Users,
-          layout: 'compact',
-          accentClassName: 'from-slate-900/20 via-slate-700/10 to-transparent',
-          iconContainerClassName: 'bg-slate-900 text-white',
-        },
-        {
-          key: 'completion',
-          title: 'Conclusao Media',
-          value: `${course?.conclusaoMedia ?? 0}%`,
-          icon: Percent,
-          layout: 'compact',
-          accentClassName:
-            'from-emerald-500/25 via-green-500/15 to-transparent',
-          iconContainerClassName: 'bg-emerald-100 text-emerald-700',
-        },
-        {
-          key: 'lessons',
-          title: 'Total de Aulas',
-          value: String(course?.totalAulas ?? 0),
-          icon: Video,
-          layout: 'compact',
-          accentClassName: 'from-sky-500/25 via-blue-500/15 to-transparent',
-          iconContainerClassName: 'bg-sky-100 text-sky-700',
-        },
-        {
-          key: 'sessions',
-          title: 'Sessoes',
-          value: String(course?.totalSessoes ?? 0),
-          icon: CalendarDays,
-          layout: 'compact',
-          accentClassName:
-            'from-violet-500/25 via-indigo-500/15 to-transparent',
-          iconContainerClassName: 'bg-violet-100 text-violet-700',
-        },
-      ]}
-      columns={4}
-      className="mb-3"
-    />
-  );
-}

package/hedhog/frontend/app/courses/[id]/structure/_components/course-tree.tsx.ejs

@@ -1,134 +0,0 @@
-'use client';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { SearchX } from 'lucide-react';
-import { useCallback, useMemo, useRef } from 'react';
-
-import { useStructureStore } from './store';
-import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
-import { TreeRow } from './tree-row';
-import type { FlatItem } from './types';
-
-// Row height estimates per node type (px)
-const ROW_HEIGHT: Record<FlatItem['type'], number> = {
-  course: 34,
-  session: 32,
-  lesson: 28,
-};
-
-export function CourseTree() {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-  const expandedIds = useStructureStore((s) => s.expandedIds);
-  const filterQuery = useStructureStore((s) => s.filterQuery);
-  const activeItemId = useStructureStore((s) => s.activeItemId);
-  const activeItemType = useStructureStore((s) => s.activeItemType);
-  const selectedIds = useStructureStore((s) => s.selectedIds);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // ── Derived state ───────────────────────────────────────────────────────────
-  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
-    () =>
-      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
-    [course, sessions, lessons, expandedIds, filterQuery]
-  );
-
-  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
-
-  const estimateSize = useCallback(
-    (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
-    [items]
-  );
-
-  // ── Virtualizer ─────────────────────────────────────────────────────────────
-  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns non-memoizable functions; this is expected and safe here
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize,
-    overscan: 8,
-  });
-
-  const isSearchActive = filterQuery.trim().length > 0;
-  const isEmpty = items.length === 0;
-
-  return (
-    <div className="flex flex-col h-full min-h-0">
-      {/* Result count bar */}
-      {isSearchActive && !isEmpty && (
-        <div className="px-3 py-1 shrink-0 border-b">
-          <span className="text-[0.65rem] text-muted-foreground">
-            {resultCount === 1 ? '1 resultado' : `${resultCount} resultados`}
-          </span>
-        </div>
-      )}
-
-      {/* Empty state */}
-      {isEmpty && (
-        <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
-          <SearchX className="size-8 text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">
-            {isSearchActive
-              ? `Nenhum resultado para "${filterQuery.trim()}"`
-              : 'Nenhum item no curso.'}
-          </p>
-        </div>
-      )}
-
-      {/* Virtualised tree */}
-      {!isEmpty && (
-        <div
-          ref={scrollRef}
-          className="overflow-y-auto flex-1 min-h-0"
-          style={{ contain: 'strict' }}
-        >
-          <div
-            style={{
-              height: virtualizer.getTotalSize(),
-              width: '100%',
-              position: 'relative',
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualRow) => {
-              const item = items[virtualRow.index];
-              if (!item) return null;
-
-              return (
-                <div
-                  key={virtualRow.key}
-                  data-index={virtualRow.index}
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: `${virtualRow.size}px`,
-                    transform: `translateY(${virtualRow.start}px)`,
-                    padding: '1px 4px',
-                  }}
-                >
-                  <TreeRow
-                    item={item}
-                    isActive={
-                      activeItemId === item.id && activeItemType === item.type
-                    }
-                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
-                    query={filterQuery}
-                    isMatched={matchedIds.has(item.id)}
-                    isEffectivelyExpanded={
-                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
-                    }
-                    lessonCountMap={lessonCountMap}
-                    visibleItems={items}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-course.tsx.ejs

@@ -1,113 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
-import { useStructureStore } from './store';
-
-export function DetailCourse() {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-
-  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-
-  return (
-    <div className="flex flex-col overflow-y-auto h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
-          <BookOpen className="size-5 text-primary" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{course.title}</h2>
-          <p className="text-xs text-muted-foreground">{course.slug}</p>
-        </div>
-        <Badge
-          variant={course.published ? 'default' : 'secondary'}
-          className="shrink-0"
-        >
-          {course.published ? 'Publicado' : 'Rascunho'}
-        </Badge>
-      </div>
-
-      <div className="flex flex-col gap-5 p-4">
-        {/* Stats */}
-        <div className="grid grid-cols-3 gap-3">
-          <StatCard label="Sessões" value={sessions.length} />
-          <StatCard label="Aulas" value={lessons.length} />
-          <StatCard
-            label="Duração"
-            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
-          />
-        </div>
-
-        <Separator />
-
-        {/* Info */}
-        <div className="flex flex-col gap-2.5">
-          <InfoRow
-            icon={<Hash className="size-3.5" />}
-            label="Slug"
-            value={course.slug}
-          />
-          <InfoRow
-            icon={<Tag className="size-3.5" />}
-            label="Slug"
-            value={course.slug}
-          />
-          <InfoRow
-            icon={<Globe className="size-3.5" />}
-            label="Status"
-            value={course.published ? 'Publicado' : 'Rascunho'}
-          />
-        </div>
-
-        {course.description && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1.5">
-                Descrição
-              </p>
-              <p className="text-sm leading-relaxed text-foreground/90">
-                {course.description}
-              </p>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
-      <span className="text-lg font-bold tabular-nums">{value}</span>
-      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
-    </div>
-  );
-}
-
-function InfoRow({
-  icon,
-  label,
-  value,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string;
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-muted-foreground shrink-0">{icon}</span>
-      <span className="text-xs text-muted-foreground w-14 shrink-0">
-        {label}
-      </span>
-      <span className="text-sm truncate">{value}</span>
-    </div>
-  );
-}

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-lesson.tsx.ejs

@@ -1,314 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
-import {
-  Clock,
-  ExternalLink,
-  FileText,
-  HelpCircle,
-  Layers,
-  Paperclip,
-  Video,
-  type LucideIcon,
-} from 'lucide-react';
-import { useStructureStore } from './store';
-import type { LessonType } from './types';
-
-const LESSON_TYPE_CONFIG: Record<
-  LessonType,
-  { icon: LucideIcon; color: string; bg: string; label: string }
-> = {
-  video: {
-    icon: Video,
-    color: 'text-blue-500',
-    bg: 'bg-blue-500/10',
-    label: 'Vídeo',
-  },
-  post: {
-    icon: FileText,
-    color: 'text-emerald-500',
-    bg: 'bg-emerald-500/10',
-    label: 'Post',
-  },
-  questao: {
-    icon: HelpCircle,
-    color: 'text-amber-500',
-    bg: 'bg-amber-500/10',
-    label: 'Quiz',
-  },
-  exercicio: {
-    icon: Layers,
-    color: 'text-rose-500',
-    bg: 'bg-rose-500/10',
-    label: 'Exercício',
-  },
-};
-
-const VIDEO_PROVIDER_LABELS: Record<string, string> = {
-  youtube: 'YouTube',
-  vimeo: 'Vimeo',
-  panda: 'Panda Video',
-  bunny: 'Bunny.net',
-  outros: 'Outros',
-};
-
-interface DetailLessonProps {
-  lessonId: string;
-}
-
-export function DetailLesson({ lessonId }: DetailLessonProps) {
-  const lesson = useStructureStore((s) =>
-    s.lessons.find((l) => l.id === lessonId)
-  );
-
-  if (!lesson) return null;
-
-  const cfg = LESSON_TYPE_CONFIG[lesson.type];
-  const Icon = cfg.icon;
-
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div
-          className={cn(
-            'flex size-10 items-center justify-center rounded-lg shrink-0',
-            cfg.bg
-          )}
-        >
-          <Icon className={cn('size-5', cfg.color)} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{lesson.title}</h2>
-          <p className="text-xs text-muted-foreground">{lesson.code}</p>
-        </div>
-        <div className="flex items-center gap-1.5 shrink-0">
-          <Badge variant="outline" className={cn('text-xs', cfg.color)}>
-            {cfg.label}
-          </Badge>
-          <Badge variant="secondary" className="gap-1 text-xs">
-            <Clock className="size-3" />
-            {lesson.duration}min
-          </Badge>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <Tabs defaultValue="dados" className="flex flex-col flex-1 min-h-0">
-        <TabsList className="mx-4 mt-3 w-auto justify-start shrink-0">
-          <TabsTrigger value="dados">Dados</TabsTrigger>
-          <TabsTrigger value="transcription">Transcrição</TabsTrigger>
-          <TabsTrigger value="resources">Recursos</TabsTrigger>
-        </TabsList>
-
-        {/* ── Dados ─────────────────────────────────────────────────────────── */}
-        <TabsContent
-          value="dados"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          <div className="flex flex-col gap-4">
-            {lesson.publicDescription && (
-              <Section title="Descrição pública">
-                <p className="text-sm leading-relaxed">
-                  {lesson.publicDescription}
-                </p>
-              </Section>
-            )}
-
-            {lesson.privateDescription && (
-              <>
-                <Separator />
-                <Section title="Descrição interna">
-                  <p className="text-sm leading-relaxed text-muted-foreground">
-                    {lesson.privateDescription}
-                  </p>
-                </Section>
-              </>
-            )}
-
-            {/* Video */}
-            {lesson.type === 'video' && (
-              <>
-                <Separator />
-                <Section title="Configurações de vídeo">
-                  <div className="flex flex-col gap-2">
-                    {lesson.videoProvider && (
-                      <InfoRow
-                        label="Plataforma"
-                        value={
-                          VIDEO_PROVIDER_LABELS[lesson.videoProvider] ??
-                          lesson.videoProvider
-                        }
-                      />
-                    )}
-                    {lesson.videoUrl && (
-                      <div className="flex items-start gap-2">
-                        <span className="text-xs text-muted-foreground w-20 shrink-0 pt-0.5">
-                          URL
-                        </span>
-                        <a
-                          href={lesson.videoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-sm text-primary hover:underline flex items-center gap-1 truncate"
-                        >
-                          {lesson.videoUrl}
-                          <ExternalLink className="size-3 shrink-0" />
-                        </a>
-                      </div>
-                    )}
-                    {lesson.autoDuration !== undefined && (
-                      <InfoRow
-                        label="Duração auto"
-                        value={lesson.autoDuration ? 'Sim' : 'Não'}
-                      />
-                    )}
-                  </div>
-                </Section>
-              </>
-            )}
-
-            {/* Post */}
-            {lesson.type === 'post' && lesson.postContent && (
-              <>
-                <Separator />
-                <Section title="Conteúdo do post">
-                  <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                    {lesson.postContent}
-                  </p>
-                </Section>
-              </>
-            )}
-
-            {/* Questão / exame vinculado */}
-            {lesson.type === 'questao' && lesson.linkedExam && (
-              <>
-                <Separator />
-                <Section title="Exame vinculado">
-                  <div className="flex items-center gap-2 text-sm">
-                    <HelpCircle className="size-3.5 text-amber-500 shrink-0" />
-                    <span>{lesson.linkedExam}</span>
-                  </div>
-                </Section>
-              </>
-            )}
-
-            {!lesson.publicDescription &&
-              !lesson.privateDescription &&
-              lesson.type === 'exercicio' && (
-                <div className="flex flex-col items-center gap-2 py-8 text-center">
-                  <Layers className="size-8 text-muted-foreground/40" />
-                  <p className="text-sm text-muted-foreground">
-                    Sem informações adicionais nesta aula.
-                  </p>
-                </div>
-              )}
-          </div>
-        </TabsContent>
-
-        {/* ── Transcrição ───────────────────────────────────────────────────── */}
-        <TabsContent
-          value="transcription"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          {lesson.transcription ? (
-            <div className="rounded-md border bg-muted/20 p-3">
-              <p className="text-sm leading-relaxed whitespace-pre-wrap font-mono">
-                {lesson.transcription}
-              </p>
-            </div>
-          ) : (
-            <EmptyState
-              icon={<FileText className="size-8 text-muted-foreground/40" />}
-            >
-              Transcrição não disponível para esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>
-
-        {/* ── Recursos ──────────────────────────────────────────────────────── */}
-        <TabsContent
-          value="resources"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          {lesson.resources && lesson.resources.length > 0 ? (
-            <div className="flex flex-col gap-2">
-              {lesson.resources.map((res) => (
-                <div
-                  key={res.id}
-                  className="flex items-center gap-2 rounded-md border px-3 py-2"
-                >
-                  <Paperclip className="size-3.5 text-muted-foreground shrink-0" />
-                  <span className="flex-1 text-sm truncate">{res.name}</span>
-                  {res.size && (
-                    <span className="text-[0.6rem] text-muted-foreground shrink-0">
-                      {res.size}
-                    </span>
-                  )}
-                  <Badge
-                    variant={res.public ? 'default' : 'secondary'}
-                    className="text-[0.6rem] px-1.5 py-0 h-4 shrink-0"
-                  >
-                    {res.public ? 'Público' : 'Privado'}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              icon={<Paperclip className="size-8 text-muted-foreground/40" />}
-            >
-              Nenhum recurso anexado a esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
-
-// ── Local helpers ─────────────────────────────────────────────────────────────
-
-function Section({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <p className="text-xs font-medium text-muted-foreground">{title}</p>
-      {children}
-    </div>
-  );
-}
-
-function InfoRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-xs text-muted-foreground w-20 shrink-0">
-        {label}
-      </span>
-      <span className="text-sm">{value}</span>
-    </div>
-  );
-}
-
-function EmptyState({
-  icon,
-  children,
-}: {
-  icon: React.ReactNode;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col items-center gap-2 py-12 text-center">
-      {icon}
-      <p className="text-sm text-muted-foreground">{children}</p>
-    </div>
-  );
-}