@hed-hog/lms 0.0.361 → 0.0.364

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

@@ -20,6 +20,7 @@ import {
   ListChecks,
   Loader2,
   Lock,
+  Mic,
   Pencil,
   Play,
   Plus,
@@ -64,6 +65,7 @@ import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   Select,
   SelectContent,
@@ -119,6 +121,7 @@ import {
 import {
   useDeleteLessonMutation,
   useUpdateLessonMutation,
+  useUpdateResourceTypeMutation,
 } from '../_data/use-course-structure-mutations';
 import {
   courseStructureQueryKey,
@@ -126,9 +129,11 @@ import {
 } from '../_data/use-course-structure-query';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import {
+  useStartTranscriptionMutation,
   useTranscriptionSegmentsQuery,
   useUpdateTranscriptionSegmentsMutation,
 } from '../_data/use-transcription-segments';
+import { LessonXpTab } from './detail-lesson-xp-tab';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type {
@@ -219,6 +224,43 @@ type TranslateFn = (
   key: string,
   values?: Record<string, string | number>
 ) => string;
+type GenericResourceType =
+  | 'supplementary_material'
+  | 'student_download'
+  | 'attachment'
+  | 'document'
+  | 'lesson_audio';
+
+const GENERIC_RESOURCE_TYPES: GenericResourceType[] = [
+  'supplementary_material',
+  'student_download',
+  'attachment',
+  'document',
+];
+
+const GENERIC_RESOURCE_TYPE_LABEL_KEYS: Record<GenericResourceType, string> = {
+  supplementary_material: 'lessonForm.resourceTypes.supplementary_material',
+  student_download: 'lessonForm.resourceTypes.student_download',
+  attachment: 'lessonForm.resourceTypes.attachment',
+  document: 'lessonForm.resourceTypes.document',
+  lesson_audio: 'lessonForm.resourceTypes.lesson_audio',
+};
+
+function humanizeResourceType(type: string): string {
+  return type
+    .split(/[_:./-]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function getResourceTypeLabel(t: TranslateFn, type: string): string {
+  if (type in GENERIC_RESOURCE_TYPE_LABEL_KEYS) {
+    return t(GENERIC_RESOURCE_TYPE_LABEL_KEYS[type as GenericResourceType]);
+  }
+
+  return humanizeResourceType(type);
+}
 
 type LessonEditorTab =
   | 'dados'
@@ -227,7 +269,8 @@ type LessonEditorTab =
   | 'imagens'
   | 'transcricao'
   | 'audios'
-  | 'recursos';
+  | 'recursos'
+  | 'xp';
 
 const ACTIVE_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
   'pending',
@@ -788,6 +831,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const lesson = useStructureStore((s) =>
     s.lessons.find((l) => l.id === lessonId)
   );
+  const updateLessonInStore = useStructureStore((s) => s.updateLesson);
   const sessions = useStructureStore((s) => s.sessions);
   const persistedVideoProvider: VideoProvider | undefined =
     lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
@@ -800,6 +844,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const updateTranscriptionSegments = useUpdateTranscriptionSegmentsMutation(
     lesson?.id ?? null
   );
+  const { mutate: startTranscription, isPending: isStartingTranscription } =
+    useStartTranscriptionMutation(lesson?.id ?? null);
+  const updateResourceTypeMutation = useUpdateResourceTypeMutation();
   const deleteLesson = useDeleteLessonMutation();
   const showConfirm = useStructureStore((s) => s.showConfirm);
   const courseId = useStructureStore((s) => s.courseId);
@@ -912,6 +959,11 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   );
   const [jobDetailOpen, setJobDetailOpen] = useState(false);
   const [resourcesDirty, setResourcesDirty] = useState(false);
+  // 🆕 Filtro de tipo de recurso (estado de sessão)
+  const [resourceTypeFilter, setResourceTypeFilter] = useState<string>('all');
+  const [isUpdatingResourceType, setIsUpdatingResourceType] = useState<
+    string | null
+  >(null);
   const [conversionJobId, setConversionJobId] = useState<number | null>(null);
   const [videoUploadError, setVideoUploadError] = useState<string | null>(null);
   const [dragOver, setDragOver] = useState(false);
@@ -1056,8 +1108,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   >(() => toEditableTranscriptionSegments());
   const [transcriptionDirty, setTranscriptionDirty] = useState(false);
 
-  const { data: fetchedTranscriptionSegments = [] } =
-    useTranscriptionSegmentsQuery(lesson?.id ?? null);
+  const {
+    data: fetchedTranscriptionSegments = [],
+    isLoading: isLoadingTranscription,
+  } = useTranscriptionSegmentsQuery(lesson?.id ?? null);
 
   const {
     data: courseVideoProfiles = [],
@@ -1164,7 +1218,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       toEditableTranscriptionSegments(fetchedTranscriptionSegments)
     );
     setTranscriptionDirty(false);
-  }, [lesson?.id, fetchedTranscriptionSegments]);
+    if (lesson?.id) {
+      updateLessonInStore(lesson.id, {
+        transcriptionSegments: fetchedTranscriptionSegments,
+      });
+    }
+  }, [lesson?.id, fetchedTranscriptionSegments, updateLessonInStore]);
 
   useEffect(() => {
     const frameIds = new Set(videoFrames.map((frame) => frame.id));
@@ -1432,9 +1491,26 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     (res) =>
       res.type !== 'video_original' && !res.type.startsWith('video_profile:')
   );
-  const supplementaryResources = genericResources.filter(
-    (res) => res.type === 'supplementary_material'
-  );
+  // Todos os recursos genéricos aparecem na aba Recursos
+  const supplementaryResources = genericResources;
+
+  // 🆕 Recursos filtrados baseado no tipo selecionado
+  const filteredSupplementaryResources =
+    resourceTypeFilter === 'all'
+      ? supplementaryResources
+      : supplementaryResources.filter((res) => res.type === resourceTypeFilter);
+
+  // 🆕 Tipos únicos presentes nos recursos atuais
+  const availableResourceTypes = Array.from(
+    new Set(supplementaryResources.map((res) => res.type).filter(Boolean))
+  ).sort();
+
+  const resourceTypeFilterOptions = availableResourceTypes.map((type) => ({
+    type,
+    count: supplementaryResources.filter((res) => res.type === type).length,
+    label: getResourceTypeLabel(t, type),
+  }));
+
   const isConversionJobActive = conversionJob
     ? ACTIVE_VIDEO_JOB_STATUSES.includes(conversionJob.status)
     : false;
@@ -1785,6 +1861,24 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     }
   }
 
