@hed-hog/lms 0.0.361 → 0.0.365

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -72,7 +72,7 @@ const TITLE_PATTERNS = [
   'Conceitos fundamentais',
   'Configuracao do ambiente',
   'Pratica guiada passo a passo',
-  'Exercicio: implementacao',
+  'Pratica: implementacao',
   'Quiz de revisao',
   'Caso de uso real',
   'Implementacao completa',
@@ -107,7 +107,6 @@ const LESSON_TYPES: LessonType[] = [
   'video',
   'video',
   'questao',
-  'exercicio',
 ];
 const PROVIDERS: VideoProvider[] = [
   'youtube',

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

@@ -22,6 +22,7 @@ interface SortableTreeRowProps {
   visibleItems: FlatItem[];
   /** When true (filter active) drag is disabled. */
   dragDisabled: boolean;
+  lessonsWithXpMap: Set<string>;
 }
 
 export function SortableTreeRow({
@@ -35,6 +36,7 @@ export function SortableTreeRow({
   sessionIndicatorMap,
   visibleItems,
   dragDisabled,
+  lessonsWithXpMap,
 }: SortableTreeRowProps) {
   const {
     attributes,
@@ -79,6 +81,7 @@ export function SortableTreeRow({
           lessonCountMap={lessonCountMap}
           sessionIndicatorMap={sessionIndicatorMap}
           visibleItems={visibleItems}
+          lessonsWithXpMap={lessonsWithXpMap}
         />
       </div>
     </div>

package/hedhog/frontend/app/courses/[id]/structure/_components/store.ts.ejs

@@ -124,6 +124,7 @@ interface StructureState {
     data: Partial<
       LessonFormValues & {
         transcription?: string;
+        transcriptionSegments?: Lesson['transcriptionSegments'];
         videoConversionJobId?: number;
         resources?: Lesson['resources'];
       }

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

@@ -1,13 +1,12 @@
 'use client';
 
+import { useState } from 'react';
+
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Separator } from '@/components/ui/separator';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import {
   Tooltip,
@@ -26,6 +25,7 @@ import { useTreeDisplaySettings } from './use-tree-display-settings';
 
 export function TreeDisplaySettingsPopover() {
   const t = useTranslations('lms.CoursesPage.StructurePage.displaySettings');
+  const [open, setOpen] = useState(false);
   const {
     showStatusDot,
     showVisibility,
@@ -33,98 +33,114 @@ export function TreeDisplaySettingsPopover() {
     showVideoIndicator,
     showResourcesIndicator,
     showTranscriptionIndicator,
+    showXpCalculatedIndicator,
     update,
   } = useTreeDisplaySettings();
 
   return (
-    <Popover>
+    <>
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
-              >
-                <SlidersHorizontal className="size-3.5" />
-                <span className="sr-only sm:not-sr-only">{t('label')}</span>
-              </Button>
-            </PopoverTrigger>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+              onClick={() => setOpen(true)}
+            >
+              <SlidersHorizontal className="size-3.5" />
+              <span className="sr-only sm:not-sr-only">{t('label')}</span>
+            </Button>
           </TooltipTrigger>
           <TooltipContent side="bottom">{t('title')}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
-      <PopoverContent align="end" className="w-56 p-0">
-        <div className="px-3 py-2.5 border-b">
-          <p className="text-xs font-semibold">{t('sectionTitle')}</p>
-          <p className="text-[0.65rem] text-muted-foreground mt-0.5">
-            {t('sectionDescription')}
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-0">
-          <SettingRow
-            id="show-status-dot"
-            label={t('showStatusDot.label')}
-            description={t('showStatusDot.description')}
-            checked={showStatusDot}
-            onCheckedChange={(v) => update({ showStatusDot: v })}
-          />
-
-          <Separator />
-
-          <SettingRow
-            id="show-visibility"
-            label={t('showVisibility.label')}
-            description={t('showVisibility.description')}
-            checked={showVisibility}
-            onCheckedChange={(v) => update({ showVisibility: v })}
-          />
-
-          <Separator />
-
-          <SettingRow
-            id="show-code"
-            label={t('showCode.label')}
-            description={t('showCode.description')}
-            checked={showCode}
-            onCheckedChange={(v) => update({ showCode: v })}
-          />
-
-          <Separator />
-
-          <SettingRow
-            id="show-video-indicator"
-            label={t('showVideoIndicator.label')}
-            description={t('showVideoIndicator.description')}
-            checked={showVideoIndicator}
-            onCheckedChange={(v) => update({ showVideoIndicator: v })}
-          />
-
-          <Separator />
-
-          <SettingRow
-            id="show-resources-indicator"
-            label={t('showResourcesIndicator.label')}
-            description={t('showResourcesIndicator.description')}
-            checked={showResourcesIndicator}
-            onCheckedChange={(v) => update({ showResourcesIndicator: v })}
-          />
-
-          <Separator />
-
-          <SettingRow
-            id="show-transcription-indicator"
-            label={t('showTranscriptionIndicator.label')}
-            description={t('showTranscriptionIndicator.description')}
-            checked={showTranscriptionIndicator}
-            onCheckedChange={(v) => update({ showTranscriptionIndicator: v })}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <ResizableSheetContent
+          sheetId="lms-course-display-settings"
+          side="right"
+          className="p-0 flex flex-col"
+        >
+          <SheetHeader className="px-4 py-3 border-b shrink-0">
+            <SheetTitle className="text-sm">{t('sectionTitle')}</SheetTitle>
+            <p className="text-[0.65rem] text-muted-foreground mt-0.5">
+              {t('sectionDescription')}
+            </p>
+          </SheetHeader>
+
+          <div className="flex flex-col gap-0 overflow-y-auto">
+            <SettingRow
+              id="show-status-dot"
+              label={t('showStatusDot.label')}
+              description={t('showStatusDot.description')}
+              checked={showStatusDot}
+              onCheckedChange={(v) => update({ showStatusDot: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-visibility"
+              label={t('showVisibility.label')}
+              description={t('showVisibility.description')}
+              checked={showVisibility}
+              onCheckedChange={(v) => update({ showVisibility: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-code"
+              label={t('showCode.label')}
+              description={t('showCode.description')}
+              checked={showCode}
+              onCheckedChange={(v) => update({ showCode: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-video-indicator"
+              label={t('showVideoIndicator.label')}
+              description={t('showVideoIndicator.description')}
+              checked={showVideoIndicator}
+              onCheckedChange={(v) => update({ showVideoIndicator: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-resources-indicator"
+              label={t('showResourcesIndicator.label')}
+              description={t('showResourcesIndicator.description')}
+              checked={showResourcesIndicator}
+              onCheckedChange={(v) => update({ showResourcesIndicator: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-transcription-indicator"
+              label={t('showTranscriptionIndicator.label')}
+              description={t('showTranscriptionIndicator.description')}
+              checked={showTranscriptionIndicator}
+              onCheckedChange={(v) => update({ showTranscriptionIndicator: v })}
+            />
+
+            <Separator />
+
+            <SettingRow
+              id="show-xp-calculated-indicator"
+              label={t('showXpCalculatedIndicator.label')}
+              description={t('showXpCalculatedIndicator.description')}
+              checked={showXpCalculatedIndicator}
+              onCheckedChange={(v) => update({ showXpCalculatedIndicator: v })}
+            />
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
+    </>
   );
 }
 

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

@@ -7,8 +7,8 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
-  ClipboardList,
   Clock3,
   Eye,
   EyeOff,
@@ -19,23 +19,23 @@ import {
   Paperclip,
   ScrollText,
   Video,
+  Zap,
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { useUpdateLessonMutation } from '../_data/use-course-structure-mutations';
 import {
   getQueueJob,
   type QueueJobStatus,
 } from '../_data/services/course-structure.service';
+import { useUpdateLessonMutation } from '../_data/use-course-structure-mutations';
 import { HighlightedText } from './highlighted-text';
 import { useStructureStore } from './store';
-import type { Lesson, LessonStatus, LessonType } from './types';
 import {
   getLessonAttachedResourceCount,
   getLessonUploadedVideoCount,
 } from './tree-helpers';
+import type { Lesson, LessonStatus, LessonType } from './types';
 import { useTreeDisplaySettings } from './use-tree-display-settings';
 
 // ── Type configs ──────────────────────────────────────────────────────────────
@@ -47,11 +47,6 @@ const LESSON_TYPE_CONFIG: Record<
   video: { icon: Video, color: 'text-violet-500', label: 'Vídeo' },
   post: { icon: FileText, color: 'text-emerald-500', label: 'Post' },
   questao: { icon: HelpCircle, color: 'text-amber-500', label: 'Quiz' },
-  exercicio: {
-    icon: ClipboardList,
-    color: 'text-rose-500',
-    label: 'Exercício',
-  },
 };
 
 const STATUS_CONFIG: Record<LessonStatus, { label: string; dot: string }> = {
@@ -66,6 +61,7 @@ const STATUS_CONFIG: Record<LessonStatus, { label: string; dot: string }> = {
 
 interface TreeRowLessonProps {
   data: Lesson;
+  hasXpMap: boolean;
   isSelected: boolean;
   isActive: boolean;
   query: string;
@@ -77,6 +73,7 @@ interface TreeRowLessonProps {
 
 export function TreeRowLesson({
   data,
+  hasXpMap,
   isSelected,
   isActive,
   query,
@@ -97,6 +94,7 @@ export function TreeRowLesson({
     showVideoIndicator,
     showResourcesIndicator,
     showTranscriptionIndicator,
+    showXpCalculatedIndicator,
   } = useTreeDisplaySettings();
 
   const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
@@ -186,6 +184,9 @@ export function TreeRowLesson({
       : `${durationM}m`;
   const attachedResourceCount = getLessonAttachedResourceCount(data);
   const uploadedVideoCount = getLessonUploadedVideoCount(data);
+  const hasTranscription =
+    Boolean(data.transcription?.trim()) ||
+    Boolean(data.transcriptionSegments?.some((segment) => segment.text.trim()));
 
   const videoJobVisualState =
     data.type !== 'video'
@@ -374,7 +375,7 @@ export function TreeRowLesson({
           {/* Transcription indicator */}
           {showTranscriptionIndicator &&
             data.type === 'video' &&
-            data.transcription && (
+            hasTranscription && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
@@ -387,6 +388,19 @@ export function TreeRowLesson({
                 <TooltipContent>{t('hasTranscription')}</TooltipContent>
               </Tooltip>
             )}
+          {showXpCalculatedIndicator && data.type === 'video' && hasXpMap && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  aria-label={t('xpCalculated')}
+                  className="inline-flex items-center"
+                >
+                  <Zap className="size-3 shrink-0 text-amber-500" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{t('xpCalculated')}</TooltipContent>
+            </Tooltip>
+          )}
         </div>
       )}
     </div>

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

@@ -23,6 +23,7 @@ interface TreeRowProps {
   >;
   /** Full ordered visible list — required for SHIFT-range selection. */
   visibleItems: FlatItem[];
+  lessonsWithXpMap: Set<string>;
 }
 
 export function TreeRow({
@@ -35,6 +36,7 @@ export function TreeRow({
   lessonCountMap,
   sessionIndicatorMap,
   visibleItems,
+  lessonsWithXpMap,
 }: TreeRowProps) {
   const selectItem = useStructureStore((s) => s.selectItem);
   const toggleExpand = useStructureStore((s) => s.toggleExpand);
@@ -108,6 +110,7 @@ export function TreeRow({
     <TreeContextMenu item={item}>
       <TreeRowLesson
         data={item.data as Lesson}
+        hasXpMap={lessonsWithXpMap.has(String(item.id))}
         isSelected={isSelected}
         isActive={isActive}
         query={query}

package/hedhog/frontend/app/courses/[id]/structure/_components/types.ts.ejs

@@ -2,7 +2,7 @@
 // Types — LMS Course Structure TreeView
 // ─────────────────────────────────────────────────────────────────────────────
 
-export type LessonType = 'video' | 'questao' | 'post' | 'exercicio';
+export type LessonType = 'video' | 'questao' | 'post';
 export type VideoProvider = 'youtube' | 'vimeo' | 'file_storage';
 export type ItemType = 'course' | 'session' | 'lesson';
 

package/hedhog/frontend/app/courses/[id]/structure/_components/use-tree-display-settings.ts.ejs

@@ -19,6 +19,8 @@ export interface TreeDisplaySettings {
   showResourcesIndicator: boolean;
   /** Show a transcription icon when a video lesson has transcription text */
   showTranscriptionIndicator: boolean;
+  /** Show an XP icon when a video lesson already has XP map calculated */
+  showXpCalculatedIndicator: boolean;
 }
 
 interface TreeDisplaySettingsStore extends TreeDisplaySettings {
@@ -37,7 +39,8 @@ const DEFAULTS: TreeDisplaySettings = {
   showCode: false,
   showVideoIndicator: false,
   showResourcesIndicator: false,
-  showTranscriptionIndicator: false,
+  showTranscriptionIndicator: true,
+  showXpCalculatedIndicator: true,
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -60,6 +63,7 @@ export const useTreeDisplaySettings = create<TreeDisplaySettingsStore>(
             showVideoIndicator: s.showVideoIndicator,
             showResourcesIndicator: s.showResourcesIndicator,
             showTranscriptionIndicator: s.showTranscriptionIndicator,
+            showXpCalculatedIndicator: s.showXpCalculatedIndicator,
             ...partial,
           };
           localStorage.setItem(LS_KEY, JSON.stringify(toSave));
@@ -89,6 +93,8 @@ if (typeof window !== 'undefined') {
         showTranscriptionIndicator:
           saved.showTranscriptionIndicator ??
           DEFAULTS.showTranscriptionIndicator,
+        showXpCalculatedIndicator:
+          saved.showXpCalculatedIndicator ?? DEFAULTS.showXpCalculatedIndicator,
       });
     }
   } catch {

package/hedhog/frontend/app/courses/[id]/structure/_components/xp-premium-pills.tsx.ejs

@@ -0,0 +1,44 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+export function XpHighlightPill({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: string;
+  tone: 'sky' | 'amber' | 'emerald' | 'violet';
+}) {
+  const toneClassName =
+    tone === 'sky'
+      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
+      : tone === 'amber'
+        ? 'border-amber-500/15 bg-amber-500/10 text-amber-700 dark:text-amber-300'
+        : tone === 'emerald'
+          ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+          : 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300';
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+        toneClassName
+      )}
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.14em] opacity-80">
+        {label}
+      </span>
+      <span className="font-semibold">{value}</span>
+    </div>
+  );
+}
+
+export function XpMetaPill({ value }: { value: string }) {
+  return (
+    <span className="rounded-full border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
+      {value}
+    </span>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_data/adapters/course-structure.adapter.ts.ejs

@@ -14,9 +14,8 @@
  *
  * ⚠️ KNOWN MISMATCHES (documented with inline comments):
  *   1. exameVinculado (number) ↔ linkedExam (string) — converted with String()/Number()
- *   2. 'exercicio' tipo — exists in backend and is now part of frontend LessonType.
- *   3. Session.order — not returned by API; inferred from sorted array position.
- *   4. Resource.size / url — not returned by API; left as empty string / undefined.
+ *   2. Session.order — not returned by API; inferred from sorted array position.
+ *   3. Resource.size / url — not returned by API; left as empty string / undefined.
  */
 
 import type {
@@ -55,7 +54,7 @@ import type {
  * Map backend lesson type to the frontend LessonType union.
  *
  * ⚠️ ADAPTER POINT:
- *   'exercicio' is now part of the frontend LessonType union.
+ *   Keep this helper updated if backend introduces new lesson type aliases.
  */
 function normalizeLessonType(tipo: ApiLesson['tipo']): LessonType {
   return tipo as LessonType;
@@ -129,7 +128,7 @@ export function normalizeCourse(raw: ApiCourse): Course {
     description: raw.descricao,
     slug: raw.slug,
     offeringType: raw.offeringType,
-    published: false,
+    published: raw.status === 'published',
   };
 }
 
@@ -301,9 +300,7 @@ export function toCreateLessonPayload(
 ): ApiCreateLessonPayload {
   return {
     titulo: data.title,
-    // ⚠️ TYPE NOTE: 'exercicio' is not in the frontend LessonType but the
-    // backend accepts it. Cast is safe as long as LessonType ⊆ ApiLesson['tipo'].
-    tipo: data.type as ApiCreateLessonPayload['tipo'],
+    tipo: data.type,
     duracao: data.duration,
     published: data.published,
     statusProducao: data.status,
@@ -361,8 +358,7 @@ export function toUpdateLessonPayload(
 ): ApiUpdateLessonPayload {
   const payload: ApiUpdateLessonPayload = {};
   if (data.title !== undefined) payload.titulo = data.title;
-  if (data.type !== undefined)
-    payload.tipo = data.type as ApiCreateLessonPayload['tipo'];
+  if (data.type !== undefined) payload.tipo = data.type;
   if (data.duration !== undefined) payload.duracao = data.duration;
   if (data.published !== undefined) payload.published = data.published;
   if (data.status !== undefined) payload.statusProducao = data.status;

package/hedhog/frontend/app/courses/[id]/structure/_data/services/course-structure.service.ts.ejs

@@ -54,6 +54,7 @@ type RequestFn = (input: {
   data?: unknown;
   headers?: Record<string, string>;
   onUploadProgress?: (event: { loaded: number; total?: number }) => void;
+  showErrors?: boolean;
 }) => Promise<{ data: unknown }>;
 
 export type QueueJobStatus =
@@ -584,6 +585,7 @@ export async function getQueueJob(
   const response = await request({
     url: `/queue/jobs/${jobId}`,
     method: 'GET',
+    showErrors: false,
   });
   return extractData<QueueJobResponse>(response);
 }
@@ -604,3 +606,50 @@ export async function deleteFile(
     data: { ids: [fileId] },
   });
 }
+
+// ── Questions ─────────────────────────────────────────────────────────────────
+
+export interface ApiQuestion {
+  id: number;
+  questionType: string;
+  statement: string;
+  points: number;
+  subjectId: number | null;
+  subjectName: string | null;
+}
+
+export interface ApiQuestionListResponse {
+  total: number;
+  page: number;
+  limit: number;
+  data: ApiQuestion[];
+}
+
+export interface CreateQuestionPayload {
+  statement: string;
+  questionType?: string;
+  points?: number;
+  subjectId?: number;
+  explanation?: string;
+  alternatives?: { text: string; isCorrect: boolean }[];
+  fillBlankAnswers?: { answer: string; alternatives?: string[] }[];
+  matchingPairs?: { id: string; leftText: string; rightText: string }[];
+}
+
+export async function listQuestions(
+  request: RequestFn,
+  search?: string
+): Promise<ApiQuestionListResponse> {
+  const params = new URLSearchParams({ limit: '100' });
+  if (search?.trim()) params.set('search', search.trim());
+  const response = await request({ url: `/lms/questions?${params}`, method: 'GET' });
+  return response.data as ApiQuestionListResponse;
+}
+
+export async function createQuestion(
+  request: RequestFn,
+  dto: CreateQuestionPayload
+): Promise<ApiQuestion> {
+  const response = await request({ url: '/lms/questions', method: 'POST', data: dto });
+  return response.data as ApiQuestion;
+}

package/hedhog/frontend/app/courses/[id]/structure/_data/types/api-course.types.ts.ejs

@@ -65,7 +65,7 @@ export interface ApiLessonInstructor {
  *   The backend maps DB lesson types to UI types in mapDbTypeToUiType():
  *     DB 'video' → UI 'video'
  *     DB 'text'  → UI 'post'
- *     DB 'quiz'  → UI 'questao' or 'exercicio' (based on content.sourceType)
+ *     DB 'quiz'  → UI 'questao' (based on content.sourceType)
  *
  * ⚠️ BACKEND NOTE — missing fields:
  *   `order` and `visibility` are NOT included in the API response.
@@ -80,7 +80,7 @@ export interface ApiLesson {
   descricaoPrivada: string;
   locale_id?: number | null;
   /** UI-level lesson type resolved by the backend service. */
-  tipo: 'video' | 'questao' | 'post' | 'exercicio';
+  tipo: 'video' | 'questao' | 'post';
   /** Duration in minutes. */
   duracao: number;
   published?: boolean;
@@ -140,6 +140,7 @@ export interface ApiCourse {
   titulo: string;
   descricao: string;
   offeringType?: 'scheduled' | 'on_demand' | 'blended';
+  status?: 'draft' | 'published' | 'archived';
   recursos?: ApiCourseResource[];
 }
 
@@ -207,7 +208,7 @@ export interface ApiUpdateSessionPayload {
  */
 export interface ApiCreateLessonPayload {
   titulo: string;
-  tipo: 'video' | 'questao' | 'post' | 'exercicio';
+  tipo: 'video' | 'questao' | 'post';
   /** Duration in minutes. */
   duracao: number;
   published?: boolean;