@hed-hog/lms 0.0.328 → 0.0.330

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

@@ -1,109 +0,0 @@
-import { RichTextEditor } from '@/components/rich-text-editor';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Hash, NotebookPen } from 'lucide-react';
-import type { UseFormReturn } from 'react-hook-form';
-
-import { CourseSectionCard } from './CourseSectionCard';
-import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
-
-type CourseMainInfoCardProps = {
-  form: UseFormReturn<CourseEditFormValues>;
-  t: TranslationFn;
-};
-
-export function CourseMainInfoCard({ form, t }: CourseMainInfoCardProps) {
-  return (
-    <CourseSectionCard
-      title={t('form.sections.basicInfo')}
-      description="Os identificadores e a comunicação principal do curso ficam aqui."
-      icon={NotebookPen}
-    >
-      <div className="grid gap-3 md:grid-cols-2">
-        <FormField
-          control={form.control}
-          name="slug"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.slug.label')}</FormLabel>
-              <FormControl>
-                <div className="relative">
-                  <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    {...field}
-                    className="pl-9 font-mono"
-                    placeholder={t('form.fields.slug.placeholder')}
-                    onChange={(event) =>
-                      field.onChange(
-                        String(event.target.value || '').toLowerCase()
-                      )
-                    }
-                  />
-                </div>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="nomeInterno"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.internalName.label')}</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t('form.fields.internalName.placeholder')}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="tituloComercial"
-          render={({ field }) => (
-            <FormItem className="md:col-span-2">
-              <FormLabel>{t('form.fields.title.label')}</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t('form.fields.title.placeholder')}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="descricaoPublica"
-          render={({ field }) => (
-            <FormItem className="md:col-span-2">
-              <FormLabel>{t('form.fields.description.label')}</FormLabel>
-              <FormControl>
-                <RichTextEditor
-                  value={field.value}
-                  onChange={field.onChange}
-                  className="w-full max-w-full"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-    </CourseSectionCard>
-  );
-}

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>
-  );
-}