@hed-hog/lms 0.0.350 → 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';
@@ -771,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 ?? '';
@@ -815,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
@@ -1197,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>
@@ -1218,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')}
@@ -1231,9 +1211,6 @@ export function ClassFormSheet({
                     readOnly
                     className="uppercase"
                   />
-                  <FieldDescription>
-                    Codigo gerado automaticamente pelo sistema.
-                  </FieldDescription>
                   <FieldError>
                     {form.formState.errors.codigo?.message}
                   </FieldError>
@@ -1262,12 +1239,9 @@ export function ClassFormSheet({
                     showEditButton={!lockCourse}
                     searchEndpoint="/lms/courses"
                     searchExtraParams={{
-                      offeringTypes: 'scheduled,blended,on_demand',
+                      offeringTypes: 'scheduled,blended',
                     }}
                     refreshToken={coursePickerRefreshToken}
-                    isOptionDisabled={(option) =>
-                      option.offeringType === 'on_demand'
-                    }
                     onSelectionChange={(value, option) => {
                       const cId = typeof value === 'number' ? value : undefined;
                       const cTitle =
@@ -1321,164 +1295,149 @@ export function ClassFormSheet({
                 </Field>
               </div>
 
-              <div className="rounded-lg border border-border/70 p-4">
-                <div className="grid gap-4">
+              <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,
+                            }
+                          );
+                        }}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FieldError>
+                    {form.formState.errors.dataInicio?.message ||
+                      form.formState.errors.dataFim?.message}
+                  </FieldError>
+                </Field>
+
+                <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">
@@ -1496,9 +1455,6 @@ export function ClassFormSheet({
                         })
                       }
                     />
-                    <FieldDescription>
-                      {sessionAccessDescription}
-                    </FieldDescription>
                     <FieldError>
                       {form.formState.errors.sessionAccess?.message}
                     </FieldError>
@@ -1506,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
@@ -1527,7 +1483,7 @@ export function ClassFormSheet({
                         )
                       }
                     >
-                      <SelectTrigger className="w-full md:w-56">
+                      <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -1559,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')}{' '}
@@ -1947,7 +1892,7 @@ export function ClassFormSheet({
               </SheetFooter>
             </form>
           )}
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* Custom Recurrence Dialog */}