@hed-hog/lms 0.0.349 → 0.0.351

package/hedhog/frontend/app/exams/page.tsx.ejs

@@ -43,12 +43,12 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -59,6 +59,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -82,8 +83,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useEffect, useMemo, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -94,9 +94,11 @@ interface Exame {
   id: number;
   codigo: string;
   titulo: string;
+  nivel: 'beginner' | 'intermediate' | 'advanced';
   notaMinima: number;
   limiteTempo: number;
   shuffle: boolean;
+  mostrarGabaritoAposConclusao: boolean;
   status: 'publicado' | 'rascunho' | 'encerrado';
   questoes: number;
   realizacoes: number;
@@ -110,9 +112,11 @@ type ApiExame = {
   id: number;
   code: string;
   title: string;
+  level: 'beginner' | 'intermediate' | 'advanced';
   minScore: number;
   timeLimit: number;
   shuffle: boolean;
+  showAnswerKeyAfterFinish: boolean;
   status: 'published' | 'draft' | 'closed' | 'archived';
   questions: number;
   attempts: number;
@@ -153,12 +157,14 @@ const API_EXAMS_CACHE_KEY = 'lms:exams:api-cache';
 const createExameSchema = (t: (key: string) => string) =>
   z.object({
     titulo: z.string().min(3, t('form.validation.titleMinLength')),
+    nivel: z.enum(['beginner', 'intermediate', 'advanced']),
     notaMinima: z.coerce
       .number()
       .min(0, t('form.validation.minScoreMin'))
       .max(10, t('form.validation.minScoreMax')),
     limiteTempo: z.coerce.number().min(1, t('form.validation.timeLimitMin')),
     shuffle: z.boolean().default(false),
+    mostrarGabaritoAposConclusao: z.boolean().default(false),
     status: z.string().min(1, t('form.validation.statusRequired')),
     primaryColor: z
       .string()
@@ -190,9 +196,11 @@ function mapApiExame(exame: ApiExame): Exame {
     id: exame.id,
     codigo: exame.code,
     titulo: exame.title,
+    nivel: exame.level,
     notaMinima: exame.minScore,
     limiteTempo: exame.timeLimit,
     shuffle: exame.shuffle,
+    mostrarGabaritoAposConclusao: Boolean(exame.showAnswerKeyAfterFinish),
     status: toPtStatus(exame.status),
     questoes: exame.questions,
     realizacoes: exame.attempts,
@@ -268,18 +276,15 @@ export default function ExamesPage() {
     allowedValues: PAGE_SIZES,
   });
 
-  // Double-click tracking
-  const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
-    new Map()
-  );
-
   const form = useForm<ExameForm>({
     resolver: zodResolver(exameSchema),
     defaultValues: {
       titulo: '',
+      nivel: 'beginner',
       notaMinima: 7,
       limiteTempo: 60,
       shuffle: true,
+      mostrarGabaritoAposConclusao: false,
       status: 'rascunho',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
@@ -365,11 +370,18 @@ export default function ExamesPage() {
         watchedFormValues.notaMinima,
         editingExame.notaMinima
       ),
+      nivel:
+        watchedFormValues.nivel === undefined
+          ? editingExame.nivel
+          : watchedFormValues.nivel,
       limiteTempo: toNumberOrFallback(
         watchedFormValues.limiteTempo,
         editingExame.limiteTempo
       ),
       shuffle: watchedFormValues.shuffle ?? editingExame.shuffle,
+      mostrarGabaritoAposConclusao:
+        watchedFormValues.mostrarGabaritoAposConclusao ??
+        editingExame.mostrarGabaritoAposConclusao,
       status:
         (watchedFormValues.status as Exame['status'] | undefined) ??
         editingExame.status,
@@ -421,29 +433,17 @@ export default function ExamesPage() {
     setDeleteDialogOpen(true);
   }
 
-  // ── Double-click ──────────────────────────────────────────────────────────
-
-  function handleCardClick(exame: Exame) {
-    const existing = clickTimers.current.get(exame.id);
-    if (existing) {
-      clearTimeout(existing);
-      clickTimers.current.delete(exame.id);
-      router.push(`/lms/exams/${exame.id}/questions`);
-    } else {
-      const t = setTimeout(() => clickTimers.current.delete(exame.id), 300);
-      clickTimers.current.set(exame.id, t);
-    }
-  }
-
   // ── CRUD ──────────────────────────────────────────────────────────────────
 
   function openCreateSheet() {
     setEditingExame(null);
     form.reset({
       titulo: '',
+      nivel: 'beginner',
       notaMinima: 7,
       limiteTempo: 60,
       shuffle: true,
+      mostrarGabaritoAposConclusao: false,
       status: 'rascunho',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
@@ -456,9 +456,11 @@ export default function ExamesPage() {
     setEditingExame(exame);
     form.reset({
       titulo: exame.titulo,
+      nivel: exame.nivel,
       notaMinima: exame.notaMinima,
       limiteTempo: exame.limiteTempo,
       shuffle: exame.shuffle,
+      mostrarGabaritoAposConclusao: exame.mostrarGabaritoAposConclusao,
       status: exame.status,
       primaryColor: exame.primaryColor ?? '#1D4ED8',
       secondaryColor: exame.secondaryColor ?? '#111827',
@@ -471,9 +473,11 @@ export default function ExamesPage() {
     try {
       const payload = {
         title: data.titulo,
+        level: data.nivel,
         minScore: data.notaMinima,
         timeLimit: data.limiteTempo,
         shuffle: data.shuffle,
+        showAnswerKeyAfterFinish: data.mostrarGabaritoAposConclusao,
         status: toApiStatus(data.status),
         primaryColor: data.primaryColor,
         secondaryColor: data.secondaryColor,
@@ -783,7 +787,9 @@ export default function ExamesPage() {
                   <motion.div key={exame.id} variants={fadeUp}>
                     <Card
                       className="group relative h-95 cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md"
-                      onClick={() => handleCardClick(exame)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/exams/${exame.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <div
@@ -962,7 +968,9 @@ export default function ExamesPage() {
                     <TableRow
                       key={exame.id}
                       className="cursor-pointer"
-                      onClick={() => handleCardClick(exame)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/exams/${exame.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <TableCell>
@@ -1072,7 +1080,11 @@ export default function ExamesPage() {
 
       {/* Sheet */}
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-exams-form-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
           side="right"
           className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
         >
@@ -1114,6 +1126,37 @@ export default function ExamesPage() {
               <FieldError>{form.formState.errors.titulo?.message}</FieldError>
             </Field>
             <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.level.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Controller
+                  name="nivel"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t('form.fields.level.placeholder')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="beginner">
+                          {t('form.fields.level.options.beginner')}
+                        </SelectItem>
+                        <SelectItem value="intermediate">
+                          {t('form.fields.level.options.intermediate')}
+                        </SelectItem>
+                        <SelectItem value="advanced">
+                          {t('form.fields.level.options.advanced')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
+              </Field>
               <Field>
                 <FieldLabel htmlFor="notaMinima">
                   {t('form.fields.minScore.label')}{' '}
@@ -1261,6 +1304,26 @@ export default function ExamesPage() {
                 )}
               />
             </label>
+            <label className="flex cursor-pointer items-center justify-between rounded-lg border p-3 hover:bg-muted">
+              <div>
+                <p className="text-sm font-medium">
+                  {t('form.fields.showAnswerKeyAfterFinish.label')}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t('form.fields.showAnswerKeyAfterFinish.description')}
+                </p>
+              </div>
+              <Controller
+                name="mostrarGabaritoAposConclusao"
+                control={form.control}
+                render={({ field }) => (
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </label>
             <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
               <Button type="submit" disabled={saving} className="gap-2">
                 {saving && <Loader2 className="size-4 animate-spin" />}
@@ -1270,7 +1333,7 @@ export default function ExamesPage() {
               </Button>
             </SheetFooter>
           </form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* Delete Dialog */}

package/hedhog/frontend/app/instructor-skills/page.tsx.ejs

@@ -43,10 +43,10 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -176,7 +176,13 @@ function SkillFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-md">
+      <ResizableSheetContent
+        sheetId="lms-instructor-skills-form-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        className="w-full overflow-y-auto sm:max-w-md"
+      >
         <SheetHeader>
           <SheetTitle>
             {skillToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
@@ -250,7 +256,7 @@ function SkillFormSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }
@@ -476,6 +482,7 @@ export default function InstructorSkillsPage() {
           setPageSize(nextPageSize);
           setPage(1);
         }}
+        pageSizeOptions={[6, 12, 24]}
       />
 
       <SkillFormSheet

package/hedhog/frontend/app/instructors/_components/instructor-form-sheet.tsx.ejs

@@ -1,12 +1,12 @@
 'use client';
 
-import { PersonPicker } from '@/app/(app)/(libraries)/contact/_components/person-picker';
-import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import { PersonPicker } from '@/app/(app)/(libraries)/crm/_components/person-picker';
+import { PersonFormSheet } from '@/app/(app)/(libraries)/crm/person/_components/person-form-sheet';
 import type {
   ContactTypeOption,
   DocumentTypeOption,
   Person,
-} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+} from '@/app/(app)/(libraries)/crm/person/_components/person-types';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -23,12 +23,12 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -69,6 +69,27 @@ type ClassGroupItem = {
   totalSlots: number | null;
 };
 
+type EvaluationItem = {
+  id: number;
+  topicName: string;
+  topicDescription: string | null;
+  targetType: string;
+  targetName: string;
+  score: number;
+  comment: string | null;
+  evaluatorName: string | null;
+  evaluatorId: number | null;
+  courseName: string | null;
+  courseId: number | null;
+  className: string | null;
+  classId: number | null;
+  instructorName: string | null;
+  instructorId: number | null;
+  createdAt: string;
+  topicAvgScore: number;
+  topicRatingCount: number;
+};
+
 function toKebabCase(str: string) {
   return (
     str
@@ -127,6 +148,8 @@ export function InstructorFormSheet({
   const [classSheetOpen, setClassSheetOpen] = useState(false);
   const [editingClassId, setEditingClassId] = useState<number | null>(null);
   const TURMAS_PAGE_SIZE = 6;
+  const [avaliacoesPage, setAvaliacoesPage] = useState(1);
+  const AVALIACOES_PAGE_SIZE = 6;
   const isEditing = typeof instructorId === 'number' && instructorId > 0;
   const qualificationOptions = [
     {
@@ -329,6 +352,38 @@ export function InstructorFormSheet({
   const turmasData = turmasResult?.data ?? [];
   const turmasLastPage = turmasResult?.lastPage ?? 1;
 
+  const {
+    data: avaliacoesResult,
+    isLoading: loadingAvaliacoes,
+  } = useQuery<{
+    data: EvaluationItem[];
+    total: number;
+    lastPage: number;
+  }>({
+    queryKey: ['lms-instructor-avaliacoes', instructorId, avaliacoesPage],
+    queryFn: async () => {
+      if (!instructorId) return { data: [], total: 0, lastPage: 1 };
+      const params = new URLSearchParams({
+        instructorId: String(instructorId),
+        page: String(avaliacoesPage),
+        pageSize: String(AVALIACOES_PAGE_SIZE),
+      });
+      const response = await request<{
+        data: EvaluationItem[];
+        total: number;
+        lastPage: number;
+      }>({
+        url: `/lms/evaluations?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: isEditing && open && activeTab === 'avaliacoes',
+    placeholderData: (prev) => prev,
+  });
+  const avaliacoesData = avaliacoesResult?.data ?? [];
+  const avaliacoesLastPage = avaliacoesResult?.lastPage ?? 1;
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       setDebouncedTurmasSearch(turmasSearchInput.trim());
@@ -377,7 +432,7 @@ export function InstructorFormSheet({
     }
   }, [isEditing, existingInstructor, open, reset]);
 
-  // Reset to first tab and turmas page when sheet closes
+  // Reset to first tab and turmas/avaliacoes page when sheet closes
   useEffect(() => {
     if (!open) {
       setActiveTab('detalhes');
@@ -387,6 +442,7 @@ export function InstructorFormSheet({
       setTurmasStatusFilter('all');
       setClassSheetOpen(false);
       setEditingClassId(null);
+      setAvaliacoesPage(1);
     }
   }, [open]);
 
@@ -489,9 +545,13 @@ export function InstructorFormSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={handleSheetClose}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-instructors-form-sheet"
+          defaultWidth={640}
+          minWidth={460}
+          maxWidth={1100}
           side="right"
-          className="flex w-full max-w-lg flex-col overflow-hidden p-0 sm:max-w-xl"
+          className="flex w-full flex-col overflow-hidden p-0"
         >
           {/* ── Instructor header (edit mode) ── */}
           {isEditing && existingInstructor ? (
@@ -1136,15 +1196,128 @@ export function InstructorFormSheet({
                 value="avaliacoes"
                 className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
               >
-                {/* TODO: implementar endpoint de avaliações de instrutor */}
-                <div className="flex flex-1 flex-col items-center justify-center px-6 py-12 text-center">
-                  <Star className="mb-3 h-10 w-10 text-muted-foreground/40" />
-                  <p className="text-sm font-medium text-muted-foreground">
-                    {t('form.evaluations.comingSoonTitle')}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {t('form.evaluations.comingSoonDescription')}
-                  </p>
+                <div className="flex min-h-0 flex-1 flex-col">
+                  {/* List area */}
+                  <div className="flex-1 overflow-y-auto px-6 py-4">
+                    {loadingAvaliacoes ? (
+                      <div className="flex flex-col gap-3">
+                        {Array.from({ length: 3 }).map((_, i) => (
+                          <div
+                            key={i}
+                            className="flex flex-col gap-2 rounded-lg border p-4"
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="h-4 w-32 animate-pulse rounded bg-muted" />
+                              <div className="h-4 w-16 animate-pulse rounded bg-muted" />
+                            </div>
+                            <div className="h-3 w-48 animate-pulse rounded bg-muted" />
+                            <div className="h-3 w-64 animate-pulse rounded bg-muted" />
+                          </div>
+                        ))}
+                      </div>
+                    ) : avaliacoesData.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-center">
+                        <Star className="mb-3 h-10 w-10 text-muted-foreground/40" />
+                        <p className="text-sm font-medium text-muted-foreground">
+                          {t('form.evaluations.emptyTitle')}
+                        </p>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {t('form.evaluations.emptyDescription')}
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="flex flex-col gap-3">
+                        {avaliacoesData.map((ev) => (
+                          <div
+                            key={ev.id}
+                            className="flex flex-col gap-2 rounded-lg border p-4"
+                          >
+                            {/* Header: topic name + score */}
+                            <div className="flex items-start justify-between gap-2">
+                              <p className="text-sm font-medium leading-snug">
+                                {ev.topicName}
+                              </p>
+                              <div className="flex shrink-0 items-center gap-1">
+                                {Array.from({ length: 5 }).map((_, i) => (
+                                  <Star
+                                    key={i}
+                                    className={`h-3.5 w-3.5 ${
+                                      i < Math.round(ev.score / 2)
+                                        ? 'fill-amber-400 text-amber-400'
+                                        : 'fill-none text-muted-foreground/40'
+                                    }`}
+                                  />
+                                ))}
+                                <span className="ml-1 text-xs font-medium tabular-nums text-muted-foreground">
+                                  {ev.score.toFixed(1)}{t('form.evaluations.of')}10
+                                </span>
+                              </div>
+                            </div>
+
+                            {/* Target + course/class info */}
+                            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                              {ev.className && (
+                                <span className="text-xs text-muted-foreground">
+                                  <BookOpen className="mr-0.5 inline h-3 w-3" />
+                                  {ev.className}
+                                </span>
+                              )}
+                              {ev.courseName && (
+                                <span className="text-xs text-muted-foreground">
+                                  · {ev.courseName}
+                                </span>
+                              )}
+                            </div>
+
+                            {/* Evaluator + date */}
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>
+                                {ev.evaluatorName ?? t('form.evaluations.anonymous')}
+                              </span>
+                              <span>·</span>
+                              <span>
+                                {new Date(ev.createdAt).toLocaleDateString()}
+                              </span>
+                            </div>
+
+                            {/* Comment */}
+                            {ev.comment && (
+                              <p className="line-clamp-2 text-xs text-muted-foreground italic">
+                                "{ev.comment}"
+                              </p>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Pagination */}
+                  {avaliacoesLastPage > 1 && (
+                    <div className="flex shrink-0 items-center justify-center gap-2 border-t px-6 py-3">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        disabled={avaliacoesPage <= 1}
+                        onClick={() => setAvaliacoesPage((p) => p - 1)}
+                      >
+                        <ChevronLeft className="h-4 w-4" />
+                      </Button>
+                      <span className="text-xs text-muted-foreground">
+                        {avaliacoesPage} / {avaliacoesLastPage}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        disabled={avaliacoesPage >= avaliacoesLastPage}
+                        onClick={() => setAvaliacoesPage((p) => p + 1)}
+                      >
+                        <ChevronRight className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )}
                 </div>
               </TabsContent>
             </Tabs>
@@ -1343,7 +1516,7 @@ export function InstructorFormSheet({
               </SheetFooter>
             </form>
           )}
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <ClassFormSheet

package/hedhog/frontend/app/instructors/page.tsx.ejs

@@ -735,6 +735,7 @@ export default function InstructorsPage() {
           setPageSize(nextPageSize);
           setPage(1);
         }}
+        pageSizeOptions={[6, 12, 24]}
       />
 
       <InstructorFormSheet

package/hedhog/frontend/app/layout.tsx.ejs

@@ -1,5 +1,9 @@
 import type { ReactNode } from 'react';
 
 export default function LmsLayout({ children }: { children: ReactNode }) {
-  return <div>{children}</div>;
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      {children}
+    </div>
+  );
 }