@hed-hog/lms 0.0.361 → 0.0.364

package/hedhog/frontend/app/courses/[id]/structure/_data/use-lesson-xp-map.ts.ejs

@@ -0,0 +1,128 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useState } from 'react';
+
+export type LessonXpSegmentLearningType = {
+  xpLearningTypeId: number;
+  slug: string;
+  name: string;
+  multiplier: number;
+  weightPercent: number;
+};
+
+export type LessonXpSegmentArea = {
+  xpAreaId: number;
+  weightPercent: number;
+};
+
+export type LessonXpSegmentSkill = {
+  xpSkillId: number;
+  weightPercent: number;
+};
+
+export type LessonXpSegment = {
+  id: number;
+  startSeconds: number;
+  endSeconds: number;
+  xpValue: number;
+  difficulty: 'easy' | 'medium' | 'hard' | 'expert';
+  shouldGrantXp: boolean;
+  aiSummary: string | null;
+  aiConfidence: number | null;
+  sortOrder: number;
+  areas: LessonXpSegmentArea[];
+  skills: LessonXpSegmentSkill[];
+  learningTypes: LessonXpSegmentLearningType[];
+};
+
+export type LessonXpMapStatus =
+  | 'pending'
+  | 'processing'
+  | 'ready'
+  | 'needs_review'
+  | 'approved'
+  | 'rejected';
+
+export type LessonXpMap = {
+  id: number;
+  courseLessonId: number;
+  lessonTitle: string;
+  version: number;
+  totalXp: number;
+  status: LessonXpMapStatus;
+  generatedAt: string | null;
+  reviewedAt: string | null;
+  reviewNotes: string | null;
+  aiModelVersion: string | null;
+  processingError: string | null;
+  createdAt: string;
+  updatedAt: string;
+  segments: LessonXpSegment[];
+};
+
+export function useLessonXpMapQuery(
+  lessonId: string | null,
+  activeTab: string
+) {
+  const { request, currentLocaleCode } = useApp();
+  const enabled = Boolean(lessonId) && activeTab === 'xp';
+
+  return useQuery<LessonXpMap | null>({
+    queryKey: ['lesson-xp-map', lessonId, currentLocaleCode],
+    enabled,
+    queryFn: async () => {
+      const res = await request<LessonXpMap>({
+        url: `/lms/xp/lesson-maps/lesson/${lessonId}`,
+        method: 'GET',
+      });
+      return res.data ?? null;
+    },
+    initialData: null,
+    refetchInterval: (query) => {
+      const data = query.state.data as LessonXpMap | null;
+      return data?.status === 'processing' ? 3000 : false;
+    },
+  });
+}
+
+export function useRecalculateLessonXpMutation(lessonId: string | null) {
+  const { request, currentLocaleCode } = useApp();
+  const queryClient = useQueryClient();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mutate = useCallback(
+    async (options?: {
+      onSuccess?: (data: LessonXpMap) => void;
+      onError?: (message: string) => void;
+    }) => {
+      if (!lessonId) return;
+      setIsPending(true);
+      setError(null);
+      try {
+        const res = await request<LessonXpMap>({
+          url: `/lms/xp/lesson-maps/lesson/${lessonId}/recalculate`,
+          method: 'POST',
+        });
+        void queryClient.invalidateQueries({
+          queryKey: ['lesson-xp-map', lessonId, currentLocaleCode],
+        });
+        options?.onSuccess?.(res.data);
+      } catch (err: any) {
+        const message: string =
+          err?.response?.data?.message ??
+          err?.message ??
+          'Erro ao iniciar recálculo';
+        setError(message);
+        options?.onError?.(message);
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [currentLocaleCode, lessonId, request, queryClient]
+  );
+
+  return { mutate, isPending, error };
+}

package/hedhog/frontend/app/courses/[id]/structure/_data/use-transcription-segments.ts.ejs

@@ -74,3 +74,33 @@ export function useUpdateTranscriptionSegmentsMutation(
 
   return { mutate, isPending, error };
 }
+
+export function useStartTranscriptionMutation(lessonId: string | null) {
+  const { request } = useApp();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const mutate = useCallback(
+    async (options?: { onSuccess?: () => void; onError?: (err: Error) => void }) => {
+      setIsPending(true);
+      setError(null);
+      try {
+        await request({
+          url: `/lms/lessons/${lessonId}/transcription/start`,
+          method: 'POST',
+        });
+        options?.onSuccess?.();
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        options?.onError?.(e);
+        throw e;
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [lessonId, request]
+  );
+
+  return { mutate, isPending, error };
+}

package/hedhog/frontend/app/courses/[id]/structure/_utils/xp-color-config.ts.ejs

@@ -0,0 +1,115 @@
+const AREA_SEMANTIC_PALETTE = [
+  '#0f766e',
+  '#0891b2',
+  '#0ea5e9',
+  '#14b8a6',
+  '#22c55e',
+  '#65a30d',
+  '#06b6d4',
+  '#2563eb',
+];
+
+const SKILL_SEMANTIC_PALETTE = [
+  '#c2410c',
+  '#ea580c',
+  '#f97316',
+  '#fb7185',
+  '#e11d48',
+  '#dc2626',
+  '#f59e0b',
+  '#d97706',
+];
+
+const LEARNING_TYPE_SEMANTIC_PALETTE = [
+  '#6d28d9',
+  '#7c3aed',
+  '#8b5cf6',
+  '#a855f7',
+  '#9333ea',
+  '#c026d3',
+  '#6366f1',
+  '#4f46e5',
+];
+
+type PaletteKind = 'area' | 'skill' | 'learningType';
+
+function hashSeed(seed: number | string) {
+  if (typeof seed === 'number') {
+    return Math.abs(seed);
+  }
+
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(index);
+    hash |= 0;
+  }
+
+  return Math.abs(hash);
+}
+
+function getPalette(kind: PaletteKind) {
+  switch (kind) {
+    case 'area':
+      return AREA_SEMANTIC_PALETTE;
+    case 'skill':
+      return SKILL_SEMANTIC_PALETTE;
+    case 'learningType':
+      return LEARNING_TYPE_SEMANTIC_PALETTE;
+    default:
+      return AREA_SEMANTIC_PALETTE;
+  }
+}
+
+const FALLBACK_XP_COLOR = '#0f766e';
+
+export function pickXpSemanticColor(
+  kind: PaletteKind,
+  seed: number | string,
+  index = 0
+) {
+  const palette = getPalette(kind);
+  const paletteIndex = (hashSeed(seed) + index) % palette.length;
+  return palette[paletteIndex] ?? palette[0] ?? FALLBACK_XP_COLOR;
+}
+
+export function resolveXpAreaColor(options: {
+  areaId?: number | string | null;
+  areaSlug?: string | null;
+  index?: number;
+  persistedColor?: string | null;
+}) {
+  const persistedColor = options.persistedColor?.trim();
+  if (persistedColor) {
+    return persistedColor;
+  }
+
+  return pickXpSemanticColor(
+    'area',
+    options.areaSlug ?? options.areaId ?? 'area',
+    options.index ?? 0
+  );
+}
+
+export function resolveXpSkillColor(options: {
+  skillId?: number | string | null;
+  skillSlug?: string | null;
+  index?: number;
+}) {
+  return pickXpSemanticColor(
+    'skill',
+    options.skillSlug ?? options.skillId ?? 'skill',
+    options.index ?? 0
+  );
+}
+
+export function resolveXpLearningTypeColor(options: {
+  learningTypeId?: number | string | null;
+  learningTypeSlug?: string | null;
+  index?: number;
+}) {
+  return pickXpSemanticColor(
+    'learningType',
+    options.learningTypeSlug ?? options.learningTypeId ?? 'learning-type',
+    options.index ?? 0
+  );
+}

package/hedhog/frontend/app/courses/_components/CourseDeleteDialog.tsx.ejs

@@ -0,0 +1,223 @@
+'use client';
+
+import { useId } from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { AlertTriangle, Archive, Loader2, Trash2 } from 'lucide-react';
+
+type CourseDeleteDialogCourse = {
+  title: string;
+  status: 'publicado' | 'rascunho' | 'arquivado';
+  enrollmentCount?: number;
+};
+
+type CourseDeleteDialogImpact = {
+  fileCount: number;
+  formattedSize: string;
+  enrollmentCount?: number;
+};
+
+type CourseDeleteDialogTranslateValues = Record<string, string | number | Date>;
+
+type CourseDeleteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  course: CourseDeleteDialogCourse | null;
+  impact: CourseDeleteDialogImpact | null;
+  loadingImpact: boolean;
+  confirmationInput: string;
+  onConfirmationInputChange: (value: string) => void;
+  archiving: boolean;
+  queuingDelete: boolean;
+  canDelete: boolean;
+  onArchive: () => void | Promise<void>;
+  onDelete: () => void | Promise<void>;
+  t: (key: string, values?: CourseDeleteDialogTranslateValues) => string;
+};
+
+function getStatusKey(status?: CourseDeleteDialogCourse['status']) {
+  if (status === 'publicado') return 'published';
+  if (status === 'arquivado') return 'archived';
+  return 'draft';
+}
+
+export function CourseDeleteDialog({
+  open,
+  onOpenChange,
+  course,
+  impact,
+  loadingImpact,
+  confirmationInput,
+  onConfirmationInputChange,
+  archiving,
+  queuingDelete,
+  canDelete,
+  onArchive,
+  onDelete,
+  t,
+}: CourseDeleteDialogProps) {
+  const confirmationInputId = useId();
+  const requiresArchive = course?.status !== 'arquivado';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="size-5 text-destructive" />
+            {t('deleteDialog.title')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('deleteDialog.description')} <strong>{course?.title}</strong>?
+            {(course?.enrollmentCount ?? 0) > 0 && (
+              <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-destructive text-sm">
+                {t('deleteDialog.warning', {
+                  count: course?.enrollmentCount ?? 0,
+                })}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 px-4">
+          <div className="rounded-lg border border-border/60 bg-muted/20 p-3 text-sm">
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline">
+                {t(`status.${getStatusKey(course?.status)}`)}
+              </Badge>
+              {requiresArchive ? (
+                <span className="text-amber-700">
+                  {t('deleteDialog.archiveFirst')}
+                </span>
+              ) : (
+                <span className="text-emerald-700">
+                  {t('deleteDialog.archiveReady')}
+                </span>
+              )}
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t('deleteDialog.relatedContentWarning')}
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-border/60 p-3">
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <p className="text-sm font-medium">
+                {t('deleteDialog.impactTitle')}
+              </p>
+              {loadingImpact && (
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
+
+            {impact ? (
+              <div className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.files')}
+                  </p>
+                  <p className="font-semibold">{impact.fileCount}</p>
+                </div>
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.storage')}
+                  </p>
+                  <p className="font-semibold">{impact.formattedSize}</p>
+                </div>
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.students')}
+                  </p>
+                  <p className="font-semibold">
+                    {impact.enrollmentCount ?? course?.enrollmentCount ?? 0}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {t('deleteDialog.impactLoading')}
+              </p>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-dashed border-border/70 bg-muted/20 p-3">
+            <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              {t('deleteDialog.expectedNameLabel')}
+            </p>
+            <p className="mt-1 break-all font-mono text-sm font-semibold text-foreground">
+              {course?.title || '-'}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor={confirmationInputId}>
+              {t('deleteDialog.confirmationLabel')}
+            </Label>
+            <Input
+              id={confirmationInputId}
+              placeholder={t('deleteDialog.confirmationPlaceholder')}
+              value={confirmationInput}
+              onChange={(event) =>
+                onConfirmationInputChange(event.target.value)
+              }
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('deleteDialog.confirmationHint')}
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('deleteDialog.actions.cancel')}
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => void onArchive()}
+            disabled={
+              !course ||
+              course.status === 'arquivado' ||
+              archiving ||
+              queuingDelete
+            }
+            className="gap-2"
+          >
+            {archiving ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Archive className="size-4" />
+            )}
+            {course?.status === 'arquivado'
+              ? t('deleteDialog.actions.archived')
+              : t('deleteDialog.actions.archive')}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => void onDelete()}
+            disabled={!canDelete}
+            className="gap-2"
+          >
+            {queuingDelete ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Trash2 className="size-4" />
+            )}
+            {t('deleteDialog.actions.delete')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/courses/_components/CourseRowActions.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { Eye, Pencil, Trash2 } from 'lucide-react';
+import type { MouseEvent } from 'react';
+
+type CourseRowActionsProps = {
+  className?: string;
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: (event: MouseEvent<HTMLButtonElement>) => void;
+  viewLabel: string;
+  editLabel: string;
+  deleteLabel: string;
+};
+
+export function CourseRowActions({
+  className,
+  onView,
+  onEdit,
+  onDelete,
+  viewLabel,
+  editLabel,
+  deleteLabel,
+}: CourseRowActionsProps) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className={cn('flex items-center gap-1', className)}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onView}
+              aria-label={viewLabel}
+            >
+              <Eye className="size-4" />
+              <span className="sr-only">{viewLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{viewLabel}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onEdit}
+              aria-label={editLabel}
+            >
+              <Pencil className="size-4" />
+              <span className="sr-only">{editLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{editLabel}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-destructive hover:text-destructive"
+              onClick={onDelete}
+              aria-label={deleteLabel}
+            >
+              <Trash2 className="size-4" />
+              <span className="sr-only">{deleteLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{deleteLabel}</TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}