@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/classes/[id]/_components/quick-create-session-popover.tsx.ejs

@@ -0,0 +1,1027 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Calendar as DateCalendar } from '@/components/ui/calendar';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import {
+  PopoverContent,
+  PopoverTrigger,
+  Popover as UiPopover,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { format } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  CalendarIcon,
+  CalendarPlus,
+  Clock3,
+  Loader2,
+  Search,
+  X,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Aula {
+  id: number;
+  titulo: string;
+  data: string;
+  horaInicio: string;
+  horaFim: string;
+  local: string;
+  meetingUrl: string;
+  tipo: 'presencial' | 'online';
+  status: string;
+  instructorId?: number | null;
+  instructorName?: string;
+  recurrence?: {
+    frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
+    interval: number;
+    until: string;
+    daysOfWeek?: Array<'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU'>;
+  } | null;
+  recurrenceId?: string | null;
+  occurrenceIndex?: number | null;
+  isException?: boolean;
+  isRecurring?: boolean;
+  cor?: string | null;
+  color?: string | null;
+}
+
+type SessionRecurrenceFrequency =
+  | 'none'
+  | 'daily'
+  | 'weekly'
+  | 'monthly'
+  | 'yearly';
+
+type SessionRecurrenceDay = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
+
+interface QuickCreateSlot {
+  date: string; // YYYY-MM-DD
+  startTime: string; // HH:MM
+  endTime: string; // HH:MM
+}
+
+interface QuickCreateAttendanceItem {
+  alunoId: number;
+  selecionado: boolean;
+  presente: boolean;
+}
+
+interface QuickCreateStudent {
+  id: number;
+  nome: string;
+}
+
+interface QuickCreateSessionPopoverProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  slot: QuickCreateSlot | null;
+  anchor: { x: number; y: number } | null;
+  classId: string;
+  students: QuickCreateStudent[];
+  onSaved: (aula: Aula) => void;
+  onMoreOptions: (values: {
+    titulo: string;
+    data: string;
+    horaInicio: string;
+    horaFim: string;
+    cor: string;
+    recurrenceFrequency?: SessionRecurrenceFrequency;
+    recurrenceUntil?: string;
+    recurrenceDaysOfWeek?: SessionRecurrenceDay[];
+    attendance: QuickCreateAttendanceItem[];
+    initialTab: 'aulas' | 'chamada';
+  }) => void;
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const SESSION_RECURRENCE_FREQUENCIES = [
+  'none',
+  'daily',
+  'weekly',
+  'monthly',
+  'yearly',
+] as const;
+
+const SESSION_RECURRENCE_DAYS = [
+  'MO',
+  'TU',
+  'WE',
+  'TH',
+  'FR',
+  'SA',
+  'SU',
+] as const;
+
+const SESSION_COLOR_PALETTE = [
+  '#3b82f6',
+  '#22c55e',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+  '#f97316',
+  '#64748b',
+] as const;
+
+const SESSION_DEFAULT_COLOR = SESSION_COLOR_PALETTE[0];
+
+const quickCreateSchema = z
+  .object({
+    titulo: z.string().min(1, 'Título é obrigatório').max(255),
+    data: z.string().min(1, 'Data é obrigatória'),
+    horaInicio: z
+      .string()
+      .regex(/^([01]\d|2[0-3]):([0-5]\d)$/, 'Hora inválida'),
+    horaFim: z.string().regex(/^([01]\d|2[0-3]):([0-5]\d)$/, 'Hora inválida'),
+    cor: z
+      .string()
+      .regex(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, 'Cor inválida')
+      .default(SESSION_DEFAULT_COLOR),
+    recurrenceFrequency: z.enum(SESSION_RECURRENCE_FREQUENCIES).default('none'),
+    recurrenceUntil: z.string().optional(),
+    recurrenceDaysOfWeek: z.array(z.enum(SESSION_RECURRENCE_DAYS)).default([]),
+  })
+  .superRefine((values, context) => {
+    if (values.recurrenceFrequency === 'none') {
+      return;
+    }
+
+    if (!values.recurrenceUntil) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Data final é obrigatória',
+        path: ['recurrenceUntil'],
+      });
+      return;
+    }
+
+    if (values.recurrenceUntil < values.data) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'A data final deve ser igual ou posterior à data inicial',
+        path: ['recurrenceUntil'],
+      });
+    }
+  });
+
+type QuickCreateForm = z.infer<typeof quickCreateSchema>;
+
+const PANEL_W = 360;
+const PANEL_H = 520;
+const TIME_HOURS = Array.from({ length: 24 }, (_, index) =>
+  String(index).padStart(2, '0')
+);
+const TIME_MINUTES = Array.from({ length: 60 }, (_, index) =>
+  String(index).padStart(2, '0')
+);
+
+const RECURRENCE_DAY_LABELS: Array<{
+  value: SessionRecurrenceDay;
+  labelKey: string;
+}> = [
+  { value: 'MO', labelKey: 'quickCreate.recurrence.days.monday' },
+  { value: 'TU', labelKey: 'quickCreate.recurrence.days.tuesday' },
+  { value: 'WE', labelKey: 'quickCreate.recurrence.days.wednesday' },
+  { value: 'TH', labelKey: 'quickCreate.recurrence.days.thursday' },
+  { value: 'FR', labelKey: 'quickCreate.recurrence.days.friday' },
+  { value: 'SA', labelKey: 'quickCreate.recurrence.days.saturday' },
+  { value: 'SU', labelKey: 'quickCreate.recurrence.days.sunday' },
+];
+
+function parseTimeParts(value?: string) {
+  const [hour = '00', minute = '00'] = (value ?? '00:00').split(':');
+
+  return {
+    hour: /^\d{2}$/.test(hour) ? hour : '00',
+    minute: /^\d{2}$/.test(minute) ? minute : '00',
+  };
+}
+
+function buildTimeValue(hour: string, minute: string) {
+  return `${hour}:${minute}`;
+}
+
+function getDayCodeFromDate(value: string): SessionRecurrenceDay {
+  const day = new Date(`${value}T12:00:00`).getDay();
+  return ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'][
+    day
+  ] as SessionRecurrenceDay;
+}
+
+function buildRecurrencePayload(values: QuickCreateForm) {
+  if (values.recurrenceFrequency === 'none') {
+    return undefined;
+  }
+
+  return {
+    frequency: values.recurrenceFrequency,
+    interval: 1,
+    until: values.recurrenceUntil,
+    ...(values.recurrenceFrequency === 'weekly'
+      ? {
+          daysOfWeek:
+            values.recurrenceDaysOfWeek.length > 0
+              ? values.recurrenceDaysOfWeek
+              : [getDayCodeFromDate(values.data)],
+        }
+      : {}),
+  };
+}
+
+function TimePickerField({
+  value,
+  onChange,
+}: {
+  value?: string;
+  onChange: (value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const { hour, minute } = parseTimeParts(value);
+
+  return (
+    <UiPopover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full justify-start text-left font-normal"
+        >
+          <Clock3 className="mr-2 size-4" />
+          {buildTimeValue(hour, minute)}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-55 p-3" align="start">
+        <div className="grid grid-cols-2 gap-2">
+          <Select
+            value={hour}
+            onValueChange={(nextHour) =>
+              onChange(buildTimeValue(nextHour, minute))
+            }
+          >
+            <SelectTrigger className="h-9 text-sm">
+              <SelectValue placeholder="00" />
+            </SelectTrigger>
+            <SelectContent className="max-h-64">
+              {TIME_HOURS.map((timeHour) => (
+                <SelectItem key={timeHour} value={timeHour}>
+                  {timeHour}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            value={minute}
+            onValueChange={(nextMinute) => {
+              onChange(buildTimeValue(hour, nextMinute));
+              setOpen(false);
+            }}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              <SelectValue placeholder="00" />
+            </SelectTrigger>
+            <SelectContent className="max-h-64">
+              {TIME_MINUTES.map((timeMinute) => (
+                <SelectItem key={timeMinute} value={timeMinute}>
+                  {timeMinute}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </PopoverContent>
+    </UiPopover>
+  );
+}
+
+function computePosition(anchor: { x: number; y: number }) {
+  const GAP = 10;
+  const MARGIN = 12;
+  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024;
+  const vh = typeof window !== 'undefined' ? window.innerHeight : 768;
+
+  let left = anchor.x + GAP;
+  let top = anchor.y + GAP;
+
+  if (left + PANEL_W > vw - MARGIN) {
+    left = anchor.x - PANEL_W - GAP;
+  }
+  if (top + PANEL_H > vh - MARGIN) {
+    top = anchor.y - PANEL_H - GAP;
+  }
+
+  return {
+    top: Math.max(MARGIN, top),
+    left: Math.max(MARGIN, left),
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function QuickCreateSessionPopover({
+  open,
+  onOpenChange,
+  slot,
+  anchor,
+  classId,
+  students,
+  onSaved,
+  onMoreOptions,
+}: QuickCreateSessionPopoverProps) {
+  const t = useTranslations('lms.ClassesPage.DetailPage');
+  const localeCode = useLocale();
+  const { request } = useApp();
+  const titleRef = useRef<HTMLInputElement | null>(null);
+  const [activeTab, setActiveTab] = useState<'aulas' | 'chamada'>('aulas');
+  const [attendanceSearch, setAttendanceSearch] = useState('');
+  const [attendanceList, setAttendanceList] = useState<
+    QuickCreateAttendanceItem[]
+  >(() =>
+    students.map((student) => ({
+      alunoId: student.id,
+      selecionado: false,
+      presente: false,
+    }))
+  );
+
+  const form = useForm<QuickCreateForm>({
+    resolver: zodResolver(quickCreateSchema),
+    defaultValues: {
+      titulo: '',
+      data: slot?.date ?? '',
+      horaInicio: slot?.startTime ?? '19:00',
+      horaFim: slot?.endTime ?? '22:00',
+      cor: SESSION_DEFAULT_COLOR,
+      recurrenceFrequency: 'none',
+      recurrenceUntil: '',
+      recurrenceDaysOfWeek: [],
+    },
+  });
+
+  // Reset form with new slot defaults each time the popover opens
+  useEffect(() => {
+    if (open && slot) {
+      form.reset({
+        titulo: '',
+        data: slot.date,
+        horaInicio: slot.startTime,
+        horaFim: slot.endTime,
+        cor: SESSION_DEFAULT_COLOR,
+        recurrenceFrequency: 'none',
+        recurrenceUntil: '',
+        recurrenceDaysOfWeek: [],
+      });
+      requestAnimationFrame(() => titleRef.current?.focus());
+    }
+  }, [open, slot, form, students]);
+
+  const handleClose = useCallback(() => {
+    setActiveTab('aulas');
+    setAttendanceSearch('');
+    setAttendanceList(
+      students.map((student) => ({
+        alunoId: student.id,
+        selecionado: false,
+        presente: false,
+      }))
+    );
+    onOpenChange(false);
+  }, [onOpenChange, students]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [open, handleClose]);
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    control,
+    formState: { errors, isSubmitting },
+  } = form;
+
+  const { ref: titleFormRef, ...titleInputProps } = register('titulo');
+  const selectedDateValue = useWatch({ control, name: 'data' });
+  const startTimeValue = useWatch({ control, name: 'horaInicio' });
+  const endTimeValue = useWatch({ control, name: 'horaFim' });
+  const recurrenceFrequency = useWatch({
+    control,
+    name: 'recurrenceFrequency',
+  });
+  const recurrenceUntilValue = useWatch({
+    control,
+    name: 'recurrenceUntil',
+  });
+  const recurrenceDaysOfWeek =
+    useWatch({ control, name: 'recurrenceDaysOfWeek' }) ?? [];
+  const selectedColor = useWatch({ control, name: 'cor' });
+  const calendarLocale = localeCode.startsWith('pt') ? ptBR : enUS;
+  const selectedDate = selectedDateValue
+    ? new Date(`${selectedDateValue}T00:00:00`)
+    : undefined;
+  const selectedRecurrenceUntil = recurrenceUntilValue
+    ? new Date(`${recurrenceUntilValue}T00:00:00`)
+    : undefined;
+  const filteredStudents = students.filter((student) =>
+    student.nome.toLowerCase().includes(attendanceSearch.trim().toLowerCase())
+  );
+
+  const togglePresenca = (alunoId: number) => {
+    setAttendanceList((prev) =>
+      prev.map((item) =>
+        item.alunoId === alunoId
+          ? { ...item, selecionado: true, presente: !item.presente }
+          : item
+      )
+    );
+  };
+
+  const toggleParticipante = (alunoId: number) => {
+    setAttendanceList((prev) =>
+      prev.map((item) =>
+        item.alunoId === alunoId
+          ? {
+              ...item,
+              selecionado: !item.selecionado,
+              presente: item.selecionado ? false : item.presente,
+            }
+          : item
+      )
+    );
+  };
+
+  const onSave = handleSubmit(async (values) => {
+    try {
+      const res = await request<Aula>({
+        url: `/lms/classes/${classId}/sessions`,
+        method: 'POST',
+        data: {
+          title: values.titulo,
+          sessionDate: values.data,
+          startTime: values.horaInicio,
+          endTime: values.horaFim,
+          color: values.cor,
+          recurrence: buildRecurrencePayload(values),
+        },
+      });
+
+      const selectedAttendance = attendanceList.filter(
+        (item) => item.selecionado
+      );
+
+      if (selectedAttendance.length > 0) {
+        try {
+          await request({
+            url: `/lms/classes/${classId}/sessions/${res.data.id}/attendance`,
+            method: 'POST',
+            data: {
+              attendance: selectedAttendance.map((item) => ({
+                studentId: item.alunoId,
+                present: item.presente,
+              })),
+            },
+          });
+        } catch {
+          toast.error(t('quickCreate.attendancePartialError'));
+        }
+      }
+
+      onSaved(res.data);
+      handleClose();
+      toast.success(t('toasts.lessonCreated'));
+    } catch {
+      toast.error(t('toasts.error'));
+    }
+  });
+
+  const onMoreOptionsClick = () => {
+    const values = getValues();
+    handleClose();
+    onMoreOptions({
+      titulo: values.titulo,
+      data: values.data,
+      horaInicio: values.horaInicio,
+      horaFim: values.horaFim,
+      cor: values.cor,
+      recurrenceFrequency: values.recurrenceFrequency,
+      recurrenceUntil: values.recurrenceUntil,
+      recurrenceDaysOfWeek: values.recurrenceDaysOfWeek,
+      attendance: attendanceList,
+      initialTab: activeTab,
+    });
+  };
+
+  if (!open || typeof document === 'undefined') {
+    return null;
+  }
+
+  const pos = anchor ? computePosition(anchor) : { top: 80, left: 80 };
+
+  return createPortal(
+    <>
+      <div className="fixed inset-0 z-40" onClick={handleClose} />
+
+      <div
+        className="fixed z-50 w-90 max-h-[calc(100vh-24px)] overflow-y-auto rounded-lg border bg-popover p-4 shadow-lg outline-none"
+        style={{ top: pos.top, left: pos.left }}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="mb-3 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <CalendarPlus className="size-4 text-muted-foreground" />
+            <p className="text-sm font-semibold">{t('quickCreate.title')}</p>
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="rounded p-0.5 text-muted-foreground hover:text-foreground"
+            aria-label="Fechar"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+
+        <form onSubmit={onSave} className="space-y-3">
+          <Tabs
+            value={activeTab}
+            onValueChange={(value) =>
+              setActiveTab(value as 'aulas' | 'chamada')
+            }
+            className="space-y-3"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="aulas">
+                {t('quickCreate.tabs.lessons')}
+              </TabsTrigger>
+              <TabsTrigger value="chamada">
+                {t('quickCreate.tabs.attendance')}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="aulas" className="mt-0 space-y-3">
+              <div>
+                <Input
+                  {...titleInputProps}
+                  ref={(element) => {
+                    titleFormRef(element);
+                    titleRef.current = element;
+                  }}
+                  placeholder={t('quickCreate.titlePlaceholder')}
+                  autoComplete="off"
+                />
+                {errors.titulo && (
+                  <p className="mt-1 text-xs text-destructive">
+                    {errors.titulo.message}
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <UiPopover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className={cn(
+                        'w-full justify-start text-left font-normal',
+                        !selectedDate && 'text-muted-foreground'
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 size-4" />
+                      {selectedDate
+                        ? format(selectedDate, 'dd/MM/yyyy', {
+                            locale: calendarLocale,
+                          })
+                        : t('quickCreate.datePlaceholder')}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <DateCalendar
+                      mode="single"
+                      selected={selectedDate}
+                      onSelect={(date) => {
+                        if (!date) return;
+
+                        const year = date.getFullYear();
+                        const month = String(date.getMonth() + 1).padStart(
+                          2,
+                          '0'
+                        );
+                        const day = String(date.getDate()).padStart(2, '0');
+                        setValue('data', `${year}-${month}-${day}`, {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                      }}
+                      locale={calendarLocale}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </UiPopover>
+                {errors.data && (
+                  <p className="mt-1 text-xs text-destructive">
+                    {errors.data.message}
+                  </p>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <TimePickerField
+                    value={startTimeValue}
+                    onChange={(value) =>
+                      setValue('horaInicio', value, {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      })
+                    }
+                  />
+                  {errors.horaInicio && (
+                    <p className="mt-1 text-xs text-destructive">
+                      {errors.horaInicio.message}
+                    </p>
+                  )}
+                </div>
+                <div>
+                  <TimePickerField
+                    value={endTimeValue}
+                    onChange={(value) =>
+                      setValue('horaFim', value, {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      })
+                    }
+                  />
+                  {errors.horaFim && (
+                    <p className="mt-1 text-xs text-destructive">
+                      {errors.horaFim.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <p className="text-xs font-medium text-foreground">
+                  {t('quickCreate.color.label')}
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {SESSION_COLOR_PALETTE.map((colorOption) => {
+                    const selected = selectedColor === colorOption;
+
+                    return (
+                      <button
+                        key={colorOption}
+                        type="button"
+                        aria-label={colorOption}
+                        title={colorOption}
+                        className={`h-7 w-7 cursor-pointer rounded-full border-2 transition ${selected ? 'border-foreground scale-110' : 'border-transparent hover:scale-105'}`}
+                        style={{ backgroundColor: colorOption }}
+                        onClick={() =>
+                          setValue('cor', colorOption, {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          })
+                        }
+                      />
+                    );
+                  })}
+                </div>
+                <p className="text-[11px] text-muted-foreground">
+                  {t('quickCreate.color.hint')}
+                </p>
+                {errors.cor && (
+                  <p className="text-xs text-destructive">
+                    {errors.cor.message}
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-3 rounded-md border border-border/60 bg-muted/20 p-3">
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1.5">
+                    <p className="text-xs font-medium text-foreground">
+                      {t('quickCreate.recurrence.label')}
+                    </p>
+                    <Select
+                      value={recurrenceFrequency}
+                      onValueChange={(value) =>
+                        setValue(
+                          'recurrenceFrequency',
+                          value as SessionRecurrenceFrequency,
+                          {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          }
+                        )
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">
+                          {t('quickCreate.recurrence.options.none')}
+                        </SelectItem>
+                        <SelectItem value="daily">
+                          {t('quickCreate.recurrence.options.daily')}
+                        </SelectItem>
+                        <SelectItem value="weekly">
+                          {t('quickCreate.recurrence.options.weekly')}
+                        </SelectItem>
+                        <SelectItem value="monthly">
+                          {t('quickCreate.recurrence.options.monthly')}
+                        </SelectItem>
+                        <SelectItem value="yearly">
+                          {t('quickCreate.recurrence.options.yearly')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {recurrenceFrequency !== 'none' ? (
+                    <div className="space-y-1.5">
+                      <p className="text-xs font-medium text-foreground">
+                        {t('quickCreate.recurrence.until')}
+                      </p>
+                      <UiPopover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            className={cn(
+                              'w-full justify-start text-left font-normal',
+                              !selectedRecurrenceUntil &&
+                                'text-muted-foreground'
+                            )}
+                          >
+                            <CalendarIcon className="mr-2 size-4" />
+                            {selectedRecurrenceUntil
+                              ? format(selectedRecurrenceUntil, 'dd/MM/yyyy', {
+                                  locale: calendarLocale,
+                                })
+                              : t('quickCreate.recurrence.until')}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <DateCalendar
+                            mode="single"
+                            selected={selectedRecurrenceUntil}
+                            onSelect={(date) => {
+                              if (!date) return;
+
+                              const year = date.getFullYear();
+                              const month = String(
+                                date.getMonth() + 1
+                              ).padStart(2, '0');
+                              const day = String(date.getDate()).padStart(
+                                2,
+                                '0'
+                              );
+
+                              setValue(
+                                'recurrenceUntil',
+                                `${year}-${month}-${day}`,
+                                {
+                                  shouldDirty: true,
+                                  shouldValidate: true,
+                                }
+                              );
+                            }}
+                            locale={calendarLocale}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </UiPopover>
+                      {errors.recurrenceUntil && (
+                        <p className="text-xs text-destructive">
+                          {errors.recurrenceUntil.message}
+                        </p>
+                      )}
+                    </div>
+                  ) : null}
+                </div>
+
+                {recurrenceFrequency === 'weekly' ? (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-foreground">
+                      {t('quickCreate.recurrence.daysLabel')}
+                    </p>
+                    <div className="grid grid-cols-4 gap-2">
+                      {RECURRENCE_DAY_LABELS.map((day) => {
+                        const selected = recurrenceDaysOfWeek.includes(
+                          day.value
+                        );
+
+                        return (
+                          <Button
+                            key={day.value}
+                            type="button"
+                            variant={selected ? 'default' : 'outline'}
+                            size="sm"
+                            className="h-8"
+                            onClick={() => {
+                              const nextValue = selected
+                                ? recurrenceDaysOfWeek.filter(
+                                    (value) => value !== day.value
+                                  )
+                                : [...recurrenceDaysOfWeek, day.value];
+
+                              setValue('recurrenceDaysOfWeek', nextValue, {
+                                shouldDirty: true,
+                                shouldValidate: true,
+                              });
+                            }}
+                          >
+                            {t(day.labelKey)}
+                          </Button>
+                        );
+                      })}
+                    </div>
+                    <p className="text-[11px] text-muted-foreground">
+                      {t('quickCreate.recurrence.weeklyHint')}
+                    </p>
+                  </div>
+                ) : null}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="chamada" className="mt-0 space-y-3">
+              {students.length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  {t('quickCreate.noStudents')}
+                </p>
+              ) : (
+                <>
+                  <div className="relative">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      value={attendanceSearch}
+                      onChange={(event) =>
+                        setAttendanceSearch(event.currentTarget.value)
+                      }
+                      className="pl-8"
+                      placeholder={t('quickCreate.searchPlaceholder')}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span>
+                      {t('quickCreate.attendanceSummary', {
+                        present: attendanceList.filter(
+                          (item) => item.selecionado && item.presente
+                        ).length,
+                        total: attendanceList.filter((item) => item.selecionado)
+                          .length,
+                      })}
+                    </span>
+                    <div className="flex gap-1">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-7 px-2 text-[11px]"
+                        onClick={() =>
+                          setAttendanceList((prev) =>
+                            prev.map((item) =>
+                              item.selecionado
+                                ? { ...item, presente: true }
+                                : item
+                            )
+                          )
+                        }
+                      >
+                        {t('quickCreate.allPresent')}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-7 px-2 text-[11px]"
+                        onClick={() =>
+                          setAttendanceList((prev) =>
+                            prev.map((item) =>
+                              item.selecionado
+                                ? { ...item, presente: false }
+                                : item
+                            )
+                          )
+                        }
+                      >
+                        {t('quickCreate.allAbsent')}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    {filteredStudents.length === 0 ? (
+                      <p className="text-xs text-muted-foreground">
+                        {t('quickCreate.noStudentsFound')}
+                      </p>
+                    ) : null}
+
+                    {filteredStudents.map((student) => {
+                      const item = attendanceList.find(
+                        (entry) => entry.alunoId === student.id
+                      );
+                      if (!item) return null;
+
+                      return (
+                        <div
+                          key={student.id}
+                          className={`flex items-center justify-between rounded-md border px-2.5 py-2 ${item.selecionado ? (item.presente ? 'border-emerald-200 bg-emerald-50/50' : 'border-red-200 bg-red-50/50') : 'border-border/60 bg-muted/30'}`}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Checkbox
+                              checked={item.selecionado}
+                              onCheckedChange={() =>
+                                toggleParticipante(student.id)
+                              }
+                              aria-label={t('quickCreate.participantLabel')}
+                            />
+                            <span className="max-w-52 truncate text-sm font-medium">
+                              {student.nome}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-[11px] text-muted-foreground">
+                              {item.selecionado
+                                ? item.presente
+                                  ? t('quickCreate.present')
+                                  : t('quickCreate.absent')
+                                : t('quickCreate.notParticipant')}
+                            </span>
+                            <Switch
+                              checked={item.presente}
+                              disabled={!item.selecionado}
+                              onCheckedChange={() => togglePresenca(student.id)}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </TabsContent>
+          </Tabs>
+
+          <div className="flex items-center justify-between gap-2 pt-1">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="text-xs"
+              onClick={onMoreOptionsClick}
+            >
+              {t('quickCreate.moreOptions')}
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              disabled={isSubmitting}
+              className="gap-1.5"
+            >
+              {isSubmitting && <Loader2 className="size-3 animate-spin" />}
+              {t('quickCreate.save')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>,
+    document.body
+  );
+}