@hed-hog/contact 0.0.329 → 0.0.330

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

@@ -0,0 +1,1306 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import { FileText, Loader2, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { PersonPicker } from '../../_components/person-picker';
+import { PersonFormSheet } from '../../person/_components/person-form-sheet';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  Person,
+} from '../../person/_components/person-types';
+import {
+  formatEnumLabel,
+  getCurrentRevision,
+  type ProposalBillingModel,
+  type ProposalContractCategory,
+  type ProposalContractType,
+  type ProposalItemType,
+  type ProposalRecord,
+  type ProposalRecurrence,
+} from './proposal-types';
+
+// ─── Zod schemas ────────────────────────────────────────────────────────────
+
+const proposalItemFormSchema = z.object({
+  name: z.string().trim().min(1),
+  description: z.string().optional(),
+  itemType: z.enum(['service', 'product', 'fee', 'discount', 'note', 'other']),
+  quantity: z.coerce.number().min(0),
+  unitAmount: z.coerce.number().min(0),
+  recurrence: z.enum(['one_time', 'monthly', 'quarterly', 'yearly', 'other']),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+});
+
+const proposalFormSchema = z.object({
+  code: z.string().max(40).optional(),
+  title: z.string().trim().min(1),
+  validUntil: z.string().optional(),
+  contractCategory: z.enum([
+    'employee',
+    'contractor',
+    'client',
+    'supplier',
+    'vendor',
+    'partner',
+    'internal',
+    'other',
+  ]),
+  contractType: z.enum([
+    'clt',
+    'pj',
+    'freelancer_agreement',
+    'service_agreement',
+    'fixed_term',
+    'recurring_service',
+    'nda',
+    'amendment',
+    'addendum',
+    'other',
+  ]),
+  billingModel: z.enum([
+    'time_and_material',
+    'monthly_retainer',
+    'fixed_price',
+  ]),
+  summary: z.string().optional(),
+  notes: z.string().optional(),
+  items: z.array(proposalItemFormSchema).min(1),
+});
+
+type ProposalFormValues = z.infer<typeof proposalFormSchema>;
+type ProposalFormItemValues = z.infer<typeof proposalItemFormSchema>;
+
+type ProposalDraftPayload = {
+  personId: number;
+  proposalId: number | null;
+  mode: 'create' | 'edit';
+  values: ProposalFormValues;
+};
+
+const PROPOSAL_DRAFT_STORAGE_KEY = 'contact-proposal-form-draft';
+
+// ─── Option arrays ───────────────────────────────────────────────────────────
+
+const CONTRACT_CATEGORY_OPTIONS: ProposalContractCategory[] = [
+  'client',
+  'supplier',
+  'vendor',
+  'partner',
+  'employee',
+  'contractor',
+  'internal',
+  'other',
+];
+
+const CONTRACT_TYPE_OPTIONS: ProposalContractType[] = [
+  'service_agreement',
+  'recurring_service',
+  'fixed_term',
+  'freelancer_agreement',
+  'pj',
+  'clt',
+  'nda',
+  'amendment',
+  'addendum',
+  'other',
+];
+
+const BILLING_MODEL_OPTIONS: ProposalBillingModel[] = [
+  'fixed_price',
+  'monthly_retainer',
+  'time_and_material',
+];
+
+const ITEM_TYPE_OPTIONS: ProposalItemType[] = [
+  'service',
+  'product',
+  'fee',
+  'discount',
+  'note',
+  'other',
+];
+
+const RECURRENCE_OPTIONS: ProposalRecurrence[] = [
+  'one_time',
+  'monthly',
+  'quarterly',
+  'yearly',
+  'other',
+];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function createEmptyProposalItem(
+  overrides: Partial<ProposalFormItemValues> = {}
+): ProposalFormItemValues {
+  return {
+    name: '',
+    description: '',
+    itemType: 'service',
+    quantity: 1,
+    unitAmount: 0,
+    recurrence: 'one_time',
+    startDate: '',
+    endDate: '',
+    ...overrides,
+  };
+}
+
+function createDefaultProposalFormValues(): ProposalFormValues {
+  return {
+    code: '',
+    title: '',
+    validUntil: '',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    billingModel: 'fixed_price',
+    summary: '',
+    notes: '',
+    items: [createEmptyProposalItem()],
+  };
+}
+
+function toDateInputValue(value?: string | null) {
+  if (!value) return '';
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return '';
+  return parsed.toISOString().slice(0, 10);
+}
+
+function toIsoDateFromInputValue(value?: string | null) {
+  if (!value) return null;
+  return new Date(`${value}T00:00:00`).toISOString();
+}
+
+function mapProposalItemToFormValue(
+  item?: ProposalRecord['proposal_revision'] extends Array<infer R>
+    ? R extends { proposal_item?: Array<infer I> }
+      ? I
+      : never
+    : never,
+  fallback?: {
+    name?: string;
+    description?: string | null;
+    amountInCents?: number | null;
+  }
+): ProposalFormItemValues {
+  return createEmptyProposalItem({
+    name: (item as any)?.name ?? fallback?.name ?? '',
+    description: (item as any)?.description ?? fallback?.description ?? '',
+    itemType:
+      ((item as any)?.item_type as ProposalItemType | undefined) ?? 'service',
+    quantity: Number((item as any)?.quantity ?? 1),
+    unitAmount:
+      Number(
+        (item as any)?.unit_amount_cents ??
+          (item as any)?.total_amount_cents ??
+          fallback?.amountInCents ??
+          0
+      ) / 100,
+    recurrence:
+      ((item as any)?.recurrence as ProposalRecurrence | undefined) ??
+      'one_time',
+    startDate: toDateInputValue((item as any)?.start_date),
+    endDate: toDateInputValue((item as any)?.end_date),
+  });
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export type ProposalFormSheetProps = {
+  proposalId: number | null;
+  personId: number;
+  open: boolean;
+  onClose: () => void;
+  onSaved: (savedProposalId: number) => void;
+};
+
+export function ProposalFormSheet({
+  proposalId,
+  personId,
+  open,
+  onClose,
+  onSaved,
+}: ProposalFormSheetProps) {
+  const t = useTranslations('contact.CrmPipeline');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [selectedPersonId, setSelectedPersonId] = useState(personId);
+  const [selectedPersonName, setSelectedPersonName] = useState('');
+  const [editPersonOpen, setEditPersonOpen] = useState(false);
+  const [editPersonData, setEditPersonData] = useState<Person | null>(null);
+  const [isLoadingEditPerson, setIsLoadingEditPerson] = useState(false);
+
+  const form = useForm<ProposalFormValues>({
+    resolver: zodResolver(proposalFormSchema),
+    defaultValues: createDefaultProposalFormValues(),
+  });
+
+  const {
+    fields: itemFields,
+    append: appendItem,
+    remove: removeItem,
+  } = useFieldArray({
+    control: form.control,
+    name: 'items',
+  });
+
+  const watchedValues = useWatch({ control: form.control });
+  const watchedItems = useMemo(
+    () => watchedValues.items ?? [],
+    [watchedValues.items]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ProposalDraftPayload>({
+    storageKey: PROPOSAL_DRAFT_STORAGE_KEY,
+    value: {
+      personId,
+      proposalId,
+      mode: proposalId ? 'edit' : 'create',
+      values: {
+        code: watchedValues.code ?? '',
+        title: watchedValues.title ?? '',
+        validUntil: watchedValues.validUntil ?? '',
+        contractCategory: watchedValues.contractCategory ?? 'client',
+        contractType: watchedValues.contractType ?? 'service_agreement',
+        billingModel: watchedValues.billingModel ?? 'fixed_price',
+        summary: watchedValues.summary ?? '',
+        notes: watchedValues.notes ?? '',
+        items: watchedValues.items?.map((item) =>
+          createEmptyProposalItem(item)
+        ) ?? [createEmptyProposalItem()],
+      },
+    },
+    hasData:
+      (watchedValues.code ?? '').trim().length > 0 ||
+      (watchedValues.title ?? '').trim().length > 0 ||
+      (watchedValues.validUntil ?? '').trim().length > 0 ||
+      (watchedValues.summary ?? '').trim().length > 0 ||
+      (watchedValues.notes ?? '').trim().length > 0 ||
+      (watchedValues.contractCategory ?? 'client') !== 'client' ||
+      (watchedValues.contractType ?? 'service_agreement') !==
+        'service_agreement' ||
+      (watchedValues.billingModel ?? 'fixed_price') !== 'fixed_price' ||
+      (watchedValues.items ?? []).some(
+        (item) =>
+          (item.name ?? '').trim().length > 0 ||
+          (item.description ?? '').trim().length > 0 ||
+          Number(item.quantity ?? 1) !== 1 ||
+          Number(item.unitAmount ?? 0) !== 0 ||
+          (item.recurrence ?? 'one_time') !== 'one_time' ||
+          (item.startDate ?? '').trim().length > 0 ||
+          (item.endDate ?? '').trim().length > 0 ||
+          (item.itemType ?? 'service') !== 'service'
+      ),
+    enabled: open,
+  });
+
+  const { data: proposalDetail, isLoading: isLoadingDetail } =
+    useQuery<ProposalRecord>({
+      queryKey: ['contact-proposal-form-detail', proposalId, currentLocaleCode],
+      enabled: open && proposalId !== null,
+      queryFn: async () => {
+        const response = await request<ProposalRecord>({
+          url: `/proposal/${proposalId}`,
+          method: 'GET',
+        });
+        return response.data;
+      },
+      placeholderData: (previous) => previous,
+    });
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    enabled: open,
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    enabled: open,
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) return null;
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) return null;
+    const localeValue = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale: localeValue,
+    });
+    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 pricingSummary = useMemo(() => {
+    const subtotalCents = (watchedItems ?? []).reduce((sum, item) => {
+      if (item?.itemType === 'discount') return sum;
+      return (
+        sum +
+        Math.round(
+          Number(item?.quantity ?? 0) * Number(item?.unitAmount ?? 0) * 100
+        )
+      );
+    }, 0);
+    const discountCents = (watchedItems ?? []).reduce((sum, item) => {
+      if (item?.itemType !== 'discount') return sum;
+      return (
+        sum +
+        Math.round(
+          Number(item?.quantity ?? 0) * Number(item?.unitAmount ?? 0) * 100
+        )
+      );
+    }, 0);
+    return {
+      subtotalCents,
+      discountCents,
+      totalCents: Math.max(subtotalCents - discountCents, 0),
+    };
+  }, [watchedItems]);
+
+  const formatCurrency = (
+    cents?: number | null,
+    currencyCode?: string | null
+  ) =>
+    new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode || 'BRL',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(Number(cents ?? 0) / 100);
+
+  const getProposalEnumLabel = (
+    group:
+      | 'contractCategory'
+      | 'contractType'
+      | 'billingModel'
+      | 'itemType'
+      | 'recurrence',
+    value?: string | null
+  ) => {
+    if (!value) return '—';
+    try {
+      return t(`proposals.enum.${group}.${value}` as Parameters<typeof t>[0]);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+
+  // Sync selectedPersonId from prop when sheet opens
+  useEffect(() => {
+    if (open) {
+      setSelectedPersonId(personId);
+    }
+  }, [open, personId]);
+
+  // Sync selectedPersonName from proposal detail
+  useEffect(() => {
+    if (proposalDetail?.person) {
+      const name =
+        (proposalDetail.person as any).trade_name ||
+        (proposalDetail.person as any).name ||
+        '';
+      setSelectedPersonName(name);
+    }
+  }, [proposalDetail]);
+
+  // Populate form when sheet opens or proposalDetail is available
+  useEffect(() => {
+    if (!open) {
+      form.reset(createDefaultProposalFormValues());
+      return;
+    }
+
+    const storedDraft = loadDraft();
+
+    // Create mode
+    if (proposalId === null) {
+      if (
+        storedDraft?.payload.mode === 'create' &&
+        storedDraft.payload.personId === personId
+      ) {
+        form.reset({
+          ...createDefaultProposalFormValues(),
+          ...storedDraft.payload.values,
+          items:
+            storedDraft.payload.values.items?.length > 0
+              ? storedDraft.payload.values.items.map((item) =>
+                  createEmptyProposalItem(item)
+                )
+              : [createEmptyProposalItem()],
+        });
+      } else {
+        form.reset(createDefaultProposalFormValues());
+      }
+      return;
+    }
+
+    // Edit mode — wait for detail to load
+    if (!proposalDetail) return;
+
+    if (
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.personId === personId &&
+      storedDraft.payload.proposalId === proposalId
+    ) {
+      form.reset({
+        ...createDefaultProposalFormValues(),
+        ...storedDraft.payload.values,
+        items:
+          storedDraft.payload.values.items?.length > 0
+            ? storedDraft.payload.values.items.map((item) =>
+                createEmptyProposalItem(item)
+              )
+            : [createEmptyProposalItem()],
+      });
+      return;
+    }
+
+    const currentRevision = getCurrentRevision(proposalDetail);
+    const revisionItems = currentRevision?.proposal_item?.length
+      ? currentRevision.proposal_item.map((item) =>
+          mapProposalItemToFormValue(item as any)
+        )
+      : [
+          mapProposalItemToFormValue(undefined, {
+            name: proposalDetail.title,
+            description: currentRevision?.summary ?? proposalDetail.notes ?? '',
+            amountInCents: proposalDetail.total_amount_cents,
+          }),
+        ];
+
+    form.reset({
+      code: proposalDetail.code ?? '',
+      title: proposalDetail.title,
+      validUntil: toDateInputValue(proposalDetail.valid_until),
+      contractCategory: proposalDetail.contract_category ?? 'client',
+      contractType: proposalDetail.contract_type ?? 'service_agreement',
+      billingModel: proposalDetail.billing_model ?? 'fixed_price',
+      summary: currentRevision?.summary ?? '',
+      notes: proposalDetail.notes ?? '',
+      items: revisionItems,
+    });
+  }, [proposalDetail, open, proposalId, personId, form, loadDraft]);
+
+  const handleSave = async (values: ProposalFormValues) => {
+    const normalizedItems = values.items
+      .map((item) => {
+        const quantity = Number(item.quantity ?? 0);
+        const unitAmount = Number(item.unitAmount ?? 0);
+        const unitAmountCents = Math.round(unitAmount * 100);
+        const totalAmountCents = Math.round(quantity * unitAmount * 100);
+        return {
+          name: item.name.trim(),
+          description: item.description?.trim() || null,
+          quantity,
+          unit_amount_cents: unitAmountCents,
+          total_amount_cents: totalAmountCents,
+          item_type: item.itemType,
+          term_type: 'value',
+          recurrence: item.recurrence,
+          start_date: toIsoDateFromInputValue(item.startDate),
+          end_date: toIsoDateFromInputValue(item.endDate),
+        };
+      })
+      .filter((item) => item.name.length > 0);
+
+    const subtotalAmountCents = normalizedItems.reduce((sum, item) => {
+      if (item.item_type === 'discount') return sum;
+      return sum + Number(item.total_amount_cents ?? 0);
+    }, 0);
+
+    const discountAmountCents = normalizedItems.reduce((sum, item) => {
+      if (item.item_type !== 'discount') return sum;
+      return sum + Number(item.total_amount_cents ?? 0);
+    }, 0);
+
+    const totalAmountCents = Math.max(
+      subtotalAmountCents - discountAmountCents,
+      0
+    );
+
+    const payload = {
+      person_id: selectedPersonId,
+      code: values.code?.trim() || undefined,
+      title: values.title.trim(),
+      contract_category: values.contractCategory,
+      contract_type: values.contractType,
+      billing_model: values.billingModel,
+      currency_code: 'BRL',
+      valid_until: toIsoDateFromInputValue(values.validUntil),
+      subtotal_amount_cents: subtotalAmountCents,
+      discount_amount_cents: discountAmountCents,
+      total_amount_cents: totalAmountCents,
+      summary: values.summary?.trim() || null,
+      notes: values.notes?.trim() || null,
+      items: normalizedItems,
+    };
+
+    try {
+      setIsSaving(true);
+
+      if (proposalId) {
+        await request({
+          url: `/proposal/${proposalId}`,
+          method: 'PATCH',
+          data: {
+            ...payload,
+            create_new_revision: true,
+          },
+        });
+        toast.success(t('proposals.toasts.updateSuccess'));
+        clearDraft();
+        onSaved(proposalId);
+      } else {
+        const response = await request<ProposalRecord>({
+          url: '/proposal',
+          method: 'POST',
+          data: payload,
+        });
+        const createdProposal = response.data;
+        toast.success(t('proposals.toasts.createSuccess'));
+        clearDraft();
+        onSaved(createdProposal.id);
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : proposalId
+            ? t('proposals.toasts.updateError')
+            : t('proposals.toasts.createError');
+      toast.error(message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenEditPerson = async () => {
+    if (!selectedPersonId) return;
+    try {
+      setIsLoadingEditPerson(true);
+      const response = await request<Person>({
+        url: `/person/${selectedPersonId}`,
+        method: 'GET',
+      });
+      setEditPersonData(response.data);
+      setEditPersonOpen(true);
+    } catch {
+      toast.error('Failed to load person data');
+    } finally {
+      setIsLoadingEditPerson(false);
+    }
+  };
+
+  return (
+    <>
+      <Sheet
+        open={open}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) onClose();
+        }}
+      >
+        <SheetContent className="flex h-full w-full max-w-[95vw] flex-col overflow-hidden p-0 sm:max-w-2xl xl:max-w-4xl">
+          <SheetHeader className="shrink-0 border-b px-5 py-4 text-left">
+            <div className="flex items-start gap-3 pr-6">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+                <FileText className="size-5" />
+              </div>
+              <div className="space-y-1">
+                <SheetTitle>
+                  {proposalId
+                    ? t('proposals.form.editTitle')
+                    : t('proposals.form.createTitle')}
+                </SheetTitle>
+                <SheetDescription>
+                  {proposalId
+                    ? t('proposals.form.editDescription')
+                    : t('proposals.form.createDescription')}
+                </SheetDescription>
+              </div>
+            </div>
+          </SheetHeader>
+
+          {open && proposalId !== null && isLoadingDetail ? (
+            <div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              {t('proposals.loading')}
+            </div>
+          ) : (
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleSave)}
+                className="flex flex-1 flex-col overflow-hidden"
+              >
+                <div className="flex-1 overflow-y-auto px-5 py-4">
+                  <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                    <div className="lg:col-span-2">
+                      <div className="flex items-end gap-2">
+                        <div className="flex-1">
+                          <PersonPicker
+                            label={t('proposals.form.client')}
+                            entityLabel={t('proposals.form.clientEntity')}
+                            value={selectedPersonId}
+                            onChange={(id: number | null, name: string) => {
+                              if (id !== null) {
+                                setSelectedPersonId(id);
+                                setSelectedPersonName(name);
+                              }
+                            }}
+                            selectPlaceholder={t(
+                              'proposals.form.clientPlaceholder'
+                            )}
+                            clearable={false}
+                            initialSelectedLabel={selectedPersonName}
+                          />
+                        </div>
+                        {selectedPersonId ? (
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="icon"
+                            disabled={isLoadingEditPerson}
+                            onClick={() => void handleOpenEditPerson()}
+                            title={t('proposals.form.editClient')}
+                          >
+                            {isLoadingEditPerson ? (
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                              <Pencil className="h-4 w-4" />
+                            )}
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem className="lg:col-span-2">
+                          <FormLabel>{t('proposals.form.title')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder={t('proposals.form.titlePlaceholder')}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="code"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('proposals.form.code')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={field.value ?? ''}
+                              placeholder={t('proposals.form.codePlaceholder')}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <div className="space-y-3 lg:col-span-2">
+                      <div className="flex flex-col gap-3 rounded-xl border border-border/60 bg-muted/10 p-4 sm:flex-row sm:items-start sm:justify-between">
+                        <div className="space-y-1">
+                          <p className="text-sm font-medium text-foreground">
+                            {t('proposals.form.items')}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {t('proposals.form.itemsDescription')}
+                          </p>
+                        </div>
+
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="gap-2 self-start"
+                          onClick={() => appendItem(createEmptyProposalItem())}
+                        >
+                          <Plus className="size-4" />
+                          {t('proposals.form.addItem')}
+                        </Button>
+                      </div>
+
+                      <div className="space-y-3">
+                        {itemFields.map((itemField, index) => {
+                          const watchedItem = watchedItems?.[index];
+                          const lineTotalCents = Math.round(
+                            Number(watchedItem?.quantity ?? 0) *
+                              Number(watchedItem?.unitAmount ?? 0) *
+                              100
+                          );
+                          const isDiscountItem =
+                            watchedItem?.itemType === 'discount';
+
+                          return (
+                            <div
+                              key={itemField.id}
+                              className="rounded-xl border border-border/60 bg-background p-3 shadow-xs"
+                            >
+                              <div className="flex flex-wrap items-start justify-between gap-2">
+                                <div>
+                                  <p className="text-sm font-semibold text-foreground">
+                                    {t('proposals.form.itemLabel', {
+                                      number: index + 1,
+                                    })}
+                                  </p>
+                                  <p className="text-xs text-muted-foreground">
+                                    {isDiscountItem
+                                      ? t('proposals.form.discountHint')
+                                      : t('proposals.form.itemHint')}
+                                  </p>
+                                </div>
+
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
+                                  className="gap-2 text-muted-foreground"
+                                  onClick={() => removeItem(index)}
+                                  disabled={itemFields.length === 1}
+                                >
+                                  <Trash2 className="size-4" />
+                                  {t('proposals.form.removeItem')}
+                                </Button>
+                              </div>
+
+                              <div className="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-6">
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.name` as const}
+                                  render={({ field }) => (
+                                    <FormItem className="xl:col-span-2">
+                                      <FormLabel>
+                                        {t('proposals.form.itemName')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Input
+                                          {...field}
+                                          value={field.value ?? ''}
+                                          placeholder={t(
+                                            'proposals.form.itemNamePlaceholder'
+                                          )}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.itemType` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.itemType')}
+                                      </FormLabel>
+                                      <Select
+                                        onValueChange={field.onChange}
+                                        value={field.value}
+                                      >
+                                        <FormControl>
+                                          <SelectTrigger className="w-full">
+                                            <SelectValue />
+                                          </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                          {ITEM_TYPE_OPTIONS.map((option) => (
+                                            <SelectItem
+                                              key={option}
+                                              value={option}
+                                            >
+                                              {getProposalEnumLabel(
+                                                'itemType',
+                                                option
+                                              )}
+                                            </SelectItem>
+                                          ))}
+                                        </SelectContent>
+                                      </Select>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.recurrence` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.recurrence')}
+                                      </FormLabel>
+                                      <Select
+                                        onValueChange={field.onChange}
+                                        value={field.value}
+                                      >
+                                        <FormControl>
+                                          <SelectTrigger className="w-full">
+                                            <SelectValue />
+                                          </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                          {RECURRENCE_OPTIONS.map((option) => (
+                                            <SelectItem
+                                              key={option}
+                                              value={option}
+                                            >
+                                              {getProposalEnumLabel(
+                                                'recurrence',
+                                                option
+                                              )}
+                                            </SelectItem>
+                                          ))}
+                                        </SelectContent>
+                                      </Select>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.quantity` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.quantity')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Input
+                                          {...field}
+                                          type="number"
+                                          min="0"
+                                          step="0.01"
+                                          value={field.value ?? 0}
+                                          onChange={(event) =>
+                                            field.onChange(event.target.value)
+                                          }
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.unitAmount` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.unitAmount')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <InputMoney
+                                          ref={field.ref}
+                                          name={field.name}
+                                          value={field.value ?? 0}
+                                          onBlur={field.onBlur}
+                                          onValueChange={(value) =>
+                                            field.onChange(value ?? 0)
+                                          }
+                                          placeholder="0,00"
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.description` as const}
+                                  render={({ field }) => (
+                                    <FormItem className="xl:col-span-4">
+                                      <FormLabel>
+                                        {t('proposals.form.itemDescription')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Textarea
+                                          {...field}
+                                          value={field.value ?? ''}
+                                          rows={3}
+                                          placeholder={t(
+                                            'proposals.form.itemDescriptionPlaceholder'
+                                          )}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.startDate` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.startDate')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Input
+                                          type="date"
+                                          {...field}
+                                          value={field.value ?? ''}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`items.${index}.endDate` as const}
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>
+                                        {t('proposals.form.endDate')}
+                                      </FormLabel>
+                                      <FormControl>
+                                        <Input
+                                          type="date"
+                                          {...field}
+                                          value={field.value ?? ''}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                              </div>
+
+                              <div className="mt-3 flex justify-end">
+                                <div className="rounded-lg bg-muted/40 px-3 py-2 text-sm font-medium text-foreground">
+                                  {t('proposals.form.lineTotal')}:{' '}
+                                  {isDiscountItem ? '- ' : ''}
+                                  {formatCurrency(lineTotalCents, 'BRL')}
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      <div className="grid gap-2 rounded-xl border border-border/60 bg-muted/15 p-4 sm:grid-cols-3">
+                        <div>
+                          <p className="text-xs text-muted-foreground">
+                            {t('proposals.form.subtotal')}
+                          </p>
+                          <p className="text-base font-semibold text-foreground">
+                            {formatCurrency(
+                              pricingSummary.subtotalCents,
+                              'BRL'
+                            )}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-muted-foreground">
+                            {t('proposals.form.discount')}
+                          </p>
+                          <p className="text-base font-semibold text-foreground">
+                            -{' '}
+                            {formatCurrency(
+                              pricingSummary.discountCents,
+                              'BRL'
+                            )}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-muted-foreground">
+                            {t('proposals.form.calculatedTotal')}
+                          </p>
+                          <p className="text-base font-semibold text-foreground">
+                            {formatCurrency(pricingSummary.totalCents, 'BRL')}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <FormField
+                      control={form.control}
+                      name="validUntil"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('proposals.form.validUntil')}
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              type="date"
+                              {...field}
+                              value={field.value ?? ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="contractCategory"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('proposals.form.contractCategory')}
+                          </FormLabel>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {CONTRACT_CATEGORY_OPTIONS.map((option) => (
+                                <SelectItem key={option} value={option}>
+                                  {getProposalEnumLabel(
+                                    'contractCategory',
+                                    option
+                                  )}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="contractType"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('proposals.form.contractType')}
+                          </FormLabel>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {CONTRACT_TYPE_OPTIONS.map((option) => (
+                                <SelectItem key={option} value={option}>
+                                  {getProposalEnumLabel('contractType', option)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="billingModel"
+                      render={({ field }) => (
+                        <FormItem className="lg:col-span-2">
+                          <FormLabel>
+                            {t('proposals.form.billingModel')}
+                          </FormLabel>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {BILLING_MODEL_OPTIONS.map((option) => (
+                                <SelectItem key={option} value={option}>
+                                  {getProposalEnumLabel('billingModel', option)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="summary"
+                      render={({ field }) => (
+                        <FormItem className="lg:col-span-2">
+                          <FormLabel>{t('proposals.form.summary')}</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              value={field.value ?? ''}
+                              rows={4}
+                              placeholder={t(
+                                'proposals.form.summaryPlaceholder'
+                              )}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="notes"
+                      render={({ field }) => (
+                        <FormItem className="lg:col-span-2">
+                          <FormLabel>{t('proposals.form.notes')}</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              value={field.value ?? ''}
+                              rows={6}
+                              placeholder={t('proposals.form.notesPlaceholder')}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+
+                <div className="shrink-0 border-t px-5 py-3">
+                  {draftStatusContent ? (
+                    <p className="mb-2 text-xs text-muted-foreground">
+                      {draftStatusContent}
+                    </p>
+                  ) : null}
+                  <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={onClose}
+                      disabled={isSaving}
+                    >
+                      {t('proposals.actions.cancel')}
+                    </Button>
+                    <Button type="submit" disabled={isSaving} className="gap-2">
+                      {isSaving ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : null}
+                      {t('proposals.actions.save')}
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            </Form>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <PersonFormSheet
+        open={editPersonOpen}
+        person={editPersonData}
+        contactTypes={contactTypes}
+        documentTypes={documentTypes}
+        onOpenChange={(isOpen: boolean) => {
+          setEditPersonOpen(isOpen);
+          if (!isOpen) setEditPersonData(null);
+        }}
+        onSuccess={async (updatedPerson?: Person) => {
+          if (updatedPerson) {
+            const name =
+              (updatedPerson as any).trade_name || updatedPerson.name || '';
+            setSelectedPersonName(name);
+          }
+          setEditPersonOpen(false);
+          setEditPersonData(null);
+        }}
+      />
+    </>
+  );
+}