@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/exams/[id]/questions/page.tsx.ejs

@@ -5,7 +5,10 @@ import {
   Page,
   PageHeader,
   PaginationFooter,
+  SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -17,8 +20,30 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Field, FieldLabel } from '@/components/ui/field';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
@@ -29,7 +54,15 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import {
   closestCenter,
   DndContext,
@@ -47,6 +80,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
@@ -59,6 +93,8 @@ import {
   Copy,
   FileCheck,
   GripVertical,
+  Loader2,
+  MoreHorizontal,
   Pencil,
   Plus,
   Save,
@@ -66,27 +102,94 @@ import {
   X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useParams, usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
 interface Alternativa {
-  id: string;
+  id: string | number;
   texto: string;
   correta: boolean;
 }
 
-interface Questao {
+interface FillBlankAnswer {
+  id: string;
+  answer: string;
+  alternativesText: string;
+}
+
+interface MatchingPair {
   id: string;
+  leftText: string;
+  rightText: string;
+}
+
+interface Questao {
+  id: number;
+  examQuestionId: number;
+  order: number;
+  tipo: ExamQuestionType;
   enunciado: string;
   pontuacao: number;
   alternativas: Alternativa[];
+  fillBlankAnswers: FillBlankAnswer[];
+  matchingPairs: MatchingPair[];
 }
 
+type ExamQuestionType =
+  | 'multiple_choice'
+  | 'true_false'
+  | 'essay'
+  | 'fill_blank'
+  | 'matching';
+
+type ViewMode = 'cards' | 'list';
+
+const OBJECTIVE_QUESTION_TYPES: ExamQuestionType[] = [
+  'multiple_choice',
+  'true_false',
+];
+
+type ApiExamQuestionAlternative = {
+  id: number;
+  text: string;
+  isCorrect: boolean;
+};
+
+type ApiExamQuestion = {
+  id: number;
+  examQuestionId: number;
+  order: number;
+  questionType: ExamQuestionType;
+  statement: string;
+  points: number;
+  alternatives: ApiExamQuestionAlternative[];
+  fillBlankAnswers?: Array<{
+    answer: string;
+    alternatives?: string[];
+  }>;
+  matchingPairs?: Array<{
+    id: string;
+    leftText: string;
+    rightText: string;
+  }>;
+};
+
+type ApiExamQuestionsResponse = {
+  exam: {
+    id: number;
+    code: string;
+    title: string;
+  };
+  questionCount: number;
+  data: ApiExamQuestion[];
+};
+
 type QuestaoForm = {
   enunciado: string;
+  questionType: ExamQuestionType;
   pontuacao: number;
 };
 
@@ -94,86 +197,38 @@ function generateId() {
   return Math.random().toString(36).substring(2, 9);
 }
 
-const initialQuestoes: Questao[] = [
-  {
-    id: 'q1',
-    enunciado:
-      'Qual hook do React e utilizado para gerenciar estado local em componentes funcionais?',
-    pontuacao: 2,
-    alternativas: [
-      { id: 'a1', texto: 'useEffect', correta: false },
-      { id: 'a2', texto: 'useState', correta: true },
-      { id: 'a3', texto: 'useContext', correta: false },
-      { id: 'a4', texto: 'useReducer', correta: false },
-    ],
-  },
-  {
-    id: 'q2',
-    enunciado: 'O que o Virtual DOM faz no React?',
-    pontuacao: 2,
-    alternativas: [
-      { id: 'a5', texto: 'Substitui o DOM real completamente', correta: false },
-      {
-        id: 'a6',
-        texto:
-          'Cria uma copia do DOM para comparar e atualizar apenas o necessario',
-        correta: true,
-      },
-      { id: 'a7', texto: 'Elimina a necessidade de HTML', correta: false },
-    ],
-  },
-  {
-    id: 'q3',
-    enunciado: 'Qual e a principal diferenca entre props e state?',
-    pontuacao: 3,
-    alternativas: [
-      {
-        id: 'a8',
-        texto: 'Props sao mutaveis, state sao imutaveis',
-        correta: false,
-      },
-      {
-        id: 'a9',
-        texto: 'Props sao passados pelo pai, state e gerenciado internamente',
-        correta: true,
-      },
-      { id: 'a10', texto: 'Nao ha diferenca', correta: false },
-      {
-        id: 'a11',
-        texto: 'State so existe em class components',
-        correta: false,
-      },
-      { id: 'a12', texto: 'Props nao podem ser funcoes', correta: false },
-    ],
-  },
-  {
-    id: 'q4',
-    enunciado:
-      'Qual metodo do ciclo de vida e equivalente ao useEffect com array de dependencias vazio?',
-    pontuacao: 2,
-    alternativas: [
-      { id: 'a13', texto: 'componentDidMount', correta: true },
-      { id: 'a14', texto: 'componentWillUpdate', correta: false },
-      { id: 'a15', texto: 'componentDidUpdate', correta: false },
-    ],
-  },
-  {
-    id: 'q5',
-    enunciado: 'Para que serve o React.memo?',
-    pontuacao: 1,
-    alternativas: [
-      { id: 'a16', texto: 'Para memorizar valores computados', correta: false },
-      {
-        id: 'a17',
-        texto: 'Para evitar re-renderizacoes desnecessarias de componentes',
-        correta: true,
-      },
-    ],
-  },
-];
+function mapApiQuestion(question: ApiExamQuestion): Questao {
+  return {
+    id: question.id,
+    examQuestionId: question.examQuestionId,
+    order: question.order,
+    tipo: question.questionType,
+    enunciado: question.statement,
+    pontuacao: question.points,
+    alternativas: question.alternatives.map((alternative) => ({
+      id: alternative.id,
+      texto: alternative.text,
+      correta: alternative.isCorrect,
+    })),
+    fillBlankAnswers: (question.fillBlankAnswers ?? []).map((item, index) => ({
+      id: `blank-${index + 1}`,
+      answer: item.answer,
+      alternativesText: (item.alternatives ?? []).join(', '),
+    })),
+    matchingPairs: (question.matchingPairs ?? []).map((pair, index) => ({
+      id: pair.id || `pair-${index + 1}`,
+      leftText: pair.leftText,
+      rightText: pair.rightText,
+    })),
+  };
+}
 
 const PAGE_SIZE_OPTIONS = [6, 12, 24];
 
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
 function SortableAlternativa({
   alt,
   index,
@@ -181,6 +236,7 @@ function SortableAlternativa({
   onChangeTexto,
   onRemove,
   canRemove,
+  disableTextInput,
 }: {
   alt: Alternativa;
   index: number;
@@ -188,6 +244,7 @@ function SortableAlternativa({
   onChangeTexto: (texto: string) => void;
   onRemove: () => void;
   canRemove: boolean;
+  disableTextInput?: boolean;
 }) {
   const t = useTranslations('lms.QuestionsPage');
   const {
@@ -231,6 +288,7 @@ function SortableAlternativa({
         onChange={(e) => onChangeTexto(e.target.value)}
         className="flex-1 border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
         placeholder={t('sheet.fields.alternativePlaceholder')}
+        disabled={disableTextInput}
       />
 
       <button
@@ -307,129 +365,202 @@ function SortableQuestao({
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
-      className={isDragging ? 'z-50' : ''}
+      className={`w-full ${isDragging ? 'z-50' : ''}`}
     >
-      <Card className="overflow-hidden">
+      <Card className="group relative overflow-hidden border-border/70 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md">
+        <div className="absolute inset-x-0 top-0 h-1 bg-primary/20" />
         {/* Question header */}
-        <div className="flex items-start gap-3 p-4 transition-colors hover:bg-muted/30">
-          <button
-            type="button"
-            className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
-            {...attributes}
-            {...listeners}
-            aria-label={t('question.dragQuestion')}
-          >
-            <GripVertical className="size-5" />
-          </button>
-
-          <div
-            className="flex min-w-0 flex-1 cursor-pointer items-start gap-3"
-            onClick={onToggleExpand}
-            role="button"
-            aria-expanded={isExpanded}
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onToggleExpand();
-              }
-            }}
-          >
-            <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-foreground text-sm font-bold text-background">
-              {qIndex + 1}
-            </div>
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium leading-relaxed">
-                {questao.enunciado}
-              </p>
-              <div className="mt-2 flex flex-wrap items-center gap-2">
-                <Badge variant="secondary" className="text-xs">
-                  {t('question.alternatives', {
-                    count: questao.alternativas.length,
-                  })}
-                </Badge>
-                <Badge variant="outline" className="text-xs">
-                  {questao.pontuacao === 1
-                    ? t('question.points', { score: questao.pontuacao })
-                    : t('question.pointsPlural', { score: questao.pontuacao })}
-                </Badge>
-              </div>
-            </div>
-            <div className="shrink-0">
-              {isExpanded ? (
-                <ChevronUp className="size-4 text-muted-foreground" />
-              ) : (
-                <ChevronDown className="size-4 text-muted-foreground" />
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Expanded content */}
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: 'auto', opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.25 }}
-              className="overflow-hidden"
+        <CardContent className="p-4">
+          <div className="flex items-start gap-3 transition-colors">
+            <button
+              type="button"
+              className="mt-0.5 cursor-grab touch-none text-muted-foreground"
+              {...attributes}
+              {...listeners}
+              aria-label={t('question.dragQuestion')}
             >
-              <Separator />
-              <div className="p-4">
-                <div className="flex flex-col gap-2">
-                  {questao.alternativas.map((alt, altIndex) => (
-                    <div
-                      key={alt.id}
-                      className={`flex items-center gap-3 rounded-lg border p-3 text-sm ${
-                        alt.correta
-                          ? 'border-foreground/20 bg-muted/50 font-medium'
-                          : ''
-                      }`}
-                    >
-                      <span className="flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
-                        {String.fromCharCode(65 + altIndex)}
-                      </span>
-                      <span className="flex-1">{alt.texto}</span>
-                      {alt.correta && (
-                        <Check className="size-4 shrink-0 text-foreground" />
-                      )}
-                    </div>
-                  ))}
+              <GripVertical className="size-5" />
+            </button>
+
+            <div
+              className="min-w-0 flex-1 cursor-pointer"
+              onClick={onToggleExpand}
+              role="button"
+              aria-expanded={isExpanded}
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onToggleExpand();
+                }
+              }}
+            >
+              <div className="mb-1 flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="line-clamp-2 text-sm font-semibold leading-snug text-foreground">
+                    {stripHtml(questao.enunciado)}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    #{qIndex + 1}
+                  </p>
                 </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-8 shrink-0 -mr-2 -mt-1"
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={t('table.actions.label')}
+                    >
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48">
+                    <DropdownMenuItem onClick={onEdit}>
+                      <Pencil className="size-3.5" />{' '}
+                      {t('question.actions.edit')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={onDuplicate}>
+                      <Copy className="mr-2 size-4" />{' '}
+                      {t('question.actions.duplicate')}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onClick={onDelete}
+                    >
+                      <Trash2 className="size-3.5" />{' '}
+                      {t('question.actions.delete')}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
 
-                <div className="mt-4 flex flex-wrap gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="gap-1.5"
-                    onClick={onEdit}
-                  >
-                    <Pencil className="size-3.5" /> {t('question.actions.edit')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="gap-1.5"
-                    onClick={onDuplicate}
-                  >
-                    <Copy className="size-3.5" />{' '}
-                    {t('question.actions.duplicate')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="gap-1.5 text-destructive hover:text-destructive"
-                    onClick={onDelete}
-                  >
-                    <Trash2 className="size-3.5" />{' '}
-                    {t('question.actions.delete')}
-                  </Button>
+              <div className="flex items-start justify-between gap-3">
+                <div className="mt-2 flex flex-wrap items-center gap-2">
+                  <Badge variant="outline" className="text-xs">
+                    {t(`question.types.${questao.tipo}`)}
+                  </Badge>
+                  <Badge variant="secondary" className="text-xs">
+                    {questao.tipo === 'fill_blank'
+                      ? t('question.fillBlankAnswers', {
+                          count: questao.fillBlankAnswers.length,
+                        })
+                      : questao.tipo === 'matching'
+                        ? t('question.matchingPairs', {
+                            count: questao.matchingPairs.length,
+                          })
+                        : t('question.alternatives', {
+                            count: questao.alternativas.length,
+                          })}
+                  </Badge>
+                  <Badge variant="outline" className="text-xs">
+                    {questao.pontuacao === 1
+                      ? t('question.points', { score: questao.pontuacao })
+                      : t('question.pointsPlural', {
+                          score: questao.pontuacao,
+                        })}
+                  </Badge>
+                </div>
+                <div className="shrink-0 pt-2">
+                  {isExpanded ? (
+                    <ChevronUp className="size-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="size-4 text-muted-foreground" />
+                  )}
                 </div>
               </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
+            </div>
+          </div>
+
+          {/* Expanded content */}
+          <AnimatePresence>
+            {isExpanded && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.25 }}
+                className="overflow-hidden"
+              >
+                <Separator />
+                <div className="p-4">
+                  <div className="flex flex-col gap-2">
+                    {questao.tipo === 'fill_blank' ? (
+                      questao.fillBlankAnswers.length > 0 ? (
+                        questao.fillBlankAnswers.map((item) => (
+                          <div
+                            key={item.id}
+                            className="rounded-lg border p-3 text-sm"
+                          >
+                            <p>
+                              <span className="font-medium">
+                                {t('sheet.fields.fillBlankExpectedAnswer')}:
+                              </span>{' '}
+                              {item.answer}
+                            </p>
+                            {item.alternativesText.length > 0 && (
+                              <p className="mt-1 text-xs text-muted-foreground">
+                                {t('sheet.fields.fillBlankAlternativeAnswers')}:{' '}
+                                {item.alternativesText}
+                              </p>
+                            )}
+                          </div>
+                        ))
+                      ) : (
+                        <div className="rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
+                          {t('question.noFillBlankAnswers')}
+                        </div>
+                      )
+                    ) : questao.tipo === 'matching' ? (
+                      questao.matchingPairs.length > 0 ? (
+                        questao.matchingPairs.map((pair) => (
+                          <div
+                            key={pair.id}
+                            className="rounded-lg border p-3 text-sm"
+                          >
+                            <p className="font-medium">{pair.leftText}</p>
+                            <p className="mt-1 text-muted-foreground">
+                              {pair.rightText}
+                            </p>
+                          </div>
+                        ))
+                      ) : (
+                        <div className="rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
+                          {t('question.noMatchingPairs')}
+                        </div>
+                      )
+                    ) : questao.alternativas.length > 0 ? (
+                      questao.alternativas.map((alt, altIndex) => (
+                        <div
+                          key={alt.id}
+                          className={`flex items-center gap-3 rounded-lg border p-3 text-sm ${
+                            alt.correta
+                              ? 'border-foreground/20 bg-muted/50 font-medium'
+                              : ''
+                          }`}
+                        >
+                          <span className="flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
+                            {String.fromCharCode(65 + altIndex)}
+                          </span>
+                          <span className="flex-1">{alt.texto}</span>
+                          {alt.correta && (
+                            <Check className="size-4 shrink-0 text-foreground" />
+                          )}
+                        </div>
+                      ))
+                    ) : (
+                      <div className="rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
+                        {t('question.noAlternatives')}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </CardContent>
       </Card>
     </motion.div>
   );
@@ -437,30 +568,80 @@ function SortableQuestao({
 
 export default function QuestoesPage() {
   const t = useTranslations('lms.QuestionsPage');
-  const { id } = useParams();
-  const pathname = usePathname();
-  const [loading, setLoading] = useState(true);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [questoes, setQuestoes] = useState<Questao[]>(initialQuestoes);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(6);
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const { request } = useApp();
+  const router = useRouter();
+  const { id } = useParams<{ id: string }>();
+  const examId = Number(id);
+  const isValidExamId = Number.isFinite(examId) && examId > 0;
+
+  const [questoes, setQuestoes] = useState<Questao[]>([]);
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
   const [sheetOpen, setSheetOpen] = useState(false);
   const [editingQuestao, setEditingQuestao] = useState<Questao | null>(null);
   const [sheetAlternativas, setSheetAlternativas] = useState<Alternativa[]>([]);
+  const [sheetFillBlankAnswers, setSheetFillBlankAnswers] = useState<
+    FillBlankAnswer[]
+  >([]);
+  const [sheetMatchingPairs, setSheetMatchingPairs] = useState<MatchingPair[]>(
+    []
+  );
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [questaoToDelete, setQuestaoToDelete] = useState<Questao | null>(null);
   const [hasChanges, setHasChanges] = useState(false);
+  const [buscaInput, setBuscaInput] = useState('');
+  const [debouncedBuscaInput, setDebouncedBuscaInput] = useState('');
+  const [filtroTipoInput, setFiltroTipoInput] = useState<
+    ExamQuestionType | 'todos'
+  >('todos');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:exam-questions:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
 
   const questaoSchema = z.object({
     enunciado: z.string().min(5, t('sheet.validation.statementMin')),
+    questionType: z.enum([
+      'multiple_choice',
+      'true_false',
+      'essay',
+      'fill_blank',
+      'matching',
+    ]),
     pontuacao: z.coerce.number().min(0.5, t('sheet.validation.scoreMin')),
   });
 
   const form = useForm<QuestaoForm>({
     resolver: zodResolver(questaoSchema),
-    defaultValues: { enunciado: '', pontuacao: 2 },
+    defaultValues: {
+      enunciado: '',
+      questionType: 'multiple_choice',
+      pontuacao: 1,
+    },
   });
+  const selectedQuestionType = form.watch('questionType');
+
+  const {
+    data: questionData,
+    isLoading,
+    isFetching,
+    refetch: refetchQuestions,
+  } = useQuery<ApiExamQuestionsResponse>({
+    queryKey: ['lms-exam-questions', examId],
+    enabled: isValidExamId,
+    queryFn: async () => {
+      const response = await request<ApiExamQuestionsResponse>({
+        url: `/lms/exams/${examId}/questions`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+  });
+
+  const loading = isLoading || isFetching;
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -468,18 +649,126 @@ export default function QuestoesPage() {
   );
 
   useEffect(() => {
-    const timer = setTimeout(() => setLoading(false), 600);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const totalPages = Math.max(1, Math.ceil(questoes.length / pageSize));
-  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
-  const paginatedQuestoes = questoes.slice(
-    (safePage - 1) * pageSize,
-    safePage * pageSize
-  );
+    if (!questionData) return;
+    setQuestoes(
+      (questionData.data ?? []).map((question) => mapApiQuestion(question))
+    );
+    setHasChanges(false);
+  }, [questionData]);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedBuscaInput(buscaInput.trim());
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [buscaInput]);
+
+  const filteredQuestoes = useMemo(() => {
+    const normalizedSearch = debouncedBuscaInput.toLowerCase();
+
+    return questoes.filter((questao) => {
+      const matchesType =
+        filtroTipoInput === 'todos' || questao.tipo === filtroTipoInput;
+      const matchesSearch =
+        normalizedSearch.length === 0 ||
+        questao.enunciado.toLowerCase().includes(normalizedSearch);
+
+      return matchesType && matchesSearch;
+    });
+  }, [debouncedBuscaInput, filtroTipoInput, questoes]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredQuestoes.length / pageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedQuestoes = useMemo(() => {
+    const startIndex = (safePage - 1) * pageSize;
+    return filteredQuestoes.slice(startIndex, startIndex + pageSize);
+  }, [filteredQuestoes, pageSize, safePage]);
+
+  const hasActiveFilters =
+    debouncedBuscaInput.length > 0 || filtroTipoInput !== 'todos';
+
+  function clearFilters() {
+    setBuscaInput('');
+    setDebouncedBuscaInput('');
+    setFiltroTipoInput('todos');
+    setCurrentPage(1);
+  }
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  useEffect(() => {
+    if (selectedQuestionType === 'fill_blank') {
+      setSheetAlternativas([]);
+      setSheetMatchingPairs([]);
+      setSheetFillBlankAnswers((prev) => {
+        if (prev.length > 0) {
+          return prev;
+        }
 
-  function toggleExpand(qId: string) {
+        return [{ id: generateId(), answer: '', alternativesText: '' }];
+      });
+      return;
+    }
+
+    if (selectedQuestionType === 'matching') {
+      setSheetAlternativas([]);
+      setSheetFillBlankAnswers([]);
+      setSheetMatchingPairs((prev) => {
+        if (prev.length >= 2) {
+          return prev;
+        }
+
+        return [
+          { id: generateId(), leftText: '', rightText: '' },
+          { id: generateId(), leftText: '', rightText: '' },
+        ];
+      });
+      return;
+    }
+
+    if (selectedQuestionType === 'essay') {
+      setSheetAlternativas([]);
+      setSheetFillBlankAnswers([]);
+      setSheetMatchingPairs([]);
+      return;
+    }
+
+    if (selectedQuestionType === 'true_false') {
+      setSheetFillBlankAnswers([]);
+      setSheetMatchingPairs([]);
+      setSheetAlternativas((prev) => {
+        if (editingQuestao?.tipo === 'true_false' && prev.length === 2) {
+          return prev;
+        }
+
+        return [
+          { id: 'true', texto: t('sheet.fields.trueLabel'), correta: true },
+          { id: 'false', texto: t('sheet.fields.falseLabel'), correta: false },
+        ];
+      });
+      return;
+    }
+
+    setSheetAlternativas((prev) => {
+      if (prev.length >= 2) {
+        return prev;
+      }
+
+      return [
+        { id: generateId(), texto: '', correta: true },
+        { id: generateId(), texto: '', correta: false },
+      ];
+    });
+    setSheetFillBlankAnswers([]);
+    setSheetMatchingPairs([]);
+  }, [editingQuestao?.tipo, selectedQuestionType, t]);
+
+  function toggleExpand(qId: number) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
       if (next.has(qId)) next.delete(qId);
@@ -490,44 +779,104 @@ export default function QuestoesPage() {
 
   function openCreateSheet() {
     setEditingQuestao(null);
-    form.reset({ enunciado: '', pontuacao: 2 });
+    form.reset({
+      enunciado: '',
+      questionType: 'multiple_choice',
+      pontuacao: 1,
+    });
     setSheetAlternativas([
       { id: generateId(), texto: '', correta: true },
       { id: generateId(), texto: '', correta: false },
     ]);
+    setSheetFillBlankAnswers([]);
+    setSheetMatchingPairs([]);
     setSheetOpen(true);
   }
 
   function openEditSheet(questao: Questao) {
     setEditingQuestao(questao);
-    form.reset({ enunciado: questao.enunciado, pontuacao: questao.pontuacao });
+    form.reset({
+      enunciado: questao.enunciado,
+      questionType: questao.tipo,
+      pontuacao: questao.pontuacao,
+    });
     setSheetAlternativas(questao.alternativas.map((a) => ({ ...a })));
+    setSheetFillBlankAnswers(
+      questao.fillBlankAnswers.map((item) => ({ ...item }))
+    );
+    setSheetMatchingPairs(questao.matchingPairs.map((item) => ({ ...item })));
     setSheetOpen(true);
   }
 
   function addAlternativa() {
+    if (selectedQuestionType !== 'multiple_choice') {
+      return;
+    }
+
     setSheetAlternativas((prev) => [
       ...prev,
       { id: generateId(), texto: '', correta: false },
     ]);
   }
 
-  function removeAlternativa(altId: string) {
+  function removeAlternativa(altId: string | number) {
     setSheetAlternativas((prev) => prev.filter((a) => a.id !== altId));
   }
 
-  function toggleCorreta(altId: string) {
+  function toggleCorreta(altId: string | number) {
     setSheetAlternativas((prev) =>
       prev.map((a) => ({ ...a, correta: a.id === altId }))
     );
   }
 
-  function updateAlternativaTexto(altId: string, texto: string) {
+  function updateAlternativaTexto(altId: string | number, texto: string) {
     setSheetAlternativas((prev) =>
       prev.map((a) => (a.id === altId ? { ...a, texto } : a))
     );
   }
 
+  function addFillBlankAnswer() {
+    setSheetFillBlankAnswers((prev) => [
+      ...prev,
+      { id: generateId(), answer: '', alternativesText: '' },
+    ]);
+  }
+
+  function removeFillBlankAnswer(id: string) {
+    setSheetFillBlankAnswers((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  function updateFillBlankAnswer(
+    id: string,
+    field: 'answer' | 'alternativesText',
+    value: string
+  ) {
+    setSheetFillBlankAnswers((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [field]: value } : item))
+    );
+  }
+
+  function addMatchingPair() {
+    setSheetMatchingPairs((prev) => [
+      ...prev,
+      { id: generateId(), leftText: '', rightText: '' },
+    ]);
+  }
+
+  function removeMatchingPair(id: string) {
+    setSheetMatchingPairs((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  function updateMatchingPair(
+    id: string,
+    field: 'leftText' | 'rightText',
+    value: string
+  ) {
+    setSheetMatchingPairs((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [field]: value } : item))
+    );
+  }
+
   function handleAltDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (over && active.id !== over.id) {
@@ -539,81 +888,174 @@ export default function QuestoesPage() {
     }
   }
 
-  function onSubmit(data: QuestaoForm) {
-    const hasCorreta = sheetAlternativas.some((a) => a.correta);
-    const allHaveText = sheetAlternativas.every(
-      (a) => a.texto.trim().length > 0
+  function handleMatchingPairDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setSheetMatchingPairs((items) => {
+        const oldIndex = items.findIndex((i) => i.id === active.id);
+        const newIndex = items.findIndex((i) => i.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  }
+
+  async function onSubmit(data: QuestaoForm) {
+    const requiresAlternatives = OBJECTIVE_QUESTION_TYPES.includes(
+      data.questionType
     );
 
-    if (!hasCorreta) {
-      toast.error(t('toasts.noCorrectAnswer'));
-      return;
+    if (requiresAlternatives) {
+      const hasCorreta = sheetAlternativas.some((a) => a.correta);
+      const allHaveText = sheetAlternativas.every(
+        (a) => a.texto.trim().length > 0
+      );
+
+      if (!hasCorreta) {
+        toast.error(t('toasts.noCorrectAnswer'));
+        return;
+      }
+      if (!allHaveText) {
+        toast.error(t('toasts.allMustHaveText'));
+        return;
+      }
+      if (sheetAlternativas.length < 2) {
+        toast.error(t('toasts.minAlternatives'));
+        return;
+      }
     }
-    if (!allHaveText) {
-      toast.error(t('toasts.allMustHaveText'));
-      return;
+
+    if (data.questionType === 'fill_blank') {
+      const normalizedFillBlank = sheetFillBlankAnswers.map((item) => ({
+        answer: item.answer.trim(),
+        alternatives: item.alternativesText
+          .split(',')
+          .map((value) => value.trim())
+          .filter((value) => value.length > 0),
+      }));
+
+      if (
+        normalizedFillBlank.length === 0 ||
+        normalizedFillBlank.some((item) => item.answer.length === 0)
+      ) {
+        toast.error(t('toasts.fillBlankNeedsAnswers'));
+        return;
+      }
     }
-    if (sheetAlternativas.length < 2) {
-      toast.error(t('toasts.minAlternatives'));
-      return;
+
+    if (data.questionType === 'matching') {
+      const normalizedPairs = sheetMatchingPairs.map((pair) => ({
+        id: pair.id.trim(),
+        leftText: pair.leftText.trim(),
+        rightText: pair.rightText.trim(),
+      }));
+
+      if (
+        normalizedPairs.length < 2 ||
+        normalizedPairs.some(
+          (pair) => pair.leftText.length === 0 || pair.rightText.length === 0
+        )
+      ) {
+        toast.error(t('toasts.matchingNeedsPairs'));
+        return;
+      }
     }
 
+    const payload = {
+      statement: data.enunciado,
+      questionType: data.questionType,
+      points: Math.max(1, Math.round(data.pontuacao)),
+      ...(requiresAlternatives && {
+        alternatives: sheetAlternativas.map((alternative) => ({
+          text: alternative.texto.trim(),
+          isCorrect: alternative.correta,
+        })),
+      }),
+      ...(data.questionType === 'fill_blank' && {
+        fillBlankAnswers: sheetFillBlankAnswers.map((item) => ({
+          answer: item.answer.trim(),
+          alternatives: item.alternativesText
+            .split(',')
+            .map((value) => value.trim())
+            .filter((value) => value.length > 0),
+        })),
+      }),
+      ...(data.questionType === 'matching' && {
+        matchingPairs: sheetMatchingPairs.map((pair) => ({
+          id: pair.id,
+          leftText: pair.leftText.trim(),
+          rightText: pair.rightText.trim(),
+        })),
+      }),
+    };
+
     if (editingQuestao) {
-      setQuestoes((prev) =>
-        prev.map((q) =>
-          q.id === editingQuestao.id
-            ? {
-                ...q,
-                enunciado: data.enunciado,
-                pontuacao: data.pontuacao,
-                alternativas: sheetAlternativas,
-              }
-            : q
-        )
-      );
+      await request({
+        url: `/lms/exams/${examId}/questions/${editingQuestao.id}`,
+        method: 'PATCH',
+        data: payload,
+      });
       toast.success(t('toasts.questionUpdated'));
     } else {
-      const nova: Questao = {
-        id: generateId(),
-        enunciado: data.enunciado,
-        pontuacao: data.pontuacao,
-        alternativas: sheetAlternativas,
-      };
-      setQuestoes((prev) => [...prev, nova]);
+      await request({
+        url: `/lms/exams/${examId}/questions`,
+        method: 'POST',
+        data: payload,
+      });
       toast.success(t('toasts.questionCreated'));
     }
-    setHasChanges(true);
+
+    await refetchQuestions();
     setSheetOpen(false);
   }
 
-  function confirmDelete() {
+  async function confirmDelete() {
     if (questaoToDelete) {
-      setQuestoes((prev) => prev.filter((q) => q.id !== questaoToDelete.id));
-      setHasChanges(true);
+      await request({
+        url: `/lms/exams/${examId}/questions/${questaoToDelete.id}`,
+        method: 'DELETE',
+      });
       toast.success(t('toasts.questionRemoved'));
       setQuestaoToDelete(null);
       setDeleteDialogOpen(false);
+      await refetchQuestions();
     }
   }
 
-  function duplicateQuestao(questao: Questao) {
-    const nova: Questao = {
-      ...questao,
-      id: generateId(),
-      enunciado: `${questao.enunciado}${t('copySuffix')}`,
-      alternativas: questao.alternativas.map((a) => ({
-        ...a,
-        id: generateId(),
-      })),
-    };
-    setQuestoes((prev) => {
-      const idx = prev.findIndex((q) => q.id === questao.id);
-      const next = [...prev];
-      next.splice(idx + 1, 0, nova);
-      return next;
+  async function duplicateQuestao(questao: Questao) {
+    await request({
+      url: `/lms/exams/${examId}/questions`,
+      method: 'POST',
+      data: {
+        statement: `${questao.enunciado}${t('copySuffix')}`,
+        questionType: questao.tipo,
+        points: Math.max(1, Math.round(questao.pontuacao)),
+        ...(OBJECTIVE_QUESTION_TYPES.includes(questao.tipo) && {
+          alternatives: questao.alternativas.map((alternative) => ({
+            text: alternative.texto,
+            isCorrect: alternative.correta,
+          })),
+        }),
+        ...(questao.tipo === 'fill_blank' && {
+          fillBlankAnswers: questao.fillBlankAnswers.map((item) => ({
+            answer: item.answer,
+            alternatives: item.alternativesText
+              .split(',')
+              .map((value) => value.trim())
+              .filter((value) => value.length > 0),
+          })),
+        }),
+        ...(questao.tipo === 'matching' && {
+          matchingPairs: questao.matchingPairs.map((pair) => ({
+            id: pair.id,
+            leftText: pair.leftText,
+            rightText: pair.rightText,
+          })),
+        }),
+      },
     });
-    setHasChanges(true);
+
     toast.success(t('toasts.questionDuplicated'));
+    await refetchQuestions();
   }
 
   function handleQuestionDragEnd(event: DragEndEvent) {
@@ -628,19 +1070,113 @@ export default function QuestoesPage() {
     }
   }
 
-  function handleSave() {
+  async function handleSave() {
+    await request({
+      url: `/lms/exams/${examId}/questions/order`,
+      method: 'PATCH',
+      data: {
+        questionIds: questoes.map((question) => question.id),
+      },
+    });
+
     setHasChanges(false);
     toast.success(t('toasts.changesSaved'));
+    await refetchQuestions();
   }
 
   const totalPontuacao = questoes.reduce((a, q) => a + q.pontuacao, 0);
+  const examCode = questionData?.exam?.code ?? `EX-${examId}`;
+  const objectiveQuestionsCount = questoes.filter((question) =>
+    OBJECTIVE_QUESTION_TYPES.includes(question.tipo)
+  ).length;
+  const stats: KpiCardItem[] = [
+    {
+      key: 'questions',
+      title: t('stats.questions'),
+      value: questoes.length,
+      description: questionData?.exam?.title ?? examCode,
+      icon: FileCheck,
+      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      accentClassName: 'from-sky-500/25 via-blue-500/10 to-transparent',
+      layout: 'compact',
+    },
+    {
+      key: 'total-score',
+      title: t('stats.totalScore'),
+      value: totalPontuacao,
+      description: t('sheet.fields.score'),
+      icon: Save,
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+      accentClassName: 'from-emerald-500/25 via-emerald-500/10 to-transparent',
+      layout: 'compact',
+    },
+    {
+      key: 'avg-alternatives',
+      title: t('stats.avgAlternatives'),
+      value:
+        questoes.length > 0
+          ? (
+              questoes.reduce((a, q) => a + q.alternativas.length, 0) /
+              questoes.length
+            ).toFixed(1)
+          : '0',
+      description: t('sheet.fields.alternatives'),
+      icon: CircleDot,
+      iconContainerClassName: 'bg-amber-500/10 text-amber-700',
+      accentClassName: 'from-amber-500/25 via-amber-500/10 to-transparent',
+      layout: 'compact',
+    },
+    {
+      key: 'objective-questions',
+      title: t('sheet.fields.questionType'),
+      value: objectiveQuestionsCount,
+      description: t('question.types.multiple_choice'),
+      icon: Check,
+      iconContainerClassName: 'bg-violet-500/10 text-violet-700',
+      accentClassName: 'from-violet-500/25 via-violet-500/10 to-transparent',
+      layout: 'compact',
+    },
+  ];
+
+  if (!isValidExamId) {
+    return (
+      <Page>
+        <PageHeader
+          title={t('title')}
+          description="O identificador da prova e invalido ou esta ausente."
+          breadcrumbs={[
+            {
+              label: t('breadcrumbs.home'),
+              href: '/',
+            },
+            {
+              label: t('breadcrumbs.exams'),
+              href: '/lms/exams',
+            },
+            {
+              label: t('breadcrumbs.questions'),
+            },
+          ]}
+        />
+
+        <EmptyState
+          icon={<AlertTriangle className="h-12 w-12" />}
+          title="Nao foi possivel localizar esta prova"
+          description="Confira o link acessado ou volte para a lista de provas."
+          actionLabel={t('breadcrumbs.exams')}
+          onAction={() => router.push('/lms/exams')}
+          className="py-20"
+        />
+      </Page>
+    );
+  }
 
   return (
     <Page>
       <PageHeader
         title={t('title')}
         description={t('description', {
-          code: 'EX-001',
+          code: examCode,
           count: questoes.length,
           total: totalPontuacao,
         })}
@@ -657,82 +1193,121 @@ export default function QuestoesPage() {
             label: t('breadcrumbs.questions'),
           },
         ]}
-        actions={
-          <div className="flex items-center gap-2">
-            <AnimatePresence>
-              {hasChanges && (
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.9 }}
-                >
-                  <Button
-                    onClick={handleSave}
-                    className="gap-2"
-                    variant="outline"
-                  >
-                    <Save className="size-4" /> {t('actions.save')}
-                  </Button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-            <Button onClick={openCreateSheet} className="gap-2">
-              <Plus className="size-4" /> {t('actions.newQuestion')}
-            </Button>
-          </div>
-        }
+        actions={[
+          {
+            label: t('actions.save'),
+            onClick: handleSave,
+            icon: <Save className="size-4" />,
+            variant: 'outline',
+            disabled: !hasChanges,
+          },
+          {
+            label: t('actions.newQuestion'),
+            onClick: openCreateSheet,
+            icon: <Plus className="size-4" />,
+          },
+        ]}
       />
 
       <div className="pb-10">
-        {/* Breadcrumb + actions */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.4 }}
+          className="space-y-6"
         >
           {/* Stats */}
-          {!loading && (
-            <div className="mb-6 grid grid-cols-3 gap-4">
-              {[
-                { label: t('stats.questions'), valor: questoes.length },
-                { label: t('stats.totalScore'), valor: totalPontuacao },
-                {
-                  label: t('stats.avgAlternatives'),
-                  valor:
-                    questoes.length > 0
-                      ? (
-                          questoes.reduce(
-                            (a, q) => a + q.alternativas.length,
-                            0
-                          ) / questoes.length
-                        ).toFixed(1)
-                      : '0',
-                },
-              ].map((stat, i) => (
-                <motion.div
-                  key={stat.label}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: i * 0.08 }}
-                >
-                  <Card>
-                    <CardContent className="p-4 text-center">
-                      <p className="text-2xl font-bold">{stat.valor}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {stat.label}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </motion.div>
+          {loading ? (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Card key={i} className="overflow-hidden border-border/70 py-0">
+                  <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                  <CardContent className="p-4">
+                    <Skeleton className="mb-2 h-8 w-16" />
+                    <Skeleton className="h-4 w-28" />
+                  </CardContent>
+                </Card>
               ))}
             </div>
+          ) : (
+            <KpiCardsGrid items={stats} columns={4} />
           )}
 
+          <div className="space-y-3">
+            <SearchBar
+              searchQuery={buscaInput}
+              onSearchChange={setBuscaInput}
+              onSearch={() => {
+                setDebouncedBuscaInput(buscaInput.trim());
+                setCurrentPage(1);
+              }}
+              placeholder={t('filters.searchPlaceholder')}
+              controls={[
+                {
+                  id: 'tipo',
+                  type: 'select',
+                  value: filtroTipoInput,
+                  onChange: (value) =>
+                    setFiltroTipoInput(value as ExamQuestionType | 'todos'),
+                  placeholder: t('sheet.fields.questionType'),
+                  options: [
+                    { value: 'todos', label: t('filters.allTypes') },
+                    {
+                      value: 'multiple_choice',
+                      label: t('question.types.multiple_choice'),
+                    },
+                    {
+                      value: 'true_false',
+                      label: t('question.types.true_false'),
+                    },
+                    { value: 'essay', label: t('question.types.essay') },
+                    {
+                      value: 'fill_blank',
+                      label: t('question.types.fill_blank'),
+                    },
+                    { value: 'matching', label: t('question.types.matching') },
+                  ],
+                },
+              ]}
+              afterSearchButton={
+                <ViewModeToggle
+                  viewMode={viewMode}
+                  onViewModeChange={setViewMode}
+                  listLabel={t('viewMode.list')}
+                  cardsLabel={t('viewMode.cards')}
+                />
+              }
+            />
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <p className="text-sm text-muted-foreground">
+                {filteredQuestoes.length}{' '}
+                {filteredQuestoes.length === 1
+                  ? t('pagination.question')
+                  : t('pagination.questions')}
+              </p>
+              <div className="flex items-center gap-2">
+                {hasActiveFilters && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={clearFilters}
+                  >
+                    {t('filters.clear')}
+                  </Button>
+                )}
+                {isFetching && (
+                  <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                )}
+              </div>
+            </div>
+          </div>
+
           {/* Questions list */}
           {loading ? (
             <div className="flex flex-col gap-4">
               {Array.from({ length: 4 }).map((_, i) => (
-                <Card key={i}>
+                <Card key={i} className="overflow-hidden border-border/70">
                   <CardContent className="p-4">
                     <div className="flex items-center gap-3">
                       <Skeleton className="size-8 rounded-full" />
@@ -745,7 +1320,7 @@ export default function QuestoesPage() {
                 </Card>
               ))}
             </div>
-          ) : questoes.length === 0 ? (
+          ) : filteredQuestoes.length === 0 ? (
             <EmptyState
               icon={<FileCheck className="h-12 w-12" />}
               title={t('empty.title')}
@@ -754,6 +1329,84 @@ export default function QuestoesPage() {
               onAction={openCreateSheet}
               actionIcon={<Plus className="mr-2 h-4 w-4" />}
             />
+          ) : viewMode === 'list' ? (
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.headers.question')}</TableHead>
+                    <TableHead>{t('table.headers.type')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('table.headers.points')}
+                    </TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginatedQuestoes.map((questao) => (
+                    <TableRow key={questao.id}>
+                      <TableCell>
+                        <div className="min-w-0">
+                          <p className="truncate font-medium">
+                            {stripHtml(questao.enunciado)}
+                          </p>
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            #{questao.order}
+                          </p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="text-xs">
+                          {t(`question.types.${questao.tipo}`)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right font-medium">
+                        {questao.pontuacao}
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="ml-auto size-8"
+                              aria-label={t('table.actions.label')}
+                            >
+                              <MoreHorizontal className="size-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-48">
+                            <DropdownMenuItem
+                              onClick={() => openEditSheet(questao)}
+                            >
+                              <Pencil className="size-3.5" />{' '}
+                              {t('question.actions.edit')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => duplicateQuestao(questao)}
+                            >
+                              <Copy className="mr-2 size-4" />{' '}
+                              {t('question.actions.duplicate')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              className="text-destructive focus:text-destructive"
+                              onClick={() => {
+                                setQuestaoToDelete(questao);
+                                setDeleteDialogOpen(true);
+                              }}
+                            >
+                              <Trash2 className="size-3.5" />{' '}
+                              {t('question.actions.delete')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           ) : (
             <DndContext
               sensors={sensors}
@@ -761,10 +1414,10 @@ export default function QuestoesPage() {
               onDragEnd={handleQuestionDragEnd}
             >
               <SortableContext
-                items={questoes.map((q) => q.id)}
+                items={paginatedQuestoes.map((q) => q.id)}
                 strategy={verticalListSortingStrategy}
               >
-                <div className="flex flex-col gap-3">
+                <div className="flex w-full max-w-2xl flex-col gap-3">
                   <AnimatePresence>
                     {paginatedQuestoes.map((questao, qIndex) => {
                       const isExpanded = expandedIds.has(questao.id);
@@ -790,12 +1443,12 @@ export default function QuestoesPage() {
             </DndContext>
           )}
 
-          {!loading && questoes.length > 0 && (
+          {!loading && filteredQuestoes.length > 0 && (
             <div className="mt-6">
               <PaginationFooter
                 currentPage={safePage}
                 pageSize={pageSize}
-                totalItems={questoes.length}
+                totalItems={filteredQuestoes.length}
                 onPageChange={setCurrentPage}
                 onPageSizeChange={(nextSize) => {
                   setPageSize(nextSize);
@@ -810,7 +1463,10 @@ export default function QuestoesPage() {
 
       {/* Create/Edit Sheet */}
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent className="overflow-y-auto sm:max-w-xl">
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>
               {editingQuestao ? t('sheet.titleEdit') : t('sheet.titleCreate')}
@@ -821,115 +1477,339 @@ export default function QuestoesPage() {
                 : t('sheet.descriptionCreate')}
             </SheetDescription>
           </SheetHeader>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col gap-5 px-4 pb-4"
-          >
-            <Field data-invalid={!!form.formState.errors.enunciado}>
-              <FieldLabel htmlFor="enunciado">
-                {t('sheet.fields.statement')}
-              </FieldLabel>
-              <Textarea
-                id="enunciado"
-                rows={3}
-                placeholder={t('sheet.fields.statementPlaceholder')}
-                {...form.register('enunciado')}
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-1 flex-col gap-5 px-4 pb-4"
+            >
+              <FormField
+                control={form.control}
+                name="enunciado"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('sheet.fields.statement')}</FormLabel>
+                    <FormControl>
+                      <RichTextEditor
+                        className="w-full max-w-full h-50"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {form.formState.errors.enunciado && (
-                <p className="text-sm text-destructive">
-                  {form.formState.errors.enunciado.message}
-                </p>
-              )}
-            </Field>
-
-            <Field data-invalid={!!form.formState.errors.pontuacao}>
-              <FieldLabel htmlFor="pontuacao">
-                {t('sheet.fields.score')}
-              </FieldLabel>
-              <Input
-                id="pontuacao"
-                type="number"
-                step="0.5"
-                placeholder={t('sheet.fields.scorePlaceholder')}
-                {...form.register('pontuacao')}
+
+              <FormField
+                control={form.control}
+                name="questionType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('sheet.fields.questionType')}</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={(value) =>
+                        field.onChange(value as ExamQuestionType)
+                      }
+                    >
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t(
+                              'sheet.fields.questionTypePlaceholder'
+                            )}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="multiple_choice">
+                          {t('question.types.multiple_choice')}
+                        </SelectItem>
+                        <SelectItem value="true_false">
+                          {t('question.types.true_false')}
+                        </SelectItem>
+                        <SelectItem value="essay">
+                          {t('question.types.essay')}
+                        </SelectItem>
+                        <SelectItem value="fill_blank">
+                          {t('question.types.fill_blank')}
+                        </SelectItem>
+                        <SelectItem value="matching">
+                          {t('question.types.matching')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {form.formState.errors.pontuacao && (
-                <p className="text-sm text-destructive">
-                  {form.formState.errors.pontuacao.message}
-                </p>
-              )}
-            </Field>
 
-            <Separator />
+              <FormField
+                control={form.control}
+                name="pontuacao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('sheet.fields.score')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        step="0.5"
+                        placeholder={t('sheet.fields.scorePlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            {/* Alternatives with dnd */}
-            <div>
-              <div className="mb-3 flex items-center justify-between">
+              <Separator />
+
+              {OBJECTIVE_QUESTION_TYPES.includes(selectedQuestionType) ? (
                 <div>
-                  <p className="text-sm font-medium">
-                    {t('sheet.fields.alternatives')}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {t('sheet.fields.alternativesDescription')}
-                  </p>
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="gap-1.5"
-                  onClick={addAlternativa}
-                >
-                  <Plus className="size-3.5" /> {t('sheet.actions.add')}
-                </Button>
-              </div>
+                  <div className="mb-3 flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium">
+                        {t('sheet.fields.alternatives')}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {selectedQuestionType === 'true_false'
+                          ? t('sheet.fields.trueFalseDescription')
+                          : t('sheet.fields.alternativesDescription')}
+                      </p>
+                    </div>
+                    {selectedQuestionType === 'multiple_choice' && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="gap-1.5"
+                        onClick={addAlternativa}
+                      >
+                        <Plus className="size-3.5" /> {t('sheet.actions.add')}
+                      </Button>
+                    )}
+                  </div>
 
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleAltDragEnd}
-              >
-                <SortableContext
-                  items={sheetAlternativas.map((a) => a.id)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <div className="flex flex-col gap-2">
-                    {sheetAlternativas.map((alt, i) => (
-                      <SortableAlternativa
-                        key={alt.id}
-                        alt={alt}
-                        index={i}
-                        onToggleCorrect={() => toggleCorreta(alt.id)}
-                        onChangeTexto={(t) => updateAlternativaTexto(alt.id, t)}
-                        onRemove={() => removeAlternativa(alt.id)}
-                        canRemove={sheetAlternativas.length > 2}
-                      />
+                  <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleAltDragEnd}
+                  >
+                    <SortableContext
+                      items={sheetAlternativas.map((a) => a.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      <div className="flex flex-col gap-2">
+                        {sheetAlternativas.map((alt, i) => (
+                          <SortableAlternativa
+                            key={alt.id}
+                            alt={alt}
+                            index={i}
+                            onToggleCorrect={() => toggleCorreta(alt.id)}
+                            onChangeTexto={(value) =>
+                              updateAlternativaTexto(alt.id, value)
+                            }
+                            onRemove={() => removeAlternativa(alt.id)}
+                            canRemove={
+                              selectedQuestionType === 'multiple_choice' &&
+                              sheetAlternativas.length > 2
+                            }
+                            disableTextInput={
+                              selectedQuestionType === 'true_false'
+                            }
+                          />
+                        ))}
+                      </div>
+                    </SortableContext>
+                  </DndContext>
+
+                  {sheetAlternativas.length < 2 && (
+                    <p className="mt-2 text-sm text-destructive">
+                      {t('sheet.validation.minAlternatives')}
+                    </p>
+                  )}
+                </div>
+              ) : selectedQuestionType === 'fill_blank' ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium">
+                        {t('sheet.fields.fillBlankAnswers')}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('sheet.fields.fillBlankDescription')}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="gap-1.5"
+                      onClick={addFillBlankAnswer}
+                    >
+                      <Plus className="size-3.5" /> {t('sheet.actions.add')}
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {sheetFillBlankAnswers.map((item, index) => (
+                      <div
+                        key={item.id}
+                        className="space-y-2 rounded-lg border p-3"
+                      >
+                        <div className="flex items-center justify-between">
+                          <p className="text-xs font-medium text-muted-foreground">
+                            {t('sheet.fields.fillBlankItem', {
+                              number: index + 1,
+                            })}
+                          </p>
+                          {sheetFillBlankAnswers.length > 1 && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => removeFillBlankAnswer(item.id)}
+                            >
+                              <X className="size-4" />
+                            </Button>
+                          )}
+                        </div>
+                        <Input
+                          value={item.answer}
+                          onChange={(event) =>
+                            updateFillBlankAnswer(
+                              item.id,
+                              'answer',
+                              event.target.value
+                            )
+                          }
+                          placeholder={t(
+                            'sheet.fields.fillBlankExpectedAnswerPlaceholder'
+                          )}
+                        />
+                        <Input
+                          value={item.alternativesText}
+                          onChange={(event) =>
+                            updateFillBlankAnswer(
+                              item.id,
+                              'alternativesText',
+                              event.target.value
+                            )
+                          }
+                          placeholder={t(
+                            'sheet.fields.fillBlankAlternativeAnswersPlaceholder'
+                          )}
+                        />
+                      </div>
                     ))}
                   </div>
-                </SortableContext>
-              </DndContext>
+                </div>
+              ) : selectedQuestionType === 'matching' ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium">
+                        {t('sheet.fields.matchingPairs')}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('sheet.fields.matchingDescription')}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="gap-1.5"
+                      onClick={addMatchingPair}
+                    >
+                      <Plus className="size-3.5" /> {t('sheet.actions.add')}
+                    </Button>
+                  </div>
 
-              {sheetAlternativas.length < 2 && (
-                <p className="mt-2 text-sm text-destructive">
-                  {t('sheet.validation.minAlternatives')}
-                </p>
+                  <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleMatchingPairDragEnd}
+                  >
+                    <SortableContext
+                      items={sheetMatchingPairs.map((pair) => pair.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      <div className="space-y-2">
+                        {sheetMatchingPairs.map((pair, index) => (
+                          <div
+                            key={pair.id}
+                            className="space-y-2 rounded-lg border p-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <p className="text-xs font-medium text-muted-foreground">
+                                {t('sheet.fields.matchingItem', {
+                                  number: index + 1,
+                                })}
+                              </p>
+                              {sheetMatchingPairs.length > 2 && (
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => removeMatchingPair(pair.id)}
+                                >
+                                  <X className="size-4" />
+                                </Button>
+                              )}
+                            </div>
+                            <Input
+                              value={pair.leftText}
+                              onChange={(event) =>
+                                updateMatchingPair(
+                                  pair.id,
+                                  'leftText',
+                                  event.target.value
+                                )
+                              }
+                              placeholder={t(
+                                'sheet.fields.matchingLeftPlaceholder'
+                              )}
+                            />
+                            <Input
+                              value={pair.rightText}
+                              onChange={(event) =>
+                                updateMatchingPair(
+                                  pair.id,
+                                  'rightText',
+                                  event.target.value
+                                )
+                              }
+                              placeholder={t(
+                                'sheet.fields.matchingRightPlaceholder'
+                              )}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </SortableContext>
+                  </DndContext>
+                </div>
+              ) : (
+                <div className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                  {t('sheet.fields.essayDescription')}
+                </div>
               )}
-            </div>
 
-            <SheetFooter className="gap-2 p-0 pt-4">
-              <Button type="submit">
-                {editingQuestao
-                  ? t('sheet.actions.update')
-                  : t('sheet.actions.create')}
-              </Button>
-            </SheetFooter>
-          </form>
+              <SheetFooter className="mt-auto gap-2 p-0 pt-4">
+                <Button type="submit" className="w-full">
+                  {editingQuestao
+                    ? t('sheet.actions.update')
+                    : t('sheet.actions.create')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
         </SheetContent>
       </Sheet>
 
       {/* Delete Dialog */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />