@hed-hog/lms 0.0.306 → 0.0.309

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

@@ -73,11 +73,18 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   addMonths,
+  differenceInCalendarMonths,
   eachDayOfInterval,
   endOfMonth,
   endOfWeek,
@@ -121,6 +128,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react';
@@ -128,6 +136,14 @@ import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 import { ClassFormSheet } from '../../_components/class-form-sheet';
+import { CourseAvatar } from '../../_components/course-avatar';
+import {
+  CourseCategoryOption,
+  CourseFormSheet,
+  CourseSheetFormValues,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+} from '../../_components/course-form-sheet';
 import { CreateLmsPersonSheet } from '../../_components/create-lms-person-sheet';
 import { CreateLmsStudentPersonSheet } from '../../_components/create-lms-student-person-sheet';
 
@@ -345,6 +361,25 @@ type ClassDetail = {
   location?: string;
 };
 
+type ApiCourseDetail = {
+  id: number;
+  code?: string;
+  slug?: string;
+  title: string;
+  description?: string;
+  level?: 'beginner' | 'intermediate' | 'advanced';
+  status?: 'draft' | 'published' | 'archived';
+  categories?: string[];
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  logoFileId?: number | null;
+};
+
+type ApiCourseCategoryList = {
+  data: Array<{ id: number; slug: string; name: string; status?: string }>;
+  total?: number;
+};
+
 type AttendanceRecord = {
   student_id: number;
   present: boolean;
@@ -356,6 +391,36 @@ type Locale = {
   name: string;
 };
 
+function toCourseFormLevel(level?: string): CourseSheetFormValues['nivel'] {
+  if (level === 'intermediate') return 'intermediario';
+  if (level === 'advanced') return 'avancado';
+  return 'iniciante';
+}
+function toCourseFormStatus(status?: string): CourseSheetFormValues['status'] {
+  if (status === 'published') return 'ativo';
+  if (status === 'archived') return 'arquivado';
+  return 'rascunho';
+}
+function toApiCourseLevel(nivel: CourseSheetFormValues['nivel']) {
+  if (nivel === 'intermediario') return 'intermediate';
+  if (nivel === 'avancado') return 'advanced';
+  return 'beginner';
+}
+function toApiCourseStatus(status: CourseSheetFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'arquivado') return 'archived';
+  return 'draft';
+}
+function getContrastColorCourse(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
 const EMPTY_AULAS: Aula[] = [];
 
 const SESSION_RECURRENCE_FREQUENCIES = [
@@ -580,6 +645,7 @@ type StudentForm = z.infer<ReturnType<typeof getStudentSchema>>;
 export default function TurmaDetalhePage() {
   const t = useTranslations('lms.ClassesPage.DetailPage');
   const tClasses = useTranslations('lms.ClassesPage');
+  const tCourses = useTranslations('lms.CoursesPage');
   const locale = useLocale();
   const params = useParams();
   const router = useRouter();
@@ -656,6 +722,8 @@ export default function TurmaDetalhePage() {
 
   // ── Edit sheet state ──────────────────────────────────────────────────────
   const [editSheetOpen, setEditSheetOpen] = useState(false);
+  const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [savingCourse, setSavingCourse] = useState(false);
 
   // ── Tab state ─────────────────────────────────────────────────────────────
   const [activeTab, setActiveTab] = useState('alunos');
@@ -663,6 +731,36 @@ export default function TurmaDetalhePage() {
     'single' | 'quarter' | 'year' | 'list'
   >('single');
   const [calendarViewDate, setCalendarViewDate] = useState(() => new Date());
+  const calendarInitialized = useRef(false);
+
+  useEffect(() => {
+    if (calendarInitialized.current || !turma) return;
+
+    const rawStart = turma.startDate ?? turma.dataInicio;
+    const rawEnd = turma.endDate ?? turma.dataFim;
+
+    if (!rawStart) return;
+
+    const start = new Date(`${String(rawStart).slice(0, 10)}T00:00:00`);
+    const end = rawEnd
+      ? new Date(`${String(rawEnd).slice(0, 10)}T00:00:00`)
+      : start;
+
+    const monthDiff = differenceInCalendarMonths(end, start);
+
+    let mode: 'single' | 'quarter' | 'year' | 'list';
+    if (monthDiff === 0) {
+      mode = 'single';
+    } else if (monthDiff < 12) {
+      mode = 'quarter';
+    } else {
+      mode = 'list';
+    }
+
+    calendarInitialized.current = true;
+    setCalendarViewMode(mode);
+    setCalendarViewDate(startOfMonth(start));
+  }, [turma]);
 
   // ── Students state ────────────────────────────────────────────────────────
   const [alunoSearch, setAlunoSearch] = useState('');
@@ -772,11 +870,50 @@ export default function TurmaDetalhePage() {
     }
   }, [aulaSheetOpen, instructorOpen, refetchInstructorOptions]);
 
+  const { data: courseDetail, refetch: refetchCourseDetail } =
+    useQuery<ApiCourseDetail>({
+      queryKey: [
+        'lms-course-for-class-sheet',
+        turma?.courseId ?? turma?.cursoId,
+      ],
+      queryFn: async () => {
+        const cId = turma?.courseId ?? turma?.cursoId;
+        const res = await request<ApiCourseDetail>({
+          url: `/lms/courses/${cId}`,
+          method: 'GET',
+        });
+        return res.data;
+      },
+      enabled: !!(turma?.courseId ?? turma?.cursoId),
+    });
+
+  const { data: courseCategoryData } = useQuery<ApiCourseCategoryList>({
+    queryKey: ['category-options-for-course-sheet'],
+    queryFn: async () => {
+      const res = await request<ApiCourseCategoryList>({
+        url: '/category',
+        method: 'GET',
+        params: { page: 1, pageSize: 500, status: 'all' },
+      });
+      return res.data;
+    },
+    enabled: courseSheetOpen,
+  });
+
   // ── Attendance state ──────────────────────────────────────────────────────
   const [presencaList, setPresencaList] = useState<PresencaItem[]>([]);
   const [savingPresenca, setSavingPresenca] = useState(false);
   const [aulasState, setAulasState] = useState<Aula[]>([]);
 
+  // attendanceMatrix: sessionId -> (studentId -> present)
+  const [attendanceMatrix, setAttendanceMatrix] = useState<
+    Record<number, Record<number, boolean>>
+  >({});
+  const [loadingAttendanceMatrix, setLoadingAttendanceMatrix] = useState(false);
+  const [savingAttendanceCells, setSavingAttendanceCells] = useState<
+    Set<string>
+  >(new Set());
+
   useEffect(() => {
     setAulasState(
       [...aulasQuery].sort(
@@ -787,6 +924,44 @@ export default function TurmaDetalhePage() {
     );
   }, [aulasQuery]);
 
+  useEffect(() => {
+    if (aulasState.length === 0 || alunos.length === 0) return;
+    let cancelled = false;
+    const load = async () => {
+      setLoadingAttendanceMatrix(true);
+      try {
+        const results = await Promise.all(
+          aulasState.map(async (aula) => {
+            try {
+              const res = await request<AttendanceRecord[]>({
+                url: `/lms/classes/${id}/sessions/${aula.id}/attendance`,
+                method: 'GET',
+              });
+              return { sessionId: aula.id, data: res.data };
+            } catch {
+              return { sessionId: aula.id, data: [] as AttendanceRecord[] };
+            }
+          })
+        );
+        if (cancelled) return;
+        const matrix: Record<number, Record<number, boolean>> = {};
+        for (const { sessionId, data } of results) {
+          matrix[sessionId] = {};
+          for (const record of data) {
+            matrix[sessionId][record.student_id] = record.present;
+          }
+        }
+        setAttendanceMatrix(matrix);
+      } finally {
+        if (!cancelled) setLoadingAttendanceMatrix(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [aulasState, alunos, id, request]);
+
   // ── Form ──────────────────────────────────────────────────────────────────
   const aulaSchema = getAulaSchema(t);
   const studentSchema = getStudentSchema(t);
@@ -822,6 +997,11 @@ export default function TurmaDetalhePage() {
     },
   });
 
+  const courseForm = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(tCourses)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+
   // ── Derived ───────────────────────────────────────────────────────────────
   const filteredAlunos = useMemo(() => {
     if (!alunoSearch.trim()) return alunos;
@@ -849,6 +1029,15 @@ export default function TurmaDetalhePage() {
     [studentPickerResults]
   );
 
+  const courseCategoryOptions = useMemo<CourseCategoryOption[]>(
+    () =>
+      (courseCategoryData?.data ?? [])
+        .filter((c) => !!c.slug)
+        .map((c) => ({ value: c.slug, label: c.name || c.slug }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [courseCategoryData]
+  );
+
   useEffect(() => {
     if (pessoasElegiveisParaMatricula.length === 0) return;
 
@@ -892,6 +1081,54 @@ export default function TurmaDetalhePage() {
     window.dispatchEvent(new CustomEvent('lms:dashboard-updated'));
   };
 
+  function openCourseEditSheet() {
+    if (!courseDetail) return;
+    courseForm.reset({
+      nomeInterno: courseDetail.slug ?? courseDetail.code ?? '',
+      tituloComercial: courseDetail.title ?? '',
+      descricao: courseDetail.description ?? '',
+      nivel: toCourseFormLevel(courseDetail.level),
+      status: toCourseFormStatus(courseDetail.status),
+      categorias: courseDetail.categories ?? [],
+      primaryColor: courseDetail.primaryColor ?? '#1D4ED8',
+      secondaryColor: courseDetail.secondaryColor ?? '#111827',
+      logoFileId: courseDetail.logoFileId ?? null,
+    });
+    setCourseSheetOpen(true);
+  }
+
+  async function onSubmitCourse(data: CourseSheetFormValues) {
+    const cId = turma?.courseId ?? turma?.cursoId;
+    if (!cId) return;
+    setSavingCourse(true);
+    try {
+      await request({
+        url: `/lms/courses/${cId}`,
+        method: 'PATCH',
+        data: {
+          slug: data.nomeInterno.trim(),
+          title: data.tituloComercial,
+          description: data.descricao,
+          level: toApiCourseLevel(data.nivel),
+          status: toApiCourseStatus(data.status),
+          categorySlugs: data.categorias,
+          primaryColor: data.primaryColor,
+          primaryContrastColor: getContrastColorCourse(data.primaryColor),
+          secondaryColor: data.secondaryColor,
+          secondaryContrastColor: getContrastColorCourse(data.secondaryColor),
+          logoFileId: data.logoFileId ?? null,
+        },
+      });
+      await refetchCourseDetail();
+      setCourseSheetOpen(false);
+      toast.success('Curso atualizado com sucesso.');
+    } catch {
+      toast.error('Não foi possível salvar o curso.');
+    } finally {
+      setSavingCourse(false);
+    }
+  }
+
   // ── Handlers ─────────────────────────────────────────────────────────────
   const toggleSelectAluno = (studentId: number, e?: React.MouseEvent) => {
     if (e?.shiftKey && selectedAlunos.length > 0) {
@@ -1263,6 +1500,49 @@ export default function TurmaDetalhePage() {
     openAulaSheet(aula, { initialTab: 'chamada' });
   };
 
+  const toggleAttendanceCell = async (sessionId: number, studentId: number) => {
+    const current = attendanceMatrix[sessionId]?.[studentId] ?? false;
+    const next = !current;
+    const cellKey = `${sessionId}-${studentId}`;
+
+    // Build full session attendance payload before the optimistic update
+    const sessionAttendance = alunos.map((a) => ({
+      studentId: a.id,
+      present:
+        a.id === studentId
+          ? next
+          : (attendanceMatrix[sessionId]?.[a.id] ?? false),
+    }));
+
+    // Optimistic update
+    setAttendanceMatrix((prev) => ({
+      ...prev,
+      [sessionId]: { ...(prev[sessionId] ?? {}), [studentId]: next },
+    }));
+    setSavingAttendanceCells((prev) => new Set(prev).add(cellKey));
+
+    try {
+      await request({
+        url: `/lms/classes/${id}/sessions/${sessionId}/attendance`,
+        method: 'POST',
+        data: { attendance: sessionAttendance },
+      });
+    } catch {
+      // Rollback on error
+      setAttendanceMatrix((prev) => ({
+        ...prev,
+        [sessionId]: { ...(prev[sessionId] ?? {}), [studentId]: current },
+      }));
+      toast.error(t('toasts.error'));
+    } finally {
+      setSavingAttendanceCells((prev) => {
+        const updated = new Set(prev);
+        updated.delete(cellKey);
+        return updated;
+      });
+    }
+  };
+
   const togglePresenca = (alunoId: number) => {
     setPresencaList((prev) =>
       prev.map((p) =>
@@ -2346,34 +2626,40 @@ export default function TurmaDetalhePage() {
 
                 {/* ── Tab Presenca ────────────────────────────────────────────── */}
                 <TabsContent value="presenca" className="mt-0">
-                  <p className="mb-4 text-sm text-muted-foreground">
-                    {t('attendance.helper')}
-                  </p>
-                  {loading ? (
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      {Array.from({ length: 4 }).map((_, i) => (
-                        <Card
-                          key={i}
-                          className="overflow-hidden border-border/70"
-                        >
-                          <CardContent className="p-4">
-                            <Skeleton className="h-20" />
-                          </CardContent>
-                        </Card>
+                  {loading || loadingAttendanceMatrix ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <Skeleton key={i} className="h-10 w-full" />
                       ))}
                     </div>
+                  ) : alunos.length === 0 ? (
+                    <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
+                          <Users className="size-5" />
+                        </div>
+                        <div>
+                          <p className="font-semibold text-sm">
+                            {t('students.empty.notEnrolled')}
+                          </p>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {t('students.empty.notEnrolledDescription')}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
                   ) : aulasState.length === 0 ? (
                     <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
                       <div className="flex flex-col items-center gap-3">
                         <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
-                          <CheckCircle2 className="size-5" />
+                          <CalendarIcon className="size-5" />
                         </div>
                         <div>
                           <p className="font-semibold text-sm">
-                            {t('attendance.empty.title')}
+                            {t('calendar.empty.title')}
                           </p>
                           <p className="mt-0.5 text-xs text-muted-foreground">
-                            {t('attendance.empty.description')}
+                            {t('calendar.empty.description')}
                           </p>
                         </div>
                         <Button
@@ -2391,67 +2677,72 @@ export default function TurmaDetalhePage() {
                       </div>
                     </div>
                   ) : (
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      {aulasState
-                        .slice(-12)
-                        .reverse()
-                        .map((aula) => {
-                          const sessionColor =
-                            aula.cor || aula.color || '#3b82f6';
-                          const isPast = getSessionEndDate(aula) < now;
-                          return (
-                            <Card
-                              key={aula.id}
-                              className="cursor-pointer overflow-hidden border-border/60 transition-all hover:-translate-y-0.5 hover:shadow-md"
-                              onClick={() => openPresenca(aula)}
-                            >
-                              <div className="flex">
-                                <div
-                                  className="w-1 shrink-0"
-                                  style={{ backgroundColor: sessionColor }}
-                                />
-                                <CardContent className="flex-1 p-3.5">
-                                  <div className="flex items-start justify-between gap-2">
-                                    <div className="min-w-0">
-                                      <h4 className="truncate text-sm font-semibold">
-                                        {aula.titulo}
-                                      </h4>
-                                      <p className="text-xs capitalize text-muted-foreground">
-                                        {format(
-                                          parseSessionDate(aula.data),
-                                          'EEE, dd/MM',
-                                          { locale: dateLocale }
-                                        )}
-                                        {' · '}
-                                        {aula.horaInicio} – {aula.horaFim}
-                                      </p>
-                                    </div>
-                                    <Badge
-                                      variant="outline"
-                                      className={cn(
-                                        'shrink-0 text-[10px]',
-                                        isPast
-                                          ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                                          : ''
-                                      )}
-                                    >
-                                      {isPast ? (
-                                        <CheckCircle2 className="mr-1 size-3" />
-                                      ) : aula.tipo === 'online' ? (
-                                        <Video className="mr-1 size-3" />
-                                      ) : (
-                                        <MapPin className="mr-1 size-3" />
-                                      )}
-                                      {isPast
-                                        ? t('attendance.register')
-                                        : tClasses(`type.${aula.tipo}`)}
-                                    </Badge>
+                    <div className="overflow-x-auto rounded-xl border border-border/60">
+                      <Table>
+                        <TableHeader>
+                          <TableRow className="bg-muted/40 hover:bg-muted/40">
+                            <TableHead className="sticky left-0 z-10 min-w-[180px] bg-muted/40 font-semibold">
+                              {t('tabs.students')}
+                            </TableHead>
+                            {aulasState.map((aula) => {
+                              const d = parseSessionDate(aula.data);
+                              return (
+                                <TableHead
+                                  key={aula.id}
+                                  className="min-w-[68px] text-center text-xs"
+                                >
+                                  <div className="flex flex-col items-center gap-0.5">
+                                    <span className="capitalize text-muted-foreground">
+                                      {format(d, 'EEE', {
+                                        locale: dateLocale,
+                                      })}
+                                    </span>
+                                    <span>{format(d, 'dd/MM')}</span>
                                   </div>
-                                </CardContent>
-                              </div>
-                            </Card>
-                          );
-                        })}
+                                </TableHead>
+                              );
+                            })}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {alunos.map((aluno) => (
+                            <TableRow
+                              key={aluno.id}
+                              className="hover:bg-muted/30"
+                            >
+                              <TableCell className="sticky left-0 z-10 border-r border-border/40 bg-background text-sm font-medium">
+                                {aluno.nome}
+                              </TableCell>
+                              {aulasState.map((aula) => {
+                                const cellKey = `${aula.id}-${aluno.id}`;
+                                const present =
+                                  attendanceMatrix[aula.id]?.[aluno.id] ??
+                                  false;
+                                const saving =
+                                  savingAttendanceCells.has(cellKey);
+                                return (
+                                  <TableCell
+                                    key={aula.id}
+                                    className="text-center"
+                                  >
+                                    <Checkbox
+                                      checked={present}
+                                      disabled={saving}
+                                      onCheckedChange={() =>
+                                        void toggleAttendanceCell(
+                                          aula.id,
+                                          aluno.id
+                                        )
+                                      }
+                                      aria-label={`${aluno.nome} – ${format(parseSessionDate(aula.data), 'dd/MM/yyyy')}`}
+                                    />
+                                  </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
                     </div>
                   )}
                 </TabsContent>
@@ -2589,6 +2880,62 @@ export default function TurmaDetalhePage() {
                 title={t('sidebar.classInfo') ?? 'Informações da Turma'}
               >
                 <div className="space-y-2.5">
+                  {/* Course */}
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <CourseAvatar
+                        fileId={courseDetail?.logoFileId}
+                        title={classTitle}
+                        className="size-8 shrink-0 rounded-lg"
+                        iconSize="size-4"
+                      />
+                      <div className="min-w-0">
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          Curso
+                        </p>
+                        <p className="truncate text-xs font-medium text-foreground">
+                          {classTitle || '—'}
+                        </p>
+                      </div>
+                    </div>
+                    <TooltipProvider delayDuration={300}>
+                      <div className="flex shrink-0 items-center gap-0.5">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-6"
+                              onClick={openCourseEditSheet}
+                              disabled={!courseDetail}
+                            >
+                              <Pencil className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-xs">
+                            Editar curso
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-6"
+                              onClick={handleViewCourse}
+                            >
+                              <Eye className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-xs">
+                            Ver detalhes do curso
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </TooltipProvider>
+                  </div>
+                  <div className="my-0.5 border-t border-border/40" />
+
                   {startDate && endDate && (
                     <div className="flex items-start gap-2 text-xs">
                       <CalendarIcon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
@@ -3531,6 +3878,19 @@ export default function TurmaDetalhePage() {
         defaultQualificationSlugs={['class-sessions']}
       />
 
+      <CourseFormSheet
+        key={`course-edit-${courseDetail?.id ?? 'none'}`}
+        open={courseSheetOpen}
+        onOpenChange={setCourseSheetOpen}
+        editing={true}
+        saving={savingCourse}
+        form={courseForm}
+        onSubmit={onSubmitCourse}
+        categories={courseCategoryOptions}
+        initialLogoFileId={courseDetail?.logoFileId ?? null}
+        t={tCourses}
+      />
+
       <ClassFormSheet
         open={editSheetOpen}
         onOpenChange={setEditSheetOpen}