@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -0,0 +1,438 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2, Plus } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { CreateLmsPersonSheet } from '../../_components/create-lms-person-sheet';
+import type { InstructorRow, PersonOption } 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(),
+});
+
+type InstructorFormValues = z.infer<typeof instructorFormSchema>;
+
+type InstructorFormSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  instructorId?: number | null;
+  onSaved?: (instructor: InstructorRow) => void | Promise<void>;
+};
+
+export function InstructorFormSheet({
+  open,
+  onOpenChange,
+  instructorId,
+  onSaved,
+}: InstructorFormSheetProps) {
+  const { request } = useApp();
+  const [saving, setSaving] = useState(false);
+  const [createPersonOpen, setCreatePersonOpen] = useState(false);
+  const [trainingAccess, setTrainingAccess] = useState<boolean | null>(null);
+  const [togglingAccess, setTogglingAccess] = useState(false);
+  const isEditing = typeof instructorId === 'number' && instructorId > 0;
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<InstructorFormValues>({
+    resolver: zodResolver(instructorFormSchema),
+    defaultValues: {
+      personId: undefined,
+      qualificationSlugs: ['course-lessons'],
+      status: 'active',
+      can_teach_courses: true,
+    },
+  });
+
+  const { data: existingInstructor } = useQuery<InstructorRow | null>({
+    queryKey: ['lms-instructor-detail', instructorId],
+    queryFn: async () => {
+      if (!instructorId) return null;
+      const response = await request<InstructorRow>({
+        url: `/lms/instructors/${instructorId}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: isEditing && open,
+    placeholderData: null,
+  });
+
+  useEffect(() => {
+    if (isEditing && existingInstructor) {
+      reset({
+        personId: existingInstructor.personId,
+        qualificationSlugs:
+          existingInstructor.qualificationSlugs.length > 0
+            ? existingInstructor.qualificationSlugs
+            : ['course-lessons'],
+        status: existingInstructor.status,
+        can_teach_courses: true,
+      });
+      setTrainingAccess(existingInstructor.hasTrainingAccess ?? false);
+    } else if (!isEditing && open) {
+      reset({
+        personId: undefined,
+        qualificationSlugs: ['course-lessons'],
+        status: 'active',
+        can_teach_courses: true,
+      });
+      setTrainingAccess(null);
+    }
+  }, [isEditing, existingInstructor, open, reset]);
+
+  const handleSheetClose = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      reset();
+    }
+    onOpenChange(nextOpen);
+  };
+
+  const onSubmit = async (values: InstructorFormValues) => {
+    try {
+      setSaving(true);
+
+      let result: InstructorRow;
+
+      if (isEditing) {
+        const response = await request<InstructorRow>({
+          url: `/lms/instructors/${instructorId}`,
+          method: 'PATCH',
+          data: {
+            qualificationSlugs: values.qualificationSlugs,
+            status: values.status,
+          },
+        });
+        result = response.data;
+        toast.success('Instrutor atualizado com sucesso.');
+      } else {
+        const response = await request<InstructorRow>({
+          url: '/lms/instructors',
+          method: 'POST',
+          data: {
+            personId: values.personId,
+            name: '',
+            qualificationSlugs: values.qualificationSlugs,
+            status: values.status,
+          },
+        });
+        result = response.data;
+        toast.success('Instrutor criado com sucesso.');
+      }
+
+      await onSaved?.(result);
+      handleSheetClose(false);
+    } catch {
+      toast.error(
+        isEditing
+          ? 'Erro ao atualizar instrutor. Tente novamente.'
+          : 'Erro ao criar instrutor. Tente novamente.'
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={handleSheetClose}>
+        <SheetContent
+          side="right"
+          className="flex w-full max-w-md flex-col overflow-y-auto sm:max-w-lg"
+        >
+          <SheetHeader>
+            <SheetTitle>
+              {isEditing ? 'Editar Instrutor' : 'Novo Instrutor'}
+            </SheetTitle>
+            <SheetDescription>
+              {isEditing
+                ? 'Atualize os dados do perfil do instrutor.'
+                : 'Vincule uma pessoa existente ou crie uma nova para cadastrá-la como instrutora.'}
+            </SheetDescription>
+          </SheetHeader>
+
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="mt-6 flex flex-1 flex-col gap-5 px-4"
+          >
+            {/* Person picker */}
+            {!isEditing && (
+              <Field>
+                <FieldLabel>
+                  Pessoa <span className="text-destructive">*</span>
+                </FieldLabel>
+                <div className="flex items-center gap-2">
+                  <div className="min-w-0 flex-1">
+                    <Controller
+                      control={control}
+                      name="personId"
+                      render={({ field }) => (
+                        <EntityPicker
+                          value={field.value ?? null}
+                          onChange={(val) =>
+                            field.onChange(
+                              val !== null ? Number(val) : undefined
+                            )
+                          }
+                          valueType="number"
+                          loadOptions={async ({ page, pageSize, search }) => {
+                            const response = await request<{
+                              data: PersonOption[];
+                              lastPage?: number;
+                            }>({
+                              url: '/person',
+                              method: 'GET',
+                              params: {
+                                page,
+                                pageSize,
+                                type: 'individual',
+                                ...(search.trim()
+                                  ? { search: search.trim() }
+                                  : {}),
+                              },
+                            });
+                            return {
+                              items: (response.data?.data ?? []).map((p) => ({
+                                id: p.id,
+                                name: p.name,
+                              })),
+                              hasMore: page < (response.data?.lastPage ?? 1),
+                            };
+                          }}
+                          getOptionValue={(opt) => opt.id as number}
+                          getOptionLabel={(opt) => opt.name ?? ''}
+                          placeholder="Buscar pessoa por nome..."
+                          searchable
+                          clearable
+                          showCreateButton={false}
+                        />
+                      )}
+                    />
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    onClick={() => setCreatePersonOpen(true)}
+                    aria-label="Criar nova pessoa"
+                    title="Criar nova pessoa"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+                {errors.personId && (
+                  <FieldError>{errors.personId.message}</FieldError>
+                )}
+              </Field>
+            )}
+
+            {/* Status */}
+            <Field>
+              <FieldLabel>Status</FieldLabel>
+              <Controller
+                control={control}
+                name="status"
+                render={({ field }) => (
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecione o status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="active">Ativo</SelectItem>
+                      <SelectItem value="inactive">Inativo</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </Field>
+
+            {/* 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-xs text-muted-foreground">
+                  Permite que o instrutor seja vinculado a aulas de curso.
+                </p>
+              </div>
+              <Controller
+                control={control}
+                name="can_teach_courses"
+                render={({ field }) => (
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Acesso ao Training */}
+            {isEditing && (
+              <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
+                  </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.'}
+                  </p>
+                </div>
+                <Switch
+                  checked={trainingAccess ?? false}
+                  disabled={!existingInstructor?.userId || togglingAccess}
+                  onCheckedChange={async (next) => {
+                    setTogglingAccess(true);
+                    try {
+                      await request({
+                        url: `/lms/instructors/${instructorId}/training-access`,
+                        method: 'PATCH',
+                        data: { enabled: next },
+                      });
+                      setTrainingAccess(next);
+                      toast.success(
+                        next
+                          ? 'Acesso ao Training habilitado.'
+                          : 'Acesso ao Training desabilitado.'
+                      );
+                    } catch {
+                      toast.error('Erro ao alterar acesso ao Training.');
+                    } finally {
+                      setTogglingAccess(false);
+                    }
+                  }}
+                />
+              </div>
+            )}
+
+            {/* Qualificações */}
+            <Field>
+              <FieldLabel>
+                Qualificações <span className="text-destructive">*</span>
+              </FieldLabel>
+              <div className="space-y-3">
+                {QUALIFICATION_OPTIONS.map((option) => (
+                  <Controller
+                    key={option.slug}
+                    control={control}
+                    name="qualificationSlugs"
+                    render={({ field }) => {
+                      const checked = field.value.includes(option.slug);
+                      return (
+                        <div className="flex items-start justify-between rounded-lg border p-3">
+                          <div className="space-y-0.5">
+                            <p className="text-sm font-medium">
+                              {option.label}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {option.description}
+                            </p>
+                          </div>
+                          <Switch
+                            checked={checked}
+                            onCheckedChange={(next) => {
+                              if (next) {
+                                field.onChange([...field.value, option.slug]);
+                              } else {
+                                field.onChange(
+                                  field.value.filter((s) => s !== option.slug)
+                                );
+                              }
+                            }}
+                          />
+                        </div>
+                      );
+                    }}
+                  />
+                ))}
+              </div>
+              {errors.qualificationSlugs && (
+                <FieldError>{errors.qualificationSlugs.message}</FieldError>
+              )}
+            </Field>
+
+            <SheetFooter className="mt-auto pb-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleSheetClose(false)}
+                disabled={saving}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={saving}>
+                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {isEditing ? 'Salvar alterações' : 'Criar instrutor'}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <CreateLmsPersonSheet
+        open={createPersonOpen}
+        onOpenChange={setCreatePersonOpen}
+        onCreated={(instructor) => {
+          setValue('personId', instructor.personId);
+          setCreatePersonOpen(false);
+        }}
+        title="Nova Pessoa"
+        description="Preencha os dados para criar uma nova pessoa e vinculá-la como instrutora."
+        submitLabel="Criar pessoa"
+        successMessage="Pessoa criada com sucesso."
+        errorMessage="Erro ao criar pessoa."
+        defaultQualificationSlugs={['course-lessons']}
+      />
+    </>
+  );
+}

package/hedhog/frontend/app/instructors/_components/instructor-types.ts.ejs

@@ -0,0 +1,40 @@
+export type InstructorRow = {
+  id: number;
+  personId: number;
+  name: string;
+  avatarId: number | null;
+  email?: string | null;
+  phone?: string | null;
+  status: 'active' | 'inactive';
+  qualificationSlugs: string[];
+  userId?: number | null;
+  hasTrainingAccess?: boolean;
+};
+
+export type InstructorStats = {
+  total: number;
+  active: number;
+  inactive: number;
+};
+
+export type InstructorPaginatedResult = {
+  data: InstructorRow[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+
+export type PersonOption = {
+  id: number;
+  name: string;
+  avatarId?: number | null;
+  email?: string | null;
+};
+
+export type InstructorFormValues = {
+  personId: number | null;
+  qualificationSlugs: string[];
+  status: 'active' | 'inactive';
+  can_teach_courses: boolean;
+};