@hed-hog/contact 0.0.303 → 0.0.305

package/hedhog/frontend/app/pipeline/_components/lead-proposals-tab.tsx.ejs

@@ -51,9 +51,13 @@ import {
   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 { cn } from '@/lib/utils';
 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 {
   CheckCircle2,
   Download,
@@ -68,7 +72,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -112,6 +116,21 @@ type ProposalBillingModel =
   | 'monthly_retainer'
   | 'fixed_price';
 
+type ProposalItemType =
+  | 'service'
+  | 'product'
+  | 'fee'
+  | 'discount'
+  | 'note'
+  | 'other';
+
+type ProposalRecurrence =
+  | 'one_time'
+  | 'monthly'
+  | 'quarterly'
+  | 'yearly'
+  | 'other';
+
 type ProposalItem = {
   id?: number;
   name: string;
@@ -119,8 +138,12 @@ type ProposalItem = {
   quantity?: number | null;
   unit_amount_cents?: number | null;
   total_amount_cents?: number | null;
-  item_type?: string | null;
-  recurrence?: string | null;
+  item_type?: ProposalItemType | string | null;
+  term_type?: string | null;
+  recurrence?: ProposalRecurrence | string | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  due_day?: number | null;
 };
 
 type ProposalRevision = {
@@ -196,10 +219,20 @@ type LeadProposalsTabProps = {
   onLeadUpdated: (lead: CrmLead) => Promise<void> | void;
 };
 
+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),
-  totalAmount: z.coerce.number().min(0),
   validUntil: z.string().optional(),
   contractCategory: z.enum([
     'employee',
@@ -230,9 +263,21 @@ const proposalFormSchema = z.object({
   ]),
   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 = {
+  leadId: number;
+  proposalId: number | null;
+  mode: 'create' | 'edit';
+  values: ProposalFormValues;
+};
+
+const LEAD_PROPOSAL_DRAFT_STORAGE_KEY =
+  'contact-pipeline-lead-proposal-form-draft';
 
 const CONTRACT_CATEGORY_OPTIONS: ProposalContractCategory[] = [
   'client',
@@ -264,6 +309,53 @@ const BILLING_MODEL_OPTIONS: ProposalBillingModel[] = [
   'time_and_material',
 ];
 
+const ITEM_TYPE_OPTIONS: ProposalItemType[] = [
+  'service',
+  'product',
+  'fee',
+  'discount',
+  'note',
+  'other',
+];
+
+const RECURRENCE_OPTIONS: ProposalRecurrence[] = [
+  'one_time',
+  'monthly',
+  'quarterly',
+  'yearly',
+  'other',
+];
+
+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);
@@ -281,6 +373,38 @@ function formatEnumLabel(value?: string | null) {
     .join(' ');
 }
 
+function toIsoDateFromInputValue(value?: string | null) {
+  if (!value) return null;
+  return new Date(`${value}T00:00:00`).toISOString();
+}
+
+function mapProposalItemToFormValue(
+  item?: ProposalItem | null,
+  fallback?: {
+    name?: string;
+    description?: string | null;
+    amountInCents?: number | null;
+  }
+): ProposalFormItemValues {
+  return createEmptyProposalItem({
+    name: item?.name ?? fallback?.name ?? '',
+    description: item?.description ?? fallback?.description ?? '',
+    itemType: (item?.item_type as ProposalItemType | undefined) ?? 'service',
+    quantity: Number(item?.quantity ?? 1),
+    unitAmount:
+      Number(
+        item?.unit_amount_cents ??
+          item?.total_amount_cents ??
+          fallback?.amountInCents ??
+          0
+      ) / 100,
+    recurrence:
+      (item?.recurrence as ProposalRecurrence | undefined) ?? 'one_time',
+    startDate: toDateInputValue(item?.start_date),
+    endDate: toDateInputValue(item?.end_date),
+  });
+}
+
 function openStoredFile(fileId?: number | null) {
   if (!fileId) return;
   const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
@@ -306,7 +430,7 @@ export function LeadProposalsTab({
   onLeadUpdated,
 }: LeadProposalsTabProps) {
   const t = useTranslations('contact.CrmPipeline');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
 
   const [selectedProposalId, setSelectedProposalId] = useState<number | null>(
@@ -322,19 +446,129 @@ export function LeadProposalsTab({
 
   const form = useForm<ProposalFormValues>({
     resolver: zodResolver(proposalFormSchema),
-    defaultValues: {
-      code: '',
-      title: '',
-      totalAmount: 0,
-      validUntil: '',
-      contractCategory: 'client',
-      contractType: 'service_agreement',
-      billingModel: 'fixed_price',
-      summary: '',
-      notes: '',
+    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: LEAD_PROPOSAL_DRAFT_STORAGE_KEY,
+    value: {
+      leadId: lead.id,
+      proposalId: editingProposal?.id ?? null,
+      mode: editingProposal ? '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: formOpen,
   });
 
+  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 {
     data: proposalPage = { data: [], total: 0, page: 1, pageSize: 20 },
     isLoading: isLoadingProposals,
@@ -400,50 +634,81 @@ export function LeadProposalsTab({
 
   useEffect(() => {
     if (!formOpen) {
+      form.reset(createDefaultProposalFormValues());
+      setEditingProposal(null);
+      return;
+    }
+
+    const storedDraft = loadDraft();
+
+    if (
+      !editingProposal &&
+      storedDraft?.payload.mode === 'create' &&
+      storedDraft.payload.leadId === lead.id
+    ) {
       form.reset({
-        code: '',
-        title: '',
-        totalAmount: 0,
-        validUntil: '',
-        contractCategory: 'client',
-        contractType: 'service_agreement',
-        billingModel: 'fixed_price',
-        summary: '',
-        notes: '',
+        ...createDefaultProposalFormValues(),
+        ...storedDraft.payload.values,
+        items:
+          storedDraft.payload.values.items?.length > 0
+            ? storedDraft.payload.values.items.map((item) =>
+                createEmptyProposalItem(item)
+              )
+            : [createEmptyProposalItem()],
       });
-      setEditingProposal(null);
       return;
     }
 
-    if (!editingProposal) {
+    if (
+      editingProposal &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.leadId === lead.id &&
+      storedDraft.payload.proposalId === editingProposal.id
+    ) {
       form.reset({
-        code: '',
-        title: '',
-        totalAmount: 0,
-        validUntil: '',
-        contractCategory: 'client',
-        contractType: 'service_agreement',
-        billingModel: 'fixed_price',
-        summary: '',
-        notes: '',
+        ...createDefaultProposalFormValues(),
+        ...storedDraft.payload.values,
+        items:
+          storedDraft.payload.values.items?.length > 0
+            ? storedDraft.payload.values.items.map((item) =>
+                createEmptyProposalItem(item)
+              )
+            : [createEmptyProposalItem()],
       });
       return;
     }
 
+    if (!editingProposal) {
+      form.reset(createDefaultProposalFormValues());
+      return;
+    }
+
     const currentRevision = getCurrentRevision(editingProposal);
+    const revisionItems = currentRevision?.proposal_item?.length
+      ? currentRevision.proposal_item.map((item) =>
+          mapProposalItemToFormValue(item)
+        )
+      : [
+          mapProposalItemToFormValue(undefined, {
+            name: editingProposal.title,
+            description:
+              currentRevision?.summary ?? editingProposal.notes ?? '',
+            amountInCents: editingProposal.total_amount_cents,
+          }),
+        ];
 
     form.reset({
       code: editingProposal.code ?? '',
       title: editingProposal.title,
-      totalAmount: Number(editingProposal.total_amount_cents ?? 0) / 100,
       validUntil: toDateInputValue(editingProposal.valid_until),
       contractCategory: editingProposal.contract_category ?? 'client',
       contractType: editingProposal.contract_type ?? 'service_agreement',
       billingModel: editingProposal.billing_model ?? 'fixed_price',
       summary: currentRevision?.summary ?? '',
       notes: editingProposal.notes ?? '',
+      items: revisionItems,
     });
-  }, [editingProposal, form, formOpen]);
+  }, [editingProposal, form, formOpen, lead.id, loadDraft]);
 
   const selectedProposal = useMemo(() => {
     const matchingDetail =
@@ -513,7 +778,12 @@ export function LeadProposalsTab({
   };
 
   const getProposalEnumLabel = (
-    group: 'contractCategory' | 'contractType' | 'billingModel',
+    group:
+      | 'contractCategory'
+      | 'contractType'
+      | 'billingModel'
+      | 'itemType'
+      | 'recurrence',
     value?: string | null
   ) => {
     if (!value) return '—';
@@ -584,7 +854,43 @@ export function LeadProposalsTab({
   };
 
   const handleSave = async (values: ProposalFormValues) => {
-    const amountInCents = Math.round(Number(values.totalAmount || 0) * 100);
+    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: lead.id,
       code: values.code?.trim() || undefined,
@@ -593,29 +899,13 @@ export function LeadProposalsTab({
       contract_type: values.contractType,
       billing_model: values.billingModel,
       currency_code: 'BRL',
-      valid_until: values.validUntil
-        ? new Date(`${values.validUntil}T00:00:00`).toISOString()
-        : null,
-      subtotal_amount_cents: amountInCents,
-      total_amount_cents: amountInCents,
+      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:
-        amountInCents > 0
-          ? [
-              {
-                name: values.title.trim(),
-                description:
-                  values.summary?.trim() || values.notes?.trim() || undefined,
-                quantity: 1,
-                unit_amount_cents: amountInCents,
-                total_amount_cents: amountInCents,
-                item_type: 'service',
-                term_type: 'value',
-                recurrence: 'one_time',
-              },
-            ]
-          : [],
+      items: normalizedItems,
     };
 
     try {
@@ -647,6 +937,7 @@ export function LeadProposalsTab({
         await refreshAll(createdProposal.id);
       }
 
+      clearDraft();
       setFormOpen(false);
     } catch (error) {
       const message =
@@ -1250,8 +1541,33 @@ export function LeadProposalsTab({
                                       {item.description}
                                     </p>
                                   ) : null}
+
+                                  <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                                    {item.item_type ? (
+                                      <Badge variant="secondary">
+                                        {getProposalEnumLabel(
+                                          'itemType',
+                                          item.item_type
+                                        )}
+                                      </Badge>
+                                    ) : null}
+                                    {Number(item.quantity ?? 0) > 0 ? (
+                                      <span>
+                                        {`${item.quantity} × ${formatCurrency(item.unit_amount_cents, selectedProposal.currency_code)}`}
+                                      </span>
+                                    ) : null}
+                                    {item.recurrence ? (
+                                      <Badge variant="outline">
+                                        {getProposalEnumLabel(
+                                          'recurrence',
+                                          item.recurrence
+                                        )}
+                                      </Badge>
+                                    ) : null}
+                                  </div>
                                 </div>
                                 <span className="text-sm font-semibold text-foreground">
+                                  {item.item_type === 'discount' ? '- ' : ''}
                                   {formatCurrency(
                                     item.total_amount_cents,
                                     selectedProposal.currency_code
@@ -1413,28 +1729,321 @@ export function LeadProposalsTab({
                     )}
                   />
 
-                  <FormField
-                    control={form.control}
-                    name="totalAmount"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('proposals.form.amount')}</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>
-                    )}
-                  />
+                  <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}
@@ -1588,6 +2197,11 @@ export function LeadProposalsTab({
               </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"