@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -1,5 +1,11 @@
 'use client';
 
+import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  Person,
+} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
 import { EmptyState, Page } from '@/components/entity-list';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -12,6 +18,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/command';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -43,6 +50,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import {
   Tooltip,
@@ -66,7 +74,7 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { PersonPicker } from '../../contact/_components/person-picker';
@@ -80,7 +88,6 @@ import type {
   OperationsCollaborator,
   OperationsContract,
   OperationsProjectDetails,
-  OperationsProjectRole,
 } from '../_lib/types';
 import { formatEnumLabel } from '../_lib/utils/format';
 import {
@@ -89,16 +96,39 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { ContractFormScreen } from './contract-form-screen';
-import { DepartmentPicker } from './department-picker';
 import { OperationsHeader } from './operations-header';
 
 const OPTION_PAGE_SIZE = 12;
 
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${photoId}`
+    : undefined;
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return '??';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
 type TeamAssignmentState = {
   collaboratorId: number;
   selected: boolean;
-  projectRoleId: string;
-  roleLabel: string;
   weeklyHours: string;
   allocationPercent: string;
   status: string;
@@ -191,8 +221,6 @@ function buildEmptyForm(
     teamAssignments: collaborators.map((collaborator) => ({
       collaboratorId: collaborator.id,
       selected: false,
-      projectRoleId: 'none',
-      roleLabel: '',
       weeklyHours: '',
       allocationPercent: '',
       status: 'active',
@@ -265,10 +293,6 @@ function toFormState(
       return {
         collaboratorId: collaborator.id,
         selected: Boolean(assignment),
-        projectRoleId: assignment?.projectRoleId
-          ? String(assignment.projectRoleId)
-          : 'none',
-        roleLabel: assignment?.roleLabel ?? '',
         weeklyHours:
           assignment?.weeklyHours !== null &&
           assignment?.weeklyHours !== undefined
@@ -641,10 +665,16 @@ export function ProjectFormScreen({
   const t = useTranslations('operations.ProjectFormPage');
   const commonT = useTranslations('operations.Common');
   const contractT = useTranslations('operations.ContractFormPage');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
   const [assignmentSearch, setAssignmentSearch] = useState('');
+  const personSheetModeRef = useRef<'create' | 'edit'>('edit');
+  const [personSheetOpen, setPersonSheetOpen] = useState(false);
+  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
+  const [createdManagerCollaborators, setCreatedManagerCollaborators] =
+    useState<OperationsCollaborator[]>([]);
   const isSheetMode = Boolean(onCancel);
   const isCreateMode = !projectId;
   const [codeAutoMode, setCodeAutoMode] = useState(isCreateMode);
@@ -684,8 +714,6 @@ export function ProjectFormScreen({
             z.object({
               collaboratorId: z.number(),
               selected: z.boolean(),
-              projectRoleId: z.string(),
-              roleLabel: z.string(),
               weeklyHours: z.string(),
               allocationPercent: z.string(),
               status: z.string(),
@@ -694,14 +722,8 @@ export function ProjectFormScreen({
             })
           )
           .superRefine((assignments, ctx) => {
-            assignments.forEach((assignment, index) => {
-              if (assignment.selected && !assignment.roleLabel.trim()) {
-                ctx.addIssue({
-                  code: z.ZodIssueCode.custom,
-                  message: t('messages.roleRequired'),
-                  path: [index, 'roleLabel'],
-                });
-              }
+            assignments.forEach((_assignment, _index) => {
+              // role validation removed
             });
           }),
       }),
@@ -747,6 +769,37 @@ export function ProjectFormScreen({
     [rawCollaborators]
   );
 
+  const createManagerCollaborator = async (values: Record<string, string>) => {
+    const displayName = values.displayName?.trim() ?? '';
+    const weeklyCapacityHours = parseNumberInput(
+      values.weeklyCapacityHours ?? ''
+    );
+
+    if (!displayName) {
+      return null;
+    }
+
+    const created = await mutateOperations<OperationsCollaborator>(
+      request,
+      '/operations/collaborators',
+      'POST',
+      {
+        displayName,
+        weeklyCapacityHours,
+        status: 'active',
+        autoGenerateContractDraft: false,
+      }
+    );
+
+    setCreatedManagerCollaborators((current) => {
+      const next = current.filter((item) => item.id !== created.id);
+      next.unshift(created);
+      return next;
+    });
+
+    return created;
+  };
+
   const { data: contracts = [], refetch: refetchContracts } = useQuery<
     OperationsContract[]
   >({
@@ -756,18 +809,32 @@ export function ProjectFormScreen({
       fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
   });
 
-  const { data: projectRoles = [], refetch: refetchProjectRoles } = useQuery<
-    OperationsProjectRole[]
-  >({
-    queryKey: ['operations-project-form-project-roles', currentLocaleCode],
-    enabled: access.isDirector,
-    staleTime: 0,
-    refetchOnMount: 'always',
-    queryFn: () =>
-      fetchOperations<OperationsProjectRole[]>(
-        request,
-        '/operations/project-roles'
-      ),
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    enabled: personSheetOpen,
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    enabled: personSheetOpen,
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
   });
 
   const { data: project, isLoading: isLoadingProject } =
@@ -806,6 +873,10 @@ export function ProjectFormScreen({
       byId.set(collaborator.id, collaborator);
     }
 
+    for (const collaborator of createdManagerCollaborators) {
+      byId.set(collaborator.id, collaborator);
+    }
+
     if (
       project?.managerCollaboratorId &&
       !byId.has(project.managerCollaboratorId)
@@ -834,7 +905,7 @@ export function ProjectFormScreen({
     }
 
     return Array.from(byId.values());
-  }, [collaborators, project]);
+  }, [collaborators, createdManagerCollaborators, project]);
 
   const availableContracts = useMemo(() => {
     if (!project?.relatedContract) {
@@ -867,47 +938,13 @@ export function ProjectFormScreen({
           .filter(Boolean)
           .join(' • '),
         avatarUrl:
-          typeof collaborator.personAvatarId === 'number' &&
-          collaborator.personAvatarId > 0
-            ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${collaborator.personAvatarId}`
-            : null,
+          getUserPhotoUrl(collaborator.userPhotoId) ??
+          getPersonAvatarUrl(collaborator.personAvatarId) ??
+          null,
       })),
     [availableCollaborators]
   );
 
