@hed-hog/lms 0.0.358 → 0.0.364

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

@@ -19,6 +19,7 @@ import {
   Paperclip,
   ScrollText,
   Video,
+  Zap,
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -66,6 +67,7 @@ const STATUS_CONFIG: Record<LessonStatus, { label: string; dot: string }> = {
 
 interface TreeRowLessonProps {
   data: Lesson;
+  hasXpMap: boolean;
   isSelected: boolean;
   isActive: boolean;
   query: string;
@@ -77,6 +79,7 @@ interface TreeRowLessonProps {
 
 export function TreeRowLesson({
   data,
+  hasXpMap,
   isSelected,
   isActive,
   query,
@@ -97,6 +100,7 @@ export function TreeRowLesson({
     showVideoIndicator,
     showResourcesIndicator,
     showTranscriptionIndicator,
+    showXpCalculatedIndicator,
   } = useTreeDisplaySettings();
 
   const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
@@ -186,6 +190,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 +381,7 @@ export function TreeRowLesson({
           {/* Transcription indicator */}
           {showTranscriptionIndicator &&
             data.type === 'video' &&
-            data.transcription && (
+            hasTranscription && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
@@ -387,6 +394,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/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/use-course-content-overview.ts.ejs

@@ -0,0 +1,54 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+export type CourseContentOverview = {
+  structure: {
+    moduleCount: number;
+    lessonCount: number;
+    publishedLessonCount: number;
+    lessonsByType: {
+      video: number;
+      questao: number;
+      post: number;
+      exercicio: number;
+    };
+  };
+  videos: {
+    lessonCount: number;
+    withTranscription: number;
+    withXp: number;
+  };
+  media: {
+    extractedImageCount: number;
+  };
+  resources: {
+    fileCount: number;
+  };
+  storage: {
+    totalBytes: number;
+    totalFileCount: number;
+    categories: Array<{
+      key: string;
+      fileCount: number;
+      totalBytes: number;
+    }>;
+  };
+};
+
+export function useCourseContentOverviewQuery(courseId: string | null) {
+  const { request } = useApp();
+
+  return useQuery<CourseContentOverview | null>({
+    queryKey: ['course-content-overview', courseId],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const res = await request<CourseContentOverview>({
+        url: `/lms/courses/${courseId}/overview`,
+        method: 'GET',
+      });
+      return res.data ?? null;
+    },
+    initialData: null,
+  });
+}

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

@@ -1052,3 +1052,55 @@ export function useMoveLessonsMutation() {
     },
   });
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// useUpdateResourceTypeMutation (🆕 NOVO)
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface UpdateResourceTypeVars {
+  lessonId: string;
+  resourceId: string;
+  newType: string;
+  newTypeLabel?: string;
+}
+
+/**
+ * Mutation: PATCH /lms/courses/:id/lessons/:lessonId/resources/:resourceId
+ *
+ * Atualiza o tipo (type) de um recurso e refetch a estrutura.
+ * Cache: invalidateQueries para refetch em background
+ */
+export function useUpdateResourceTypeMutation() {
+  const t = useTranslations('lms.courseStructure');
+  const { request } = useApp();
+  const queryClient = useQueryClient();
+  const courseId = useStructureStore((s) => s.courseId);
+
+  return useMutation({
+    mutationFn: async ({ lessonId, resourceId, newType }: UpdateResourceTypeVars) => {
+      const response = await request<Resource>({
+        url: `/lms/courses/${courseId}/lessons/${lessonId}/resources/${resourceId}`,
+        method: 'PATCH',
+        data: { type: newType },
+      });
+      return response.data;
+    },
+    onSuccess: (_, { newType, newTypeLabel }) => {
+      // Invalidate e deixar refetch em background
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+      toast.success(
+        t('mutations.resource.updateTypeSuccess', {
+          type: newTypeLabel ?? newType,
+        })
+      );
+    },
+    onError: () => {
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+      toast.error(t('mutations.resource.updateTypeError'));
+    },
+  });
+}

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

@@ -0,0 +1,76 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+export type CourseXpOverviewLesson = {
+  courseLessonId: number;
+  lessonCode: string | null;
+  lessonTitle: string;
+  totalXp: number;
+  status: string;
+  segmentCount: number;
+  hasMap: boolean;
+};
+
+export type CourseXpOverviewArea = {
+  xpAreaId: number;
+  slug: string;
+  name: string;
+  xp: number;
+  lessonCount: number;
+  segmentCount: number;
+  sharePercent: number;
+};
+
+export type CourseXpOverviewSkill = {
+  xpSkillId: number;
+  slug: string;
+  name: string;
+  xp: number;
+  lessonCount: number;
+  segmentCount: number;
+  sharePercent: number;
+};
+
+export type CourseXpOverviewLearningType = {
+  xpLearningTypeId: number;
+  slug: string;
+  name: string;
+  multiplier: number;
+  xp: number;
+  lessonCount: number;
+  segmentCount: number;
+  sharePercent: number;
+};
+
+export type CourseXpOverview = {
+  summary: {
+    totalLessons: number;
+    mappedLessons: number;
+    unmappedLessons: number;
+    totalXp: number;
+    totalSegments: number;
+    averageXpPerMappedLesson: number;
+  };
+  lessons: CourseXpOverviewLesson[];
+  areas: CourseXpOverviewArea[];
+  skills: CourseXpOverviewSkill[];
+  learningTypes: CourseXpOverviewLearningType[];
+};
+
+export function useCourseXpOverviewQuery(courseId: string | null) {
+  const { request, currentLocaleCode } = useApp();
+
+  return useQuery<CourseXpOverview | null>({
+    queryKey: ['course-xp-overview', courseId, currentLocaleCode],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<CourseXpOverview>({
+        url: `/lms/xp/lesson-maps/course/${courseId}/overview`,
+        method: 'GET',
+      });
+      return response.data ?? null;
+    },
+    initialData: null,
+  });
+}