@hed-hog/lms 0.0.330 → 0.0.331

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

@@ -31,6 +31,7 @@ import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
 import { useQueryClient } from '@tanstack/react-query';
 import { BookOpen, Loader2, Pencil, Star, X } from 'lucide-react';
 import { EntityPicker } from '@/components/ui/entity-picker';
@@ -40,35 +41,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 import type { InstructorRow, InstructorSkill } from './instructor-types';
 
-const QUALIFICATION_OPTIONS = [
-  {
-    slug: 'course-lessons',
-    label: 'Aulas de curso',
-    description: 'Pode atuar em aulas gravadas e estrutura de curso.',
-  },
-  {
-    slug: 'class-sessions',
-    label: 'Sessões de turma',
-    description: 'Pode atuar em contextos ao vivo e turmas.',
-  },
-];
-
-const instructorFormSchema = z.object({
-  personId: z
-    .number({ invalid_type_error: 'Selecione uma pessoa' })
-    .int()
-    .positive('Selecione uma pessoa'),
-  qualificationSlugs: z
-    .array(z.string())
-    .min(1, 'Selecione pelo menos uma qualificação'),
-  status: z.enum(['active', 'inactive']),
-  can_teach_courses: z.boolean(),
-  hourlyRate: z.coerce.number().min(0).optional().nullable(),
-  skillSlugs: z.array(z.string()).optional().default([]),
-});
-
-type InstructorFormValues = z.infer<typeof instructorFormSchema>;
-
 type ClassGroupItem = {
   id: number;
   name: string;
@@ -95,13 +67,13 @@ function getSkillDisplayName(s: InstructorSkill): string {
   return locales?.[0]?.name ?? s.name ?? s.slug;
 }
 
-const STATUS_LABEL: Record<string, string> = {
-  active: 'Ativo',
-  inactive: 'Inativo',
-  in_progress: 'Em andamento',
-  upcoming: 'Futuro',
-  completed: 'Concluído',
-  cancelled: 'Cancelado',
+type InstructorFormValues = {
+  personId?: number;
+  qualificationSlugs: string[];
+  status: 'active' | 'inactive';
+  can_teach_courses: boolean;
+  hourlyRate?: number | null;
+  skillSlugs?: string[];
 };
 
 type InstructorFormSheetProps = {
@@ -118,6 +90,7 @@ export function InstructorFormSheet({
   onSaved,
 }: InstructorFormSheetProps) {
   const { request, currentLocaleCode } = useApp();
+  const t = useTranslations('lms.InstructorsPage');
   const queryClient = useQueryClient();
   const [saving, setSaving] = useState(false);
   const [selectedPersonName, setSelectedPersonName] = useState('');
@@ -130,6 +103,39 @@ export function InstructorFormSheet({
   const [savingSkills, setSavingSkills] = useState(false);
   const [pickerResetKey, setPickerResetKey] = useState(0);
   const isEditing = typeof instructorId === 'number' && instructorId > 0;
+  const qualificationOptions = [
+    {
+      slug: 'course-lessons',
+      label: t('qualificationLabels.courseLessons'),
+      description: t('form.qualificationDescriptions.courseLessons'),
+    },
+    {
+      slug: 'class-sessions',
+      label: t('qualificationLabels.classSessions'),
+      description: t('form.qualificationDescriptions.classSessions'),
+    },
+  ];
+  const statusLabel: Record<string, string> = {
+    active: t('form.fields.active'),
+    inactive: t('form.fields.inactive'),
+    in_progress: t('form.classStatuses.inProgress'),
+    upcoming: t('form.classStatuses.upcoming'),
+    completed: t('form.classStatuses.completed'),
+    cancelled: t('form.classStatuses.cancelled'),
+  };
+  const instructorFormSchema = z.object({
+    personId: z
+      .number({ invalid_type_error: t('form.fields.personRequired') })
+      .int()
+      .positive(t('form.fields.personRequired')),
+    qualificationSlugs: z
+      .array(z.string())
+      .min(1, t('form.fields.qualificationsRequired')),
+    status: z.enum(['active', 'inactive']),
+    can_teach_courses: z.boolean(),
+    hourlyRate: z.coerce.number().min(0).optional().nullable(),
+    skillSlugs: z.array(z.string()).optional().default([]),
+  });
 
   const {
     control,
@@ -287,9 +293,9 @@ export function InstructorFormSheet({
         queryKey: ['lms-instructor-detail', instructorId],
       });
       await queryClient.invalidateQueries({ queryKey: ['lms-instructors'] });
-      toast.success('Skills atualizadas com sucesso.');
+      toast.success(t('form.toasts.skillsSaved'));
     } catch {
-      toast.error('Erro ao salvar skills.');
+      toast.error(t('form.toasts.skillsError'));
     } finally {
       setSavingSkills(false);
     }
@@ -314,7 +320,7 @@ export function InstructorFormSheet({
           },
         });
         result = response.data;
-        toast.success('Instrutor atualizado com sucesso.');
+        toast.success(t('form.toasts.instructorUpdated'));
       } else {
         const response = await request<InstructorRow>({
           url: '/lms/instructors',
@@ -329,7 +335,7 @@ export function InstructorFormSheet({
           },
         });
         result = response.data;
-        toast.success('Instrutor criado com sucesso.');
+        toast.success(t('form.toasts.instructorCreated'));
       }
 
       await onSaved?.(result);
@@ -337,8 +343,8 @@ export function InstructorFormSheet({
     } catch {
       toast.error(
         isEditing
-          ? 'Erro ao atualizar instrutor. Tente novamente.'
-          : 'Erro ao criar instrutor. Tente novamente.'
+          ? t('form.toasts.updateError')
+          : t('form.toasts.createError')
       );
     } finally {
       setSaving(false);
@@ -381,8 +387,8 @@ export function InstructorFormSheet({
                     }
                   >
                     {existingInstructor.status === 'active'
-                      ? 'Ativo'
-                      : 'Inativo'}
+                      ? t('form.fields.active')
+                      : t('form.fields.inactive')}
                   </Badge>
                   {existingInstructor.email && (
                     <span className="truncate text-xs text-muted-foreground">
@@ -399,11 +405,8 @@ export function InstructorFormSheet({
             </div>
           ) : (
             <SheetHeader className="shrink-0 border-b px-6 py-4">
-              <SheetTitle>Novo Instrutor</SheetTitle>
-              <SheetDescription>
-                Vincule uma pessoa existente ou crie uma nova para cadastrá-la
-                como instrutora.
-              </SheetDescription>
+              <SheetTitle>{t('form.title')}</SheetTitle>
+              <SheetDescription>{t('form.description')}</SheetDescription>
             </SheetHeader>
           )}
 
@@ -415,10 +418,14 @@ export function InstructorFormSheet({
               className="flex min-h-0 flex-1 flex-col"
             >
               <TabsList className="mx-6 mt-3 shrink-0 justify-start">
-                <TabsTrigger value="detalhes">Detalhes</TabsTrigger>
-                <TabsTrigger value="skills">Skills</TabsTrigger>
-                <TabsTrigger value="turmas">Turmas</TabsTrigger>
-                <TabsTrigger value="avaliacoes">Avaliações</TabsTrigger>
+                <TabsTrigger value="detalhes">
+                  {t('form.tabs.details')}
+                </TabsTrigger>
+                <TabsTrigger value="skills">{t('form.tabs.skills')}</TabsTrigger>
+                <TabsTrigger value="turmas">{t('form.tabs.classes')}</TabsTrigger>
+                <TabsTrigger value="avaliacoes">
+                  {t('form.tabs.evaluations')}
+                </TabsTrigger>
               </TabsList>
 
               {/* ── Detalhes ── */}
@@ -435,7 +442,8 @@ export function InstructorFormSheet({
                       {/* Person picker */}
                       <Field>
                         <FieldLabel>
-                          Pessoa <span className="text-destructive">*</span>
+                          {t('form.fields.person')}{' '}
+                          <span className="text-destructive">*</span>
                         </FieldLabel>
                         <div className="flex items-center gap-2">
                           <div className="min-w-0 flex-1">
@@ -445,14 +453,16 @@ export function InstructorFormSheet({
                               render={({ field }) => (
                                 <PersonPicker
                                   label=""
-                                  entityLabel="pessoa"
+                                  entityLabel={t('form.fields.person')}
                                   value={field.value ?? null}
                                   initialSelectedLabel={selectedPersonName}
                                   onChange={(personId, personName) => {
                                     field.onChange(personId ?? undefined);
                                     setSelectedPersonName(personName);
                                   }}
-                                  selectPlaceholder="Buscar ou selecionar pessoa..."
+                                  selectPlaceholder={t(
+                                    'form.fields.searchPerson'
+                                  )}
                                   personTypeFilter="individual"
                                   createType="individual"
                                   lockCreateType
@@ -467,8 +477,8 @@ export function InstructorFormSheet({
                             className="shrink-0"
                             disabled={!watchedPersonId}
                             onClick={handleOpenPersonEdit}
-                            aria-label="Editar cadastro da pessoa"
-                            title="Editar cadastro da pessoa"
+                            aria-label={t('form.fields.editPerson')}
+                            title={t('form.fields.editPerson')}
                           >
                             <Pencil className="h-4 w-4" />
                           </Button>
@@ -480,7 +490,7 @@ export function InstructorFormSheet({
 
                       {/* Status */}
                       <Field>
-                        <FieldLabel>Status</FieldLabel>
+                        <FieldLabel>{t('form.fields.status')}</FieldLabel>
                         <Controller
                           control={control}
                           name="status"
@@ -490,12 +500,16 @@ export function InstructorFormSheet({
                               onValueChange={field.onChange}
                             >
                               <SelectTrigger className="w-full">
-                                <SelectValue placeholder="Selecione o status" />
+                                <SelectValue
+                                  placeholder={t('filters.statusPlaceholder')}
+                                />
                               </SelectTrigger>
                               <SelectContent>
-                                <SelectItem value="active">Ativo</SelectItem>
+                                <SelectItem value="active">
+                                  {t('form.fields.active')}
+                                </SelectItem>
                                 <SelectItem value="inactive">
-                                  Inativo
+                                  {t('form.fields.inactive')}
                                 </SelectItem>
                               </SelectContent>
                             </Select>
@@ -505,13 +519,13 @@ export function InstructorFormSheet({
 
                       {/* Valor/hora */}
                       <Field>
-                        <FieldLabel>Valor/hora (R$)</FieldLabel>
+                        <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
                         <Controller
                           control={control}
                           name="hourlyRate"
                           render={({ field }) => (
                             <InputMoney
-                              placeholder="Ex: 150,00"
+                              placeholder={t('form.fields.hourlyRatePlaceholder')}
                               value={field.value ?? ''}
                               onValueChange={(value) => field.onChange(value)}
                             />
@@ -523,11 +537,10 @@ export function InstructorFormSheet({
                       <div className="flex items-center justify-between rounded-lg border p-4">
                         <div className="space-y-0.5">
                           <p className="text-sm font-medium">
-                            Pode ensinar cursos
+                            {t('form.fields.canTeachCourses')}
                           </p>
                           <p className="text-xs text-muted-foreground">
-                            Permite que o instrutor seja vinculado a aulas de
-                            curso.
+                            {t('form.fields.canTeachCoursesHint')}
                           </p>
                         </div>
                         <Controller
@@ -546,12 +559,12 @@ export function InstructorFormSheet({
                       <div className="flex items-center justify-between rounded-lg border p-4">
                         <div className="space-y-0.5">
                           <p className="text-sm font-medium">
-                            Acesso ao Hcode Training
+                            {t('form.fields.trainingAccess')}
                           </p>
                           <p className="text-xs text-muted-foreground">
                             {existingInstructor?.userId
-                              ? 'Permite que este instrutor acesse a plataforma com o perfil de instrutor.'
-                              : 'Nenhum usuário vinculado a este cadastro. Vincule um usuário para habilitar.'}
+                              ? t('form.fields.trainingAccessHint')
+                              : t('form.fields.noUserLinked')}
                           </p>
                         </div>
                         <Switch
@@ -570,13 +583,11 @@ export function InstructorFormSheet({
                               setTrainingAccess(next);
                               toast.success(
                                 next
-                                  ? 'Acesso ao Training habilitado.'
-                                  : 'Acesso ao Training desabilitado.'
+                                  ? t('form.toasts.accessEnabled')
+                                  : t('form.toasts.accessDisabled')
                               );
                             } catch {
-                              toast.error(
-                                'Erro ao alterar acesso ao Training.'
-                              );
+                              toast.error(t('form.toasts.accessError'));
                             } finally {
                               setTogglingAccess(false);
                             }
@@ -587,11 +598,11 @@ export function InstructorFormSheet({
                       {/* Qualificações */}
                       <Field>
                         <FieldLabel>
-                          Qualificações{' '}
+                          {t('form.fields.qualifications')}{' '}
                           <span className="text-destructive">*</span>
                         </FieldLabel>
                         <div className="space-y-3">
-                          {QUALIFICATION_OPTIONS.map((option) => (
+                          {qualificationOptions.map((option) => (
                             <Controller
                               key={option.slug}
                               control={control}
@@ -649,13 +660,13 @@ export function InstructorFormSheet({
                       onClick={() => handleSheetClose(false)}
                       disabled={saving}
                     >
-                      Cancelar
+                      {t('form.buttons.cancel')}
                     </Button>
                     <Button type="submit" disabled={saving}>
                       {saving && (
                         <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                       )}
-                      Salvar alterações
+                      {t('form.buttons.save')}
                     </Button>
                   </SheetFooter>
                 </form>
@@ -669,7 +680,7 @@ export function InstructorFormSheet({
                 <div className="flex min-h-0 flex-1 flex-col">
                   <div className="flex-1 overflow-y-auto px-6 py-4">
                     <p className="mb-4 text-sm text-muted-foreground">
-                      Gerencie as skills associadas a este instrutor.
+                      {t('form.skills.description')}
                     </p>
 
                     {tabSkillSlugs.length > 0 ? (
@@ -691,7 +702,9 @@ export function InstructorFormSheet({
                                     prev.filter((s) => s !== slug)
                                   )
                                 }
-                                aria-label={`Remover skill ${skill?.name ?? slug}`}
+                                aria-label={t('form.skills.removeSkill', {
+                                  skill: skill?.name ?? slug,
+                                })}
                               >
                                 <X className="h-3 w-3" />
                               </button>
@@ -701,21 +714,21 @@ export function InstructorFormSheet({
                       </div>
                     ) : (
                       <p className="mb-6 italic text-sm text-muted-foreground">
-                        Nenhuma skill atribuída.
+                        {t('form.skills.none')}
                       </p>
                     )}
 
                     <EntityPicker
                       key={pickerResetKey}
-                      placeholder="Adicionar skill..."
+                      placeholder={t('form.skills.addSkill')}
                       value={null}
                       clearable={false}
                       valueType="string"
                       showCreateButton
                       entityLabel="skill"
-                      noResultsLabel="Nenhuma skill disponível"
-                      createTitle="Nova skill"
-                      createDescription="Cadastre uma nova skill para vincular ao instrutor."
+                      noResultsLabel={t('form.skills.noSkills')}
+                      createTitle={t('form.skills.newSkill')}
+                      createDescription={t('form.skills.newSkillDescription')}
                       options={skillsData
                         .filter((s) => !tabSkillSlugs.includes(s.slug))
                         .map((s) => ({
@@ -738,14 +751,14 @@ export function InstructorFormSheet({
                       createFields={[
                         {
                           name: 'namePt',
-                          label: 'Nome',
+                          label: t('form.skills.createFields.name'),
                           required: true,
-                          placeholder: 'Ex: JavaScript',
+                          placeholder: t('form.skills.createFields.namePlaceholder'),
                         },
                         {
                           name: 'slug',
-                          label: 'Slug (opcional)',
-                          placeholder: 'Ex: javascript',
+                          label: t('form.skills.createFields.slug'),
+                          placeholder: t('form.skills.createFields.slugPlaceholder'),
                         },
                       ]}
                       mapSearchToCreateValues={(search) => ({
@@ -775,7 +788,7 @@ export function InstructorFormSheet({
                             name: namePt,
                           } as any;
                         } catch {
-                          toast.error('Erro ao criar skill.');
+                          toast.error(t('InstructorSkillsPage.messages.createError'));
                           return null;
                         }
                       }}
@@ -790,7 +803,7 @@ export function InstructorFormSheet({
                         onClick={() => handleSheetClose(false)}
                         disabled={savingSkills}
                       >
-                        Cancelar
+                        {t('form.buttons.cancel')}
                       </Button>
                       <Button
                         type="button"
@@ -800,7 +813,7 @@ export function InstructorFormSheet({
                         {savingSkills && (
                           <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                         )}
-                        Salvar skills
+                        {t('form.buttons.saveSkills')}
                       </Button>
                     </div>
                   </div>
@@ -821,10 +834,10 @@ export function InstructorFormSheet({
                     <div className="flex flex-col items-center justify-center py-12 text-center">
                       <BookOpen className="mb-3 h-10 w-10 text-muted-foreground/40" />
                       <p className="text-sm font-medium text-muted-foreground">
-                        Nenhuma turma encontrada
+                        {t('form.classes.emptyTitle')}
                       </p>
                       <p className="mt-1 text-xs text-muted-foreground">
-                        Este instrutor ainda não está vinculado a nenhuma turma.
+                        {t('form.classes.emptyDescription')}
                       </p>
                     </div>
                   ) : (
@@ -846,13 +859,13 @@ export function InstructorFormSheet({
                               variant="outline"
                               className="shrink-0 text-xs"
                             >
-                              {STATUS_LABEL[turma.status] ?? turma.status}
+                              {statusLabel[turma.status] ?? turma.status}
                             </Badge>
                           </div>
                           <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                             {turma.startDate && (
                               <span>
-                                Início:{' '}
+                                {t('form.classes.start')}{' '}
                                 {new Date(turma.startDate).toLocaleDateString(
                                   'pt-BR'
                                 )}
@@ -860,14 +873,18 @@ export function InstructorFormSheet({
                             )}
                             {turma.endDate && (
                               <span>
-                                Fim:{' '}
+                                {t('form.classes.end')}{' '}
                                 {new Date(turma.endDate).toLocaleDateString(
                                   'pt-BR'
                                 )}
                               </span>
                             )}
                             {turma.slots > 0 && (
-                              <span>{turma.slots} aluno(s)</span>
+                              <span>
+                                {t('form.classes.students', {
+                                  count: turma.slots,
+                                })}
+                              </span>
                             )}
                           </div>
                         </div>
@@ -886,11 +903,10 @@ export function InstructorFormSheet({
                 <div className="flex flex-1 flex-col items-center justify-center px-6 py-12 text-center">
                   <Star className="mb-3 h-10 w-10 text-muted-foreground/40" />
                   <p className="text-sm font-medium text-muted-foreground">
-                    Avaliações — funcionalidade em breve
+                    {t('form.evaluations.comingSoonTitle')}
                   </p>
                   <p className="mt-1 text-xs text-muted-foreground">
-                    Em breve você poderá visualizar as avaliações recebidas
-                    pelos alunos.
+                    {t('form.evaluations.comingSoonDescription')}
                   </p>
                 </div>
               </TabsContent>
@@ -906,7 +922,8 @@ export function InstructorFormSheet({
                   {/* Person picker */}
                   <Field>
                     <FieldLabel>
-                      Pessoa <span className="text-destructive">*</span>
+                      {t('form.fields.person')}{' '}
+                      <span className="text-destructive">*</span>
                     </FieldLabel>
                     <div className="flex items-center gap-2">
                       <div className="min-w-0 flex-1">
@@ -916,14 +933,14 @@ export function InstructorFormSheet({
                           render={({ field }) => (
                             <PersonPicker
                               label=""
-                              entityLabel="pessoa"
+                              entityLabel={t('form.fields.person')}
                               value={field.value ?? null}
                               initialSelectedLabel={selectedPersonName}
                               onChange={(personId, personName) => {
                                 field.onChange(personId ?? undefined);
                                 setSelectedPersonName(personName);
                               }}
-                              selectPlaceholder="Buscar ou selecionar pessoa..."
+                              selectPlaceholder={t('form.fields.searchPerson')}
                               personTypeFilter="individual"
                               createType="individual"
                               lockCreateType
@@ -938,8 +955,8 @@ export function InstructorFormSheet({
                         className="shrink-0"
                         disabled={!watchedPersonId}
                         onClick={handleOpenPersonEdit}
-                        aria-label="Editar cadastro da pessoa"
-                        title="Editar cadastro da pessoa"
+                        aria-label={t('form.fields.editPerson')}
+                        title={t('form.fields.editPerson')}
                       >
                         <Pencil className="h-4 w-4" />
                       </Button>
@@ -951,7 +968,7 @@ export function InstructorFormSheet({
 
                   {/* Status */}
                   <Field>
-                    <FieldLabel>Status</FieldLabel>
+                    <FieldLabel>{t('form.fields.status')}</FieldLabel>
                     <Controller
                       control={control}
                       name="status"
@@ -961,11 +978,17 @@ export function InstructorFormSheet({
                           onValueChange={field.onChange}
                         >
                           <SelectTrigger className="w-full">
-                            <SelectValue placeholder="Selecione o status" />
+                            <SelectValue
+                              placeholder={t('filters.statusPlaceholder')}
+                            />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectItem value="active">Ativo</SelectItem>
-                            <SelectItem value="inactive">Inativo</SelectItem>
+                            <SelectItem value="active">
+                              {t('form.fields.active')}
+                            </SelectItem>
+                            <SelectItem value="inactive">
+                              {t('form.fields.inactive')}
+                            </SelectItem>
                           </SelectContent>
                         </Select>
                       )}
@@ -974,13 +997,13 @@ export function InstructorFormSheet({
 
                   {/* Valor/hora */}
                   <Field>
-                    <FieldLabel>Valor/hora (R$)</FieldLabel>
+                    <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
                     <Controller
                       control={control}
                       name="hourlyRate"
                       render={({ field }) => (
                         <InputMoney
-                          placeholder="Ex: 150,00"
+                          placeholder={t('form.fields.hourlyRatePlaceholder')}
                           value={field.value ?? ''}
                           onValueChange={(value) => field.onChange(value)}
                         />
@@ -991,9 +1014,11 @@ export function InstructorFormSheet({
                   {/* can_teach_courses */}
                   <div className="flex items-center justify-between rounded-lg border p-4">
                     <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Pode ensinar cursos</p>
+                      <p className="text-sm font-medium">
+                        {t('form.fields.canTeachCourses')}
+                      </p>
                       <p className="text-xs text-muted-foreground">
-                        Permite que o instrutor seja vinculado a aulas de curso.
+                        {t('form.fields.canTeachCoursesHint')}
                       </p>
                     </div>
                     <Controller
@@ -1011,10 +1036,11 @@ export function InstructorFormSheet({
                   {/* Qualificações */}
                   <Field>
                     <FieldLabel>
-                      Qualificações <span className="text-destructive">*</span>
+                      {t('form.fields.qualifications')}{' '}
+                      <span className="text-destructive">*</span>
                     </FieldLabel>
                     <div className="space-y-3">
-                      {QUALIFICATION_OPTIONS.map((option) => (
+                      {qualificationOptions.map((option) => (
                         <Controller
                           key={option.slug}
                           control={control}
@@ -1070,11 +1096,11 @@ export function InstructorFormSheet({
                   onClick={() => handleSheetClose(false)}
                   disabled={saving}
                 >
-                  Cancelar
+                  {t('form.buttons.cancel')}
                 </Button>
                 <Button type="submit" disabled={saving}>
                   {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                  Criar instrutor
+                  {t('form.buttons.create')}
                 </Button>
               </SheetFooter>
             </form>