@hed-hog/contact 0.0.303 → 0.0.305

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

@@ -1,11 +1,22 @@
 'use client';
 
+import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import {
+  ADDRESS_TYPE_OPTIONS,
+  type ContactTypeOption,
+  type DocumentTypeOption,
+  type Person,
+} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+import { CopyButton } from '@/components/copy-button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
-import { FormActions } from '@/components/ui/form-actions';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -14,6 +25,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
 import {
   Select,
@@ -22,7 +34,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
   SheetContent,
@@ -30,13 +41,61 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Building2, ChevronDown, Globe, MapPin, Users } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  Building2,
+  CheckCircle2,
+  ChevronDown,
+  ChevronUp,
+  FileText,
+  Globe,
+  LayoutGrid,
+  List,
+  Loader2,
+  Mail,
+  MapPin,
+  Pencil,
+  Phone,
+  Plus,
+  Star,
+  Trash2,
+  Users,
+  XCircle,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, useEffect, useMemo } from 'react';
+import {
+  type ChangeEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
-import type { Account, AccountFormValues, UserOption } from './account-types';
+import type {
+  Account,
+  AccountAddress,
+  AccountContact,
+  AccountDocument,
+  AccountFormValues,
+  AccountLifecycleStage,
+  PaginatedResult,
+  UserOption,
+} from './account-types';
 
 type AccountFormData = {
   name: string;
@@ -44,14 +103,24 @@ type AccountFormData = {
   status: 'active' | 'inactive';
   industry: string | null;
   website: string | null;
-  email: string | null;
-  phone: string | null;
   owner_user_id: number | null;
   annual_revenue: number | null;
   employee_count: number | null;
-  lifecycle_stage: 'prospect' | 'customer' | 'churned' | 'inactive' | null;
-  city: string | null;
-  state: string | null;
+  lifecycle_stage: AccountLifecycleStage | null;
+};
+
+type EditableAccountContact = Omit<AccountContact, 'contact_type_id'> & {
+  clientId: string;
+  contact_type_id: number | null;
+};
+
+type EditableAccountAddress = AccountAddress & {
+  clientId: string;
+};
+
+type EditableAccountDocument = Omit<AccountDocument, 'document_type_id'> & {
+  clientId: string;
+  document_type_id: number | null;
 };
 
 interface AccountFormSheetProps {
@@ -59,7 +128,12 @@ interface AccountFormSheetProps {
   onOpenChange: (open: boolean) => void;
   account?: Account | null;
   owners: UserOption[];
-  onSubmit: (data: AccountFormValues) => Promise<void>;
+  contactTypes: ContactTypeOption[];
+  documentTypes: DocumentTypeOption[];
+  onSubmit: (
+    data: AccountFormValues,
+    accountId?: number | null
+  ) => Promise<{ id: number | null }>;
   isLoading?: boolean;
 }
 
@@ -68,6 +142,86 @@ function emptyToNull(value: string | null | undefined) {
   return normalized ? normalized : 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)}`;
+}
+
+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 getPersonInitials(name: string) {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('');
+}
+
 function SectionHeader({
   title,
   description,
@@ -90,15 +244,74 @@ function SectionHeader({
   );
 }
 
+const ACCOUNT_FORM_DRAFT_STORAGE_KEY = 'contact-account-form-draft';
+
+type AccountDraftPayload = {
+  mode: 'create' | 'edit';
+  savedAccountId: number | null;
+  values: AccountFormData;
+  contacts: EditableAccountContact[];
+  addresses: EditableAccountAddress[];
+  documents: EditableAccountDocument[];
+  localCollaborators: Person[];
+  removedCollaboratorIds: number[];
+};
+
 export function AccountFormSheet({
   open,
   onOpenChange,
   account,
   owners,
+  contactTypes,
+  documentTypes,
   onSubmit,
   isLoading = false,
 }: AccountFormSheetProps) {
   const t = useTranslations('contact.AccountsPage');
+  const personT = useTranslations('contact.ContactPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const [contacts, setContacts] = useState<EditableAccountContact[]>([]);
+  const [addresses, setAddresses] = useState<EditableAccountAddress[]>([]);
+  const [documents, setDocuments] = useState<EditableAccountDocument[]>([]);
+  const [contactsOpen, setContactsOpen] = useState(true);
+  const [addressesOpen, setAddressesOpen] = useState(true);
+  const [documentsOpen, setDocumentsOpen] = useState(true);
+  const [loadingCEP, setLoadingCEP] = useState<Record<string, boolean>>({});
+  const [savedAccountId, setSavedAccountId] = useState<number | null>(
+    account?.id ?? null
+  );
+  const [collaboratorSheetOpen, setCollaboratorSheetOpen] = useState(false);
+  const [collaboratorToEdit, setCollaboratorToEdit] = useState<Person | null>(
+    null
+  );
+  const [localCollaborators, setLocalCollaborators] = useState<Person[]>([]);
+  const [removedCollaboratorIds, setRemovedCollaboratorIds] = useState<
+    number[]
+  >([]);
+  const [collaboratorPickerKey, setCollaboratorPickerKey] = useState(0);
+  const [collaboratorsViewMode, setCollaboratorsViewMode] = useState<
+    'cards' | 'table'
+  >('cards');
+  const contactValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
+  const addressLine1Refs = useRef<Record<string, HTMLInputElement | null>>({});
+  const documentValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  const emptyCollaboratorPage = useMemo<PaginatedResult<Person>>(
+    () => ({
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 100,
+      lastPage: 1,
+      prev: null,
+      next: null,
+    }),
+    []
+  );
+
+  const currentAccountId = account?.id ?? savedAccountId ?? null;
+  const isPersistedAccount = Boolean(currentAccountId);
 
   const accountFormSchema = useMemo(
     () =>
@@ -108,14 +321,6 @@ export function AccountFormSheet({
         status: z.enum(['active', 'inactive']),
         industry: z.string().nullable(),
         website: z.string().nullable(),
-        email: z
-          .string()
-          .nullable()
-          .refine(
-            (value) => !value || z.string().email().safeParse(value).success,
-            t('form.validation.invalidEmail')
-          ),
-        phone: z.string().nullable(),
         owner_user_id: z.number().nullable(),
         annual_revenue: z
           .number()
@@ -135,14 +340,6 @@ export function AccountFormSheet({
         lifecycle_stage: z
           .enum(['prospect', 'customer', 'churned', 'inactive'])
           .nullable(),
-        city: z.string().nullable(),
-        state: z
-          .string()
-          .nullable()
-          .refine(
-            (value) => !value || value.trim().length <= 2,
-            t('form.validation.stateMaxLength')
-          ),
       }),
     [t]
   );
@@ -155,500 +352,1645 @@ export function AccountFormSheet({
       status: 'active',
       industry: null,
       website: null,
-      email: null,
-      phone: null,
       owner_user_id: null,
       annual_revenue: null,
       employee_count: null,
       lifecycle_stage: 'prospect',
-      city: null,
-      state: null,
     },
   });
 
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
+  const {
+    data: collaboratorPage = emptyCollaboratorPage,
+    refetch: refetchCollaborators,
+  } = useQuery<PaginatedResult<Person>>({
+    queryKey: [
+      'contact-account-collaborators',
+      currentAccountId,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      if (!currentAccountId) {
+        return emptyCollaboratorPage;
+      }
 
-    if (account) {
-      form.reset({
-        name: account.name,
-        trade_name: account.trade_name ?? null,
-        status: account.status,
-        industry: account.industry ?? null,
-        website: account.website ?? null,
-        email: account.email ?? null,
-        phone: account.phone ?? null,
-        owner_user_id: account.owner_user_id ?? null,
-        annual_revenue: account.annual_revenue ?? null,
-        employee_count: account.employee_count ?? null,
-        lifecycle_stage: account.lifecycle_stage ?? 'prospect',
-        city: account.city ?? null,
-        state: account.state ?? null,
-      });
-      return;
-    }
+      const params = new URLSearchParams();
+      params.set('page', '1');
+      params.set('pageSize', '100');
+      params.set('type', 'individual');
+      params.set('employer_company_id', String(currentAccountId));
 
-    form.reset({
-      name: '',
-      trade_name: null,
-      status: 'active',
-      industry: null,
-      website: null,
-      email: null,
-      phone: null,
-      owner_user_id: null,
-      annual_revenue: null,
-      employee_count: null,
-      lifecycle_stage: 'prospect',
-      city: null,
-      state: null,
-    });
-  }, [account, form, open]);
+      const response = await request<PaginatedResult<Person>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
 
-  const handleSubmit = async (data: AccountFormData) => {
-    await onSubmit({
-      name: data.name.trim(),
-      trade_name: emptyToNull(data.trade_name),
-      status: data.status,
-      industry: emptyToNull(data.industry),
-      website: emptyToNull(data.website),
-      email: emptyToNull(data.email),
-      phone: emptyToNull(data.phone),
-      owner_user_id: data.owner_user_id ?? null,
-      annual_revenue: data.annual_revenue ?? null,
-      employee_count: data.employee_count ?? null,
-      lifecycle_stage: data.lifecycle_stage ?? null,
-      city: emptyToNull(data.city),
-      state: emptyToNull(data.state)?.toUpperCase() ?? null,
-    });
-  };
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? emptyCollaboratorPage,
+  });
 
   const watchedName = useWatch({
     control: form.control,
     name: 'name',
   });
+
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
   const additionalDetailsDefaultOpen = Boolean(
     account?.industry ||
     account?.annual_revenue != null ||
     account?.employee_count != null
   );
 
+  const upsertLocalCollaborator = useCallback(
+    (person: Person | null | undefined) => {
+      if (!person?.id) {
+        return;
+      }
+
+      setRemovedCollaboratorIds((previous) =>
+        previous.filter((item) => item !== Number(person.id))
+      );
+
+      setLocalCollaborators((previous) => {
+        const next = previous.filter((item) => item.id !== person.id);
+        next.push(person);
+        return next.sort((left, right) => left.name.localeCompare(right.name));
+      });
+    },
+    []
+  );
+
+  const removeCollaborator = useCallback((personId: number) => {
+    setRemovedCollaboratorIds((previous) =>
+      previous.includes(personId) ? previous : [...previous, personId]
+    );
+    setLocalCollaborators((previous) =>
+      previous.filter((item) => item.id !== personId)
+    );
+  }, []);
+
+  const collaborators = useMemo(() => {
+    const merged = new Map<number, Person>();
+    const removedIds = new Set(removedCollaboratorIds);
+
+    for (const person of collaboratorPage.data ?? []) {
+      if (!removedIds.has(Number(person.id))) {
+        merged.set(person.id, person);
+      }
+    }
+
+    for (const person of localCollaborators) {
+      if (!removedIds.has(Number(person.id))) {
+        merged.set(person.id, person);
+      }
+    }
+
+    return Array.from(merged.values()).sort((left, right) =>
+      left.name.localeCompare(right.name)
+    );
+  }, [collaboratorPage.data, localCollaborators, removedCollaboratorIds]);
+
+  const collaboratorPersonIds = useMemo(
+    () =>
+      collaborators
+        .map((person) => Number(person.id))
+        .filter((personId) => Number.isInteger(personId) && personId > 0),
+    [collaborators]
+  );
+
+  const loadCollaboratorOptions = useCallback(
+    async ({
+      page,
+      pageSize,
+      search,
+    }: {
+      page: number;
+      pageSize: number;
+      search: string;
+    }) => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      params.set('type', 'individual');
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      const response = await request<PaginatedResult<Person>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
+
+      const payload = response?.data ?? emptyCollaboratorPage;
+      const items = (payload.data ?? []).filter((person) => {
+        const personId = Number(person.id);
+        return !collaboratorPersonIds.includes(personId);
+      });
+
+      return {
+        items,
+        hasMore: Boolean(payload.next) || items.length >= pageSize,
+      };
+    },
+    [collaboratorPersonIds, emptyCollaboratorPage, request]
+  );
+
   const companyPreviewName =
     watchedName?.trim() || account?.name || t('form.summary.newCompany');
 
+  const hasDraftContent = useMemo(
+    () =>
+      Boolean(
+        (watchedFormValues?.name ?? '').trim() ||
+        (watchedFormValues?.trade_name ?? '').trim() ||
+        (watchedFormValues?.industry ?? '').trim() ||
+        (watchedFormValues?.website ?? '').trim() ||
+        watchedFormValues?.owner_user_id != null ||
+        watchedFormValues?.annual_revenue != null ||
+        watchedFormValues?.employee_count != null ||
+        contacts.length > 0 ||
+        addresses.length > 0 ||
+        documents.length > 0 ||
+        localCollaborators.length > 0 ||
+        removedCollaboratorIds.length > 0
+      ),
+    [
+      watchedFormValues,
+      contacts,
+      addresses,
+      documents,
+      localCollaborators,
+      removedCollaboratorIds,
+    ]
+  );
+
+  const draftValue = useMemo<AccountDraftPayload>(
+    () => ({
+      mode: currentAccountId ? 'edit' : 'create',
+      savedAccountId: currentAccountId,
+      values: {
+        name: watchedFormValues?.name ?? '',
+        trade_name: watchedFormValues?.trade_name ?? null,
+        status: watchedFormValues?.status ?? 'active',
+        industry: watchedFormValues?.industry ?? null,
+        website: watchedFormValues?.website ?? null,
+        owner_user_id: watchedFormValues?.owner_user_id ?? null,
+        annual_revenue: watchedFormValues?.annual_revenue ?? null,
+        employee_count: watchedFormValues?.employee_count ?? null,
+        lifecycle_stage: watchedFormValues?.lifecycle_stage ?? 'prospect',
+      },
+      contacts,
+      addresses,
+      documents,
+      localCollaborators,
+      removedCollaboratorIds,
+    }),
+    [
+      addresses,
+      contacts,
+      currentAccountId,
+      documents,
+      localCollaborators,
+      removedCollaboratorIds,
+      watchedFormValues,
+    ]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<AccountDraftPayload>({
+    storageKey: ACCOUNT_FORM_DRAFT_STORAGE_KEY,
+    value: draftValue,
+    hasData: hasDraftContent,
+    enabled: open,
+  });
+
+  const [draftStatusTick, setDraftStatusTick] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!draftSavedAt) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setDraftStatusTick(Date.now());
+    }, 60_000);
+
+    return () => window.clearInterval(interval);
+  }, [draftSavedAt]);
+
+  const draftStatusContent = useMemo(() => {
+    void draftStatusTick;
+
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    if (currentLocaleCode.startsWith('pt')) {
+      return `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`;
+    }
+
+    return `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [
+    draftSavedAt,
+    currentLocaleCode,
+    draftStatusTick,
+    getSettingValue,
+    hasDraft,
+  ]);
+
+  const focusWhenAvailable = (getElement: () => HTMLInputElement | null) => {
+    requestAnimationFrame(() => {
+      const element = getElement();
+      if (!element) {
+        setTimeout(() => {
+          getElement()?.focus();
+        }, 0);
+        return;
+      }
+
+      element.focus();
+    });
+  };
+
+  const getContactTypeCode = useCallback(
+    (contactTypeId?: number | null) =>
+      String(
+        contactTypes.find(
+          (contactType) => contactType.contact_type_id === contactTypeId
+        )?.code || ''
+      ).toUpperCase(),
+    [contactTypes]
+  );
+
+  const getDocumentTypeCode = useCallback(
+    (documentTypeId?: number | null) =>
+      String(
+        documentTypes.find(
+          (documentType) => documentType.document_type_id === documentTypeId
+        )?.code || ''
+      ).toUpperCase(),
+    [documentTypes]
+  );
+
+  const resolveContactTypeId = useCallback(
+    (code: string) =>
+      contactTypes.find(
+        (contactType) => String(contactType.code).toUpperCase() === code
+      )?.contact_type_id ?? null,
+    [contactTypes]
+  );
+
+  const resolveDocumentTypeId = useCallback(
+    (code: string) =>
+      documentTypes.find(
+        (documentType) => String(documentType.code).toUpperCase() === code
+      )?.document_type_id ?? null,
+    [documentTypes]
+  );
+
+  const maskContactValueByType = useCallback(
+    (value: string, contactTypeId?: number | null) => {
+      const contactTypeCode = getContactTypeCode(contactTypeId);
+      if (['PHONE', 'MOBILE', 'WHATSAPP'].includes(contactTypeCode)) {
+        return applyPhoneMask(value);
+      }
+
+      return value;
+    },
+    [getContactTypeCode]
+  );
+
+  const maskDocumentValueByType = useCallback(
+    (value: string, documentTypeId?: number | null) => {
+      const documentTypeCode = getDocumentTypeCode(documentTypeId);
+      if (documentTypeCode === 'CPF') {
+        return applyCpfMask(value);
+      }
+      if (documentTypeCode === 'CNPJ') {
+        return applyCnpjMask(value);
+      }
+
+      return value;
+    },
+    [getDocumentTypeCode]
+  );
+
+  const getPersonPrimaryContact = (
+    person: Person,
+    codes: string[]
+  ): string | null => {
+    const upperCodes = codes.map((code) => code.toUpperCase());
+    const contactTypeIds = contactTypes
+      .filter((contactType) =>
+        upperCodes.includes(String(contactType.code).toUpperCase())
+      )
+      .map((contactType) => contactType.contact_type_id);
+
+    const matches =
+      person.contact?.filter((contact) => {
+        const nestedCode = String(
+          contact.contact_type?.code || ''
+        ).toUpperCase();
+        return (
+          contactTypeIds.includes(contact.contact_type_id) ||
+          upperCodes.includes(nestedCode)
+        );
+      }) ?? [];
+
+    const primary = matches.find((contact) => contact.is_primary) ?? matches[0];
+    if (!primary?.value) {
+      return null;
+    }
+
+    return upperCodes.some((code) =>
+      ['PHONE', 'MOBILE', 'WHATSAPP'].includes(code)
+    )
+      ? applyPhoneMask(primary.value)
+      : primary.value;
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const storedDraft = !account ? loadDraft() : null;
+
+    form.reset({
+      name: storedDraft?.payload.values?.name ?? account?.name ?? '',
+      trade_name:
+        storedDraft?.payload.values?.trade_name ?? account?.trade_name ?? null,
+      status:
+        storedDraft?.payload.values?.status ?? account?.status ?? 'active',
+      industry:
+        storedDraft?.payload.values?.industry ?? account?.industry ?? null,
+      website: storedDraft?.payload.values?.website ?? account?.website ?? null,
+      owner_user_id:
+        storedDraft?.payload.values?.owner_user_id ??
+        account?.owner_user_id ??
+        null,
+      annual_revenue:
+        storedDraft?.payload.values?.annual_revenue ??
+        account?.annual_revenue ??
+        null,
+      employee_count:
+        storedDraft?.payload.values?.employee_count ??
+        account?.employee_count ??
+        null,
+      lifecycle_stage:
+        storedDraft?.payload.values?.lifecycle_stage ??
+        account?.lifecycle_stage ??
+        'prospect',
+    });
+
+    const nextContacts: EditableAccountContact[] = (account?.contact ?? []).map(
+      (contact, index) => ({
+        ...contact,
+        clientId: `contact-${contact.id ?? index}`,
+        contact_type_id: contact.contact_type_id ?? null,
+        value: maskContactValueByType(
+          contact.value || '',
+          contact.contact_type_id
+        ),
+      })
+    );
+
+    if (nextContacts.length === 0) {
+      if (account?.email) {
+        nextContacts.push({
+          clientId: createClientId('contact'),
+          value: account.email,
+          is_primary: true,
+          contact_type_id: resolveContactTypeId('EMAIL'),
+        });
+      }
+
+      if (account?.phone) {
+        nextContacts.push({
+          clientId: createClientId('contact'),
+          value: applyPhoneMask(account.phone),
+          is_primary: true,
+          contact_type_id:
+            resolveContactTypeId('PHONE') ?? resolveContactTypeId('MOBILE'),
+        });
+      }
+    }
+
+    const nextAddresses: EditableAccountAddress[] = (
+      account?.address ?? []
+    ).map((address, index) => ({
+      ...address,
+      clientId: `address-${address.id ?? index}`,
+    }));
+
+    if (nextAddresses.length === 0 && (account?.city || account?.state)) {
+      nextAddresses.push({
+        clientId: createClientId('address'),
+        line1: '',
+        line2: '',
+        city: account.city ?? '',
+        state: account.state ?? '',
+        country_code: 'BRA',
+        postal_code: '',
+        is_primary: true,
+        address_type: 'commercial',
+      });
+    }
+
+    const nextDocuments: EditableAccountDocument[] = (
+      account?.document ?? []
+    ).map((document, index) => ({
+      ...document,
+      clientId: `document-${document.id ?? index}`,
+      document_type_id: document.document_type_id ?? null,
+      value: maskDocumentValueByType(
+        document.value || '',
+        document.document_type_id
+      ),
+    }));
+
+    const frame = window.requestAnimationFrame(() => {
+      setSavedAccountId(
+        storedDraft?.payload.savedAccountId ?? account?.id ?? null
+      );
+      setContacts(storedDraft?.payload.contacts ?? nextContacts);
+      setAddresses(storedDraft?.payload.addresses ?? nextAddresses);
+      setDocuments(storedDraft?.payload.documents ?? nextDocuments);
+      setContactsOpen(true);
+      setAddressesOpen(true);
+      setDocumentsOpen(true);
+      setLoadingCEP({});
+      setLocalCollaborators(storedDraft?.payload.localCollaborators ?? []);
+      setRemovedCollaboratorIds(
+        storedDraft?.payload.removedCollaboratorIds ?? []
+      );
+      setCollaboratorPickerKey(0);
+      setCollaboratorSheetOpen(false);
+      setCollaboratorToEdit(null);
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [
+    account,
+    form,
+    loadDraft,
+    maskContactValueByType,
+    maskDocumentValueByType,
+    open,
+    resolveContactTypeId,
+  ]);
+
+  const addContact = (kind: 'email' | 'phone' | 'blank' = 'blank') => {
+    const nextContact: EditableAccountContact = {
+      clientId: createClientId('contact'),
+      value: '',
+      is_primary: true,
+      contact_type_id:
+        kind === 'email'
+          ? resolveContactTypeId('EMAIL')
+          : kind === 'phone'
+            ? (resolveContactTypeId('PHONE') ?? resolveContactTypeId('MOBILE'))
+            : null,
+    };
+
+    setContactsOpen(true);
+    setContacts((previous) => [...previous, nextContact]);
+    focusWhenAvailable(
+      () => contactValueRefs.current[nextContact.clientId] ?? null
+    );
+  };
+
+  const updateContact = (
+    clientId: string,
+    updates: Partial<EditableAccountContact>
+  ) => {
+    setContacts((previous) =>
+      previous.map((contact) =>
+        contact.clientId === clientId ? { ...contact, ...updates } : contact
+      )
+    );
+  };
+
+  const setPrimaryContact = (clientId: string) => {
+    const targetContact = contacts.find(
+      (contact) => contact.clientId === clientId
+    );
+    if (!targetContact) return;
+
+    setContacts((previous) =>
+      previous.map((contact) => ({
+        ...contact,
+        is_primary:
+          contact.clientId === clientId
+            ? true
+            : contact.contact_type_id === targetContact.contact_type_id
+              ? false
+              : contact.is_primary,
+      }))
+    );
+  };
+
+  const removeContact = (clientId: string) => {
+    delete contactValueRefs.current[clientId];
+    setContacts((previous) =>
+      previous.filter((contact) => contact.clientId !== clientId)
+    );
+  };
+
+  const addAddress = () => {
+    const nextAddress: EditableAccountAddress = {
+      clientId: createClientId('address'),
+      line1: '',
+      line2: '',
+      city: '',
+      state: '',
+      country_code: 'BRA',
+      postal_code: '',
+      is_primary: addresses.length === 0,
+      address_type: 'commercial',
+    };
+
+    setAddressesOpen(true);
+    setAddresses((previous) => [...previous, nextAddress]);
+    focusWhenAvailable(
+      () => addressLine1Refs.current[nextAddress.clientId] ?? null
+    );
+  };
+
+  const updateAddress = (
+    clientId: string,
+    updates: Partial<EditableAccountAddress>
+  ) => {
+    setAddresses((previous) =>
+      previous.map((address) =>
+        address.clientId === clientId ? { ...address, ...updates } : address
+      )
+    );
+  };
+
+  const setPrimaryAddress = (clientId: string) => {
+    setAddresses((previous) =>
+      previous.map((address) => ({
+        ...address,
+        is_primary: address.clientId === clientId,
+      }))
+    );
+  };
+
+  const removeAddress = (clientId: string) => {
+    delete addressLine1Refs.current[clientId];
+    setAddresses((previous) =>
+      previous.filter((address) => address.clientId !== clientId)
+    );
+  };
+
+  const addDocument = (kind: 'cnpj' | 'cpf' | 'blank' = 'blank') => {
+    const nextDocument: EditableAccountDocument = {
+      clientId: createClientId('document'),
+      value: '',
+      document_type_id:
+        kind === 'cnpj'
+          ? resolveDocumentTypeId('CNPJ')
+          : kind === 'cpf'
+            ? resolveDocumentTypeId('CPF')
+            : null,
+    };
+
+    setDocumentsOpen(true);
+    setDocuments((previous) => [...previous, nextDocument]);
+    focusWhenAvailable(
+      () => documentValueRefs.current[nextDocument.clientId] ?? null
+    );
+  };
+
+  const updateDocument = (
+    clientId: string,
+    updates: Partial<EditableAccountDocument>
+  ) => {
+    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 handleSubmit = async (data: AccountFormData) => {
+    const normalizedContacts = 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,
+      }));
+
+    const normalizedAddresses = 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,
+      }));
+
+    const normalizedDocuments = 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 =
+      normalizedContacts.find(
+        (contact) => getContactTypeCode(contact.contact_type_id) === 'EMAIL'
+      )?.value ?? null;
+
+    const primaryPhone =
+      normalizedContacts.find((contact) =>
+        ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
+          getContactTypeCode(contact.contact_type_id)
+        )
+      )?.value ?? null;
+
+    const primaryAddress =
+      normalizedAddresses.find((address) => address.is_primary) ||
+      normalizedAddresses[0] ||
+      null;
+
+    const result = await onSubmit(
+      {
+        name: data.name.trim(),
+        trade_name: emptyToNull(data.trade_name),
+        status: data.status,
+        industry: emptyToNull(data.industry),
+        website: emptyToNull(data.website),
+        email: emptyToNull(primaryEmail),
+        phone: emptyToNull(primaryPhone),
+        owner_user_id: data.owner_user_id ?? null,
+        annual_revenue: data.annual_revenue ?? null,
+        employee_count: data.employee_count ?? null,
+        lifecycle_stage: data.lifecycle_stage ?? null,
+        city: emptyToNull(primaryAddress?.city),
+        state: emptyToNull(primaryAddress?.state)?.toUpperCase() ?? null,
+        collaborator_person_ids: collaboratorPersonIds,
+        contacts: normalizedContacts,
+        addresses: normalizedAddresses,
+        documents: normalizedDocuments,
+      },
+      currentAccountId
+    );
+
+    const nextAccountId = result?.id ?? currentAccountId;
+    if (!currentAccountId) {
+      if (nextAccountId) {
+        setSavedAccountId(nextAccountId);
+      }
+      return;
+    }
+
+    clearDraft();
+    onOpenChange(false);
+  };
+
   const handleSheetOpenChange = (nextOpen: boolean) => {
     if (isLoading && !nextOpen) {
       return;
     }
 
+    if (!nextOpen) {
+      setSavedAccountId(null);
+      setLocalCollaborators([]);
+      setRemovedCollaboratorIds([]);
+      setCollaboratorPickerKey(0);
+    }
+
     onOpenChange(nextOpen);
   };
 
   return (
-    <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-      <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-lg">
-        <SheetHeader className="shrink-0 border-b px-4 py-4 text-left">
-          <div className="flex items-start gap-3">
-            <div
-              className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${
-                account
-                  ? 'bg-amber-500/10 text-amber-600'
-                  : 'bg-blue-500/10 text-blue-600'
-              }`}
-            >
-              <Building2 className="h-5 w-5" />
-            </div>
-            <div className="min-w-0 space-y-1">
-              <SheetTitle>
-                {account ? t('form.editTitle') : t('form.createTitle')}
-              </SheetTitle>
-              <SheetDescription>
-                {account
-                  ? t('form.editDescription')
-                  : t('form.createDescription')}
-              </SheetDescription>
+    <>
+      <Sheet open={open} onOpenChange={handleSheetOpenChange}>
+        <SheetContent className="flex h-full min-h-0 w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl">
+          <SheetHeader className="shrink-0 border-b px-4 py-4 text-left sm:px-6">
+            <div className="flex items-start gap-3">
+              <div
+                className={cn(
+                  'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl',
+                  isPersistedAccount
+                    ? 'bg-amber-500/10 text-amber-600'
+                    : 'bg-blue-500/10 text-blue-600'
+                )}
+              >
+                <Building2 className="h-5 w-5" />
+              </div>
+              <div className="min-w-0 space-y-1">
+                <SheetTitle>
+                  {isPersistedAccount
+                    ? t('form.editTitle')
+                    : t('form.createTitle')}
+                </SheetTitle>
+                <SheetDescription>
+                  {isPersistedAccount
+                    ? t('form.editDescription')
+                    : t('form.createDescription')}
+                </SheetDescription>
+              </div>
             </div>
-          </div>
-        </SheetHeader>
-
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(handleSubmit)}
-            className="flex h-full flex-col [&_button[role='combobox']]:h-9 [&_input]:h-9 [&_label]:text-xs [&_label]:font-medium"
-          >
-            <div className="flex-1 overflow-y-auto">
-              <div className="space-y-5 px-4 py-4">
-                <div className="rounded-xl border bg-muted/20 p-3">
-                  <p className="truncate text-sm font-semibold text-foreground">
-                    {companyPreviewName}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {account
-                      ? t('form.summary.editHint')
-                      : t('form.summary.createHint')}
-                  </p>
-                </div>
+          </SheetHeader>
 
-                <section className="space-y-3">
-                  <SectionHeader
-                    title={t('form.sections.identityTitle')}
-                    description={t('form.sections.identityDescription')}
-                    icon={<Building2 className="h-4 w-4" />}
-                  />
-
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="name"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5 sm:col-span-2">
-                          <FormLabel>{t('form.companyName')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={t('form.placeholders.companyName')}
-                              autoFocus={open}
-                              autoComplete="organization"
-                              {...field}
-                              disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="flex h-full min-h-0 flex-col [&_button[role='combobox']]:h-9 [&_input]:h-9 [&_label]:text-xs [&_label]:font-medium"
+            >
+              <div className="min-h-0 flex-1 overflow-y-auto">
+                <div className="space-y-5 px-4 py-4 sm:px-6">
+                  <section className="space-y-3">
+                    <SectionHeader
+                      title={t('form.sections.identityTitle')}
+                      description={t('form.sections.identityDescription')}
+                      icon={<Building2 className="h-4 w-4" />}
                     />
 
-                    <FormField
-                      control={form.control}
-                      name="trade_name"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5 sm:col-span-2">
-                          <FormLabel>{t('form.tradeName')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={t('form.placeholders.tradeName')}
-                              autoComplete="organization-title"
-                              value={field.value ?? ''}
-                              onChange={(event) =>
-                                field.onChange(event.target.value || null)
-                              }
-                              disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </section>
-
-                <section className="space-y-3">
-                  <SectionHeader
-                    title={t('form.sections.relationshipTitle')}
-                    description={t('form.sections.relationshipDescription')}
-                    icon={<Users className="h-4 w-4" />}
-                  />
-
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="status"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.status')}</FormLabel>
-                          <Select
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            disabled={isLoading}
-                          >
+                    <div className="grid grid-cols-2 gap-3">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="space-y-1.5 ">
+                            <FormLabel>{t('form.companyName')}</FormLabel>
                             <FormControl>
-                              <SelectTrigger className="w-full">
-                                <SelectValue />
-                              </SelectTrigger>
+                              <Input
+                                placeholder={t('form.placeholders.companyName')}
+                                autoFocus={open}
+                                autoComplete="organization"
+                                {...field}
+                                disabled={isLoading}
+                              />
                             </FormControl>
-                            <SelectContent>
-                              <SelectItem value="active">
-                                {t('status_active')}
-                              </SelectItem>
-                              <SelectItem value="inactive">
-                                {t('status_inactive')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                    <FormField
-                      control={form.control}
-                      name="lifecycle_stage"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.lifecycleStage')}</FormLabel>
-                          <Select
-                            value={field.value ?? 'prospect'}
-                            onValueChange={(value) =>
-                              field.onChange(value || null)
-                            }
-                            disabled={isLoading}
-                          >
+                      <FormField
+                        control={form.control}
+                        name="trade_name"
+                        render={({ field }) => (
+                          <FormItem className="space-y-1.5">
+                            <FormLabel>{t('form.tradeName')}</FormLabel>
                             <FormControl>
-                              <SelectTrigger className="w-full">
-                                <SelectValue />
-                              </SelectTrigger>
+                              <Input
+                                placeholder={t('form.placeholders.tradeName')}
+                                autoComplete="organization-title"
+                                value={field.value ?? ''}
+                                onChange={(event) =>
+                                  field.onChange(event.target.value || null)
+                                }
+                                disabled={isLoading}
+                              />
                             </FormControl>
-                            <SelectContent>
-                              <SelectItem value="prospect">
-                                {t('stage_prospect')}
-                              </SelectItem>
-                              <SelectItem value="customer">
-                                {t('stage_customer')}
-                              </SelectItem>
-                              <SelectItem value="churned">
-                                {t('stage_churned')}
-                              </SelectItem>
-                              <SelectItem value="inactive">
-                                {t('stage_inactive')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </section>
 
-                    <FormField
-                      control={form.control}
-                      name="owner_user_id"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5 sm:col-span-2">
-                          <FormLabel>{t('form.owner')}</FormLabel>
-                          <Select
-                            value={
-                              field.value != null
-                                ? String(field.value)
-                                : 'unassigned'
-                            }
-                            onValueChange={(value) =>
-                              field.onChange(
-                                value === 'unassigned' ? null : Number(value)
-                              )
-                            }
-                            disabled={isLoading}
-                          >
-                            <FormControl>
-                              <SelectTrigger className="w-full">
-                                <SelectValue placeholder={t('unassigned')} />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent>
-                              <SelectItem value="unassigned">
-                                {t('unassigned')}
-                              </SelectItem>
-                              {owners.map((owner) => (
-                                <SelectItem
-                                  key={owner.id}
-                                  value={String(owner.id)}
-                                >
-                                  {owner.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </section>
-
-                <section className="space-y-3">
-                  <SectionHeader
-                    title={t('form.sections.contactTitle')}
-                    description={t('form.sections.contactDescription')}
-                    icon={<Globe className="h-4 w-4" />}
-                  />
-
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="email"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.email')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              type="email"
-                              placeholder={t('form.placeholders.email')}
-                              autoComplete="email"
-                              value={field.value ?? ''}
-                              onChange={(event) =>
-                                field.onChange(event.target.value || null)
-                              }
-                              disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
+                  <section className="space-y-3">
+                    <SectionHeader
+                      title={t('form.sections.relationshipTitle')}
+                      description={t('form.sections.relationshipDescription')}
+                      icon={<Users className="h-4 w-4" />}
                     />
 
-                    <FormField
-                      control={form.control}
-                      name="phone"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.phone')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              type="tel"
-                              placeholder={t('form.placeholders.phone')}
-                              autoComplete="tel"
-                              value={field.value ?? ''}
-                              onChange={(event) =>
-                                field.onChange(event.target.value || null)
-                              }
+                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+                      <FormField
+                        control={form.control}
+                        name="status"
+                        render={({ field }) => (
+                          <FormItem className="space-y-1.5">
+                            <FormLabel>{t('form.status')}</FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
                               disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
+                            >
+                              <FormControl>
+                                <SelectTrigger className="w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                <SelectItem value="active">
+                                  {t('status_active')}
+                                </SelectItem>
+                                <SelectItem value="inactive">
+                                  {t('status_inactive')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                    <FormField
-                      control={form.control}
-                      name="website"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5 sm:col-span-2">
-                          <FormLabel>{t('form.website')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={t('form.placeholders.website')}
-                              autoCapitalize="none"
-                              autoCorrect="off"
-                              value={field.value ?? ''}
-                              onChange={(event) =>
-                                field.onChange(event.target.value || null)
-                              }
-                              disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </section>
-
-                <section className="space-y-3">
-                  <SectionHeader
-                    title={t('form.sections.locationTitle')}
-                    description={t('form.sections.locationDescription')}
-                    icon={<MapPin className="h-4 w-4" />}
-                  />
-
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="city"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.city')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={t('form.placeholders.city')}
-                              autoComplete="address-level2"
-                              value={field.value ?? ''}
-                              onChange={(event) =>
-                                field.onChange(event.target.value || null)
+                      <FormField
+                        control={form.control}
+                        name="lifecycle_stage"
+                        render={({ field }) => (
+                          <FormItem className="space-y-1.5">
+                            <FormLabel>{t('form.lifecycleStage')}</FormLabel>
+                            <Select
+                              value={field.value ?? 'prospect'}
+                              onValueChange={(value) =>
+                                field.onChange(value || null)
                               }
                               disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
+                            >
+                              <FormControl>
+                                <SelectTrigger className="w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                <SelectItem value="prospect">
+                                  {t('stage_prospect')}
+                                </SelectItem>
+                                <SelectItem value="customer">
+                                  {t('stage_customer')}
+                                </SelectItem>
+                                <SelectItem value="churned">
+                                  {t('stage_churned')}
+                                </SelectItem>
+                                <SelectItem value="inactive">
+                                  {t('stage_inactive')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                    <FormField
-                      control={form.control}
-                      name="state"
-                      render={({ field }) => (
-                        <FormItem className="space-y-1.5">
-                          <FormLabel>{t('form.state')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={t('form.placeholders.state')}
-                              autoComplete="address-level1"
-                              className="uppercase"
-                              maxLength={2}
-                              value={field.value ?? ''}
-                              onChange={(event) =>
+                      <FormField
+                        control={form.control}
+                        name="owner_user_id"
+                        render={({ field }) => (
+                          <FormItem className="space-y-1.5 xl:col-span-1 md:col-span-2">
+                            <FormLabel>{t('form.owner')}</FormLabel>
+                            <Select
+                              value={
+                                field.value != null
+                                  ? String(field.value)
+                                  : 'unassigned'
+                              }
+                              onValueChange={(value) =>
                                 field.onChange(
-                                  event.target.value.toUpperCase() || null
+                                  value === 'unassigned' ? null : Number(value)
                                 )
                               }
                               disabled={isLoading}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </section>
-
-                <Separator />
-
-                <Collapsible defaultOpen={additionalDetailsDefaultOpen}>
-                  <div className="rounded-xl border border-dashed bg-muted/10">
-                    <CollapsibleTrigger asChild>
-                      <button
-                        type="button"
-                        className="group flex w-full items-center justify-between gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/20"
-                      >
-                        <div>
-                          <p className="text-sm font-semibold text-foreground">
-                            {t('form.sections.additionalTitle')}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {t('form.sections.additionalDescription')}
-                          </p>
+                            >
+                              <FormControl>
+                                <SelectTrigger className="w-full">
+                                  <SelectValue placeholder={t('unassigned')} />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                <SelectItem value="unassigned">
+                                  {t('unassigned')}
+                                </SelectItem>
+                                {owners.map((owner) => (
+                                  <SelectItem
+                                    key={owner.id}
+                                    value={String(owner.id)}
+                                  >
+                                    {owner.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </section>
+
+                  <Collapsible
+                    open={contactsOpen}
+                    onOpenChange={setContactsOpen}
+                  >
+                    <div className="rounded-xl border bg-background p-3">
+                      <CollapsibleTrigger asChild>
+                        <div className="group flex w-full cursor-pointer flex-wrap items-center gap-2 text-left">
+                          <div className="flex min-w-0 items-center gap-2">
+                            <Globe className="h-4 w-4 text-blue-600" />
+                            <div>
+                              <p className="text-sm font-semibold text-foreground">
+                                {t('form.sections.contactsTitle')}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {t('form.sections.contactsDescription')}
+                              </p>
+                            </div>
+                            {contacts.length > 0 ? (
+                              <Badge variant="secondary">
+                                {contacts.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 px-2 text-xs"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                addContact('email');
+                              }}
+                            >
+                              <Plus className="mr-1 h-3.5 w-3.5" />
+                              {personT('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" />
+                              {personT('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" />
+                              {personT('addContact')}
+                            </Button>
+                            {contactsOpen ? (
+                              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            )}
+                          </div>
                         </div>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent className="mt-3 space-y-2">
+                        {contacts.length === 0 ? (
+                          <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                            {personT('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 flex-col gap-2 sm:flex-row sm:items-center">
+                                <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-full text-xs sm:w-40">
+                                    <SelectValue
+                                      placeholder={personT('selectContactType')}
+                                    />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {contactTypes.map((contactType) => (
+                                      <SelectItem
+                                        key={contactType.contact_type_id}
+                                        value={String(
+                                          contactType.contact_type_id
+                                        )}
+                                      >
+                                        {contactType.name}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+
+                                <div className="flex flex-1 items-center gap-2">
+                                  <Input
+                                    ref={(element) => {
+                                      contactValueRefs.current[
+                                        contact.clientId
+                                      ] = element;
+                                    }}
+                                    placeholder={
+                                      getContactTypeCode(
+                                        contact.contact_type_id
+                                      ) === 'EMAIL'
+                                        ? t('form.placeholders.email')
+                                        : t('form.placeholders.phone')
+                                    }
+                                    value={contact.value}
+                                    onChange={(event) =>
+                                      updateContact(contact.clientId, {
+                                        value: maskContactValueByType(
+                                          event.target.value,
+                                          contact.contact_type_id
+                                        ),
+                                      })
+                                    }
+                                    className="h-8 flex-1 text-xs"
+                                  />
+
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className={cn(
+                                      'h-8 w-8 shrink-0',
+                                      contact.is_primary && 'text-amber-500'
+                                    )}
+                                    onClick={() =>
+                                      setPrimaryContact(contact.clientId)
+                                    }
+                                    aria-label={personT('main')}
+                                  >
+                                    <Star
+                                      className={cn(
+                                        'h-4 w-4',
+                                        contact.is_primary && 'fill-current'
+                                      )}
+                                    />
+                                  </Button>
 
-                        <div className="flex items-center text-muted-foreground">
-                          <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0 text-red-500 hover:text-red-600"
+                                    onClick={() =>
+                                      removeContact(contact.clientId)
+                                    }
+                                    aria-label={personT('remove')}
+                                  >
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          ))
+                        )}
+                      </CollapsibleContent>
+                    </div>
+                  </Collapsible>
+
+                  <Collapsible
+                    open={addressesOpen}
+                    onOpenChange={setAddressesOpen}
+                  >
+                    <div className="rounded-xl border bg-background p-3">
+                      <CollapsibleTrigger asChild>
+                        <div className="group flex w-full cursor-pointer flex-wrap items-center gap-2 text-left">
+                          <div className="flex min-w-0 items-center gap-2">
+                            <MapPin className="h-4 w-4 text-green-600" />
+                            <div>
+                              <p className="text-sm font-semibold text-foreground">
+                                {t('form.sections.addressesTitle')}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {t('form.sections.addressesDescription')}
+                              </p>
+                            </div>
+                            {addresses.length > 0 ? (
+                              <Badge variant="secondary">
+                                {addresses.length}
+                              </Badge>
+                            ) : null}
+                          </div>
+
+                          <div className="ml-auto flex items-center gap-1">
+                            <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" />
+                              {personT('addAddress')}
+                            </Button>
+                            {addressesOpen ? (
+                              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            )}
+                          </div>
                         </div>
-                      </button>
-                    </CollapsibleTrigger>
-
-                    <CollapsibleContent className="border-t px-3 pb-3 pt-3">
-                      <div className="space-y-3">
-                        <FormField
-                          control={form.control}
-                          name="industry"
-                          render={({ field }) => (
-                            <FormItem className="space-y-1.5">
-                              <FormLabel>{t('form.industry')}</FormLabel>
-                              <FormControl>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent className="mt-3 space-y-2">
+                        {addresses.length === 0 ? (
+                          <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                            {personT('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="grid grid-cols-1 gap-2 lg:grid-cols-[180px_minmax(0,1fr)_auto_auto]">
+                                <Select
+                                  value={address.address_type}
+                                  onValueChange={(value) =>
+                                    updateAddress(address.clientId, {
+                                      address_type:
+                                        value as AccountAddress['address_type'],
+                                    })
+                                  }
+                                >
+                                  <SelectTrigger className="h-8 w-full text-xs">
+                                    <SelectValue
+                                      placeholder={personT('selectAddressType')}
+                                    />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {ADDRESS_TYPE_OPTIONS.map((option) => (
+                                      <SelectItem
+                                        key={option.value}
+                                        value={option.value}
+                                      >
+                                        {personT(option.labelKey)}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+
+                                <div className="relative">
+                                  <Input
+                                    placeholder={personT('zipCode')}
+                                    value={address.postal_code || ''}
+                                    maxLength={9}
+                                    onChange={(event) =>
+                                      void handleCEP(event, address.clientId)
+                                    }
+                                    className="h-8 w-full 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>
+
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className={cn(
+                                    'h-8 w-8 shrink-0',
+                                    address.is_primary && 'text-amber-500'
+                                  )}
+                                  onClick={() =>
+                                    setPrimaryAddress(address.clientId)
+                                  }
+                                  aria-label={personT('main')}
+                                >
+                                  <Star
+                                    className={cn(
+                                      'h-4 w-4',
+                                      address.is_primary && 'fill-current'
+                                    )}
+                                  />
+                                </Button>
+
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-8 w-8 shrink-0 text-red-500 hover:text-red-600"
+                                  onClick={() =>
+                                    removeAddress(address.clientId)
+                                  }
+                                  aria-label={personT('remove')}
+                                >
+                                  <Trash2 className="h-4 w-4" />
+                                </Button>
+                              </div>
+
+                              <Input
+                                ref={(element) => {
+                                  addressLine1Refs.current[address.clientId] =
+                                    element;
+                                }}
+                                placeholder={personT('addressPlaceholder')}
+                                value={address.line1}
+                                disabled={Boolean(loadingCEP[address.clientId])}
+                                onChange={(event) =>
+                                  updateAddress(address.clientId, {
+                                    line1: event.target.value,
+                                  })
+                                }
+                                className="h-8 text-xs"
+                              />
+
+                              <Input
+                                placeholder={personT(
+                                  'addressComplementPlaceholder'
+                                )}
+                                value={address.line2 || ''}
+                                onChange={(event) =>
+                                  updateAddress(address.clientId, {
+                                    line2: event.target.value,
+                                  })
+                                }
+                                className="h-8 text-xs"
+                              />
+
+                              <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
                                 <Input
-                                  placeholder={t('form.placeholders.industry')}
-                                  value={field.value ?? ''}
+                                  placeholder={personT(
+                                    'addressCityPlaceholder'
+                                  )}
+                                  value={address.city}
+                                  disabled={Boolean(
+                                    loadingCEP[address.clientId]
+                                  )}
                                   onChange={(event) =>
-                                    field.onChange(event.target.value || null)
+                                    updateAddress(address.clientId, {
+                                      city: event.target.value,
+                                    })
                                   }
-                                  disabled={isLoading}
+                                  className="h-8 text-xs"
                                 />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
+                                <Input
+                                  placeholder={personT(
+                                    'addressStatePlaceholder'
+                                  )}
+                                  value={address.state}
+                                  maxLength={2}
+                                  disabled={Boolean(
+                                    loadingCEP[address.clientId]
+                                  )}
+                                  onChange={(event) =>
+                                    updateAddress(address.clientId, {
+                                      state: event.target.value.toUpperCase(),
+                                    })
+                                  }
+                                  className="h-8 text-xs uppercase"
+                                />
+                                <Input
+                                  placeholder={personT('addressCountry')}
+                                  value={address.country_code || 'BRA'}
+                                  onChange={(event) =>
+                                    updateAddress(address.clientId, {
+                                      country_code:
+                                        event.target.value.toUpperCase(),
+                                    })
+                                  }
+                                  className="h-8 text-xs uppercase"
+                                />
+                              </div>
+                            </div>
+                          ))
+                        )}
+                      </CollapsibleContent>
+                    </div>
+                  </Collapsible>
+
+                  <Collapsible
+                    open={documentsOpen}
+                    onOpenChange={setDocumentsOpen}
+                  >
+                    <div className="rounded-xl border bg-background p-3">
+                      <CollapsibleTrigger asChild>
+                        <div className="group flex w-full cursor-pointer flex-wrap items-center gap-2 text-left">
+                          <div className="flex min-w-0 items-center gap-2">
+                            <FileText className="h-4 w-4 text-amber-600" />
+                            <div>
+                              <p className="text-sm font-semibold text-foreground">
+                                {t('form.sections.documentsTitle')}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {t('form.sections.documentsDescription')}
+                              </p>
+                            </div>
+                            {documents.length > 0 ? (
+                              <Badge variant="secondary">
+                                {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 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 px-2 text-xs"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                addDocument('blank');
+                              }}
+                            >
+                              <Plus className="mr-1 h-3.5 w-3.5" />
+                              {personT('addDocument')}
+                            </Button>
+                            {documentsOpen ? (
+                              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            )}
+                          </div>
+                        </div>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent className="mt-3 space-y-2">
+                        {documents.length === 0 ? (
+                          <div className="rounded-lg border-2 border-dashed py-4 text-center text-sm text-muted-foreground">
+                            {personT('noDocuments')}
+                          </div>
+                        ) : (
+                          documents.map((document) => (
+                            <div
+                              key={document.clientId}
+                              className="rounded-lg border p-2"
+                            >
+                              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                                <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-full text-xs sm:w-40">
+                                    <SelectValue
+                                      placeholder={personT(
+                                        'selectDocumentType'
+                                      )}
+                                    />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {documentTypes.map((documentType) => (
+                                      <SelectItem
+                                        key={documentType.document_type_id}
+                                        value={String(
+                                          documentType.document_type_id
+                                        )}
+                                      >
+                                        {documentType.name}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+
+                                <div className="flex flex-1 items-center gap-2">
+                                  <Input
+                                    ref={(element) => {
+                                      documentValueRefs.current[
+                                        document.clientId
+                                      ] = element;
+                                    }}
+                                    placeholder={personT(
+                                      '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"
+                                  />
+
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0 text-red-500 hover:text-red-600"
+                                    onClick={() =>
+                                      removeDocument(document.clientId)
+                                    }
+                                    aria-label={personT('remove')}
+                                  >
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          ))
+                        )}
+                      </CollapsibleContent>
+                    </div>
+                  </Collapsible>
+
+                  <Collapsible defaultOpen={additionalDetailsDefaultOpen}>
+                    <div className="rounded-xl border border-dashed bg-muted/10">
+                      <CollapsibleTrigger asChild>
+                        <button
+                          type="button"
+                          className="group flex w-full items-center justify-between gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/20"
+                        >
+                          <div>
+                            <p className="text-sm font-semibold text-foreground">
+                              {t('form.sections.additionalTitle')}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {t('form.sections.additionalDescription')}
+                            </p>
+                          </div>
+
+                          <div className="flex items-center text-muted-foreground">
+                            <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                          </div>
+                        </button>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent className="border-t px-3 pb-3 pt-3">
+                        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+                          <FormField
+                            control={form.control}
+                            name="website"
+                            render={({ field }) => (
+                              <FormItem className="space-y-1.5 md:col-span-2 xl:col-span-2">
+                                <FormLabel>{t('form.website')}</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t('form.placeholders.website')}
+                                    autoCapitalize="none"
+                                    autoCorrect="off"
+                                    value={field.value ?? ''}
+                                    onChange={(event) =>
+                                      field.onChange(event.target.value || null)
+                                    }
+                                    disabled={isLoading}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          <FormField
+                            control={form.control}
+                            name="industry"
+                            render={({ field }) => (
+                              <FormItem className="space-y-1.5 md:col-span-2 xl:col-span-2">
+                                <FormLabel>{t('form.industry')}</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    placeholder={t(
+                                      'form.placeholders.industry'
+                                    )}
+                                    value={field.value ?? ''}
+                                    onChange={(event) =>
+                                      field.onChange(event.target.value || null)
+                                    }
+                                    disabled={isLoading}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
 
-                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                           <FormField
                             control={form.control}
                             name="annual_revenue"
@@ -711,34 +2053,450 @@ export function AccountFormSheet({
                             )}
                           />
                         </div>
+                      </CollapsibleContent>
+                    </div>
+                  </Collapsible>
+
+                  <section className="space-y-3 pb-2">
+                    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                      <SectionHeader
+                        title={t('form.collaborators.title')}
+                        description={t('form.collaborators.description')}
+                        icon={<Users className="h-4 w-4" />}
+                      />
+
+                      <div className="flex w-full flex-col gap-2 sm:w-auto sm:min-w-90 sm:flex-row sm:items-start sm:justify-end">
+                        <EntityPicker<Person>
+                          key={collaboratorPickerKey}
+                          value={null}
+                          placeholder="Buscar colaborador existente"
+                          entityLabel="colaborador"
+                          valueType="number"
+                          searchPlaceholder="Digite para buscar pelo nome"
+                          emptyStateDescription="Nenhum colaborador encontrado."
+                          loadingLabel="Carregando colaboradores..."
+                          showCreateButton={false}
+                          clearable={false}
+                          disabled={isLoading}
+                          className="w-full sm:min-w-65"
+                          buttonClassName="w-full"
+                          loadOptions={loadCollaboratorOptions}
+                          getOptionValue={(person) => person.id}
+                          getOptionLabel={(person) => person.name}
+                          getOptionDescription={(person) =>
+                            [
+                              person.job_title,
+                              person.status === 'active'
+                                ? t('status_active')
+                                : person.status === 'inactive'
+                                  ? t('status_inactive')
+                                  : undefined,
+                            ]
+                              .filter(Boolean)
+                              .join(' • ') || undefined
+                          }
+                          onChange={(value, option) => {
+                            void value;
+                            if (option) {
+                              upsertLocalCollaborator(option);
+                              setCollaboratorPickerKey(
+                                (current) => current + 1
+                              );
+                            }
+                          }}
+                        />
+
+                        <div className="flex items-center gap-2 sm:self-start">
+                          <ToggleGroup
+                            type="single"
+                            value={collaboratorsViewMode}
+                            onValueChange={(v) => {
+                              if (v)
+                                setCollaboratorsViewMode(
+                                  v as 'cards' | 'table'
+                                );
+                            }}
+                            variant="outline"
+                            size="sm"
+                            aria-label={t('form.collaborators.viewMode')}
+                          >
+                            <ToggleGroupItem
+                              value="cards"
+                              aria-label={t('form.collaborators.viewModeCards')}
+                            >
+                              <LayoutGrid className="h-4 w-4" />
+                            </ToggleGroupItem>
+                            <ToggleGroupItem
+                              value="table"
+                              aria-label={t('form.collaborators.viewModeTable')}
+                            >
+                              <List className="h-4 w-4" />
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+
+                          <Button
+                            type="button"
+                            size="sm"
+                            onClick={() => {
+                              setCollaboratorToEdit(null);
+                              setCollaboratorSheetOpen(true);
+                            }}
+                            disabled={isLoading}
+                          >
+                            <Plus className="mr-1 h-4 w-4" />
+                            {t('form.collaborators.addAction')}
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {collaborators.length === 0 ? (
+                      <div className="rounded-xl border border-dashed bg-muted/10 p-4 text-sm text-muted-foreground">
+                        {!isPersistedAccount ? (
+                          <>
+                            <p className="font-medium text-foreground">
+                              Busque um colaborador existente ou crie um novo
+                              cadastro.
+                            </p>
+                            <p className="mt-1 text-xs">
+                              Os vínculos serão salvos junto com a conta ao
+                              concluir este formulário.
+                            </p>
+                          </>
+                        ) : (
+                          t('form.collaborators.empty')
+                        )}
                       </div>
-                    </CollapsibleContent>
-                  </div>
-                </Collapsible>
+                    ) : collaboratorsViewMode === 'cards' ? (
+                      <div className="grid gap-2 md:grid-cols-2">
+                        {collaborators.map((person) => {
+                          const email = getPersonPrimaryContact(person, [
+                            'EMAIL',
+                          ]);
+                          const phone = getPersonPrimaryContact(person, [
+                            'PHONE',
+                            'MOBILE',
+                            'WHATSAPP',
+                          ]);
+                          const isActive = person.status === 'active';
+
+                          return (
+                            <div
+                              key={person.id}
+                              className="rounded-xl border bg-background p-2"
+                            >
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex min-w-0 items-center gap-2">
+                                  <Avatar className="h-8 w-8 shrink-0">
+                                    <AvatarFallback className="text-xs">
+                                      {getPersonInitials(person.name)}
+                                    </AvatarFallback>
+                                  </Avatar>
+
+                                  <div className="min-w-0">
+                                    <div className="flex items-center gap-1">
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <span>
+                                            {isActive ? (
+                                              <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-green-500" />
+                                            ) : (
+                                              <XCircle className="h-3.5 w-3.5 shrink-0 text-red-400" />
+                                            )}
+                                          </span>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                          <p>
+                                            {isActive
+                                              ? t('status_active')
+                                              : t('status_inactive')}
+                                          </p>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                      <p className="truncate text-sm font-semibold text-foreground">
+                                        {person.name}
+                                      </p>
+                                      <CopyButton
+                                        value={person.name}
+                                        className="h-5 w-5 shrink-0"
+                                      />
+                                    </div>
+                                    {person.job_title ? (
+                                      <p className="truncate text-xs text-muted-foreground">
+                                        {person.job_title}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                </div>
+
+                                <div className="flex shrink-0 items-center gap-1">
+                                  <Tooltip>
+                                    <TooltipTrigger asChild>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-7 w-7"
+                                        onClick={() => {
+                                          setCollaboratorToEdit(person);
+                                          setCollaboratorSheetOpen(true);
+                                        }}
+                                        aria-label={t(
+                                          'form.collaborators.editActionLabel'
+                                        )}
+                                      >
+                                        <Pencil className="h-3.5 w-3.5" />
+                                      </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                      <p>
+                                        {t(
+                                          'form.collaborators.editActionLabel'
+                                        )}
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-7 w-7 shrink-0 text-red-500 hover:text-red-600"
+                                    onClick={() =>
+                                      removeCollaborator(Number(person.id))
+                                    }
+                                    aria-label={personT('remove')}
+                                  >
+                                    <Trash2 className="h-3.5 w-3.5" />
+                                  </Button>
+                                </div>
+                              </div>
+
+                              {(email ?? phone) ? (
+                                <div className="mt-2 space-y-0.5 text-xs text-muted-foreground">
+                                  {email ? (
+                                    <div className="flex items-center gap-1">
+                                      <Mail className="h-3.5 w-3.5 shrink-0" />
+                                      <span className="truncate">{email}</span>
+                                      <CopyButton
+                                        value={email}
+                                        className="h-5 w-5 shrink-0"
+                                      />
+                                    </div>
+                                  ) : null}
+                                  {phone ? (
+                                    <div className="flex items-center gap-1">
+                                      <Phone className="h-3.5 w-3.5 shrink-0" />
+                                      <span>{phone}</span>
+                                    </div>
+                                  ) : null}
+                                </div>
+                              ) : null}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="overflow-x-auto rounded-xl border bg-background">
+                        <table className="w-full text-xs">
+                          <thead>
+                            <tr className="border-b bg-muted/40 text-muted-foreground">
+                              <th className="px-3 py-2 text-left font-medium">
+                                {t('form.collaborators.tableColName')}
+                              </th>
+                              <th className="px-3 py-2 text-left font-medium">
+                                {t('form.collaborators.tableColJobTitle')}
+                              </th>
+                              <th className="px-3 py-2 text-center font-medium">
+                                {t('form.collaborators.tableColStatus')}
+                              </th>
+                              <th className="px-3 py-2 text-left font-medium">
+                                {t('form.collaborators.tableColEmail')}
+                              </th>
+                              <th className="px-3 py-2 text-left font-medium">
+                                {t('form.collaborators.tableColPhone')}
+                              </th>
+                              <th className="px-3 py-2 text-right font-medium">
+                                {t('form.collaborators.tableColActions')}
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {collaborators.map((person) => {
+                              const email = getPersonPrimaryContact(person, [
+                                'EMAIL',
+                              ]);
+                              const phone = getPersonPrimaryContact(person, [
+                                'PHONE',
+                                'MOBILE',
+                                'WHATSAPP',
+                              ]);
+                              const isActive = person.status === 'active';
+
+                              return (
+                                <tr
+                                  key={person.id}
+                                  className="border-b last:border-0 transition-colors hover:bg-muted/40"
+                                >
+                                  <td className="px-3 py-2">
+                                    <div className="flex items-center gap-2">
+                                      <Avatar className="h-6 w-6 shrink-0">
+                                        <AvatarFallback className="text-[10px]">
+                                          {getPersonInitials(person.name)}
+                                        </AvatarFallback>
+                                      </Avatar>
+                                      <span className="max-w-35 truncate font-medium text-foreground">
+                                        {person.name}
+                                      </span>
+                                      <CopyButton
+                                        value={person.name}
+                                        className="h-5 w-5 shrink-0"
+                                      />
+                                    </div>
+                                  </td>
+                                  <td className="max-w-30 truncate px-3 py-2 text-muted-foreground">
+                                    {person.job_title ?? '—'}
+                                  </td>
+                                  <td className="px-3 py-2 text-center">
+                                    <Tooltip>
+                                      <TooltipTrigger asChild>
+                                        <span className="inline-flex">
+                                          {isActive ? (
+                                            <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+                                          ) : (
+                                            <XCircle className="h-3.5 w-3.5 text-red-400" />
+                                          )}
+                                        </span>
+                                      </TooltipTrigger>
+                                      <TooltipContent>
+                                        <p>
+                                          {isActive
+                                            ? t('status_active')
+                                            : t('status_inactive')}
+                                        </p>
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </td>
+                                  <td className="px-3 py-2">
+                                    {email ? (
+                                      <div className="flex items-center gap-1">
+                                        <span className="max-w-40 truncate text-muted-foreground">
+                                          {email}
+                                        </span>
+                                        <CopyButton
+                                          value={email}
+                                          className="h-5 w-5 shrink-0"
+                                        />
+                                      </div>
+                                    ) : (
+                                      <span className="text-muted-foreground">
+                                        —
+                                      </span>
+                                    )}
+                                  </td>
+                                  <td className="px-3 py-2 text-muted-foreground">
+                                    {phone ?? '—'}
+                                  </td>
+                                  <td className="px-3 py-2">
+                                    <div className="flex items-center justify-end gap-1">
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7"
+                                            onClick={() => {
+                                              setCollaboratorToEdit(person);
+                                              setCollaboratorSheetOpen(true);
+                                            }}
+                                            aria-label={t(
+                                              'form.collaborators.editActionLabel'
+                                            )}
+                                          >
+                                            <Pencil className="h-3.5 w-3.5" />
+                                          </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                          <p>
+                                            {t(
+                                              'form.collaborators.editActionLabel'
+                                            )}
+                                          </p>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-7 w-7 text-red-500 hover:text-red-600"
+                                        onClick={() =>
+                                          removeCollaborator(Number(person.id))
+                                        }
+                                        aria-label={personT('remove')}
+                                      >
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                      </Button>
+                                    </div>
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    )}
+                  </section>
+                </div>
               </div>
-            </div>
 
-            <FormActions
-              sheet
-              cancelLabel={t('cancel')}
-              onCancel={() => {
-                if (!isLoading) {
-                  onOpenChange(false);
+              <FormActions
+                sheet
+                statusContent={draftStatusContent}
+                cancelLabel={t('cancel')}
+                onCancel={() => {
+                  if (!isLoading) {
+                    onOpenChange(false);
+                  }
+                }}
+                submitDisabled={isLoading}
+                submitLabel={
+                  isLoading
+                    ? t('form.saving')
+                    : isPersistedAccount
+                      ? t('form.updateSubmit')
+                      : t('form.createSubmit')
                 }
-              }}
-              submitDisabled={isLoading}
-              submitLabel={
-                isLoading
-                  ? t('form.saving')
-                  : account
-                    ? t('form.updateSubmit')
-                    : t('form.createSubmit')
-              }
-              submitType="submit"
-            />
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
+                submitType="submit"
+              />
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      <PersonFormSheet
+        open={collaboratorSheetOpen}
+        person={collaboratorToEdit}
+        contactTypes={contactTypes}
+        documentTypes={documentTypes}
+        initialEmployerCompanyId={currentAccountId}
+        initialEmployerCompanyLabel={companyPreviewName}
+        onOpenChange={(nextOpen) => {
+          setCollaboratorSheetOpen(nextOpen);
+          if (!nextOpen) {
+            setCollaboratorToEdit(null);
+          }
+        }}
+        onSuccess={(savedPerson) => {
+          if (savedPerson) {
+            upsertLocalCollaborator(savedPerson);
+          }
+
+          if (currentAccountId) {
+            void refetchCollaborators();
+          }
+        }}
+      />
+    </>
   );
 }