@hed-hog/contact 0.0.304 → 0.0.305

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

@@ -47,10 +47,12 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { COUNTRIES } from '@/constants/countries';
+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 { format } from 'date-fns';
+import { format, formatDistanceToNow } from 'date-fns';
 import { enUS, ptBR } from 'date-fns/locale';
 import {
   Building2,
@@ -69,8 +71,15 @@ import {
   User,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import {
+  type ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -94,7 +103,12 @@ type PersonFormSheetProps = {
   contactTypes: ContactTypeOption[];
   documentTypes: DocumentTypeOption[];
   onOpenChange: (open: boolean) => void;
-  onSuccess: () => void;
+  onSuccess: (person?: Person) => void | Promise<void>;
+  initialEmployerCompanyId?: number | null;
+  initialEmployerCompanyLabel?: string;
+  title?: string;
+  description?: string;
+  allowedTypes?: Array<Person['type']>;
 };
 
 type PersonFormValues = {
@@ -192,6 +206,34 @@ type PersonSubmitPayload = {
   }>;
 };
 
+type PersonDraftPayload = {
+  mode: 'create' | 'edit';
+  personId: number | null;
+  values: {
+    name: string;
+    type: 'individual' | 'company';
+    status: 'active' | 'inactive';
+    birth_date: string | null;
+    gender: PersonGender | null;
+    job_title: string | null;
+    employer_company_id: number | null;
+    trade_name: string | null;
+    foundation_date: string | null;
+    legal_nature: string | null;
+    owner_user_id: number | null;
+    source: PersonSource | null;
+    lifecycle_stage: PersonLifecycleStage | null;
+    next_action_at: string | null;
+  };
+  contacts: EditablePersonContact[];
+  addresses: EditablePersonAddress[];
+  documents: EditablePersonDocument[];
+  avatarId: number | null;
+  avatarPreviewUrl: string;
+};
+
+const PERSON_FORM_DRAFT_STORAGE_KEY = 'contact-person-form-draft';
+
 type PendingDuplicateSubmission = {
   payload: PersonSubmitPayload;
   normalizedType: 'individual' | 'company';
@@ -258,6 +300,47 @@ function toDatetimeLocalValue(value?: string | null) {
   return localDate.toISOString().slice(0, 16);
 }
 
+function padTwoDigits(value: number) {
+  return String(value).padStart(2, '0');
+}
+
+function parseDatetimeLocalValue(value?: string | null) {
+  if (!value) return undefined;
+
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/);
+
+  if (!match) return undefined;
+
+  const [, year, month, day, hours, minutes] = match;
+  const parsedDate = new Date(
+    Number(year),
+    Number(month) - 1,
+    Number(day),
+    Number(hours),
+    Number(minutes)
+  );
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    return undefined;
+  }
+
+  if (
+    parsedDate.getFullYear() !== Number(year) ||
+    parsedDate.getMonth() !== Number(month) - 1 ||
+    parsedDate.getDate() !== Number(day) ||
+    parsedDate.getHours() !== Number(hours) ||
+    parsedDate.getMinutes() !== Number(minutes)
+  ) {
+    return undefined;
+  }
+
+  return parsedDate;
+}
+
+function buildDatetimeLocalValue(date: Date) {
+  return `${format(date, 'yyyy-MM-dd')}T${padTwoDigits(date.getHours())}:${padTwoDigits(date.getMinutes())}`;
+}
+
 async function fetchViaCep(cep: string) {
   try {
     const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
@@ -392,6 +475,217 @@ function DatePickerWithYearMonth({
   );
 }
 
+function DateTimePickerWithTime({
+  value,
+  onChange,
+  placeholder,
+  localeCode,
+  clearLabel,
+}: {
+  value?: string | null;
+  onChange: (value: string) => void;
+  placeholder: string;
+  localeCode: string;
+  clearLabel: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const locale = localeCode.startsWith('pt') ? ptBR : enUS;
+  const parsedValue = useMemo(() => parseDatetimeLocalValue(value), [value]);
+  const [viewDate, setViewDate] = useState(parsedValue || new Date());
+  const currentViewDate = parsedValue || viewDate;
+
+  const currentYear = new Date().getFullYear();
+  const years = useMemo(() => {
+    const values: number[] = [];
+    for (let year = currentYear + 10; year >= currentYear - 10; year -= 1) {
+      values.push(year);
+    }
+    return values;
+  }, [currentYear]);
+
+  const months = useMemo(
+    () =>
+      Array.from({ length: 12 }, (_, index) =>
+        format(new Date(2024, index, 1), 'LLLL', { locale })
+      ),
+    [locale]
+  );
+
+  const hours = useMemo(
+    () => Array.from({ length: 24 }, (_, index) => padTwoDigits(index)),
+    []
+  );
+  const minutes = useMemo(
+    () => Array.from({ length: 60 }, (_, index) => padTwoDigits(index)),
+    []
+  );
+
+  const handleYearChange = (year: string) => {
+    const nextDate = new Date(currentViewDate);
+    nextDate.setFullYear(Number(year));
+    setViewDate(nextDate);
+  };
+
+  const handleMonthChange = (month: string) => {
+    const nextDate = new Date(currentViewDate);
+    nextDate.setMonth(Number(month));
+    setViewDate(nextDate);
+  };
+
+  const handleDateSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) {
+      onChange('');
+      return;
+    }
+
+    const baseDate = parsedValue || new Date();
+    const nextDate = new Date(selectedDate);
+    nextDate.setHours(baseDate.getHours(), baseDate.getMinutes(), 0, 0);
+    setViewDate(nextDate);
+    onChange(buildDatetimeLocalValue(nextDate));
+  };
+
+  const handleTimePartChange = (
+    part: 'hours' | 'minutes',
+    nextValue: string
+  ) => {
+    const baseDate = parsedValue || new Date(currentViewDate);
+    const nextDate = new Date(baseDate);
+
+    if (part === 'hours') {
+      nextDate.setHours(Number(nextValue));
+    } else {
+      nextDate.setMinutes(Number(nextValue));
+    }
+
+    nextDate.setSeconds(0, 0);
+    setViewDate(nextDate);
+    onChange(buildDatetimeLocalValue(nextDate));
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={cn(
+            'h-9 w-full min-w-0 justify-start text-left text-xs font-normal',
+            !parsedValue && 'text-muted-foreground'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-3.5 w-3.5" />
+          {parsedValue ? (
+            format(parsedValue, 'dd/MM/yyyy HH:mm', { locale })
+          ) : (
+            <span className="block truncate text-xs">{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0" align="start">
+        <div className="flex items-center gap-1 border-b p-2">
+          <Select
+            value={String(currentViewDate.getMonth())}
+            onValueChange={handleMonthChange}
+          >
+            <SelectTrigger className="h-8 flex-1 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {months.map((month, index) => (
+                <SelectItem key={month} value={String(index)}>
+                  {month}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            value={String(currentViewDate.getFullYear())}
+            onValueChange={handleYearChange}
+          >
+            <SelectTrigger className="h-8 w-24 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="max-h-60">
+              {years.map((year) => (
+                <SelectItem key={year} value={String(year)}>
+                  {year}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Calendar
+          mode="single"
+          selected={parsedValue}
+          onSelect={handleDateSelect}
+          month={currentViewDate}
+          onMonthChange={setViewDate}
+          initialFocus
+        />
+
+        <div className="border-t p-3">
+          <div className="grid grid-cols-[1fr_1fr_auto] gap-2">
+            <Select
+              value={
+                parsedValue ? padTwoDigits(parsedValue.getHours()) : undefined
+              }
+              onValueChange={(nextValue) =>
+                handleTimePartChange('hours', nextValue)
+              }
+              disabled={!parsedValue}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="HH" />
+              </SelectTrigger>
+              <SelectContent className="max-h-60">
+                {hours.map((hour) => (
+                  <SelectItem key={hour} value={hour}>
+                    {hour}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={
+                parsedValue ? padTwoDigits(parsedValue.getMinutes()) : undefined
+              }
+              onValueChange={(nextValue) =>
+                handleTimePartChange('minutes', nextValue)
+              }
+              disabled={!parsedValue}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="MM" />
+              </SelectTrigger>
+              <SelectContent className="max-h-60">
+                {minutes.map((minute) => (
+                  <SelectItem key={minute} value={minute}>
+                    {minute}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-8 px-2 text-xs"
+              onClick={() => onChange('')}
+              disabled={!parsedValue}
+            >
+              {clearLabel}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function PersonFormSheet({
   open,
   person,
@@ -399,13 +693,39 @@ export function PersonFormSheet({
   documentTypes,
   onOpenChange,
   onSuccess,
+  initialEmployerCompanyId = null,
+  initialEmployerCompanyLabel = '',
+  title,
+  description,
+  allowedTypes,
 }: PersonFormSheetProps) {
   const t = useTranslations('contact.ContactPage');
   const { request, currentLocaleCode, getSettingValue, user } = useApp();
   const isEditing = Boolean(person);
   const allowCompanyRegistration =
     getSettingValue('contact-allow-company-registration') !== false;
-  const canUseCompanyType = allowCompanyRegistration;
+  const effectiveAllowedTypes = useMemo<Array<Person['type']>>(() => {
+    const sanitized = Array.from(
+      new Set(
+        (allowedTypes ?? []).filter(
+          (type): type is Person['type'] =>
+            type === 'individual' ||
+            (type === 'company' && allowCompanyRegistration)
+        )
+      )
+    );
+
+    if (sanitized.length > 0) {
+      return sanitized;
+    }
+
+    return allowCompanyRegistration
+      ? ['individual', 'company']
+      : ['individual'];
+  }, [allowCompanyRegistration, allowedTypes]);
+  const defaultPersonType = effectiveAllowedTypes[0] ?? 'individual';
+  const canUseCompanyType = effectiveAllowedTypes.includes('company');
+  const showTypeField = effectiveAllowedTypes.length > 1;
 
   const personSchema = useMemo(
     () =>
@@ -522,7 +842,112 @@ export function PersonFormSheet({
   };
 
   const watchType = watch('type');
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
 
+  const hasDraftContent = useMemo(
+    () =>
+      Boolean(
+        (watchedFormValues.name ?? '').trim() ||
+        (watchedFormValues.job_title ?? '').trim() ||
+        (watchedFormValues.trade_name ?? '').trim() ||
+        (watchedFormValues.legal_nature ?? '').trim() ||
+        (watchedFormValues.next_action_at ?? '').trim() ||
+        watchedFormValues.type === 'company' ||
+        watchedFormValues.status === 'inactive' ||
+        watchedFormValues.birth_date ||
+        watchedFormValues.foundation_date ||
+        watchedFormValues.gender ||
+        watchedFormValues.source ||
+        (watchedFormValues.lifecycle_stage ?? 'new') !== 'new' ||
+        avatarId != null ||
+        contacts.length > 0 ||
+        addresses.length > 0 ||
+        documents.length > 0
+      ),
+    [watchedFormValues, avatarId, contacts, addresses, documents]
+  );
+
+  const draftValue = useMemo<PersonDraftPayload>(
+    () => ({
+      mode: person?.id ? 'edit' : 'create',
+      personId: person?.id ?? null,
+      values: {
+        name: watchedFormValues.name ?? '',
+        type: watchedFormValues.type ?? 'individual',
+        status: watchedFormValues.status ?? 'active',
+        birth_date: watchedFormValues.birth_date
+          ? watchedFormValues.birth_date.toISOString()
+          : null,
+        gender: watchedFormValues.gender ?? null,
+        job_title: watchedFormValues.job_title ?? null,
+        employer_company_id: watchedFormValues.employer_company_id ?? null,
+        trade_name: watchedFormValues.trade_name ?? null,
+        foundation_date: watchedFormValues.foundation_date
+          ? watchedFormValues.foundation_date.toISOString()
+          : null,
+        legal_nature: watchedFormValues.legal_nature ?? null,
+        owner_user_id: watchedFormValues.owner_user_id ?? null,
+        source: watchedFormValues.source ?? null,
+        lifecycle_stage: watchedFormValues.lifecycle_stage ?? 'new',
+        next_action_at: watchedFormValues.next_action_at ?? null,
+      },
+      contacts,
+      addresses,
+      documents,
+      avatarId,
+      avatarPreviewUrl,
+    }),
+    [
+      watchedFormValues,
+      contacts,
+      addresses,
+      documents,
+      avatarId,
+      avatarPreviewUrl,
+      person?.id,
+    ]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<PersonDraftPayload>({
+    storageKey: PERSON_FORM_DRAFT_STORAGE_KEY,
+    value: draftValue,
+    hasData: hasDraftContent,
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    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
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
   const { data: ownerOptions = [] } = useQuery<UserOption[]>({
     queryKey: ['contact-person-owner-options', currentLocaleCode],
     queryFn: async () => {
@@ -538,77 +963,112 @@ export function PersonFormSheet({
   });
 
   useEffect(() => {
-    if (canUseCompanyType || watchType !== 'company') {
+    if (effectiveAllowedTypes.includes(watchType)) {
       return;
     }
 
-    setValue('type', 'individual');
-  }, [canUseCompanyType, setValue, watchType]);
+    setValue('type', defaultPersonType);
+  }, [defaultPersonType, effectiveAllowedTypes, setValue, watchType]);
 
   useEffect(() => {
     if (!open) return;
 
     hasSavedChangesRef.current = false;
+    const storedDraft = loadDraft();
+    const shouldRestoreDraft = Boolean(
+      storedDraft &&
+      ((!person && storedDraft.payload.mode === 'create') ||
+        (person &&
+          storedDraft.payload.mode === 'edit' &&
+          storedDraft.payload.personId === Number(person.id)))
+    );
+    const restoredDraft = shouldRestoreDraft ? storedDraft?.payload : null;
+    const initialTypeCandidate =
+      restoredDraft?.values.type ?? person?.type ?? defaultPersonType;
+
     reset({
-      name: person?.name || '',
-      type: allowCompanyRegistration
-        ? person?.type || 'individual'
-        : 'individual',
-      status: person?.status || 'active',
-      birth_date: person?.birth_date ? new Date(person.birth_date) : null,
-      gender: person?.gender || null,
-      job_title: person?.job_title || '',
-      employer_company_id: person?.employer_company_id ?? null,
-      trade_name: person?.trade_name || '',
-      foundation_date: person?.foundation_date
-        ? new Date(person.foundation_date)
-        : null,
-      legal_nature: person?.legal_nature || '',
+      name: restoredDraft?.values.name ?? person?.name ?? '',
+      type: effectiveAllowedTypes.includes(initialTypeCandidate)
+        ? initialTypeCandidate
+        : defaultPersonType,
+      status: restoredDraft?.values.status ?? person?.status ?? 'active',
+      birth_date: restoredDraft?.values.birth_date
+        ? new Date(restoredDraft.values.birth_date)
+        : person?.birth_date
+          ? new Date(person.birth_date)
+          : null,
+      gender: restoredDraft?.values.gender ?? person?.gender ?? null,
+      job_title: restoredDraft?.values.job_title ?? person?.job_title ?? '',
+      employer_company_id:
+        restoredDraft?.values.employer_company_id ??
+        person?.employer_company_id ??
+        initialEmployerCompanyId ??
+        null,
+      trade_name: restoredDraft?.values.trade_name ?? person?.trade_name ?? '',
+      foundation_date: restoredDraft?.values.foundation_date
+        ? new Date(restoredDraft.values.foundation_date)
+        : person?.foundation_date
+          ? new Date(person.foundation_date)
+          : null,
+      legal_nature:
+        restoredDraft?.values.legal_nature ?? person?.legal_nature ?? '',
       owner_user_id:
+        restoredDraft?.values.owner_user_id ??
         person?.owner_user_id ??
         (person ? null : Number(user?.id || 0) || null),
-      source: person?.source || null,
-      lifecycle_stage: person?.lifecycle_stage || 'new',
-      next_action_at: toDatetimeLocalValue(person?.next_action_at || null),
+      source: restoredDraft?.values.source ?? person?.source ?? null,
+      lifecycle_stage:
+        restoredDraft?.values.lifecycle_stage ??
+        person?.lifecycle_stage ??
+        'new',
+      next_action_at:
+        restoredDraft?.values.next_action_at ??
+        toDatetimeLocalValue(person?.next_action_at || null),
     });
-    const initialAvatarId = person?.avatar_id ?? null;
+    const initialAvatarId =
+      restoredDraft?.avatarId ?? person?.avatar_id ?? null;
     setAvatarId(initialAvatarId);
     setPersistedAvatarId(initialAvatarId);
-    setAvatarPreviewUrl(getPersonAvatarUrl(initialAvatarId));
+    setAvatarPreviewUrl(
+      restoredDraft?.avatarPreviewUrl || getPersonAvatarUrl(initialAvatarId)
+    );
     setIsUploadingAvatar(false);
     setAvatarUploadProgress(0);
 
     setContacts(
-      (person?.contact || []).map((contact, index) => ({
-        ...contact,
-        value: ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
-          String(contact.contact_type?.code || '').toUpperCase()
-        )
-          ? applyPhoneMask(contact.value || '')
-          : contact.value || '',
-        clientId: `contact-${contact.id ?? index}`,
-      }))
+      restoredDraft?.contacts ??
+        (person?.contact || []).map((contact, index) => ({
+          ...contact,
+          value: ['PHONE', 'MOBILE', 'WHATSAPP'].includes(
+            String(contact.contact_type?.code || '').toUpperCase()
+          )
+            ? applyPhoneMask(contact.value || '')
+            : contact.value || '',
+          clientId: `contact-${contact.id ?? index}`,
+        }))
     );
 
     setAddresses(
-      (person?.address || []).map((address, index) => ({
-        ...address,
-        clientId: `address-${address.id ?? index}`,
-      }))
+      restoredDraft?.addresses ??
+        (person?.address || []).map((address, index) => ({
+          ...address,
+          clientId: `address-${address.id ?? index}`,
+        }))
     );
 
     setDocuments(
-      (person?.document || []).map((document, index) => ({
-        ...document,
-        value:
-          String(document.document_type?.code || '').toUpperCase() === 'CPF'
-            ? applyCpfMask(document.value || '')
-            : String(document.document_type?.code || '').toUpperCase() ===
-                'CNPJ'
-              ? applyCnpjMask(document.value || '')
-              : document.value || '',
-        clientId: `document-${document.id ?? index}`,
-      }))
+      restoredDraft?.documents ??
+        (person?.document || []).map((document, index) => ({
+          ...document,
+          value:
+            String(document.document_type?.code || '').toUpperCase() === 'CPF'
+              ? applyCpfMask(document.value || '')
+              : String(document.document_type?.code || '').toUpperCase() ===
+                  'CNPJ'
+                ? applyCnpjMask(document.value || '')
+                : document.value || '',
+          clientId: `document-${document.id ?? index}`,
+        }))
     );
 
     setContactsOpen(true);
@@ -619,7 +1079,25 @@ export function PersonFormSheet({
     setPendingDuplicateSubmission(null);
     setDuplicateTargetPersonId(null);
     setIsResolvingDuplicateAction(false);
-  }, [allowCompanyRegistration, open, person, reset, user?.id]);
+  }, [
+    defaultPersonType,
+    effectiveAllowedTypes,
+    initialEmployerCompanyId,
+    loadDraft,
+    open,
+    person,
+    reset,
+    user?.id,
+  ]);
+
+  const resolvePersonById = async (personId: number) => {
+    const response = await request<Person>({
+      url: `/person/${personId}`,
+      method: 'GET',
+    });
+
+    return response.data;
+  };
 
   const getPersonInitials = (name: string) =>
     name
@@ -639,25 +1117,28 @@ export function PersonFormSheet({
       ? url
       : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${url}`;
 
-  const deleteFileById = async (fileId?: number | null) => {
-    if (!fileId || fileId <= 0) return;
+  const deleteFileById = useCallback(
+    async (fileId?: number | null) => {
+      if (!fileId || fileId <= 0) return;
 
-    try {
-      await request({
-        url: '/file',
-        method: 'DELETE',
-        data: { ids: [fileId] },
-      });
-    } catch {
-      // Ignore cleanup failure to keep form interaction stable.
-    }
-  };
+      try {
+        await request({
+          url: '/file',
+          method: 'DELETE',
+          data: { ids: [fileId] },
+        });
+      } catch {
+        // Ignore cleanup failure to keep form interaction stable.
+      }
+    },
+    [request]
+  );
 
-  const cleanupUnsavedAvatar = async () => {
+  const cleanupUnsavedAvatar = useCallback(async () => {
     if (avatarId && avatarId !== persistedAvatarId) {
       await deleteFileById(avatarId);
     }
-  };
+  }, [avatarId, deleteFileById, persistedAvatarId]);
 
   const handleAvatarUpload = async (file: File) => {
     if (!file.type.startsWith('image/')) {
@@ -747,26 +1228,35 @@ export function PersonFormSheet({
     toast.success(t('avatarRemoveSuccess'));
   };
 
-  const handleSheetOpenChange = (nextOpen: boolean) => {
-    if (nextOpen) {
-      hasSavedChangesRef.current = false;
-      onOpenChange(true);
-      return;
-    }
+  const handleSheetOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen) {
+        hasSavedChangesRef.current = false;
+        onOpenChange(true);
+        return;
+      }
 
-    if (isUploadingAvatar || isSubmitting) {
-      return;
-    }
+      if (isUploadingAvatar || isSubmitting) {
+        return;
+      }
 
-    const shouldCleanup = !hasSavedChangesRef.current;
-    hasSavedChangesRef.current = false;
+      const shouldCleanup = !hasSavedChangesRef.current && !hasDraftContent;
+      hasSavedChangesRef.current = false;
 
-    if (shouldCleanup) {
-      void cleanupUnsavedAvatar();
-    }
+      if (shouldCleanup) {
+        void cleanupUnsavedAvatar();
+      }
 
-    onOpenChange(false);
-  };
+      onOpenChange(false);
+    },
+    [
+      cleanupUnsavedAvatar,
+      hasDraftContent,
+      isSubmitting,
+      isUploadingAvatar,
+      onOpenChange,
+    ]
+  );
 
   useEffect(() => {
     if (!open) {
@@ -1309,13 +1799,72 @@ export function PersonFormSheet({
     return personId;
   };
 
-  const finalizeSuccess = () => {
+  const buildSuccessPerson = (
+    personId: number,
+    payload: PersonSubmitPayload
+  ): Person => ({
+    id: personId,
+    name: payload.name,
+    type: payload.type,
+    status: payload.status,
+    avatar_id: payload.avatar_id,
+    birth_date: payload.birth_date,
+    gender: payload.gender,
+    job_title: payload.job_title,
+    employer_company_id: payload.employer_company_id,
+    employer_company:
+      payload.employer_company_id && initialEmployerCompanyLabel
+        ? {
+            id: payload.employer_company_id,
+            name: initialEmployerCompanyLabel,
+            type: 'company',
+            status: 'active',
+          }
+        : null,
+    trade_name: payload.trade_name,
+    foundation_date: payload.foundation_date,
+    legal_nature: payload.legal_nature,
+    owner_user_id: payload.owner_user_id,
+    owner_user:
+      ownerOptions.find((option) => option.id === payload.owner_user_id) ??
+      null,
+    source: payload.source,
+    lifecycle_stage: payload.lifecycle_stage,
+    next_action_at: payload.next_action_at,
+    created_at: person?.created_at || new Date().toISOString(),
+    contact: payload.contacts.map((contact) => ({
+      ...contact,
+      contact_type:
+        contactTypes.find(
+          (item) => item.contact_type_id === contact.contact_type_id
+        ) ?? undefined,
+    })),
+    address: payload.addresses,
+    document: payload.documents.map((document) => ({
+      ...document,
+      document_type:
+        documentTypes.find(
+          (item) => item.document_type_id === document.document_type_id
+        ) ?? undefined,
+    })),
+  });
+
+  const finalizeSuccess = async (personId: number, fallbackPerson?: Person) => {
+    let resolvedPerson = fallbackPerson;
+
+    try {
+      resolvedPerson = await resolvePersonById(personId);
+    } catch {
+      resolvedPerson = fallbackPerson;
+    }
+
     hasSavedChangesRef.current = true;
+    clearDraft();
     setPendingDuplicateSubmission(null);
     setDuplicateTargetPersonId(null);
     setDuplicateDialogOpen(false);
     handleSheetOpenChange(false);
-    onSuccess();
+    await onSuccess(resolvedPerson);
   };
 
   const handleContinueWithDuplicate = async () => {
@@ -1323,11 +1872,14 @@ export function PersonFormSheet({
 
     try {
       setIsResolvingDuplicateAction(true);
-      await persistPersonPayload(
+      const savedPersonId = await persistPersonPayload(
         pendingDuplicateSubmission.payload,
         pendingDuplicateSubmission.normalizedType
       );
-      finalizeSuccess();
+      await finalizeSuccess(
+        savedPersonId,
+        buildSuccessPerson(savedPersonId, pendingDuplicateSubmission.payload)
+      );
     } catch (error: unknown) {
       const message = error instanceof Error ? error.message : null;
       toast.error(message || (isEditing ? t('updateError') : t('createError')));
@@ -1371,7 +1923,13 @@ export function PersonFormSheet({
         })
       );
 
-      finalizeSuccess();
+      await finalizeSuccess(
+        duplicateTargetPersonId,
+        buildSuccessPerson(
+          duplicateTargetPersonId,
+          pendingDuplicateSubmission.payload
+        )
+      );
     } catch (error: unknown) {
       const message = error instanceof Error ? error.message : null;
       toast.error(message || t('duplicateMergeError'));
@@ -1384,9 +1942,10 @@ export function PersonFormSheet({
     try {
       setIsSubmitting(true);
 
-      const normalizedType = allowCompanyRegistration
-        ? values.type
-        : 'individual';
+      const normalizedType =
+        canUseCompanyType && values.type === 'company'
+          ? 'company'
+          : 'individual';
 
       const payload = buildSubmitPayload(values, normalizedType);
       const matches = await findDuplicates(payload);
@@ -1408,8 +1967,11 @@ export function PersonFormSheet({
         return;
       }
 
-      await persistPersonPayload(payload, normalizedType);
-      finalizeSuccess();
+      const savedPersonId = await persistPersonPayload(payload, normalizedType);
+      await finalizeSuccess(
+        savedPersonId,
+        buildSuccessPerson(savedPersonId, payload)
+      );
     } catch (error: unknown) {
       const message = error instanceof Error ? error.message : null;
       toast.error(message || (isEditing ? t('updateError') : t('createError')));
@@ -1421,7 +1983,10 @@ export function PersonFormSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-        <SheetContent className="flex h-full w-full max-w-[95vw] flex-col overflow-hidden p-0 sm:max-w-3xl lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
           <SheetHeader className="shrink-0 border-b p-4">
             <div className="flex items-center gap-3">
               <div
@@ -1440,14 +2005,16 @@ export function PersonFormSheet({
               </div>
               <div>
                 <SheetTitle>
-                  {isEditing ? t('sheetEditTitle') : t('sheetCreateTitle')}
+                  {title ||
+                    (isEditing ? t('sheetEditTitle') : t('sheetCreateTitle'))}
                 </SheetTitle>
                 <SheetDescription>
-                  {isEditing
-                    ? t('sheetEditDescription')
-                    : allowCompanyRegistration
-                      ? t('sheetCreateDescription')
-                      : t('sheetCreateDescriptionIndividualOnly')}
+                  {description ||
+                    (isEditing
+                      ? t('sheetEditDescription')
+                      : canUseCompanyType
+                        ? t('sheetCreateDescription')
+                        : t('sheetCreateDescriptionIndividualOnly'))}
                 </SheetDescription>
               </div>
             </div>
@@ -1565,7 +2132,7 @@ export function PersonFormSheet({
                       : 'grid-cols-1 sm:grid-cols-2'
                   )}
                 >
-                  {allowCompanyRegistration ? (
+                  {showTypeField ? (
                     <div className="space-y-1.5">
                       <Label className="text-xs font-medium">{t('type')}</Label>
                       <Select
@@ -1590,74 +2157,78 @@ export function PersonFormSheet({
                       </Select>
                     </div>
                   ) : null}
-                  <div className="space-y-1.5">
-                    <Label className="text-xs font-medium">{t('status')}</Label>
-                    <Select
-                      value={watch('status')}
-                      onValueChange={(value: 'active' | 'inactive') =>
-                        setValue('status', value)
-                      }
-                    >
-                      <SelectTrigger className="h-9 w-full min-w-0">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="active">{t('active')}</SelectItem>
-                        <SelectItem value="inactive">
-                          {t('inactive')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-medium">
+                        {t('status')}
+                      </Label>
+                      <Select
+                        value={watch('status')}
+                        onValueChange={(value: 'active' | 'inactive') =>
+                          setValue('status', value)
+                        }
+                      >
+                        <SelectTrigger className="h-9 w-full min-w-0">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="active">{t('active')}</SelectItem>
+                          <SelectItem value="inactive">
+                            {t('inactive')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
 
-                  {watchType === 'individual' ? (
-                    <>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs font-medium">
-                          {t('birthDate')}
-                        </Label>
-                        <DatePickerWithYearMonth
-                          date={watch('birth_date') || undefined}
-                          onSelect={(date) =>
-                            setValue('birth_date', date || null)
-                          }
-                          maxDate={new Date()}
-                          placeholder={t('selectDate')}
-                          localeCode={currentLocaleCode}
-                        />
-                      </div>
+                    {watchType === 'individual' ? (
+                      <>
+                        <div className="space-y-1.5 mb-1.5">
+                          <Label className="text-xs font-medium">
+                            {t('birthDate')}
+                          </Label>
+                          <DatePickerWithYearMonth
+                            date={watch('birth_date') || undefined}
+                            onSelect={(date) =>
+                              setValue('birth_date', date || null)
+                            }
+                            maxDate={new Date()}
+                            placeholder={t('selectDate')}
+                            localeCode={currentLocaleCode}
+                          />
+                        </div>
 
-                      <div className="space-y-1.5">
-                        <Label className="text-xs font-medium">
-                          {t('gender')}
-                        </Label>
-                        <Select
-                          value={watch('gender') || ''}
-                          onValueChange={(value: PersonGender) =>
-                            setValue('gender', value)
-                          }
-                        >
-                          <SelectTrigger className="h-9 w-full min-w-0">
-                            <SelectValue placeholder={t('selectGender')} />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="male">
-                              {t('genderMale')}
-                            </SelectItem>
-                            <SelectItem value="female">
-                              {t('genderFemale')}
-                            </SelectItem>
-                            <SelectItem value="other">
-                              {t('genderOther')}
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </>
-                  ) : null}
+                        <div className="space-y-1.5">
+                          <Label className="text-xs font-medium">
+                            {t('gender')}
+                          </Label>
+                          <Select
+                            value={watch('gender') || ''}
+                            onValueChange={(value: PersonGender) =>
+                              setValue('gender', value)
+                            }
+                          >
+                            <SelectTrigger className="h-9 w-full min-w-0">
+                              <SelectValue placeholder={t('selectGender')} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="male">
+                                {t('genderMale')}
+                              </SelectItem>
+                              <SelectItem value="female">
+                                {t('genderFemale')}
+                              </SelectItem>
+                              <SelectItem value="other">
+                                {t('genderOther')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </>
+                    ) : null}
+                  </div>
                 </div>
 
-                <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+                <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                   <div className="space-y-1.5">
                     <Label className="text-xs font-medium">{t('owner')}</Label>
                     <Select
@@ -1764,20 +2335,19 @@ export function PersonFormSheet({
                       </SelectContent>
                     </Select>
                   </div>
+                </div>
 
-                  <div className="space-y-1.5">
-                    <Label className="text-xs font-medium">
-                      {t('nextActionAt')}
-                    </Label>
-                    <Input
-                      type="datetime-local"
-                      value={watch('next_action_at') || ''}
-                      onChange={(event) =>
-                        setValue('next_action_at', event.target.value)
-                      }
-                      className="h-9"
-                    />
-                  </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium">
+                    {t('nextActionAt')}
+                  </Label>
+                  <DateTimePickerWithTime
+                    value={watch('next_action_at') || ''}
+                    onChange={(value) => setValue('next_action_at', value)}
+                    placeholder={t('selectDate')}
+                    localeCode={currentLocaleCode}
+                    clearLabel={t('remove')}
+                  />
                 </div>
 
                 {watchType === 'individual' ? (
@@ -1807,7 +2377,9 @@ export function PersonFormSheet({
                             lockCreateType
                             valueType="number"
                             initialSelectedLabel={
-                              person?.employer_company?.name || ''
+                              person?.employer_company?.name ||
+                              initialEmployerCompanyLabel ||
+                              ''
                             }
                           />
                         </div>
@@ -2486,6 +3058,16 @@ export function PersonFormSheet({
                     : t('createPerson')}
               </Button>
             </div>
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
             <p className="text-xs text-muted-foreground">
               {t('formShortcutsHint')}
             </p>