@hed-hog/operations 0.0.304 → 0.0.305

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

@@ -83,7 +83,11 @@ import type {
   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';
@@ -128,6 +132,32 @@ type ProjectFormState = {
 
 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 {
@@ -168,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,
@@ -176,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)
@@ -195,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 &&
@@ -207,7 +251,7 @@ 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,
@@ -800,6 +844,8 @@ export function ProjectFormScreen({
     useQuery<OperationsProjectDetails>({
       queryKey: ['operations-project-form', currentLocaleCode, projectId],
       enabled: Boolean(projectId),
+      staleTime: 0,
+      refetchOnMount: 'always',
       queryFn: () =>
         fetchOperations<OperationsProjectDetails>(
           request,
@@ -808,12 +854,12 @@ export function ProjectFormScreen({
     });
 
   useEffect(() => {
-    if (!collaborators.length) {
+    if (project) {
+      formMethods.reset(toFormState(project, collaborators));
       return;
     }
 
-    if (project) {
-      formMethods.reset(toFormState(project, collaborators));
+    if (!collaborators.length) {
       return;
     }
 
@@ -823,11 +869,63 @@ export function ProjectFormScreen({
     }
   }, [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(
@@ -840,14 +938,14 @@ 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(
@@ -893,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
       );
 
@@ -916,7 +1014,7 @@ export function ProjectFormScreen({
           String(value).toLowerCase().includes(normalizedSearch)
         );
     });
-  }, [assignmentSearch, collaborators, form.teamAssignments]);
+  }, [assignmentSearch, availableCollaborators, form.teamAssignments]);
 
   const updateAssignment = (
     collaboratorId: number,
@@ -956,7 +1054,7 @@ export function ProjectFormScreen({
       summary: trimToNull(values.summary),
       status: values.status,
       progressPercent: parseNumberInput(values.progressPercent),
-      deliveryModel: values.deliveryModel,
+      deliveryModel: trimToNull(values.deliveryModel) ?? 'project_delivery',
       budgetAmount: parseNumberInput(values.budgetAmount),
       startDate: trimToNull(values.startDate),
       endDate: trimToNull(values.endDate),
@@ -1288,11 +1386,15 @@ export function ProjectFormScreen({
                       <FormControl>
                         <Input
                           {...field}
-                          type="number"
-                          min="0"
-                          max="100"
-                          step="1"
+                          type="text"
+                          inputMode="decimal"
                           placeholder={t('placeholders.progressPercent')}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(
+                              normalizePercentInput(event.target.value)
+                            )
+                          }
                         />
                       </FormControl>
                       <FormMessage />
@@ -1315,384 +1417,236 @@ export function ProjectFormScreen({
                   {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>
-            </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>
-        </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 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>
-                {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 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>
-              ) : null}
+                <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>
 
-              <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}
+            <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>
 
-            <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" />
+              <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>
-                      </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')}
+                      </span>
+                    ) : null}
                   </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>
+                  {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>
-                    </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="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 px-1 py-2">
-                      <div className="flex items-center gap-1.5 text-xs font-medium">
-                        <span>{t('fields.isBillable')}</span>
+                  ) : 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">
@@ -1700,26 +1654,197 @@ export function ProjectFormScreen({
                             </span>
                           </TooltipTrigger>
                           <TooltipContent>
-                            <p>{t('fields.isBillableDescription')}</p>
+                            <p>
+                              {form.contractId === 'none'
+                                ? t(
+                                    'fields.autoGenerateContractDraftDescription'
+                                  )
+                                : t('fields.existingContractSelected')}
+                            </p>
                           </TooltipContent>
                         </Tooltip>
                       </div>
-                      <Switch
-                        checked={assignment.isBillable}
-                        disabled={!assignment.selected}
-                        onCheckedChange={(checked) =>
-                          updateAssignment(assignment.collaboratorId, {
-                            isBillable: checked,
-                          })
-                        }
-                      />
+                      <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>
+                </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">