@hed-hog/operations 0.0.303 → 0.0.304

package/hedhog/frontend/app/_components/collaborator-form-screen.tsx.ejs

@@ -47,12 +47,18 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
+import {
+  fetchOperations,
+  getOperationsErrorMessage,
+  mutateOperations,
+} from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
   OperationsCollaboratorDetails,
+  OperationsCollaboratorType,
   OperationsDepartment,
+  OperationsJobTitle,
   OperationsWeeklyScheduleDay,
 } from '../_lib/types';
 import {
@@ -60,6 +66,7 @@ import {
   formatDateRange,
   formatEnumLabel,
   formatHours,
+  formatWeekdayLabel,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
@@ -79,6 +86,50 @@ const weekdays = [
 ] as const;
 
 const SUPERVISOR_PAGE_SIZE = 10;
+const COLLABORATOR_LEVEL_OPTIONS = [
+  'junior',
+  'mid',
+  'senior',
+  'coordinator',
+  'manager',
+] as const;
+
+type CollaboratorLevel = (typeof COLLABORATOR_LEVEL_OPTIONS)[number];
+
+type SystemUserOption = {
+  id: number;
+  name: string;
+};
+
+function normalizeCollaboratorLevel(
+  value?: string | null
+): CollaboratorLevel | '' {
+  const normalizedValue = String(value ?? '')
+    .trim()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+
+  switch (normalizedValue) {
+    case 'junior':
+    case 'junior level':
+      return 'junior';
+    case 'mid':
+    case 'middle':
+    case 'pleno':
+      return 'mid';
+    case 'senior':
+      return 'senior';
+    case 'coordinator':
+    case 'coordenador':
+      return 'coordinator';
+    case 'manager':
+    case 'gerente':
+      return 'manager';
+    default:
+      return '';
+  }
+}
 
 function getPersonAvatarUrl(avatarId?: number | null) {
   return typeof avatarId === 'number' && avatarId > 0
@@ -120,14 +171,24 @@ function normalizeTimeValue(value?: string | null, fallback = '') {
   return fallback || String(value);
 }
 
+const EQUITY_ENABLED_TYPE_SLUGS = new Set([
+  'socio',
+  'acionista',
+  'administrador',
+  'diretor',
+  'conselheiro',
+  'parceiro',
+]);
+
 type CollaboratorFormState = {
   userId: string;
   personId: string;
   code: string;
   displayName: string;
-  collaboratorType: string;
+  collaboratorTypeId: string;
   departmentId: string;
   department: string;
+  jobTitleId: string;
   title: string;
   levelLabel: string;
   weeklyCapacityHours: string;
@@ -139,6 +200,14 @@ type CollaboratorFormState = {
   contractDescription: string;
   autoGenerateContractDraft: boolean;
   notes: string;
+  equityParticipation: {
+    participationType: string;
+    percentage: string;
+    votingPower: string;
+    startDate: string;
+    endDate: string;
+    notes: string;
+  };
   weeklySchedule: Array<{
     weekday: string;
     isWorkingDay: boolean;
@@ -164,9 +233,10 @@ function buildEmptyForm(): CollaboratorFormState {
     personId: '',
     code: '',
     displayName: '',
-    collaboratorType: 'clt',
+    collaboratorTypeId: '',
     departmentId: '',
     department: '',
+    jobTitleId: '',
     title: '',
     levelLabel: '',
     weeklyCapacityHours: '40',
@@ -178,6 +248,14 @@ function buildEmptyForm(): CollaboratorFormState {
     contractDescription: '',
     autoGenerateContractDraft: true,
     notes: '',
+    equityParticipation: {
+      participationType: 'partner_quota_holder',
+      percentage: '',
+      votingPower: '',
+      startDate: '',
+      endDate: '',
+      notes: '',
+    },
     weeklySchedule: defaultSchedule(),
   };
 }
@@ -214,13 +292,16 @@ function toFormState(
     personId: collaborator.personId ? String(collaborator.personId) : '',
     code: collaborator.code ?? '',
     displayName: collaborator.displayName ?? '',
-    collaboratorType: collaborator.collaboratorType ?? 'other',
+    collaboratorTypeId: collaborator.collaboratorTypeId
+      ? String(collaborator.collaboratorTypeId)
+      : '',
     departmentId: collaborator.departmentId
       ? String(collaborator.departmentId)
       : '',
     department: collaborator.department ?? '',
+    jobTitleId: collaborator.jobTitleId ? String(collaborator.jobTitleId) : '',
     title: collaborator.title ?? '',
-    levelLabel: collaborator.levelLabel ?? '',
+    levelLabel: normalizeCollaboratorLevel(collaborator.levelLabel),
     weeklyCapacityHours:
       collaborator.weeklyCapacityHours !== null &&
       collaborator.weeklyCapacityHours !== undefined
@@ -240,6 +321,24 @@ function toFormState(
     contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
     autoGenerateContractDraft: true,
     notes: collaborator.notes ?? '',
+    equityParticipation: {
+      participationType:
+        collaborator.equityParticipation?.participationType ??
+        'partner_quota_holder',
+      percentage:
+        collaborator.equityParticipation?.percentage !== null &&
+        collaborator.equityParticipation?.percentage !== undefined
+          ? String(collaborator.equityParticipation.percentage)
+          : '',
+      votingPower:
+        collaborator.equityParticipation?.votingPower !== null &&
+        collaborator.equityParticipation?.votingPower !== undefined
+          ? String(collaborator.equityParticipation.votingPower)
+          : '',
+      startDate: collaborator.equityParticipation?.startDate ?? '',
+      endDate: collaborator.equityParticipation?.endDate ?? '',
+      notes: collaborator.equityParticipation?.notes ?? '',
+    },
     weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
   };
 }
@@ -397,6 +496,166 @@ function SupervisorAutocomplete({
   );
 }
 
+type SystemUserAutocompleteProps = {
+  label: string;
+  value: string;
+  options: SystemUserOption[];
+  placeholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+};
+
+function SystemUserAutocomplete({
+  label,
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+}: SystemUserAutocompleteProps) {
+  const commonT = useTranslations('operations.Common');
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [visibleCount, setVisibleCount] = useState(SUPERVISOR_PAGE_SIZE);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return options;
+    }
+
+    return options.filter((option) =>
+      [option.name, `#${option.id}`]
+        .filter(Boolean)
+        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
+    );
+  }, [options, search]);
+
+  const selectedOption =
+    options.find((option) => String(option.id) === value) ??
+    (value
+      ? {
+          id: Number(value),
+          name: `#${value}`,
+        }
+      : null);
+  const visibleOptions = filteredOptions.slice(0, visibleCount);
+
+  return (
+    <div className="grid gap-2">
+      <Label>{label}</Label>
+
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen);
+          setVisibleCount(SUPERVISOR_PAGE_SIZE);
+
+          if (!nextOpen) {
+            setSearch('');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            className="w-full justify-between overflow-hidden"
+          >
+            <span className="truncate text-left">
+              {selectedOption
+                ? `${selectedOption.name} (#${selectedOption.id})`
+                : emptyLabel}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder={placeholder}
+              value={search}
+              onValueChange={(nextValue) => {
+                setSearch(nextValue);
+                setVisibleCount(SUPERVISOR_PAGE_SIZE);
+              }}
+            />
+            <CommandList>
+              <CommandEmpty>
+                <div className="p-2 text-sm text-muted-foreground">
+                  {commonT('states.emptyDescription')}
+                </div>
+              </CommandEmpty>
+
+              <CommandGroup>
+                <CommandItem
+                  value="none"
+                  onSelect={() => {
+                    onChange('');
+                    setOpen(false);
+                  }}
+                >
+                  {!value ? (
+                    <Check className="mr-2 h-4 w-4" />
+                  ) : (
+                    <span className="mr-2 h-4 w-4" />
+                  )}
+                  {emptyLabel}
+                </CommandItem>
+
+                {visibleOptions.map((option) => (
+                  <CommandItem
+                    key={option.id}
+                    value={`${option.name} #${option.id}`}
+                    onSelect={() => {
+                      onChange(String(option.id));
+                      setOpen(false);
+                    }}
+                  >
+                    {String(option.id) === value ? (
+                      <Check className="mr-2 h-4 w-4" />
+                    ) : (
+                      <span className="mr-2 h-4 w-4" />
+                    )}
+                    <div className="min-w-0">
+                      <div className="truncate">{option.name}</div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        #{option.id}
+                      </div>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+
+              {filteredOptions.length > visibleCount ? (
+                <div className="border-t p-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="w-full"
+                    onClick={() =>
+                      setVisibleCount(
+                        (current) => current + SUPERVISOR_PAGE_SIZE
+                      )
+                    }
+                  >
+                    {commonT('actions.loadMore')}
+                  </Button>
+                </div>
+              ) : null}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
 type CollaboratorFormScreenProps = {
   collaboratorId?: number;
   onSaved?: (
@@ -418,23 +677,7 @@ export function CollaboratorFormScreen({
   const router = useRouter();
   const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
   const isSheetMode = Boolean(onCancel);
-
-  const getCollaboratorTypeLabel = (value?: string | null) => {
-    switch (value) {
-      case 'clt':
-        return t('options.collaboratorTypes.clt');
-      case 'pj':
-        return t('options.collaboratorTypes.pj');
-      case 'freelancer':
-        return t('options.collaboratorTypes.freelancer');
-      case 'intern':
-        return t('options.collaboratorTypes.intern');
-      case 'other':
-        return t('options.collaboratorTypes.other');
-      default:
-        return formatEnumLabel(value);
-    }
-  };
+  const isCreateMode = !collaboratorId;
 
   const getStatusLabel = (value?: string | null) => {
     switch (value) {
@@ -451,24 +694,72 @@ export function CollaboratorFormScreen({
     }
   };
 
-  const { data: collaborator, isLoading: isLoadingCollaborator } =
-    useQuery<OperationsCollaboratorDetails>({
-      queryKey: [
-        'operations-collaborator-form',
-        currentLocaleCode,
-        collaboratorId,
-      ],
-      enabled: Boolean(collaboratorId),
-      queryFn: () =>
-        fetchOperations<OperationsCollaboratorDetails>(
-          request,
-          `/operations/collaborators/${collaboratorId}`
-        ),
-    });
-
-  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+  const {
+    data: collaborator,
+    isLoading: isLoadingCollaborator,
+    refetch: refetchCollaborator,
+  } = useQuery<OperationsCollaboratorDetails>({
+    queryKey: [
+      'operations-collaborator-form',
+      currentLocaleCode,
+      collaboratorId,
+    ],
+    enabled: Boolean(collaboratorId),
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<OperationsCollaboratorDetails>(
+        request,
+        `/operations/collaborators/${collaboratorId}`
+      ),
+  });
+
+  const { data: systemUsers = [] } = useQuery<SystemUserOption[]>({
+    queryKey: ['operations-collaborator-form-system-users', currentLocaleCode],
+    enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: async () => {
+      const response = await request<
+        SystemUserOption[] | { data?: SystemUserOption[] }
+      >({
+        url: '/person/owner-options',
+        method: 'GET',
+      });
+
+      const options = Array.isArray(response.data)
+        ? response.data
+        : response.data?.data || [];
+
+      return [...options].sort((left, right) =>
+        left.name.localeCompare(right.name)
+      );
+    },
+  });
+
+  const {
+    data: collaboratorTypes = [],
+    refetch: refetchCollaboratorTypes,
+    isLoading: isLoadingCollaboratorTypes,
+  } = useQuery<OperationsCollaboratorType[]>({
+    queryKey: ['operations-collaborator-types', currentLocaleCode],
+    enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<OperationsCollaboratorType[]>(
+        request,
+        '/operations/collaborator-types?active=true'
+      ),
+  });
+
+  const { data: collaborators = [], refetch: refetchCollaborators } = useQuery<
+    OperationsCollaborator[]
+  >({
     queryKey: ['operations-collaborator-form-supervisors', currentLocaleCode],
     enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
     queryFn: () =>
       fetchOperations<OperationsCollaborator[]>(
         request,
@@ -476,9 +767,13 @@ export function CollaboratorFormScreen({
       ),
   });
 
-  const { data: departments = [] } = useQuery<OperationsDepartment[]>({
+  const { data: departments = [], refetch: refetchDepartments } = useQuery<
+    OperationsDepartment[]
+  >({
     queryKey: ['operations-collaborator-form-departments', currentLocaleCode],
     enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
     queryFn: () =>
       fetchOperations<OperationsDepartment[]>(
         request,
@@ -486,6 +781,17 @@ export function CollaboratorFormScreen({
       ),
   });
 
+  const { data: jobTitles = [], refetch: refetchJobTitles } = useQuery<
+    OperationsJobTitle[]
+  >({
+    queryKey: ['operations-collaborator-form-job-titles', currentLocaleCode],
+    enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<OperationsJobTitle[]>(request, '/operations/job-titles'),
+  });
+
   useEffect(() => {
     if (collaborator) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -493,6 +799,67 @@ export function CollaboratorFormScreen({
     }
   }, [collaborator]);
 
+  useEffect(() => {
+    if (
+      collaboratorId ||
+      form.collaboratorTypeId ||
+      !collaboratorTypes.length
+    ) {
+      return;
+    }
+
+    const defaultType =
+      collaboratorTypes.find((item) => item.slug === 'clt') ??
+      collaboratorTypes[0];
+
+    if (!defaultType) {
+      return;
+    }
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setForm((current) => ({
+      ...current,
+      collaboratorTypeId: String(defaultType.id),
+    }));
+  }, [collaboratorId, collaboratorTypes, form.collaboratorTypeId]);
+
+  const selectedCollaboratorType = useMemo(
+    () =>
+      collaboratorTypes.find(
+        (item) => String(item.id) === String(form.collaboratorTypeId)
+      ) ?? null,
+    [collaboratorTypes, form.collaboratorTypeId]
+  );
+
+  const shouldShowEquitySection =
+    !isCreateMode &&
+    Boolean(
+      selectedCollaboratorType?.slug &&
+        EQUITY_ENABLED_TYPE_SLUGS.has(selectedCollaboratorType.slug)
+    );
+
+  const getCollaboratorTypeLabel = (
+    value?: string | null,
+    fallbackName?: string | null
+  ) => {
+    const normalizedValue = String(value ?? '').trim();
+
+    if (fallbackName) {
+      return fallbackName;
+    }
+
+    const matchedType = collaboratorTypes.find(
+      (item) =>
+        item.slug === normalizedValue || String(item.id) === normalizedValue
+    );
+
+    if (matchedType?.name) {
+      return matchedType.name;
+    }
+
+    return formatEnumLabel(normalizedValue);
+  };
+
   const departmentOptions = useMemo(() => {
     const selectedDepartment = trimToNull(form.department);
     const options: Array<{
@@ -529,6 +896,68 @@ export function CollaboratorFormScreen({
     return options.sort((left, right) => left.name.localeCompare(right.name));
   }, [departments, form.department, form.departmentId]);
 
+  const titleOptions = useMemo(() => {
+    const selectedTitle = trimToNull(form.title);
+    const options: Array<{
+      id?: number | null;
+      name: string;
+      code?: string | null;
+      description?: string | null;
+    }> = jobTitles
+      .filter((item) => item.status === 'active' || item.name === selectedTitle)
+      .map((item) => ({
+        id: item.id,
+        name: item.name,
+        code: item.code ?? null,
+        description: item.description ?? null,
+      }));
+
+    if (selectedTitle) {
+      const alreadyIncluded = options.some(
+        (item) => item.name === selectedTitle
+      );
+
+      if (!alreadyIncluded) {
+        options.push({
+          id: form.jobTitleId ? Number(form.jobTitleId) : undefined,
+          name: selectedTitle,
+          code: null,
+          description: null,
+        });
+      }
+    }
+
+    return options.sort((left, right) => left.name.localeCompare(right.name));
+  }, [jobTitles, form.title, form.jobTitleId]);
+
+  const createJobTitle = async (jobTitleName: string) => {
+    try {
+      const createdJobTitle = await mutateOperations<OperationsJobTitle>(
+        request,
+        '/operations/job-titles',
+        'POST',
+        {
+          name: jobTitleName,
+        }
+      );
+
+      await refetchJobTitles();
+
+      return {
+        id: createdJobTitle.id,
+        name: createdJobTitle.name,
+        code: createdJobTitle.code ?? null,
+        description: createdJobTitle.description ?? null,
+      };
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, 'Unable to create the job title.')
+      );
+      return null;
+    }
+  };
+
   const updateScheduleDay = (
     weekday: string,
     patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
@@ -572,15 +1001,23 @@ export function CollaboratorFormScreen({
     }
 
     const departmentId = parseNumberInput(form.departmentId);
+    const jobTitleId = parseNumberInput(form.jobTitleId);
+    const collaboratorTypeId = parseNumberInput(form.collaboratorTypeId);
+
+    if (!collaboratorTypeId) {
+      showToastHandler?.('error', t('messages.collaboratorTypeRequired'));
+      return;
+    }
 
     const payload = {
       userId: userId ?? undefined,
       personId: personId ?? undefined,
       code: trimToNull(form.code) ?? undefined,
       displayName: trimToNull(form.displayName),
-      collaboratorType: form.collaboratorType,
+      collaboratorTypeId,
       departmentId: departmentId ?? undefined,
       department: departmentId ? undefined : trimToNull(form.department),
+      jobTitleId: jobTitleId ?? undefined,
       title: trimToNull(form.title),
       levelLabel: trimToNull(form.levelLabel),
       weeklyCapacityHours: parseNumberInput(form.weeklyCapacityHours),
@@ -595,6 +1032,16 @@ export function CollaboratorFormScreen({
       contractDescription: trimToNull(form.contractDescription),
       autoGenerateContractDraft: form.autoGenerateContractDraft,
       notes: trimToNull(form.notes),
+      equityParticipation: shouldShowEquitySection
+        ? {
+            participationType: form.equityParticipation.participationType,
+            percentage: parseNumberInput(form.equityParticipation.percentage),
+            votingPower: parseNumberInput(form.equityParticipation.votingPower),
+            startDate: trimToNull(form.equityParticipation.startDate),
+            endDate: trimToNull(form.equityParticipation.endDate),
+            notes: trimToNull(form.equityParticipation.notes),
+          }
+        : null,
       weeklySchedule: form.weeklySchedule.map((day) => ({
         weekday: day.weekday,
         isWorkingDay: day.isWorkingDay,
@@ -623,6 +1070,16 @@ export function CollaboratorFormScreen({
             payload
           );
 
+      setForm(toFormState(response));
+
+      await Promise.all([
+        refetchCollaborator(),
+        refetchCollaboratorTypes(),
+        refetchDepartments(),
+        refetchCollaborators(),
+        refetchJobTitles(),
+      ]);
+
       showToastHandler?.(
         'success',
         collaboratorId
@@ -636,10 +1093,13 @@ export function CollaboratorFormScreen({
       }
 
       router.push(`/operations/collaborators/${response.id}`);
-    } catch {
+    } catch (error) {
       showToastHandler?.(
         'error',
-        collaboratorId ? t('messages.updateError') : t('messages.createError')
+        getOperationsErrorMessage(
+          error,
+          collaboratorId ? t('messages.updateError') : t('messages.createError')
+        )
       );
     }
   };
@@ -690,7 +1150,11 @@ export function CollaboratorFormScreen({
               className={getStatusBadgeClass(collaborator.status)}
             />
             <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-              {getCollaboratorTypeLabel(collaborator.collaboratorType)}
+              {getCollaboratorTypeLabel(
+                collaborator.collaboratorTypeSlug ??
+                  collaborator.collaboratorType,
+                collaborator.collaboratorTypeName
+              )}
             </span>
           </div>
         </div>
@@ -760,7 +1224,7 @@ export function CollaboratorFormScreen({
         </p>
       </div>
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-        <div className="space-y-2 md:col-span-2 xl:col-span-4">
+        <div className="space-y-2 md:col-span-2">
           <PersonSelectWithCreate
             label={t('fields.person')}
             entityLabel={t('fields.personEntityLabel')}
@@ -776,33 +1240,63 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
-        <div className="space-y-2">
-          <Label>{t('fields.code')}</Label>
-          <Input
-            className="h-10"
-            value={form.code}
-            placeholder="COL-001"
-            onChange={(event) =>
+        <div className="space-y-2 md:col-span-2 xl:col-span-2">
+          <SystemUserAutocomplete
+            label={t('fields.userIdOptional')}
+            value={form.userId}
+            options={systemUsers}
+            placeholder={t('placeholders.userIdOptional')}
+            emptyLabel={commonT('labels.notAssigned')}
+            onChange={(value) =>
               setForm((current) => ({
                 ...current,
-                code: event.target.value,
+                userId: value,
               }))
             }
           />
+          <p className="text-xs text-muted-foreground">
+            {t('fields.userIdDescription')}
+          </p>
         </div>
         <div className="space-y-2">
-          <Label>{t('fields.levelLabel')}</Label>
+          <Label>{t('fields.code')}</Label>
           <Input
             className="h-10"
-            value={form.levelLabel}
+            value={form.code}
+            placeholder="COL-001"
             onChange={(event) =>
               setForm((current) => ({
                 ...current,
-                levelLabel: event.target.value,
+                code: event.target.value,
               }))
             }
           />
         </div>
+        {!isCreateMode ? (
+          <div className="space-y-2">
+            <Label>{t('fields.levelLabel')}</Label>
+            <Select
+              value={form.levelLabel}
+              onValueChange={(value) =>
+                setForm((current) => ({
+                  ...current,
+                  levelLabel: value,
+                }))
+              }
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder={t('placeholders.levelLabel')} />
+              </SelectTrigger>
+              <SelectContent>
+                {COLLABORATOR_LEVEL_OPTIONS.map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {t(`options.levels.${level}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
         <div className="space-y-2 xl:col-span-1">
           <DepartmentSelectWithCreate
             label={t('fields.department')}
@@ -821,14 +1315,19 @@ export function CollaboratorFormScreen({
           />
         </div>
         <div className="space-y-2 xl:col-span-1">
-          <Label>{t('fields.title')}</Label>
-          <Input
-            className="h-10"
+          <DepartmentSelectWithCreate
+            label={t('fields.title')}
             value={form.title}
-            onChange={(event) =>
+            options={titleOptions}
+            onCreate={createJobTitle}
+            selectPlaceholder={t('placeholders.title')}
+            createDescription={t('fields.titleDescription')}
+            createPlaceholder={t('placeholders.titleCreate')}
+            onChange={(titleOption) =>
               setForm((current) => ({
                 ...current,
-                title: event.target.value,
+                jobTitleId: titleOption.id ? String(titleOption.id) : '',
+                title: titleOption.name,
               }))
             }
           />
@@ -844,42 +1343,44 @@ export function CollaboratorFormScreen({
           {t('sections.employmentInfo')}
         </h3>
         <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.employmentInfoDescription')}
+          {isCreateMode
+            ? t('sections.employmentInfoCreateDescription')
+            : t('sections.employmentInfoDescription')}
         </p>
       </div>
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-        <div className="space-y-2">
+        <div className="space-y-2 xl:col-span-1">
           <label className="text-sm font-medium">
             {t('fields.collaboratorType')}
           </label>
+
           <Select
-            value={form.collaboratorType}
+            value={form.collaboratorTypeId}
             onValueChange={(value) =>
               setForm((current) => ({
                 ...current,
-                collaboratorType: value,
+                collaboratorTypeId: value,
               }))
             }
           >
             <SelectTrigger className="w-full">
-              <SelectValue />
+              <SelectValue
+                placeholder={
+                  isLoadingCollaboratorTypes
+                    ? t('states.loadingCollaboratorTypes')
+                    : t('placeholders.collaboratorType')
+                }
+              />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="clt">
-                {t('options.collaboratorTypes.clt')}
-              </SelectItem>
-              <SelectItem value="pj">
-                {t('options.collaboratorTypes.pj')}
-              </SelectItem>
-              <SelectItem value="freelancer">
-                {t('options.collaboratorTypes.freelancer')}
-              </SelectItem>
-              <SelectItem value="intern">
-                {t('options.collaboratorTypes.intern')}
-              </SelectItem>
-              <SelectItem value="other">
-                {t('options.collaboratorTypes.other')}
-              </SelectItem>
+              {collaboratorTypes.map((collaboratorType) => (
+                <SelectItem
+                  key={collaboratorType.id}
+                  value={String(collaboratorType.id)}
+                >
+                  {collaboratorType.name}
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
         </div>
@@ -942,10 +1443,187 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
+        {isCreateMode ? (
+          <>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('fields.weeklyCapacityHours')}
+              </label>
+              <Input
+                type="number"
+                step="0.5"
+                value={form.weeklyCapacityHours}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    weeklyCapacityHours: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('fields.compensationAmount')}
+              </label>
+              <InputMoney
+                step="0.01"
+                value={form.compensationAmount}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    compensationAmount: event.target.value,
+                  }))
+                }
+              />
+            </div>
+          </>
+        ) : null}
       </div>
     </div>
   );
 
+  const equitySection = shouldShowEquitySection ? (
+    <div className="space-y-2">
+      <div className="space-y-0.5">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {t('sections.equity')}
+        </h3>
+        <p className="text-[11px] text-muted-foreground/80">
+          {t('sections.equityDescription')}
+        </p>
+      </div>
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <div className="space-y-2 xl:col-span-2">
+          <label className="text-sm font-medium">
+            {t('fields.equityParticipationType')}
+          </label>
+          <Select
+            value={form.equityParticipation.participationType}
+            onValueChange={(value) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  participationType: value,
+                },
+              }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="partner_quota_holder">
+                {t('options.equityParticipationTypes.partner_quota_holder')}
+              </SelectItem>
+              <SelectItem value="common_shareholder">
+                {t('options.equityParticipationTypes.common_shareholder')}
+              </SelectItem>
+              <SelectItem value="preferred_shareholder">
+                {t('options.equityParticipationTypes.preferred_shareholder')}
+              </SelectItem>
+              <SelectItem value="administrator">
+                {t('options.equityParticipationTypes.administrator')}
+              </SelectItem>
+              <SelectItem value="other">
+                {t('options.equityParticipationTypes.other')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label>{t('fields.equityPercentage')}</Label>
+          <Input
+            type="number"
+            min="0"
+            max="100"
+            step="0.0001"
+            placeholder={t('placeholders.equityPercentage')}
+            value={form.equityParticipation.percentage}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  percentage: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('fields.votingPower')}</Label>
+          <Input
+            type="number"
+            min="0"
+            max="100"
+            step="0.0001"
+            placeholder={t('placeholders.votingPower')}
+            value={form.equityParticipation.votingPower}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  votingPower: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{commonT('labels.startDate')}</Label>
+          <Input
+            type="date"
+            value={form.equityParticipation.startDate}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  startDate: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{commonT('labels.endDate')}</Label>
+          <Input
+            type="date"
+            value={form.equityParticipation.endDate}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  endDate: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2 md:col-span-2 xl:col-span-4">
+          <Label>{t('fields.equityNotes')}</Label>
+          <Textarea
+            rows={4}
+            placeholder={t('placeholders.equityNotes')}
+            value={form.equityParticipation.notes}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  notes: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+      </div>
+    </div>
+  ) : null;
+
   const supervisorSection = (
     <div className="space-y-2">
       <div className="space-y-0.5">
@@ -1070,7 +1748,7 @@ export function CollaboratorFormScreen({
           >
             <div className="space-y-0.5 md:pr-1">
               <div className="text-sm font-medium leading-none">
-                {formatEnumLabel(day.weekday)}
+                {formatWeekdayLabel(day.weekday, currentLocaleCode)}
               </div>
               <div className="text-[10px] leading-none text-muted-foreground">
                 {day.isWorkingDay
@@ -1309,13 +1987,13 @@ export function CollaboratorFormScreen({
                     href={`/operations/contracts?edit=${contract.id}`}
                     className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border px-3 py-2.5 transition-colors hover:bg-muted/20"
                   >
-                    <div className="min-w-0">
-                      <div className="truncate font-medium">
-                        {contract.name || contract.code}
-                      </div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[
-                          contract.code,
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {contract.name || contract.code}
+                      </div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {[
+                          contract.code,
                           formatEnumLabel(contract.contractCategory),
                         ]
                           .filter(Boolean)
@@ -1388,6 +2066,7 @@ export function CollaboratorFormScreen({
     <div className="space-y-4">
       {basicInfoSection}
       {employmentInfoSection}
+      {!isCreateMode ? equitySection : null}
       {supervisorSection}
     </div>
   );
@@ -1395,15 +2074,15 @@ export function CollaboratorFormScreen({
   const formContent = isSheetMode ? (
     <div className="space-y-4 px-4">
       {profileContent}
-      {contractSection}
-      {scheduleSection}
+      {!isCreateMode ? contractSection : null}
+      {!isCreateMode ? scheduleSection : null}
       {activitySection}
     </div>
   ) : (
     <div className="space-y-4 px-4">
       {profileContent}
-      {contractSection}
-      {scheduleSection}
+      {!isCreateMode ? contractSection : null}
+      {!isCreateMode ? scheduleSection : null}
     </div>
   );
 
@@ -1436,7 +2115,7 @@ export function CollaboratorFormScreen({
     <Page>
       <OperationsHeader
         title={t(collaboratorId ? 'editTitle' : 'newTitle')}
-        description={t('description')}
+        description={isCreateMode ? t('descriptionCreate') : t('description')}
         current={t('breadcrumb')}
         actions={
           <div className="flex gap-2">