@hed-hog/lms 0.0.355 → 0.0.358

package/hedhog/frontend/app/courses/[id]/structure/_components/confirm-dialog.tsx.ejs

@@ -16,7 +16,7 @@ import { useStructureStore } from './store';
 export function ConfirmDialog() {
   const t = useTranslations('lms.CoursesPage.StructurePage.confirmDialog');
   const confirmDialog = useStructureStore((s) => s.confirmDialog);
-  const closeConfirm  = useStructureStore((s) => s.closeConfirm);
+  const closeConfirm = useStructureStore((s) => s.closeConfirm);
 
   function handleConfirm() {
     confirmDialog.onConfirm?.();
@@ -24,21 +24,32 @@ export function ConfirmDialog() {
   }
 
   return (
-    <AlertDialog open={confirmDialog.open} onOpenChange={(open) => !open && closeConfirm()}>
+    <AlertDialog
+      open={confirmDialog.open}
+      onOpenChange={(open) => !open && closeConfirm()}
+    >
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{confirmDialog.title}</AlertDialogTitle>
           {confirmDialog.description && (
-            <AlertDialogDescription>{confirmDialog.description}</AlertDialogDescription>
+            <AlertDialogDescription>
+              {confirmDialog.description}
+            </AlertDialogDescription>
           )}
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel onClick={closeConfirm}>{t('cancel')}</AlertDialogCancel>
+          <AlertDialogCancel onClick={closeConfirm}>
+            {t('cancel')}
+          </AlertDialogCancel>
           <AlertDialogAction
             onClick={handleConfirm}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            className={
+              confirmDialog.destructive
+                ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
+                : undefined
+            }
           >
-            {t('confirm')}
+            {confirmDialog.confirmText || t('confirm')}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

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';
 
@@ -245,13 +246,20 @@ function toPtStatus(
   status: ApiCourseDetail['status']
 ): CourseEditFormValues['status'] {
   const n = normalizeEnumValue(status);
-  if (n === 'published' || n === 'active' || n === 'ativo') return 'ativo';
+  if (
+    n === 'published' ||
+    n === 'active' ||
+    n === 'ativo' ||
+    n === 'publicado'
+  ) {
+    return 'publicado';
+  }
   if (n === 'archived' || n === 'arquivado') return 'arquivado';
   return 'rascunho';
 }
 
 function toApiStatus(status: CourseEditFormValues['status']) {
-  if (status === 'ativo') return 'published';
+  if (status === 'publicado') return 'published';
   if (status === 'arquivado') return 'archived';
   return 'draft';
 }
@@ -350,7 +358,7 @@ function buildSchema(t: (key: string) => string) {
     objetivos: z.string().optional(),
     publicoAlvo: z.string().optional(),
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']),
-    status: z.enum(['ativo', 'rascunho', 'arquivado']),
+    status: z.enum(['publicado', 'rascunho', 'arquivado']),
     tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
     localeId: z.string().optional().default(''),
     categorias: z.array(z.string()).optional().default([]),
@@ -544,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) => {
@@ -596,7 +623,7 @@ export function EditorCourse() {
         slug: data.slug,
         name: data.nomeInterno,
         description: data.descricaoPublica,
-        published: data.status === 'ativo',
+        published: data.status === 'publicado',
       });
       void queryClient.invalidateQueries({
         queryKey: courseStructureQueryKey(courseId),
@@ -653,7 +680,7 @@ export function EditorCourse() {
   );
   const STATUS_OPTIONS = useMemo(
     () => [
-      { value: 'ativo', label: t('status.active') },
+      { value: 'publicado', label: t('status.published') },
       { value: 'rascunho', label: t('status.draft') },
       { value: 'arquivado', label: t('status.archived') },
     ],
@@ -1366,7 +1393,7 @@ export function EditorCourse() {
   }
 
   function onSubmit(data: CourseEditFormValues) {
-    if (data.status === 'ativo') {
+    if (data.status === 'publicado') {
       const requiredProfileIds = new Set(linkedProfileIds);
       const invalidLesson = lessons.find((lesson) => {
         if (
@@ -1537,7 +1564,7 @@ export function EditorCourse() {
         >
           <TabsList
             className={cn(
-              'mx-3 mt-3 h-auto shrink-0 w-[calc(100%-1.5rem)] rounded-lg bg-muted/80 p-1',
+              'mt-0 h-auto w-full shrink-0 rounded-none border-b bg-muted/50 px-2 py-1 sm:px-3',
               'flex items-center gap-1 overflow-x-auto overflow-y-hidden whitespace-nowrap',
               isMobile
                 ? 'touch-pan-x snap-x snap-mandatory [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/35'
@@ -1552,6 +1579,7 @@ export function EditorCourse() {
                 'recursos',
                 'extra',
                 ...(showVideoTab ? ['videos'] : []),
+                ...(showOperationsTab ? ['operacoes'] : []),
                 'publicacao',
               ] as const
             ).map((tab) => (
@@ -1577,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>
@@ -2264,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"