@hed-hog/operations 0.0.303 → 0.0.305

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,13 +66,22 @@ import {
   formatDateRange,
   formatEnumLabel,
   formatHours,
+  formatWeekdayLabel,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import {
+  normalizePercentInput,
+  parseNumberInput,
+  trimToNull,
+} from '../_lib/utils/forms';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
 import { PersonSelectWithCreate } from './person-select-with-create';
 import { StatusBadge } from './status-badge';
+import {
+  SystemUserSelectWithCreate,
+  type SystemUserOption,
+} from './system-user-select-with-create';
 
 const weekdays = [
   'monday',
@@ -79,6 +94,45 @@ 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];
+
+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 +174,50 @@ function normalizeTimeValue(value?: string | null, fallback = '') {
   return fallback || String(value);
 }
 
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const normalizedValue = String(value).trim();
+
+  if (!normalizedValue) {
+    return '';
+  }
+
+  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+
+  if (directMatch?.[0]) {
+    return directMatch[0];
+  }
+
+  const parsedDate = new Date(normalizedValue);
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    return normalizedValue;
+  }
+
+  return parsedDate.toISOString().slice(0, 10);
+}
+
+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 +229,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 +262,10 @@ function buildEmptyForm(): CollaboratorFormState {
     personId: '',
     code: '',
     displayName: '',
-    collaboratorType: 'clt',
+    collaboratorTypeId: '',
     departmentId: '',
     department: '',
+    jobTitleId: '',
     title: '',
     levelLabel: '',
     weeklyCapacityHours: '40',
@@ -178,6 +277,14 @@ function buildEmptyForm(): CollaboratorFormState {
     contractDescription: '',
     autoGenerateContractDraft: true,
     notes: '',
+    equityParticipation: {
+      participationType: 'partner_quota_holder',
+      percentage: '',
+      votingPower: '',
+      startDate: '',
+      endDate: '',
+      notes: '',
+    },
     weeklySchedule: defaultSchedule(),
   };
 }
@@ -214,32 +321,60 @@ 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
         ? String(collaborator.weeklyCapacityHours)
         : '',
     status: collaborator.status ?? 'active',
-    joinedAt: collaborator.joinedAt ?? '',
-    leftAt: collaborator.leftAt ?? '',
+    joinedAt: normalizeDateInputValue(collaborator.joinedAt),
+    leftAt: normalizeDateInputValue(collaborator.leftAt),
     supervisorCollaboratorId: collaborator.supervisorId
       ? String(collaborator.supervisorId)
       : 'none',
     compensationAmount:
-      collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
-      collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
-        ? String(collaborator.relatedContracts[0].budgetAmount)
-        : '',
+      collaborator.compensationAmount !== null &&
+      collaborator.compensationAmount !== undefined
+        ? String(collaborator.compensationAmount)
+        : collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
+            collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
+          ? String(collaborator.relatedContracts[0].budgetAmount)
+          : '',
     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: normalizeDateInputValue(
+        collaborator.equityParticipation?.startDate
+      ),
+      endDate: normalizeDateInputValue(
+        collaborator.equityParticipation?.endDate
+      ),
+      notes: collaborator.equityParticipation?.notes ?? '',
+    },
     weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
   };
 }
