@hed-hog/operations 0.0.297 → 0.0.299

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

@@ -1,631 +1,631 @@
-'use client';
-
-import { EmptyState, Page } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { ArrowLeft, Save, UserRound } from 'lucide-react';
-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 { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsCollaborator,
-  OperationsCollaboratorDetails,
-  OperationsWeeklyScheduleDay,
-} from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-import { formatEnumLabel } from '../_lib/utils/format';
-
-const weekdays = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-] as const;
-
-type CollaboratorFormState = {
-  userId: string;
-  code: string;
-  displayName: string;
-  collaboratorType: string;
-  department: string;
-  title: string;
-  levelLabel: string;
-  weeklyCapacityHours: string;
-  status: string;
-  joinedAt: string;
-  leftAt: string;
-  supervisorCollaboratorId: string;
-  compensationAmount: string;
-  contractDescription: string;
-  autoGenerateContractDraft: boolean;
-  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: '',
-    code: '',
-    displayName: '',
-    collaboratorType: 'clt',
-    department: '',
-    title: '',
-    levelLabel: '',
-    weeklyCapacityHours: '40',
-    status: 'active',
-    joinedAt: '',
-    leftAt: '',
-    supervisorCollaboratorId: 'none',
-    compensationAmount: '',
-    contractDescription: '',
-    autoGenerateContractDraft: true,
-    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: item?.startTime ?? '09:00',
-      endTime: 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) : '',
-    code: collaborator.code ?? '',
-    displayName: collaborator.displayName ?? '',
-    collaboratorType: collaborator.collaboratorType ?? 'other',
-    department: collaborator.department ?? '',
-    title: collaborator.title ?? '',
-    levelLabel: collaborator.levelLabel ?? '',
-    weeklyCapacityHours:
-      collaborator.weeklyCapacityHours !== null &&
-      collaborator.weeklyCapacityHours !== undefined
-        ? String(collaborator.weeklyCapacityHours)
-        : '',
-    status: collaborator.status ?? 'active',
-    joinedAt: collaborator.joinedAt ?? '',
-    leftAt: collaborator.leftAt ?? '',
-    supervisorCollaboratorId: collaborator.supervisorId
-      ? String(collaborator.supervisorId)
-      : 'none',
-    compensationAmount:
-      collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
-      collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
-        ? String(collaborator.relatedContracts[0].budgetAmount)
-        : '',
-    contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
-    autoGenerateContractDraft: true,
-    notes: collaborator.notes ?? '',
-    weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
-  };
-}
-
-type CollaboratorFormScreenProps = {
-  collaboratorId?: number;
-};
-
-export function CollaboratorFormScreen({
-  collaboratorId,
-}: CollaboratorFormScreenProps) {
-  const t = useTranslations('operations.CollaboratorFormPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const router = useRouter();
-  const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
-
-  const { data: collaborator, isLoading: isLoadingCollaborator } =
-    useQuery<OperationsCollaboratorDetails>({
-      queryKey: ['operations-collaborator-form', currentLocaleCode, collaboratorId],
-      enabled: Boolean(collaboratorId),
-      queryFn: () =>
-        fetchOperations<OperationsCollaboratorDetails>(
-          request,
-          `/operations/collaborators/${collaboratorId}`
-        ),
-    });
-
-  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
-    queryKey: ['operations-collaborator-form-supervisors', currentLocaleCode],
-    enabled: access.isDirector,
-    queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
-  });
-
-  useEffect(() => {
-    if (collaborator) {
-      setForm(toFormState(collaborator));
-    }
-  }, [collaborator]);
-
-  const updateScheduleDay = (
-    weekday: string,
-    patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
-  ) => {
-    setForm((current) => ({
-      ...current,
-      weeklySchedule: current.weeklySchedule.map((day) =>
-        day.weekday === weekday ? { ...day, ...patch } : day
-      ),
-    }));
-  };
-
-  const onSubmit = async () => {
-    const userId = parseNumberInput(form.userId);
-    if (!collaboratorId && !userId) {
-      showToastHandler?.('error', t('messages.userRequired'));
-      return;
-    }
-
-    if (!form.code.trim() || !form.displayName.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    const payload = {
-      userId: userId ?? undefined,
-      code: form.code.trim(),
-      displayName: form.displayName.trim(),
-      collaboratorType: form.collaboratorType,
-      department: trimToNull(form.department),
-      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: parseNumberInput(form.compensationAmount),
-      contractDescription: trimToNull(form.contractDescription),
-      autoGenerateContractDraft: form.autoGenerateContractDraft,
-      notes: trimToNull(form.notes),
-      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,
-        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
-          );
-
-      showToastHandler?.(
-        'success',
-        collaboratorId ? t('messages.updateSuccess') : t('messages.createSuccess')
-      );
-      router.push(`/operations/collaborators/${response.id}`);
-    } catch {
-      showToastHandler?.(
-        'error',
-        collaboratorId ? t('messages.updateError') : t('messages.createError')
-      );
-    }
-  };
-
-  if (!access.isDirector && !access.isLoading) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t(collaboratorId ? 'editTitle' : 'newTitle')}
-          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()}
-        />
-      </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>
-        }
-      />
-
-      <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 }))
-                }
-              />
-            </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>
-          </div>
-        </SectionCard>
-
-        <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>
-              </div>
-              <Switch
-                checked={form.autoGenerateContractDraft}
-                onCheckedChange={(checked) =>
-                  setForm((current) => ({
-                    ...current,
-                    autoGenerateContractDraft: 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>
-              <Input
-                type="time"
-                value={day.startTime}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, { startTime: event.target.value })
-                }
-              />
-              <Input
-                type="time"
-                value={day.endTime}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, { endTime: event.target.value })
-                }
-              />
-              <Input
-                type="number"
-                value={day.breakMinutes}
-                disabled={!day.isWorkingDay}
-                onChange={(event) =>
-                  updateScheduleDay(day.weekday, {
-                    breakMinutes: event.target.value,
-                  })
-                }
-              />
-            </div>
-          ))}
-        </div>
-      </SectionCard>
-
-      {collaboratorId && isLoadingCollaborator ? (
-        <div className="text-sm text-muted-foreground">{t('loading')}</div>
-      ) : null}
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ArrowLeft, Save, UserRound } from 'lucide-react';
+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 { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsCollaborator,
+  OperationsCollaboratorDetails,
+  OperationsWeeklyScheduleDay,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { formatEnumLabel } from '../_lib/utils/format';
+
+const weekdays = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+] as const;
+
+type CollaboratorFormState = {
+  userId: string;
+  code: string;
+  displayName: string;
+  collaboratorType: string;
+  department: string;
+  title: string;
+  levelLabel: string;
+  weeklyCapacityHours: string;
+  status: string;
+  joinedAt: string;
+  leftAt: string;
+  supervisorCollaboratorId: string;
+  compensationAmount: string;
+  contractDescription: string;
+  autoGenerateContractDraft: boolean;
+  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: '',
+    code: '',
+    displayName: '',
+    collaboratorType: 'clt',
+    department: '',
+    title: '',
+    levelLabel: '',
+    weeklyCapacityHours: '40',
+    status: 'active',
+    joinedAt: '',
+    leftAt: '',
+    supervisorCollaboratorId: 'none',
+    compensationAmount: '',
+    contractDescription: '',
+    autoGenerateContractDraft: true,
+    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: item?.startTime ?? '09:00',
+      endTime: 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) : '',
+    code: collaborator.code ?? '',
+    displayName: collaborator.displayName ?? '',
+    collaboratorType: collaborator.collaboratorType ?? 'other',
+    department: collaborator.department ?? '',
+    title: collaborator.title ?? '',
+    levelLabel: collaborator.levelLabel ?? '',
+    weeklyCapacityHours:
+      collaborator.weeklyCapacityHours !== null &&
+      collaborator.weeklyCapacityHours !== undefined
+        ? String(collaborator.weeklyCapacityHours)
+        : '',
+    status: collaborator.status ?? 'active',
+    joinedAt: collaborator.joinedAt ?? '',
+    leftAt: collaborator.leftAt ?? '',
+    supervisorCollaboratorId: collaborator.supervisorId
+      ? String(collaborator.supervisorId)
+      : 'none',
+    compensationAmount:
+      collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
+      collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
+        ? String(collaborator.relatedContracts[0].budgetAmount)
+        : '',
+    contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
+    autoGenerateContractDraft: true,
+    notes: collaborator.notes ?? '',
+    weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
+  };
+}
+
+type CollaboratorFormScreenProps = {
+  collaboratorId?: number;
+};
+
+export function CollaboratorFormScreen({
+  collaboratorId,
+}: CollaboratorFormScreenProps) {
+  const t = useTranslations('operations.CollaboratorFormPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
+
+  const { data: collaborator, isLoading: isLoadingCollaborator } =
+    useQuery<OperationsCollaboratorDetails>({
+      queryKey: ['operations-collaborator-form', currentLocaleCode, collaboratorId],
+      enabled: Boolean(collaboratorId),
+      queryFn: () =>
+        fetchOperations<OperationsCollaboratorDetails>(
+          request,
+          `/operations/collaborators/${collaboratorId}`
+        ),
+    });
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-collaborator-form-supervisors', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+  });
+
+  useEffect(() => {
+    if (collaborator) {
+      setForm(toFormState(collaborator));
+    }
+  }, [collaborator]);
+
+  const updateScheduleDay = (
+    weekday: string,
+    patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
+  ) => {
+    setForm((current) => ({
+      ...current,
+      weeklySchedule: current.weeklySchedule.map((day) =>
+        day.weekday === weekday ? { ...day, ...patch } : day
+      ),
+    }));
+  };
+
+  const onSubmit = async () => {
+    const userId = parseNumberInput(form.userId);
+    if (!collaboratorId && !userId) {
+      showToastHandler?.('error', t('messages.userRequired'));
+      return;
+    }
+
+    if (!form.code.trim() || !form.displayName.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const payload = {
+      userId: userId ?? undefined,
+      code: form.code.trim(),
+      displayName: form.displayName.trim(),
+      collaboratorType: form.collaboratorType,
+      department: trimToNull(form.department),
+      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: parseNumberInput(form.compensationAmount),
+      contractDescription: trimToNull(form.contractDescription),
+      autoGenerateContractDraft: form.autoGenerateContractDraft,
+      notes: trimToNull(form.notes),
+      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,
+        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
+          );
+
+      showToastHandler?.(
+        'success',
+        collaboratorId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+      router.push(`/operations/collaborators/${response.id}`);
+    } catch {
+      showToastHandler?.(
+        'error',
+        collaboratorId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  if (!access.isDirector && !access.isLoading) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t(collaboratorId ? 'editTitle' : 'newTitle')}
+          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()}
+        />
+      </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>
+        }
+      />
+
+      <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 }))
+                }
+              />
+            </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>
+          </div>
+        </SectionCard>
+
+        <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>
+              </div>
+              <Switch
+                checked={form.autoGenerateContractDraft}
+                onCheckedChange={(checked) =>
+                  setForm((current) => ({
+                    ...current,
+                    autoGenerateContractDraft: 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>
+              <Input
+                type="time"
+                value={day.startTime}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, { startTime: event.target.value })
+                }
+              />
+              <Input
+                type="time"
+                value={day.endTime}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, { endTime: event.target.value })
+                }
+              />
+              <Input
+                type="number"
+                value={day.breakMinutes}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, {
+                    breakMinutes: event.target.value,
+                  })
+                }
+              />
+            </div>
+          ))}
+        </div>
+      </SectionCard>
+
+      {collaboratorId && isLoadingCollaborator ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </Page>
+  );
+}