@hed-hog/operations 0.0.303 → 0.0.304

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,26 @@ 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 { 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 +95,7 @@ const OPTION_PAGE_SIZE = 12;
 type TeamAssignmentState = {
   collaboratorId: number;
   selected: boolean;
+  projectRoleId: string;
   roleLabel: string;
   weeklyHours: string;
   allocationPercent: string;
@@ -108,6 +126,8 @@ type ProjectFormState = {
   teamAssignments: TeamAssignmentState[];
 };
 
+type ProjectFormValues = ProjectFormState;
+
 function buildEmptyForm(
   collaborators: OperationsCollaborator[] = []
 ): ProjectFormState {
@@ -134,6 +154,7 @@ function buildEmptyForm(
     teamAssignments: collaborators.map((collaborator) => ({
       collaboratorId: collaborator.id,
       selected: false,
+      projectRoleId: 'none',
       roleLabel: '',
       weeklyHours: '',
       allocationPercent: '',
@@ -191,6 +212,9 @@ function toFormState(
       return {
         collaboratorId: collaborator.id,
         selected: Boolean(assignment),
+        projectRoleId: assignment?.projectRoleId
+          ? String(assignment.projectRoleId)
+          : 'none',
         roleLabel: assignment?.roleLabel ?? '',
         weeklyHours:
           assignment?.weeklyHours !== null &&
@@ -442,16 +466,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 +627,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 +663,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,6 +782,20 @@ 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],
@@ -705,15 +813,15 @@ export function ProjectFormScreen({
     }
 
     if (project) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setForm(toFormState(project, collaborators));
+      formMethods.reset(toFormState(project, collaborators));
       return;
     }
 
-    setForm((current) =>
-      current.teamAssignments.length ? current : buildEmptyForm(collaborators)
-    );
-  }, [collaborators, project]);
+    const currentValues = formMethods.getValues();
+    if (!currentValues.teamAssignments.length) {
+      formMethods.reset(buildEmptyForm(collaborators));
+    }
+  }, [collaborators, formMethods, project]);
 
   const selectedContract = useMemo(
     () =>
@@ -742,6 +850,39 @@ export function ProjectFormScreen({
     [collaborators]
   );
 
+  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,
@@ -781,61 +922,66 @@ export function ProjectFormScreen({
     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: values.deliveryModel,
+      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 +1011,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 +1054,687 @@ 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,
-                }))
-              }
-            />
+    <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={commonT('labels.monthlyHourCap')}
-              hint={t('hints.monthlyHourCap')}
+          <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>
+              )}
             />
-            <Input
-              type="number"
-              step="0.5"
-              placeholder={t('placeholders.monthlyHourCap')}
-              value={form.monthlyHourCap}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  monthlyHourCap: event.target.value,
-                }))
-              }
+            <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.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')}
+
+            <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>
+              )}
             />
-            <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="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 className="min-w-0 space-y-2">
-            <FieldLabel
-              label={commonT('labels.contract')}
-              hint={t('hints.contract')}
-            />
-            <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 ?? '',
-              }}
-            />
+        </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>
-      </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 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>
-
-            {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 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="mt-1 text-[11px] text-muted-foreground">
-                  {[
-                    selectedContractTemplate.name,
-                    selectedContractTemplate.code,
-                    formatEnumLabel(selectedContractTemplate.contractType),
-                  ]
-                    .filter(Boolean)
-                    .join(' • ')}
+                <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>
+                <FormField
+                  control={formMethods.control}
+                  name="progressPercent"
+                  render={({ field }) => (
+                    <FormItem className="min-w-0 gap-0">
+                      <FormLabel>{t('fields.progressPercent')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type="number"
+                          min="0"
+                          max="100"
+                          step="1"
+                          placeholder={t('placeholders.progressPercent')}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
             ) : 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>
           </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>
+        </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>
-              <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.budget')} />
+              <InputMoney
+                value={form.budgetAmount}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    budgetAmount: event.target.value,
+                  }))
                 }
-                disabled={form.contractId !== 'none'}
-                onCheckedChange={(checked) =>
+              />
+            </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,
-                    autoGenerateContractDraft: checked,
+                    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>
+            </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={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 ?? '',
+                }}
+              />
+            </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)}
-            />
+        </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="space-y-2">
-            {filteredAssignments.map((assignment) => {
-              const collaborator = collaborators.find(
-                (item) => item.id === assignment.collaboratorId
-              );
+          <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>
 
-              if (!collaborator) {
-                return null;
-              }
+              {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}
 
-              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) =>
+              <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={
+                    form.contractId === 'none' && form.autoGenerateContractDraft
+                  }
+                  disabled={form.contractId !== 'none'}
+                  onCheckedChange={(checked) =>
+                    setForm((current) => ({
+                      ...current,
+                      autoGenerateContractDraft: checked,
+                    }))
+                  }
+                />
+              </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
+                );
+                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, {
-                          selected: checked === true,
+                          weeklyHours: event.target.value,
                         })
                       }
                     />
-                    <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>
-                  <Input
-                    className="h-9"
-                    placeholder={t('fields.roleLabel')}
-                    value={assignment.roleLabel}
-                    disabled={!assignment.selected}
-                    onChange={(event) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        roleLabel: 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,
-                      })
-                    }
-                  />
-                  <Input
-                    className="h-9"
-                    type="number"
-                    placeholder={t('fields.allocationPercent')}
-                    value={assignment.allocationPercent}
-                    disabled={!assignment.selected}
-                    onChange={(event) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        allocationPercent: 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>
-                    <Switch
-                      checked={assignment.isBillable}
+                    <Input
+                      className="h-9"
+                      type="number"
+                      placeholder={t('fields.allocationPercent')}
+                      value={assignment.allocationPercent}
                       disabled={!assignment.selected}
-                      onCheckedChange={(checked) =>
+                      onChange={(event) =>
                         updateAssignment(assignment.collaboratorId, {
-                          isBillable: checked,
+                          allocationPercent: 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>
           </div>
-        </div>
-      </section>
-    </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 +1764,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 +1795,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>