@hed-hog/contact 0.0.329 → 0.0.330

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

@@ -2,216 +2,59 @@
 
 import { EmptyState } from '@/components/entity-list';
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
 } from '@/components/ui/card';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-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 { 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,
-  FileText,
-  Loader2,
-  MoreHorizontal,
-  Pencil,
-  Plus,
-  Send,
-  Trash2,
-  XCircle,
+    CheckCircle2,
+    FileText,
+    Loader2,
+    MoreHorizontal,
+    Pencil,
+    Plus,
+    Send,
+    Trash2,
+    XCircle,
 } 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 { InputMoney } from '@/components/ui/input-money';
 import type { CrmLead } from '../../_lib/crm-mocks';
 import type { PaginatedResult } from '../../person/_components/person-types';
-
-type ProposalStatus =
-  | 'draft'
-  | 'pending_approval'
-  | 'approved'
-  | 'rejected'
-  | 'cancelled'
-  | 'expired'
-  | 'contract_generated';
-
-type ProposalContractCategory =
-  | 'employee'
-  | 'contractor'
-  | 'client'
-  | 'supplier'
-  | 'vendor'
-  | 'partner'
-  | 'internal'
-  | 'other';
-
-type ProposalContractType =
-  | 'clt'
-  | 'pj'
-  | 'freelancer_agreement'
-  | 'service_agreement'
-  | 'fixed_term'
-  | 'recurring_service'
-  | 'nda'
-  | 'amendment'
-  | 'addendum'
-  | 'other';
-
-type ProposalBillingModel =
-  | 'time_and_material'
-  | '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;
-  description?: string | null;
-  quantity?: number | null;
-  unit_amount_cents?: number | null;
-  total_amount_cents?: number | 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 = {
-  id: number;
-  revision_number: number;
-  is_current?: boolean;
-  title: string;
-  summary?: string | null;
-  valid_until?: string | null;
-  status?: ProposalStatus | string;
-  proposal_item?: ProposalItem[];
-};
-
-type ProposalApproval = {
-  id: number;
-  status?: string | null;
-  decision_note?: string | null;
-  submitted_at?: string | null;
-  decided_at?: string | null;
-};
-
-type ProposalDocument = {
-  id: number;
-  file_id?: number | null;
-  file_name?: string | null;
-  mime_type?: string | null;
-  document_type?: string | null;
-  is_current?: boolean | null;
-  created_at?: string | null;
-};
-
-type GenerateProposalDocumentResponse = {
-  fileId?: number | null;
-  fileName?: string | null;
-  downloadUrl?: string | null;
-};
-
-type ProposalIntegrationLink = {
-  targetModule?: string;
-  targetEntityType?: string;
-  targetEntityId?: string;
-};
-
-type ProposalRecord = {
-  id: number;
-  person_id: number;
-  code?: string | null;
-  title: string;
-  status: ProposalStatus;
-  contract_category?: ProposalContractCategory | null;
-  contract_type?: ProposalContractType | null;
-  billing_model?: ProposalBillingModel | null;
-  currency_code?: string | null;
-  subtotal_amount_cents?: number | null;
-  discount_amount_cents?: number | null;
-  tax_amount_cents?: number | null;
-  total_amount_cents?: number | null;
-  valid_until?: string | null;
-  current_revision_number?: number | null;
-  notes?: string | null;
-  created_at: string;
-  updated_at?: string | null;
-  approved_at?: string | null;
-  proposal_revision?: ProposalRevision[];
-  proposal_approval?: ProposalApproval[];
-  proposal_document?: ProposalDocument[];
-  integration_links?: ProposalIntegrationLink[];
-};
+import { ProposalFormSheet } from '../../proposals/_components/proposal-form-sheet';
+import {
+    formatEnumLabel,
+    getCurrentRevision,
+    openStoredFile,
+    type GenerateProposalDocumentResponse,
+    type ProposalRecord,
+    type ProposalStatus,
+} from '../../proposals/_components/proposal-types';
 
 type LeadProposalsTabProps = {
   lead: CrmLead;
@@ -219,218 +62,13 @@ 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),
-  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 = {
-  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',
-  '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',
-];
-
-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 formatEnumLabel(value?: string | null) {
-  if (!value) return '—';
-
-  return value
-    .split('_')
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .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 || '');
-  window.open(
-    `${baseUrl}/file/open/${fileId}`,
-    '_blank',
-    'noopener,noreferrer'
-  );
-}
-
-function getCurrentRevision(proposal?: ProposalRecord | null) {
-  if (!proposal?.proposal_revision?.length) return null;
-
-  return (
-    proposal.proposal_revision.find((revision) => revision.is_current) ??
-    proposal.proposal_revision[0]
-  );
-}
-
 export function LeadProposalsTab({
   lead,
   active,
   onLeadUpdated,
 }: LeadProposalsTabProps) {
   const t = useTranslations('contact.CrmPipeline');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const { request, currentLocaleCode } = useApp();
   const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
 
   const [selectedProposalId, setSelectedProposalId] = useState<number | null>(
@@ -441,134 +79,8 @@ export function LeadProposalsTab({
     null
   );
   const [deleteTarget, setDeleteTarget] = useState<ProposalRecord | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
   const [actionKey, setActionKey] = useState<string | null>(null);
 
-  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: 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,
@@ -632,84 +144,6 @@ export function LeadProposalsTab({
     });
   }, [proposals]);
 
-  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({
-        ...createDefaultProposalFormValues(),
-        ...storedDraft.payload.values,
-        items:
-          storedDraft.payload.values.items?.length > 0
-            ? storedDraft.payload.values.items.map((item) =>
-                createEmptyProposalItem(item)
-              )
-            : [createEmptyProposalItem()],
-      });
-      return;
-    }
-
-    if (
-      editingProposal &&
-      storedDraft?.payload.mode === 'edit' &&
-      storedDraft.payload.leadId === lead.id &&
-      storedDraft.payload.proposalId === editingProposal.id
-    ) {
-      form.reset({
-        ...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,
-      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, lead.id, loadDraft]);
-
   const selectedProposal = useMemo(() => {
     const matchingDetail =
       proposalDetail?.id === selectedProposalId ? proposalDetail : null;
@@ -853,106 +287,6 @@ export function LeadProposalsTab({
     ]);
   };
 
-  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: lead.id,
-      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 (editingProposal) {
-        await request({
-          url: `/proposal/${editingProposal.id}`,
-          method: 'PATCH',
-          data: {
-            ...payload,
-            create_new_revision: true,
-          },
-        });
-
-        toast.success(t('proposals.toasts.updateSuccess'));
-        setSelectedProposalId(editingProposal.id);
-        await refreshAll(editingProposal.id);
-      } else {
-        const response = await request<ProposalRecord>({
-          url: '/proposal',
-          method: 'POST',
-          data: payload,
-        });
-
-        const createdProposal = response.data;
-        setSelectedProposalId(createdProposal.id);
-        toast.success(t('proposals.toasts.createSuccess'));
-        await refreshAll(createdProposal.id);
-      }
-
-      clearDraft();
-      setFormOpen(false);
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : editingProposal
-            ? t('proposals.toasts.updateError')
-            : t('proposals.toasts.createError');
-
-      toast.error(message);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
   const handleStatusAction = async (
     proposal: ProposalRecord,
     action: 'submit' | 'approve' | 'reject'
@@ -1096,7 +430,7 @@ export function LeadProposalsTab({
         </div>
       </div>
 
-      <div className="mt-4 flex-1 overflow-y-auto pr-1">
+      <div className="mt-4 min-h-0 flex-1 overflow-hidden pr-1">
         {isLoadingProposals ? (
           <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
             {t('proposals.loading')}
@@ -1112,15 +446,15 @@ export function LeadProposalsTab({
             onAction={openCreateSheet}
           />
         ) : (
-          <div className="grid gap-4 xl:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
-            <Card className="min-w-0 border-border/60 shadow-sm">
-              <CardHeader className="pb-3">
+          <div className="grid h-full min-h-[320px] gap-4 xl:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
+            <Card className="flex min-w-0 flex-col overflow-hidden border-border/60 shadow-sm">
+              <CardHeader className="flex-none pb-3">
                 <CardTitle className="text-base">
                   {t('proposals.count', { count: proposals.length })}
                 </CardTitle>
                 <CardDescription>{t('proposals.selectHint')}</CardDescription>
               </CardHeader>
-              <CardContent className="space-y-2 pt-0">
+              <CardContent className="min-h-0 flex-1 space-y-2 overflow-y-auto pt-0">
                 {proposals.map((proposal) => {
                   const currentRevision = getCurrentRevision(proposal);
                   const isSelected = proposal.id === selectedProposalId;
@@ -1157,6 +491,15 @@ export function LeadProposalsTab({
                             >
                               {getStatusLabel(proposal.status)}
                             </Badge>
+                            {proposal.status === 'pending_approval' &&
+                            (proposal.required_approvals ?? 1) > 1 ? (
+                              <span className="text-xs text-muted-foreground">
+                                {t('proposals.approval.progress', {
+                                  count: proposal.approval_count ?? 0,
+                                  required: proposal.required_approvals ?? 1,
+                                })}
+                              </span>
+                            ) : null}
                           </div>
                           <p className="text-xs text-muted-foreground">
                             {proposal.code || `#${proposal.id}`}
@@ -1195,7 +538,8 @@ export function LeadProposalsTab({
                               </DropdownMenuItem>
                             ) : null}
 
-                            {proposal.status === 'pending_approval' ? (
+                            {proposal.status === 'pending_approval' &&
+                            !proposal.current_user_has_approved ? (
                               <>
                                 <DropdownMenuItem
                                   onClick={() =>
@@ -1266,8 +610,8 @@ export function LeadProposalsTab({
               </CardContent>
             </Card>
 
-            <Card className="min-w-0 border-border/60 shadow-sm">
-              <CardHeader className="gap-3">
+            <Card className="flex min-w-0 flex-col overflow-hidden border-border/60 shadow-sm">
+              <CardHeader className="flex-none gap-3">
                 <div className="flex flex-wrap items-start justify-between gap-3">
                   <div className="space-y-1">
                     <CardTitle className="text-base">
@@ -1312,7 +656,8 @@ export function LeadProposalsTab({
                         </Button>
                       ) : null}
 
-                      {selectedProposal.status === 'pending_approval' ? (
+                      {selectedProposal.status === 'pending_approval' &&
+                      !selectedProposal.current_user_has_approved ? (
                         <>
                           <Button
                             size="sm"
@@ -1369,26 +714,12 @@ export function LeadProposalsTab({
                         )}
                         {t('proposals.actions.generatePdf')}
                       </Button>
-
-                      {currentGeneratedPdf?.file_id ? (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="gap-2"
-                          onClick={() =>
-                            openStoredFile(currentGeneratedPdf.file_id)
-                          }
-                        >
-                          <Download className="size-4" />
-                          {t('proposals.actions.openPdf')}
-                        </Button>
-                      ) : null}
                     </div>
                   ) : null}
                 </div>
               </CardHeader>
 
-              <CardContent className="space-y-4">
+              <CardContent className="min-h-0 flex-1 space-y-4 overflow-y-auto">
                 {!selectedProposal ? (
                   <div className="rounded-xl border border-dashed p-6 text-sm text-muted-foreground">
                     <div className="flex flex-col items-center justify-center gap-2 text-center">
@@ -1419,7 +750,7 @@ export function LeadProposalsTab({
                         <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                           {t('proposals.fields.status')}
                         </p>
-                        <div className="mt-2">
+                        <div className="mt-2 space-y-1">
                           <Badge
                             variant="outline"
                             className={getStatusBadgeClassName(
@@ -1428,6 +759,15 @@ export function LeadProposalsTab({
                           >
                             {getStatusLabel(selectedProposal.status)}
                           </Badge>
+                          {selectedProposal.status === 'pending_approval' ? (
+                            <p className="text-xs text-muted-foreground">
+                              {t('proposals.approval.progress', {
+                                count: selectedProposal.approval_count ?? 0,
+                                required:
+                                  selectedProposal.required_approvals ?? 1,
+                              })}
+                            </p>
+                          ) : null}
                         </div>
                       </div>
                       <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
@@ -1622,8 +962,22 @@ export function LeadProposalsTab({
                       </p>
 
                       {currentGeneratedPdf ? (
-                        <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border/50 bg-muted/15 p-3">
-                          <div className="min-w-0">
+                        <div
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => handleGeneratePdf(selectedProposal)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              handleGeneratePdf(selectedProposal);
+                            }
+                          }}
+                          className={cn(
+                            'flex cursor-pointer flex-wrap items-center justify-between gap-3 rounded-xl border border-border/50 bg-muted/15 p-3 transition-all hover:border-primary/40 hover:bg-muted/30',
+                            actionKey === `generate-pdf-${selectedProposal.id}` && 'pointer-events-none opacity-60'
+                          )}
+                        >
+                          <div className="min-w-0 flex-1">
                             <p className="text-sm font-medium text-foreground">
                               {currentGeneratedPdf.file_name ||
                                 t('proposals.info.generatedDocument')}
@@ -1636,20 +990,14 @@ export function LeadProposalsTab({
                               })}
                             </p>
                           </div>
-
-                          {currentGeneratedPdf.file_id ? (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="gap-2"
-                              onClick={() =>
-                                openStoredFile(currentGeneratedPdf.file_id)
-                              }
-                            >
-                              <Download className="size-4" />
-                              {t('proposals.actions.openPdf')}
-                            </Button>
-                          ) : null}
+                          <div className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                            {actionKey === `generate-pdf-${selectedProposal.id}` ? (
+                              <Loader2 className="size-3.5 animate-spin" />
+                            ) : (
+                              <FileText className="size-3.5" />
+                            )}
+                            {t('proposals.actions.generatePdf')}
+                          </div>
                         </div>
                       ) : (
                         <div className="rounded-xl border border-dashed p-3 text-sm text-muted-foreground">
@@ -1665,564 +1013,17 @@ export function LeadProposalsTab({
         )}
       </div>
 
-      <Sheet open={formOpen} onOpenChange={setFormOpen}>
-        <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>
-                  {editingProposal
-                    ? t('proposals.form.editTitle')
-                    : t('proposals.form.createTitle')}
-                </SheetTitle>
-                <SheetDescription>
-                  {editingProposal
-                    ? t('proposals.form.editDescription')
-                    : t('proposals.form.createDescription')}
-                </SheetDescription>
-              </div>
-            </div>
-          </SheetHeader>
-
-          <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">
-                  <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={() => setFormOpen(false)}
-                    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>
+      <ProposalFormSheet
+        proposalId={editingProposal?.id ?? null}
+        personId={lead.id}
+        open={formOpen}
+        onClose={() => setFormOpen(false)}
+        onSaved={async (savedId) => {
+          setFormOpen(false);
+          setSelectedProposalId(savedId);
+          await refreshAll(savedId);
+        }}
+      />
 
       <AlertDialog
         open={!!deleteTarget}