@hed-hog/operations 0.0.303 → 0.0.305

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

@@ -11,6 +11,14 @@ import {
   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';
@@ -42,6 +50,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ArrowLeft,
   Check,
@@ -58,18 +67,30 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
+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,
   OperationsContractTemplate,
   OperationsProjectDetails,
+  OperationsProjectRole,
 } from '../_lib/types';
 import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import {
+  normalizePercentInput,
+  parseNumberInput,
+  trimToNull,
+} from '../_lib/utils/forms';
 import { ContractFormScreen } from './contract-form-screen';
 import { ContractTemplateFormScreen } from './contract-template-form-screen';
+import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
 import { PersonSelectWithCreate } from './person-select-with-create';
 
@@ -78,6 +99,7 @@ const OPTION_PAGE_SIZE = 12;
 type TeamAssignmentState = {
   collaboratorId: number;
   selected: boolean;
+  projectRoleId: string;
   roleLabel: string;
   weeklyHours: string;
   allocationPercent: string;
@@ -108,6 +130,34 @@ type ProjectFormState = {
   teamAssignments: TeamAssignmentState[];
 };
 
+type ProjectFormValues = ProjectFormState;
+
+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 {
@@ -134,6 +184,7 @@ function buildEmptyForm(
     teamAssignments: collaborators.map((collaborator) => ({
       collaboratorId: collaborator.id,
       selected: false,
+      projectRoleId: 'none',
       roleLabel: '',
       weeklyHours: '',
       allocationPercent: '',
@@ -147,6 +198,18 @@ 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,
@@ -155,7 +218,9 @@ function toFormState(
   );
 
   return {
-    contractId: project.contractId ? String(project.contractId) : 'none',
+    contractId: project.relatedContract?.id
+      ? String(project.relatedContract.id)
+      : 'none',
     contractTemplateId: 'none',
     managerCollaboratorId: project.managerCollaboratorId
       ? String(project.managerCollaboratorId)
@@ -174,8 +239,8 @@ function toFormState(
       project.budgetAmount !== null && project.budgetAmount !== undefined
         ? String(project.budgetAmount)
         : '',
-    startDate: project.startDate ?? '',
-    endDate: project.endDate ?? '',
+    startDate: normalizeDateInputValue(project.startDate),
+    endDate: normalizeDateInputValue(project.endDate),
     billingModel: project.relatedContract?.billingModel ?? 'time_and_material',
     monthlyHourCap:
       project.relatedContract?.monthlyHourCap !== null &&
@@ -186,11 +251,14 @@ function toFormState(
     contractName: project.relatedContract?.name ?? '',
     contractDescription: project.relatedContract?.description ?? '',
     autoGenerateContractDraft: true,
-    teamAssignments: collaborators.map((collaborator) => {
+    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 &&
@@ -442,16 +510,16 @@ function ContractSelectWithCreate({
         <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,
+            value={value}
+            options={contracts.map((contract) => ({
+              id: contract.id,
+              title:
+                contract.name ||
+                contract.code ||
+                commonT('labels.notAvailable'),
+              description: [
+                contract.code,
+                contract.clientName,
                 formatEnumLabel(contract.contractType),
               ]
                 .filter(Boolean)
@@ -603,18 +671,6 @@ function ContractTemplateSelectWithCreate({
             <Plus className="size-4" />
           </Button>
         </div>
-
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          asChild
-          className="w-fit"
-        >
-          <Link href="/operations/contracts/templates">
-            {commonT('actions.manageTemplates')}
-          </Link>
-        </Button>
       </div>
 
       <Sheet open={isCreateSheetOpen} onOpenChange={setIsCreateSheetOpen}>
@@ -651,9 +707,91 @@ export function ProjectFormScreen({
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
-  const [form, setForm] = useState<ProjectFormState>(buildEmptyForm());
   const [assignmentSearch, setAssignmentSearch] = useState('');
   const isSheetMode = Boolean(onCancel);
+  const isCreateMode = !projectId;
+
+  const projectFormSchema = useMemo(
+    () =>
+      z.object({
+        contractId: z.string(),
+        contractTemplateId: 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(),
+        autoGenerateContractDraft: z.boolean(),
+        teamAssignments: z
+          .array(
+            z.object({
+              collaboratorId: z.number(),
+              selected: z.boolean(),
+              projectRoleId: z.string(),
+              roleLabel: z.string(),
+              weeklyHours: z.string(),
+              allocationPercent: z.string(),
+              isBillable: z.boolean(),
+              status: 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: collaborators = [] } = useQuery<OperationsCollaborator[]>({
     queryKey: ['operations-project-form-collaborators', currentLocaleCode],
@@ -688,10 +826,26 @@ export function ProjectFormScreen({
         ),
     });
 
+  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,
@@ -700,26 +854,78 @@ export function ProjectFormScreen({
     });
 
   useEffect(() => {
-    if (!collaborators.length) {
+    if (project) {
+      formMethods.reset(toFormState(project, collaborators));
       return;
     }
 
-    if (project) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setForm(toFormState(project, collaborators));
+    if (!collaborators.length) {
       return;
     }
 
-    setForm((current) =>
-      current.teamAssignments.length ? current : buildEmptyForm(collaborators)
-    );
+    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(
     () =>
-      contracts.find((contract) => String(contract.id) === form.contractId) ??
-      null,
-    [contracts, form.contractId]
+      availableContracts.find(
+        (contract) => String(contract.id) === form.contractId
+      ) ?? null,
+    [availableContracts, form.contractId]
   );
 
   const selectedContractTemplate = useMemo(
@@ -732,16 +938,49 @@ export function ProjectFormScreen({
 
   const managerOptions = useMemo(
     () =>
-      collaborators.map((collaborator) => ({
+      availableCollaborators.map((collaborator) => ({
         id: collaborator.id,
         title: collaborator.displayName,
         description: [collaborator.department, collaborator.title]
           .filter(Boolean)
           .join(' • '),
       })),
-    [collaborators]
+    [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,
@@ -752,7 +991,7 @@ export function ProjectFormScreen({
     const normalizedSearch = assignmentSearch.trim().toLowerCase();
 
     return form.teamAssignments.filter((assignment) => {
-      const collaborator = collaborators.find(
+      const collaborator = availableCollaborators.find(
         (item) => item.id === assignment.collaboratorId
       );
 
@@ -775,67 +1014,72 @@ export function ProjectFormScreen({
           String(value).toLowerCase().includes(normalizedSearch)
         );
     });
-  }, [assignmentSearch, collaborators, form.teamAssignments]);
+  }, [assignmentSearch, availableCollaborators, form.teamAssignments]);
 
   const updateAssignment = (
     collaboratorId: number,
     patch: Partial<TeamAssignmentState>
   ) => {
-    setForm((current) => ({
-      ...current,
-      teamAssignments: current.teamAssignments.map((assignment) =>
+    const nextAssignments = formMethods
+      .getValues('teamAssignments')
+      .map((assignment) =>
         assignment.collaboratorId === collaboratorId
           ? { ...assignment, ...patch }
           : assignment
-      ),
-    }));
-  };
+      );
 
-  const onSubmit = async () => {
-    if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
+    formMethods.setValue('teamAssignments', nextAssignments, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
 
+  const onSubmit = async (values: ProjectFormValues) => {
     const payload = {
       contractId:
-        form.contractId === 'none' ? null : parseNumberInput(form.contractId),
+        values.contractId === 'none'
+          ? null
+          : parseNumberInput(values.contractId),
       contractTemplateId:
-        form.contractTemplateId === 'none'
+        values.contractTemplateId === 'none'
           ? null
-          : parseNumberInput(form.contractTemplateId),
+          : parseNumberInput(values.contractTemplateId),
       managerCollaboratorId:
-        form.managerCollaboratorId === 'none'
+        values.managerCollaboratorId === 'none'
           ? null
-          : parseNumberInput(form.managerCollaboratorId),
-      code: form.code.trim(),
-      name: form.name.trim(),
-      clientName: trimToNull(form.clientName),
-      summary: trimToNull(form.summary),
-      status: form.status,
-      progressPercent: parseNumberInput(form.progressPercent),
-      deliveryModel: form.deliveryModel,
-      budgetAmount: parseNumberInput(form.budgetAmount),
-      startDate: trimToNull(form.startDate),
-      endDate: trimToNull(form.endDate),
-      billingModel: form.billingModel,
-      monthlyHourCap: parseNumberInput(form.monthlyHourCap),
-      contractCode: trimToNull(form.contractCode),
-      contractName: trimToNull(form.contractName),
-      contractDescription: trimToNull(form.contractDescription),
+          : 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),
       autoGenerateContractDraft:
-        form.contractId === 'none' ? form.autoGenerateContractDraft : false,
-      teamAssignments: form.teamAssignments
+        values.contractId === 'none' ? values.autoGenerateContractDraft : false,
+      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),
           isBillable: assignment.isBillable,
           status: assignment.status,
-          startDate: trimToNull(form.startDate),
-          endDate: trimToNull(form.endDate),
+          startDate: trimToNull(values.startDate),
+          endDate: trimToNull(values.endDate),
         })),
     };
 
@@ -865,14 +1109,21 @@ export function ProjectFormScreen({
       }
 
       router.push(`/operations/projects/${response.id}`);
-    } catch {
+    } catch (error) {
       showToastHandler?.(
         'error',
-        projectId ? t('messages.updateError') : t('messages.createError')
+        getOperationsErrorMessage(
+          error,
+          projectId ? t('messages.updateError') : t('messages.createError')
+        )
       );
     }
   };
 
+  const handleInvalidSubmit = () => {
+    showToastHandler?.('error', t('messages.requiredFields'));
+  };
+
   const noAccessState = (
     <EmptyState
       icon={<FolderKanban className="size-12" />}
@@ -901,605 +1152,714 @@ export function ProjectFormScreen({
   }
 
   const formContent = (
-    <div 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('sections.basicInfoDescription')}
-          </p>
-        </div>
-        <div className="grid min-w-0 gap-3 lg:grid-cols-6">
-          <div className="min-w-0 space-y-2 lg:col-span-1">
-            <FieldLabel label={t('fields.code')} />
-            <Input
-              value={form.code}
-              placeholder={t('placeholders.code')}
-              onChange={(event) =>
-                setForm((current) => ({ ...current, code: event.target.value }))
-              }
-            />
-          </div>
-          <div className="min-w-0 space-y-2 lg:col-span-2">
-            <FieldLabel label={t('fields.name')} />
-            <Input
-              value={form.name}
-              placeholder={t('placeholders.name')}
-              onChange={(event) =>
-                setForm((current) => ({ ...current, name: event.target.value }))
-              }
-            />
-          </div>
-          <div className="min-w-0 space-y-2 lg:col-span-2">
-            <FieldLabel label={t('fields.clientName')} />
-            <PersonSelectWithCreate
-              label=""
-              entityLabel={t('fields.clientName')}
-              value={null}
-              initialSelectedLabel={form.clientName}
-              selectPlaceholder={t('placeholders.clientName')}
-              onChange={(_, personName) =>
-                setForm((current) => ({
-                  ...current,
-                  clientName: personName,
-                }))
-              }
-              personTypeFilter="all"
-              createType="company"
-            />
-          </div>
-          <div className="min-w-0 space-y-2 lg:col-span-1">
-            <FieldLabel label={t('fields.deliveryModel')} />
-            <Select
-              value={form.deliveryModel}
-              onValueChange={(value) =>
-                setForm((current) => ({ ...current, deliveryModel: value }))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <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>
-          </div>
-          <div className="min-w-0 space-y-2 lg:col-span-6">
-            <FieldLabel label={t('fields.summary')} hint={t('hints.summary')} />
-            <Textarea
-              rows={3}
-              value={form.summary}
-              placeholder={t('placeholders.summary')}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  summary: event.target.value,
-                }))
-              }
-            />
-          </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.governance')}
-          </h3>
-          <p className="text-[11px] text-muted-foreground/80">
-            {t('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.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.startDate')} />
-            <Input
-              type="date"
-              value={form.startDate}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  startDate: event.target.value,
-                }))
-              }
-            />
-          </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>
-          <div className="min-w-0 space-y-2">
-            <FieldLabel
-              label={t('fields.progressPercent')}
-              hint={t('hints.progressPercent')}
-            />
-            <Input
-              type="number"
-              min="0"
-              max="100"
-              step="1"
-              placeholder={t('placeholders.progressPercent')}
-              value={form.progressPercent}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  progressPercent: event.target.value,
-                }))
-              }
-            />
-          </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.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-5">
-          <div className="min-w-0 space-y-2">
-            <FieldLabel label={commonT('labels.budget')} />
-            <InputMoney
-              value={form.budgetAmount}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  budgetAmount: event.target.value,
-                }))
-              }
-            />
-          </div>
-          <div className="min-w-0 space-y-2">
-            <FieldLabel
-              label={commonT('labels.monthlyHourCap')}
-              hint={t('hints.monthlyHourCap')}
-            />
-            <Input
-              type="number"
-              step="0.5"
-              placeholder={t('placeholders.monthlyHourCap')}
-              value={form.monthlyHourCap}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  monthlyHourCap: event.target.value,
-                }))
-              }
-            />
-          </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>
+    <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>
-          <div className="min-w-0 space-y-2">
-            <FieldLabel
-              label={t('fields.contractTemplate')}
-              hint={t('hints.contractTemplate')}
+          <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
+                  />
+                </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')} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
             />
-            <ContractTemplateSelectWithCreate
-              label=""
-              value={form.contractTemplateId}
-              templates={contractTemplates}
-              selectPlaceholder={commonT('labels.notAssigned')}
-              searchPlaceholder={t('placeholders.contractTemplateSearch')}
-              onChange={(value) =>
-                setForm((current) => ({
-                  ...current,
-                  contractTemplateId: value,
-                }))
-              }
-              onCreated={async (template) => {
-                await refetchContractTemplates();
-                setForm((current) => ({
-                  ...current,
-                  contractTemplateId: template?.id
-                    ? String(template.id)
-                    : current.contractTemplateId,
-                }));
-              }}
+            <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>
+              )}
             />
-          </div>
-          <div className="min-w-0 space-y-2">
-            <FieldLabel
-              label={commonT('labels.contract')}
-              hint={t('hints.contract')}
+
+            <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>
+              )}
             />
-            <ContractSelectWithCreate
-              label=""
-              value={form.contractId}
-              contracts={contracts}
-              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`
-                  : (selectedContractTemplate?.name ?? ''),
-                clientName: form.clientName,
-                contractTemplateId: form.contractTemplateId,
-                contractCategory:
-                  selectedContractTemplate?.contractCategory ?? 'client',
-                contractType:
-                  selectedContractTemplate?.contractType ?? 'service_agreement',
-                signatureStatus:
-                  selectedContractTemplate?.signatureStatus ?? 'not_started',
-                billingModel:
-                  selectedContractTemplate?.billingModel ?? form.billingModel,
-                budgetAmount: form.budgetAmount,
-                monthlyHourCap: form.monthlyHourCap,
-                startDate: form.startDate,
-                endDate: form.endDate,
-                description:
-                  selectedContractTemplate?.description ?? form.summary,
-                contentHtml: selectedContractTemplate?.contentHtml ?? '',
-              }}
+            <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>
-        </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.contract')}
-          </h3>
-          <p className="text-[11px] text-muted-foreground/80">
-            {t('sections.contractDescription')}
-          </p>
-        </div>
-
-        <div className="grid min-w-0 gap-3 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
-          <div className="rounded-lg border px-3 py-3">
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <div className="text-sm font-medium text-foreground">
-                  {selectedContract?.name || commonT('labels.notAssigned')}
-                </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {selectedContract
-                    ? [
-                        selectedContract.code,
-                        selectedContract.clientName,
-                        formatEnumLabel(selectedContract.contractType),
-                      ]
-                        .filter(Boolean)
-                        .join(' • ')
-                    : t('fields.autoGenerateContractDraftDescription')}
-                </div>
-              </div>
-              {selectedContract?.status ? (
-                <span className="shrink-0">
-                  <span
-                    className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${getStatusBadgeClass(
-                      selectedContract.status
-                    )}`}
-                  >
-                    {formatEnumLabel(selectedContract.status)}
-                  </span>
-                </span>
-              ) : null}
-            </div>
-
-            {selectedContractTemplate ? (
-              <div className="mt-3 rounded-md bg-muted/40 px-2.5 py-2">
-                <div className="text-xs font-medium text-foreground">
-                  {t('labels.templateSelected')}
-                </div>
-                <div className="mt-1 text-[11px] text-muted-foreground">
-                  {[
-                    selectedContractTemplate.name,
-                    selectedContractTemplate.code,
-                    formatEnumLabel(selectedContractTemplate.contractType),
-                  ]
-                    .filter(Boolean)
-                    .join(' • ')}
-                </div>
-              </div>
-            ) : null}
-
-            <div className="mt-3 flex flex-wrap gap-2">
-              {selectedContract ? (
-                <Button type="button" variant="outline" size="sm" asChild>
-                  <Link
-                    href={`/operations/contracts?edit=${selectedContract.id}`}
-                  >
-                    <FileText className="size-4" />
-                    {commonT('actions.openContract')}
-                  </Link>
-                </Button>
-              ) : null}
-              <Button type="button" variant="outline" size="sm" asChild>
-                <Link href="/operations/contracts/templates">
-                  {commonT('actions.manageTemplates')}
-                </Link>
-              </Button>
-            </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="min-w-0 rounded-lg border px-3 py-2">
-            <div className="flex items-center justify-between gap-3">
-              <div className="min-w-0">
-                <div className="flex items-center gap-1.5 text-sm font-medium">
-                  <span>{t('fields.autoGenerateContractDraft')}</span>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="inline-flex cursor-help text-muted-foreground">
-                        <Info className="h-3.5 w-3.5" />
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>
-                        {form.contractId === 'none'
-                          ? t('fields.autoGenerateContractDraftDescription')
-                          : t('fields.existingContractSelected')}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
-                <div className="text-[11px] text-muted-foreground">
-                  {form.contractId === 'none'
-                    ? t('labels.enabled')
-                    : t('labels.disabled')}
-                </div>
-              </div>
-              <Switch
-                checked={
-                  form.contractId === 'none' && form.autoGenerateContractDraft
+          <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,
+                  }))
                 }
-                disabled={form.contractId !== 'none'}
-                onCheckedChange={(checked) =>
+              />
+            </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,
-                    autoGenerateContractDraft: checked,
+                    startDate: event.target.value,
                   }))
                 }
               />
             </div>
-          </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 = collaborators.find(
-                (item) => item.id === assignment.collaboratorId
-              );
-
-              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.3fr)_minmax(0,1fr)_110px_110px_auto]"
-                >
-                  <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>
+            {!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
-                    className="h-9"
-                    placeholder={t('fields.roleLabel')}
-                    value={assignment.roleLabel}
-                    disabled={!assignment.selected}
+                    type="date"
+                    value={form.endDate}
                     onChange={(event) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        roleLabel: event.target.value,
-                      })
+                      setForm((current) => ({
+                        ...current,
+                        endDate: event.target.value,
+                      }))
                     }
                   />
-                  <Input
-                    className="h-9"
-                    type="number"
-                    placeholder={t('fields.weeklyHours')}
-                    value={assignment.weeklyHours}
-                    disabled={!assignment.selected}
-                    onChange={(event) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        weeklyHours: 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-5">
+                <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
-                    className="h-9"
                     type="number"
-                    placeholder={t('fields.allocationPercent')}
-                    value={assignment.allocationPercent}
-                    disabled={!assignment.selected}
+                    step="0.5"
+                    placeholder={t('placeholders.monthlyHourCap')}
+                    value={form.monthlyHourCap}
                     onChange={(event) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        allocationPercent: event.target.value,
-                      })
+                      setForm((current) => ({
+                        ...current,
+                        monthlyHourCap: event.target.value,
+                      }))
                     }
                   />
-                  <div className="flex items-center justify-between gap-3 rounded-md border px-3 py-2">
-                    <div className="flex items-center gap-1.5 text-xs font-medium">
-                      <span>{t('fields.isBillable')}</span>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="inline-flex cursor-help text-muted-foreground">
-                            <Info className="h-3.5 w-3.5" />
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>{t('fields.isBillableDescription')}</p>
-                        </TooltipContent>
-                      </Tooltip>
+                </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={t('fields.contractTemplate')}
+                    hint={t('hints.contractTemplate')}
+                  />
+                  <ContractTemplateSelectWithCreate
+                    label=""
+                    value={form.contractTemplateId}
+                    templates={contractTemplates}
+                    selectPlaceholder={commonT('labels.notAssigned')}
+                    searchPlaceholder={t('placeholders.contractTemplateSearch')}
+                    onChange={(value) =>
+                      setForm((current) => ({
+                        ...current,
+                        contractTemplateId: value,
+                      }))
+                    }
+                    onCreated={async (template) => {
+                      await refetchContractTemplates();
+                      setForm((current) => ({
+                        ...current,
+                        contractTemplateId: template?.id
+                          ? String(template.id)
+                          : current.contractTemplateId,
+                      }));
+                    }}
+                  />
+                </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`
+                        : (selectedContractTemplate?.name ?? ''),
+                      clientName: form.clientName,
+                      contractTemplateId: form.contractTemplateId,
+                      contractCategory:
+                        selectedContractTemplate?.contractCategory ?? 'client',
+                      contractType:
+                        selectedContractTemplate?.contractType ??
+                        'service_agreement',
+                      signatureStatus:
+                        selectedContractTemplate?.signatureStatus ??
+                        'not_started',
+                      billingModel:
+                        selectedContractTemplate?.billingModel ??
+                        form.billingModel,
+                      budgetAmount: form.budgetAmount,
+                      monthlyHourCap: form.monthlyHourCap,
+                      startDate: form.startDate,
+                      endDate: form.endDate,
+                      description:
+                        selectedContractTemplate?.description ?? form.summary,
+                      contentHtml: selectedContractTemplate?.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.contract')}
+                </h3>
+                <p className="text-[11px] text-muted-foreground/80">
+                  {t('sections.contractDescription')}
+                </p>
+              </div>
+
+              <div className="grid min-w-0 gap-3 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
+                <div className="rounded-lg border px-3 py-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="text-sm font-medium text-foreground">
+                        {selectedContract?.name ||
+                          commonT('labels.notAssigned')}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {selectedContract
+                          ? [
+                              selectedContract.code,
+                              selectedContract.clientName,
+                              formatEnumLabel(selectedContract.contractType),
+                            ]
+                              .filter(Boolean)
+                              .join(' • ')
+                          : t('fields.autoGenerateContractDraftDescription')}
+                      </div>
+                    </div>
+                    {selectedContract?.status ? (
+                      <span className="shrink-0">
+                        <span
+                          className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${getStatusBadgeClass(
+                            selectedContract.status
+                          )}`}
+                        >
+                          {formatEnumLabel(selectedContract.status)}
+                        </span>
+                      </span>
+                    ) : null}
+                  </div>
+
+                  {selectedContractTemplate ? (
+                    <div className="mt-3 rounded-md bg-muted/40 px-2.5 py-2">
+                      <div className="text-xs font-medium text-foreground">
+                        {t('labels.templateSelected')}
+                      </div>
+                      <div className="mt-1 text-[11px] text-muted-foreground">
+                        {[
+                          selectedContractTemplate.name,
+                          selectedContractTemplate.code,
+                          formatEnumLabel(
+                            selectedContractTemplate.contractType
+                          ),
+                        ]
+                          .filter(Boolean)
+                          .join(' • ')}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {selectedContract ? (
+                      <Button type="button" variant="outline" size="sm" asChild>
+                        <Link
+                          href={`/operations/contracts?edit=${selectedContract.id}`}
+                        >
+                          <FileText className="size-4" />
+                          {commonT('actions.openContract')}
+                        </Link>
+                      </Button>
+                    ) : null}
+                  </div>
+                </div>
+
+                <div className="min-w-0 px-1 py-2">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-1.5 text-sm font-medium">
+                        <span>{t('fields.autoGenerateContractDraft')}</span>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="inline-flex cursor-help text-muted-foreground">
+                              <Info className="h-3.5 w-3.5" />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>
+                              {form.contractId === 'none'
+                                ? t(
+                                    'fields.autoGenerateContractDraftDescription'
+                                  )
+                                : t('fields.existingContractSelected')}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {form.contractId === 'none'
+                          ? t('labels.enabled')
+                          : t('labels.disabled')}
+                      </div>
                     </div>
                     <Switch
-                      checked={assignment.isBillable}
-                      disabled={!assignment.selected}
+                      checked={
+                        form.contractId === 'none' &&
+                        form.autoGenerateContractDraft
+                      }
+                      disabled={form.contractId !== 'none'}
                       onCheckedChange={(checked) =>
-                        updateAssignment(assignment.collaboratorId, {
-                          isBillable: checked,
-                        })
+                        setForm((current) => ({
+                          ...current,
+                          autoGenerateContractDraft: checked,
+                        }))
                       }
                     />
                   </div>
                 </div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-    </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_auto]"
+                      >
+                        <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"
+                          type="number"
+                          placeholder={t('fields.weeklyHours')}
+                          value={assignment.weeklyHours}
+                          disabled={!assignment.selected}
+                          onChange={(event) =>
+                            updateAssignment(assignment.collaboratorId, {
+                              weeklyHours: event.target.value,
+                            })
+                          }
+                        />
+                        <Input
+                          className="h-9"
+                          type="text"
+                          inputMode="decimal"
+                          placeholder={t('fields.allocationPercent')}
+                          value={assignment.allocationPercent}
+                          disabled={!assignment.selected}
+                          onChange={(event) =>
+                            updateAssignment(assignment.collaboratorId, {
+                              allocationPercent: normalizePercentInput(
+                                event.target.value
+                              ),
+                            })
+                          }
+                        />
+                        <div className="flex items-center justify-between gap-3 px-1 py-2">
+                          <div className="flex items-center gap-1.5 text-xs font-medium">
+                            <span>{t('fields.isBillable')}</span>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="inline-flex cursor-help text-muted-foreground">
+                                  <Info className="h-3.5 w-3.5" />
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>{t('fields.isBillableDescription')}</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </div>
+                          <Switch
+                            checked={assignment.isBillable}
+                            disabled={!assignment.selected}
+                            onCheckedChange={(checked) =>
+                              updateAssignment(assignment.collaboratorId, {
+                                isBillable: checked,
+                              })
+                            }
+                          />
+                        </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 ? (
@@ -1529,7 +1889,9 @@ export function ProjectFormScreen({
           sheet
           cancelLabel={commonT('actions.cancel')}
           onCancel={onCancel}
-          onSubmit={() => void onSubmit()}
+          onSubmit={() =>
+            void formMethods.handleSubmit(onSubmit, handleInvalidSubmit)()
+          }
           submitIcon={<Save className="size-4" />}
           submitLabel={commonT('actions.save')}
           submitSize="lg"
@@ -1558,7 +1920,13 @@ export function ProjectFormScreen({
                 {commonT('actions.back')}
               </Link>
             </Button>
-            <Button size="sm" onClick={() => void onSubmit()}>
+            <Button
+              size="sm"
+              type="button"
+              onClick={() =>
+                void formMethods.handleSubmit(onSubmit, handleInvalidSubmit)()
+              }
+            >
               <Save className="size-4" />
               {commonT('actions.save')}
             </Button>