@@ -418,23 +553,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 +570,74 @@ 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 = [], refetch: refetchSystemUsers } = useQuery<
+    SystemUserOption[]
+  >({
+    queryKey: ['operations-collaborator-form-system-users', currentLocaleCode],
+    enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: async () => {
+      const response = await request<{
+        paginate: { data: Array<{ id: number; name: string | null }> };
+      }>({
+        url: '/user?pageSize=100',
+        method: 'GET',
+      });
+
+      const raw = response.data?.paginate?.data ?? [];
+      const options: SystemUserOption[] = raw.map((u) => ({
+        id: u.id,
+        name: u.name || `#${u.id}`,
+      }));
+
+      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 +645,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 +659,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 +677,114 @@ 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(() => {
+    const availableTypes = [...collaboratorTypes];
+
+    if (
+      collaborator?.collaboratorTypeId &&
+      collaborator.collaboratorType &&
+      !availableTypes.some(
+        (item) => item.id === collaborator.collaboratorTypeId
+      )
+    ) {
+      availableTypes.push({
+        id: collaborator.collaboratorTypeId,
+        slug: collaborator.collaboratorTypeSlug ?? '',
+        name: collaborator.collaboratorType,
+        status: 'active',
+      });
+    }
+
+    return (
+      availableTypes.find(
+        (item) => String(item.id) === String(form.collaboratorTypeId)
+      ) ?? null
+    );
+  }, [collaborator, collaboratorTypes, form.collaboratorTypeId]);
+
+  const supervisorOptions = useMemo(() => {
+    const options = new Map<number, OperationsCollaborator>();
+
+    for (const item of collaborators) {
+      if (item.id !== collaboratorId) {
+        options.set(item.id, item);
+      }
+    }
+
+    if (
+      collaborator?.supervisorId &&
+      collaborator.supervisorName &&
+      collaborator.supervisorId !== collaboratorId &&
+      !options.has(collaborator.supervisorId)
+    ) {
+      options.set(collaborator.supervisorId, {
+        id: collaborator.supervisorId,
+        code: '',
+        displayName: collaborator.supervisorName,
+        department: null,
+        title: null,
+        status: 'active',
+      });
+    }
+
+    return Array.from(options.values()).sort((left, right) =>
+      left.displayName.localeCompare(right.displayName)
+    );
+  }, [collaborator, collaboratorId, collaborators]);
+
+  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 +821,91 @@ 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 createSystemUser = async (
+    name: string,
+    email: string,
+    password: string
+  ): Promise<SystemUserOption | null> => {
+    try {
+      const response = await request<{ id: number; name: string }>({
+        url: '/user',
+        method: 'POST',
+        data: { name, email, password },
+      });
+      await refetchSystemUsers();
+      showToastHandler?.('success', t('messages.createUserSuccess'));
+      return { id: response.data.id, name: response.data.name };
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.createUserError'))
+      );
+      return null;
+    }
+  };
+
   const updateScheduleDay = (
     weekday: string,
     patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
@@ -565,6 +942,7 @@ export function CollaboratorFormScreen({
   const onSubmit = async () => {
     const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
+    const compensationAmount = parseNumberInput(form.compensationAmount);
 
     if (!personId) {
       showToastHandler?.('error', t('messages.personRequired'));
@@ -572,15 +950,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),
@@ -591,10 +977,21 @@ export function CollaboratorFormScreen({
         form.supervisorCollaboratorId === 'none'
           ? null
           : parseNumberInput(form.supervisorCollaboratorId),
-      compensationAmount: parseNumberInput(form.compensationAmount),
+      compensationAmount:
+        compensationAmount !== null ? compensationAmount : null,
       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 +1020,16 @@ export function CollaboratorFormScreen({
             payload
           );
 
+      setForm(toFormState(response));
+
+      await Promise.all([
+        collaboratorId ? refetchCollaborator() : Promise.resolve(),
+        refetchCollaboratorTypes(),
+        refetchDepartments(),
+        refetchCollaborators(),
+        refetchJobTitles(),
+      ]);
+
       showToastHandler?.(
         'success',
         collaboratorId
@@ -636,10 +1043,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 +1100,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,12 +1174,12 @@ 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')}
             value={form.personId ? Number(form.personId) : null}
-            initialSelectedLabel={form.displayName}
+            initialSelectedLabel={collaborator?.personName ?? form.displayName}
             selectPlaceholder={t('placeholders.person')}
             onChange={(personId, personName) =>
               setForm((current) => ({
@@ -776,33 +1190,64 @@ 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">
+          <SystemUserSelectWithCreate
+            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,
               }))
             }
+            onCreate={createSystemUser}
           />
+          <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 +1266,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 +1294,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 +1394,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 === ''
+                    ? ''
+                    : Number(form.compensationAmount)
+                }
+                onValueChange={(value) =>
+                  setForm((current) => ({
+                    ...current,
+                    compensationAmount: value !== null ? String(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="text"
+            inputMode="decimal"
+            placeholder={t('placeholders.equityPercentage')}
+            value={form.equityParticipation.percentage}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  percentage: normalizePercentInput(event.target.value),
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('fields.votingPower')}</Label>
+          <Input
+            type="text"
+            inputMode="decimal"
+            placeholder={t('placeholders.votingPower')}
+            value={form.equityParticipation.votingPower}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                equityParticipation: {
+                  ...current.equityParticipation,
+                  votingPower: normalizePercentInput(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">
@@ -959,7 +1588,7 @@ export function CollaboratorFormScreen({
       <SupervisorAutocomplete
         label={commonT('labels.supervisor')}
         value={form.supervisorCollaboratorId}
-        options={collaborators.filter((item) => item.id !== collaboratorId)}
+        options={supervisorOptions}
         placeholder={t('placeholders.supervisor')}
         emptyLabel={commonT('labels.notAssigned')}
         onChange={(value) =>
@@ -1005,11 +1634,15 @@ export function CollaboratorFormScreen({
           </label>
           <InputMoney
             step="0.01"
-            value={form.compensationAmount}
-            onChange={(event) =>
+            value={
+              form.compensationAmount === ''
+                ? ''
+                : Number(form.compensationAmount)
+            }
+            onValueChange={(value) =>
               setForm((current) => ({
                 ...current,
-                compensationAmount: event.target.value,
+                compensationAmount: value !== null ? String(value) : '',
               }))
             }
           />
@@ -1070,7 +1703,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 +1942,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 +2021,7 @@ export function CollaboratorFormScreen({
     <div className="space-y-4">
       {basicInfoSection}
       {employmentInfoSection}
+      {!isCreateMode ? equitySection : null}
       {supervisorSection}
     </div>
   );
@@ -1395,15 +2029,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 +2070,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">