@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -12,12 +12,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { EntityPicker } from '@/components/ui/entity-picker';
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
 import {
   Popover,
@@ -33,12 +28,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 { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { format } from 'date-fns';
@@ -57,6 +52,7 @@ import {
   type CourseCategoryOption,
   type CourseSheetFormValues,
 } from './course-form-sheet';
+import { CoursePicker } from './course-picker';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -104,14 +100,6 @@ export type ApiClass = {
   sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
 };
 
-type ApiCourseList = {
-  data: Array<{ id: number; title: string }>;
-  total?: number;
-  page?: number;
-  pageSize?: number;
-  lastPage?: number;
-};
-
 type ApiCategoryList = {
   data: ApiCategory[];
   total: number;
@@ -131,6 +119,21 @@ type ApiCreatedCourse = {
   title: 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;
+  operationsProjectId?: number | null;
+};
+
 type InstructorOption = {
   id: number;
   name: string;
@@ -367,6 +370,18 @@ function toApiCourseStatus(status: CourseSheetFormValues['status']) {
   return 'archived';
 }
 
+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';
+}
+
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 const TIME_OPTIONS = Array.from({ length: 32 }, (_, index) => {
@@ -558,6 +573,8 @@ export function ClassFormSheet({
     null
   );
   const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
+  const [coursePickerRefreshToken, setCoursePickerRefreshToken] = useState(0);
   const [customRecurrenceDialogOpen, setCustomRecurrenceDialogOpen] =
     useState(false);
   const [previousRecurrenceMode, setPreviousRecurrenceMode] =
@@ -749,11 +766,6 @@ export function ClassFormSheet({
   )
     ? t('form.fields.sessionAccess.placeholder')
     : 'Sala 201 ou https://meet.google.com/...';
-  const sessionAccessDescription = t.has(
-    'form.fields.sessionAccess.description'
-  )
-    ? t('form.fields.sessionAccess.description')
-    : 'Opcional. Quando preenchido, será aplicado a todas as aulas geradas para esta turma.';
 
   const filteredEndTimeOptions = useMemo(() => {
     const startTime = watchedFormValues.horarioInicio ?? '';
@@ -793,20 +805,6 @@ export function ClassFormSheet({
     [t]
   );
 
-  const recurrenceSummaryText = useMemo(() => {
-    const until = watchedFormValues.sessionRecurrenceUntil
-      ? formatDate(watchedFormValues.sessionRecurrenceUntil)
-      : '--';
-    return t(
-      `form.recurrence.summary.${watchedFormValues.sessionRecurrenceMode}`,
-      { until }
-    );
-  }, [
-    t,
-    watchedFormValues.sessionRecurrenceMode,
-    watchedFormValues.sessionRecurrenceUntil,
-  ]);
-
   const customRecurrenceFrequency =
     watchedFormValues.sessionRecurrenceMode === 'custom'
       ? watchedFormValues.sessionRecurrenceCustomFrequency
@@ -1024,32 +1022,71 @@ export function ClassFormSheet({
         description: data.descricao,
         level: toApiCourseLevel(data.nivel),
         status: toApiCourseStatus(data.status),
+        offeringType: 'scheduled' as const,
         categorySlugs: data.categorias,
         primaryColor: data.primaryColor,
         primaryContrastColor: getContrastColor(data.primaryColor),
         secondaryColor: data.secondaryColor,
         secondaryContrastColor: getContrastColor(data.secondaryColor),
+        operationsProjectId: data.operationsProjectId
+          ? Number(data.operationsProjectId)
+          : null,
       };
 
-      const response = await request<ApiCreatedCourse>({
-        url: '/lms/courses',
-        method: 'POST',
-        data: payload,
-      });
+      if (editingCourseId) {
+        await request({
+          url: `/lms/courses/${editingCourseId}`,
+          method: 'PATCH',
+          data: {
+            slug: data.nomeInterno.trim().toLowerCase(),
+            title: data.tituloComercial,
+            description: data.descricao,
+            level: toApiCourseLevel(data.nivel),
+            status: toApiCourseStatus(data.status),
+            categorySlugs: data.categorias,
+            primaryColor: data.primaryColor,
+            primaryContrastColor: getContrastColor(data.primaryColor),
+            secondaryColor: data.secondaryColor,
+            secondaryContrastColor: getContrastColor(data.secondaryColor),
+            operationsProjectId: data.operationsProjectId
+              ? Number(data.operationsProjectId)
+              : null,
+            logoFileId: data.logoFileId ?? null,
+          },
+        });
 
-      const createdCourse = response.data;
-      form.setValue('courseId', createdCourse.id, {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
-      });
-      form.setValue('curso', createdCourse.title, {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: false,
-      });
+        form.setValue('curso', data.tituloComercial, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: false,
+        });
+
+        toast.success(courseSheetT('toasts.courseUpdated'));
+      } else {
+        const response = await request<ApiCreatedCourse>({
+          url: '/lms/courses',
+          method: 'POST',
+          data: payload,
+        });
+
+        const createdCourse = response.data;
+        form.setValue('courseId', createdCourse.id, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
+        form.setValue('curso', createdCourse.title, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: false,
+        });
+
+        toast.success(courseSheetT('toasts.courseCreated'));
+      }
+
+      setCoursePickerRefreshToken((current) => current + 1);
+      setEditingCourseId(null);
       setCourseSheetOpen(false);
-      toast.success(courseSheetT('toasts.courseCreated'));
     } catch {
       toast.error(t('messages.classCreateCourseError'));
     } finally {
@@ -1136,9 +1173,13 @@ export function ClassFormSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-class-form-sheet"
+          defaultWidth={672}
+          minWidth={460}
+          maxWidth={1100}
           side="right"
-          className="flex w-full flex-col overflow-y-auto sm:max-w-2xl"
+          className="flex w-full flex-col overflow-y-auto"
         >
           <SheetHeader className="shrink-0">
             <SheetTitle>
@@ -1157,9 +1198,9 @@ export function ClassFormSheet({
           ) : (
             <form
               onSubmit={form.handleSubmit(onSubmit)}
-              className="flex flex-1 flex-col gap-5 px-4 py-6"
+              className="flex flex-1 flex-col gap-4 px-4 py-6"
             >
-              <div className="grid gap-4 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                 <Field>
                   <FieldLabel htmlFor="codigo">
                     {t('form.fields.code.label')}
@@ -1170,9 +1211,6 @@ export function ClassFormSheet({
                     readOnly
                     className="uppercase"
                   />
-                  <FieldDescription>
-                    Codigo gerado automaticamente pelo sistema.
-                  </FieldDescription>
                   <FieldError>
                     {form.formState.errors.codigo?.message}
                   </FieldError>
@@ -1183,242 +1221,223 @@ export function ClassFormSheet({
                     {t('form.fields.course.label')}{' '}
                     <span className="text-destructive">*</span>
                   </FieldLabel>
-                  <div className="flex items-end gap-2">
-                    <div className="min-w-0 flex-1">
-                      <EntityPicker<{ id: number; title: string }, TurmaForm>
-                        form={form}
-                        name="courseId"
-                        valueType="number"
-                        placeholder={t('form.fields.course.placeholder')}
-                        entityLabel={t('form.fields.course.label')}
-                        initialSelectedLabel={selectedCourseTitle}
-                        searchPlaceholder={t('form.fields.course.placeholder')}
-                        emptyStateDescription={t(
-                          'components.entityPicker.courses.empty'
-                        )}
-                        loadingLabel={t(
-                          'components.entityPicker.courses.loading'
-                        )}
-                        noResultsLabel={t(
-                          'components.entityPicker.courses.empty'
-                        )}
-                        disabled={lockCourse}
-                        showCreateButton={false}
-                        onChange={(value, option) => {
-                          const cId =
-                            typeof value === 'number' ? value : undefined;
-                          const cTitle =
-                            option && typeof option.title === 'string'
-                              ? option.title
-                              : '';
-                          form.setValue('courseId', cId, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          });
-                          form.setValue('curso', cTitle, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: false,
-                          });
-                        }}
-                        loadOptions={async ({ page, pageSize, search }) => {
-                          const response = await request<ApiCourseList>({
-                            url: '/lms/courses',
-                            method: 'GET',
-                            params: {
-                              page,
-                              pageSize,
-                              ...(search.trim()
-                                ? { search: search.trim() }
-                                : {}),
-                            },
-                          });
-                          return {
-                            items: response.data?.data ?? [],
-                            hasMore: page < (response.data?.lastPage ?? 1),
-                          };
+                  <CoursePicker<TurmaForm>
+                    form={form}
+                    name="courseId"
+                    selectedCourseTitle={selectedCourseTitle}
+                    placeholder={t('form.fields.course.placeholder')}
+                    entityLabel={t('form.fields.course.label')}
+                    searchPlaceholder={t('form.fields.course.placeholder')}
+                    emptyStateDescription={t(
+                      'components.entityPicker.courses.empty'
+                    )}
+                    loadingLabel={t('components.entityPicker.courses.loading')}
+                    noResultsLabel={t('components.entityPicker.courses.empty')}
+                    disabled={lockCourse}
+                    allowClearSelection={!lockCourse}
+                    showCreateButton={!lockCourse}
+                    showEditButton={!lockCourse}
+                    searchEndpoint="/lms/courses"
+                    searchExtraParams={{
+                      offeringTypes: 'scheduled,blended',
+                    }}
+                    refreshToken={coursePickerRefreshToken}
+                    onSelectionChange={(value, option) => {
+                      const cId = typeof value === 'number' ? value : undefined;
+                      const cTitle =
+                        option && typeof option.title === 'string'
+                          ? option.title
+                          : '';
+
+                      form.setValue('courseId', cId, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                        shouldValidate: true,
+                      });
+                      form.setValue('curso', cTitle, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                        shouldValidate: false,
+                      });
+                    }}
+                    onCreateClick={() => {
+                      setEditingCourseId(null);
+                      courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
+                      setCourseSheetOpen(true);
+                    }}
+                    onEditClick={async (selected) => {
+                      if (!selected?.id) return;
+
+                      const response = await request<ApiCourseDetail>({
+                        url: `/lms/courses/${selected.id}`,
+                        method: 'GET',
+                      });
+
+                      const detail = response.data;
+                      setEditingCourseId(detail.id);
+                      courseForm.reset({
+                        nomeInterno: detail.slug ?? detail.code ?? '',
+                        tituloComercial: detail.title ?? '',
+                        descricao: detail.description ?? '',
+                        nivel: toCourseFormLevel(detail.level),
+                        status: toCourseFormStatus(detail.status),
+                        categorias: detail.categories ?? [],
+                        operationsProjectId: detail.operationsProjectId
+                          ? String(detail.operationsProjectId)
+                          : '',
+                        primaryColor: detail.primaryColor ?? '#1D4ED8',
+                        secondaryColor: detail.secondaryColor ?? '#111827',
+                        logoFileId: detail.logoFileId ?? null,
+                      });
+                      setCourseSheetOpen(true);
+                    }}
+                  />
+                </Field>
+              </div>
+
+              <div className="space-y-3">
+                <Field>
+                  <FieldLabel>
+                    {t('form.fields.startDate.label')} /{' '}
+                    {t('form.fields.endDate.label')}{' '}
+                    <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Popover open={dateRangeOpen} onOpenChange={setDateRangeOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className={`w-full justify-start text-left font-normal ${
+                          !watchedFormValues.dataInicio ||
+                          !watchedFormValues.dataFim
+                            ? 'text-muted-foreground'
+                            : ''
+                        }`}
+                      >
+                        <CalendarIcon className="mr-2 size-4" />
+                        {formatDateRangeLabel(
+                          watchedFormValues.dataInicio,
+                          watchedFormValues.dataFim
+                        ) || t('form.fields.startDate.placeholder')}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="range"
+                        numberOfMonths={2}
+                        selected={dateRangeDraft}
+                        onSelect={(range) => {
+                          setDateRangeDraft(range);
+                          if (!range?.from || !range?.to) {
+                            form.setValue('dataInicio', '', {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            });
+                            form.setValue('dataFim', '', {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            });
+                            return;
+                          }
+                          form.setValue(
+                            'dataInicio',
+                            format(range.from, 'yyyy-MM-dd'),
+                            {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            }
+                          );
+                          form.setValue(
+                            'dataFim',
+                            format(range.to, 'yyyy-MM-dd'),
+                            {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            }
+                          );
                         }}
-                        getOptionValue={(option) => option.id}
-                        getOptionLabel={(option) => option.title}
+                        initialFocus
                       />
-                    </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="shrink-0"
-                      disabled={lockCourse}
-                      onClick={() => {
-                        courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
-                        setCourseSheetOpen(true);
-                      }}
-                      aria-label="Cadastrar novo curso"
-                    >
-                      <Plus className="h-4 w-4" />
-                    </Button>
-                  </div>
+                    </PopoverContent>
+                  </Popover>
+                  <FieldError>
+                    {form.formState.errors.dataInicio?.message ||
+                      form.formState.errors.dataFim?.message}
+                  </FieldError>
                 </Field>
-              </div>
 
-              <div className="rounded-lg border border-border/70 p-4">
-                <div className="grid gap-4">
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                   <Field>
-                    <FieldLabel>
-                      {t('form.fields.startDate.label')} /{' '}
-                      {t('form.fields.endDate.label')}{' '}
+                    <FieldLabel htmlFor="horarioInicio">
+                      {t('form.fields.startTime.label')}{' '}
                       <span className="text-destructive">*</span>
                     </FieldLabel>
-                    <Popover
-                      open={dateRangeOpen}
-                      onOpenChange={setDateRangeOpen}
-                    >
-                      <PopoverTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          className={`w-full justify-start text-left font-normal ${
-                            !watchedFormValues.dataInicio ||
-                            !watchedFormValues.dataFim
-                              ? 'text-muted-foreground'
-                              : ''
-                          }`}
+                    <Controller
+                      name="horarioInicio"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
                         >
-                          <CalendarIcon className="mr-2 size-4" />
-                          {formatDateRangeLabel(
-                            watchedFormValues.dataInicio,
-                            watchedFormValues.dataFim
-                          ) || t('form.fields.startDate.placeholder')}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="range"
-                          numberOfMonths={2}
-                          selected={dateRangeDraft}
-                          onSelect={(range) => {
-                            setDateRangeDraft(range);
-                            if (!range?.from || !range?.to) {
-                              form.setValue('dataInicio', '', {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                                shouldValidate: true,
-                              });
-                              form.setValue('dataFim', '', {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                                shouldValidate: true,
-                              });
-                              return;
-                            }
-                            form.setValue(
-                              'dataInicio',
-                              format(range.from, 'yyyy-MM-dd'),
-                              {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                                shouldValidate: true,
-                              }
-                            );
-                            form.setValue(
-                              'dataFim',
-                              format(range.to, 'yyyy-MM-dd'),
-                              {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                                shouldValidate: true,
-                              }
-                            );
-                          }}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
+                          <SelectTrigger id="horarioInicio">
+                            <SelectValue
+                              placeholder={t(
+                                'form.fields.startTime.placeholder'
+                              )}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {TIME_OPTIONS.map((time) => (
+                              <SelectItem key={time} value={time}>
+                                {time}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
                     <FieldError>
-                      {form.formState.errors.dataInicio?.message ||
-                        form.formState.errors.dataFim?.message}
+                      {form.formState.errors.horarioInicio?.message}
                     </FieldError>
                   </Field>
 
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <Field>
-                      <FieldLabel htmlFor="horarioInicio">
-                        {t('form.fields.startTime.label')}{' '}
-                        <span className="text-destructive">*</span>
-                      </FieldLabel>
-                      <Controller
-                        name="horarioInicio"
-                        control={form.control}
-                        render={({ field }) => (
-                          <Select
-                            onValueChange={field.onChange}
-                            value={field.value}
-                          >
-                            <SelectTrigger id="horarioInicio">
-                              <SelectValue
-                                placeholder={t(
-                                  'form.fields.startTime.placeholder'
-                                )}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {TIME_OPTIONS.map((time) => (
-                                <SelectItem key={time} value={time}>
-                                  {time}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        )}
-                      />
-                      <FieldDescription>
-                        Escolha o horario de inicio na lista para preencher mais
-                        rapido.
-                      </FieldDescription>
-                      <FieldError>
-                        {form.formState.errors.horarioInicio?.message}
-                      </FieldError>
-                    </Field>
-
-                    <Field>
-                      <FieldLabel htmlFor="horarioFim">
-                        {t('form.fields.endTime.label')}{' '}
-                        <span className="text-destructive">*</span>
-                      </FieldLabel>
-                      <Controller
-                        name="horarioFim"
-                        control={form.control}
-                        render={({ field }) => (
-                          <Select
-                            onValueChange={field.onChange}
-                            value={field.value}
-                          >
-                            <SelectTrigger id="horarioFim">
-                              <SelectValue
-                                placeholder={t(
-                                  'form.fields.endTime.placeholder'
-                                )}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {filteredEndTimeOptions.map((time) => (
-                                <SelectItem key={time} value={time}>
-                                  {time}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        )}
-                      />
-                      <FieldDescription>
-                        O termino mostra apenas horarios iguais ou depois do
-                        inicio.
-                      </FieldDescription>
-                      <FieldError>
-                        {form.formState.errors.horarioFim?.message}
-                      </FieldError>
-                    </Field>
-                  </div>
+                  <Field>
+                    <FieldLabel htmlFor="horarioFim">
+                      {t('form.fields.endTime.label')}{' '}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Controller
+                      name="horarioFim"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id="horarioFim">
+                            <SelectValue
+                              placeholder={t('form.fields.endTime.placeholder')}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {filteredEndTimeOptions.map((time) => (
+                              <SelectItem key={time} value={time}>
+                                {time}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                    <FieldError>
+                      {form.formState.errors.horarioFim?.message}
+                    </FieldError>
+                  </Field>
 
                   <Field>
                     <FieldLabel htmlFor="sessionAccess">
@@ -1436,9 +1455,6 @@ export function ClassFormSheet({
                         })
                       }
                     />
-                    <FieldDescription>
-                      {sessionAccessDescription}
-                    </FieldDescription>
                     <FieldError>
                       {form.formState.errors.sessionAccess?.message}
                     </FieldError>
@@ -1446,17 +1462,17 @@ export function ClassFormSheet({
                 </div>
               </div>
 
-              <div className="rounded-lg border border-border/70 p-4">
-                <div className="space-y-4">
-                  <div className="space-y-1">
-                    <h3 className="text-sm font-semibold">
-                      {t('form.recurrence.sectionTitle')}
-                    </h3>
-                    <p className="text-sm text-muted-foreground">
-                      {t('form.recurrence.sectionDescription')}
-                    </p>
-                  </div>
+              <div className="space-y-3">
+                <div className="space-y-1">
+                  <h3 className="text-sm font-semibold">
+                    {t('form.recurrence.sectionTitle')}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {t('form.recurrence.sectionDescription')}
+                  </p>
+                </div>
 
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                   <Field>
                     <FieldLabel>{t('form.recurrence.label')}</FieldLabel>
                     <Select
@@ -1467,7 +1483,7 @@ export function ClassFormSheet({
                         )
                       }
                     >
-                      <SelectTrigger className="w-full md:w-56">
+                      <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -1499,133 +1515,122 @@ export function ClassFormSheet({
                     </FieldError>
                   </Field>
 
-                  {(watchedFormValues.sessionRecurrenceMode === 'weekly' ||
-                    watchedFormValues.sessionRecurrenceMode === 'weekdays' ||
-                    (watchedFormValues.sessionRecurrenceMode === 'custom' &&
-                      customRecurrenceFrequency === 'weekly')) && (
-                    <Field>
-                      <FieldLabel>
-                        {t('form.recurrence.customDialog.repeatOn')}
-                      </FieldLabel>
-                      <div className="grid grid-cols-4 gap-2 sm:grid-cols-7">
-                        {recurrenceDayOptions.map((day) => {
-                          const active = (
-                            watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
-                          ).includes(day.value);
-                          const isWeekdays =
-                            watchedFormValues.sessionRecurrenceMode ===
-                            'weekdays';
-                          return (
-                            <Button
-                              key={day.value}
-                              type="button"
-                              variant={active ? 'default' : 'outline'}
-                              size="sm"
-                              className="h-9"
-                              disabled={isWeekdays}
-                              title={day.label}
-                              aria-label={day.label}
-                              onClick={() =>
-                                toggleCustomRecurrenceDay(day.value)
-                              }
-                            >
-                              {day.shortLabel}
-                            </Button>
-                          );
-                        })}
-                      </div>
-                      <FieldError>
-                        {
-                          form.formState.errors.sessionRecurrenceDaysOfWeek
-                            ?.message
-                        }
-                      </FieldError>
-                    </Field>
-                  )}
+                  <Field>
+                    <FieldLabel>
+                      {t('form.recurrence.titleMode.label')}
+                    </FieldLabel>
+                    <Controller
+                      name="sessionTitleMode"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          value={field.value}
+                          onValueChange={(value) => {
+                            field.onChange(value);
+                            if (value === 'default-course-code') {
+                              form.setValue(
+                                'sessionTitle',
+                                defaultSessionTitle,
+                                {
+                                  shouldDirty: true,
+                                  shouldTouch: false,
+                                  shouldValidate: false,
+                                }
+                              );
+                            }
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="default-course-code">
+                              {t('form.recurrence.titleMode.default')}
+                            </SelectItem>
+                            <SelectItem value="custom">
+                              {t('form.recurrence.titleMode.custom')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                  </Field>
 
-                  <div className="grid gap-4 md:grid-cols-[minmax(0,0.55fr)_minmax(0,1fr)]">
-                    <Field>
-                      <FieldLabel>
-                        {t('form.recurrence.titleMode.label')}
-                      </FieldLabel>
-                      <Controller
-                        name="sessionTitleMode"
-                        control={form.control}
-                        render={({ field }) => (
-                          <Select
-                            value={field.value}
-                            onValueChange={(value) => {
-                              field.onChange(value);
-                              if (value === 'default-course-code') {
-                                form.setValue(
-                                  'sessionTitle',
-                                  defaultSessionTitle,
-                                  {
-                                    shouldDirty: true,
-                                    shouldTouch: false,
-                                    shouldValidate: false,
-                                  }
-                                );
-                              }
-                            }}
-                          >
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="default-course-code">
-                                {t('form.recurrence.titleMode.default')}
-                              </SelectItem>
-                              <SelectItem value="custom">
-                                {t('form.recurrence.titleMode.custom')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        )}
-                      />
-                    </Field>
-
-                    <Field>
-                      <FieldLabel htmlFor="sessionTitle">
-                        {t('form.fields.sessionTitle.label')}
-                      </FieldLabel>
-                      <Input
-                        id="sessionTitle"
-                        value={
-                          watchedFormValues.sessionTitleMode ===
-                          'default-course-code'
-                            ? defaultSessionTitle
-                            : (watchedFormValues.sessionTitle ?? '')
-                        }
-                        placeholder={t('form.fields.sessionTitle.placeholder')}
-                        disabled={
-                          watchedFormValues.sessionTitleMode ===
-                          'default-course-code'
-                        }
-                        onChange={(event) =>
-                          form.setValue('sessionTitle', event.target.value, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: false,
-                          })
-                        }
-                      />
-                      <FieldDescription>
-                        {watchedFormValues.sessionTitleMode ===
+                  <Field>
+                    <FieldLabel htmlFor="sessionTitle">
+                      {t('form.fields.sessionTitle.label')}
+                    </FieldLabel>
+                    <Input
+                      id="sessionTitle"
+                      value={
+                        watchedFormValues.sessionTitleMode ===
                         'default-course-code'
-                          ? defaultSessionTitle ||
-                            t('form.fields.sessionTitle.placeholder')
-                          : recurrenceSummaryText}
-                      </FieldDescription>
-                      <FieldError>
-                        {form.formState.errors.sessionTitle?.message}
-                      </FieldError>
-                    </Field>
-                  </div>
+                          ? defaultSessionTitle
+                          : (watchedFormValues.sessionTitle ?? '')
+                      }
+                      placeholder={t('form.fields.sessionTitle.placeholder')}
+                      disabled={
+                        watchedFormValues.sessionTitleMode ===
+                        'default-course-code'
+                      }
+                      onChange={(event) =>
+                        form.setValue('sessionTitle', event.target.value, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: false,
+                        })
+                      }
+                    />
+                    <FieldError>
+                      {form.formState.errors.sessionTitle?.message}
+                    </FieldError>
+                  </Field>
                 </div>
+
+                {(watchedFormValues.sessionRecurrenceMode === 'weekly' ||
+                  watchedFormValues.sessionRecurrenceMode === 'weekdays' ||
+                  (watchedFormValues.sessionRecurrenceMode === 'custom' &&
+                    customRecurrenceFrequency === 'weekly')) && (
+                  <Field>
+                    <FieldLabel>
+                      {t('form.recurrence.customDialog.repeatOn')}
+                    </FieldLabel>
+                    <div className="grid grid-cols-4 gap-2 sm:grid-cols-7">
+                      {recurrenceDayOptions.map((day) => {
+                        const active = (
+                          watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
+                        ).includes(day.value);
+                        const isWeekdays =
+                          watchedFormValues.sessionRecurrenceMode ===
+                          'weekdays';
+                        return (
+                          <Button
+                            key={day.value}
+                            type="button"
+                            variant={active ? 'default' : 'outline'}
+                            size="sm"
+                            className="h-9"
+                            disabled={isWeekdays}
+                            title={day.label}
+                            aria-label={day.label}
+                            onClick={() => toggleCustomRecurrenceDay(day.value)}
+                          >
+                            {day.shortLabel}
+                          </Button>
+                        );
+                      })}
+                    </div>
+                    <FieldError>
+                      {
+                        form.formState.errors.sessionRecurrenceDaysOfWeek
+                          ?.message
+                      }
+                    </FieldError>
+                  </Field>
+                )}
               </div>
 
-              <div className="grid gap-4 md:grid-cols-3">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                 <Field>
                   <FieldLabel>
                     {t('form.fields.type.label')}{' '}
@@ -1887,7 +1892,7 @@ export function ClassFormSheet({
               </SheetFooter>
             </form>
           )}
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* Custom Recurrence Dialog */}
@@ -2063,10 +2068,15 @@ export function ClassFormSheet({
 
       {/* Course create sheet */}
       <CourseFormSheet
-        key="class-form-sheet-course-create"
+        key={`class-form-sheet-course-${editingCourseId ?? 'create'}`}
         open={courseSheetOpen}
-        onOpenChange={setCourseSheetOpen}
-        editing={false}
+        onOpenChange={(nextOpen) => {
+          setCourseSheetOpen(nextOpen);
+          if (!nextOpen) {
+            setEditingCourseId(null);
+          }
+        }}
+        editing={Boolean(editingCourseId)}
         saving={savingCourse}
         form={courseForm}
         onSubmit={onSubmitCourse}