@hed-hog/operations 0.0.327 → 0.0.329

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

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