@hed-hog/contact 0.0.279 → 0.0.285

package/hedhog/frontend/app/person/_components/person-form-sheet.tsx.ejs

@@ -1,6 +1,14 @@
 'use client';
 
 import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -136,6 +144,60 @@ type EditablePersonDocument = Omit<PersonDocument, 'document_type_id'> & {
   document_type_id: number | null;
 };
 
+type DuplicateReason = 'email' | 'phone' | 'document';
+
+type DuplicateMatch = {
+  id: number;
+  name: string;
+  reasons: DuplicateReason[];
+};
+
+type PersonSubmitPayload = {
+  name: string;
+  type: 'individual' | 'company';
+  status: 'active' | 'inactive';
+  avatar_id: number | null;
+  birth_date: string | null;
+  gender: PersonGender | null;
+  job_title: string | null;
+  employer_company_id: number | null;
+  owner_user_id: number | null;
+  source: PersonSource | null;
+  lifecycle_stage: PersonLifecycleStage | null;
+  next_action_at: string | null;
+  trade_name: string | null;
+  foundation_date: string | null;
+  legal_nature: string | null;
+  contacts: Array<{
+    id?: number;
+    value: string;
+    is_primary: boolean;
+    contact_type_id: number;
+  }>;
+  addresses: Array<{
+    id?: number;
+    line1: string;
+    line2: string;
+    city: string;
+    state: string;
+    country_code: string;
+    postal_code: string;
+    is_primary: boolean;
+    address_type: PersonAddress['address_type'];
+  }>;
+  documents: Array<{
+    id?: number;
+    value: string;
+    document_type_id: number;
+  }>;
+};
+
+type PendingDuplicateSubmission = {
+  payload: PersonSubmitPayload;
+  normalizedType: 'individual' | 'company';
+  matches: DuplicateMatch[];
+};
+
 function createClientId(prefix: string) {
   return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -431,6 +493,14 @@ export function PersonFormSheet({
     useState<string>('/placeholder.png');
   const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
   const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
+  const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const [pendingDuplicateSubmission, setPendingDuplicateSubmission] =
+    useState<PendingDuplicateSubmission | null>(null);
+  const [duplicateTargetPersonId, setDuplicateTargetPersonId] = useState<
+    number | null
+  >(null);
+  const [isResolvingDuplicateAction, setIsResolvingDuplicateAction] =
+    useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const hasSavedChangesRef = useRef(false);
   const contactValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
@@ -545,6 +615,10 @@ export function PersonFormSheet({
     setAddressesOpen(true);
     setDocumentsOpen(true);
     setLoadingCEP({});
+    setDuplicateDialogOpen(false);
+    setPendingDuplicateSubmission(null);
+    setDuplicateTargetPersonId(null);
+    setIsResolvingDuplicateAction(false);
   }, [allowCompanyRegistration, open, person, reset, user?.id]);
 
   const getPersonInitials = (name: string) =>
@@ -1051,168 +1125,291 @@ export function PersonFormSheet({
     setLoadingCEP((previous) => ({ ...previous, [clientId]: false }));
   };
 
+  const getDuplicateReasonLabel = (reason: DuplicateReason) => {
+    if (reason === 'email') return t('columnEmail');
+    if (reason === 'phone') return t('columnPhone');
+    return t('documentValue');
+  };
+
+  const buildSubmitPayload = (
+    values: PersonFormValues,
+    normalizedType: 'individual' | 'company'
+  ): PersonSubmitPayload => ({
+    name: values.name.trim(),
+    type: normalizedType,
+    status: values.status,
+    avatar_id: avatarId,
+    birth_date: values.birth_date ? values.birth_date.toISOString() : null,
+    gender: values.gender || null,
+    job_title:
+      normalizedType === 'individual' ? values.job_title?.trim() || null : null,
+    employer_company_id:
+      normalizedType === 'individual' && allowCompanyRegistration
+        ? (values.employer_company_id ?? null)
+        : null,
+    owner_user_id: values.owner_user_id ?? null,
+    source: values.source || null,
+    lifecycle_stage: values.lifecycle_stage || 'new',
+    next_action_at: values.next_action_at
+      ? new Date(values.next_action_at).toISOString()
+      : null,
+    trade_name: values.trade_name?.trim() || null,
+    foundation_date: values.foundation_date
+      ? values.foundation_date.toISOString()
+      : null,
+    legal_nature: values.legal_nature?.trim() || null,
+    contacts: contacts
+      .filter(
+        (contact) =>
+          contact.value.trim().length > 0 && !!contact.contact_type_id
+      )
+      .map((contact) => ({
+        id: contact.id,
+        value: contact.value.trim(),
+        is_primary: contact.is_primary,
+        contact_type_id: contact.contact_type_id as number,
+      })),
+    addresses: addresses
+      .filter(
+        (address) =>
+          address.line1.trim().length > 0 ||
+          address.city.trim().length > 0 ||
+          address.state.trim().length > 0 ||
+          (address.postal_code || '').trim().length > 0
+      )
+      .map((address) => ({
+        id: address.id,
+        line1: address.line1.trim(),
+        line2: address.line2?.trim() || '',
+        city: address.city.trim(),
+        state: address.state.trim(),
+        country_code: address.country_code || 'BRA',
+        postal_code: address.postal_code?.trim() || '',
+        is_primary: address.is_primary,
+        address_type: address.address_type,
+      })),
+    documents: documents
+      .filter(
+        (document) =>
+          document.value.trim().length > 0 && !!document.document_type_id
+      )
+      .map((document) => ({
+        id: document.id,
+        value: document.value.trim(),
+        document_type_id: document.document_type_id as number,
+      })),
+  });
+
+  const findDuplicates = async (payload: PersonSubmitPayload) => {
+    const primaryEmail = payload.contacts.find((contact) =>
+      ['EMAIL'].includes(getContactTypeCode(contact.contact_type_id))
+    );
+    const primaryPhone = payload.contacts.find((contact) =>
+      ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
+        getContactTypeCode(contact.contact_type_id)
+      )
+    );
+    const firstDocument = payload.documents[0];
+
+    if (!primaryEmail && !primaryPhone && !firstDocument) {
+      return [] as DuplicateMatch[];
+    }
+
+    const duplicateParams = new URLSearchParams();
+    if (person?.id) duplicateParams.set('person_id', String(person.id));
+    if (primaryEmail?.value) duplicateParams.set('email', primaryEmail.value);
+    if (primaryPhone?.value) duplicateParams.set('phone', primaryPhone.value);
+    if (firstDocument?.value && firstDocument?.document_type_id) {
+      duplicateParams.set('document_value', firstDocument.value);
+      duplicateParams.set(
+        'document_type_id',
+        String(firstDocument.document_type_id)
+      );
+    }
+
+    if (duplicateParams.size === 0) {
+      return [] as DuplicateMatch[];
+    }
+
+    const duplicateResponse = await request<{
+      hasDuplicates: boolean;
+      matches: DuplicateMatch[];
+    }>({
+      url: `/person/duplicates?${duplicateParams.toString()}`,
+      method: 'GET',
+    });
+
+    if (!duplicateResponse.data.hasDuplicates) {
+      return [] as DuplicateMatch[];
+    }
+
+    return duplicateResponse.data.matches || [];
+  };
+
+  const persistPersonPayload = async (
+    payload: PersonSubmitPayload,
+    normalizedType: 'individual' | 'company',
+    options?: { showSuccessToast?: boolean }
+  ) => {
+    const showSuccessToast = options?.showSuccessToast !== false;
+
+    if (person) {
+      await request({
+        url: `/person/${person.id}`,
+        method: 'PATCH',
+        data: payload,
+      });
+
+      setPersistedAvatarId(avatarId);
+
+      if (showSuccessToast) {
+        toast.success(t('updateSuccess'));
+      }
+
+      return person.id;
+    }
+
+    const createResponse = await request<CreatePersonPayload>({
+      url: '/person',
+      method: 'POST',
+      data: {
+        name: payload.name,
+        type: normalizedType,
+        status: payload.status,
+        avatar_id: payload.avatar_id,
+        birth_date: payload.birth_date,
+        gender: payload.gender,
+        job_title: payload.job_title,
+        employer_company_id: payload.employer_company_id,
+        trade_name: payload.trade_name,
+        foundation_date: payload.foundation_date,
+        legal_nature: payload.legal_nature,
+      },
+    });
+
+    const personId = Number(
+      createResponse?.data?.id ?? createResponse?.data?.data?.id
+    );
+
+    if (!personId) {
+      throw new Error('Could not resolve created person id');
+    }
+
+    setPersistedAvatarId(avatarId);
+    await request({
+      url: `/person/${personId}`,
+      method: 'PATCH',
+      data: payload,
+    });
+
+    if (showSuccessToast) {
+      toast.success(t('createSuccess'));
+    }
+
+    return personId;
+  };
+
+  const finalizeSuccess = () => {
+    hasSavedChangesRef.current = true;
+    setPendingDuplicateSubmission(null);
+    setDuplicateTargetPersonId(null);
+    setDuplicateDialogOpen(false);
+    handleSheetOpenChange(false);
+    onSuccess();
+  };
+
+  const handleContinueWithDuplicate = async () => {
+    if (!pendingDuplicateSubmission) return;
+
+    try {
+      setIsResolvingDuplicateAction(true);
+      await persistPersonPayload(
+        pendingDuplicateSubmission.payload,
+        pendingDuplicateSubmission.normalizedType
+      );
+      finalizeSuccess();
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : null;
+      toast.error(message || (isEditing ? t('updateError') : t('createError')));
+    } finally {
+      setIsResolvingDuplicateAction(false);
+    }
+  };
+
+  const handleMergeWithDuplicate = async () => {
+    if (!pendingDuplicateSubmission || !duplicateTargetPersonId) {
+      toast.error(t('duplicateSelectTarget'));
+      return;
+    }
+
+    try {
+      setIsResolvingDuplicateAction(true);
+
+      const sourcePersonId = await persistPersonPayload(
+        pendingDuplicateSubmission.payload,
+        pendingDuplicateSubmission.normalizedType,
+        { showSuccessToast: false }
+      );
+
+      await request({
+        url: '/person/merge',
+        method: 'POST',
+        data: {
+          source_person_id: sourcePersonId,
+          target_person_id: duplicateTargetPersonId,
+          strategy: 'contact_only',
+        },
+      });
+
+      const target = pendingDuplicateSubmission.matches.find(
+        (item) => item.id === duplicateTargetPersonId
+      );
+
+      toast.success(
+        t('duplicateMergeSuccess', {
+          name: target?.name || '#',
+        })
+      );
+
+      finalizeSuccess();
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : null;
+      toast.error(message || t('duplicateMergeError'));
+    } finally {
+      setIsResolvingDuplicateAction(false);
+    }
+  };
+
   const handleFormSubmit = async (values: PersonFormValues) => {
     try {
       setIsSubmitting(true);
+
       const normalizedType = allowCompanyRegistration
         ? values.type
         : 'individual';
 
-      const payload = {
-        name: values.name.trim(),
-        type: normalizedType,
-        status: values.status,
-        avatar_id: avatarId,
-        birth_date: values.birth_date ? values.birth_date.toISOString() : null,
-        gender: values.gender || null,
-        job_title:
-          normalizedType === 'individual'
-            ? values.job_title?.trim() || null
-            : null,
-        employer_company_id:
-          normalizedType === 'individual' && allowCompanyRegistration
-            ? (values.employer_company_id ?? null)
-            : null,
-        trade_name: values.trade_name?.trim() || null,
-        foundation_date: values.foundation_date
-          ? values.foundation_date.toISOString()
-          : null,
-        legal_nature: values.legal_nature?.trim() || null,
-        contacts: contacts
-          .filter(
-            (contact) =>
-              contact.value.trim().length > 0 && !!contact.contact_type_id
-          )
-          .map((contact) => ({
-            id: contact.id,
-            value: contact.value.trim(),
-            is_primary: contact.is_primary,
-            contact_type_id: contact.contact_type_id as number,
-          })),
-        addresses: addresses
-          .filter(
-            (address) =>
-              address.line1.trim().length > 0 ||
-              address.city.trim().length > 0 ||
-              address.state.trim().length > 0 ||
-              (address.postal_code || '').trim().length > 0
-          )
-          .map((address) => ({
-            id: address.id,
-            line1: address.line1.trim(),
-            line2: address.line2?.trim() || '',
-            city: address.city.trim(),
-            state: address.state.trim(),
-            country_code: address.country_code || 'BRA',
-            postal_code: address.postal_code?.trim() || '',
-            is_primary: address.is_primary,
-            address_type: address.address_type,
-          })),
-        documents: documents
-          .filter(
-            (document) =>
-              document.value.trim().length > 0 && !!document.document_type_id
-          )
-          .map((document) => ({
-            id: document.id,
-            value: document.value.trim(),
-            document_type_id: document.document_type_id as number,
-          })),
-      };
-
-      const primaryEmail = payload.contacts.find((contact) =>
-        ['EMAIL'].includes(getContactTypeCode(contact.contact_type_id))
-      );
-      const primaryPhone = payload.contacts.find((contact) =>
-        ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
-          getContactTypeCode(contact.contact_type_id)
-        )
-      );
-      const firstDocument = payload.documents[0];
-
-      if (primaryEmail || primaryPhone || firstDocument) {
-        const duplicateParams = new URLSearchParams();
-        if (person?.id) duplicateParams.set('person_id', String(person.id));
-        if (primaryEmail?.value)
-          duplicateParams.set('email', primaryEmail.value);
-        if (primaryPhone?.value)
-          duplicateParams.set('phone', primaryPhone.value);
-        if (firstDocument?.value && firstDocument?.document_type_id) {
-          duplicateParams.set('document_value', firstDocument.value);
-          duplicateParams.set(
-            'document_type_id',
-            String(firstDocument.document_type_id)
-          );
-        }
-
-        if (duplicateParams.size > 0) {
-          const duplicateResponse = await request<{
-            hasDuplicates: boolean;
-            matches: Array<{ id: number; name: string; reasons: string[] }>;
-          }>({
-            url: `/person/duplicates?${duplicateParams.toString()}`,
-            method: 'GET',
-          });
-
-          if (duplicateResponse.data.hasDuplicates) {
-            toast.warning(
-              t('duplicateWarning', {
-                names: duplicateResponse.data.matches
-                  .map((item) => item.name)
-                  .join(', '),
-              })
-            );
-          }
-        }
-      }
+      const payload = buildSubmitPayload(values, normalizedType);
+      const matches = await findDuplicates(payload);
 
-      if (person) {
-        await request({
-          url: `/person/${person.id}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        setPersistedAvatarId(avatarId);
-        toast.success(t('updateSuccess'));
-      } else {
-        const createResponse = await request<CreatePersonPayload>({
-          url: '/person',
-          method: 'POST',
-          data: {
-            name: payload.name,
-            type: normalizedType,
-            status: payload.status,
-            avatar_id: payload.avatar_id,
-            birth_date: payload.birth_date,
-            gender: payload.gender,
-            job_title: payload.job_title,
-            employer_company_id: payload.employer_company_id,
-            trade_name: payload.trade_name,
-            foundation_date: payload.foundation_date,
-            legal_nature: payload.legal_nature,
-          },
+      if (matches.length > 0) {
+        setPendingDuplicateSubmission({
+          payload,
+          normalizedType,
+          matches,
         });
+        setDuplicateTargetPersonId(matches[0]?.id || null);
+        setDuplicateDialogOpen(true);
 
-        const personId = Number(
-          createResponse?.data?.id ?? createResponse?.data?.data?.id
+        toast.warning(
+          t('duplicateWarning', {
+            names: matches.map((item) => item.name).join(', '),
+          })
         );
-
-        if (!personId) {
-          throw new Error('Could not resolve created person id');
-        }
-
-        setPersistedAvatarId(avatarId);
-        await request({
-          url: `/person/${personId}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        toast.success(t('createSuccess'));
+        return;
       }
 
-      hasSavedChangesRef.current = true;
-      handleSheetOpenChange(false);
-      onSuccess();
+      await persistPersonPayload(payload, normalizedType);
+      finalizeSuccess();
     } catch (error: unknown) {
       const message = error instanceof Error ? error.message : null;
       toast.error(message || (isEditing ? t('updateError') : t('createError')));
@@ -1222,1056 +1419,1196 @@ export function PersonFormSheet({
   };
 
   return (
-    <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-      <SheetContent className="flex h-full w-full max-w-full flex-col overflow-hidden p-0 lg:max-w-4xl xl:max-w-5xl">
-        <SheetHeader className="shrink-0 border-b p-4">
-          <div className="flex items-center gap-3">
-            <div
-              className={cn(
-                'flex h-10 w-10 items-center justify-center rounded-full',
-                watchType === 'individual'
-                  ? 'bg-blue-500/10'
-                  : 'bg-amber-500/10'
-              )}
-            >
-              {watchType === 'individual' ? (
-                <User className="h-5 w-5 text-blue-600" />
-              ) : (
-                <Building2 className="h-5 w-5 text-amber-600" />
-              )}
-            </div>
-            <div>
-              <SheetTitle>
-                {isEditing ? t('sheetEditTitle') : t('sheetCreateTitle')}
-              </SheetTitle>
-              <SheetDescription>
-                {isEditing
-                  ? t('sheetEditDescription')
-                  : allowCompanyRegistration
-                    ? t('sheetCreateDescription')
-                    : t('sheetCreateDescriptionIndividualOnly')}
-              </SheetDescription>
+    <>
+      <Sheet open={open} onOpenChange={handleSheetOpenChange}>
+        <SheetContent className="flex h-full w-full max-w-full flex-col overflow-hidden p-0 lg:max-w-4xl xl:max-w-5xl">
+          <SheetHeader className="shrink-0 border-b p-4">
+            <div className="flex items-center gap-3">
+              <div
+                className={cn(
+                  'flex h-10 w-10 items-center justify-center rounded-full',
+                  watchType === 'individual'
+                    ? 'bg-blue-500/10'
+                    : 'bg-amber-500/10'
+                )}
+              >
+                {watchType === 'individual' ? (
+                  <User className="h-5 w-5 text-blue-600" />
+                ) : (
+                  <Building2 className="h-5 w-5 text-amber-600" />
+                )}
+              </div>
+              <div>
+                <SheetTitle>
+                  {isEditing ? t('sheetEditTitle') : t('sheetCreateTitle')}
+                </SheetTitle>
+                <SheetDescription>
+                  {isEditing
+                    ? t('sheetEditDescription')
+                    : allowCompanyRegistration
+                      ? t('sheetCreateDescription')
+                      : t('sheetCreateDescriptionIndividualOnly')}
+                </SheetDescription>
+              </div>
             </div>
-          </div>
-        </SheetHeader>
+          </SheetHeader>
 
-        <div className="flex-1 overflow-y-auto">
-          <form
-            id="person-form"
-            onSubmit={handleSubmit(handleFormSubmit)}
-            className="space-y-4 px-4 [&_button[role='combobox']]:text-xs [&_button[role='combobox']_span]:truncate [&_input]:text-xs"
-          >
-            <div className="space-y-3">
-              <h3 className="text-sm font-semibold tracking-wider text-muted-foreground uppercase">
-                {t('dialogBasicInformationTitle')}
-              </h3>
-
-              <div className="flex items-start gap-3">
-                <Avatar className="h-16 w-16 border rounded-md">
-                  <AvatarImage
-                    src={avatarPreviewUrl}
-                    alt={watch('name') || t('name')}
-                    className="rounded-md object-cover"
-                  />
-                  <AvatarFallback className="text-sm font-semibold uppercase">
-                    {getPersonInitials(watch('name') || person?.name || 'NA') ||
-                      'NA'}
-                  </AvatarFallback>
-                </Avatar>
-
-                <div className="min-w-0 flex-1 space-y-2">
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={(event) => {
-                      const file = event.target.files?.[0];
-                      if (!file) return;
-                      void handleAvatarUpload(file);
-                    }}
-                  />
+          <div className="flex-1 overflow-y-auto">
+            <form
+              id="person-form"
+              onSubmit={handleSubmit(handleFormSubmit)}
+              className="space-y-4 px-4 [&_button[role='combobox']]:text-xs [&_button[role='combobox']_span]:truncate [&_input]:text-xs"
+            >
+              <div className="space-y-3">
+                <h3 className="text-sm font-semibold tracking-wider text-muted-foreground uppercase">
+                  {t('dialogBasicInformationTitle')}
+                </h3>
+
+                <div className="flex items-start gap-3">
+                  <Avatar className="h-16 w-16 border rounded-md">
+                    <AvatarImage
+                      src={avatarPreviewUrl}
+                      alt={watch('name') || t('name')}
+                      className="rounded-md object-cover"
+                    />
+                    <AvatarFallback className="text-sm font-semibold uppercase">
+                      {getPersonInitials(
+                        watch('name') || person?.name || 'NA'
+                      ) || 'NA'}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div className="min-w-0 flex-1 space-y-2">
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={(event) => {
+                        const file = event.target.files?.[0];
+                        if (!file) return;
+                        void handleAvatarUpload(file);
+                      }}
+                    />
 
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={handleSelectAvatar}
-                      disabled={isUploadingAvatar}
-                    >
-                      {isUploadingAvatar ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      ) : (
-                        <Upload className="mr-2 h-4 w-4" />
-                      )}
-                      {avatarId ? t('avatarReplace') : t('avatarUpload')}
-                    </Button>
-                    {avatarId || isUploadingAvatar ? (
+                    <div className="flex flex-wrap gap-2">
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
-                        className="text-red-600 hover:text-red-700"
-                        onClick={() => void handleRemoveAvatar()}
-                        disabled={!avatarId || isUploadingAvatar}
+                        onClick={handleSelectAvatar}
+                        disabled={isUploadingAvatar}
                       >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        {t('avatarRemove')}
+                        {isUploadingAvatar ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <Upload className="mr-2 h-4 w-4" />
+                        )}
+                        {avatarId ? t('avatarReplace') : t('avatarUpload')}
                       </Button>
-                    ) : null}
-                  </div>
-
-                  <p className="text-xs text-muted-foreground">
-                    {t('avatarGuidelines')}
-                  </p>
-
-                  {isUploadingAvatar ? (
-                    <div className="space-y-1">
-                      <Progress value={avatarUploadProgress} className="h-2" />
-                      <p className="text-xs text-muted-foreground">
-                        {t('avatarUploadingProgress', {
-                          progress: avatarUploadProgress,
-                        })}
-                      </p>
+                      {avatarId || isUploadingAvatar ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="text-red-600 hover:text-red-700"
+                          onClick={() => void handleRemoveAvatar()}
+                          disabled={!avatarId || isUploadingAvatar}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t('avatarRemove')}
+                        </Button>
+                      ) : null}
                     </div>
-                  ) : null}
-                </div>
-              </div>
 
-              <div className="space-y-1.5">
-                <Label className="text-xs font-medium">
-                  {t('name')} <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  placeholder={t('namePlaceholder')}
-                  {...register('name')}
-                  className={cn('h-9', errors.name && 'border-destructive')}
-                />
-                {errors.name ? (
-                  <p className="text-xs text-destructive">
-                    {errors.name.message}
-                  </p>
-                ) : null}
-              </div>
+                    <p className="text-xs text-muted-foreground">
+                      {t('avatarGuidelines')}
+                    </p>
 
-              <div
-                className={cn(
-                  'grid gap-3',
-                  watchType === 'individual'
-                    ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'
-                    : 'grid-cols-1 sm:grid-cols-2'
-                )}
-              >
-                {allowCompanyRegistration ? (
-                  <div className="space-y-1.5">
-                    <Label className="text-xs font-medium">{t('type')}</Label>
-                    <Select
-                      value={watch('type')}
-                      onValueChange={(value: 'individual' | 'company') =>
-                        setValue('type', value)
-                      }
-                    >
-                      <SelectTrigger className="h-9 w-full min-w-0">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="individual">
-                          {t('individual')}
-                        </SelectItem>
-                        {canUseCompanyType ? (
-                          <SelectItem value="company">
-                            {t('company')}
-                          </SelectItem>
-                        ) : null}
-                      </SelectContent>
-                    </Select>
+                    {isUploadingAvatar ? (
+                      <div className="space-y-1">
+                        <Progress
+                          value={avatarUploadProgress}
+                          className="h-2"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          {t('avatarUploadingProgress', {
+                            progress: avatarUploadProgress,
+                          })}
+                        </p>
+                      </div>
+                    ) : null}
                   </div>
-                ) : null}
-                <div className="space-y-1.5">
-                  <Label className="text-xs font-medium">{t('status')}</Label>
-                  <Select
-                    value={watch('status')}
-                    onValueChange={(value: 'active' | 'inactive') =>
-                      setValue('status', value)
-                    }
-                  >
-                    <SelectTrigger className="h-9 w-full min-w-0">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="active">{t('active')}</SelectItem>
-                      <SelectItem value="inactive">{t('inactive')}</SelectItem>
-                    </SelectContent>
-                  </Select>
                 </div>
 
-                {watchType === 'individual' ? (
-                  <>
-                    <div className="space-y-1.5">
-                      <Label className="text-xs font-medium">
-                        {t('birthDate')}
-                      </Label>
-                      <DatePickerWithYearMonth
-                        date={watch('birth_date') || undefined}
-                        onSelect={(date) =>
-                          setValue('birth_date', date || null)
-                        }
-                        maxDate={new Date()}
-                        placeholder={t('selectDate')}
-                        localeCode={currentLocaleCode}
-                      />
-                    </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium">
+                    {t('name')} <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    placeholder={t('namePlaceholder')}
+                    {...register('name')}
+                    className={cn('h-9', errors.name && 'border-destructive')}
+                  />
+                  {errors.name ? (
+                    <p className="text-xs text-destructive">
+                      {errors.name.message}
+                    </p>
+                  ) : null}
+                </div>
 
+                <div
+                  className={cn(
+                    'grid gap-3',
+                    watchType === 'individual'
+                      ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'
+                      : 'grid-cols-1 sm:grid-cols-2'
+                  )}
+                >
+                  {allowCompanyRegistration ? (
                     <div className="space-y-1.5">
-                      <Label className="text-xs font-medium">
-                        {t('gender')}
-                      </Label>
+                      <Label className="text-xs font-medium">{t('type')}</Label>
                       <Select
-                        value={watch('gender') || ''}
-                        onValueChange={(value: PersonGender) =>
-                          setValue('gender', value)
+                        value={watch('type')}
+                        onValueChange={(value: 'individual' | 'company') =>
+                          setValue('type', value)
                         }
                       >
                         <SelectTrigger className="h-9 w-full min-w-0">
-                          <SelectValue placeholder={t('selectGender')} />
+                          <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="male">
-                            {t('genderMale')}
-                          </SelectItem>
-                          <SelectItem value="female">
-                            {t('genderFemale')}
-                          </SelectItem>
-                          <SelectItem value="other">
-                            {t('genderOther')}
+                          <SelectItem value="individual">
+                            {t('individual')}
                           </SelectItem>
+                          {canUseCompanyType ? (
+                            <SelectItem value="company">
+                              {t('company')}
+                            </SelectItem>
+                          ) : null}
                         </SelectContent>
                       </Select>
                     </div>
-                  </>
-                ) : null}
-              </div>
-
-              <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-                <div className="space-y-1.5">
-                  <Label className="text-xs font-medium">{t('owner')}</Label>
-                  <Select
-                    value={
-                      watch('owner_user_id')
-                        ? String(watch('owner_user_id'))
-                        : 'none'
-                    }
-                    onValueChange={(value) =>
-                      setValue(
-                        'owner_user_id',
-                        value === 'none' ? null : Number(value)
-                      )
-                    }
-                  >
-                    <SelectTrigger className="h-9 w-full min-w-0">
-                      <SelectValue placeholder={t('unassigned')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">{t('unassigned')}</SelectItem>
-                      {ownerOptions.map((owner) => (
-                        <SelectItem key={owner.id} value={String(owner.id)}>
-                          {owner.name}
+                  ) : null}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-medium">{t('status')}</Label>
+                    <Select
+                      value={watch('status')}
+                      onValueChange={(value: 'active' | 'inactive') =>
+                        setValue('status', value)
+                      }
+                    >
+                      <SelectTrigger className="h-9 w-full min-w-0">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">{t('active')}</SelectItem>
+                        <SelectItem value="inactive">
+                          {t('inactive')}
                         </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label className="text-xs font-medium">{t('source')}</Label>
-                  <Select
-                    value={watch('source') || 'none'}
-                    onValueChange={(value) =>
-                      setValue(
-                        'source',
-                        value === 'none' ? null : (value as PersonSource)
-                      )
-                    }
-                  >
-                    <SelectTrigger className="h-9 w-full min-w-0">
-                      <SelectValue placeholder={t('source')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">{t('all')}</SelectItem>
-                      <SelectItem value="referral">
-                        {t('sourceReferral')}
-                      </SelectItem>
-                      <SelectItem value="website">
-                        {t('sourceWebsite')}
-                      </SelectItem>
-                      <SelectItem value="social">
-                        {t('sourceSocial')}
-                      </SelectItem>
-                      <SelectItem value="inbound">
-                        {t('sourceInbound')}
-                      </SelectItem>
-                      <SelectItem value="outbound">
-                        {t('sourceOutbound')}
-                      </SelectItem>
-                      <SelectItem value="other">{t('sourceOther')}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label className="text-xs font-medium">
-                    {t('lifecycleStage')}
-                  </Label>
-                  <Select
-                    value={watch('lifecycle_stage') || 'new'}
-                    onValueChange={(value) =>
-                      setValue('lifecycle_stage', value as PersonLifecycleStage)
-                    }
-                  >
-                    <SelectTrigger className="h-9 w-full min-w-0">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="new">{t('lifecycleNew')}</SelectItem>
-                      <SelectItem value="contacted">
-                        {t('lifecycleContacted')}
-                      </SelectItem>
-                      <SelectItem value="qualified">
-                        {t('lifecycleQualified')}
-                      </SelectItem>
-                      <SelectItem value="proposal">
-                        {t('lifecycleProposal')}
-                      </SelectItem>
-                      <SelectItem value="negotiation">
-                        {t('lifecycleNegotiation')}
-                      </SelectItem>
-                      <SelectItem value="customer">
-                        {t('lifecycleCustomer')}
-                      </SelectItem>
-                      <SelectItem value="lost">{t('lifecycleLost')}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label className="text-xs font-medium">
-                    {t('nextActionAt')}
-                  </Label>
-                  <Input
-                    type="datetime-local"
-                    value={watch('next_action_at') || ''}
-                    onChange={(event) =>
-                      setValue('next_action_at', event.target.value)
-                    }
-                    className="h-9"
-                  />
-                </div>
-              </div>
-
-              {watchType === 'individual' ? (
-                <>
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                      <Label className="text-xs font-medium">
-                        {t('jobTitle')}
-                      </Label>
-                      <Input
-                        placeholder={t('jobTitlePlaceholder')}
-                        {...register('job_title')}
-                        className="h-9"
-                      />
-                    </div>
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-                    {allowCompanyRegistration ? (
+                  {watchType === 'individual' ? (
+                    <>
                       <div className="space-y-1.5">
-                        <PersonFieldWithCreate<PersonFormValues>
-                          form={form}
-                          name="employer_company_id"
-                          label={t('employerCompany')}
-                          entityLabel={t('company')}
-                          selectPlaceholder={t('employerCompanyPlaceholder')}
-                          personTypeFilter="company"
-                          createType="company"
-                          lockCreateType
-                          valueType="number"
-                          initialSelectedLabel={
-                            person?.employer_company?.name || ''
+                        <Label className="text-xs font-medium">
+                          {t('birthDate')}
+                        </Label>
+                        <DatePickerWithYearMonth
+                          date={watch('birth_date') || undefined}
+                          onSelect={(date) =>
+                            setValue('birth_date', date || null)
                           }
+                          maxDate={new Date()}
+                          placeholder={t('selectDate')}
+                          localeCode={currentLocaleCode}
                         />
                       </div>
-                    ) : null}
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className="space-y-1.5">
-                    <Label className="text-xs font-medium">
-                      {t('tradeName')}
-                    </Label>
-                    <Input
-                      placeholder={t('tradeNamePlaceholder')}
-                      {...register('trade_name')}
-                      className="h-9"
-                    />
-                  </div>
 
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                      <Label className="text-xs font-medium">
-                        {t('foundationDate')}
-                      </Label>
-                      <DatePickerWithYearMonth
-                        date={watch('foundation_date') || undefined}
-                        onSelect={(date) =>
-                          setValue('foundation_date', date || null)
-                        }
-                        maxDate={new Date()}
-                        placeholder={t('selectDate')}
-                        localeCode={currentLocaleCode}
-                      />
-                    </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs font-medium">
+                          {t('gender')}
+                        </Label>
+                        <Select
+                          value={watch('gender') || ''}
+                          onValueChange={(value: PersonGender) =>
+                            setValue('gender', value)
+                          }
+                        >
+                          <SelectTrigger className="h-9 w-full min-w-0">
+                            <SelectValue placeholder={t('selectGender')} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="male">
+                              {t('genderMale')}
+                            </SelectItem>
+                            <SelectItem value="female">
+                              {t('genderFemale')}
+                            </SelectItem>
+                            <SelectItem value="other">
+                              {t('genderOther')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </>
+                  ) : null}
+                </div>
 
-                    <div className="space-y-1.5">
-                      <Label className="text-xs font-medium">
-                        {t('legalNature')}
-                      </Label>
-                      <Input
-                        placeholder={t('legalNaturePlaceholder')}
-                        {...register('legal_nature')}
-                        className="h-9"
-                      />
-                    </div>
+                <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-medium">{t('owner')}</Label>
+                    <Select
+                      value={
+                        watch('owner_user_id')
+                          ? String(watch('owner_user_id'))
+                          : 'none'
+                      }
+                      onValueChange={(value) =>
+                        setValue(
+                          'owner_user_id',
+                          value === 'none' ? null : Number(value)
+                        )
+                      }
+                    >
+                      <SelectTrigger className="h-9 w-full min-w-0">
+                        <SelectValue placeholder={t('unassigned')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">{t('unassigned')}</SelectItem>
+                        {ownerOptions.map((owner) => (
+                          <SelectItem key={owner.id} value={String(owner.id)}>
+                            {owner.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
-                </>
-              )}
-            </div>
 
-            <Separator />
-
-            <Collapsible open={contactsOpen} onOpenChange={setContactsOpen}>
-              <CollapsibleTrigger asChild>
-                <div className="group flex cursor-pointer items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <Mail className="h-4 w-4 text-blue-500" />
-                    <h3 className="text-sm font-semibold">
-                      {t('tabContacts')}
-                    </h3>
-                    {contacts.length > 0 ? (
-                      <Badge
-                        variant="secondary"
-                        className="bg-blue-500/10 text-blue-600"
-                      >
-                        {contacts.length}
-                      </Badge>
-                    ) : null}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-medium">{t('source')}</Label>
+                    <Select
+                      value={watch('source') || 'none'}
+                      onValueChange={(value) =>
+                        setValue(
+                          'source',
+                          value === 'none' ? null : (value as PersonSource)
+                        )
+                      }
+                    >
+                      <SelectTrigger className="h-9 w-full min-w-0">
+                        <SelectValue placeholder={t('source')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">{t('all')}</SelectItem>
+                        <SelectItem value="referral">
+                          {t('sourceReferral')}
+                        </SelectItem>
+                        <SelectItem value="website">
+                          {t('sourceWebsite')}
+                        </SelectItem>
+                        <SelectItem value="social">
+                          {t('sourceSocial')}
+                        </SelectItem>
+                        <SelectItem value="inbound">
+                          {t('sourceInbound')}
+                        </SelectItem>
+                        <SelectItem value="outbound">
+                          {t('sourceOutbound')}
+                        </SelectItem>
+                        <SelectItem value="other">
+                          {t('sourceOther')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
 
-                  <div className="flex items-center gap-1">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addContact('email');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      {t('addEmail')}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addContact('phone');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      {t('addPhone')}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addContact('blank');
-                      }}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-medium">
+                      {t('lifecycleStage')}
+                    </Label>
+                    <Select
+                      value={watch('lifecycle_stage') || 'new'}
+                      onValueChange={(value) =>
+                        setValue(
+                          'lifecycle_stage',
+                          value as PersonLifecycleStage
+                        )
+                      }
                     >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      {t('addContact')}
-                    </Button>
-                    {contactsOpen ? (
-                      <ChevronUp className="h-4 w-4" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" />
-                    )}
+                      <SelectTrigger className="h-9 w-full min-w-0">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="new">{t('lifecycleNew')}</SelectItem>
+                        <SelectItem value="contacted">
+                          {t('lifecycleContacted')}
+                        </SelectItem>
+                        <SelectItem value="qualified">
+                          {t('lifecycleQualified')}
+                        </SelectItem>
+                        <SelectItem value="proposal">
+                          {t('lifecycleProposal')}
+                        </SelectItem>
+                        <SelectItem value="negotiation">
+                          {t('lifecycleNegotiation')}
+                        </SelectItem>
+                        <SelectItem value="customer">
+                          {t('lifecycleCustomer')}
+                        </SelectItem>
+                        <SelectItem value="lost">
+                          {t('lifecycleLost')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
-                </div>
-              </CollapsibleTrigger>
 
-              <CollapsibleContent className="mt-2 space-y-2">
-                {contacts.length === 0 ? (
-                  <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
-                    {t('noContacts')}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-medium">
+                      {t('nextActionAt')}
+                    </Label>
+                    <Input
+                      type="datetime-local"
+                      value={watch('next_action_at') || ''}
+                      onChange={(event) =>
+                        setValue('next_action_at', event.target.value)
+                      }
+                      className="h-9"
+                    />
                   </div>
-                ) : (
-                  contacts.map((contact) => (
-                    <div
-                      key={contact.clientId}
-                      className={cn(
-                        'space-y-2 rounded-lg border p-2',
-                        contact.is_primary && 'border-blue-500/50 bg-blue-500/5'
-                      )}
-                    >
-                      <div className="flex items-center gap-2">
-                        <Select
-                          value={
-                            contact.contact_type_id
-                              ? String(contact.contact_type_id)
-                              : undefined
-                          }
-                          onValueChange={(value) => {
-                            const nextTypeId = Number(value);
-                            updateContact(contact.clientId, {
-                              contact_type_id: nextTypeId,
-                              value: maskContactValueByType(
-                                contact.value || '',
-                                nextTypeId
-                              ),
-                            });
-                          }}
-                        >
-                          <SelectTrigger className="h-8 w-36 text-xs">
-                            <SelectValue placeholder={t('selectContactType')} />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {contactTypes.map((contactType) => (
-                              <SelectItem
-                                key={contactType.contact_type_id}
-                                value={String(contactType.contact_type_id)}
-                              >
-                                {contactType.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
+                </div>
 
+                {watchType === 'individual' ? (
+                  <>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs font-medium">
+                          {t('jobTitle')}
+                        </Label>
                         <Input
-                          ref={(element) => {
-                            contactValueRefs.current[contact.clientId] =
-                              element;
-                          }}
-                          placeholder={(() => {
-                            const contactTypeCode = getContactTypeCode(
-                              contact.contact_type_id
-                            );
-                            if (contactTypeCode === 'EMAIL') {
-                              return 'email@exemplo.com';
-                            }
-                            if (contactTypeCode.length === 0) {
-                              return t('contactValue');
+                          placeholder={t('jobTitlePlaceholder')}
+                          {...register('job_title')}
+                          className="h-9"
+                        />
+                      </div>
+
+                      {allowCompanyRegistration ? (
+                        <div className="space-y-1.5">
+                          <PersonFieldWithCreate<PersonFormValues>
+                            form={form}
+                            name="employer_company_id"
+                            label={t('employerCompany')}
+                            entityLabel={t('company')}
+                            selectPlaceholder={t('employerCompanyPlaceholder')}
+                            personTypeFilter="company"
+                            createType="company"
+                            lockCreateType
+                            valueType="number"
+                            initialSelectedLabel={
+                              person?.employer_company?.name || ''
                             }
-                            return '(00) 00000-0000';
-                          })()}
-                          value={contact.value}
-                          onChange={(event) =>
-                            updateContact(contact.clientId, {
-                              value: maskContactValueByType(
-                                event.target.value,
-                                contact.contact_type_id
-                              ),
-                            })
+                          />
+                        </div>
+                      ) : null}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-medium">
+                        {t('tradeName')}
+                      </Label>
+                      <Input
+                        placeholder={t('tradeNamePlaceholder')}
+                        {...register('trade_name')}
+                        className="h-9"
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs font-medium">
+                          {t('foundationDate')}
+                        </Label>
+                        <DatePickerWithYearMonth
+                          date={watch('foundation_date') || undefined}
+                          onSelect={(date) =>
+                            setValue('foundation_date', date || null)
                           }
-                          className="h-8 flex-1 text-xs"
+                          maxDate={new Date()}
+                          placeholder={t('selectDate')}
+                          localeCode={currentLocaleCode}
                         />
+                      </div>
 
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className={cn(
-                                'h-8 w-8',
-                                contact.is_primary && 'text-amber-500'
-                              )}
-                              onClick={() =>
-                                setPrimaryContact(contact.clientId)
-                              }
-                              aria-label={t('main')}
-                            >
-                              <Star
-                                className={cn(
-                                  'h-4 w-4',
-                                  contact.is_primary && 'fill-current'
-                                )}
-                              />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>{t('main')}</TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8 text-red-500 hover:text-red-600"
-                              onClick={() => removeContact(contact.clientId)}
-                              aria-label={t('remove')}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>{t('remove')}</TooltipContent>
-                        </Tooltip>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs font-medium">
+                          {t('legalNature')}
+                        </Label>
+                        <Input
+                          placeholder={t('legalNaturePlaceholder')}
+                          {...register('legal_nature')}
+                          className="h-9"
+                        />
                       </div>
                     </div>
-                  ))
+                  </>
                 )}
-              </CollapsibleContent>
-            </Collapsible>
-
-            <Separator />
-
-            <Collapsible open={addressesOpen} onOpenChange={setAddressesOpen}>
-              <CollapsibleTrigger asChild>
-                <div className="group flex cursor-pointer items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <MapPin className="h-4 w-4 text-green-500" />
-                    <h3 className="text-sm font-semibold">
-                      {t('tabAddresses')}
-                    </h3>
-                    {addresses.length > 0 ? (
-                      <Badge
-                        variant="secondary"
-                        className="bg-green-500/10 text-green-600"
-                      >
-                        {addresses.length}
-                      </Badge>
-                    ) : null}
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addAddress();
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      {t('addAddress')}
-                    </Button>
-                    {addressesOpen ? (
-                      <ChevronUp className="h-4 w-4" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" />
-                    )}
-                  </div>
-                </div>
-              </CollapsibleTrigger>
+              </div>
 
-              <CollapsibleContent className="mt-2 space-y-2">
-                {addresses.length === 0 ? (
-                  <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
-                    {t('noAddresses')}
-                  </div>
-                ) : (
-                  addresses.map((address) => (
-                    <div
-                      key={address.clientId}
-                      className={cn(
-                        'space-y-2 rounded-lg border p-2',
-                        address.is_primary &&
-                          'border-green-500/50 bg-green-500/5'
-                      )}
-                    >
-                      <div className="flex items-center gap-2">
-                        <Select
-                          value={address.address_type}
-                          onValueChange={(value) =>
-                            updateAddress(address.clientId, {
-                              address_type:
-                                value as PersonAddress['address_type'],
-                            })
-                          }
+              <Separator />
+
+              <Collapsible open={contactsOpen} onOpenChange={setContactsOpen}>
+                <CollapsibleTrigger asChild>
+                  <div className="group flex cursor-pointer items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Mail className="h-4 w-4 text-blue-500" />
+                      <h3 className="text-sm font-semibold">
+                        {t('tabContacts')}
+                      </h3>
+                      {contacts.length > 0 ? (
+                        <Badge
+                          variant="secondary"
+                          className="bg-blue-500/10 text-blue-600"
                         >
-                          <SelectTrigger className="h-8 w-36 text-xs">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {ADDRESS_TYPE_OPTIONS.map((option) => (
-                              <SelectItem
-                                key={option.value}
-                                value={option.value}
-                              >
-                                {t(option.labelKey)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
+                          {contacts.length}
+                        </Badge>
+                      ) : null}
+                    </div>
 
-                        <Input
-                          placeholder={t('zipCode')}
-                          value={address.postal_code || ''}
-                          maxLength={9}
-                          onChange={(event) =>
-                            void handleCEP(event, address.clientId)
-                          }
-                          className="h-8 w-28 text-xs"
-                        />
+                    <div className="flex items-center gap-1">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addContact('email');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        {t('addEmail')}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addContact('phone');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        {t('addPhone')}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addContact('blank');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        {t('addContact')}
+                      </Button>
+                      {contactsOpen ? (
+                        <ChevronUp className="h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4" />
+                      )}
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
 
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className={cn(
-                                'h-8 w-8',
-                                address.is_primary && 'text-amber-500'
-                              )}
-                              onClick={() =>
-                                setPrimaryAddress(address.clientId)
+                <CollapsibleContent className="mt-2 space-y-2">
+                  {contacts.length === 0 ? (
+                    <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                      {t('noContacts')}
+                    </div>
+                  ) : (
+                    contacts.map((contact) => (
+                      <div
+                        key={contact.clientId}
+                        className={cn(
+                          'space-y-2 rounded-lg border p-2',
+                          contact.is_primary &&
+                            'border-blue-500/50 bg-blue-500/5'
+                        )}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Select
+                            value={
+                              contact.contact_type_id
+                                ? String(contact.contact_type_id)
+                                : undefined
+                            }
+                            onValueChange={(value) => {
+                              const nextTypeId = Number(value);
+                              updateContact(contact.clientId, {
+                                contact_type_id: nextTypeId,
+                                value: maskContactValueByType(
+                                  contact.value || '',
+                                  nextTypeId
+                                ),
+                              });
+                            }}
+                          >
+                            <SelectTrigger className="h-8 w-36 text-xs">
+                              <SelectValue
+                                placeholder={t('selectContactType')}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {contactTypes.map((contactType) => (
+                                <SelectItem
+                                  key={contactType.contact_type_id}
+                                  value={String(contactType.contact_type_id)}
+                                >
+                                  {contactType.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+
+                          <Input
+                            ref={(element) => {
+                              contactValueRefs.current[contact.clientId] =
+                                element;
+                            }}
+                            placeholder={(() => {
+                              const contactTypeCode = getContactTypeCode(
+                                contact.contact_type_id
+                              );
+                              if (contactTypeCode === 'EMAIL') {
+                                return 'email@exemplo.com';
                               }
-                              aria-label={t('main')}
-                            >
-                              <Star
+                              if (contactTypeCode.length === 0) {
+                                return t('contactValue');
+                              }
+                              return '(00) 00000-0000';
+                            })()}
+                            value={contact.value}
+                            onChange={(event) =>
+                              updateContact(contact.clientId, {
+                                value: maskContactValueByType(
+                                  event.target.value,
+                                  contact.contact_type_id
+                                ),
+                              })
+                            }
+                            className="h-8 flex-1 text-xs"
+                          />
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
                                 className={cn(
-                                  'h-4 w-4',
-                                  address.is_primary && 'fill-current'
+                                  'h-8 w-8',
+                                  contact.is_primary && 'text-amber-500'
                                 )}
-                              />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>{t('main')}</TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8 text-red-500 hover:text-red-600"
-                              onClick={() => removeAddress(address.clientId)}
-                              aria-label={t('remove')}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>{t('remove')}</TooltipContent>
-                        </Tooltip>
+                                onClick={() =>
+                                  setPrimaryContact(contact.clientId)
+                                }
+                                aria-label={t('main')}
+                              >
+                                <Star
+                                  className={cn(
+                                    'h-4 w-4',
+                                    contact.is_primary && 'fill-current'
+                                  )}
+                                />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t('main')}</TooltipContent>
+                          </Tooltip>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-red-500 hover:text-red-600"
+                                onClick={() => removeContact(contact.clientId)}
+                                aria-label={t('remove')}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t('remove')}</TooltipContent>
+                          </Tooltip>
+                        </div>
                       </div>
+                    ))
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Separator />
+
+              <Collapsible open={addressesOpen} onOpenChange={setAddressesOpen}>
+                <CollapsibleTrigger asChild>
+                  <div className="group flex cursor-pointer items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <MapPin className="h-4 w-4 text-green-500" />
+                      <h3 className="text-sm font-semibold">
+                        {t('tabAddresses')}
+                      </h3>
+                      {addresses.length > 0 ? (
+                        <Badge
+                          variant="secondary"
+                          className="bg-green-500/10 text-green-600"
+                        >
+                          {addresses.length}
+                        </Badge>
+                      ) : null}
+                    </div>
 
-                      <div className="relative">
-                        <Input
-                          ref={(element) => {
-                            addressLine1Refs.current[address.clientId] =
-                              element;
-                          }}
-                          placeholder={t('addressPlaceholder')}
-                          value={address.line1}
-                          disabled={Boolean(loadingCEP[address.clientId])}
-                          onChange={(event) =>
-                            updateAddress(address.clientId, {
-                              line1: event.target.value,
-                            })
-                          }
-                          className="h-8 text-xs"
-                        />
-                        {loadingCEP[address.clientId] ? (
-                          <Loader2 className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" />
-                        ) : null}
-                      </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addAddress();
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        {t('addAddress')}
+                      </Button>
+                      {addressesOpen ? (
+                        <ChevronUp className="h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4" />
+                      )}
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
 
-                      <Input
-                        placeholder={t('addressComplementPlaceholder')}
-                        value={address.line2 || ''}
-                        onChange={(event) =>
-                          updateAddress(address.clientId, {
-                            line2: event.target.value,
-                          })
-                        }
-                        className="h-8 text-xs"
-                      />
+                <CollapsibleContent className="mt-2 space-y-2">
+                  {addresses.length === 0 ? (
+                    <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                      {t('noAddresses')}
+                    </div>
+                  ) : (
+                    addresses.map((address) => (
+                      <div
+                        key={address.clientId}
+                        className={cn(
+                          'space-y-2 rounded-lg border p-2',
+                          address.is_primary &&
+                            'border-green-500/50 bg-green-500/5'
+                        )}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Select
+                            value={address.address_type}
+                            onValueChange={(value) =>
+                              updateAddress(address.clientId, {
+                                address_type:
+                                  value as PersonAddress['address_type'],
+                              })
+                            }
+                          >
+                            <SelectTrigger className="h-8 w-36 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {ADDRESS_TYPE_OPTIONS.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  {t(option.labelKey)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+
+                          <Input
+                            placeholder={t('zipCode')}
+                            value={address.postal_code || ''}
+                            maxLength={9}
+                            onChange={(event) =>
+                              void handleCEP(event, address.clientId)
+                            }
+                            className="h-8 w-28 text-xs"
+                          />
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className={cn(
+                                  'h-8 w-8',
+                                  address.is_primary && 'text-amber-500'
+                                )}
+                                onClick={() =>
+                                  setPrimaryAddress(address.clientId)
+                                }
+                                aria-label={t('main')}
+                              >
+                                <Star
+                                  className={cn(
+                                    'h-4 w-4',
+                                    address.is_primary && 'fill-current'
+                                  )}
+                                />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t('main')}</TooltipContent>
+                          </Tooltip>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-red-500 hover:text-red-600"
+                                onClick={() => removeAddress(address.clientId)}
+                                aria-label={t('remove')}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t('remove')}</TooltipContent>
+                          </Tooltip>
+                        </div>
+
+                        <div className="relative">
+                          <Input
+                            ref={(element) => {
+                              addressLine1Refs.current[address.clientId] =
+                                element;
+                            }}
+                            placeholder={t('addressPlaceholder')}
+                            value={address.line1}
+                            disabled={Boolean(loadingCEP[address.clientId])}
+                            onChange={(event) =>
+                              updateAddress(address.clientId, {
+                                line1: event.target.value,
+                              })
+                            }
+                            className="h-8 text-xs"
+                          />
+                          {loadingCEP[address.clientId] ? (
+                            <Loader2 className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" />
+                          ) : null}
+                        </div>
 
-                      <div className="grid grid-cols-2 gap-2">
-                        <Input
-                          placeholder={t('addressCityPlaceholder')}
-                          value={address.city}
-                          disabled={Boolean(loadingCEP[address.clientId])}
-                          onChange={(event) =>
-                            updateAddress(address.clientId, {
-                              city: event.target.value,
-                            })
-                          }
-                          className="h-8 text-xs"
-                        />
                         <Input
-                          placeholder={t('addressStatePlaceholder')}
-                          value={address.state}
-                          disabled={Boolean(loadingCEP[address.clientId])}
+                          placeholder={t('addressComplementPlaceholder')}
+                          value={address.line2 || ''}
                           onChange={(event) =>
                             updateAddress(address.clientId, {
-                              state: event.target.value,
+                              line2: event.target.value,
                             })
                           }
                           className="h-8 text-xs"
                         />
-                      </div>
 
-                      <Select
-                        value={address.country_code || 'BRA'}
-                        onValueChange={(value) =>
-                          updateAddress(address.clientId, {
-                            country_code: value,
-                          })
-                        }
-                      >
-                        <SelectTrigger className="h-8 text-xs">
-                          <SelectValue
-                            placeholder={t('addressCountryPlaceholder')}
+                        <div className="grid grid-cols-2 gap-2">
+                          <Input
+                            placeholder={t('addressCityPlaceholder')}
+                            value={address.city}
+                            disabled={Boolean(loadingCEP[address.clientId])}
+                            onChange={(event) =>
+                              updateAddress(address.clientId, {
+                                city: event.target.value,
+                              })
+                            }
+                            className="h-8 text-xs"
                           />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {COUNTRIES.map((country) => (
-                            <SelectItem key={country.code} value={country.code}>
-                              {country.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  ))
-                )}
-              </CollapsibleContent>
-            </Collapsible>
-
-            <Separator />
-
-            <Collapsible open={documentsOpen} onOpenChange={setDocumentsOpen}>
-              <CollapsibleTrigger asChild>
-                <div className="group flex cursor-pointer flex-wrap items-center gap-2">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <FileText className="h-4 w-4 text-amber-500" />
-                    <h3 className="text-sm font-semibold">
-                      {t('tabDocuments')}
-                    </h3>
-                    {documents.length > 0 ? (
-                      <Badge
-                        variant="secondary"
-                        className="bg-amber-500/10 text-amber-600"
-                      >
-                        {documents.length}
-                      </Badge>
-                    ) : null}
-                  </div>
-
-                  <div className="ml-auto flex max-w-full flex-wrap items-center justify-end gap-1 sm:flex-nowrap">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 shrink-0 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addDocument('cpf');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      CPF
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 shrink-0 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addDocument('cnpj');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      CNPJ
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 shrink-0 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addDocument('rg');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      RG
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 shrink-0 px-2 text-xs"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        addDocument('blank');
-                      }}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      <span className="max-w-20 truncate sm:max-w-none">
-                        {t('addDocument')}
-                      </span>
-                    </Button>
-                    {documentsOpen ? (
-                      <ChevronUp className="h-4 w-4" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" />
-                    )}
-                  </div>
-                </div>
-              </CollapsibleTrigger>
+                          <Input
+                            placeholder={t('addressStatePlaceholder')}
+                            value={address.state}
+                            disabled={Boolean(loadingCEP[address.clientId])}
+                            onChange={(event) =>
+                              updateAddress(address.clientId, {
+                                state: event.target.value,
+                              })
+                            }
+                            className="h-8 text-xs"
+                          />
+                        </div>
 
-              <CollapsibleContent className="mt-2 space-y-2">
-                {documents.length === 0 ? (
-                  <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
-                    {t('noDocuments')}
-                  </div>
-                ) : (
-                  documents.map((document) => (
-                    <div
-                      key={document.clientId}
-                      className="rounded-lg border p-2"
-                    >
-                      <div className="flex items-center gap-2">
                         <Select
-                          value={
-                            document.document_type_id
-                              ? String(document.document_type_id)
-                              : undefined
+                          value={address.country_code || 'BRA'}
+                          onValueChange={(value) =>
+                            updateAddress(address.clientId, {
+                              country_code: value,
+                            })
                           }
-                          onValueChange={(value) => {
-                            const nextTypeId = Number(value);
-                            updateDocument(document.clientId, {
-                              document_type_id: nextTypeId,
-                              value: maskDocumentValueByType(
-                                document.value || '',
-                                nextTypeId
-                              ),
-                            });
-                          }}
                         >
-                          <SelectTrigger className="h-8 w-36 text-xs">
+                          <SelectTrigger className="h-8 text-xs">
                             <SelectValue
-                              placeholder={t('selectDocumentType')}
+                              placeholder={t('addressCountryPlaceholder')}
                             />
                           </SelectTrigger>
                           <SelectContent>
-                            {documentTypes.map((documentType) => (
+                            {COUNTRIES.map((country) => (
                               <SelectItem
-                                key={documentType.document_type_id}
-                                value={String(documentType.document_type_id)}
+                                key={country.code}
+                                value={country.code}
                               >
-                                {documentType.name}
+                                {country.name}
                               </SelectItem>
                             ))}
                           </SelectContent>
                         </Select>
+                      </div>
+                    ))
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Separator />
+
+              <Collapsible open={documentsOpen} onOpenChange={setDocumentsOpen}>
+                <CollapsibleTrigger asChild>
+                  <div className="group flex cursor-pointer flex-wrap items-center gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <FileText className="h-4 w-4 text-amber-500" />
+                      <h3 className="text-sm font-semibold">
+                        {t('tabDocuments')}
+                      </h3>
+                      {documents.length > 0 ? (
+                        <Badge
+                          variant="secondary"
+                          className="bg-amber-500/10 text-amber-600"
+                        >
+                          {documents.length}
+                        </Badge>
+                      ) : null}
+                    </div>
 
-                        <Input
-                          ref={(element) => {
-                            documentValueRefs.current[document.clientId] =
-                              element;
-                          }}
-                          placeholder={t('documentValuePlaceholder')}
-                          value={document.value}
-                          onChange={(event) =>
-                            updateDocument(document.clientId, {
-                              value: maskDocumentValueByType(
-                                event.target.value,
-                                document.document_type_id
-                              ),
-                            })
-                          }
-                          className="h-8 flex-1 text-xs"
-                        />
+                    <div className="ml-auto flex max-w-full flex-wrap items-center justify-end gap-1 sm:flex-nowrap">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addDocument('cpf');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        CPF
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addDocument('cnpj');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        CNPJ
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addDocument('rg');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        RG
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-xs"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          addDocument('blank');
+                        }}
+                      >
+                        <Plus className="mr-1 h-3.5 w-3.5" />
+                        <span className="max-w-20 truncate sm:max-w-none">
+                          {t('addDocument')}
+                        </span>
+                      </Button>
+                      {documentsOpen ? (
+                        <ChevronUp className="h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4" />
+                      )}
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
 
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8 text-red-500 hover:text-red-600"
-                              onClick={() => removeDocument(document.clientId)}
-                              aria-label={t('remove')}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>{t('remove')}</TooltipContent>
-                        </Tooltip>
-                      </div>
+                <CollapsibleContent className="mt-2 space-y-2">
+                  {documents.length === 0 ? (
+                    <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                      {t('noDocuments')}
                     </div>
-                  ))
-                )}
-              </CollapsibleContent>
-            </Collapsible>
-          </form>
-        </div>
+                  ) : (
+                    documents.map((document) => (
+                      <div
+                        key={document.clientId}
+                        className="rounded-lg border p-2"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Select
+                            value={
+                              document.document_type_id
+                                ? String(document.document_type_id)
+                                : undefined
+                            }
+                            onValueChange={(value) => {
+                              const nextTypeId = Number(value);
+                              updateDocument(document.clientId, {
+                                document_type_id: nextTypeId,
+                                value: maskDocumentValueByType(
+                                  document.value || '',
+                                  nextTypeId
+                                ),
+                              });
+                            }}
+                          >
+                            <SelectTrigger className="h-8 w-36 text-xs">
+                              <SelectValue
+                                placeholder={t('selectDocumentType')}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {documentTypes.map((documentType) => (
+                                <SelectItem
+                                  key={documentType.document_type_id}
+                                  value={String(documentType.document_type_id)}
+                                >
+                                  {documentType.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+
+                          <Input
+                            ref={(element) => {
+                              documentValueRefs.current[document.clientId] =
+                                element;
+                            }}
+                            placeholder={t('documentValuePlaceholder')}
+                            value={document.value}
+                            onChange={(event) =>
+                              updateDocument(document.clientId, {
+                                value: maskDocumentValueByType(
+                                  event.target.value,
+                                  document.document_type_id
+                                ),
+                              })
+                            }
+                            className="h-8 flex-1 text-xs"
+                          />
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-red-500 hover:text-red-600"
+                                onClick={() =>
+                                  removeDocument(document.clientId)
+                                }
+                                aria-label={t('remove')}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t('remove')}</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+            </form>
+          </div>
 
-        <div className="shrink-0 space-y-2 border-t p-4">
-          <div className="grid gap-2 sm:grid-cols-2">
-            {!isEditing ? (
+          <div className="shrink-0 space-y-2 border-t p-4">
+            <div className="grid gap-2 sm:grid-cols-2">
+              {!isEditing ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    const formElement = document.getElementById(
+                      'person-form'
+                    ) as HTMLFormElement | null;
+                    formElement?.requestSubmit();
+                  }}
+                  disabled={isSubmitting || isUploadingAvatar}
+                >
+                  {t('saveAndNew')}
+                </Button>
+              ) : null}
               <Button
-                type="button"
-                variant="outline"
-                onClick={() => {
-                  const formElement = document.getElementById(
-                    'person-form'
-                  ) as HTMLFormElement | null;
-                  formElement?.requestSubmit();
-                }}
+                type="submit"
+                form="person-form"
+                className="w-full"
                 disabled={isSubmitting || isUploadingAvatar}
               >
-                {t('saveAndNew')}
+                {isSubmitting ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Save className="mr-2 h-4 w-4" />
+                )}
+                {isSubmitting
+                  ? t('saving')
+                  : isEditing
+                    ? t('saveChanges')
+                    : t('createPerson')}
               </Button>
-            ) : null}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('formShortcutsHint')}
+            </p>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={duplicateDialogOpen}
+        onOpenChange={(nextOpen: boolean) => {
+          if (isResolvingDuplicateAction) return;
+
+          setDuplicateDialogOpen(nextOpen);
+          if (!nextOpen) {
+            setPendingDuplicateSubmission(null);
+            setDuplicateTargetPersonId(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('duplicateDialogTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('duplicateDialogDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          {pendingDuplicateSubmission ? (
+            <div className="space-y-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">
+                  {t('duplicateTargetLabel')}
+                </Label>
+                <Select
+                  value={
+                    duplicateTargetPersonId
+                      ? String(duplicateTargetPersonId)
+                      : undefined
+                  }
+                  onValueChange={(value) =>
+                    setDuplicateTargetPersonId(Number(value))
+                  }
+                >
+                  <SelectTrigger className="h-9 w-full">
+                    <SelectValue placeholder={t('duplicateSelectTarget')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {pendingDuplicateSubmission.matches.map((match) => (
+                      <SelectItem key={match.id} value={String(match.id)}>
+                        #{match.id} · {match.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="max-h-56 space-y-2 overflow-y-auto rounded-md border p-2">
+                {pendingDuplicateSubmission.matches.map((match) => (
+                  <div
+                    key={match.id}
+                    className={cn(
+                      'rounded-md border p-2',
+                      duplicateTargetPersonId === match.id
+                        ? 'border-primary/50 bg-primary/5'
+                        : 'border-border'
+                    )}
+                  >
+                    <div className="text-sm font-medium">
+                      #{match.id} · {match.name}
+                    </div>
+                    <div className="mt-1 flex flex-wrap gap-1.5">
+                      {match.reasons.map((reason) => (
+                        <Badge
+                          key={`${match.id}-${reason}`}
+                          variant="secondary"
+                        >
+                          {getDuplicateReasonLabel(reason)}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <AlertDialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setDuplicateDialogOpen(false);
+                setPendingDuplicateSubmission(null);
+                setDuplicateTargetPersonId(null);
+              }}
+              disabled={isResolvingDuplicateAction}
+            >
+              {t('cancel')}
+            </Button>
             <Button
-              type="submit"
-              form="person-form"
-              className="w-full"
-              disabled={isSubmitting || isUploadingAvatar}
+              type="button"
+              variant="outline"
+              onClick={() => void handleContinueWithDuplicate()}
+              disabled={isResolvingDuplicateAction}
             >
-              {isSubmitting ? (
+              {isResolvingDuplicateAction ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Save className="mr-2 h-4 w-4" />
-              )}
-              {isSubmitting
-                ? t('saving')
-                : isEditing
-                  ? t('saveChanges')
-                  : t('createPerson')}
+              ) : null}
+              {t('duplicateContinueAction')}
             </Button>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {t('formShortcutsHint')}
-          </p>
-        </div>
-      </SheetContent>
-    </Sheet>
+            <Button
+              type="button"
+              onClick={() => void handleMergeWithDuplicate()}
+              disabled={isResolvingDuplicateAction || !duplicateTargetPersonId}
+            >
+              {isResolvingDuplicateAction ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : null}
+              {t('duplicateMergeAction')}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }