@hed-hog/lms 0.0.349 → 0.0.350

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

@@ -9,16 +9,22 @@ import {
   CheckCircle2,
   CircleDot,
   Clock,
+  Download,
+  File as FileIcon,
+  FileImage,
+  FileText,
   Layers,
   Loader2,
   Plus,
   Save,
   Undo2,
+  UploadCloud,
   Video,
+  X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -56,6 +62,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
@@ -71,9 +78,16 @@ import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
 import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
 import { CourseMediaCard } from '../../_components/CourseMediaCard';
 import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
+import {
+  deleteFile,
+  getCourseResources,
+  updateCourseResources,
+  uploadFile,
+} from '../_data/services/course-structure.service';
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { courseStructureQueryKey } from '../_data/use-course-structure-query';
 import { useStructureStore } from './store';
+import { Resource } from './types';
 
 // ── API types (local to this component) ──────────────────────────────────────
 
@@ -119,6 +133,9 @@ type ApiCourseDetail = {
     aspectRatio: string | null;
   } | null;
   certificateModel?: string | null;
+  operationsProjectId?: number | null;
+  operationsProjectCode?: string | null;
+  operationsProjectName?: string | null;
 };
 
 type ApiCategory = { id: number; slug: string; name: string };
@@ -165,6 +182,27 @@ type ApiCertificateTemplateList = {
   pageSize: number;
   lastPage?: number;
 };
+type ApiOperationsProjectOption = {
+  id: number;
+  code?: string | null;
+  name: string;
+  label?: string;
+  clientName?: string | null;
+  status?: string;
+};
+
+type CourseResourceApi = {
+  id: number;
+  nome: string;
+  fileId?: number | null;
+  tipo?: string | null;
+  publico?: boolean;
+};
+
+type CourseResourceItem = Resource & {
+  fileId?: number | null;
+};
+
 type Locale = { id?: number; code: string; name: string };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -248,6 +286,37 @@ function getInstructorAvatarUrl(avatarId?: number | null) {
     : null;
 }
 