-  const projectRoleOptions = useMemo(
-    () =>
-      projectRoles.map((role) => ({
-        id: role.id,
-        name: role.name,
-        code: role.code ?? null,
-        description: role.description ?? null,
-      })),
-    [projectRoles]
-  );
-
-  const createProjectRole = async (projectRoleName: string) => {
-    try {
-      const createdRole = await mutateOperations<OperationsProjectRole>(
-        request,
-        '/operations/project-roles',
-        'POST',
-        {
-          name: projectRoleName,
-        }
-      );
-
-      await refetchProjectRoles();
-      return createdRole;
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(error, t('messages.projectRoleSaveError'))
-      );
-      return null;
-    }
-  };
-
   const selectedAssignmentsCount = useMemo(
     () =>
       form.teamAssignments.filter((assignment) => assignment.selected).length,
@@ -993,11 +1030,6 @@ export function ProjectFormScreen({
         .filter((assignment) => assignment.selected)
         .map((assignment) => ({
           collaboratorId: assignment.collaboratorId,
-          projectRoleId:
-            assignment.projectRoleId === 'none'
-              ? null
-              : parseNumberInput(assignment.projectRoleId),
-          roleLabel: trimToNull(assignment.roleLabel),
           weeklyHours: parseNumberInput(assignment.weeklyHours),
           allocationPercent: parseNumberInput(assignment.allocationPercent),
           status: assignment.status,
@@ -1047,6 +1079,44 @@ export function ProjectFormScreen({
     showToastHandler?.('error', t('messages.requiredFields'));
   };
 
+  const resolvePersonDisplayName = (person?: Person | null) => {
+    const tradeName = person?.trade_name?.trim();
+    if (tradeName) {
+      return tradeName;
+    }
+
+    return person?.name?.trim() || '';
+  };
+
+  const handleOpenPersonEditSheet = async (personId?: number | null) => {
+    const targetPersonId =
+      personId && personId > 0
+        ? personId
+        : parseNumberInput(formMethods.getValues('clientPersonId'));
+
+    if (!targetPersonId) {
+      return;
+    }
+
+    try {
+      const response = await request<Person>({
+        url: `/person/${targetPersonId}`,
+        method: 'GET',
+      });
+      personSheetModeRef.current = 'edit';
+      setPersonToEdit(response.data);
+      setPersonSheetOpen(true);
+    } catch {
+      showToastHandler?.('error', t('messages.updateError'));
+    }
+  };
+
+  const handleOpenPersonCreateSheet = () => {
+    personSheetModeRef.current = 'create';
+    setPersonToEdit(null);
+    setPersonSheetOpen(true);
+  };
+
   const noAccessState = (
     <EmptyState
       icon={<FolderKanban className="size-12" />}
@@ -1171,6 +1241,12 @@ export function ProjectFormScreen({
                             personId ? String(personId) : ''
                           );
                         }}
+                        showEditButton
+                        editAriaLabel={commonT('actions.editPersonCrm')}
+                        onEditSelection={(personId) =>
+                          void handleOpenPersonEditSheet(personId)
+                        }
+                        onCreateNew={() => handleOpenPersonCreateSheet()}
                         personTypeFilter="all"
                         createType="company"
                       />
@@ -1245,20 +1321,100 @@ export function ProjectFormScreen({
               )}
             </p>
           </div>
-          <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-5">
+          <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-3">
             <div className="min-w-0 space-y-2">
               <FieldLabel label={commonT('labels.manager')} />
-              <SearchableSelect
-                label=""
-                value={form.managerCollaboratorId}
+              <EntityPicker
+                value={
+                  form.managerCollaboratorId === 'none'
+                    ? null
+                    : Number(form.managerCollaboratorId)
+                }
                 options={managerOptions}
+                getOptionValue={(option) => option.id}
+                getOptionLabel={(option) => option.title}
+                getOptionDescription={(option) =>
+                  option.description || undefined
+                }
+                renderOption={({ option }) => (
+                  <div className="flex min-w-0 items-center gap-2.5">
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarImage
+                        src={option.avatarUrl ?? undefined}
+                        alt={option.title}
+                      />
+                      <AvatarFallback className="text-[10px]">
+                        {getInitials(option.title)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0">
+                      <div className="truncate text-sm">{option.title}</div>
+                      {option.description ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                )}
+                renderSelectedValue={({ option, label }) =>
+                  option ? (
+                    <div className="flex min-w-0 items-center gap-2">
+                      <Avatar className="size-5 shrink-0">
+                        <AvatarImage
+                          src={option.avatarUrl ?? undefined}
+                          alt={option.title}
+                        />
+                        <AvatarFallback className="text-[10px]">
+                          {getInitials(option.title)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">{option.title}</span>
+                    </div>
+                  ) : (
+                    <span className="text-muted-foreground">{label}</span>
+                  )
+                }
                 placeholder={commonT('labels.notAssigned')}
                 searchPlaceholder={t('placeholders.managerSearch')}
-                emptyLabel={commonT('labels.notAssigned')}
+                emptySelectionLabel={commonT('labels.notAssigned')}
+                valueType="number"
+                clearable
+                allowEmptySelection
+                showCreateButton
+                entityLabel={commonT('labels.manager').toLowerCase()}
+                createActionLabel={`${commonT('actions.create')} ${commonT(
+                  'labels.manager'
+                ).toLowerCase()}`}
+                createTitle={`${commonT('actions.create')} ${commonT(
+                  'labels.manager'
+                ).toLowerCase()}`}
+                createDescription={collaboratorFormT(
+                  'sections.employmentInfoCreateDescription'
+                )}
+                createFields={[
+                  {
+                    name: 'displayName',
+                    label: collaboratorFormT('fields.displayName'),
+                    placeholder: collaboratorFormT('fields.displayName'),
+                    required: true,
+                  },
+                  {
+                    name: 'weeklyCapacityHours',
+                    label: collaboratorFormT('fields.weeklyCapacityHours'),
+                    placeholder: '40',
+                    type: 'number',
+                  },
+                ]}
+                mapSearchToCreateValues={(search) => ({
+                  displayName: search,
+                  weeklyCapacityHours: '40',
+                })}
+                onCreate={createManagerCollaborator}
                 onChange={(value) =>
                   setForm((current) => ({
                     ...current,
-                    managerCollaboratorId: value,
+                    managerCollaboratorId: value ? String(value) : 'none',
                   }))
                 }
               />
@@ -1296,9 +1452,6 @@ export function ProjectFormScreen({
                       <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>
@@ -1355,321 +1508,299 @@ export function ProjectFormScreen({
 
         {!isCreateMode ? (
           <>
-            <section className="space-y-3">
-              <div className="space-y-0.5">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            <Tabs defaultValue="financials" className="space-y-3">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="financials">
                   {t('sections.financials')}
-                </h3>
-                <p className="text-[11px] text-muted-foreground/80">
-                  {t('sections.financialsDescription')}
-                </p>
-              </div>
-              <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-4">
-                <div className="min-w-0 space-y-2">
-                  <FieldLabel label={commonT('labels.budget')} />
-                  <InputMoney
-                    value={
-                      form.budgetAmount === '' ? '' : Number(form.budgetAmount)
-                    }
-                    onValueChange={(value) =>
-                      setForm((current) => ({
-                        ...current,
-                        budgetAmount: value !== null ? String(value) : '',
-                      }))
-                    }
-                  />
-                </div>
-                <div className="min-w-0 space-y-2">
-                  <FieldLabel
-                    label={commonT('labels.monthlyHourCap')}
-                    hint={t('hints.monthlyHourCap')}
-                  />
-                  <Input
-                    type="text"
-                    inputMode="numeric"
-                    placeholder={t('placeholders.monthlyHourCap')}
-                    value={form.monthlyHourCap}
-                    onChange={(event) => {
-                      const raw = event.target.value.replace(/[^0-9]/g, '');
-                      setForm((current) => ({
-                        ...current,
-                        monthlyHourCap: raw,
-                      }));
-                    }}
-                  />
+                </TabsTrigger>
+                <TabsTrigger value="team">{t('sections.team')}</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="financials" 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="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 className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-4">
+                  <div className="min-w-0 space-y-2">
+                    <FieldLabel label={commonT('labels.budget')} />
+                    <InputMoney
+                      value={
+                        form.budgetAmount === ''
+                          ? ''
+                          : Number(form.budgetAmount)
+                      }
+                      onValueChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          budgetAmount: value !== null ? String(value) : '',
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="min-w-0 space-y-2">
+                    <FieldLabel
+                      label={commonT('labels.monthlyHourCap')}
+                      hint={t('hints.monthlyHourCap')}
+                    />
+                    <Input
+                      type="text"
+                      inputMode="numeric"
+                      placeholder={t('placeholders.monthlyHourCap')}
+                      value={form.monthlyHourCap}
+                      onChange={(event) => {
+                        const raw = event.target.value.replace(/[^0-9]/g, '');
+                        setForm((current) => ({
+                          ...current,
+                          monthlyHourCap: raw,
+                        }));
+                      }}
+                    />
+                  </div>
+                  <div className="min-w-0 space-y-2">
+                    <FieldLabel label={commonT('labels.billingModel')} />
+                    <Select
+                      value={form.billingModel}
+                      onValueChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          billingModel: value,
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="time_and_material">
+                          {t('options.billingModels.time_and_material')}
+                        </SelectItem>
+                        <SelectItem value="monthly_retainer">
+                          {t('options.billingModels.monthly_retainer')}
+                        </SelectItem>
+                        <SelectItem value="fixed_price">
+                          {t('options.billingModels.fixed_price')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="min-w-0 space-y-2">
+                    <FieldLabel
+                      label={commonT('labels.contract')}
+                      hint={t('hints.contract')}
+                    />
+                    <ContractSelectWithCreate
+                      label=""
+                      value={form.contractId}
+                      contracts={availableContracts}
+                      selectPlaceholder={commonT('labels.notAssigned')}
+                      searchPlaceholder={t('placeholders.contractSearch')}
+                      onChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          contractId: value,
+                        }))
+                      }
+                      onCreated={async (contract) => {
+                        await refetchContracts();
+                        setForm((current) => ({
+                          ...current,
+                          contractId: contract?.id
+                            ? String(contract.id)
+                            : current.contractId,
+                          billingModel:
+                            contract?.billingModel ?? current.billingModel,
+                          monthlyHourCap:
+                            contract?.monthlyHourCap !== null &&
+                            contract?.monthlyHourCap !== undefined
+                              ? String(contract.monthlyHourCap)
+                              : current.monthlyHourCap,
+                        }));
+                      }}
+                      initialValues={{
+                        code: form.code ? `PRJ-${form.code}` : '',
+                        name: form.name ? `${form.name} Service Agreement` : '',
+                        clientName: form.clientName,
+                        contractCategory: 'client',
+                        contractType: 'service_agreement',
+                        signatureStatus: 'not_started',
+                        billingModel: form.billingModel,
+                        budgetAmount: form.budgetAmount,
+                        monthlyHourCap: form.monthlyHourCap,
+                        startDate: form.startDate,
+                        endDate: form.endDate,
+                        description: form.summary,
+                        contentHtml: '',
+                      }}
+                    />
+                  </div>
                 </div>
-                <div className="min-w-0 space-y-2">
-                  <FieldLabel
-                    label={commonT('labels.contract')}
-                    hint={t('hints.contract')}
-                  />
-                  <ContractSelectWithCreate
-                    label=""
-                    value={form.contractId}
-                    contracts={availableContracts}
-                    selectPlaceholder={commonT('labels.notAssigned')}
-                    searchPlaceholder={t('placeholders.contractSearch')}
-                    onChange={(value) =>
-                      setForm((current) => ({ ...current, contractId: value }))
-                    }
-                    onCreated={async (contract) => {
-                      await refetchContracts();
-                      setForm((current) => ({
-                        ...current,
-                        contractId: contract?.id
-                          ? String(contract.id)
-                          : current.contractId,
-                        billingModel:
-                          contract?.billingModel ?? current.billingModel,
-                        monthlyHourCap:
-                          contract?.monthlyHourCap !== null &&
-                          contract?.monthlyHourCap !== undefined
-                            ? String(contract.monthlyHourCap)
-                            : current.monthlyHourCap,
-                      }));
-                    }}
-                    initialValues={{
-                      code: form.code ? `PRJ-${form.code}` : '',
-                      name: form.name ? `${form.name} Service Agreement` : '',
-                      clientName: form.clientName,
-                      contractCategory: 'client',
-                      contractType: 'service_agreement',
-                      signatureStatus: 'not_started',
-                      billingModel: form.billingModel,
-                      budgetAmount: form.budgetAmount,
-                      monthlyHourCap: form.monthlyHourCap,
-                      startDate: form.startDate,
-                      endDate: form.endDate,
-                      description: form.summary,
-                      contentHtml: '',
-                    }}
-                  />
-                </div>
-              </div>
-            </section>
-
-            <section className="space-y-3">
-              <div className="space-y-0.5">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('sections.team')}
-                </h3>
-                <p className="text-[11px] text-muted-foreground/80">
-                  {t('sections.teamDescription', {
-                    count: selectedAssignmentsCount,
-                  })}
-                </p>
-              </div>
-              <div className="space-y-3">
-                <div className="relative">
-                  <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    className="pl-9"
-                    value={assignmentSearch}
-                    placeholder={t('placeholders.assignmentSearch')}
-                    onChange={(event) =>
-                      setAssignmentSearch(event.target.value)
-                    }
-                  />
+              </TabsContent>
+
+              <TabsContent value="team" 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;
-                    }
+                  <div className="space-y-2">
+                    {filteredAssignments.map((assignment) => {
+                      const collaborator = availableCollaborators.find(
+                        (item) => item.id === assignment.collaboratorId
+                      );
 
-                    return (
-                      <div
-                        key={assignment.collaboratorId}
-                        className="grid min-w-0 gap-2 rounded-lg border px-3 py-2 xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1.2fr)_110px_110px]"
-                      >
-                        <label className="flex cursor-pointer items-start gap-3 py-1">
-                          <Checkbox
-                            checked={assignment.selected}
-                            onCheckedChange={(checked) =>
-                              updateAssignment(assignment.collaboratorId, {
-                                selected: checked === true,
-                              })
-                            }
-                          />
-                          <div className="min-w-0">
-                            <div className="truncate font-medium">
-                              {collaborator.displayName}
-                            </div>
-                            <div className="truncate text-xs text-muted-foreground">
-                              {[
-                                collaborator.department,
-                                collaborator.title,
-                                collaborator.code,
-                              ]
-                                .filter(Boolean)
-                                .join(' • ') || commonT('labels.notAvailable')}
-                            </div>
-                          </div>
-                        </label>
-                        <div className="space-y-1">
-                          <DepartmentPicker
-                            label=""
-                            value={assignment.roleLabel}
-                            options={projectRoleOptions}
-                            disabled={!assignment.selected}
-                            selectPlaceholder={t('placeholders.roleLabel')}
-                            createDescription={t('fields.roleLabel')}
-                            createPlaceholder={t(
-                              'placeholders.roleLabelCreate'
-                            )}
-                            onChange={(role) =>
-                              updateAssignment(assignment.collaboratorId, {
-                                projectRoleId: role.id
-                                  ? String(role.id)
-                                  : 'none',
-                                roleLabel: role.name,
-                              })
-                            }
-                            onCreate={createProjectRole}
-                          />
-                          {roleError?.message ? (
-                            <p className="text-sm text-destructive">
-                              {String(roleError.message)}
-                            </p>
-                          ) : null}
-                        </div>
-                        <Input
-                          className="h-9 mt-2 self-start"
-                          type="number"
-                          min="0"
-                          step="0.5"
-                          placeholder={t('fields.weeklyHours')}
-                          value={assignment.weeklyHours}
-                          disabled={!assignment.selected}
-                          onChange={(event) => {
-                            const hours = event.target.value;
-                            const updates: Partial<TeamAssignmentState> = {
-                              weeklyHours: hours,
-                            };
-                            const cap = collaborator.weeklyCapacityHours;
-                            if (cap && hours && Number(hours) > 0) {
-                              const pct = Math.round(
-                                (Number(hours) / cap) * 100
-                              );
-                              updates.allocationPercent = String(
-                                Math.min(pct, 100)
-                              );
-                            }
-                            updateAssignment(
-                              assignment.collaboratorId,
-                              updates
-                            );
-                          }}
-                        />
-                        <Input
-                          className="h-9 mt-2 self-start"
-                          type="text"
-                          inputMode="decimal"
-                          placeholder={t('fields.allocationPercent')}
-                          value={assignment.allocationPercent}
-                          disabled={!assignment.selected}
-                          onChange={(event) => {
-                            const pct = normalizePercentInput(
-                              event.target.value
-                            );
-                            const updates: Partial<TeamAssignmentState> = {
-                              allocationPercent: pct,
-                            };
-                            const cap = collaborator.weeklyCapacityHours;
-                            if (cap && pct && Number(pct) > 0) {
-                              const hours = Math.round(
-                                (Number(pct) / 100) * cap
-                              );
-                              updates.weeklyHours = String(hours);
-                            }
-                            updateAssignment(
-                              assignment.collaboratorId,
-                              updates
-                            );
-                          }}
-                        />
-                        <div className="flex items-center gap-2 xl:col-span-4">
-                          <div className="flex-1">
-                            <label className="text-xs text-muted-foreground">
-                              {t('fields.assignmentStartDate')}
-                            </label>
-                            <Input
-                              className="h-9"
-                              type="date"
-                              value={assignment.startDate}
-                              disabled={!assignment.selected}
-                              onChange={(event) =>
+                      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,2fr)_110px_110px]"
+                        >
+                          <label className="flex cursor-pointer items-start gap-3 py-1">
+                            <Checkbox
+                              checked={assignment.selected}
+                              onCheckedChange={(checked) =>
                                 updateAssignment(assignment.collaboratorId, {
-                                  startDate: event.target.value,
+                                  selected: checked === true,
                                 })
                               }
                             />
-                          </div>
-                          <div className="flex-1">
-                            <label className="text-xs text-muted-foreground">
-                              {t('fields.assignmentEndDate')}
-                            </label>
-                            <Input
-                              className="h-9"
-                              type="date"
-                              value={assignment.endDate}
-                              disabled={!assignment.selected}
-                              onChange={(event) =>
-                                updateAssignment(assignment.collaboratorId, {
-                                  endDate: event.target.value,
-                                })
+                            <div 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 mt-2 self-start"
+                            type="number"
+                            min="0"
+                            step="0.5"
+                            placeholder={t('fields.weeklyHours')}
+                            value={assignment.weeklyHours}
+                            disabled={!assignment.selected}
+                            onChange={(event) => {
+                              const hours = event.target.value;
+                              const updates: Partial<TeamAssignmentState> = {
+                                weeklyHours: hours,
+                              };
+                              const cap = collaborator.weeklyCapacityHours;
+                              if (cap && hours && Number(hours) > 0) {
+                                const pct = Math.round(
+                                  (Number(hours) / cap) * 100
+                                );
+                                updates.allocationPercent = String(
+                                  Math.min(pct, 100)
+                                );
                               }
-                            />
+                              updateAssignment(
+                                assignment.collaboratorId,
+                                updates
+                              );
+                            }}
+                          />
+                          <Input
+                            className="h-9 mt-2 self-start"
+                            type="text"
+                            inputMode="decimal"
+                            placeholder={t('fields.allocationPercent')}
+                            value={assignment.allocationPercent}
+                            disabled={!assignment.selected}
+                            onChange={(event) => {
+                              const pct = normalizePercentInput(
+                                event.target.value
+                              );
+                              const updates: Partial<TeamAssignmentState> = {
+                                allocationPercent: pct,
+                              };
+                              const cap = collaborator.weeklyCapacityHours;
+                              if (cap && pct && Number(pct) > 0) {
+                                const hours = Math.round(
+                                  (Number(pct) / 100) * cap
+                                );
+                                updates.weeklyHours = String(hours);
+                              }
+                              updateAssignment(
+                                assignment.collaboratorId,
+                                updates
+                              );
+                            }}
+                          />
+                          <div className="flex items-center gap-2 xl:col-span-4">
+                            <div className="flex-1">
+                              <label className="text-xs text-muted-foreground">
+                                {t('fields.assignmentStartDate')}
+                              </label>
+                              <Input
+                                className="h-9"
+                                type="date"
+                                value={assignment.startDate}
+                                disabled={!assignment.selected}
+                                onChange={(event) =>
+                                  updateAssignment(assignment.collaboratorId, {
+                                    startDate: event.target.value,
+                                  })
+                                }
+                              />
+                            </div>
+                            <div className="flex-1">
+                              <label className="text-xs text-muted-foreground">
+                                {t('fields.assignmentEndDate')}
+                              </label>
+                              <Input
+                                className="h-9"
+                                type="date"
+                                value={assignment.endDate}
+                                disabled={!assignment.selected}
+                                onChange={(event) =>
+                                  updateAssignment(assignment.collaboratorId, {
+                                    endDate: event.target.value,
+                                  })
+                                }
+                              />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    );
-                  })}
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            </section>
+              </TabsContent>
+            </Tabs>
           </>
         ) : (
           <section className="space-y-3 rounded-lg border border-dashed bg-muted/20 px-4 py-4">
@@ -1701,6 +1832,43 @@ export function ProjectFormScreen({
     </div>
   ) : null;
 
+  const personSheet = (
+    <PersonFormSheet
+      open={personSheetOpen}
+      person={personToEdit}
+      contactTypes={contactTypes}
+      documentTypes={documentTypes}
+      onOpenChange={(nextOpen) => {
+        setPersonSheetOpen(nextOpen);
+        if (!nextOpen) {
+          setPersonToEdit(null);
+        }
+      }}
+      onSuccess={(person) => {
+        const personLabel = resolvePersonDisplayName(person);
+
+        if (personSheetModeRef.current === 'create' && person?.id) {
+          formMethods.setValue('clientPersonId', String(person.id), {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+          });
+        }
+
+        if (personLabel) {
+          formMethods.setValue('clientName', personLabel, {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+          });
+        }
+
+        personSheetModeRef.current = 'edit';
+      }}
+      allowedTypes={['company']}
+    />
+  );
+
   if (isSheetMode) {
     return (
       <div className="mt-6 space-y-4 pb-6">
@@ -1721,6 +1889,8 @@ export function ProjectFormScreen({
           submitLabel={commonT('actions.save')}
           submitSize="lg"
         />
+
+        {personSheet}
       </div>
     );
   }
@@ -1764,6 +1934,8 @@ export function ProjectFormScreen({
         {loadingState}
         {contractStatusState}
       </div>
+
+      {personSheet}
     </Page>
   );
 }