@hed-hog/contact 0.0.266 → 0.0.274

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

@@ -0,0 +1,2277 @@
+'use client';
+
+import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { COUNTRIES } from '@/constants/countries';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { format } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  Building2,
+  Calendar as CalendarIcon,
+  ChevronDown,
+  ChevronUp,
+  FileText,
+  Loader2,
+  Mail,
+  MapPin,
+  Plus,
+  Save,
+  Star,
+  Trash2,
+  Upload,
+  User,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import {
+  ADDRESS_TYPE_OPTIONS,
+  type ContactTypeOption,
+  type DocumentTypeOption,
+  type Person,
+  type PersonAddress,
+  type PersonContact,
+  type PersonDocument,
+  type PersonGender,
+  type PersonLifecycleStage,
+  type PersonSource,
+  type UserOption,
+} from './person-types';
+
+type PersonFormSheetProps = {
+  open: boolean;
+  person: Person | null;
+  contactTypes: ContactTypeOption[];
+  documentTypes: DocumentTypeOption[];
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+};
+
+type PersonFormValues = {
+  name: string;
+  type: 'individual' | 'company';
+  status: 'active' | 'inactive';
+  birth_date?: Date | null;
+  gender?: PersonGender | null;
+  job_title?: string | null;
+  employer_company_id?: number | null;
+  trade_name?: string | null;
+  foundation_date?: Date | null;
+  legal_nature?: string | null;
+  owner_user_id?: number | null;
+  source?: PersonSource | null;
+  lifecycle_stage?: PersonLifecycleStage | null;
+  next_action_at?: string | null;
+};
+
+type CreatePersonPayload = {
+  id?: number;
+  data?: {
+    id?: number;
+  };
+};
+
+type UploadedFilePayload = {
+  id?: number;
+  filename?: string;
+};
+
+type OpenFilePayload = {
+  url?: string;
+};
+
+type EditablePersonContact = Omit<PersonContact, 'contact_type_id'> & {
+  clientId: string;
+  contact_type_id: number | null;
+};
+
+type EditablePersonAddress = PersonAddress & {
+  clientId: string;
+};
+
+type EditablePersonDocument = Omit<PersonDocument, 'document_type_id'> & {
+  clientId: string;
+  document_type_id: number | null;
+};
+
+function createClientId(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function onlyDigits(value: string) {
+  return value.replace(/\D/g, '');
+}
+
+function applyPhoneMask(value: string) {
+  const digits = onlyDigits(value).slice(0, 11);
+
+  if (digits.length <= 2) {
+    return digits.length ? `(${digits}` : '';
+  }
+
+  if (digits.length <= 6) {
+    return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+  }
+
+  if (digits.length <= 10) {
+    return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
+  }
+
+  return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
+}
+
+function applyCpfMask(value: string) {
+  const digits = onlyDigits(value).slice(0, 11);
+
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `${digits.slice(0, 3)}.${digits.slice(3)}`;
+  if (digits.length <= 9)
+    return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6)}`;
+
+  return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6, 9)}-${digits.slice(9)}`;
+}
+
+function applyCnpjMask(value: string) {
+  const digits = onlyDigits(value).slice(0, 14);
+
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 5) return `${digits.slice(0, 2)}.${digits.slice(2)}`;
+  if (digits.length <= 8)
+    return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5)}`;
+  if (digits.length <= 12)
+    return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8)}`;
+
+  return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8, 12)}-${digits.slice(12)}`;
+}
+
+function toDatetimeLocalValue(value?: string | null) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+
+  const offset = date.getTimezoneOffset();
+  const localDate = new Date(date.getTime() - offset * 60 * 1000);
+  return localDate.toISOString().slice(0, 16);
+}
+
+async function fetchViaCep(cep: string) {
+  try {
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
+    if (!response.ok) return null;
+
+    const data = await response.json();
+    if (data.erro) return null;
+
+    return data as {
+      logradouro?: string;
+      localidade?: string;
+      uf?: string;
+    };
+  } catch {
+    return null;
+  }
+}
+
+function DatePickerWithYearMonth({
+  date,
+  onSelect,
+  maxDate,
+  placeholder,
+  localeCode,
+}: {
+  date?: Date;
+  onSelect: (date: Date | undefined) => void;
+  maxDate?: Date;
+  placeholder: string;
+  localeCode: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const locale = localeCode.startsWith('pt') ? ptBR : enUS;
+  const [viewDate, setViewDate] = useState(date || new Date(2000, 0, 1));
+  const currentViewDate = date || viewDate;
+
+  const currentYear = new Date().getFullYear();
+  const years = useMemo(() => {
+    const values: number[] = [];
+    for (let year = currentYear; year >= currentYear - 100; year -= 1) {
+      values.push(year);
+    }
+    return values;
+  }, [currentYear]);
+
+  const months = useMemo(
+    () =>
+      Array.from({ length: 12 }, (_, index) =>
+        format(new Date(2024, index, 1), 'LLLL', { locale })
+      ),
+    [locale]
+  );
+
+  const handleYearChange = (year: string) => {
+    const nextDate = new Date(currentViewDate);
+    nextDate.setFullYear(Number(year));
+    setViewDate(nextDate);
+  };
+
+  const handleMonthChange = (month: string) => {
+    const nextDate = new Date(currentViewDate);
+    nextDate.setMonth(Number(month));
+    setViewDate(nextDate);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={cn(
+            'h-9 w-full min-w-0 justify-start text-left text-xs font-normal',
+            !date && 'text-muted-foreground'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-3.5 w-3.5" />
+          {date ? (
+            format(date, 'dd/MM/yyyy', { locale })
+          ) : (
+            <span className="block truncate text-xs">{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex items-center gap-1 border-b p-2">
+          <Select
+            value={String(currentViewDate.getMonth())}
+            onValueChange={handleMonthChange}
+          >
+            <SelectTrigger className="h-8 flex-1 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {months.map((month, index) => (
+                <SelectItem key={month} value={String(index)}>
+                  {month}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            value={String(currentViewDate.getFullYear())}
+            onValueChange={handleYearChange}
+          >
+            <SelectTrigger className="h-8 w-24 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="max-h-60">
+              {years.map((year) => (
+                <SelectItem key={year} value={String(year)}>
+                  {year}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(selectedDate) => {
+            onSelect(selectedDate);
+            setIsOpen(false);
+          }}
+          month={currentViewDate}
+          onMonthChange={setViewDate}
+          disabled={(value) => (maxDate ? value > maxDate : false)}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function PersonFormSheet({
+  open,
+  person,
+  contactTypes,
+  documentTypes,
+  onOpenChange,
+  onSuccess,
+}: PersonFormSheetProps) {
+  const t = useTranslations('contact.ContactPage');
+  const { request, currentLocaleCode, getSettingValue, user } = useApp();
+  const isEditing = Boolean(person);
+  const allowCompanyRegistration =
+    getSettingValue('contact-allow-company-registration') !== false;
+  const canUseCompanyType = allowCompanyRegistration;
+
+  const personSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().trim().min(2, t('nameRequired')),
+        type: z.enum(['individual', 'company']),
+        status: z.enum(['active', 'inactive']),
+        birth_date: z.date().nullable().optional(),
+        gender: z.enum(['male', 'female', 'other']).nullable().optional(),
+        job_title: z.string().nullable().optional(),
+        employer_company_id: z.number().int().nullable().optional(),
+        trade_name: z.string().nullable().optional(),
+        foundation_date: z.date().nullable().optional(),
+        legal_nature: z.string().nullable().optional(),
+        owner_user_id: z.number().int().nullable().optional(),
+        source: z
+          .enum([
+            'referral',
+            'website',
+            'social',
+            'inbound',
+            'outbound',
+            'other',
+          ])
+          .nullable()
+          .optional(),
+        lifecycle_stage: z
+          .enum([
+            'new',
+            'contacted',
+            'qualified',
+            'proposal',
+            'negotiation',
+            'customer',
+            'lost',
+          ])
+          .nullable()
+          .optional(),
+        next_action_at: z.string().nullable().optional(),
+      }),
+    [t]
+  );
+
+  const form = useForm<PersonFormValues>({
+    resolver: zodResolver(personSchema),
+    defaultValues: {
+      name: '',
+      type: 'individual',
+      status: 'active',
+      birth_date: null,
+      gender: null,
+      job_title: '',
+      employer_company_id: null,
+      trade_name: '',
+      foundation_date: null,
+      legal_nature: '',
+      owner_user_id: null,
+      source: null,
+      lifecycle_stage: 'new',
+      next_action_at: '',
+    },
+  });
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const [contacts, setContacts] = useState<EditablePersonContact[]>([]);
+  const [addresses, setAddresses] = useState<EditablePersonAddress[]>([]);
+  const [documents, setDocuments] = useState<EditablePersonDocument[]>([]);
+  const [contactsOpen, setContactsOpen] = useState(true);
+  const [addressesOpen, setAddressesOpen] = useState(true);
+  const [documentsOpen, setDocumentsOpen] = useState(true);
+  const [loadingCEP, setLoadingCEP] = useState<Record<string, boolean>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [avatarId, setAvatarId] = useState<number | null>(null);
+  const [persistedAvatarId, setPersistedAvatarId] = useState<number | null>(
+    null
+  );
+  const [avatarPreviewUrl, setAvatarPreviewUrl] =
+    useState<string>('/placeholder.png');
+  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
+  const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasSavedChangesRef = useRef(false);
+  const contactValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
+  const addressLine1Refs = useRef<Record<string, HTMLInputElement | null>>({});
+  const documentValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  const focusWhenAvailable = (getElement: () => HTMLInputElement | null) => {
+    requestAnimationFrame(() => {
+      const element = getElement();
+      if (!element) {
+        setTimeout(() => {
+          getElement()?.focus();
+        }, 0);
+        return;
+      }
+
+      element.focus();
+    });
+  };
+
+  const watchType = watch('type');
+
+  const { data: ownerOptions = [] } = useQuery<UserOption[]>({
+    queryKey: ['contact-person-owner-options', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<UserOption[] | { data?: UserOption[] }>({
+        url: '/person/owner-options',
+        method: 'GET',
+      });
+      return Array.isArray(response.data)
+        ? response.data
+        : response.data?.data || [];
+    },
+    placeholderData: (old: UserOption[] | undefined) => old ?? [],
+  });
+
+  useEffect(() => {
+    if (canUseCompanyType || watchType !== 'company') {
+      return;
+    }
+
+    setValue('type', 'individual');
+  }, [canUseCompanyType, setValue, watchType]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    hasSavedChangesRef.current = false;
+    reset({
+      name: person?.name || '',
+      type: allowCompanyRegistration
+        ? person?.type || 'individual'
+        : 'individual',
+      status: person?.status || 'active',
+      birth_date: person?.birth_date ? new Date(person.birth_date) : null,
+      gender: person?.gender || null,
+      job_title: person?.job_title || '',
+      employer_company_id: person?.employer_company_id ?? null,
+      trade_name: person?.trade_name || '',
+      foundation_date: person?.foundation_date
+        ? new Date(person.foundation_date)
+        : null,
+      legal_nature: person?.legal_nature || '',
+      owner_user_id:
+        person?.owner_user_id ??
+        (person ? null : Number(user?.id || 0) || null),
+      source: person?.source || null,
+      lifecycle_stage: person?.lifecycle_stage || 'new',
+      next_action_at: toDatetimeLocalValue(person?.next_action_at || null),
+    });
+    const initialAvatarId = person?.avatar_id ?? null;
+    setAvatarId(initialAvatarId);
+    setPersistedAvatarId(initialAvatarId);
+    setAvatarPreviewUrl(getPersonAvatarUrl(initialAvatarId));
+    setIsUploadingAvatar(false);
+    setAvatarUploadProgress(0);
+
+    setContacts(
+      (person?.contact || []).map((contact, index) => ({
+        ...contact,
+        value: ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
+          String(contact.contact_type?.code || '').toUpperCase()
+        )
+          ? applyPhoneMask(contact.value || '')
+          : contact.value || '',
+        clientId: `contact-${contact.id ?? index}`,
+      }))
+    );
+
+    setAddresses(
+      (person?.address || []).map((address, index) => ({
+        ...address,
+        clientId: `address-${address.id ?? index}`,
+      }))
+    );
+
+    setDocuments(
+      (person?.document || []).map((document, index) => ({
+        ...document,
+        value:
+          String(document.document_type?.code || '').toUpperCase() === 'CPF'
+            ? applyCpfMask(document.value || '')
+            : String(document.document_type?.code || '').toUpperCase() ===
+                'CNPJ'
+              ? applyCnpjMask(document.value || '')
+              : document.value || '',
+        clientId: `document-${document.id ?? index}`,
+      }))
+    );
+
+    setContactsOpen(true);
+    setAddressesOpen(true);
+    setDocumentsOpen(true);
+    setLoadingCEP({});
+  }, [allowCompanyRegistration, open, person, reset, user?.id]);
+
+  const getPersonInitials = (name: string) =>
+    name
+      .split(' ')
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase() || '')
+      .join('');
+
+  const getPersonAvatarUrl = (fileId?: number | null) =>
+    typeof fileId === 'number' && fileId > 0
+      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${fileId}`
+      : '/placeholder.png';
+
+  const resolveApiUrl = (url: string) =>
+    /^https?:\/\//i.test(url)
+      ? url
+      : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${url}`;
+
+  const deleteFileById = async (fileId?: number | null) => {
+    if (!fileId || fileId <= 0) return;
+
+    try {
+      await request({
+        url: '/file',
+        method: 'DELETE',
+        data: { ids: [fileId] },
+      });
+    } catch {
+      // Ignore cleanup failure to keep form interaction stable.
+    }
+  };
+
+  const cleanupUnsavedAvatar = async () => {
+    if (avatarId && avatarId !== persistedAvatarId) {
+      await deleteFileById(avatarId);
+    }
+  };
+
+  const handleAvatarUpload = async (file: File) => {
+    if (!file.type.startsWith('image/')) {
+      toast.error(t('avatarInvalidType'));
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error(t('avatarTooLarge'));
+      return;
+    }
+
+    setIsUploadingAvatar(true);
+    setAvatarUploadProgress(0);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'contact/person/avatar');
+
+      const previousAvatarId = avatarId;
+
+      const { data } = await request<UploadedFilePayload>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (event) => {
+          if (!event.total) return;
+          const progress = Math.round((event.loaded * 100) / event.total);
+          setAvatarUploadProgress(progress);
+        },
+      });
+
+      const nextAvatarId = Number(data?.id);
+      if (!nextAvatarId) {
+        throw new Error(t('avatarUploadError'));
+      }
+
+      const openResponse = await request<OpenFilePayload>({
+        url: `/file/open/${nextAvatarId}`,
+        method: 'PUT',
+      });
+      const tempOpenUrl = String(openResponse?.data?.url || '').trim();
+
+      if (previousAvatarId && previousAvatarId !== persistedAvatarId) {
+        await deleteFileById(previousAvatarId);
+      }
+
+      setAvatarId(nextAvatarId);
+      setAvatarPreviewUrl(
+        tempOpenUrl.length > 0
+          ? resolveApiUrl(tempOpenUrl)
+          : getPersonAvatarUrl(nextAvatarId)
+      );
+      setAvatarUploadProgress(100);
+      toast.success(t('avatarUploadSuccess'));
+    } catch {
+      toast.error(t('avatarUploadError'));
+      setAvatarUploadProgress(0);
+    } finally {
+      setIsUploadingAvatar(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleSelectAvatar = () => {
+    if (!fileInputRef.current) return;
+    fileInputRef.current.value = '';
+    fileInputRef.current.click();
+  };
+
+  const handleRemoveAvatar = async () => {
+    if (isUploadingAvatar) return;
+
+    if (avatarId && avatarId !== persistedAvatarId) {
+      await deleteFileById(avatarId);
+    }
+
+    setAvatarId(null);
+    setAvatarPreviewUrl('/placeholder.png');
+    setAvatarUploadProgress(0);
+    toast.success(t('avatarRemoveSuccess'));
+  };
+
+  const handleSheetOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      hasSavedChangesRef.current = false;
+      onOpenChange(true);
+      return;
+    }
+
+    if (isUploadingAvatar || isSubmitting) {
+      return;
+    }
+
+    const shouldCleanup = !hasSavedChangesRef.current;
+    hasSavedChangesRef.current = false;
+
+    if (shouldCleanup) {
+      void cleanupUnsavedAvatar();
+    }
+
+    onOpenChange(false);
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+        event.preventDefault();
+        const formElement = document.getElementById(
+          'person-form'
+        ) as HTMLFormElement | null;
+        formElement?.requestSubmit();
+        return;
+      }
+
+      if (event.key === 'Escape' && !isSubmitting && !isUploadingAvatar) {
+        event.preventDefault();
+        handleSheetOpenChange(false);
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open, isSubmitting, isUploadingAvatar, handleSheetOpenChange]);
+
+  const getContactTypeCode = (contactTypeId?: number | null) =>
+    String(
+      contactTypes.find(
+        (contactType) => contactType.contact_type_id === contactTypeId
+      )?.code || ''
+    ).toUpperCase();
+
+  const getDocumentTypeCode = (documentTypeId?: number | null) =>
+    String(
+      documentTypes.find(
+        (documentType) => documentType.document_type_id === documentTypeId
+      )?.code || ''
+    ).toUpperCase();
+
+  const maskContactValueByType = (
+    value: string,
+    contactTypeId?: number | null,
+    fallbackCode?: string
+  ) => {
+    const code = (
+      fallbackCode || getContactTypeCode(contactTypeId)
+    ).toUpperCase();
+    if (['PHONE', 'MOBILE', 'WHATSAPP'].includes(code)) {
+      return applyPhoneMask(value);
+    }
+
+    return value;
+  };
+
+  const maskDocumentValueByType = (
+    value: string,
+    documentTypeId?: number | null,
+    fallbackCode?: string
+  ) => {
+    const code = (
+      fallbackCode || getDocumentTypeCode(documentTypeId)
+    ).toUpperCase();
+
+    if (code === 'CPF') {
+      return applyCpfMask(value);
+    }
+
+    if (code === 'CNPJ') {
+      return applyCnpjMask(value);
+    }
+
+    return value;
+  };
+
+  const resolveContactTypeIdByCodes = (codes: string[]) => {
+    const normalizedCodes = codes.map((code) => code.toUpperCase());
+    return (
+      contactTypes.find((contactType) =>
+        normalizedCodes.includes(String(contactType.code || '').toUpperCase())
+      )?.contact_type_id || null
+    );
+  };
+
+  const resolveDocumentTypeIdByCodes = (codes: string[]) => {
+    const normalizedCodes = codes.map((code) => code.toUpperCase());
+    return (
+      documentTypes.find((documentType) =>
+        normalizedCodes.includes(String(documentType.code || '').toUpperCase())
+      )?.document_type_id || null
+    );
+  };
+
+  const addContact = (preset: 'email' | 'phone' | 'blank' = 'blank') => {
+    const presetTypeId =
+      preset === 'email'
+        ? resolveContactTypeIdByCodes(['EMAIL'])
+        : preset === 'phone'
+          ? resolveContactTypeIdByCodes(['PHONE', 'MOBILE', 'WHATSAPP'])
+          : null;
+
+    const selectedTypeId = presetTypeId;
+    const hasPrimaryForType = contacts.some(
+      (contact) =>
+        selectedTypeId !== null &&
+        contact.contact_type_id === selectedTypeId &&
+        contact.is_primary
+    );
+
+    const clientId = createClientId('contact');
+
+    setContactsOpen(true);
+    setContacts((previous) => [
+      ...previous,
+      {
+        clientId,
+        value: '',
+        is_primary: selectedTypeId !== null ? !hasPrimaryForType : false,
+        contact_type_id: selectedTypeId,
+      },
+    ]);
+    focusWhenAvailable(() => contactValueRefs.current[clientId] || null);
+  };
+
+  const updateContact = (
+    clientId: string,
+    updates: Partial<EditablePersonContact>
+  ) => {
+    setContacts((previous) => {
+      const next = previous.map((contact) =>
+        contact.clientId === clientId ? { ...contact, ...updates } : contact
+      );
+      const current = next.find((contact) => contact.clientId === clientId);
+
+      if (!current?.is_primary) {
+        return next;
+      }
+
+      return next.map((contact) =>
+        contact.clientId !== clientId &&
+        contact.contact_type_id === current.contact_type_id
+          ? { ...contact, is_primary: false }
+          : contact
+      );
+    });
+  };
+
+  const removeContact = (clientId: string) => {
+    delete contactValueRefs.current[clientId];
+    setContacts((previous) => {
+      const removed = previous.find((contact) => contact.clientId === clientId);
+      const next = previous.filter((contact) => contact.clientId !== clientId);
+
+      if (!removed) {
+        return next;
+      }
+
+      const sameTypeContacts = next.filter(
+        (contact) => contact.contact_type_id === removed.contact_type_id
+      );
+      const fallbackContact = sameTypeContacts[0];
+
+      if (
+        removed.is_primary &&
+        fallbackContact &&
+        !sameTypeContacts.some((contact) => contact.is_primary)
+      ) {
+        return next.map((contact) =>
+          contact.clientId === fallbackContact.clientId
+            ? { ...contact, is_primary: true }
+            : contact
+        );
+      }
+
+      return next;
+    });
+  };
+
+  const setPrimaryContact = (clientId: string) => {
+    setContacts((previous) => {
+      const selected = previous.find(
+        (contact) => contact.clientId === clientId
+      );
+      if (!selected) return previous;
+
+      return previous.map((contact) =>
+        contact.contact_type_id === selected.contact_type_id
+          ? { ...contact, is_primary: contact.clientId === clientId }
+          : contact
+      );
+    });
+  };
+
+  const addAddress = () => {
+    const defaultType = ADDRESS_TYPE_OPTIONS[0]?.value || 'residential';
+    const hasPrimaryForType = addresses.some(
+      (address) => address.address_type === defaultType && address.is_primary
+    );
+
+    const clientId = createClientId('address');
+
+    setAddressesOpen(true);
+    setAddresses((previous) => [
+      ...previous,
+      {
+        clientId,
+        line1: '',
+        line2: '',
+        city: '',
+        state: '',
+        is_primary: !hasPrimaryForType,
+        address_type: defaultType,
+        postal_code: '',
+        country_code: 'BRA',
+      },
+    ]);
+    focusWhenAvailable(() => addressLine1Refs.current[clientId] || null);
+  };
+
+  const updateAddress = (
+    clientId: string,
+    updates: Partial<EditablePersonAddress>
+  ) => {
+    setAddresses((previous) => {
+      const next = previous.map((address) =>
+        address.clientId === clientId ? { ...address, ...updates } : address
+      );
+      const current = next.find((address) => address.clientId === clientId);
+
+      if (!current?.is_primary) {
+        return next;
+      }
+
+      return next.map((address) =>
+        address.clientId !== clientId &&
+        address.address_type === current.address_type
+          ? { ...address, is_primary: false }
+          : address
+      );
+    });
+  };
+
+  const removeAddress = (clientId: string) => {
+    delete addressLine1Refs.current[clientId];
+    setAddresses((previous) => {
+      const removed = previous.find((address) => address.clientId === clientId);
+      const next = previous.filter((address) => address.clientId !== clientId);
+
+      if (!removed) {
+        return next;
+      }
+
+      const sameTypeAddresses = next.filter(
+        (address) => address.address_type === removed.address_type
+      );
+      const fallbackAddress = sameTypeAddresses[0];
+
+      if (
+        removed.is_primary &&
+        fallbackAddress &&
+        !sameTypeAddresses.some((address) => address.is_primary)
+      ) {
+        return next.map((address) =>
+          address.clientId === fallbackAddress.clientId
+            ? { ...address, is_primary: true }
+            : address
+        );
+      }
+
+      return next;
+    });
+  };
+
+  const setPrimaryAddress = (clientId: string) => {
+    setAddresses((previous) => {
+      const selected = previous.find(
+        (address) => address.clientId === clientId
+      );
+      if (!selected) return previous;
+
+      return previous.map((address) =>
+        address.address_type === selected.address_type
+          ? { ...address, is_primary: address.clientId === clientId }
+          : address
+      );
+    });
+  };
+
+  const addDocument = (preset: 'cpf' | 'cnpj' | 'rg' | 'blank' = 'blank') => {
+    const presetTypeId =
+      preset === 'cpf'
+        ? resolveDocumentTypeIdByCodes(['CPF'])
+        : preset === 'cnpj'
+          ? resolveDocumentTypeIdByCodes(['CNPJ'])
+          : preset === 'rg'
+            ? resolveDocumentTypeIdByCodes(['RG'])
+            : null;
+
+    const clientId = createClientId('document');
+
+    setDocumentsOpen(true);
+    setDocuments((previous) => [
+      ...previous,
+      {
+        clientId,
+        value: '',
+        document_type_id: presetTypeId,
+      },
+    ]);
+    focusWhenAvailable(() => documentValueRefs.current[clientId] || null);
+  };
+
+  const updateDocument = (
+    clientId: string,
+    updates: Partial<EditablePersonDocument>
+  ) => {
+    setDocuments((previous) =>
+      previous.map((document) =>
+        document.clientId === clientId ? { ...document, ...updates } : document
+      )
+    );
+  };
+
+  const removeDocument = (clientId: string) => {
+    delete documentValueRefs.current[clientId];
+    setDocuments((previous) =>
+      previous.filter((document) => document.clientId !== clientId)
+    );
+  };
+
+  const handleCEP = async (
+    event: ChangeEvent<HTMLInputElement>,
+    clientId: string
+  ) => {
+    let value = event.target.value.replace(/\D/g, '');
+    if (value.length > 5) {
+      value = `${value.slice(0, 5)}-${value.slice(5, 8)}`;
+    }
+
+    updateAddress(clientId, { postal_code: value });
+
+    const rawCep = value.replace(/\D/g, '');
+    if (rawCep.length !== 8) return;
+
+    setLoadingCEP((previous) => ({ ...previous, [clientId]: true }));
+    const data = await fetchViaCep(rawCep);
+
+    if (data) {
+      updateAddress(clientId, {
+        line1: data.logradouro || '',
+        city: data.localidade || '',
+        state: data.uf || '',
+      });
+    }
+
+    setLoadingCEP((previous) => ({ ...previous, [clientId]: 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(', '),
+              })
+            );
+          }
+        }
+      }
+
+      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,
+          },
+        });
+
+        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,
+        });
+        toast.success(t('createSuccess'));
+      }
+
+      hasSavedChangesRef.current = true;
+      handleSheetOpenChange(false);
+      onSuccess();
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : null;
+      toast.error(message || (isEditing ? t('updateError') : t('createError')));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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>
+            </div>
+          </div>
+        </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 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 ? (
+                      <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>
+
+                  <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>
+                    </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>
+
+              <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>
+                  </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('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="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 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>
+
+                    {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 || ''
+                          }
+                        />
+                      </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('legalNature')}
+                      </Label>
+                      <Input
+                        placeholder={t('legalNaturePlaceholder')}
+                        {...register('legal_nature')}
+                        className="h-9"
+                      />
+                    </div>
+                  </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>
+
+                  <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>
+
+              <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';
+                            }
+                            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-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>
+                    </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>
+
+              <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>
+
+                      <Input
+                        placeholder={t('addressComplementPlaceholder')}
+                        value={address.line2 || ''}
+                        onChange={(event) =>
+                          updateAddress(address.clientId, {
+                            line2: event.target.value,
+                          })
+                        }
+                        className="h-8 text-xs"
+                      />
+
+                      <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])}
+                          onChange={(event) =>
+                            updateAddress(address.clientId, {
+                              state: 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')}
+                          />
+                        </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>
+
+              <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
+                          }
+                          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 ? (
+              <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="submit"
+              form="person-form"
+              className="w-full"
+              disabled={isSubmitting || isUploadingAvatar}
+            >
+              {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>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {t('formShortcutsHint')}
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}