@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -0,0 +1,1745 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FormActions } from '@/components/ui/form-actions';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ArrowLeft,
+  Check,
+  ChevronsUpDown,
+  FileText,
+  FolderKanban,
+  Info,
+  Plus,
+  Save,
+  Search,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  fetchOperations,
+  getOperationsErrorMessage,
+  mutateOperations,
+} from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsCollaborator,
+  OperationsContract,
+  OperationsProjectDetails,
+  OperationsProjectRole,
+} from '../_lib/types';
+import { formatEnumLabel } from '../_lib/utils/format';
+import {
+  normalizePercentInput,
+  parseNumberInput,
+  trimToNull,
+} from '../_lib/utils/forms';
+import { ContractFormScreen } from './contract-form-screen';
+import { DepartmentSelectWithCreate } from './department-select-with-create';
+import { OperationsHeader } from './operations-header';
+import { PersonSelectWithCreate } from './person-select-with-create';
+
+const OPTION_PAGE_SIZE = 12;
+
+type TeamAssignmentState = {
+  collaboratorId: number;
+  selected: boolean;
+  projectRoleId: string;
+  roleLabel: string;
+  weeklyHours: string;
+  allocationPercent: string;
+  status: string;
+  startDate: string;
+  endDate: string;
+};
+
+type ProjectFormState = {
+  contractId: string;
+  managerCollaboratorId: string;
+  code: string;
+  name: string;
+  clientName: string;
+  summary: string;
+  status: string;
+  progressPercent: string;
+  deliveryModel: string;
+  budgetAmount: string;
+  startDate: string;
+  endDate: string;
+  billingModel: string;
+  monthlyHourCap: string;
+  contractCode: string;
+  contractName: string;
+  contractDescription: string;
+  teamAssignments: TeamAssignmentState[];
+};
+
+type ProjectFormValues = ProjectFormState;
+
+function generateProjectCode(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return '';
+  if (words.length === 1) return words[0]!.slice(0, 5).toUpperCase();
+  return words
+    .map((w) => w[0]!.toUpperCase())
+    .join('')
+    .slice(0, 6);
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const normalizedValue = String(value).trim();
+
+  if (!normalizedValue) {
+    return '';
+  }
+
+  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+
+  if (directMatch?.[0]) {
+    return directMatch[0];
+  }
+
+  const parsedDate = new Date(normalizedValue);
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    return normalizedValue;
+  }
+
+  return parsedDate.toISOString().slice(0, 10);
+}
+
+function buildEmptyForm(
+  collaborators: OperationsCollaborator[] = []
+): ProjectFormState {
+  return {
+    contractId: 'none',
+    managerCollaboratorId: 'none',
+    code: '',
+    name: '',
+    clientName: '',
+    summary: '',
+    status: 'planning',
+    progressPercent: '',
+    deliveryModel: 'project_delivery',
+    budgetAmount: '',
+    startDate: '',
+    endDate: '',
+    billingModel: 'time_and_material',
+    monthlyHourCap: '',
+    contractCode: '',
+    contractName: '',
+    contractDescription: '',
+    teamAssignments: collaborators.map((collaborator) => ({
+      collaboratorId: collaborator.id,
+      selected: false,
+      projectRoleId: 'none',
+      roleLabel: '',
+      weeklyHours: '',
+      allocationPercent: '',
+      status: 'active',
+      startDate: new Date().toISOString().split('T')[0],
+      endDate: '',
+    })),
+  };
+}
+
+function toFormState(
+  project: OperationsProjectDetails,
+  collaborators: OperationsCollaborator[]
+): ProjectFormState {
+  const collaboratorOptions =
+    collaborators.length > 0
+      ? collaborators
+      : (project.assignments ?? []).map((assignment) => ({
+          id: assignment.collaboratorId,
+          code: '',
+          displayName: assignment.collaboratorName,
+          department: null,
+          title: null,
+          status: 'active',
+        }));
+
+  const assignments = new Map(
+    (project.assignments ?? []).map((assignment) => [
+      assignment.collaboratorId,
+      assignment,
+    ])
+  );
+
+  return {
+    contractId: project.relatedContract?.id
+      ? String(project.relatedContract.id)
+      : 'none',
+    managerCollaboratorId: project.managerCollaboratorId
+      ? String(project.managerCollaboratorId)
+      : 'none',
+    code: project.code ?? '',
+    name: project.name ?? '',
+    clientName: project.clientName ?? '',
+    summary: project.summary ?? '',
+    status: project.status ?? 'planning',
+    progressPercent:
+      project.progressPercent !== null && project.progressPercent !== undefined
+        ? String(project.progressPercent)
+        : '',
+    deliveryModel: project.deliveryModel ?? 'project_delivery',
+    budgetAmount:
+      project.budgetAmount !== null && project.budgetAmount !== undefined
+        ? String(project.budgetAmount)
+        : '',
+    startDate: normalizeDateInputValue(project.startDate),
+    endDate: normalizeDateInputValue(project.endDate),
+    billingModel: project.relatedContract?.billingModel ?? 'time_and_material',
+    monthlyHourCap:
+      project.relatedContract?.monthlyHourCap !== null &&
+      project.relatedContract?.monthlyHourCap !== undefined
+        ? String(project.relatedContract.monthlyHourCap)
+        : '',
+    contractCode: project.relatedContract?.code ?? '',
+    contractName: project.relatedContract?.name ?? '',
+    contractDescription: project.relatedContract?.description ?? '',
+    teamAssignments: collaboratorOptions.map((collaborator) => {
+      const assignment = assignments.get(collaborator.id);
+      return {
+        collaboratorId: collaborator.id,
+        selected: Boolean(assignment),
+        projectRoleId: assignment?.projectRoleId
+          ? String(assignment.projectRoleId)
+          : 'none',
+        roleLabel: assignment?.roleLabel ?? '',
+        weeklyHours:
+          assignment?.weeklyHours !== null &&
+          assignment?.weeklyHours !== undefined
+            ? String(assignment.weeklyHours)
+            : '',
+        allocationPercent:
+          assignment?.allocationPercent !== null &&
+          assignment?.allocationPercent !== undefined
+            ? String(assignment.allocationPercent)
+            : '',
+        status: assignment?.status ?? 'active',
+        startDate: normalizeDateInputValue(assignment?.startDate) || new Date().toISOString().split('T')[0],
+        endDate: normalizeDateInputValue(assignment?.endDate),
+      };
+    }),
+  };
+}
+
+type SearchableSelectProps = {
+  label: string;
+  value: string;
+  options: Array<{
+    id: number;
+    title: string;
+    description?: string | null;
+    avatarUrl?: string | null;
+  }>;
+  placeholder: string;
+  searchPlaceholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+};
+
+function SearchableSelect({
+  label,
+  value,
+  options,
+  placeholder,
+  searchPlaceholder,
+  emptyLabel,
+  onChange,
+}: SearchableSelectProps) {
+  const commonT = useTranslations('operations.Common');
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [visibleCount, setVisibleCount] = useState(OPTION_PAGE_SIZE);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return options;
+    }
+
+    return options.filter((option) =>
+      [option.title, option.description]
+        .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}</Label> : null}
+
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen);
+          setVisibleCount(OPTION_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?.title ?? 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={searchPlaceholder}
+              value={search}
+              onValueChange={(nextValue) => {
+                setSearch(nextValue);
+                setVisibleCount(OPTION_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" />
+                  )}
+                  {placeholder}
+                </CommandItem>
+
+                {visibleOptions.map((option) => (
+                  <CommandItem
+                    key={option.id}
+                    value={`${option.title} ${option.description ?? ''}`}
+                    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" />
+                    )}
+                    {option.avatarUrl !== undefined ? (
+                      <Avatar className="mr-2 h-6 w-6 shrink-0">
+                        {option.avatarUrl ? (
+                          <AvatarImage
+                            src={option.avatarUrl}
+                            alt={option.title}
+                          />
+                        ) : null}
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {option.title
+                            .trim()
+                            .split(' ')
+                            .filter(Boolean)
+                            .slice(0, 2)
+                            .map((w) => w[0]!.toUpperCase())
+                            .join('')}
+                        </AvatarFallback>
+                      </Avatar>
+                    ) : null}
+                    <div className="min-w-0">
+                      <div className="truncate">{option.title}</div>
+                      {option.description ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+
+              {filteredOptions.length > visibleCount ? (
+                <div className="border-t p-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="w-full"
+                    onClick={() =>
+                      setVisibleCount((current) => current + OPTION_PAGE_SIZE)
+                    }
+                  >
+                    {commonT('actions.loadMore')}
+                  </Button>
+                </div>
+              ) : null}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+type ProjectFormScreenProps = {
+  projectId?: number;
+  onSaved?: (project: OperationsProjectDetails) => void | Promise<void>;
+  onCancel?: () => void;
+};
+
+function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <Label>{label}</Label>
+      {hint ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex cursor-help text-muted-foreground">
+              <Info className="h-3.5 w-3.5" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{hint}</p>
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}
+
+type ContractSelectWithCreateProps = {
+  value: string;
+  contracts: OperationsContract[];
+  label: string;
+  selectPlaceholder: string;
+  searchPlaceholder: string;
+  onChange: (value: string) => void;
+  onCreated?: (
+    contract: OperationsProjectDetails['relatedContract']
+  ) => void | Promise<void>;
+  initialValues?: {
+    code?: string;
+    name?: string;
+    clientName?: string;
+    contractCategory?: string;
+    contractType?: string;
+    signatureStatus?: string;
+    billingModel?: string;
+    budgetAmount?: string;
+    monthlyHourCap?: string;
+    startDate?: string;
+    endDate?: string;
+    description?: string;
+    contentHtml?: string;
+  };
+};
+
+function ContractSelectWithCreate({
+  value,
+  contracts,
+  label,
+  selectPlaceholder,
+  searchPlaceholder,
+  onChange,
+  onCreated,
+  initialValues,
+}: ContractSelectWithCreateProps) {
+  const commonT = useTranslations('operations.Common');
+  const contractT = useTranslations('operations.ContractFormPage');
+  const selectedContract = contracts.find((item) => String(item.id) === value);
+  const hasSelection = value !== 'none';
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+
+  return (
+    <>
+      <div className="space-y-2">
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+          <SearchableSelect
+            label={label}
+            value={value}
+            options={contracts.map((contract) => ({
+              id: contract.id,
+              title:
+                contract.name ||
+                contract.code ||
+                commonT('labels.notAvailable'),
+              description: [
+                contract.code,
+                contract.clientName,
+                contractT.has(`options.contractTypes.${contract.contractType}`)
+                  ? contractT(`options.contractTypes.${contract.contractType}`)
+                  : formatEnumLabel(contract.contractType),
+              ]
+                .filter(Boolean)
+                .join(' • '),
+            }))}
+            placeholder={selectPlaceholder}
+            searchPlaceholder={searchPlaceholder}
+            emptyLabel={commonT('labels.notAssigned')}
+            onChange={onChange}
+          />
+
+          {hasSelection ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0"
+              onClick={() => onChange('none')}
+              aria-label={commonT('actions.clearSelection')}
+            >
+              <X className="size-4" />
+            </Button>
+          ) : null}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="shrink-0"
+            onClick={() => setIsCreateSheetOpen(true)}
+            aria-label={commonT('actions.create')}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+
+        {selectedContract ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            asChild
+            className="w-fit"
+          >
+            <Link href={`/operations/contracts?edit=${selectedContract.id}`}>
+              <FileText className="size-4" />
+              {commonT('actions.openContract')}
+            </Link>
+          </Button>
+        ) : null}
+      </div>
+
+      <Sheet open={isCreateSheetOpen} onOpenChange={setIsCreateSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-7xl">
+          <SheetHeader>
+            <SheetTitle>{contractT('newTitle')}</SheetTitle>
+            <SheetDescription>{contractT('description')}</SheetDescription>
+          </SheetHeader>
+
+          <ContractFormScreen
+            initialValues={initialValues}
+            onCancel={() => setIsCreateSheetOpen(false)}
+            onSaved={async (contract) => {
+              const createdContractId = contract?.id
+                ? String(contract.id)
+                : value;
+              onChange(createdContractId);
+              await onCreated?.(
+                contract as OperationsProjectDetails['relatedContract']
+              );
+              setIsCreateSheetOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export function ProjectFormScreen({
+  projectId,
+  onSaved,
+  onCancel,
+}: ProjectFormScreenProps) {
+  const t = useTranslations('operations.ProjectFormPage');
+  const commonT = useTranslations('operations.Common');
+  const contractT = useTranslations('operations.ContractFormPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [assignmentSearch, setAssignmentSearch] = useState('');
+  const isSheetMode = Boolean(onCancel);
+  const isCreateMode = !projectId;
+  const [codeAutoMode, setCodeAutoMode] = useState(isCreateMode);
+
+  const projectFormSchema = useMemo(
+    () =>
+      z.object({
+        contractId: z.string(),
+        managerCollaboratorId: z.string(),
+        code: z.string().trim().min(1, t('messages.requiredFields')),
+        name: z.string().trim().min(1, t('messages.requiredFields')),
+        clientName: z.string().trim().min(1, t('messages.requiredFields')),
+        summary: z.string(),
+        status: z.string(),
+        progressPercent: z
+          .string()
+          .refine(
+            (value) =>
+              !value ||
+              (!Number.isNaN(Number(value)) &&
+                Number(value) >= 0 &&
+                Number(value) <= 100),
+            t('hints.progressPercent')
+          ),
+        deliveryModel: z.string(),
+        budgetAmount: z.string(),
+        startDate: z.string(),
+        endDate: z.string(),
+        billingModel: z.string(),
+        monthlyHourCap: z.string(),
+        contractCode: z.string(),
+        contractName: z.string(),
+        contractDescription: z.string(),
+        teamAssignments: z
+          .array(
+            z.object({
+              collaboratorId: z.number(),
+              selected: z.boolean(),
+              projectRoleId: z.string(),
+              roleLabel: z.string(),
+              weeklyHours: z.string(),
+              allocationPercent: z.string(),
+              status: z.string(),
+              startDate: z.string(),
+              endDate: z.string(),
+            })
+          )
+          .superRefine((assignments, ctx) => {
+            assignments.forEach((assignment, index) => {
+              if (assignment.selected && !assignment.roleLabel.trim()) {
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  message: t('messages.roleRequired'),
+                  path: [index, 'roleLabel'],
+                });
+              }
+            });
+          }),
+      }),
+    [t]
+  );
+
+  const formMethods = useForm<ProjectFormValues>({
+    resolver: zodResolver(projectFormSchema),
+    defaultValues: buildEmptyForm(),
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+  });
+
+  const form = formMethods.watch();
+  const setForm = (
+    updater:
+      | ProjectFormState
+      | ((current: ProjectFormState) => ProjectFormState)
+  ) => {
+    const current = formMethods.getValues();
+    const next = typeof updater === 'function' ? updater(current) : updater;
+
+    formMethods.reset(next, {
+      keepErrors: true,
+      keepDirty: true,
+      keepTouched: true,
+    });
+  };
+
+  const { data: rawCollaborators } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-project-form-collaborators', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
+  });
+  // Stable reference prevents the useEffect(reset, [collaborators, project]) from
+  // re-running on every render while the query is still loading (undefined → [] new ref).
+  const collaborators = useMemo(
+    () => rawCollaborators ?? [],
+    [rawCollaborators]
+  );
+
+  const { data: contracts = [], refetch: refetchContracts } = useQuery<
+    OperationsContract[]
+  >({
+    queryKey: ['operations-project-form-contracts', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
+  });
+
+  const { data: projectRoles = [], refetch: refetchProjectRoles } = useQuery<
+    OperationsProjectRole[]
+  >({
+    queryKey: ['operations-project-form-project-roles', currentLocaleCode],
+    enabled: access.isDirector,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<OperationsProjectRole[]>(
+        request,
+        '/operations/project-roles'
+      ),
+  });
+
+  const { data: project, isLoading: isLoadingProject } =
+    useQuery<OperationsProjectDetails>({
+      queryKey: ['operations-project-form', currentLocaleCode, projectId],
+      enabled: Boolean(projectId),
+      staleTime: 0,
+      refetchOnMount: 'always',
+      queryFn: () =>
+        fetchOperations<OperationsProjectDetails>(
+          request,
+          `/operations/projects/${projectId}`
+        ),
+    });
+
+  useEffect(() => {
+    if (project) {
+      formMethods.reset(toFormState(project, collaborators));
+      return;
+    }
+
+    if (!collaborators.length) {
+      return;
+    }
+
+    const currentValues = formMethods.getValues();
+    if (!currentValues.teamAssignments.length) {
+      formMethods.reset(buildEmptyForm(collaborators));
+    }
+  }, [collaborators, formMethods, project]);
+
+  const availableCollaborators = useMemo(() => {
+    const byId = new Map<number, OperationsCollaborator>();
+
+    for (const collaborator of collaborators) {
+      byId.set(collaborator.id, collaborator);
+    }
+
+    if (
+      project?.managerCollaboratorId &&
+      !byId.has(project.managerCollaboratorId)
+    ) {
+      byId.set(project.managerCollaboratorId, {
+        id: project.managerCollaboratorId,
+        code: '',
+        displayName: project.managerName ?? `#${project.managerCollaboratorId}`,
+        department: null,
+        title: null,
+        status: 'active',
+      });
+    }
+
+    for (const assignment of project?.assignments ?? []) {
+      if (!byId.has(assignment.collaboratorId)) {
+        byId.set(assignment.collaboratorId, {
+          id: assignment.collaboratorId,
+          code: '',
+          displayName: assignment.collaboratorName,
+          department: null,
+          title: null,
+          status: 'active',
+        });
+      }
+    }
+
+    return Array.from(byId.values());
+  }, [collaborators, project]);
+
+  const availableContracts = useMemo(() => {
+    if (!project?.relatedContract) {
+      return contracts;
+    }
+
+    const hasSelectedContract = contracts.some(
+      (contract) => contract.id === project.relatedContract?.id
+    );
+
+    return hasSelectedContract
+      ? contracts
+      : [project.relatedContract, ...contracts];
+  }, [contracts, project]);
+
+  const selectedContract = useMemo(
+    () =>
+      availableContracts.find(
+        (contract) => String(contract.id) === form.contractId
+      ) ?? null,
+    [availableContracts, form.contractId]
+  );
+
+  const managerOptions = useMemo(
+    () =>
+      availableCollaborators.map((collaborator) => ({
+        id: collaborator.id,
+        title: collaborator.displayName,
+        description: [collaborator.department, collaborator.title]
+          .filter(Boolean)
+          .join(' • '),
+        avatarUrl:
+          typeof collaborator.personAvatarId === 'number' &&
+          collaborator.personAvatarId > 0
+            ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${collaborator.personAvatarId}`
+            : null,
+      })),
+    [availableCollaborators]
+  );
+
+  const projectRoleOptions = useMemo(
+    () =>
+      projectRoles.map((role) => ({
+        id: role.id,
+        name: role.name,
+        code: role.code ?? null,
+        description: role.description ?? null,
+      })),
+    [projectRoles]
+  );
+
+  const createProjectRole = async (projectRoleName: string) => {
+    try {
+      const createdRole = await mutateOperations<OperationsProjectRole>(
+        request,
+        '/operations/project-roles',
+        'POST',
+        {
+          name: projectRoleName,
+        }
+      );
+
+      await refetchProjectRoles();
+      return createdRole;
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.projectRoleSaveError'))
+      );
+      return null;
+    }
+  };
+
+  const selectedAssignmentsCount = useMemo(
+    () =>
+      form.teamAssignments.filter((assignment) => assignment.selected).length,
+    [form.teamAssignments]
+  );
+
+  const filteredAssignments = useMemo(() => {
+    const normalizedSearch = assignmentSearch.trim().toLowerCase();
+
+    return form.teamAssignments.filter((assignment) => {
+      const collaborator = availableCollaborators.find(
+        (item) => item.id === assignment.collaboratorId
+      );
+
+      if (!collaborator) {
+        return false;
+      }
+
+      if (!normalizedSearch) {
+        return true;
+      }
+
+      return [
+        collaborator.displayName,
+        collaborator.department,
+        collaborator.title,
+        collaborator.code,
+      ]
+        .filter(Boolean)
+        .some((value) =>
+          String(value).toLowerCase().includes(normalizedSearch)
+        );
+    });
+  }, [assignmentSearch, availableCollaborators, form.teamAssignments]);
+
+  const updateAssignment = (
+    collaboratorId: number,
+    patch: Partial<TeamAssignmentState>
+  ) => {
+    const nextAssignments = formMethods
+      .getValues('teamAssignments')
+      .map((assignment) =>
+        assignment.collaboratorId === collaboratorId
+          ? { ...assignment, ...patch }
+          : assignment
+      );
+
+    formMethods.setValue('teamAssignments', nextAssignments, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const onSubmit = async (values: ProjectFormValues) => {
+    const payload = {
+      contractId:
+        values.contractId === 'none'
+          ? null
+          : parseNumberInput(values.contractId),
+      managerCollaboratorId:
+        values.managerCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(values.managerCollaboratorId),
+      code: values.code.trim(),
+      name: values.name.trim(),
+      clientName: trimToNull(values.clientName),
+      summary: trimToNull(values.summary),
+      status: values.status,
+      progressPercent: parseNumberInput(values.progressPercent),
+      deliveryModel: trimToNull(values.deliveryModel) ?? 'project_delivery',
+      budgetAmount: parseNumberInput(values.budgetAmount),
+      startDate: trimToNull(values.startDate),
+      endDate: trimToNull(values.endDate),
+      billingModel: values.billingModel,
+      monthlyHourCap: parseNumberInput(values.monthlyHourCap),
+      contractCode: trimToNull(values.contractCode),
+      contractName: trimToNull(values.contractName),
+      contractDescription: trimToNull(values.contractDescription),
+      teamAssignments: values.teamAssignments
+        .filter((assignment) => assignment.selected)
+        .map((assignment) => ({
+          collaboratorId: assignment.collaboratorId,
+          projectRoleId:
+            assignment.projectRoleId === 'none'
+              ? null
+              : parseNumberInput(assignment.projectRoleId),
+          roleLabel: trimToNull(assignment.roleLabel),
+          weeklyHours: parseNumberInput(assignment.weeklyHours),
+          allocationPercent: parseNumberInput(assignment.allocationPercent),
+          status: assignment.status,
+          startDate: trimToNull(assignment.startDate),
+          endDate: trimToNull(assignment.endDate),
+        })),
+    };
+
+    try {
+      const response = projectId
+        ? await mutateOperations<OperationsProjectDetails>(
+            request,
+            `/operations/projects/${projectId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsProjectDetails>(
+            request,
+            '/operations/projects',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        projectId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
+      router.push(`/operations/projects/${response.id}`);
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(
+          error,
+          projectId ? t('messages.updateError') : t('messages.createError')
+        )
+      );
+    }
+  };
+
+  const handleInvalidSubmit = () => {
+    showToastHandler?.('error', t('messages.requiredFields'));
+  };
+
+  const noAccessState = (
+    <EmptyState
+      icon={<FolderKanban className="size-12" />}
+      title={commonT('states.noAccessTitle')}
+      description={t('noAccessDescription')}
+      actionLabel={commonT('actions.refresh')}
+      onAction={() => router.refresh()}
+    />
+  );
+
+  if (!access.isDirector && !access.isLoading) {
+    if (isSheetMode) {
+      return <div className="pt-4">{noAccessState}</div>;
+    }
+
+    return (
+      <Page>
+        <OperationsHeader
+          title={t(projectId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        {noAccessState}
+      </Page>
+    );
+  }
+
+  const formContent = (
+    <Form {...formMethods}>
+      <form
+        onSubmit={formMethods.handleSubmit(onSubmit, handleInvalidSubmit)}
+        className="min-w-0 space-y-5 overflow-x-hidden px-4"
+      >
+        <section className="space-y-3">
+          <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(
+                isCreateMode
+                  ? 'sections.basicInfoCreateDescription'
+                  : 'sections.basicInfoDescription'
+              )}
+            </p>
+          </div>
+          <FormField
+            control={formMethods.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem className="min-w-0">
+                <FormLabel>{t('fields.name')}</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    placeholder={t('placeholders.name')}
+                    autoFocus
+                    onChange={(e) => {
+                      field.onChange(e);
+                      if (codeAutoMode) {
+                        formMethods.setValue(
+                          'code',
+                          generateProjectCode(e.target.value)
+                        );
+                      }
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="grid min-w-0 gap-3 lg:grid-cols-6">
+            <FormField
+              control={formMethods.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem className="min-w-0 lg:col-span-1">
+                  <FormLabel>{t('fields.code')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={t('placeholders.code')}
+                      onChange={(e) => {
+                        setCodeAutoMode(false);
+                        field.onChange(e);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={formMethods.control}
+              name="clientName"
+              render={({ field, fieldState }) => (
+                <FormItem className="min-w-0 lg:col-span-3">
+                  <FormLabel>{t('fields.clientName')}</FormLabel>
+                  <FormControl>
+                    <div
+                      className={
+                        fieldState.error
+                          ? 'rounded-md border border-destructive p-1'
+                          : ''
+                      }
+                    >
+                      <PersonSelectWithCreate
+                        label=""
+                        entityLabel={t('fields.clientName')}
+                        value={null}
+                        initialSelectedLabel={field.value}
+                        selectPlaceholder={t('placeholders.clientName')}
+                        onChange={(_, personName) =>
+                          field.onChange(personName ?? '')
+                        }
+                        personTypeFilter="all"
+                        createType="company"
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={formMethods.control}
+              name="deliveryModel"
+              render={({ field }) => (
+                <FormItem className="min-w-0 lg:col-span-2">
+                  <FormLabel>{t('fields.deliveryModel')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="project_delivery">
+                        {t('options.deliveryModels.project_delivery')}
+                      </SelectItem>
+                      <SelectItem value="dedicated_team">
+                        {t('options.deliveryModels.dedicated_team')}
+                      </SelectItem>
+                      <SelectItem value="shared_team">
+                        {t('options.deliveryModels.shared_team')}
+                      </SelectItem>
+                      <SelectItem value="support">
+                        {t('options.deliveryModels.support')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={formMethods.control}
+              name="summary"
+              render={({ field }) => (
+                <FormItem className="min-w-0 lg:col-span-6">
+                  <FormLabel>{t('fields.summary')}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      placeholder={t('placeholders.summary')}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        </section>
+
+        <section className="space-y-3">
+          <div className="space-y-0.5">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t('sections.governance')}
+            </h3>
+            <p className="text-[11px] text-muted-foreground/80">
+              {t(
+                isCreateMode
+                  ? 'sections.governanceCreateDescription'
+                  : 'sections.governanceDescription'
+              )}
+            </p>
+          </div>
+          <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-5">
+            <div className="min-w-0 space-y-2">
+              <FieldLabel label={commonT('labels.manager')} />
+              <SearchableSelect
+                label=""
+                value={form.managerCollaboratorId}
+                options={managerOptions}
+                placeholder={commonT('labels.notAssigned')}
+                searchPlaceholder={t('placeholders.managerSearch')}
+                emptyLabel={commonT('labels.notAssigned')}
+                onChange={(value) =>
+                  setForm((current) => ({
+                    ...current,
+                    managerCollaboratorId: value,
+                  }))
+                }
+              />
+            </div>
+            <div className="min-w-0 space-y-2">
+              <FieldLabel label={commonT('labels.startDate')} />
+              <Input
+                type="date"
+                value={form.startDate}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    startDate: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            {!isCreateMode ? (
+              <>
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel label={commonT('labels.status')} />
+                  <Select
+                    value={form.status}
+                    onValueChange={(value) =>
+                      setForm((current) => ({ ...current, status: value }))
+                    }
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="planning">
+                        {t('options.statuses.planning')}
+                      </SelectItem>
+                      <SelectItem value="active">
+                        {t('options.statuses.active')}
+                      </SelectItem>
+                      <SelectItem value="at_risk">
+                        {t('options.statuses.at_risk')}
+                      </SelectItem>
+                      <SelectItem value="paused">
+                        {t('options.statuses.paused')}
+                      </SelectItem>
+                      <SelectItem value="completed">
+                        {t('options.statuses.completed')}
+                      </SelectItem>
+                      <SelectItem value="archived">
+                        {t('options.statuses.archived')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel label={commonT('labels.endDate')} />
+                  <Input
+                    type="date"
+                    value={form.endDate}
+                    onChange={(event) =>
+                      setForm((current) => ({
+                        ...current,
+                        endDate: event.target.value,
+                      }))
+                    }
+                  />
+                </div>
+                <FormField
+                  control={formMethods.control}
+                  name="progressPercent"
+                  render={({ field }) => (
+                    <FormItem className="min-w-0 gap-0">
+                      <FormLabel>{t('fields.progressPercent')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type="text"
+                          inputMode="decimal"
+                          placeholder={t('placeholders.progressPercent')}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(
+                              normalizePercentInput(event.target.value)
+                            )
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            ) : null}
+          </div>
+        </section>
+
+        {!isCreateMode ? (
+          <>
+            <section className="space-y-3">
+              <div className="space-y-0.5">
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  {t('sections.financials')}
+                </h3>
+                <p className="text-[11px] text-muted-foreground/80">
+                  {t('sections.financialsDescription')}
+                </p>
+              </div>
+              <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-4">
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel label={commonT('labels.budget')} />
+                  <InputMoney
+                    value={
+                      form.budgetAmount === '' ? '' : Number(form.budgetAmount)
+                    }
+                    onValueChange={(value) =>
+                      setForm((current) => ({
+                        ...current,
+                        budgetAmount: value !== null ? String(value) : '',
+                      }))
+                    }
+                  />
+                </div>
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel
+                    label={commonT('labels.monthlyHourCap')}
+                    hint={t('hints.monthlyHourCap')}
+                  />
+                  <Input
+                    type="text"
+                    inputMode="numeric"
+                    placeholder={t('placeholders.monthlyHourCap')}
+                    value={form.monthlyHourCap}
+                    onChange={(event) => {
+                      const raw = event.target.value.replace(/[^0-9]/g, '');
+                      setForm((current) => ({
+                        ...current,
+                        monthlyHourCap: raw,
+                      }));
+                    }}
+                  />
+                </div>
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel label={commonT('labels.billingModel')} />
+                  <Select
+                    value={form.billingModel}
+                    onValueChange={(value) =>
+                      setForm((current) => ({
+                        ...current,
+                        billingModel: value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="time_and_material">
+                        {t('options.billingModels.time_and_material')}
+                      </SelectItem>
+                      <SelectItem value="monthly_retainer">
+                        {t('options.billingModels.monthly_retainer')}
+                      </SelectItem>
+                      <SelectItem value="fixed_price">
+                        {t('options.billingModels.fixed_price')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="min-w-0 space-y-2">
+                  <FieldLabel
+                    label={commonT('labels.contract')}
+                    hint={t('hints.contract')}
+                  />
+                  <ContractSelectWithCreate
+                    label=""
+                    value={form.contractId}
+                    contracts={availableContracts}
+                    selectPlaceholder={commonT('labels.notAssigned')}
+                    searchPlaceholder={t('placeholders.contractSearch')}
+                    onChange={(value) =>
+                      setForm((current) => ({ ...current, contractId: value }))
+                    }
+                    onCreated={async (contract) => {
+                      await refetchContracts();
+                      setForm((current) => ({
+                        ...current,
+                        contractId: contract?.id
+                          ? String(contract.id)
+                          : current.contractId,
+                        billingModel:
+                          contract?.billingModel ?? current.billingModel,
+                        monthlyHourCap:
+                          contract?.monthlyHourCap !== null &&
+                          contract?.monthlyHourCap !== undefined
+                            ? String(contract.monthlyHourCap)
+                            : current.monthlyHourCap,
+                      }));
+                    }}
+                    initialValues={{
+                      code: form.code ? `PRJ-${form.code}` : '',
+                      name: form.name ? `${form.name} Service Agreement` : '',
+                      clientName: form.clientName,
+                      contractCategory: 'client',
+                      contractType: 'service_agreement',
+                      signatureStatus: 'not_started',
+                      billingModel: form.billingModel,
+                      budgetAmount: form.budgetAmount,
+                      monthlyHourCap: form.monthlyHourCap,
+                      startDate: form.startDate,
+                      endDate: form.endDate,
+                      description: form.summary,
+                      contentHtml: '',
+                    }}
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="space-y-3">
+              <div className="space-y-0.5">
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  {t('sections.team')}
+                </h3>
+                <p className="text-[11px] text-muted-foreground/80">
+                  {t('sections.teamDescription', {
+                    count: selectedAssignmentsCount,
+                  })}
+                </p>
+              </div>
+              <div className="space-y-3">
+                <div className="relative">
+                  <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    className="pl-9"
+                    value={assignmentSearch}
+                    placeholder={t('placeholders.assignmentSearch')}
+                    onChange={(event) =>
+                      setAssignmentSearch(event.target.value)
+                    }
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  {filteredAssignments.map((assignment) => {
+                    const collaborator = availableCollaborators.find(
+                      (item) => item.id === assignment.collaboratorId
+                    );
+                    const assignmentIndex = form.teamAssignments.findIndex(
+                      (item) =>
+                        item.collaboratorId === assignment.collaboratorId
+                    );
+                    const roleError =
+                      assignmentIndex >= 0
+                        ? formMethods.formState.errors.teamAssignments?.[
+                            assignmentIndex
+                          ]?.roleLabel
+                        : undefined;
+
+                    if (!collaborator) {
+                      return null;
+                    }
+
+                    return (
+                      <div
+                        key={assignment.collaboratorId}
+                        className="grid min-w-0 gap-2 rounded-lg border px-3 py-2 xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1.2fr)_110px_110px]"
+                      >
+                        <label className="flex cursor-pointer items-start gap-3 py-1">
+                          <Checkbox
+                            checked={assignment.selected}
+                            onCheckedChange={(checked) =>
+                              updateAssignment(assignment.collaboratorId, {
+                                selected: checked === true,
+                              })
+                            }
+                          />
+                          <div className="min-w-0">
+                            <div className="truncate font-medium">
+                              {collaborator.displayName}
+                            </div>
+                            <div className="truncate text-xs text-muted-foreground">
+                              {[
+                                collaborator.department,
+                                collaborator.title,
+                                collaborator.code,
+                              ]
+                                .filter(Boolean)
+                                .join(' • ') || commonT('labels.notAvailable')}
+                            </div>
+                          </div>
+                        </label>
+                        <div className="space-y-1">
+                          <DepartmentSelectWithCreate
+                            label=""
+                            value={assignment.roleLabel}
+                            options={projectRoleOptions}
+                            disabled={!assignment.selected}
+                            selectPlaceholder={t('placeholders.roleLabel')}
+                            createDescription={t('fields.roleLabel')}
+                            createPlaceholder={t(
+                              'placeholders.roleLabelCreate'
+                            )}
+                            onChange={(role) =>
+                              updateAssignment(assignment.collaboratorId, {
+                                projectRoleId: role.id
+                                  ? String(role.id)
+                                  : 'none',
+                                roleLabel: role.name,
+                              })
+                            }
+                            onCreate={createProjectRole}
+                          />
+                          {roleError?.message ? (
+                            <p className="text-sm text-destructive">
+                              {String(roleError.message)}
+                            </p>
+                          ) : null}
+                        </div>
+                        <Input
+                          className="h-9 mt-2 self-start"
+                          type="number"
+                          min="0"
+                          step="0.5"
+                          placeholder={t('fields.weeklyHours')}
+                          value={assignment.weeklyHours}
+                          disabled={!assignment.selected}
+                          onChange={(event) => {
+                            const hours = event.target.value;
+                            const updates: Partial<TeamAssignmentState> = {
+                              weeklyHours: hours,
+                            };
+                            const cap = collaborator.weeklyCapacityHours;
+                            if (cap && hours && Number(hours) > 0) {
+                              const pct = Math.round(
+                                (Number(hours) / cap) * 100
+                              );
+                              updates.allocationPercent = String(
+                                Math.min(pct, 100)
+                              );
+                            }
+                            updateAssignment(
+                              assignment.collaboratorId,
+                              updates
+                            );
+                          }}
+                        />
+                        <Input
+                          className="h-9 mt-2 self-start"
+                          type="text"
+                          inputMode="decimal"
+                          placeholder={t('fields.allocationPercent')}
+                          value={assignment.allocationPercent}
+                          disabled={!assignment.selected}
+                          onChange={(event) => {
+                            const pct = normalizePercentInput(
+                              event.target.value
+                            );
+                            const updates: Partial<TeamAssignmentState> = {
+                              allocationPercent: pct,
+                            };
+                            const cap = collaborator.weeklyCapacityHours;
+                            if (cap && pct && Number(pct) > 0) {
+                              const hours = Math.round(
+                                (Number(pct) / 100) * cap
+                              );
+                              updates.weeklyHours = String(hours);
+                            }
+                            updateAssignment(
+                              assignment.collaboratorId,
+                              updates
+                            );
+                          }}
+                        />
+                        <div className="flex items-center gap-2 xl:col-span-4">
+                          <div className="flex-1">
+                            <label className="text-xs text-muted-foreground">{t('fields.assignmentStartDate')}</label>
+                            <Input
+                              className="h-9"
+                              type="date"
+                              value={assignment.startDate}
+                              disabled={!assignment.selected}
+                              onChange={(event) =>
+                                updateAssignment(assignment.collaboratorId, {
+                                  startDate: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="flex-1">
+                            <label className="text-xs text-muted-foreground">{t('fields.assignmentEndDate')}</label>
+                            <Input
+                              className="h-9"
+                              type="date"
+                              value={assignment.endDate}
+                              disabled={!assignment.selected}
+                              onChange={(event) =>
+                                updateAssignment(assignment.collaboratorId, {
+                                  endDate: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </section>
+          </>
+        ) : (
+          <section className="space-y-3 rounded-lg border border-dashed bg-muted/20 px-4 py-4">
+            <div className="space-y-0.5">
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                {t('sections.nextSteps')}
+              </h3>
+              <p className="text-[11px] text-muted-foreground/80">
+                {t('sections.nextStepsDescription')}
+              </p>
+            </div>
+          </section>
+        )}
+      </form>
+    </Form>
+  );
+  const loadingState =
+    projectId && isLoadingProject ? (
+      <div className="text-sm text-muted-foreground">{t('loading')}</div>
+    ) : null;
+
+  const contractStatusState = project ? (
+    <div className="text-xs text-muted-foreground">
+      {t('messages.currentContractStatus', {
+        status: project.contractStatus
+          ? project.contractStatus
+          : commonT('labels.notAssigned'),
+      })}
+    </div>
+  ) : null;
+
+  if (isSheetMode) {
+    return (
+      <div className="mt-6 space-y-4 pb-6">
+        {formContent}
+        <div className="space-y-2 px-4">
+          {loadingState}
+          {contractStatusState}
+        </div>
+
+        <FormActions
+          sheet
+          cancelLabel={commonT('actions.cancel')}
+          onCancel={onCancel}
+          onSubmit={() =>
+            void formMethods.handleSubmit(onSubmit, handleInvalidSubmit)()
+          }
+          submitIcon={<Save className="size-4" />}
+          submitLabel={commonT('actions.save')}
+          submitSize="lg"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(projectId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                href={
+                  projectId
+                    ? `/operations/projects/${projectId}`
+                    : '/operations/projects'
+                }
+              >
+                <ArrowLeft className="size-4" />
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button
+              size="sm"
+              type="button"
+              onClick={() =>
+                void formMethods.handleSubmit(onSubmit, handleInvalidSubmit)()
+              }
+            >
+              <Save className="size-4" />
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        }
+      />
+
+      {formContent}
+      <div className="space-y-2">
+        {loadingState}
+        {contractStatusState}
+      </div>
+    </Page>
+  );
+}