@hed-hog/operations 0.0.300 → 0.0.302

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

@@ -3,7 +3,23 @@
 import { EmptyState, Page } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -11,25 +27,53 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { ArrowLeft, FolderKanban, Save } from 'lucide-react';
+import {
+  ArrowLeft,
+  Check,
+  ChevronsUpDown,
+  FileText,
+  FolderKanban,
+  Info,
+  Plus,
+  Save,
+  Search,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { OperationsHeader } from './operations-header';
-import { SectionCard } from './section-card';
+import { useEffect, useMemo, useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
   OperationsContract,
+  OperationsContractTemplate,
   OperationsProjectDetails,
 } from '../_lib/types';
+import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
 import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-import { formatEnumLabel } from '../_lib/utils/format';
+import { ContractFormScreen } from './contract-form-screen';
+import { ContractTemplateFormScreen } from './contract-template-form-screen';
+import { OperationsHeader } from './operations-header';
+import { PersonSelectWithCreate } from './person-select-with-create';
+
+const OPTION_PAGE_SIZE = 12;
 
 type TeamAssignmentState = {
   collaboratorId: number;
@@ -43,6 +87,7 @@ type TeamAssignmentState = {
 
 type ProjectFormState = {
   contractId: string;
+  contractTemplateId: string;
   managerCollaboratorId: string;
   code: string;
   name: string;
@@ -68,6 +113,7 @@ function buildEmptyForm(
 ): ProjectFormState {
   return {
     contractId: 'none',
+    contractTemplateId: 'none',
     managerCollaboratorId: 'none',
     code: '',
     name: '',
@@ -110,6 +156,7 @@ function toFormState(
 
   return {
     contractId: project.contractId ? String(project.contractId) : 'none',
+    contractTemplateId: 'none',
     managerCollaboratorId: project.managerCollaboratorId
       ? String(project.managerCollaboratorId)
       : 'none',
@@ -129,8 +176,7 @@ function toFormState(
         : '',
     startDate: project.startDate ?? '',
     endDate: project.endDate ?? '',
-    billingModel:
-      project.relatedContract?.billingModel ?? 'time_and_material',
+    billingModel: project.relatedContract?.billingModel ?? 'time_and_material',
     monthlyHourCap:
       project.relatedContract?.monthlyHourCap !== null &&
       project.relatedContract?.monthlyHourCap !== undefined
@@ -147,7 +193,8 @@ function toFormState(
         selected: Boolean(assignment),
         roleLabel: assignment?.roleLabel ?? '',
         weeklyHours:
-          assignment?.weeklyHours !== null && assignment?.weeklyHours !== undefined
+          assignment?.weeklyHours !== null &&
+          assignment?.weeklyHours !== undefined
             ? String(assignment.weeklyHours)
             : '',
         allocationPercent:
@@ -162,28 +209,485 @@ function toFormState(
   };
 }
 
-export function ProjectFormScreen({ projectId }: { projectId?: number }) {
+type SearchableSelectProps = {
+  label: string;
+  value: string;
+  options: Array<{
+    id: number;
+    title: string;
+    description?: string | null;
+  }>;
+  placeholder: string;
+  searchPlaceholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+};
+
+function SearchableSelect({
+  label,
+  value,
+  options,
+  placeholder,
+  searchPlaceholder,
+  emptyLabel,
+  onChange,
+}: SearchableSelectProps) {
+  const commonT = useTranslations('operations.Common');
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [visibleCount, setVisibleCount] = useState(OPTION_PAGE_SIZE);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return options;
+    }
+
+    return options.filter((option) =>
+      [option.title, option.description]
+        .filter(Boolean)
+        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
+    );
+  }, [options, search]);
+
+  const selectedOption = options.find((option) => String(option.id) === value);
+  const visibleOptions = filteredOptions.slice(0, visibleCount);
+
+  return (
+    <div className="grid gap-2">
+      {label ? <Label>{label}</Label> : null}
+
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen);
+          setVisibleCount(OPTION_PAGE_SIZE);
+
+          if (!nextOpen) {
+            setSearch('');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            className="w-full justify-between overflow-hidden"
+          >
+            <span className="truncate text-left">
+              {selectedOption?.title ?? emptyLabel}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder={searchPlaceholder}
+              value={search}
+              onValueChange={(nextValue) => {
+                setSearch(nextValue);
+                setVisibleCount(OPTION_PAGE_SIZE);
+              }}
+            />
+            <CommandList>
+              <CommandEmpty>
+                <div className="p-2 text-sm text-muted-foreground">
+                  {commonT('states.emptyDescription')}
+                </div>
+              </CommandEmpty>
+
+              <CommandGroup>
+                <CommandItem
+                  value="none"
+                  onSelect={() => {
+                    onChange('none');
+                    setOpen(false);
+                  }}
+                >
+                  {value === 'none' ? (
+                    <Check className="mr-2 h-4 w-4" />
+                  ) : (
+                    <span className="mr-2 h-4 w-4" />
+                  )}
+                  {placeholder}
+                </CommandItem>
+
+                {visibleOptions.map((option) => (
+                  <CommandItem
+                    key={option.id}
+                    value={`${option.title} ${option.description ?? ''}`}
+                    onSelect={() => {
+                      onChange(String(option.id));
+                      setOpen(false);
+                    }}
+                  >
+                    {String(option.id) === value ? (
+                      <Check className="mr-2 h-4 w-4" />
+                    ) : (
+                      <span className="mr-2 h-4 w-4" />
+                    )}
+                    <div className="min-w-0">
+                      <div className="truncate">{option.title}</div>
+                      {option.description ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+
+              {filteredOptions.length > visibleCount ? (
+                <div className="border-t p-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="w-full"
+                    onClick={() =>
+                      setVisibleCount((current) => current + OPTION_PAGE_SIZE)
+                    }
+                  >
+                    {commonT('actions.loadMore')}
+                  </Button>
+                </div>
+              ) : null}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+type ProjectFormScreenProps = {
+  projectId?: number;
+  onSaved?: (project: OperationsProjectDetails) => void | Promise<void>;
+  onCancel?: () => void;
+};
+
+function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <Label>{label}</Label>
+      {hint ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex cursor-help text-muted-foreground">
+              <Info className="h-3.5 w-3.5" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{hint}</p>
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}
+
+type ContractSelectWithCreateProps = {
+  value: string;
+  contracts: OperationsContract[];
+  label: string;
+  selectPlaceholder: string;
+  searchPlaceholder: string;
+  onChange: (value: string) => void;
+  onCreated?: (
+    contract: OperationsProjectDetails['relatedContract']
+  ) => void | Promise<void>;
+  initialValues?: {
+    code?: string;
+    name?: string;
+    clientName?: string;
+    contractTemplateId?: string;
+    contractCategory?: string;
+    contractType?: string;
+    signatureStatus?: string;
+    billingModel?: string;
+    budgetAmount?: string;
+    monthlyHourCap?: string;
+    startDate?: string;
+    endDate?: string;
+    description?: string;
+    contentHtml?: string;
+  };
+};
+
+function ContractSelectWithCreate({
+  value,
+  contracts,
+  label,
+  selectPlaceholder,
+  searchPlaceholder,
+  onChange,
+  onCreated,
+  initialValues,
+}: ContractSelectWithCreateProps) {
+  const commonT = useTranslations('operations.Common');
+  const contractT = useTranslations('operations.ContractFormPage');
+  const selectedContract = contracts.find((item) => String(item.id) === value);
+  const hasSelection = value !== 'none';
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+
+  return (
+    <>
+      <div className="space-y-2">
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+          <SearchableSelect
+            label={label}
+            value={value}
+            options={contracts.map((contract) => ({
+              id: contract.id,
+              title:
+                contract.name ||
+                contract.code ||
+                commonT('labels.notAvailable'),
+              description: [
+                contract.code,
+                contract.clientName,
+                formatEnumLabel(contract.contractType),
+              ]
+                .filter(Boolean)
+                .join(' • '),
+            }))}
+            placeholder={selectPlaceholder}
+            searchPlaceholder={searchPlaceholder}
+            emptyLabel={commonT('labels.notAssigned')}
+            onChange={onChange}
+          />
+
+          {hasSelection ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0"
+              onClick={() => onChange('none')}
+              aria-label={commonT('actions.clearSelection')}
+            >
+              <X className="size-4" />
+            </Button>
+          ) : null}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="shrink-0"
+            onClick={() => setIsCreateSheetOpen(true)}
+            aria-label={commonT('actions.create')}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+
+        {selectedContract ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            asChild
+            className="w-fit"
+          >
+            <Link href={`/operations/contracts?edit=${selectedContract.id}`}>
+              <FileText className="size-4" />
+              {commonT('actions.openContract')}
+            </Link>
+          </Button>
+        ) : null}
+      </div>
+
+      <Sheet open={isCreateSheetOpen} onOpenChange={setIsCreateSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-7xl">
+          <SheetHeader>
+            <SheetTitle>{contractT('newTitle')}</SheetTitle>
+            <SheetDescription>{contractT('description')}</SheetDescription>
+          </SheetHeader>
+
+          <ContractFormScreen
+            initialValues={initialValues}
+            onCancel={() => setIsCreateSheetOpen(false)}
+            onSaved={async (contract) => {
+              const createdContractId = contract?.id
+                ? String(contract.id)
+                : value;
+              onChange(createdContractId);
+              await onCreated?.(
+                contract as OperationsProjectDetails['relatedContract']
+              );
+              setIsCreateSheetOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+type ContractTemplateSelectWithCreateProps = {
+  value: string;
+  templates: OperationsContractTemplate[];
+  label: string;
+  selectPlaceholder: string;
+  searchPlaceholder: string;
+  onChange: (value: string) => void;
+  onCreated?: (template: OperationsContractTemplate) => void | Promise<void>;
+};
+
+function ContractTemplateSelectWithCreate({
+  value,
+  templates,
+  label,
+  selectPlaceholder,
+  searchPlaceholder,
+  onChange,
+  onCreated,
+}: ContractTemplateSelectWithCreateProps) {
+  const commonT = useTranslations('operations.Common');
+  const templateT = useTranslations('operations.ContractTemplateFormPage');
+  const hasSelection = value !== 'none';
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+
+  return (
+    <>
+      <div className="space-y-2">
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+          <SearchableSelect
+            label={label}
+            value={value}
+            options={templates.map((template) => ({
+              id: template.id,
+              title: template.name,
+              description: [
+                template.code,
+                formatEnumLabel(template.contractType),
+                formatEnumLabel(template.billingModel),
+              ]
+                .filter(Boolean)
+                .join(' • '),
+            }))}
+            placeholder={selectPlaceholder}
+            searchPlaceholder={searchPlaceholder}
+            emptyLabel={commonT('labels.notAssigned')}
+            onChange={onChange}
+          />
+
+          {hasSelection ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0"
+              onClick={() => onChange('none')}
+              aria-label={commonT('actions.clearSelection')}
+            >
+              <X className="size-4" />
+            </Button>
+          ) : null}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="shrink-0"
+            onClick={() => setIsCreateSheetOpen(true)}
+            aria-label={commonT('actions.create')}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+
+        <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}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-7xl">
+          <SheetHeader>
+            <SheetTitle>{templateT('newTitle')}</SheetTitle>
+            <SheetDescription>{templateT('description')}</SheetDescription>
+          </SheetHeader>
+
+          <ContractTemplateFormScreen
+            onCancel={() => setIsCreateSheetOpen(false)}
+            onSaved={async (template) => {
+              const createdTemplateId = template?.id
+                ? String(template.id)
+                : value;
+              onChange(createdTemplateId);
+              await onCreated?.(template);
+              setIsCreateSheetOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export function ProjectFormScreen({
+  projectId,
+  onSaved,
+  onCancel,
+}: ProjectFormScreenProps) {
   const t = useTranslations('operations.ProjectFormPage');
   const commonT = useTranslations('operations.Common');
   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 { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
     queryKey: ['operations-project-form-collaborators', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
   });
 
-  const { data: contracts = [] } = useQuery<OperationsContract[]>({
+  const { data: contracts = [], refetch: refetchContracts } = useQuery<
+    OperationsContract[]
+  >({
     queryKey: ['operations-project-form-contracts', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
       fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
   });
 
+  const { data: contractTemplates = [], refetch: refetchContractTemplates } =
+    useQuery<OperationsContractTemplate[]>({
+      queryKey: [
+        'operations-project-form-contract-templates',
+        currentLocaleCode,
+      ],
+      enabled: access.isDirector,
+      queryFn: () =>
+        fetchOperations<OperationsContractTemplate[]>(
+          request,
+          '/operations/contract-templates'
+        ),
+    });
+
   const { data: project, isLoading: isLoadingProject } =
     useQuery<OperationsProjectDetails>({
       queryKey: ['operations-project-form', currentLocaleCode, projectId],
@@ -201,6 +705,7 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
     }
 
     if (project) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm(toFormState(project, collaborators));
       return;
     }
@@ -210,6 +715,68 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
     );
   }, [collaborators, project]);
 
+  const selectedContract = useMemo(
+    () =>
+      contracts.find((contract) => String(contract.id) === form.contractId) ??
+      null,
+    [contracts, form.contractId]
+  );
+
+  const selectedContractTemplate = useMemo(
+    () =>
+      contractTemplates.find(
+        (template) => String(template.id) === form.contractTemplateId
+      ) ?? null,
+    [contractTemplates, form.contractTemplateId]
+  );
+
+  const managerOptions = useMemo(
+    () =>
+      collaborators.map((collaborator) => ({
+        id: collaborator.id,
+        title: collaborator.displayName,
+        description: [collaborator.department, collaborator.title]
+          .filter(Boolean)
+          .join(' • '),
+      })),
+    [collaborators]
+  );
+
+  const selectedAssignmentsCount = useMemo(
+    () =>
+      form.teamAssignments.filter((assignment) => assignment.selected).length,
+    [form.teamAssignments]
+  );
+
+  const filteredAssignments = useMemo(() => {
+    const normalizedSearch = assignmentSearch.trim().toLowerCase();
+
+    return form.teamAssignments.filter((assignment) => {
+      const collaborator = collaborators.find(
+        (item) => item.id === assignment.collaboratorId
+      );
+
+      if (!collaborator) {
+        return false;
+      }
+
+      if (!normalizedSearch) {
+        return true;
+      }
+
+      return [
+        collaborator.displayName,
+        collaborator.department,
+        collaborator.title,
+        collaborator.code,
+      ]
+        .filter(Boolean)
+        .some((value) =>
+          String(value).toLowerCase().includes(normalizedSearch)
+        );
+    });
+  }, [assignmentSearch, collaborators, form.teamAssignments]);
+
   const updateAssignment = (
     collaboratorId: number,
     patch: Partial<TeamAssignmentState>
@@ -231,7 +798,12 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
     }
 
     const payload = {
-      contractId: form.contractId === 'none' ? null : parseNumberInput(form.contractId),
+      contractId:
+        form.contractId === 'none' ? null : parseNumberInput(form.contractId),
+      contractTemplateId:
+        form.contractTemplateId === 'none'
+          ? null
+          : parseNumberInput(form.contractTemplateId),
       managerCollaboratorId:
         form.managerCollaboratorId === 'none'
           ? null
@@ -251,9 +823,8 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
       contractCode: trimToNull(form.contractCode),
       contractName: trimToNull(form.contractName),
       contractDescription: trimToNull(form.contractDescription),
-      autoGenerateContractDraft: form.contractId === 'none'
-        ? form.autoGenerateContractDraft
-        : false,
+      autoGenerateContractDraft:
+        form.contractId === 'none' ? form.autoGenerateContractDraft : false,
       teamAssignments: form.teamAssignments
         .filter((assignment) => assignment.selected)
         .map((assignment) => ({
@@ -287,6 +858,12 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
         'success',
         projectId ? t('messages.updateSuccess') : t('messages.createSuccess')
       );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
       router.push(`/operations/projects/${response.id}`);
     } catch {
       showToastHandler?.(
@@ -296,7 +873,21 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
     }
   };
 
+  const noAccessState = (
+    <EmptyState
+      icon={<FolderKanban className="size-12" />}
+      title={commonT('states.noAccessTitle')}
+      description={t('noAccessDescription')}
+      actionLabel={commonT('actions.refresh')}
+      onAction={() => router.refresh()}
+    />
+  );
+
   if (!access.isDirector && !access.isLoading) {
+    if (isSheetMode) {
+      return <div className="pt-4">{noAccessState}</div>;
+    }
+
     return (
       <Page>
         <OperationsHeader
@@ -304,362 +895,471 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
           description={t('description')}
           current={t('breadcrumb')}
         />
-        <EmptyState
-          icon={<FolderKanban className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => router.refresh()}
-        />
+        {noAccessState}
       </Page>
     );
   }
 
-  return (
-    <Page>
-      <OperationsHeader
-        title={t(projectId ? 'editTitle' : 'newTitle')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link
-                href={projectId ? `/operations/projects/${projectId}` : '/operations/projects'}
-              >
-                <ArrowLeft className="size-4" />
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-            <Button size="sm" onClick={() => void onSubmit()}>
-              <Save className="size-4" />
-              {commonT('actions.save')}
-            </Button>
+  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>
 
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.basicInfo')} description={t('sections.basicInfoDescription')}>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.code')}</label>
-              <Input
-                value={form.code}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, code: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.name')}</label>
-              <Input
-                value={form.name}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, name: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.clientName')}</label>
-              <Input
-                value={form.clientName}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    clientName: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.deliveryModel')}</label>
-              <Select
-                value={form.deliveryModel}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, deliveryModel: value }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="project_delivery">Project Delivery</SelectItem>
-                  <SelectItem value="dedicated_team">Dedicated Team</SelectItem>
-                  <SelectItem value="shared_team">Shared Team</SelectItem>
-                  <SelectItem value="support">Support</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2 md:col-span-2">
-              <label className="text-sm font-medium">{t('fields.summary')}</label>
-              <Textarea
-                rows={4}
-                value={form.summary}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, summary: event.target.value }))
-                }
-              />
-            </div>
+      <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>
-        </SectionCard>
-
-        <SectionCard title={t('sections.governance')} description={t('sections.governanceDescription')}>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.manager')}</label>
-              <Select
-                value={form.managerCollaboratorId}
-                onValueChange={(value) =>
-                  setForm((current) => ({
-                    ...current,
-                    managerCollaboratorId: value,
-                  }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
-                  {collaborators.map((collaborator) => (
-                    <SelectItem key={collaborator.id} value={String(collaborator.id)}>
-                      {collaborator.displayName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.status')}</label>
-              <Select
-                value={form.status}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, status: value }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="planning">Planning</SelectItem>
-                  <SelectItem value="active">Active</SelectItem>
-                  <SelectItem value="at_risk">At Risk</SelectItem>
-                  <SelectItem value="paused">Paused</SelectItem>
-                  <SelectItem value="completed">Completed</SelectItem>
-                  <SelectItem value="archived">Archived</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.startDate')}</label>
-              <Input
-                type="date"
-                value={form.startDate}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, startDate: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.endDate')}</label>
-              <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={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>
-        </SectionCard>
-      </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>
 
-      <SectionCard title={t('sections.team')} description={t('sections.teamDescription')}>
-        <div className="space-y-3">
-          {form.teamAssignments.map((assignment) => {
-            const collaborator = collaborators.find(
-              (item) => item.id === assignment.collaboratorId
-            );
-            if (!collaborator) {
-              return null;
-            }
-
-            return (
-              <div
-                key={assignment.collaboratorId}
-                className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[minmax(220px,1fr)_minmax(180px,1fr)_120px_120px]"
-              >
-                <div className="flex items-start gap-3">
-                  <Checkbox
-                    checked={assignment.selected}
-                    onCheckedChange={(checked) =>
-                      updateAssignment(assignment.collaboratorId, {
-                        selected: checked === true,
-                      })
-                    }
-                  />
-                  <div>
-                    <div className="font-medium">{collaborator.displayName}</div>
-                    <div className="text-xs text-muted-foreground">
-                      {[collaborator.department, collaborator.title]
+      <section className="space-y-3">
+        <div className="space-y-0.5">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {t('sections.financials')}
+          </h3>
+          <p className="text-[11px] text-muted-foreground/80">
+            {t('sections.financialsDescription')}
+          </p>
+        </div>
+        <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-5">
+          <div className="min-w-0 space-y-2">
+            <FieldLabel label={commonT('labels.budget')} />
+            <InputMoney
+              value={form.budgetAmount}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  budgetAmount: event.target.value,
+                }))
+              }
+            />
+          </div>
+          <div className="min-w-0 space-y-2">
+            <FieldLabel
+              label={commonT('labels.monthlyHourCap')}
+              hint={t('hints.monthlyHourCap')}
+            />
+            <Input
+              type="number"
+              step="0.5"
+              placeholder={t('placeholders.monthlyHourCap')}
+              value={form.monthlyHourCap}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  monthlyHourCap: event.target.value,
+                }))
+              }
+            />
+          </div>
+          <div className="min-w-0 space-y-2">
+            <FieldLabel label={commonT('labels.billingModel')} />
+            <Select
+              value={form.billingModel}
+              onValueChange={(value) =>
+                setForm((current) => ({ ...current, billingModel: value }))
+              }
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="time_and_material">
+                  {t('options.billingModels.time_and_material')}
+                </SelectItem>
+                <SelectItem value="monthly_retainer">
+                  {t('options.billingModels.monthly_retainer')}
+                </SelectItem>
+                <SelectItem value="fixed_price">
+                  {t('options.billingModels.fixed_price')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </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(' • ') || commonT('labels.notAvailable')}
-                    </div>
-                  </div>
+                        .join(' • ')
+                    : t('fields.autoGenerateContractDraftDescription')}
                 </div>
-                <Input
-                  placeholder={t('fields.roleLabel')}
-                  value={assignment.roleLabel}
-                  disabled={!assignment.selected}
-                  onChange={(event) =>
-                    updateAssignment(assignment.collaboratorId, {
-                      roleLabel: event.target.value,
-                    })
-                  }
-                />
-                <Input
-                  type="number"
-                  placeholder={t('fields.weeklyHours')}
-                  value={assignment.weeklyHours}
-                  disabled={!assignment.selected}
-                  onChange={(event) =>
-                    updateAssignment(assignment.collaboratorId, {
-                      weeklyHours: event.target.value,
-                    })
-                  }
-                />
-                <Input
-                  type="number"
-                  placeholder={t('fields.allocationPercent')}
-                  value={assignment.allocationPercent}
-                  disabled={!assignment.selected}
-                  onChange={(event) =>
-                    updateAssignment(assignment.collaboratorId, {
-                      allocationPercent: event.target.value,
-                    })
-                  }
-                />
               </div>
-            );
-          })}
-        </div>
-      </SectionCard>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.financials')} description={t('sections.financialsDescription')}>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.budget')}</label>
-              <Input
-                type="number"
-                step="0.01"
-                value={form.budgetAmount}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, budgetAmount: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.monthlyHourCap')}</label>
-              <Input
-                type="number"
-                step="0.5"
-                value={form.monthlyHourCap}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    monthlyHourCap: event.target.value,
-                  }))
-                }
-              />
+              {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>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.billingModel')}</label>
-              <Select
-                value={form.billingModel}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, billingModel: value }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="time_and_material">Time And Material</SelectItem>
-                  <SelectItem value="monthly_retainer">Monthly Retainer</SelectItem>
-                  <SelectItem value="fixed_price">Fixed Price</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.contract')}</label>
-              <Select
-                value={form.contractId}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, contractId: value }))
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
-                  {contracts.map((contract) => (
-                    <SelectItem key={contract.id} value={String(contract.id)}>
-                      {contract.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+
+            {selectedContractTemplate ? (
+              <div className="mt-3 rounded-md bg-muted/40 px-2.5 py-2">
+                <div className="text-xs font-medium text-foreground">
+                  {t('labels.templateSelected')}
+                </div>
+                <div className="mt-1 text-[11px] text-muted-foreground">
+                  {[
+                    selectedContractTemplate.name,
+                    selectedContractTemplate.code,
+                    formatEnumLabel(selectedContractTemplate.contractType),
+                  ]
+                    .filter(Boolean)
+                    .join(' • ')}
+                </div>
+              </div>
+            ) : null}
+
+            <div className="mt-3 flex flex-wrap gap-2">
+              {selectedContract ? (
+                <Button type="button" variant="outline" size="sm" asChild>
+                  <Link
+                    href={`/operations/contracts?edit=${selectedContract.id}`}
+                  >
+                    <FileText className="size-4" />
+                    {commonT('actions.openContract')}
+                  </Link>
+                </Button>
+              ) : null}
+              <Button type="button" variant="outline" size="sm" asChild>
+                <Link href="/operations/contracts/templates">
+                  {commonT('actions.manageTemplates')}
+                </Link>
+              </Button>
             </div>
           </div>
-        </SectionCard>
-
-        <SectionCard title={t('sections.contract')} description={t('sections.contractDescription')}>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.contractCode')}</label>
-              <Input
-                value={form.contractCode}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, contractCode: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium">{t('fields.contractName')}</label>
-              <Input
-                value={form.contractName}
-                onChange={(event) =>
-                  setForm((current) => ({ ...current, contractName: event.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-2 md:col-span-2">
-              <label className="text-sm font-medium">{t('fields.contractDescription')}</label>
-              <Textarea
-                rows={4}
-                value={form.contractDescription}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    contractDescription: event.target.value,
-                  }))
-                }
-              />
-            </div>
-            <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-2">
-              <div>
-                <div className="font-medium">{t('fields.autoGenerateContractDraft')}</div>
-                <div className="text-sm text-muted-foreground">
+
+          <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('fields.autoGenerateContractDraftDescription')
-                    : t('fields.existingContractSelected')}
+                    ? t('labels.enabled')
+                    : t('labels.disabled')}
                 </div>
               </div>
               <Switch
-                checked={form.contractId === 'none' && form.autoGenerateContractDraft}
+                checked={
+                  form.contractId === 'none' && form.autoGenerateContractDraft
+                }
                 disabled={form.contractId !== 'none'}
                 onCheckedChange={(checked) =>
                   setForm((current) => ({
@@ -670,20 +1370,207 @@ export function ProjectFormScreen({ projectId }: { projectId?: number }) {
               />
             </div>
           </div>
-        </SectionCard>
-      </div>
+        </div>
+      </section>
 
-      {projectId && isLoadingProject ? (
-        <div className="text-sm text-muted-foreground">{t('loading')}</div>
-      ) : 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.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>
 
-      {project ? (
-        <div className="text-xs text-muted-foreground">
-          {t('messages.currentContractStatus', {
-            status: formatEnumLabel(project.contractStatus),
-          })}
+          <div className="space-y-2">
+            {filteredAssignments.map((assignment) => {
+              const collaborator = collaborators.find(
+                (item) => item.id === assignment.collaboratorId
+              );
+
+              if (!collaborator) {
+                return null;
+              }
+
+              return (
+                <div
+                  key={assignment.collaboratorId}
+                  className="grid min-w-0 gap-2 rounded-lg border px-3 py-2 xl:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_110px_110px_auto]"
+                >
+                  <label className="flex cursor-pointer items-start gap-3 py-1">
+                    <Checkbox
+                      checked={assignment.selected}
+                      onCheckedChange={(checked) =>
+                        updateAssignment(assignment.collaboratorId, {
+                          selected: checked === true,
+                        })
+                      }
+                    />
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {collaborator.displayName}
+                      </div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {[
+                          collaborator.department,
+                          collaborator.title,
+                          collaborator.code,
+                        ]
+                          .filter(Boolean)
+                          .join(' • ') || commonT('labels.notAvailable')}
+                      </div>
+                    </div>
+                  </label>
+                  <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}
+                      disabled={!assignment.selected}
+                      onCheckedChange={(checked) =>
+                        updateAssignment(assignment.collaboratorId, {
+                          isBillable: checked,
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         </div>
-      ) : null}
+      </section>
+    </div>
+  );
+  const loadingState =
+    projectId && isLoadingProject ? (
+      <div className="text-sm text-muted-foreground">{t('loading')}</div>
+    ) : null;
+
+  const contractStatusState = project ? (
+    <div className="text-xs text-muted-foreground">
+      {t('messages.currentContractStatus', {
+        status: project.contractStatus
+          ? project.contractStatus
+          : commonT('labels.notAssigned'),
+      })}
+    </div>
+  ) : null;
+
+  if (isSheetMode) {
+    return (
+      <div className="mt-6 space-y-4 pb-6">
+        {formContent}
+        <div className="space-y-2 px-4">
+          {loadingState}
+          {contractStatusState}
+        </div>
+
+        <FormActions
+          sheet
+          cancelLabel={commonT('actions.cancel')}
+          onCancel={onCancel}
+          onSubmit={() => void onSubmit()}
+          submitIcon={<Save className="size-4" />}
+          submitLabel={commonT('actions.save')}
+          submitSize="lg"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(projectId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                href={
+                  projectId
+                    ? `/operations/projects/${projectId}`
+                    : '/operations/projects'
+                }
+              >
+                <ArrowLeft className="size-4" />
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={() => void onSubmit()}>
+              <Save className="size-4" />
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        }
+      />
+
+      {formContent}
+      <div className="space-y-2">
+        {loadingState}
+        {contractStatusState}
+      </div>
     </Page>
   );
 }