@hed-hog/lms 0.0.357 → 0.0.358

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

@@ -0,0 +1,382 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  AlertTriangle,
+  Briefcase,
+  Loader2,
+  RefreshCw,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+type OperationsConfig = {
+  isAvailable: boolean;
+  projectId: number | null;
+  projectCode: string | null;
+  projectName: string | null;
+  taskMode: 'per_lesson' | 'per_production_status' | null;
+  completionStatus: string | null;
+  missingTasksCount: number;
+};
+
+type ProjectOption = {
+  id: number;
+  code?: string | null;
+  name: string;
+  clientName?: string | null;
+  status?: string;
+};
+
+type PickerOption = {
+  value: string;
+  label: string;
+  description?: string | null;
+};
+
+const PRODUCTION_STATUSES: { value: string; label: string }[] = [
+  { value: 'preparada',  label: 'Preparada' },
+  { value: 'gravada',    label: 'Gravada' },
+  { value: 'editada',    label: 'Editada' },
+  { value: 'finalizada', label: 'Finalizada' },
+  { value: 'publicada',  label: 'Publicada' },
+];
+
+const STATUS_COLORS: Record<string, string> = {
+  preparada:  'bg-slate-100  text-slate-600  dark:bg-slate-800  dark:text-slate-300',
+  gravada:    'bg-blue-100   text-blue-700   dark:bg-blue-900   dark:text-blue-300',
+  editada:    'bg-amber-100  text-amber-700  dark:bg-amber-900  dark:text-amber-300',
+  finalizada: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
+  publicada:  'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+};
+
+const PRODUCTION_STAGES = [
+  { stage: 'preparacao', label: 'Preparação' },
+  { stage: 'gravacao', label: 'Gravação' },
+  { stage: 'edicao', label: 'Edição' },
+  { stage: 'finalizacao', label: 'Finalização' },
+  { stage: 'publicacao', label: 'Publicação' },
+];
+
+type Props = {
+  courseId: string;
+};
+
+export function CourseOperationsTab({ courseId }: Props) {
+  const { request } = useApp();
+  const queryClient = useQueryClient();
+
+  const configQueryKey = ['lms-course-operations-config', courseId];
+
+  const { data: config, isLoading: isLoadingConfig } = useQuery<OperationsConfig>({
+    queryKey: configQueryKey,
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const res = await request<OperationsConfig>({
+        url: `/lms/courses/${courseId}/operations`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+  });
+
+  const { data: projectOptionsData } = useQuery<
+    { data: ProjectOption[] } | ProjectOption[]
+  >({
+    queryKey: ['lms-operations-project-options-tab'],
+    queryFn: async () => {
+      try {
+        const res = await request<{ data: ProjectOption[] } | ProjectOption[]>({
+          url: '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc',
+          method: 'GET',
+        });
+        return res.data;
+      } catch {
+        return { data: [] };
+      }
+    },
+    initialData: { data: [] },
+  });
+
+  const projectOptions: PickerOption[] = (() => {
+    const raw = Array.isArray(projectOptionsData)
+      ? projectOptionsData
+      : (projectOptionsData?.data ?? []);
+
+    const current =
+      config?.projectId && config?.projectName
+        ? [
+            {
+              value: String(config.projectId),
+              label: config.projectName,
+              description: config.projectCode ?? undefined,
+            },
+          ]
+        : [];
+
+    const remote = raw.map((p) => ({
+      value: String(p.id),
+      label: p.name,
+      description: p.code ?? p.clientName ?? undefined,
+    }));
+
+    return [...current, ...remote].filter(
+      (item, idx, arr) =>
+        arr.findIndex((c) => c.value === item.value) === idx,
+    );
+  })();
+
+  const [projectId, setProjectId] = useState<string>('');
+  const [taskMode, setTaskMode] = useState<
+    'per_lesson' | 'per_production_status' | ''
+  >('');
+  const [completionStatus, setCompletionStatus] = useState<string>('');
+
+  useEffect(() => {
+    if (!config) return;
+    setProjectId(config.projectId ? String(config.projectId) : '');
+    setTaskMode(config.taskMode ?? '');
+    setCompletionStatus(config.completionStatus ?? '');
+  }, [config]);
+
+  const { mutate: saveConfig, isPending: isSaving } = useMutation({
+    mutationFn: async () => {
+      await request({
+        url: `/lms/courses/${courseId}/operations`,
+        method: 'PATCH',
+        data: {
+          projectId: projectId ? Number(projectId) : null,
+          taskMode: taskMode || null,
+          completionStatus: completionStatus || null,
+        },
+      });
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: configQueryKey });
+      toast.success('Configuração de operações salva.');
+    },
+    onError: () => {
+      toast.error('Erro ao salvar configuração de operações.');
+    },
+  });
+
+  const { mutate: recreateTasks, isPending: isRecreating } = useMutation({
+    mutationFn: async () => {
+      const res = await request<{ count?: number }>({
+        url: `/lms/courses/${courseId}/operations/recreate-tasks`,
+        method: 'POST',
+      });
+      return res.data;
+    },
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({ queryKey: configQueryKey });
+      const count = typeof data === 'number' ? data : (data?.count ?? 0);
+      toast.success(
+        count > 0
+          ? `${count} tarefa(s) recriada(s) com sucesso.`
+          : 'Nenhuma tarefa faltante encontrada.',
+      );
+    },
+    onError: () => {
+      toast.error('Erro ao recriar tarefas.');
+    },
+  });
+
+  if (isLoadingConfig) {
+    return (
+      <div className="flex items-center justify-center py-10">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-5 p-1">
+      {/* ── Projeto vinculado ──────────────────────────────────────────── */}
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          Projeto Operations
+        </Label>
+        <EntityPicker<PickerOption>
+          value={projectId}
+          onChange={(val) => {
+            const next = String(val ?? '');
+            setProjectId(next);
+            if (!next) {
+              setTaskMode('');
+              setCompletionStatus('');
+            }
+          }}
+          options={projectOptions}
+          placeholder="Selecionar projeto..."
+          searchPlaceholder="Buscar projeto..."
+          entityLabel="projeto"
+          emptyStateDescription="Nenhum projeto encontrado."
+          getOptionValue={(o) => o.value}
+          getOptionLabel={(o) => o.label}
+          getOptionDescription={(o) => o.description ?? undefined}
+        />
+        {config?.projectName && projectId === String(config.projectId) && (
+          <p className="text-xs text-muted-foreground flex items-center gap-1">
+            <Briefcase className="size-3" />
+            {[config.projectCode, config.projectName].filter(Boolean).join(' — ')}
+          </p>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* ── Configurações (habilitadas só com projeto) ──────────────────── */}
+      <fieldset disabled={!projectId} className="flex flex-col gap-5 disabled:opacity-50">
+        {/* Modo de criação de tarefas */}
+        <div className="flex flex-col gap-2">
+          <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            Modo de criação de tarefas
+          </Label>
+          <RadioGroup
+            value={taskMode}
+            onValueChange={(val) =>
+              setTaskMode(val as 'per_lesson' | 'per_production_status')
+            }
+            className="flex flex-col gap-2"
+          >
+            <div className="flex items-start gap-2.5 rounded-md border p-3 cursor-pointer hover:bg-muted/40 transition-colors">
+              <RadioGroupItem value="per_lesson" id="mode-per-lesson" className="mt-0.5" />
+              <div className="flex flex-col gap-0.5">
+                <Label htmlFor="mode-per-lesson" className="cursor-pointer text-sm font-medium">
+                  Uma tarefa por aula
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Cria uma única tarefa no projeto para cada aula. Ao concluir a tarefa, o status de publicação da aula é atualizado automaticamente.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-2.5 rounded-md border p-3 cursor-pointer hover:bg-muted/40 transition-colors">
+              <RadioGroupItem value="per_production_status" id="mode-per-status" className="mt-0.5" />
+              <div className="flex flex-col gap-0.5">
+                <Label htmlFor="mode-per-status" className="cursor-pointer text-sm font-medium">
+                  Uma tarefa por status de produção
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Cria 5 tarefas por aula — uma para cada etapa de produção:
+                </p>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {PRODUCTION_STAGES.map((s) => (
+                    <span
+                      key={s.stage}
+                      className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium"
+                    >
+                      {s.label}
+                    </span>
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Ao concluir cada tarefa, o status correspondente é aplicado à aula automaticamente via tag.
+                </p>
+              </div>
+            </div>
+          </RadioGroup>
+        </div>
+
+        {/* Status ao concluir (apenas modo per_lesson) */}
+        {taskMode === 'per_lesson' && (
+          <div className="flex flex-col gap-1.5">
+            <Label
+              htmlFor="completion-status"
+              className="text-xs font-medium text-muted-foreground uppercase tracking-wide"
+            >
+              Status ao concluir a tarefa
+            </Label>
+            <Select value={completionStatus} onValueChange={setCompletionStatus}>
+              <SelectTrigger id="completion-status" className="w-full">
+                <SelectValue placeholder="Selecionar status..." />
+              </SelectTrigger>
+              <SelectContent>
+                {PRODUCTION_STATUSES.map((s) => (
+                  <SelectItem key={s.value} value={s.value}>
+                    <span
+                      className={cn(
+                        'text-xs px-1.5 py-0.5 rounded',
+                        STATUS_COLORS[s.value],
+                      )}
+                    >
+                      {s.label}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              O status de produção desta aula será atualizado para o valor selecionado quando a tarefa for movida para "Concluído" no Operations.
+            </p>
+          </div>
+        )}
+      </fieldset>
+
+      {/* ── Tarefas faltantes ───────────────────────────────────────────── */}
+      {config?.missingTasksCount !== undefined && config.missingTasksCount > 0 && (
+        <>
+          <Separator />
+          <div className="flex flex-col gap-2 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 p-3">
+            <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400">
+              <AlertTriangle className="size-4 shrink-0" />
+              <p className="text-sm font-medium">
+                {config.missingTasksCount === 1
+                  ? '1 aula sem tarefa vinculada'
+                  : `${config.missingTasksCount} aulas sem tarefas vinculadas`}
+              </p>
+            </div>
+            <p className="text-xs text-amber-600 dark:text-amber-500">
+              As tarefas podem ter sido excluídas manualmente no Operations. Clique abaixo para recriá-las.
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="self-start gap-2 border-amber-300 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:text-amber-400 dark:hover:bg-amber-900/40"
+              onClick={() => recreateTasks()}
+              disabled={isRecreating || !projectId}
+            >
+              {isRecreating ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <RefreshCw className="size-3.5" />
+              )}
+              Recriar tarefas faltantes
+            </Button>
+          </div>
+        </>
+      )}
+
+      {/* ── Ações ───────────────────────────────────────────────────────── */}
+      <div className="flex justify-end">
+        <Button
+          type="button"
+          size="sm"
+          className="gap-2"
+          onClick={() => saveConfig()}
+          disabled={isSaving}
+        >
+          {isSaving && <Loader2 className="size-3.5 animate-spin" />}
+          Salvar configurações
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -95,6 +95,7 @@ import {
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { courseStructureQueryKey } from '../_data/use-course-structure-query';
 import { IconActionTooltip } from './icon-action-tooltip';
+import { CourseOperationsTab } from './course-operations-tab';
 import { useStructureStore } from './store';
 import { Resource } from './types';
 
@@ -551,6 +552,25 @@ export function EditorCourse() {
     initialData: [],
   });
 
+  const { data: operationsConfig } = useQuery<{ isAvailable: boolean }>({
+    queryKey: ['lms-course-operations-config', courseId],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      try {
+        const res = await request<{ isAvailable: boolean }>({
+          url: `/lms/courses/${courseId}/operations`,
+          method: 'GET',
+        });
+        return res.data;
+      } catch {
+        return { isAvailable: false };
+      }
+    },
+    initialData: { isAvailable: false },
+  });
+
+  const showOperationsTab = operationsConfig?.isAvailable === true;
+
   // ── Save mutation ───────────────────────────────────────────────────────────
   const { mutate: saveCourse, isPending: saving } = useMutation({
     mutationFn: async (data: CourseEditFormValues) => {
@@ -1559,6 +1579,7 @@ export function EditorCourse() {
                 'recursos',
                 'extra',
                 ...(showVideoTab ? ['videos'] : []),
+                ...(showOperationsTab ? ['operacoes'] : []),
                 'publicacao',
               ] as const
             ).map((tab) => (
@@ -1584,7 +1605,9 @@ export function EditorCourse() {
                           ? t('structureEditor.tabs.extra')
                           : tab === 'videos'
                             ? t('structureEditor.tabs.videoProfiles')
-                            : t('structureEditor.tabs.publish')}
+                            : tab === 'operacoes'
+                              ? 'Operações'
+                              : t('structureEditor.tabs.publish')}
               </TabsTrigger>
             ))}
           </TabsList>
@@ -2271,6 +2294,13 @@ export function EditorCourse() {
                 </TabsContent>
               )}
 
+              {/* ── Tab: Operações ──────────────────────────────────────── */}
+              {showOperationsTab && (
+                <TabsContent value="operacoes" className="mt-0 min-w-0">
+                  <CourseOperationsTab courseId={courseId} />
+                </TabsContent>
+              )}
+
               {/* ── Tab: Publicação ─────────────────────────────────────── */}
               <TabsContent
                 value="publicacao"

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

@@ -160,6 +160,28 @@ function formatDateTimeLabel(value?: string | null): string | null {
   }).format(parsed);
 }
 
+function getInitials(name?: string | null): string {
+  const normalizedName = String(name ?? '').trim();
+  if (!normalizedName) return '--';
+
+  return normalizedName
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+}
+
+function getInstructorAvatarUrl(avatarId?: number | null): string | undefined {
+  if (typeof avatarId !== 'number' || avatarId <= 0) return undefined;
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, '');
+  return baseUrl
+    ? `${baseUrl}/person/avatar/${avatarId}`
+    : `/person/avatar/${avatarId}`;
+}
+
 function videoProfileResourceType(profileId: number): string {
   return `video_profile:${profileId}`;
 }
@@ -2915,13 +2937,18 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                         control={form.control}
                         name="published"
                         render={({ field }) => (
-                          <FormItem className="flex items-center justify-between gap-3 rounded-md border px-3 h-8">
+                          <FormItem>
                             <FormLabel className="text-xs">Publicada</FormLabel>
                             <FormControl>
-                              <Switch
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                              />
+                              <div className="flex h-8 items-center justify-between gap-3 rounded-md border px-3">
+                                <p className="cursor-default text-xs text-foreground">
+                                  Publicada
+                                </p>
+                                <Switch
+                                  checked={field.value}
+                                  onCheckedChange={field.onChange}
+                                />
+                              </div>
                             </FormControl>
                             <FormMessage className="text-xs" />
                           </FormItem>
@@ -2940,7 +2967,11 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-2">
                     {/* Picker para adicionar */}
-                    <EntityPicker<{ id: number; name: string }>
+                    <EntityPicker<{
+                      id: number;
+                      name: string;
+                      avatarId?: number | null;
+                    }>
                       key={instructorPickerResetKey}
                       value={null}
                       onChange={(val) => {
@@ -2962,6 +2993,44 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       )}
                       getOptionValue={(o) => o.id}
                       getOptionLabel={(o) => o.name}
+                      renderOption={({ option }) => {
+                        const avatarUrl = getInstructorAvatarUrl(
+                          option.avatarId
+                        );
+                        const displayName = option.name ?? String(option.id);
+
+                        return (
+                          <div className="flex min-w-0 items-center gap-2">
+                            <Avatar className="size-6 shrink-0">
+                              <AvatarImage src={avatarUrl} alt={displayName} />
+                              <AvatarFallback className="text-[0.6rem] font-medium">
+                                {getInitials(displayName)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate text-xs">
+                              {displayName}
+                            </span>
+                          </div>
+                        );
+                      }}
+                      renderSelectedValue={({ option, label }) => {
+                        const avatarUrl = getInstructorAvatarUrl(
+                          option?.avatarId
+                        );
+                        const displayName = option?.name ?? label;
+
+                        return (
+                          <span className="flex min-w-0 items-center gap-2">
+                            <Avatar className="size-5 shrink-0">
+                              <AvatarImage src={avatarUrl} alt={displayName} />
+                              <AvatarFallback className="text-[0.6rem] font-medium">
+                                {getInitials(displayName)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate">{displayName}</span>
+                          </span>
+                        );
+                      }}
                     />
                     {/* Lista de instrutores selecionados */}
                     {selectedInstructorIds.length > 0 && (
@@ -2976,20 +3045,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               key={sid}
                               className="flex items-center gap-2 rounded-md border bg-muted/20 px-2 py-1"
                             >
-                              <Avatar className="size-6 shrink-0">
-                                <AvatarImage
-                                  src={undefined}
-                                  alt={displayName}
-                                />
-                                <AvatarFallback className="text-[0.6rem] font-medium">
-                                  {displayName
-                                    .split(' ')
-                                    .slice(0, 2)
-                                    .map((n: string) => n[0])
-                                    .join('')
-                                    .toUpperCase()}
-                                </AvatarFallback>
-                              </Avatar>
+                              {(() => {
+                                const avatarUrl = getInstructorAvatarUrl(
+                                  inst?.avatarId
+                                );
+                                return (
+                                  <Avatar className="size-6 shrink-0">
+                                    <AvatarImage
+                                      src={avatarUrl}
+                                      alt={displayName}
+                                    />
+                                    <AvatarFallback className="text-[0.6rem] font-medium">
+                                      {getInitials(displayName)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                );
+                              })()}
                               <span className="text-xs flex-1 truncate">
                                 {displayName}
                               </span>

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

@@ -62,6 +62,7 @@ export interface LessonInstructor {
   id: string;
   role?: 'lead' | 'assistant';
   name?: string;
+  avatarId?: number | null;
 }
 
 export interface TranscriptionSegment {

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

@@ -164,7 +164,11 @@ export function normalizeSession(raw: ApiSession, index: number): Session {
  */
 export function normalizeLesson(raw: ApiLesson, order = 0): Lesson {
   const instructors: LessonInstructor[] = (raw.instrutores ?? []).map(
-    (inst) => ({ id: String(inst.id), name: inst.name })
+    (inst) => ({
+      id: String(inst.id),
+      name: inst.name ?? inst.nome,
+      avatarId: inst.avatarId ?? null,
+    })
   );
 
   return {
@@ -210,7 +214,7 @@ export function normalizeStructureResponse(raw: ApiGetStructureResponse): {
   course: Course | null;
   sessions: Session[];
   lessons: Lesson[];
-  instructors: { id: number; name: string }[];
+  instructors: { id: number; name: string; avatarId?: number | null }[];
 } {
   const sessions = raw.sessoes.map((s, i) => normalizeSession(s, i));
 
@@ -227,7 +231,11 @@ export function normalizeStructureResponse(raw: ApiGetStructureResponse): {
     course: raw.curso ? normalizeCourse(raw.curso) : null,
     sessions,
     lessons,
-    instructors: raw.instructors ?? [],
+    instructors: (raw.instructors ?? []).map((instructor) => ({
+      id: Number(instructor.id),
+      name: instructor.name ?? instructor.nome ?? '',
+      avatarId: instructor.avatarId ?? null,
+    })),
   };
 }
 

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

@@ -52,8 +52,10 @@ export interface ApiCourseResource {
 
 /** Instructor linked to a lesson or available in the course pool. */
 export interface ApiLessonInstructor {
-  id: number;
-  name: string;
+  id: number | string;
+  name?: string;
+  nome?: string;
+  avatarId?: number | null;
 }
 
 /**

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

@@ -34,7 +34,7 @@ export interface CourseStructureCacheData {
   course: Course | null;
   sessions: Session[];
   lessons: Lesson[];
-  instructors: { id: number; name: string }[];
+  instructors: { id: number; name: string; avatarId?: number | null }[];
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -45,7 +45,7 @@ export interface CourseStructureQueryResult {
   course: Course | null;
   sessions: Session[];
   lessons: Lesson[];
-  instructors: { id: number; name: string }[];
+  instructors: { id: number; name: string; avatarId?: number | null }[];
   isLoading: boolean;
   isFetching: boolean;
   isError: boolean;