+  // 🆕 Handler para atualizar tipo de recurso
+  function handleUpdateResourceType(resourceId: string, newType: string) {
+    if (!lesson?.id) return;
+
+    setIsUpdatingResourceType(resourceId);
+    updateResourceTypeMutation.mutate(
+      {
+        lessonId: lesson.id,
+        resourceId,
+        newType,
+        newTypeLabel: getResourceTypeLabel(t, newType),
+      },
+      {
+        onSettled: () => setIsUpdatingResourceType(null),
+      }
+    );
+  }
+
   async function openVideoPreview(res: Resource) {
     const requestId = ++videoPreviewRequestIdRef.current;
     setVideoPreviewResource(res);
@@ -2767,6 +2861,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             >
               {t('lessonForm.tabResources')}
             </TabsTrigger>
+            <TabsTrigger
+              value="xp"
+              className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+            >
+              XP
+            </TabsTrigger>
           </TabsList>
 
           {/* ── Tab Dados ────────────────────────────────────────────────── */}
@@ -4474,29 +4574,79 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     <CardHeader className="px-3 pt-2 pb-1">
                       <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
                         <span>{t('lessonForm.transcriptionSegments')}</span>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          className="h-6 text-xs px-2"
-                          onClick={() =>
-                            updateTranscriptionSegmentsState((prev) => [
-                              ...prev,
-                              {
-                                id: segmentId(),
-                                start: '00:00',
-                                end: '00:15',
-                                text: '',
-                              },
-                            ])
-                          }
-                        >
-                          <Plus className="size-3 mr-1" />
-                          {t('lessonForm.newTranscriptionSegment')}
-                        </Button>
+                        <div className="flex items-center gap-1.5">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-6 text-xs px-2"
+                            disabled={isStartingTranscription}
+                            onClick={() =>
+                              startTranscription({
+                                onSuccess: () => {
+                                  toast.success('Transcrição iniciada!');
+                                  queryClient.invalidateQueries({
+                                    queryKey: [
+                                      'lesson-transcription-segments',
+                                      lesson?.id,
+                                    ],
+                                  });
+                                },
+                                onError: (err) => {
+                                  toast.error(
+                                    err.message ||
+                                      'Erro ao iniciar a transcrição.'
+                                  );
+                                },
+                              })
+                            }
+                          >
+                            {isStartingTranscription ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <Mic className="size-3 mr-1" />
+                            )}
+                            Iniciar transcrição
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-6 text-xs px-2"
+                            onClick={() =>
+                              updateTranscriptionSegmentsState((prev) => [
+                                ...prev,
+                                {
+                                  id: segmentId(),
+                                  start: '00:00',
+                                  end: '00:15',
+                                  text: '',
+                                },
+                              ])
+                            }
+                          >
+                            <Plus className="size-3 mr-1" />
+                            {t('lessonForm.newTranscriptionSegment')}
+                          </Button>
+                        </div>
                       </CardTitle>
                     </CardHeader>
                     <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      {isLoadingTranscription
+                        ? Array.from({ length: 3 }).map((_, i) => (
+                            <div
+                              key={i}
+                              className="rounded-md border bg-background/80 p-2"
+                            >
+                              <div className="grid grid-cols-1 md:grid-cols-[92px_92px_1fr_auto] gap-2 items-start">
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-8 rounded-md" />
+                              </div>
+                            </div>
+                          ))
+                        : null}
                       {transcriptionSegments.map((segment, index) => (
                         <div
                           key={segment.id}
@@ -4733,18 +4883,60 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   </p>
                 )}
 
+                {/* 🆕 Filtro de tipo de recurso */}
+                {supplementaryResources.length > 0 && (
+                  <div className="flex items-center gap-2 px-1">
+                    <label
+                      htmlFor="resource-type-filter"
+                      className="text-xs font-medium"
+                    >
+                      {t('lessonForm.filterBy')}:
+                    </label>
+                    <Select
+                      value={resourceTypeFilter}
+                      onValueChange={setResourceTypeFilter}
+                    >
+                      <SelectTrigger
+                        id="resource-type-filter"
+                        className="h-8 w-56 text-xs"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">
+                          {t('common.all')} ({supplementaryResources.length})
+                        </SelectItem>
+                        {resourceTypeFilterOptions.map(
+                          ({ type, count, label }) => (
+                            <SelectItem key={type} value={type}>
+                              {label} ({count})
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
                 {/* Resource list */}
-                {supplementaryResources.length === 0 ? (
+                {filteredSupplementaryResources.length === 0 ? (
                   <p className="text-center text-xs text-muted-foreground py-1">
                     {t('questionEditor.noLinkedResources')}
                   </p>
                 ) : (
                   <div className="flex flex-col gap-1">
-                    {supplementaryResources.map((res) => {
+                    {filteredSupplementaryResources.map((res) => {
                       const metadata = resolveResourceMetadata(res);
                       const isDownloadingResource = downloadingResourceKeys.has(
                         String(res.fileId ?? res.id)
                       );
+                      const resourceTypeOptions =
+                        !res.type ||
+                        GENERIC_RESOURCE_TYPES.includes(
+                          res.type as GenericResourceType
+                        )
+                          ? GENERIC_RESOURCE_TYPES
+                          : [...GENERIC_RESOURCE_TYPES, res.type];
 
                       return (
                         <div
@@ -4767,26 +4959,69 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                             </div>
                           </div>
 
-                          <div className="flex items-center gap-1.5 pr-1">
-                            <Switch
-                              checked={Boolean(res.public)}
-                              onCheckedChange={(checked) => {
-                                setLocalResources((prev) =>
-                                  prev.map((item) =>
-                                    item.id === res.id
-                                      ? { ...item, public: checked }
-                                      : item
-                                  )
-                                );
-                                setResourcesDirty(true);
-                              }}
-                              aria-label={t('lessonForm.public')}
-                            />
-                            <span className="text-[0.65rem] text-muted-foreground whitespace-nowrap">
-                              {res.public
-                                ? t('lessonForm.public')
-                                : t('lessonForm.private')}
-                            </span>
+                          <div className="flex shrink-0 items-center gap-1.5 pr-1">
+                            <div className="flex items-center gap-1">
+                              <label
+                                htmlFor={`type-${res.id}`}
+                                className="sr-only"
+                              >
+                                {t('lessonForm.resourceType')}
+                              </label>
+                              <Select
+                                value={res.type || undefined}
+                                disabled={isUpdatingResourceType === res.id}
+                                onValueChange={(value) =>
+                                  handleUpdateResourceType(res.id, value)
+                                }
+                              >
+                                <SelectTrigger
+                                  id={`type-${res.id}`}
+                                  className="h-4 w-32 px-1.5 py-0 text-[0.56rem] leading-none [&>svg]:size-2.5"
+                                >
+                                  <SelectValue
+                                    placeholder={t(
+                                      'lessonForm.typePlaceholder'
+                                    )}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {resourceTypeOptions.map((type) => (
+                                    <SelectItem
+                                      key={type}
+                                      value={type}
+                                      className="text-xs"
+                                    >
+                                      {getResourceTypeLabel(t, type)}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              {isUpdatingResourceType === res.id && (
+                                <Loader2 className="size-2.5 animate-spin text-muted-foreground" />
+                              )}
+                            </div>
+
+                            <div className="flex items-center gap-1">
+                              <Switch
+                                checked={Boolean(res.public)}
+                                onCheckedChange={(checked) => {
+                                  setLocalResources((prev) =>
+                                    prev.map((item) =>
+                                      item.id === res.id
+                                        ? { ...item, public: checked }
+                                        : item
+                                    )
+                                  );
+                                  setResourcesDirty(true);
+                                }}
+                                aria-label={t('lessonForm.public')}
+                              />
+                              <span className="text-[0.65rem] text-muted-foreground whitespace-nowrap">
+                                {res.public
+                                  ? t('lessonForm.public')
+                                  : t('lessonForm.private')}
+                              </span>
+                            </div>
                           </div>
 
                           <IconActionTooltip
@@ -4857,6 +5092,18 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               </div>
             </ScrollArea>
           </TabsContent>
+
+          {/* ── Tab XP ───────────────────────────────────────────────────── */}
+          <TabsContent
+            value="xp"
+            className="flex-1 min-h-0 mt-0 overflow-y-auto p-2 sm:p-3"
+          >
+            <LessonXpTab
+              lessonId={lessonId}
+              activeTab={activeTab}
+              hasTranscription={transcriptionSegments.length > 0}
+            />
+          </TabsContent>
         </Tabs>
 
         <Dialog

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'];
       }