@hed-hog/operations 0.0.300 → 0.0.301

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

@@ -1,8 +1,25 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+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 { 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,
@@ -12,23 +29,44 @@ import {
 } 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, Save, UserRound } from 'lucide-react';
+import {
+  ArrowLeft,
+  Check,
+  ChevronsUpDown,
+  Info,
+  Save,
+  UserRound,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { OperationsHeader } from './operations-header';
-import { SectionCard } from './section-card';
+import { useEffect, useMemo, useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
   OperationsCollaboratorDetails,
+  OperationsDepartment,
   OperationsWeeklyScheduleDay,
 } from '../_lib/types';
+import {
+  formatDate,
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
 import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-import { formatEnumLabel } from '../_lib/utils/format';
+import { DepartmentSelectWithCreate } from './department-select-with-create';
+import { OperationsHeader } from './operations-header';
+import { PersonSelectWithCreate } from './person-select-with-create';
+import { StatusBadge } from './status-badge';
 
 const weekdays = [
   'monday',
@@ -40,11 +78,55 @@ const weekdays = [
   'sunday',
 ] as const;
 
+const SUPERVISOR_PAGE_SIZE = 10;
+
+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);
+}
+
 type CollaboratorFormState = {
   userId: string;
+  personId: string;
   code: string;
   displayName: string;
   collaboratorType: string;
+  departmentId: string;
   department: string;
   title: string;
   levelLabel: string;
@@ -79,9 +161,11 @@ function defaultSchedule(): CollaboratorFormState['weeklySchedule'] {
 function buildEmptyForm(): CollaboratorFormState {
   return {
     userId: '',
+    personId: '',
     code: '',
     displayName: '',
     collaboratorType: 'clt',
+    departmentId: '',
     department: '',
     title: '',
     levelLabel: '',
@@ -110,9 +194,10 @@ function normalizeSchedule(
 
     return {
       weekday,
-      isWorkingDay: item?.isWorkingDay ?? !['saturday', 'sunday'].includes(weekday),
-      startTime: item?.startTime ?? '09:00',
-      endTime: item?.endTime ?? '18:00',
+      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)
@@ -126,9 +211,13 @@ function toFormState(
 ): CollaboratorFormState {
   return {
     userId: collaborator.userId ? String(collaborator.userId) : '',
+    personId: collaborator.personId ? String(collaborator.personId) : '',
     code: collaborator.code ?? '',
     displayName: collaborator.displayName ?? '',
     collaboratorType: collaborator.collaboratorType ?? 'other',
+    departmentId: collaborator.departmentId
+      ? String(collaborator.departmentId)
+      : '',
     department: collaborator.department ?? '',
     title: collaborator.title ?? '',
     levelLabel: collaborator.levelLabel ?? '',
@@ -155,23 +244,220 @@ function toFormState(
   };
 }
 
+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 getCollaboratorTypeLabel = (value?: string | null) => {
+    switch (value) {
+      case 'clt':
+        return t('options.collaboratorTypes.clt');
+      case 'pj':
+        return t('options.collaboratorTypes.pj');
+      case 'freelancer':
+        return t('options.collaboratorTypes.freelancer');
+      case 'intern':
+        return t('options.collaboratorTypes.intern');
+      case 'other':
+        return t('options.collaboratorTypes.other');
+      default:
+        return formatEnumLabel(value);
+    }
+  };
+
+  const 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 } =
     useQuery<OperationsCollaboratorDetails>({
-      queryKey: ['operations-collaborator-form', currentLocaleCode, collaboratorId],
+      queryKey: [
+        'operations-collaborator-form',
+        currentLocaleCode,
+        collaboratorId,
+      ],
       enabled: Boolean(collaboratorId),
       queryFn: () =>
         fetchOperations<OperationsCollaboratorDetails>(
@@ -184,45 +470,117 @@ export function CollaboratorFormScreen({
     queryKey: ['operations-collaborator-form-supervisors', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
+  });
+
+  const { data: departments = [] } = useQuery<OperationsDepartment[]>({
+    queryKey: ['operations-collaborator-form-departments', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsDepartment[]>(
+        request,
+        '/operations/departments'
+      ),
   });
 
   useEffect(() => {
     if (collaborator) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm(toFormState(collaborator));
     }
   }, [collaborator]);
 
+  const departmentOptions = useMemo(() => {
+    const selectedDepartment = trimToNull(form.department);
+    const options: Array<{
+      id?: number | null;
+      name: string;
+      code?: string | null;
+      description?: string | null;
+    }> = departments
+      .filter(
+        (item) => item.status === 'active' || item.name === selectedDepartment
+      )
+      .map((item) => ({
+        id: item.id,
+        name: item.name,
+        code: item.code ?? null,
+        description: item.description ?? null,
+      }));
+
+    if (selectedDepartment) {
+      const alreadyIncluded = options.some(
+        (item) => item.name === selectedDepartment
+      );
+
+      if (!alreadyIncluded) {
+        options.push({
+          id: form.departmentId ? Number(form.departmentId) : undefined,
+          name: selectedDepartment,
+          code: null,
+          description: null,
+        });
+      }
+    }
+
+    return options.sort((left, right) => left.name.localeCompare(right.name));
+  }, [departments, form.department, form.departmentId]);
+
   const updateScheduleDay = (
     weekday: string,
     patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
   ) => {
     setForm((current) => ({
       ...current,
-      weeklySchedule: current.weeklySchedule.map((day) =>
-        day.weekday === weekday ? { ...day, ...patch } : day
-      ),
+      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);
-    if (!collaboratorId && !userId) {
-      showToastHandler?.('error', t('messages.userRequired'));
-      return;
-    }
+    const personId = parseNumberInput(form.personId);
 
-    if (!form.code.trim() || !form.displayName.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
+    if (!personId) {
+      showToastHandler?.('error', t('messages.personRequired'));
       return;
     }
 
+    const departmentId = parseNumberInput(form.departmentId);
+
     const payload = {
       userId: userId ?? undefined,
-      code: form.code.trim(),
-      displayName: form.displayName.trim(),
+      personId: personId ?? undefined,
+      code: trimToNull(form.code) ?? undefined,
+      displayName: trimToNull(form.displayName),
       collaboratorType: form.collaboratorType,
-      department: trimToNull(form.department),
+      departmentId: departmentId ?? undefined,
+      department: departmentId ? undefined : trimToNull(form.department),
       title: trimToNull(form.title),
       levelLabel: trimToNull(form.levelLabel),
       weeklyCapacityHours: parseNumberInput(form.weeklyCapacityHours),
@@ -240,8 +598,12 @@ export function CollaboratorFormScreen({
       weeklySchedule: form.weeklySchedule.map((day) => ({
         weekday: day.weekday,
         isWorkingDay: day.isWorkingDay,
-        startTime: day.isWorkingDay ? trimToNull(day.startTime) : null,
-        endTime: day.isWorkingDay ? trimToNull(day.endTime) : null,
+        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,
       })),
     };
@@ -263,8 +625,16 @@ export function CollaboratorFormScreen({
 
       showToastHandler?.(
         'success',
-        collaboratorId ? t('messages.updateSuccess') : t('messages.createSuccess')
+        collaboratorId
+          ? t('messages.updateSuccess')
+          : t('messages.createSuccess')
       );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
       router.push(`/operations/collaborators/${response.id}`);
     } catch {
       showToastHandler?.(
@@ -274,7 +644,99 @@ export function CollaboratorFormScreen({
     }
   };
 
+  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 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.collaboratorType)}
+            </span>
+          </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
@@ -282,334 +744,411 @@ export function CollaboratorFormScreen({
           description={t('description')}
           current={t('breadcrumb')}
         />
-        <EmptyState
-          icon={<UserRound className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => router.refresh()}
-        />
+        {noAccessState}
       </Page>
     );
   }
 
-  return (
-    <Page>
-      <OperationsHeader
-        title={t(collaboratorId ? 'editTitle' : 'newTitle')}
-        description={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>
+  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 xl:col-span-4">
+          <PersonSelectWithCreate
+            label={t('fields.person')}
+            entityLabel={t('fields.personEntityLabel')}
+            value={form.personId ? Number(form.personId) : null}
+            initialSelectedLabel={form.displayName}
+            selectPlaceholder={t('placeholders.person')}
+            onChange={(personId, personName) =>
+              setForm((current) => ({
+                ...current,
+                personId: personId ? String(personId) : '',
+                displayName: personName,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('fields.code')}</Label>
+          <Input
+            className="h-10"
+            value={form.code}
+            placeholder="COL-001"
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                code: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('fields.levelLabel')}</Label>
+          <Input
+            className="h-10"
+            value={form.levelLabel}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                levelLabel: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2 xl:col-span-1">
+          <DepartmentSelectWithCreate
+            label={t('fields.department')}
+            value={form.department}
+            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) : '',
+                department: department.name,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2 xl:col-span-1">
+          <Label>{t('fields.title')}</Label>
+          <Input
+            className="h-10"
+            value={form.title}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                title: event.target.value,
+              }))
+            }
+          />
+        </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">
+          {t('sections.employmentInfoDescription')}
+        </p>
+      </div>
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t('fields.collaboratorType')}
+          </label>
+          <Select
+            value={form.collaboratorType}
+            onValueChange={(value) =>
+              setForm((current) => ({
+                ...current,
+                collaboratorType: value,
+              }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="clt">
+                {t('options.collaboratorTypes.clt')}
+              </SelectItem>
+              <SelectItem value="pj">
+                {t('options.collaboratorTypes.pj')}
+              </SelectItem>
+              <SelectItem value="freelancer">
+                {t('options.collaboratorTypes.freelancer')}
+              </SelectItem>
+              <SelectItem value="intern">
+                {t('options.collaboratorTypes.intern')}
+              </SelectItem>
+              <SelectItem value="other">
+                {t('options.collaboratorTypes.other')}
+              </SelectItem>
+            </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>
+      </div>
+    </div>
+  );
+
+  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={collaborators.filter((item) => item.id !== collaboratorId)}
+        placeholder={t('placeholders.supervisor')}
+        emptyLabel={commonT('labels.notAssigned')}
+        onChange={(value) =>
+          setForm((current) => ({
+            ...current,
+            supervisorCollaboratorId: value,
+          }))
         }
       />
+    </div>
+  );
 
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.basicInfo')} description={t('sections.basicInfoDescription')}>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.userId')}</label>
-              <Input
-                value={form.userId}
-                disabled={Boolean(collaboratorId)}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, userId: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.code')}</label>
-              <Input
-                value={form.code}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, code: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.displayName')}</label>
-              <Input
-                value={form.displayName}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    displayName: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.department')}</label>
-              <Input
-                value={form.department}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    department: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.title')}</label>
-              <Input
-                value={form.title}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, title: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.levelLabel')}</label>
-              <Input
-                value={form.levelLabel}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    levelLabel: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="space-y-2 md:col-span-2">
-              <label className="text-sm font-medium">{t('fields.notes')}</label>
-              <Textarea
-                rows={4}
-                value={form.notes}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, notes: event.target.value }))
-                }
-              />
-            </div>
-          </div>
-        </SectionCard>
-
-        <SectionCard
-          title={t('sections.employmentInfo')}
-          description={t('sections.employmentInfoDescription')}
-        >
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.collaboratorType')}</label>
-              <Select
-                value={form.collaboratorType}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, collaboratorType: value }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="clt">CLT</SelectItem>
-                  <SelectItem value="pj">PJ</SelectItem>
-                  <SelectItem value="freelancer">Freelancer</SelectItem>
-                  <SelectItem value="intern">Intern</SelectItem>
-                  <SelectItem value="other">Other</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>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="active">Active</SelectItem>
-                  <SelectItem value="on_leave">On Leave</SelectItem>
-                  <SelectItem value="inactive">Inactive</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 }))
-                }
-              />
+  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-2">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t('fields.weeklyCapacityHours')}
+          </label>
+          <Input
+            type="number"
+            step="0.5"
+            value={form.weeklyCapacityHours}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                weeklyCapacityHours: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t('fields.compensationAmount')}
+          </label>
+          <InputMoney
+            step="0.01"
+            value={form.compensationAmount}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                compensationAmount: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2 md:col-span-2">
+          <label className="text-sm font-medium">
+            {t('fields.contractDescription')}
+          </label>
+          <Textarea
+            rows={4}
+            value={form.contractDescription}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                contractDescription: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-2">
+          <div>
+            <div className="font-medium">
+              {t('fields.autoGenerateContractDraft')}
             </div>
-          </div>
-        </SectionCard>
-
-        <SectionCard
-          title={t('sections.supervisor')}
-          description={t('sections.supervisorDescription')}
-        >
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.supervisor')}</label>
-              <Select
-                value={form.supervisorCollaboratorId}
-                onValueChange={(value) =>
-                  setForm((current) => ({
-                    ...current,
-                    supervisorCollaboratorId: value,
-                  }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
-                  {collaborators
-                    .filter((item) => item.id !== collaboratorId)
-                    .map((item) => (
-                      <SelectItem key={item.id} value={String(item.id)}>
-                        {item.displayName}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
+            <div className="text-sm text-muted-foreground">
+              {t('fields.autoGenerateContractDraftDescription')}
             </div>
           </div>
-        </SectionCard>
+          <Switch
+            checked={form.autoGenerateContractDraft}
+            onCheckedChange={(checked) =>
+              setForm((current) => ({
+                ...current,
+                autoGenerateContractDraft: checked,
+              }))
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
 
-        <SectionCard
-          title={t('sections.contract')}
-          description={t('sections.contractDescription')}
-        >
-          <div className="grid gap-4 md:grid-cols-2">
-            <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>
-              <Input
-                type="number"
-                step="0.01"
-                value={form.compensationAmount}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    compensationAmount: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="space-y-2 md:col-span-2">
-              <label className="text-sm font-medium">{t('fields.contractDescription')}</label>
-              <Textarea
-                rows={4}
-                value={form.contractDescription}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    contractDescription: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-2">
-              <div>
-                <div className="font-medium">{t('fields.autoGenerateContractDraft')}</div>
-                <div className="text-sm text-muted-foreground">
-                  {t('fields.autoGenerateContractDraftDescription')}
-                </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">
+                {formatEnumLabel(day.weekday)}
               </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={form.autoGenerateContractDraft}
+                checked={day.isWorkingDay}
                 onCheckedChange={(checked) =>
-                  setForm((current) => ({
-                    ...current,
-                    autoGenerateContractDraft: checked,
-                  }))
+                  updateScheduleDay(day.weekday, { isWorkingDay: checked })
                 }
               />
             </div>
-          </div>
-        </SectionCard>
-      </div>
-
-      <SectionCard
-        title={t('sections.schedule')}
-        description={t('sections.scheduleDescription')}
-      >
-        <div className="space-y-3">
-          {form.weeklySchedule.map((day) => (
-            <div
-              key={day.weekday}
-              className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[1fr_auto_1fr_1fr_1fr]"
-            >
-              <div>
-                <div className="font-medium">{formatEnumLabel(day.weekday)}</div>
-                <div className="text-xs text-muted-foreground">
-                  {day.isWorkingDay ? commonT('labels.workingDay') : commonT('labels.dayOff')}
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Switch
-                  checked={day.isWorkingDay}
-                  onCheckedChange={(checked) =>
-                    updateScheduleDay(day.weekday, { isWorkingDay: checked })
-                  }
-                />
+            <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={day.startTime}
+                value={normalizeTimeValue(
+                  day.startTime,
+                  day.isWorkingDay ? '09:00' : ''
+                )}
                 disabled={!day.isWorkingDay}
                 onChange={(event) =>
-                  updateScheduleDay(day.weekday, { startTime: event.target.value })
+                  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={day.endTime}
+                value={normalizeTimeValue(
+                  day.endTime,
+                  day.isWorkingDay ? '18:00' : ''
+                )}
                 disabled={!day.isWorkingDay}
                 onChange={(event) =>
-                  updateScheduleDay(day.weekday, { endTime: event.target.value })
+                  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) =>
@@ -619,13 +1158,310 @@ export function CollaboratorFormScreen({
                 }
               />
             </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>
-      </SectionCard>
+      </div>
+    </div>
+  ) : null;
+
+  const profileContent = (
+    <div className="space-y-4">
+      {basicInfoSection}
+      {employmentInfoSection}
+      {supervisorSection}
+    </div>
+  );
+
+  const formContent = isSheetMode ? (
+    <div className="space-y-4 px-4">
+      {profileContent}
+      {contractSection}
+      {scheduleSection}
+      {activitySection}
+    </div>
+  ) : (
+    <div className="space-y-4 px-4">
+      {profileContent}
+      {contractSection}
+      {scheduleSection}
+    </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"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(collaboratorId ? 'editTitle' : 'newTitle')}
+        description={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>
+        }
+      />
 
-      {collaboratorId && isLoadingCollaborator ? (
-        <div className="text-sm text-muted-foreground">{t('loading')}</div>
-      ) : null}
+      {formContent}
+      {loadingState}
     </Page>
   );
 }