@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -0,0 +1,2233 @@
+'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>
+  );
+}