@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/_components/collaborator-form-screen.tsx

@@ -1,2233 +0,0 @@
-'use client';
-
-import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
-import type {
-  ContactTypeOption,
-  DocumentTypeOption,
-  Person,
-} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
-import { EmptyState, Page } from '@/components/entity-list';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import { EntityPicker } from '@/components/ui/entity-picker';
-import { FormActions } from '@/components/ui/form-actions';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Label } from '@/components/ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  ArrowLeft,
-  Check,
-  ChevronsUpDown,
-  Info,
-  Pencil,
-  Save,
-  UserRound,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import {
-  fetchOperations,
-  getOperationsErrorMessage,
-  mutateOperations,
-} from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsCollaborator,
-  OperationsCollaboratorDetails,
-  OperationsCollaboratorType,
-  OperationsContract,
-  OperationsDepartment,
-  OperationsJobTitle,
-  OperationsWeeklyScheduleDay,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDate,
-  formatDateRange,
-  formatEnumLabel,
-  formatHours,
-  formatWeekdayLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import {
-  normalizePercentInput,
-  parseNumberInput,
-  trimToNull,
-} from '../_lib/utils/forms';
-import { CollaboratorCostsSection } from './collaborator-costs-section';
-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',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-] 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
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : '/placeholder.png';
-}
-
-function getInitials(value?: string | null) {
-  const parts = String(value ?? '')
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2);
-
-  if (!parts.length) {
-    return '??';
-  }
-
-  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
-}
-
-function normalizeTimeValue(value?: string | null, fallback = '') {
-  if (!value) {
-    return fallback;
-  }
-
-  const directMatch = String(value).match(/(\d{2}:\d{2})(?::\d{2})?/);
-
-  if (directMatch?.[1]) {
-    return directMatch[1];
-  }
-
-  const parsedDate = new Date(value);
-
-  if (!Number.isNaN(parsedDate.getTime())) {
-    return parsedDate.toISOString().slice(11, 16);
-  }
-
-  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;
-  displayName: string;
-  collaboratorTypeId: string;
-  departmentId: string;
-  jobTitleId: string;
-  title: string;
-  levelLabel: string;
-  weeklyCapacityHours: string;
-  status: string;
-  joinedAt: string;
-  leftAt: string;
-  supervisorCollaboratorId: string;
-  compensationAmount: string;
-  contractId: string;
-  notes: string;
-  equityParticipation: {
-    participationType: string;
-    percentage: string;
-    votingPower: string;
-    startDate: string;
-    endDate: string;
-    notes: string;
-  };
-  weeklySchedule: Array<{
-    weekday: string;
-    isWorkingDay: boolean;
-    startTime: string;
-    endTime: string;
-    breakMinutes: string;
-  }>;
-};
-
-function defaultSchedule(): CollaboratorFormState['weeklySchedule'] {
-  return weekdays.map((weekday) => ({
-    weekday,
-    isWorkingDay: !['saturday', 'sunday'].includes(weekday),
-    startTime: '09:00',
-    endTime: '18:00',
-    breakMinutes: '60',
-  }));
-}
-
-function buildEmptyForm(): CollaboratorFormState {
-  return {
-    userId: '',
-    personId: '',
-    displayName: '',
-    collaboratorTypeId: '',
-    departmentId: '',
-    jobTitleId: '',
-    title: '',
-    levelLabel: '',
-    weeklyCapacityHours: '40',
-    status: 'active',
-    joinedAt: '',
-    leftAt: '',
-    supervisorCollaboratorId: 'none',
-    compensationAmount: '',
-    contractId: '',
-    notes: '',
-    equityParticipation: {
-      participationType: 'partner_quota_holder',
-      percentage: '',
-      votingPower: '',
-      startDate: '',
-      endDate: '',
-      notes: '',
-    },
-    weeklySchedule: defaultSchedule(),
-  };
-}
-
-function normalizeSchedule(
-  weeklySchedule?: OperationsWeeklyScheduleDay[]
-): CollaboratorFormState['weeklySchedule'] {
-  const byWeekday = new Map(
-    (weeklySchedule ?? []).map((item) => [item.weekday, item])
-  );
-
-  return weekdays.map((weekday) => {
-    const item = byWeekday.get(weekday);
-
-    return {
-      weekday,
-      isWorkingDay:
-        item?.isWorkingDay ?? !['saturday', 'sunday'].includes(weekday),
-      startTime: normalizeTimeValue(item?.startTime, '09:00'),
-      endTime: normalizeTimeValue(item?.endTime, '18:00'),
-      breakMinutes:
-        item?.breakMinutes !== null && item?.breakMinutes !== undefined
-          ? String(item.breakMinutes)
-          : '60',
-    };
-  });
-}
-
-function toFormState(
-  collaborator: OperationsCollaboratorDetails
-): CollaboratorFormState {
-  return {
-    userId: collaborator.userId ? String(collaborator.userId) : '',
-    personId: collaborator.personId ? String(collaborator.personId) : '',
-    displayName: collaborator.displayName ?? '',
-    collaboratorTypeId: collaborator.collaboratorTypeId
-      ? String(collaborator.collaboratorTypeId)
-      : '',
-    departmentId: collaborator.departmentId
-      ? String(collaborator.departmentId)
-      : '',
-    jobTitleId: collaborator.jobTitleId ? String(collaborator.jobTitleId) : '',
-    title: collaborator.title ?? '',
-    levelLabel: normalizeCollaboratorLevel(collaborator.levelLabel),
-    weeklyCapacityHours:
-      collaborator.weeklyCapacityHours !== null &&
-      collaborator.weeklyCapacityHours !== undefined
-        ? String(collaborator.weeklyCapacityHours)
-        : '',
-    status: collaborator.status ?? 'active',
-    joinedAt: normalizeDateInputValue(collaborator.joinedAt),
-    leftAt: normalizeDateInputValue(collaborator.leftAt),
-    supervisorCollaboratorId: collaborator.supervisorId
-      ? String(collaborator.supervisorId)
-      : 'none',
-    compensationAmount:
-      collaborator.compensationAmount !== null &&
-      collaborator.compensationAmount !== undefined
-        ? String(collaborator.compensationAmount)
-        : collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
-            collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
-          ? String(collaborator.relatedContracts[0].budgetAmount)
-          : '',
-    contractId: collaborator.relatedContracts?.[0]?.id
-      ? String(collaborator.relatedContracts[0].id)
-      : '',
-    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),
-  };
-}
-
-type SupervisorAutocompleteProps = {
-  label: string;
-  value: string;
-  options: OperationsCollaborator[];
-  placeholder: string;
-  emptyLabel: string;
-  onChange: (value: string) => void;
-};
-
-function SupervisorAutocomplete({
-  label,
-  value,
-  options,
-  placeholder,
-  emptyLabel,
-  onChange,
-}: SupervisorAutocompleteProps) {
-  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.displayName, option.code, option.department, option.title]
-        .filter(Boolean)
-        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
-    );
-  }, [options, search]);
-
-  const selectedOption = options.find((option) => String(option.id) === value);
-  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?.displayName ?? 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={(value) => {
-                setSearch(value);
-                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('none');
-                    setOpen(false);
-                  }}
-                >
-                  {value === 'none' ? (
-                    <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.displayName} ${option.code ?? ''} ${option.department ?? ''} ${option.title ?? ''}`}
-                    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.displayName}</div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[option.code, option.department, option.title]
-                          .filter(Boolean)
-                          .join(' • ') || commonT('labels.notAvailable')}
-                      </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?: (
-    collaborator: OperationsCollaboratorDetails
-  ) => void | Promise<void>;
-  onCancel?: () => void;
-};
-
-export function CollaboratorFormScreen({
-  collaboratorId,
-  onSaved,
-  onCancel,
-}: CollaboratorFormScreenProps) {
-  const t = useTranslations('operations.CollaboratorFormPage');
-  const commonT = useTranslations('operations.Common');
-  const detailsT = useTranslations('operations.CollaboratorDetailsPage');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const router = useRouter();
-  const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
-  const isSheetMode = Boolean(onCancel);
-  const isCreateMode = !collaboratorId;
-
-  const getStatusLabel = (value?: string | null) => {
-    switch (value) {
-      case 'active':
-        return t('options.statuses.active');
-      case 'on_leave':
-        return t('options.statuses.on_leave');
-      case 'inactive':
-        return t('options.statuses.inactive');
-      case 'draft':
-        return t('options.statuses.draft');
-      default:
-        return formatEnumLabel(value);
-    }
-  };
-
-  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;
-            photo_id?: number | 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}`,
-        photoId: u.photo_id ?? null,
-      }));
-
-      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,
-        '/operations/collaborators'
-      ),
-  });
-
-  const { data: departments = [], refetch: refetchDepartments } = useQuery<
-    OperationsDepartment[]
-  >({
-    queryKey: ['operations-collaborator-form-departments', currentLocaleCode],
-    enabled: access.isDirector,
-    staleTime: 0,
-    refetchOnMount: 'always',
-    queryFn: () =>
-      fetchOperations<OperationsDepartment[]>(
-        request,
-        '/operations/departments'
-      ),
-  });
-
-  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'),
-  });
-
-  const [personSheetOpen, setPersonSheetOpen] = useState(false);
-  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
-
-  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
-    queryKey: ['contact-person-contact-types', currentLocaleCode],
-    enabled: personSheetOpen,
-    queryFn: async () => {
-      const response = await request<{ data: ContactTypeOption[] }>({
-        url: '/person-contact-type?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
-    queryKey: ['contact-person-document-types', currentLocaleCode],
-    enabled: personSheetOpen,
-    queryFn: async () => {
-      const response = await request<{ data: DocumentTypeOption[] }>({
-        url: '/person-document-type?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const handleOpenPersonSheet = async () => {
-    if (!collaborator?.personId) return;
-    try {
-      const response = await request<Person>({
-        url: `/person/${collaborator.personId}`,
-        method: 'GET',
-      });
-      setPersonToEdit(response.data);
-      setPersonSheetOpen(true);
-    } catch {
-      showToastHandler?.('error', t('messages.updateError'));
-    }
-  };
-
-  useEffect(() => {
-    if (collaborator) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setForm(toFormState(collaborator));
-    }
-  }, [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(() => {
-    return departments
-      .filter((item) => item.status === 'active')
-      .map((item) => ({
-        id: item.id,
-        name: item.name,
-        code: item.code ?? null,
-        description: item.description ?? null,
-      }))
-      .sort((left, right) => left.name.localeCompare(right.name));
-  }, [departments]);
-
-  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]>
-  ) => {
-    setForm((current) => ({
-      ...current,
-      weeklySchedule: current.weeklySchedule.map((day) => {
-        if (day.weekday !== weekday) {
-          return day;
-        }
-
-        const nextIsWorkingDay = patch.isWorkingDay ?? day.isWorkingDay;
-
-        return {
-          ...day,
-          ...patch,
-          startTime:
-            patch.startTime !== undefined
-              ? normalizeTimeValue(patch.startTime)
-              : nextIsWorkingDay
-                ? normalizeTimeValue(day.startTime, '09:00')
-                : normalizeTimeValue(day.startTime),
-          endTime:
-            patch.endTime !== undefined
-              ? normalizeTimeValue(patch.endTime)
-              : nextIsWorkingDay
-                ? normalizeTimeValue(day.endTime, '18:00')
-                : normalizeTimeValue(day.endTime),
-        };
-      }),
-    }));
-  };
-
-  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'));
-      return;
-    }
-
-    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,
-      displayName: trimToNull(form.displayName),
-      collaboratorTypeId,
-      departmentId: departmentId ?? undefined,
-      jobTitleId: jobTitleId ?? undefined,
-      title: trimToNull(form.title),
-      levelLabel: trimToNull(form.levelLabel),
-      weeklyCapacityHours: parseNumberInput(form.weeklyCapacityHours),
-      status: form.status,
-      joinedAt: trimToNull(form.joinedAt),
-      leftAt: trimToNull(form.leftAt),
-      supervisorCollaboratorId:
-        form.supervisorCollaboratorId === 'none'
-          ? null
-          : parseNumberInput(form.supervisorCollaboratorId),
-      compensationAmount:
-        compensationAmount !== null ? compensationAmount : null,
-      contractId: parseNumberInput(form.contractId),
-      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,
-        startTime: day.isWorkingDay
-          ? trimToNull(normalizeTimeValue(day.startTime, '09:00'))
-          : null,
-        endTime: day.isWorkingDay
-          ? trimToNull(normalizeTimeValue(day.endTime, '18:00'))
-          : null,
-        breakMinutes: day.isWorkingDay ? parseNumberInput(day.breakMinutes) : 0,
-      })),
-    };
-
-    try {
-      const response = collaboratorId
-        ? await mutateOperations<OperationsCollaboratorDetails>(
-            request,
-            `/operations/collaborators/${collaboratorId}`,
-            'PATCH',
-            payload
-          )
-        : await mutateOperations<OperationsCollaboratorDetails>(
-            request,
-            '/operations/collaborators',
-            'POST',
-            payload
-          );
-
-      setForm(toFormState(response));
-
-      await Promise.all([
-        collaboratorId ? refetchCollaborator() : Promise.resolve(),
-        refetchCollaboratorTypes(),
-        refetchDepartments(),
-        refetchCollaborators(),
-        refetchJobTitles(),
-      ]);
-
-      showToastHandler?.(
-        'success',
-        collaboratorId
-          ? t('messages.updateSuccess')
-          : t('messages.createSuccess')
-      );
-
-      if (onSaved) {
-        await onSaved(response);
-        return;
-      }
-
-      router.push(`/operations/collaborators/${response.id}`);
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(
-          error,
-          collaboratorId ? t('messages.updateError') : t('messages.createError')
-        )
-      );
-    }
-  };
-
-  const noAccessState = (
-    <EmptyState
-      icon={<UserRound className="size-12" />}
-      title={commonT('states.noAccessTitle')}
-      description={t('noAccessDescription')}
-      actionLabel={commonT('actions.refresh')}
-      onAction={() => router.refresh()}
-    />
-  );
-
-  const collaboratorSummary =
-    collaborator && isSheetMode ? (
-      <div className="mx-4 rounded-xl border bg-muted/30 px-4 py-3">
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-          <div className="flex min-w-0 items-center gap-3">
-            <Avatar className="h-12 w-12 border border-border/60 bg-background">
-              <AvatarImage
-                src={getPersonAvatarUrl(collaborator.personAvatarId)}
-                alt={collaborator.displayName}
-              />
-              <AvatarFallback className="bg-muted text-sm font-semibold text-foreground">
-                {getInitials(collaborator.displayName)}
-              </AvatarFallback>
-            </Avatar>
-            <div className="min-w-0">
-              <div className="truncate text-base font-semibold">
-                {collaborator.displayName}
-              </div>
-              <div className="truncate text-xs text-muted-foreground">
-                {[
-                  collaborator.code,
-                  collaborator.department,
-                  collaborator.title,
-                ]
-                  .filter(Boolean)
-                  .join(' • ') || commonT('labels.notAvailable')}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
-            <StatusBadge
-              label={getStatusLabel(collaborator.status)}
-              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.collaboratorTypeSlug ??
-                  collaborator.collaboratorType,
-                collaborator.collaboratorTypeName
-              )}
-            </span>
-            {collaborator.personId ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="h-7 w-7"
-                    onClick={() => void handleOpenPersonSheet()}
-                  >
-                    <Pencil className="size-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  {t('actions.editPersonCrm')}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-          </div>
-        </div>
-
-        <div className="mt-3 grid gap-2 text-sm md:grid-cols-2 xl:grid-cols-4">
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.supervisor')}
-            </div>
-            <div className="font-medium">
-              {collaborator.supervisorName || commonT('labels.notAssigned')}
-            </div>
-          </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.weeklyCapacity')}
-            </div>
-            <div className="font-medium">
-              {formatHours(collaborator.weeklyCapacityHours)}
-            </div>
-          </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.startDate')}
-            </div>
-            <div className="font-medium">
-              {formatDate(collaborator.joinedAt)}
-            </div>
-          </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.projectCount')}
-            </div>
-            <div className="font-medium">
-              {collaborator.assignedProjects.length}
-            </div>
-          </div>
-        </div>
-      </div>
-    ) : null;
-
-  if (!access.isDirector && !access.isLoading) {
-    if (isSheetMode) {
-      return <div className="pt-4">{noAccessState}</div>;
-    }
-
-    return (
-      <Page>
-        <OperationsHeader
-          title={t(collaboratorId ? 'editTitle' : 'newTitle')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        {noAccessState}
-      </Page>
-    );
-  }
-
-  const basicInfoSection = (
-    <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.basicInfo')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.basicInfoDescription')}
-        </p>
-      </div>
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-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={collaborator?.personName ?? form.displayName}
-            selectPlaceholder={t('placeholders.person')}
-            onChange={(personId, personName) =>
-              setForm((current) => ({
-                ...current,
-                personId: personId ? String(personId) : '',
-                displayName: personName,
-              }))
-            }
-          />
-        </div>
-        <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,
-                userId: value,
-              }))
-            }
-            onCreate={createSystemUser}
-          />
-          <p className="text-xs text-muted-foreground">
-            {t('fields.userIdDescription')}
-          </p>
-        </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')}
-            value={
-              departmentOptions.find((d) => String(d.id) === form.departmentId)
-                ?.name ?? ''
-            }
-            options={departmentOptions}
-            selectPlaceholder={t('placeholders.department')}
-            createDescription={t('fields.departmentDescription')}
-            createPlaceholder={t('placeholders.departmentCreate')}
-            onChange={(department) =>
-              setForm((current) => ({
-                ...current,
-                departmentId: department.id ? String(department.id) : '',
-              }))
-            }
-          />
-        </div>
-        <div className="space-y-2 xl:col-span-1">
-          <DepartmentSelectWithCreate
-            label={t('fields.title')}
-            value={form.title}
-            options={titleOptions}
-            onCreate={createJobTitle}
-            selectPlaceholder={t('placeholders.title')}
-            createDescription={t('fields.titleDescription')}
-            createPlaceholder={t('placeholders.titleCreate')}
-            onChange={(titleOption) =>
-              setForm((current) => ({
-                ...current,
-                jobTitleId: titleOption.id ? String(titleOption.id) : '',
-                title: titleOption.name,
-              }))
-            }
-          />
-        </div>
-        <div className="space-y-2 xl:col-span-1">
-          <label className="text-sm font-medium">{t('fields.contract')}</label>
-          <EntityPicker<OperationsContract>
-            value={form.contractId ? Number(form.contractId) : null}
-            onChange={(v) =>
-              setForm((current) => ({
-                ...current,
-                contractId: v ? String(v) : '',
-              }))
-            }
-            placeholder={t('fields.contractPlaceholder')}
-            emptyLabel={t('fields.contractEmpty')}
-            initialSelectedLabel={
-              form.contractId
-                ? (collaborator?.relatedContracts.find(
-                    (c) => String(c.id) === form.contractId
-                  )?.name ??
-                  collaborator?.relatedContracts.find(
-                    (c) => String(c.id) === form.contractId
-                  )?.code ??
-                  undefined)
-                : undefined
-            }
-            clearable
-            showCreateButton
-            createTitle={t('fields.contractCreateTitle')}
-            createDescription={t('fields.contractCreateDescription')}
-            createFields={[
-              {
-                name: 'name',
-                label: t('fields.contractNameField'),
-                placeholder: t('fields.contractNameField'),
-                required: true,
-              },
-            ]}
-            loadOptions={async ({ page, pageSize, search }) => {
-              const params = new URLSearchParams({
-                page: String(page),
-                pageSize: String(pageSize),
-              });
-              if (search.trim()) params.set('search', search.trim());
-              const res = await fetchOperations<
-                PaginatedResponse<OperationsContract>
-              >(request, `/operations/contracts?${params.toString()}`);
-              return {
-                items: res.data ?? [],
-                hasMore: res.page < res.lastPage,
-              };
-            }}
-            getOptionValue={(c) => c.id}
-            getOptionLabel={(c) => (c.name || c.code) as string}
-            getOptionDescription={(c) =>
-              [c.code, c.status].filter(Boolean).join(' • ') || undefined
-            }
-            onCreate={async (values) => {
-              return mutateOperations<OperationsContract>(
-                request,
-                '/operations/contracts',
-                'POST',
-                {
-                  name: values.name,
-                  billingModel: 'time_and_material',
-                }
-              );
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-
-  const employmentInfoSection = (
-    <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.employmentInfo')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {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 xl:col-span-1">
-          <label className="text-sm font-medium">
-            {t('fields.collaboratorType')}
-          </label>
-
-          <Select
-            value={form.collaboratorTypeId}
-            onValueChange={(value) =>
-              setForm((current) => ({
-                ...current,
-                collaboratorTypeId: value,
-              }))
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue
-                placeholder={
-                  isLoadingCollaboratorTypes
-                    ? t('states.loadingCollaboratorTypes')
-                    : t('placeholders.collaboratorType')
-                }
-              />
-            </SelectTrigger>
-            <SelectContent>
-              {collaboratorTypes.map((collaboratorType) => (
-                <SelectItem
-                  key={collaboratorType.id}
-                  value={String(collaboratorType.id)}
-                >
-                  {collaboratorType.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">
-            {commonT('labels.status')}
-          </label>
-          <Select
-            value={form.status}
-            onValueChange={(value) =>
-              setForm((current) => ({ ...current, status: value }))
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="active">
-                {t('options.statuses.active')}
-              </SelectItem>
-              <SelectItem value="on_leave">
-                {t('options.statuses.on_leave')}
-              </SelectItem>
-              <SelectItem value="inactive">
-                {t('options.statuses.inactive')}
-              </SelectItem>
-              <SelectItem value="draft">
-                {t('options.statuses.draft')}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">
-            {commonT('labels.startDate')}
-          </label>
-          <Input
-            type="date"
-            value={form.joinedAt}
-            onChange={(event) =>
-              setForm((current) => ({
-                ...current,
-                joinedAt: event.target.value,
-              }))
-            }
-          />
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">
-            {commonT('labels.endDate')}
-          </label>
-          <Input
-            type="date"
-            value={form.leftAt}
-            onChange={(event) =>
-              setForm((current) => ({
-                ...current,
-                leftAt: event.target.value,
-              }))
-            }
-          />
-        </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">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          {t('sections.supervisor')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.supervisorDescription')}
-        </p>
-      </div>
-      <SupervisorAutocomplete
-        label={commonT('labels.supervisor')}
-        value={form.supervisorCollaboratorId}
-        options={supervisorOptions}
-        placeholder={t('placeholders.supervisor')}
-        emptyLabel={commonT('labels.notAssigned')}
-        onChange={(value) =>
-          setForm((current) => ({
-            ...current,
-            supervisorCollaboratorId: value,
-          }))
-        }
-      />
-    </div>
-  );
-
-  const contractSection = (
-    <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.contract')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.contractDescription')}
-        </p>
-      </div>
-      <div className="grid gap-3 md:grid-cols-3">
-        <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>
-        <div className="space-y-2">
-          <SupervisorAutocomplete
-            label={commonT('labels.supervisor')}
-            value={form.supervisorCollaboratorId}
-            options={supervisorOptions}
-            placeholder={t('placeholders.supervisor')}
-            emptyLabel={commonT('labels.notAssigned')}
-            onChange={(value) =>
-              setForm((current) => ({
-                ...current,
-                supervisorCollaboratorId: value,
-              }))
-            }
-          />
-        </div>
-      </div>
-    </div>
-  );
-
-  const scheduleSection = (
-    <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.schedule')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.scheduleDescription')}
-        </p>
-      </div>
-      <div className="space-y-1.5">
-        {form.weeklySchedule.map((day) => (
-          <div
-            key={day.weekday}
-            className="grid gap-2 rounded-md border px-3 py-2 md:grid-cols-[minmax(108px,0.9fr)_auto_repeat(3,minmax(88px,1fr))] md:items-center"
-          >
-            <div className="space-y-0.5 md:pr-1">
-              <div className="text-sm font-medium leading-none">
-                {formatWeekdayLabel(day.weekday, currentLocaleCode)}
-              </div>
-              <div className="text-[10px] leading-none text-muted-foreground">
-                {day.isWorkingDay
-                  ? commonT('labels.workingDay')
-                  : commonT('labels.dayOff')}
-              </div>
-            </div>
-            <div className="flex items-center justify-between gap-2 rounded-md bg-muted/30 px-2 py-1.5 md:justify-center md:bg-transparent md:p-0">
-              <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:hidden">
-                {commonT('labels.workingDay')}
-              </span>
-              <Switch
-                checked={day.isWorkingDay}
-                onCheckedChange={(checked) =>
-                  updateScheduleDay(day.weekday, { isWorkingDay: checked })
-                }
-              />
-            </div>
-            <div className="space-y-0.5">
-              <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                {t('fields.startTime')}
-              </div>
-              <Input
-                className="h-8"
-                type="time"
-                value={normalizeTimeValue(
-                  day.startTime,
-                  day.isWorkingDay ? '09:00' : ''
-                )}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, {
-                    startTime: event.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="space-y-0.5">
-              <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                {t('fields.endTime')}
-              </div>
-              <Input
-                className="h-8"
-                type="time"
-                value={normalizeTimeValue(
-                  day.endTime,
-                  day.isWorkingDay ? '18:00' : ''
-                )}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, {
-                    endTime: event.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="space-y-0.5">
-              <div className="flex items-center gap-1 text-[10px] uppercase tracking-wide text-muted-foreground">
-                <span>{t('fields.breakMinutes')}</span>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span className="inline-flex cursor-help">
-                      <Info className="h-3.5 w-3.5" />
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{t('fields.breakMinutesDescription')}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-              <Input
-                className="h-8"
-                type="number"
-                min="0"
-                step="5"
-                placeholder="60"
-                title={t('fields.breakMinutesDescription')}
-                aria-label={t('fields.breakMinutes')}
-                value={day.breakMinutes}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, {
-                    breakMinutes: event.target.value,
-                  })
-                }
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="space-y-2 pt-1">
-        <Label>{t('fields.notes')}</Label>
-        <Textarea
-          rows={4}
-          value={form.notes}
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              notes: event.target.value,
-            }))
-          }
-        />
-      </div>
-    </div>
-  );
-
-  const activitySection = collaborator ? (
-    <div className="space-y-4">
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.timesheets')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.timesheetSummary.totalTimesheets}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.timesheetsDescription', {
-              pending: collaborator.timesheetSummary.pendingTimesheets,
-            })}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.loggedHours')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {formatHours(collaborator.timesheetSummary.totalHours)}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.loggedHoursDescription')}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.timeOff')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.timeOffSummary.totalRequests}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.timeOffDescription', {
-              pending: collaborator.timeOffSummary.pendingRequests,
-            })}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('sections.scheduleAdjustments')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.scheduleAdjustmentRequests.length}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('sections.scheduleAdjustmentsDescription')}
-          </p>
-        </div>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <div className="rounded-xl border px-4 py-3">
-          <div className="mb-3 space-y-0.5">
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              {detailsT('sections.projects')}
-            </h3>
-            <p className="text-[11px] text-muted-foreground/80">
-              {detailsT('sections.projectsDescription')}
-            </p>
-          </div>
-
-          {collaborator.assignedProjects.length > 0 ? (
-            <div className="space-y-2">
-              {collaborator.assignedProjects.slice(0, 6).map((project) => (
-                <div
-                  key={project.id}
-                  className="flex flex-col gap-2 rounded-lg border px-3 py-2.5"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="truncate font-medium">{project.name}</div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[
-                          project.code,
-                          project.roleLabel || commonT('labels.notAssigned'),
-                          project.weeklyHours !== null &&
-                          project.weeklyHours !== undefined
-                            ? formatHours(project.weeklyHours)
-                            : null,
-                          project.allocationPercent !== null &&
-                          project.allocationPercent !== undefined
-                            ? `${project.allocationPercent}%`
-                            : null,
-                        ]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={formatEnumLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {formatDateRange(project.startDate, project.endDate)}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              {detailsT('noProjects')}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-4">
-          <div className="rounded-xl border px-4 py-3">
-            <div className="mb-3 space-y-0.5">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                {detailsT('sections.primaryContract')}
-              </h3>
-              <p className="text-[11px] text-muted-foreground/80">
-                {t('sections.contractDescription')}
-              </p>
-            </div>
-
-            {collaborator.relatedContracts.length > 0 ? (
-              <div className="space-y-2">
-                {collaborator.relatedContracts.slice(0, 3).map((contract) => (
-                  <Link
-                    key={contract.id}
-                    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,
-                          formatEnumLabel(contract.contractCategory),
-                        ]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={formatEnumLabel(contract.status)}
-                      className={getStatusBadgeClass(contract.status)}
-                    />
-                  </Link>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {detailsT('noContracts')}
-              </p>
-            )}
-          </div>
-
-          <div className="rounded-xl border px-4 py-3">
-            <div className="mb-3 space-y-0.5">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                {detailsT('sections.scheduleAdjustments')}
-              </h3>
-              <p className="text-[11px] text-muted-foreground/80">
-                {detailsT('sections.scheduleAdjustmentsDescription')}
-              </p>
-            </div>
-
-            {collaborator.scheduleAdjustmentRequests.length > 0 ? (
-              <div className="space-y-2">
-                {collaborator.scheduleAdjustmentRequests
-                  .slice(0, 4)
-                  .map((request) => (
-                    <div
-                      key={request.id}
-                      className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2.5"
-                    >
-                      <div className="min-w-0">
-                        <div className="font-medium">
-                          {formatEnumLabel(request.requestScope)}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {formatDateRange(
-                            request.effectiveStartDate,
-                            request.effectiveEndDate
-                          )}
-                        </div>
-                      </div>
-                      <StatusBadge
-                        label={formatEnumLabel(request.status)}
-                        className={getStatusBadgeClass(request.status)}
-                      />
-                    </div>
-                  ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {detailsT('noScheduleAdjustments')}
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  ) : null;
-
-  const profileContent = (
-    <div className="space-y-4">
-      {basicInfoSection}
-      {employmentInfoSection}
-      {!isCreateMode ? equitySection : null}
-    </div>
-  );
-
-  const costsSection = (
-    <Accordion
-      type="single"
-      collapsible
-      defaultValue={isCreateMode ? undefined : 'costs'}
-    >
-      <AccordionItem value="costs" className="rounded-xl border px-4">
-        <AccordionTrigger className="py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline">
-          {t('sections.costs')}
-        </AccordionTrigger>
-        <AccordionContent className="pb-4">
-          {isCreateMode || !collaborator ? (
-            <p className="text-sm text-muted-foreground">
-              {t('sections.costsSaveBefore')}
-            </p>
-          ) : (
-            <CollaboratorCostsSection
-              collaboratorId={collaborator.id}
-              disabled={!access.isDirector}
-              weeklyCapacity={collaborator.weeklyCapacityHours ?? undefined}
-              remunerationValue={
-                collaborator.compensationAmount != null
-                  ? Number(collaborator.compensationAmount)
-                  : undefined
-              }
-            />
-          )}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-
-  const formContent = isSheetMode ? (
-    <div className="space-y-4 px-4">
-      {profileContent}
-      {contractSection}
-      {!isCreateMode ? costsSection : null}
-      {!isCreateMode ? scheduleSection : null}
-      {activitySection}
-    </div>
-  ) : (
-    <div className="space-y-4 px-4">
-      {profileContent}
-      {contractSection}
-      {!isCreateMode ? costsSection : null}
-      {!isCreateMode ? scheduleSection : null}
-    </div>
-  );
-
-  const loadingState =
-    collaboratorId && isLoadingCollaborator ? (
-      <div className="text-sm text-muted-foreground">{t('loading')}</div>
-    ) : null;
-
-  if (isSheetMode) {
-    return (
-      <div className="mt-6 space-y-4 pb-6">
-        {collaboratorSummary}
-        {formContent}
-        {loadingState}
-
-        <FormActions
-          sheet
-          cancelLabel={commonT('actions.cancel')}
-          onCancel={onCancel}
-          onSubmit={() => void onSubmit()}
-          submitIcon={<Save className="size-4" />}
-          submitLabel={commonT('actions.save')}
-          submitSize="lg"
-        />
-
-        <PersonFormSheet
-          open={personSheetOpen}
-          person={personToEdit}
-          contactTypes={contactTypes}
-          documentTypes={documentTypes}
-          onOpenChange={(nextOpen) => {
-            setPersonSheetOpen(nextOpen);
-            if (!nextOpen) setPersonToEdit(null);
-          }}
-          onSuccess={() => void refetchCollaborator()}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t(collaboratorId ? 'editTitle' : 'newTitle')}
-        description={isCreateMode ? t('descriptionCreate') : t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link
-                href={
-                  collaboratorId
-                    ? `/operations/collaborators/${collaboratorId}`
-                    : '/operations/collaborators'
-                }
-              >
-                <ArrowLeft className="size-4" />
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-            <Button size="sm" onClick={() => void onSubmit()}>
-              <Save className="size-4" />
-              {commonT('actions.save')}
-            </Button>
-          </div>
-        }
-      />
-
-      {formContent}
-      {loadingState}
-    </Page>
-  );
-}