@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -15,6 +15,7 @@ import {
   FieldError,
   FieldLabel,
 } from '@/components/ui/field';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import {
   Popover,
@@ -30,14 +31,14 @@ 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 { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   ChevronsUpDown,
   ImageIcon,
@@ -55,6 +56,15 @@ export type CourseCategoryOption = {
   label: string;
 };
 
+type OperationsProjectOption = {
+  id: number;
+  code?: string | null;
+  name: string;
+  label?: string;
+  clientName?: string | null;
+  status?: string | null;
+};
+
 // ---------------------------------------------------------------------------
 // Color extraction utilities
 // ---------------------------------------------------------------------------
@@ -217,11 +227,18 @@ export function getCourseSheetSchema(t: (key: string) => string) {
     slug: z
       .string()
       .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('form.validation.slugPattern')),
+    code: z
+      .string()
+      .regex(/^[A-Z0-9]{2,}$/, t('form.validation.editionCodePattern'))
+      .or(z.literal(''))
+      .optional(),
     tituloComercial: z.string().optional(),
     descricao: z.string().optional(),
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']).optional(),
     status: z.enum(['ativo', 'rascunho', 'arquivado']).optional(),
+    offeringType: z.enum(['on_demand', 'agendado', 'hibrido']).optional(),
     categorias: z.array(z.string()).optional(),
+    operationsProjectId: z.string().optional(),
     primaryColor: z.string().optional(),
     secondaryColor: z.string().optional(),
     logoFileId: z.number().nullable().optional(),
@@ -231,11 +248,14 @@ export function getCourseSheetSchema(t: (key: string) => string) {
 export type CourseSheetFormValues = {
   nomeInterno: string;
   slug: string;
+  code: string;
   tituloComercial: string;
   descricao: string;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
+  offeringType: 'on_demand' | 'agendado' | 'hibrido';
   categorias: string[];
+  operationsProjectId: string;
   primaryColor: string;
   secondaryColor: string;
   logoFileId?: number | null;
@@ -244,11 +264,14 @@ export type CourseSheetFormValues = {
 export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
   nomeInterno: '',
   slug: '',
+  code: '',
   tituloComercial: '',
   descricao: '',
   nivel: 'iniciante',
   status: 'rascunho',
+  offeringType: 'on_demand',
   categorias: [],
+  operationsProjectId: '',
   primaryColor: '#1D4ED8',
   secondaryColor: '#111827',
   logoFileId: null,
@@ -312,6 +335,36 @@ export function CourseFormSheet({
   const [colorExtracting, setColorExtracting] = useState(false);
   const logoInputRef = useRef<HTMLInputElement>(null);
   const colorExtractionRef = useRef<{ cancelled: boolean } | null>(null);
+  const { data: operationsProjectsData } = useQuery<
+    { data: OperationsProjectOption[] } | OperationsProjectOption[]
+  >({
+    queryKey: ['lms-course-form-operations-projects'],
+    enabled: open,
+    queryFn: async () => {
+      try {
+        const response = await request<
+          { data: OperationsProjectOption[] } | OperationsProjectOption[]
+        >({
+          url: '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc',
+          method: 'GET',
+        });
+        return response.data;
+      } catch {
+        return { data: [] };
+      }
+    },
+    initialData: { data: [] },
+  });
+  const operationsProjectOptions = (
+    Array.isArray(operationsProjectsData)
+      ? operationsProjectsData
+      : (operationsProjectsData?.data ?? [])
+  ).map((project) => ({
+    value: String(project.id),
+    label: project.name,
+    description: project.code ?? project.clientName ?? null,
+    meta: project.status ?? null,
+  }));
 
   useEffect(() => {
     if (!initialLogoFileId) {
@@ -396,7 +449,11 @@ export function CourseFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
+      <ResizableSheetContent
+        sheetId="lms-course-form-sheet"
+        defaultWidth={560}
+        minWidth={420}
+        maxWidth={920}
         side="right"
         className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
       >
@@ -413,61 +470,80 @@ export function CourseFormSheet({
 
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-1 flex-col gap-5 py-6 px-4"
+          className="flex flex-1 flex-col gap-4 py-4 px-4"
         >
-          <Field>
-            <FieldLabel htmlFor="nomeInterno">
-              {t('form.fields.internalName.label')}{' '}
-              <span className="text-destructive">*</span>
-            </FieldLabel>
-            <Input
-              id="nomeInterno"
-              placeholder={t('form.fields.internalName.placeholder')}
-              {...form.register('nomeInterno')}
-            />
-            <FieldDescription>
-              {t('form.fields.internalName.description')}
-            </FieldDescription>
-            <FieldError>
-              {form.formState.errors.nomeInterno?.message}
-            </FieldError>
-          </Field>
+          {/* Internal name + Slug */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="nomeInterno">
+                {t('form.fields.internalName.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="nomeInterno"
+                placeholder={t('form.fields.internalName.placeholder')}
+                {...form.register('nomeInterno')}
+              />
+              <FieldError>
+                {form.formState.errors.nomeInterno?.message}
+              </FieldError>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="slug">
+                {t('form.fields.slug.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="slug"
+                placeholder={t('form.fields.slug.placeholder')}
+                {...form.register('slug', {
+                  onChange: () => {
+                    slugTouchedRef.current = true;
+                  },
+                })}
+              />
+              <FieldError>{form.formState.errors.slug?.message}</FieldError>
+            </Field>
+          </div>
 
+          {/* Edition code */}
           <Field>
-            <FieldLabel htmlFor="slug">
-              {t('form.fields.slug.label')}{' '}
-              <span className="text-destructive">*</span>
+            <FieldLabel htmlFor="code">
+              {t('form.fields.code.label')}
             </FieldLabel>
             <Input
-              id="slug"
-              placeholder={t('form.fields.slug.placeholder')}
-              {...form.register('slug', {
-                onChange: () => {
-                  slugTouchedRef.current = true;
+              id="code"
+              placeholder={t('form.fields.code.placeholder')}
+              className="font-mono"
+              {...form.register('code', {
+                onChange: (e) => {
+                  const cleaned = e.target.value
+                    .toUpperCase()
+                    .replace(/[^A-Z0-9]/g, '');
+                  form.setValue('code', cleaned, { shouldValidate: true });
                 },
               })}
             />
-            <FieldDescription>
-              {t('form.fields.slug.description')}
-            </FieldDescription>
-            <FieldError>{form.formState.errors.slug?.message}</FieldError>
+            <FieldError>{form.formState.errors.code?.message}</FieldError>
           </Field>
 
+          {/* Logo */}
           <Field>
             <FieldLabel>{t('form.fields.logo.label')}</FieldLabel>
-            <div className="flex items-start gap-4">
+            <div className="flex items-center gap-3">
               {logoPreviewUrl ? (
                 <img
                   src={logoPreviewUrl}
                   alt={t('form.fields.logo.alt')}
-                  className="size-16 shrink-0 rounded-lg border object-cover"
+                  className="size-12 shrink-0 rounded-lg border object-cover"
                 />
               ) : (
-                <div className="flex size-16 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
-                  <ImageIcon className="size-6 text-muted-foreground/50" />
+                <div className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
+                  <ImageIcon className="size-5 text-muted-foreground/50" />
                 </div>
               )}
-              <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
                 <input
                   ref={logoInputRef}
                   type="file"
@@ -504,41 +580,103 @@ export function CourseFormSheet({
                     {t('form.fields.logo.remove')}
                   </Button>
                 )}
+                {colorExtracting && (
+                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Loader2 className="size-3 animate-spin" />
+                    Detectando cores...
+                  </span>
+                )}
               </div>
             </div>
-            <FieldDescription>
-              {t('form.fields.logo.description')}
-            </FieldDescription>
           </Field>
 
-          <Field>
-            <FieldLabel htmlFor="tituloComercial">
-              {t('form.fields.commercialTitle.label')}
-            </FieldLabel>
-            <Input
-              id="tituloComercial"
-              placeholder={t('form.fields.commercialTitle.placeholder')}
-              {...form.register('tituloComercial')}
-            />
-            <FieldError>
-              {form.formState.errors.tituloComercial?.message}
-            </FieldError>
-          </Field>
+          {/* Commercial title + Offering type */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="tituloComercial">
+                {t('form.fields.commercialTitle.label')}
+              </FieldLabel>
+              <Input
+                id="tituloComercial"
+                placeholder={t('form.fields.commercialTitle.placeholder')}
+                {...form.register('tituloComercial')}
+              />
+              <FieldError>
+                {form.formState.errors.tituloComercial?.message}
+              </FieldError>
+            </Field>
+
+            <Field>
+              <FieldLabel>Tipo do curso</FieldLabel>
+              <Controller
+                name="offeringType"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecione o tipo" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="on_demand">On Demand</SelectItem>
+                      <SelectItem value="agendado">Agendado</SelectItem>
+                      <SelectItem value="hibrido">Híbrido</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.offeringType?.message}</FieldError>
+            </Field>
+          </div>
 
+          {/* Description */}
           <Field>
             <FieldLabel htmlFor="descricao">
               {t('form.fields.description.label')}
             </FieldLabel>
             <Textarea
               id="descricao"
-              rows={3}
+              rows={2}
               placeholder={t('form.fields.description.placeholder')}
               {...form.register('descricao')}
             />
             <FieldError>{form.formState.errors.descricao?.message}</FieldError>
           </Field>
 
-          <div className="grid grid-cols-2 gap-4">
+          {/* Operations project */}
+          <Field>
+            <FieldLabel>Projeto vinculado</FieldLabel>
+            <Controller
+              name="operationsProjectId"
+              control={form.control}
+              render={({ field }) => (
+                <EntityPicker<{
+                  value: string;
+                  label: string;
+                  description?: string | null;
+                  meta?: string | null;
+                }>
+                  value={field.value}
+                  onChange={(value) => field.onChange(String(value ?? ''))}
+                  options={operationsProjectOptions}
+                  placeholder="Selecione um projeto do Operations"
+                  searchPlaceholder="Buscar projeto..."
+                  entityLabel="projeto"
+                  emptyStateDescription="Nenhum projeto disponível"
+                  getOptionValue={(option) => option.value}
+                  getOptionLabel={(option) => option.label}
+                  getOptionDescription={(option) =>
+                    option.description || option.meta || undefined
+                  }
+                />
+              )}
+            />
+            <FieldError>
+              {form.formState.errors.operationsProjectId?.message}
+            </FieldError>
+          </Field>
+
+          {/* Level + Status */}
+          <div className="grid grid-cols-2 gap-3">
             <Field>
               <FieldLabel>{t('form.fields.level.label')}</FieldLabel>
               <Controller
@@ -598,6 +736,7 @@ export function CourseFormSheet({
             </Field>
           </div>
 
+          {/* Categories */}
           <Field>
             <FieldLabel>{t('form.fields.categories.label')}</FieldLabel>
             <Controller
@@ -752,14 +891,8 @@ export function CourseFormSheet({
             <FieldError>{form.formState.errors.categorias?.message}</FieldError>
           </Field>
 
-          {colorExtracting && (
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Loader2 className="size-3 animate-spin" />
-              Detectando cores...
-            </div>
-          )}
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {/* Primary + Secondary colors */}
+          <div className="grid grid-cols-2 gap-3">
             <Field>
               <FieldLabel htmlFor="primaryColor">
                 {t('form.fields.primaryColor.label')}
@@ -772,7 +905,7 @@ export function CourseFormSheet({
                     <Input
                       id="primaryColor"
                       type="color"
-                      className="h-10 w-16 p-1"
+                      className="h-9 w-12 p-1"
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -801,7 +934,7 @@ export function CourseFormSheet({
                     <Input
                       id="secondaryColor"
                       type="color"
-                      className="h-10 w-16 p-1"
+                      className="h-9 w-12 p-1"
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -826,7 +959,7 @@ export function CourseFormSheet({
             </Button>
           </SheetFooter>
         </form>
-      </SheetContent>
+        </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/_components/course-picker.tsx.ejs

@@ -0,0 +1,228 @@
+'use client';
+
+import { CourseAvatar } from '@/app/(app)/(libraries)/lms/_components/course-avatar';
+import { Button } from '@/components/ui/button';
+import {
+  EntityPicker,
+  type EntityPickerValue,
+} from '@/components/ui/entity-picker';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Pencil, Plus } from 'lucide-react';
+import { useCallback } from 'react';
+import type { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+
+type CoursePickerOption = {
+  id: number;
+  title: string;
+  code?: string;
+  logoFileId?: number | null;
+  offeringType?: 'scheduled' | 'on_demand' | 'blended' | string | null;
+};
+
+type CoursePickerListResponse = {
+  data: CoursePickerOption[];
+  lastPage?: number;
+};
+
+type CoursePickerProps<TFieldValues extends FieldValues> = {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  selectedCourseTitle?: string;
+  placeholder: string;
+  entityLabel: string;
+  searchPlaceholder?: string;
+  emptyStateDescription?: string;
+  loadingLabel?: string;
+  noResultsLabel?: string;
+  valueType?: 'number' | 'string';
+  disabled?: boolean;
+  allowClearSelection?: boolean;
+  showCreateButton?: boolean;
+  showEditButton?: boolean;
+  editButtonLabel?: string;
+  createButtonLabel?: string;
+  searchEndpoint?: string;
+  searchExtraParams?: Record<string, unknown>;
+  pageSize?: number;
+  refreshToken?: unknown;
+  isOptionDisabled?: (option: CoursePickerOption) => boolean;
+  onCreateClick?: () => void;
+  onEditClick?: (selected: CoursePickerOption | null) => void;
+  onSelectionChange?: (
+    value: EntityPickerValue,
+    option: CoursePickerOption | null
+  ) => void;
+};
+
+export function CoursePicker<TFieldValues extends FieldValues>({
+  form,
+  name,
+  selectedCourseTitle,
+  placeholder,
+  entityLabel,
+  searchPlaceholder,
+  emptyStateDescription,
+  loadingLabel,
+  noResultsLabel,
+  valueType = 'number',
+  disabled = false,
+  allowClearSelection = false,
+  showCreateButton = true,
+  showEditButton = false,
+  editButtonLabel = 'Editar curso',
+  createButtonLabel = 'Criar curso',
+  searchEndpoint = '/lms/courses',
+  searchExtraParams,
+  pageSize = 20,
+  refreshToken,
+  isOptionDisabled,
+  onCreateClick,
+  onEditClick,
+  onSelectionChange,
+}: CoursePickerProps<TFieldValues>) {
+  const { request } = useApp();
+
+  const getOptionValue = useCallback(
+    (option: CoursePickerOption) => option.id,
+    []
+  );
+
+  const getOptionLabel = useCallback(
+    (option: CoursePickerOption) => option.title,
+    []
+  );
+
+  const selectedId = form.watch(name);
+  const hasSelectedCourse =
+    selectedId !== null &&
+    selectedId !== undefined &&
+    String(selectedId).trim().length > 0;
+
+  const getOfferingTypeLabel = useCallback(
+    (offeringType?: CoursePickerOption['offeringType']) => {
+      if (offeringType === 'scheduled') return 'Agendado';
+      if (offeringType === 'blended') return 'Hibrido';
+      if (offeringType === 'on_demand') return 'Sob Demanda';
+      return null;
+    },
+    []
+  );
+
+  return (
+    <div className="flex items-end gap-2">
+      <div className="min-w-0 flex-1">
+        <EntityPicker<CoursePickerOption, TFieldValues>
+          form={form}
+          name={name}
+          valueType={valueType}
+          placeholder={placeholder}
+          refreshToken={refreshToken}
+          entityLabel={entityLabel}
+          initialSelectedLabel={selectedCourseTitle ?? ''}
+          searchPlaceholder={searchPlaceholder ?? placeholder}
+          emptyStateDescription={
+            emptyStateDescription ?? 'Nenhum curso encontrado.'
+          }
+          loadingLabel={loadingLabel ?? 'Carregando cursos...'}
+          noResultsLabel={noResultsLabel ?? 'Nenhum curso encontrado.'}
+          disabled={disabled}
+          clearable={allowClearSelection}
+          showCreateButton={false}
+          renderOption={({ option, isDisabled }) => (
+            <div
+              className={`flex items-center gap-2 py-0.5 ${isDisabled ? 'opacity-60' : ''}`}
+            >
+              <CourseAvatar
+                fileId={option.logoFileId}
+                title={option.title}
+                className="size-8 shrink-0 rounded-lg"
+                iconSize="size-4"
+              />
+              <div className="min-w-0">
+                <p className="truncate text-sm">{option.title}</p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {option.code ?? '—'} · #{option.id}
+                  {getOfferingTypeLabel(option.offeringType)
+                    ? ` · ${getOfferingTypeLabel(option.offeringType)}`
+                    : ''}
+                  {isDisabled ? ' · indisponivel para turma' : ''}
+                </p>
+              </div>
+            </div>
+          )}
+          isOptionDisabled={isOptionDisabled}
+          renderSelectedValue={({ option, label }) => (
+            <div className="flex items-center gap-2">
+              <CourseAvatar
+                fileId={option?.logoFileId}
+                title={option?.title ?? label}
+                className="size-5 shrink-0 rounded"
+                iconSize="size-3"
+              />
+              <span className="truncate">{option?.title ?? label}</span>
+            </div>
+          )}
+          onChange={(value, option) => {
+            onSelectionChange?.(value, option);
+          }}
+          loadOptions={async ({ page, pageSize: remotePageSize, search }) => {
+            const response = await request<CoursePickerListResponse>({
+              url: searchEndpoint,
+              method: 'GET',
+              params: {
+                page,
+                pageSize: remotePageSize,
+                ...(search.trim() ? { search: search.trim() } : {}),
+                ...(searchExtraParams ?? {}),
+              },
+            });
+
+            return {
+              items: response.data?.data ?? [],
+              hasMore: page < (response.data?.lastPage ?? 1),
+            };
+          }}
+          pageSize={pageSize}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
+        />
+      </div>
+
+      {showEditButton ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 shrink-0"
+          disabled={disabled || !hasSelectedCourse}
+          onClick={() => {
+            const selectedOption: CoursePickerOption | null = hasSelectedCourse
+              ? {
+                  id: Number(selectedId),
+                  title: selectedCourseTitle ?? '',
+                }
+              : null;
+            onEditClick?.(selectedOption);
+          }}
+          aria-label={editButtonLabel}
+        >
+          <Pencil className="h-4 w-4" />
+        </Button>
+      ) : null}
+
+      {showCreateButton ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 shrink-0"
+          disabled={disabled}
+          onClick={onCreateClick}
+          aria-label={createButtonLabel}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}