+function getResourceIcon(type: string): typeof FileIcon {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return FileText;
+  if (type.startsWith('image/')) return FileImage;
+  return FileIcon;
+}
+
+function getResourceIconColor(type: string): string {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return 'text-red-500';
+  if (type.startsWith('image/')) return 'text-blue-500';
+  return 'text-muted-foreground';
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function mapApiCourseResourceToLocal(
+  item: CourseResourceApi
+): CourseResourceItem {
+  return {
+    id: String(item.id),
+    fileId: item.fileId ?? null,
+    name: item.nome,
+    size: '',
+    type: item.tipo ?? 'file',
+    public: item.publico ?? true,
+  };
+}
+
 // ── Schema ────────────────────────────────────────────────────────────────────
 
 function buildSchema(t: (key: string) => string) {
@@ -270,6 +339,7 @@ function buildSchema(t: (key: string) => string) {
     status: z.enum(['ativo', 'rascunho', 'arquivado']),
     tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
     categorias: z.array(z.string()).optional().default([]),
+    operationsProjectId: z.string().optional(),
     primaryColor: z
       .string()
       .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
@@ -337,6 +407,13 @@ export function EditorCourse() {
   >([]);
   const [persistedCertificateModel, setPersistedCertificateModel] =
     useState('');
+  const [courseResources, setCourseResources] = useState<CourseResourceItem[]>(
+    []
+  );
+  const [resourcesDragOver, setResourcesDragOver] = useState(false);
+  const [isUploadingResources, setIsUploadingResources] = useState(false);
+  const [isSavingResources, setIsSavingResources] = useState(false);
+  const resourcesInputRef = useRef<HTMLInputElement>(null);
 
   // ── Queries ─────────────────────────────────────────────────────────────────
   const { data: apiCourse, refetch: refetchCourse } = useQuery<ApiCourseDetail>(
@@ -412,7 +489,7 @@ export function EditorCourse() {
       >({
         url: '/lms/certificates/templates',
         method: 'GET',
-        params: { page: 1, pageSize: 100 },
+        params: { page: 1, pageSize: 100, status: 'all' },
       });
       const payload = response.data;
       if (Array.isArray(payload))
@@ -428,6 +505,26 @@ export function EditorCourse() {
     initialData: { data: [], total: 0, page: 1, pageSize: 100, lastPage: 1 },
   });
 
+  const { data: operationsProjectOptionsData } = useQuery<
+    { data: ApiOperationsProjectOption[] } | ApiOperationsProjectOption[]
+  >({
+    queryKey: ['lms-course-operations-project-options'],
+    queryFn: async () => {
+      try {
+        const response = await request<
+          { data: ApiOperationsProjectOption[] } | ApiOperationsProjectOption[]
+        >({
+          url: '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc',
+          method: 'GET',
+        });
+        return response.data;
+      } catch {
+        return { data: [] };
+      }
+    },
+    initialData: { data: [] },
+  });
+
   // ── Save mutation ───────────────────────────────────────────────────────────
   const { mutate: saveCourse, isPending: saving } = useMutation({
     mutationFn: async (data: CourseEditFormValues) => {
@@ -455,6 +552,9 @@ export function EditorCourse() {
           isListed: data.listado,
           certificateModel: data.modeloCertificado.trim() || null,
           instructorIds: (data.instrutores ?? []).map(Number),
+          operationsProjectId: data.operationsProjectId
+            ? Number(data.operationsProjectId)
+            : null,
         },
       });
       return data;
@@ -495,6 +595,7 @@ export function EditorCourse() {
       status: 'rascunho',
       tipoOferta: 'sob_demanda',
       categorias: [],
+      operationsProjectId: '',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
       instrutores: [],
@@ -556,6 +657,35 @@ export function EditorCourse() {
     );
   }, [categoryListData, createdCategoryOptions]);
 
+  const projectOptions = useMemo<PickerOption[]>(() => {
+    const payload = Array.isArray(operationsProjectOptionsData)
+      ? operationsProjectOptionsData
+      : (operationsProjectOptionsData?.data ?? []);
+
+    const currentOption =
+      apiCourse?.operationsProjectId && apiCourse?.operationsProjectName
+        ? [
+            {
+              value: String(apiCourse.operationsProjectId),
+              label: apiCourse.operationsProjectName,
+              description: apiCourse.operationsProjectCode ?? null,
+            },
+          ]
+        : [];
+
+    const remoteOptions = payload.map((project) => ({
+      value: String(project.id),
+      label: project.name,
+      description: project.code ?? project.clientName ?? null,
+      meta: project.status ?? null,
+    }));
+
+    return [...currentOption, ...remoteOptions].filter(
+      (item, index, list) =>
+        list.findIndex((candidate) => candidate.value === item.value) === index
+    );
+  }, [apiCourse, operationsProjectOptionsData]);
+
   const instructorOptions = useMemo(() => {
     const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
       value: String(item.id),
@@ -594,6 +724,64 @@ export function EditorCourse() {
     (l) => l.visibility === 'publico' || l.status === 'publicada'
   ).length;
 
+  const formValues = form.watch();
+  const descriptionText = String(formValues.descricaoPublica ?? '')
+    .replace(/<[^>]+>/g, '')
+    .trim();
+  const checklistItems = [
+    {
+      id: 'title',
+      label: t('structureEditor.publishChecklist.items.title'),
+      done: formValues.tituloComercial.trim().length >= 3,
+      required: true,
+    },
+    {
+      id: 'description',
+      label: t('structureEditor.publishChecklist.items.description'),
+      done: descriptionText.length > 0,
+      required: true,
+    },
+    {
+      id: 'media',
+      label: t('structureEditor.publishChecklist.items.media'),
+      done: Boolean(apiCourse?.logoFileId || apiCourse?.bannerFileId),
+      required: true,
+    },
+    {
+      id: 'session',
+      label: t('structureEditor.publishChecklist.items.session'),
+      done: sessions.length > 0,
+      required: true,
+    },
+    {
+      id: 'lesson',
+      label: t('structureEditor.publishChecklist.items.lesson'),
+      done: lessons.length > 0,
+      required: true,
+    },
+    {
+      id: 'published-lessons',
+      label: t('structureEditor.publishChecklist.items.publishedLessons'),
+      done: publishedCount > 0,
+      required: true,
+    },
+    {
+      id: 'certificate',
+      label: t('structureEditor.publishChecklist.items.certificate'),
+      done:
+        !formValues.certificado ||
+        String(formValues.modeloCertificado ?? '').trim().length > 0,
+      required: formValues.certificado,
+    },
+  ];
+  const requiredChecklist = checklistItems.filter((item) => item.required);
+  const completedRequired = requiredChecklist.filter(
+    (item) => item.done
+  ).length;
+  const isReadyToPublish =
+    requiredChecklist.length > 0 &&
+    completedRequired === requiredChecklist.length;
+
   // ── Effects ──────────────────────────────────────────────────────────────────
   useEffect(() => {
     if (!apiCourse) return;
@@ -610,6 +798,9 @@ export function EditorCourse() {
       status: toPtStatus(apiCourse.status),
       tipoOferta: toPtOfferingType(apiCourse.offeringType),
       categorias: apiCourse.categories ?? [],
+      operationsProjectId: apiCourse.operationsProjectId
+        ? String(apiCourse.operationsProjectId)
+        : '',
       primaryColor: apiCourse.primaryColor || '#1D4ED8',
       secondaryColor: apiCourse.secondaryColor || '#111827',
       instrutores: (apiCourse.instructorIds ?? []).map(String),
@@ -643,6 +834,138 @@ export function EditorCourse() {
     });
   }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
 
+  useEffect(() => {
+    if (!courseId) return;
+
+    let active = true;
+
+    void getCourseResources(request, courseId)
+      .then((items) => {
+        if (!active) return;
+        setCourseResources(items.map(mapApiCourseResourceToLocal));
+      })
+      .catch(() => {
+        if (!active) return;
+        setCourseResources([]);
+        toast.error('Nao foi possivel carregar os recursos do curso.');
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [courseId, request]);
+
+  async function syncCourseResources(nextResources: CourseResourceItem[]) {
+    setIsSavingResources(true);
+    try {
+      const saved = await updateCourseResources(request, courseId, {
+        recursos: nextResources.map((item) => ({
+          nome: item.name,
+          ...(typeof item.fileId === 'number' && item.fileId > 0
+            ? { fileId: item.fileId }
+            : {}),
+          ...(item.type ? { tipo: item.type } : {}),
+          publico: item.public,
+        })),
+      });
+
+      setCourseResources(saved.map(mapApiCourseResourceToLocal));
+      toast.success('Recursos do curso atualizados.');
+    } catch {
+      toast.error('Nao foi possivel salvar os recursos do curso.');
+      void getCourseResources(request, courseId)
+        .then((items) =>
+          setCourseResources(items.map(mapApiCourseResourceToLocal))
+        )
+        .catch(() => undefined);
+    } finally {
+      setIsSavingResources(false);
+    }
+  }
+
+  async function handleCourseResourceFiles(files: File[]) {
+    if (files.length === 0) return;
+
+    setIsUploadingResources(true);
+    try {
+      const results = await Promise.allSettled(
+        files.map((file) =>
+          uploadFile(request, file, 'lms/courses/resources').then(
+            (uploaded): CourseResourceItem => ({
+              id: `new-${uploaded.id}`,
+              fileId: uploaded.id,
+              name: file.name,
+              size: formatFileSize(file.size),
+              type: file.type || file.name.split('.').pop() || 'file',
+              public: true,
+            })
+          )
+        )
+      );
+
+      const succeeded = results
+        .filter(
+          (result): result is PromiseFulfilledResult<CourseResourceItem> =>
+            result.status === 'fulfilled'
+        )
+        .map((result) => result.value);
+
+      const failedCount = results.filter(
+        (result) => result.status === 'rejected'
+      ).length;
+
+      if (failedCount > 0) {
+        toast.error(`Falha ao enviar ${failedCount} arquivo(s).`);
+      }
+
+      if (succeeded.length > 0) {
+        const nextResources = [...courseResources, ...succeeded];
+        await syncCourseResources(nextResources);
+      }
+    } finally {
+      setIsUploadingResources(false);
+    }
+  }
+
+  async function handleRemoveCourseResource(item: CourseResourceItem) {
+    const nextResources = courseResources.filter(
+      (resource) => resource.id !== item.id
+    );
+    await syncCourseResources(nextResources);
+
+    if (item.fileId) {
+      try {
+        await deleteFile(request, item.fileId);
+      } catch {
+        toast.error(
+          'Recurso removido do curso, mas nao foi possivel apagar o arquivo fisico.'
+        );
+      }
+    }
+  }
+
+  async function handleDownloadCourseResource(item: CourseResourceItem) {
+    if (!item.fileId) {
+      toast.error('Recurso sem arquivo para download.');
+      return;
+    }
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${item.fileId}`,
+        method: 'PUT',
+      });
+      const url = response?.data?.url;
+      if (!url) {
+        toast.error('Nao foi possivel gerar o link de download.');
+        return;
+      }
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      toast.error('Nao foi possivel baixar o recurso.');
+    }
+  }
+
   // ── File handlers ────────────────────────────────────────────────────────────
   async function openUploadedFile(fileId?: number | null) {
     if (!fileId) return;
@@ -967,20 +1290,33 @@ export function EditorCourse() {
           onValueChange={setActiveTab}
           className="flex flex-col flex-1 min-h-0"
         >
-          <TabsList className="mx-3 mt-3 h-auto shrink-0 grid w-[calc(100%-1.5rem)] grid-cols-4 rounded-lg bg-muted/80 p-1">
-            {(['estrutura', 'sobre', 'midia', 'extra'] as const).map((tab) => (
+          <TabsList className="mx-3 mt-3 h-auto shrink-0 grid w-[calc(100%-1.5rem)] grid-cols-6 rounded-lg bg-muted/80 p-1">
+            {(
+              [
+                'estrutura',
+                'sobre',
+                'midia',
+                'recursos',
+                'extra',
+                'publicacao',
+              ] as const
+            ).map((tab) => (
               <TabsTrigger
                 key={tab}
                 value={tab}
                 className="h-8 px-2 text-xs font-medium"
               >
                 {tab === 'estrutura'
-                  ? 'Estrutura'
+                  ? t('structureEditor.tabs.structure')
                   : tab === 'sobre'
-                    ? 'Sobre'
+                    ? t('structureEditor.tabs.about')
                     : tab === 'midia'
-                      ? 'Mídia'
-                      : 'Extra'}
+                      ? t('structureEditor.tabs.media')
+                      : tab === 'recursos'
+                        ? t('structureEditor.tabs.resources')
+                        : tab === 'extra'
+                          ? t('structureEditor.tabs.extra')
+                          : t('structureEditor.tabs.publish')}
               </TabsTrigger>
             ))}
           </TabsList>
@@ -1130,6 +1466,7 @@ export function EditorCourse() {
                     form={form}
                     t={t}
                     categoryOptions={categoryOptions}
+                    projectOptions={projectOptions}
                     instructorOptions={instructorOptions}
                     onCreateCategory={handleCreateCategory}
                     onCreateInstructor={handleCreateInstructor}
@@ -1194,6 +1531,169 @@ export function EditorCourse() {
                   />
                 </TabsContent>
 
+                {/* ── Tab: Recursos ─────────────────────────────────────── */}
+                <TabsContent
+                  value="recursos"
+                  className="mt-0 flex flex-col gap-3"
+                >
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Recursos para download do curso
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Soltar arquivo ou clicar para selecionar"
+                        aria-disabled={
+                          isUploadingResources || isSavingResources
+                        }
+                        onDragOver={(event) => {
+                          event.preventDefault();
+                          if (!isUploadingResources && !isSavingResources)
+                            setResourcesDragOver(true);
+                        }}
+                        onDragLeave={() => setResourcesDragOver(false)}
+                        onDrop={(event) => {
+                          event.preventDefault();
+                          setResourcesDragOver(false);
+                          if (!isUploadingResources && !isSavingResources) {
+                            void handleCourseResourceFiles(
+                              Array.from(event.dataTransfer.files)
+                            );
+                          }
+                        }}
+                        onClick={() => {
+                          if (!isUploadingResources && !isSavingResources) {
+                            resourcesInputRef.current?.click();
+                          }
+                        }}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault();
+                            if (!isUploadingResources && !isSavingResources) {
+                              resourcesInputRef.current?.click();
+                            }
+                          }
+                        }}
+                        className={cn(
+                          'flex flex-col items-center justify-center gap-2 py-7 rounded-lg border-2 border-dashed transition-colors select-none',
+                          isUploadingResources || isSavingResources
+                            ? 'cursor-wait border-border opacity-60'
+                            : 'cursor-pointer',
+                          !isUploadingResources &&
+                            !isSavingResources &&
+                            resourcesDragOver
+                            ? 'border-primary/70 bg-primary/5'
+                            : !isUploadingResources && !isSavingResources
+                              ? 'border-border hover:border-primary/40 hover:bg-muted/30'
+                              : ''
+                        )}
+                      >
+                        {isUploadingResources || isSavingResources ? (
+                          <Loader2 className="size-7 animate-spin text-muted-foreground/50" />
+                        ) : (
+                          <UploadCloud
+                            className={cn(
+                              'size-7 transition-colors',
+                              resourcesDragOver
+                                ? 'text-primary'
+                                : 'text-muted-foreground/50'
+                            )}
+                          />
+                        )}
+                        <div className="text-center">
+                          <p className="text-xs font-medium">
+                            {isUploadingResources
+                              ? 'Enviando arquivos...'
+                              : isSavingResources
+                                ? 'Salvando recursos...'
+                                : 'Arraste arquivos para adicionar'}
+                          </p>
+                          {!isUploadingResources && !isSavingResources && (
+                            <p className="text-xs text-muted-foreground">
+                              Clique para selecionar arquivos
+                            </p>
+                          )}
+                        </div>
+                        <input
+                          ref={resourcesInputRef}
+                          type="file"
+                          multiple
+                          className="hidden"
+                          onChange={(event) => {
+                            if (event.target.files) {
+                              void handleCourseResourceFiles(
+                                Array.from(event.target.files)
+                              );
+                              event.target.value = '';
+                            }
+                          }}
+                        />
+                      </div>
+
+                      {courseResources.length === 0 ? (
+                        <p className="text-center text-xs text-muted-foreground py-1">
+                          Nenhum recurso de curso cadastrado ainda.
+                        </p>
+                      ) : (
+                        <div className="flex flex-col gap-1">
+                          {courseResources.map((item) => {
+                            const ItemIcon = getResourceIcon(item.type);
+                            return (
+                              <div
+                                key={item.id}
+                                className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+                              >
+                                <ItemIcon
+                                  className={cn(
+                                    'size-3.5 shrink-0',
+                                    getResourceIconColor(item.type)
+                                  )}
+                                />
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-xs truncate font-medium">
+                                    {item.name}
+                                  </p>
+                                  <p className="text-[0.65rem] text-muted-foreground">
+                                    {item.size || 'Arquivo anexado'}
+                                  </p>
+                                </div>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                                  onClick={() =>
+                                    void handleDownloadCourseResource(item)
+                                  }
+                                  aria-label={`Baixar ${item.name}`}
+                                >
+                                  <Download className="size-3" />
+                                </Button>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                  onClick={() =>
+                                    void handleRemoveCourseResource(item)
+                                  }
+                                  aria-label={`Remover ${item.name}`}
+                                >
+                                  <X className="size-3" />
+                                </Button>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+
                 {/* ── Tab: Extra ──────────────────────────────────────────── */}
                 <TabsContent value="extra" className="mt-0 flex flex-col gap-3">
                   <CourseCertificateCard
@@ -1208,6 +1708,81 @@ export function EditorCourse() {
                     onDelete={() => setDeleteDialogOpen(true)}
                   />
                 </TabsContent>
+
+                {/* ── Tab: Publicação ─────────────────────────────────────── */}
+                <TabsContent
+                  value="publicacao"
+                  className="mt-0 flex flex-col gap-3"
+                >
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        {t('structureEditor.publishChecklist.title')}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      {checklistItems.map((item) => (
+                        <div
+                          key={item.id}
+                          className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
+                        >
+                          {item.done ? (
+                            <CheckCircle2 className="size-4 shrink-0 text-emerald-500" />
+                          ) : (
+                            <AlertTriangle className="size-4 shrink-0 text-amber-500" />
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <p className="text-xs font-medium truncate">
+                              {item.label}
+                            </p>
+                            {!item.done && (
+                              <p className="text-[0.65rem] text-muted-foreground">
+                                {item.required
+                                  ? t(
+                                      'structureEditor.publishChecklist.required'
+                                    )
+                                  : t(
+                                      'structureEditor.publishChecklist.recommended'
+                                    )}
+                              </p>
+                            )}
+                          </div>
+                          <Badge
+                            variant={item.done ? 'default' : 'secondary'}
+                            className="text-[0.65rem]"
+                          >
+                            {item.done
+                              ? t('structureEditor.publishChecklist.done')
+                              : t('structureEditor.publishChecklist.missing')}
+                          </Badge>
+                        </div>
+                      ))}
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        {t('structureEditor.publishChecklist.statusTitle')}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex items-center justify-between gap-2">
+                      <p className="text-xs text-muted-foreground">
+                        {t('structureEditor.publishChecklist.statusProgress', {
+                          completed: completedRequired,
+                          total: requiredChecklist.length,
+                        })}
+                      </p>
+                      <Badge
+                        variant={isReadyToPublish ? 'default' : 'secondary'}
+                      >
+                        {isReadyToPublish
+                          ? t('structureEditor.publishChecklist.ready')
+                          : t('structureEditor.publishChecklist.notReady')}
+                      </Badge>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
               </div>
             </ScrollArea>
           </div>