@hed-hog/lms 0.0.331 → 0.0.338

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

@@ -0,0 +1,406 @@
+'use client';
+
+import {
+  ClassFormSheet,
+  type ApiClass,
+} from '@/app/(app)/(libraries)/lms/_components/class-form-sheet';
+import { EmptyState, PaginationFooter } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDate as formatDateLocalized } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  CalendarIcon,
+  Clock,
+  Eye,
+  Laptop,
+  Monitor,
+  Pencil,
+  Plus,
+  Users,
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
+
+type ApiClassList = {
+  data: ApiClass[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
+
+type ScheduledClass = {
+  id: number;
+  code: string;
+  title: string;
+  deliveryMode: 'presencial' | 'online' | 'hibrida';
+  status: 'aberta' | 'em_andamento' | 'concluida' | 'cancelada';
+  startDate: string;
+  endDate: string;
+  startTime: string;
+  endTime: string;
+  capacity: number;
+  enrolledCount: number;
+  instructorName: string;
+};
+
+const PAGE_SIZES = [6, 12, 24, 48] as const;
+
+const STATUS_VARIANT = {
+  aberta: 'default',
+  em_andamento: 'secondary',
+  concluida: 'outline',
+  cancelada: 'destructive',
+} as const;
+
+const TYPE_ICON = {
+  presencial: Monitor,
+  online: Laptop,
+  hibrida: Laptop,
+} as const;
+
+function toPtType(
+  value: ApiClass['deliveryMode']
+): ScheduledClass['deliveryMode'] {
+  if (value === 'presential') return 'presencial';
+  if (value === 'hybrid') return 'hibrida';
+  return 'online';
+}
+
+function toPtStatus(value: ApiClass['status']): ScheduledClass['status'] {
+  if (value === 'open') return 'aberta';
+  if (value === 'ongoing') return 'em_andamento';
+  if (value === 'completed') return 'concluida';
+  return 'cancelada';
+}
+
+function mapApiClass(item: ApiClass): ScheduledClass {
+  return {
+    id: item.id,
+    code: item.code,
+    title: item.title,
+    deliveryMode: toPtType(item.deliveryMode),
+    status: toPtStatus(item.status),
+    startDate: item.startDate?.slice(0, 10) ?? '',
+    endDate: item.endDate?.slice(0, 10) ?? item.startDate?.slice(0, 10) ?? '',
+    startTime: item.startTime ?? '',
+    endTime: item.endTime ?? '',
+    capacity: item.capacity,
+    enrolledCount: item.enrolledCount,
+    instructorName:
+      item.professorName ??
+      item.professor ??
+      item.instructorName ??
+      item.instructor ??
+      'Sem professor',
+  };
+}
+
+function formatSchedule(startTime?: string, endTime?: string) {
+  if (startTime && endTime) return `${startTime} - ${endTime}`;
+  return startTime || endTime || 'Nao definido';
+}
+
+function statusLabel(status: ScheduledClass['status']) {
+  if (status === 'aberta') return 'Aberta';
+  if (status === 'em_andamento') return 'Em andamento';
+  if (status === 'concluida') return 'Concluida';
+  return 'Cancelada';
+}
+
+function typeLabel(type: ScheduledClass['deliveryMode']) {
+  if (type === 'presencial') return 'Presencial';
+  if (type === 'hibrida') return 'Hibrida';
+  return 'Online';
+}
+
+type CourseScheduledClassesTabProps = {
+  courseId: string;
+  courseTitle: string;
+};
+
+export function CourseScheduledClassesTab({
+  courseId,
+  courseTitle,
+}: CourseScheduledClassesTabProps) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: PAGE_SIZES,
+  });
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingClassId, setEditingClassId] = useState<string | undefined>();
+
+  const { data, isLoading, isFetching, refetch } = useQuery<ApiClassList>({
+    queryKey: ['lms-course-scheduled-classes', courseId, currentPage, pageSize],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<ApiClassList>({
+        url: '/lms/classes',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          courseId: Number(courseId),
+        },
+      });
+
+      return response.data;
+    },
+    placeholderData: (previousData) => previousData,
+  });
+
+  const classes = useMemo(
+    () => (data?.data ?? []).map((item) => mapApiClass(item)),
+    [data?.data]
+  );
+
+  const totalItems = data?.total ?? 0;
+
+  const handleCreate = () => {
+    setEditingClassId(undefined);
+    setSheetOpen(true);
+  };
+
+  const handleEdit = (classId: number) => {
+    setEditingClassId(String(classId));
+    setSheetOpen(true);
+  };
+
+  const handleSheetSuccess = async () => {
+    await queryClient.invalidateQueries({ queryKey: ['lms-classes-list'] });
+    await queryClient.invalidateQueries({ queryKey: ['lms-course-detail'] });
+    await refetch();
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 rounded-lg border border-border/70 bg-muted/20 p-4 md:flex-row md:items-center md:justify-between">
+        <div className="space-y-1">
+          <h3 className="text-sm font-semibold text-foreground">
+            Turmas agendadas
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            Gerencie as turmas deste curso sem sair do editor.
+          </p>
+        </div>
+        <Button type="button" onClick={handleCreate} className="gap-2">
+          <Plus className="size-4" />
+          Agendar turma
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="overflow-hidden rounded-xl border border-border/70">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Turma</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Tipo</TableHead>
+                <TableHead>Periodo</TableHead>
+                <TableHead>Horario</TableHead>
+                <TableHead className="text-right">Matriculados</TableHead>
+                <TableHead className="w-40 text-right">Acoes</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 4 }).map((_, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <div className="space-y-1.5">
+                      <Skeleton className="h-4 w-32" />
+                      <Skeleton className="h-3 w-48" />
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-5 w-20 rounded-full" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-5 w-20 rounded-full" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-28" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-20" />
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Skeleton className="ml-auto h-4 w-12" />
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Skeleton className="ml-auto h-8 w-28" />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : classes.length === 0 ? (
+        <EmptyState
+          icon={<Users className="h-12 w-12" />}
+          title="Nenhuma turma agendada"
+          description="Crie a primeira turma deste curso para acompanhar os agendamentos aqui."
+          actionLabel="Agendar turma"
+          onAction={handleCreate}
+          actionIcon={<Plus className="mr-2 size-4" />}
+        />
+      ) : (
+        <div className="overflow-hidden rounded-xl border border-border/70">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Turma</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Tipo</TableHead>
+                <TableHead>Periodo</TableHead>
+                <TableHead>Horario</TableHead>
+                <TableHead className="text-right">Matriculados</TableHead>
+                <TableHead className="w-40 text-right">Acoes</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {classes.map((item) => {
+                const TypeIcon = TYPE_ICON[item.deliveryMode];
+
+                return (
+                  <TableRow
+                    key={item.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() => handleEdit(item.id)}
+                    title="Dê um duplo clique para editar a turma"
+                  >
+                    <TableCell>
+                      <div className="min-w-0">
+                        <p className="truncate font-semibold text-foreground">
+                          {item.code}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {item.instructorName}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={STATUS_VARIANT[item.status]}>
+                        {statusLabel(item.status)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <span className="inline-flex items-center gap-1 rounded-full border bg-muted px-2 py-0.5 text-[11px] font-medium text-foreground">
+                        <TypeIcon className="size-3" />
+                        {typeLabel(item.deliveryMode)}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-1 text-sm">
+                        <div className="flex items-center gap-1.5 text-muted-foreground">
+                          <CalendarIcon className="size-3.5" />
+                          <span>
+                            {formatDateLocalized(
+                              item.startDate,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          ate{' '}
+                          {formatDateLocalized(
+                            item.endDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                        <Clock className="size-3.5" />
+                        <span>
+                          {formatSchedule(item.startTime, item.endTime)}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right font-medium">
+                      {item.enrolledCount}/{item.capacity}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-end gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="gap-1"
+                          onClick={() => handleEdit(item.id)}
+                        >
+                          <Pencil className="size-3.5" />
+                          Editar
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="gap-1"
+                          onClick={() => router.push(`/lms/classes/${item.id}`)}
+                        >
+                          <Eye className="size-3.5" />
+                          Detalhes
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {!isLoading && totalItems > 0 ? (
+        <PaginationFooter
+          currentPage={currentPage}
+          pageSize={pageSize}
+          totalItems={totalItems}
+          onPageChange={setCurrentPage}
+          onPageSizeChange={(value) => {
+            setPageSize(value);
+            setCurrentPage(1);
+          }}
+          pageSizeOptions={PAGE_SIZES}
+        />
+      ) : null}
+
+      <ClassFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        classId={editingClassId}
+        defaultCourse={{ id: Number(courseId), title: courseTitle }}
+        lockCourse
+        sheetTitle={editingClassId ? 'Editar turma' : 'Agendar turma'}
+        sheetDescription="Use o mesmo fluxo rapido da tela de turmas para criar ou ajustar esta turma."
+        onSuccess={handleSheetSuccess}
+      />
+
+      {isFetching && !isLoading ? (
+        <p className="text-xs text-muted-foreground">Atualizando turmas...</p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+'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

@@ -0,0 +1,113 @@
+'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>
+  );
+}