@hed-hog/contact 0.0.299 → 0.0.301

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

@@ -0,0 +1,1584 @@
+'use client';
+
+import {
+  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,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  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 { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CheckCircle2,
+  Download,
+  FileText,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Send,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+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 ProposalItem = {
+  id?: number;
+  name: string;
+  description?: string | null;
+  quantity?: number | null;
+  unit_amount_cents?: number | null;
+  total_amount_cents?: number | null;
+  item_type?: string | null;
+  recurrence?: string | 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[];
+};
+
+type LeadProposalsTabProps = {
+  lead: CrmLead;
+  active: boolean;
+  onLeadUpdated: (lead: CrmLead) => Promise<void> | void;
+};
+
+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',
+    '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(),
+});
+
+type ProposalFormValues = z.infer<typeof proposalFormSchema>;
+
+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',
+];
+
+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 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 } = useApp();
+  const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const [selectedProposalId, setSelectedProposalId] = useState<number | null>(
+    null
+  );
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingProposal, setEditingProposal] = useState<ProposalRecord | null>(
+    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: {
+      code: '',
+      title: '',
+      totalAmount: 0,
+      validUntil: '',
+      contractCategory: 'client',
+      contractType: 'service_agreement',
+      billingModel: 'fixed_price',
+      summary: '',
+      notes: '',
+    },
+  });
+
+  const {
+    data: proposalPage = { data: [], total: 0, page: 1, pageSize: 20 },
+    isLoading: isLoadingProposals,
+    refetch: refetchProposals,
+  } = useQuery<PaginatedResult<ProposalRecord>>({
+    queryKey: ['contact-lead-proposals', lead.id, currentLocaleCode],
+    enabled: active && !!lead.id,
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('person_id', String(lead.id));
+      params.set('page', '1');
+      params.set('pageSize', '20');
+
+      const response = await request<PaginatedResult<ProposalRecord>>({
+        url: `/proposal?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? { data: [], total: 0, page: 1, pageSize: 20 },
+  });
+
+  const proposals = useMemo(() => proposalPage.data ?? [], [proposalPage.data]);
+
+  const {
+    data: proposalDetail,
+    isLoading: isLoadingDetail,
+    refetch: refetchProposalDetail,
+  } = useQuery<ProposalRecord>({
+    queryKey: [
+      'contact-lead-proposal-detail',
+      selectedProposalId,
+      currentLocaleCode,
+    ],
+    enabled: active && !!selectedProposalId,
+    queryFn: async () => {
+      const response = await request<ProposalRecord>({
+        url: `/proposal/${selectedProposalId}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  useEffect(() => {
+    if (!proposals.length) {
+      setSelectedProposalId(null);
+      return;
+    }
+
+    setSelectedProposalId((current) => {
+      if (current && proposals.some((proposal) => proposal.id === current)) {
+        return current;
+      }
+
+      return proposals[0]?.id ?? null;
+    });
+  }, [proposals]);
+
+  useEffect(() => {
+    if (!formOpen) {
+      form.reset({
+        code: '',
+        title: '',
+        totalAmount: 0,
+        validUntil: '',
+        contractCategory: 'client',
+        contractType: 'service_agreement',
+        billingModel: 'fixed_price',
+        summary: '',
+        notes: '',
+      });
+      setEditingProposal(null);
+      return;
+    }
+
+    if (!editingProposal) {
+      form.reset({
+        code: '',
+        title: '',
+        totalAmount: 0,
+        validUntil: '',
+        contractCategory: 'client',
+        contractType: 'service_agreement',
+        billingModel: 'fixed_price',
+        summary: '',
+        notes: '',
+      });
+      return;
+    }
+
+    const currentRevision = getCurrentRevision(editingProposal);
+
+    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 ?? '',
+    });
+  }, [editingProposal, form, formOpen]);
+
+  const selectedProposal = useMemo(() => {
+    const matchingDetail =
+      proposalDetail?.id === selectedProposalId ? proposalDetail : null;
+
+    return (
+      matchingDetail ??
+      proposals.find((proposal) => proposal.id === selectedProposalId) ??
+      null
+    );
+  }, [proposalDetail, proposals, selectedProposalId]);
+
+  const selectedRevision = getCurrentRevision(selectedProposal);
+  const selectedItems = selectedRevision?.proposal_item ?? [];
+  const currentGeneratedPdf = useMemo(() => {
+    if (!selectedProposal?.proposal_document?.length) {
+      return null;
+    }
+
+    return (
+      selectedProposal.proposal_document.find(
+        (document) =>
+          document.document_type === 'generated_pdf' && document.is_current
+      ) ??
+      selectedProposal.proposal_document.find(
+        (document) => document.document_type === 'generated_pdf'
+      ) ??
+      null
+    );
+  }, [selectedProposal]);
+  const statusCounts = useMemo(() => {
+    return proposals.reduce(
+      (acc, proposal) => {
+        acc[proposal.status] = (acc[proposal.status] ?? 0) + 1;
+        return acc;
+      },
+      {} as Partial<Record<ProposalStatus, number>>
+    );
+  }, [proposals]);
+
+  const formatCurrency = (
+    cents?: number | null,
+    currencyCode?: string | null
+  ) => {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode || 'BRL',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(Number(cents ?? 0) / 100);
+  };
+
+  const formatDate = (value?: string | null) => {
+    if (!value) return t('proposals.info.noValidity');
+
+    return new Intl.DateTimeFormat(locale, {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    }).format(new Date(value));
+  };
+
+  const getStatusLabel = (status?: string | null) => {
+    if (!status) return '—';
+
+    return t(`proposals.status.${status}` as Parameters<typeof t>[0]);
+  };
+
+  const getStatusBadgeClassName = (status?: string | null) => {
+    switch (status) {
+      case 'draft':
+        return 'border-slate-500/20 bg-slate-500/10 text-slate-700';
+      case 'pending_approval':
+        return 'border-amber-500/20 bg-amber-500/10 text-amber-700';
+      case 'approved':
+        return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-700';
+      case 'rejected':
+        return 'border-red-500/20 bg-red-500/10 text-red-700';
+      case 'contract_generated':
+        return 'border-sky-500/20 bg-sky-500/10 text-sky-700';
+      case 'expired':
+        return 'border-orange-500/20 bg-orange-500/10 text-orange-700';
+      default:
+        return 'border-border bg-muted/50 text-foreground';
+    }
+  };
+
+  const canEditProposal = (status?: ProposalStatus | null) =>
+    status !== 'approved' &&
+    status !== 'pending_approval' &&
+    status !== 'contract_generated';
+
+  const canSubmitProposal = (status?: ProposalStatus | null) =>
+    status !== 'approved' &&
+    status !== 'pending_approval' &&
+    status !== 'contract_generated';
+
+  const canGeneratePdf = (proposal?: ProposalRecord | null) => {
+    if (!proposal) return false;
+
+    const revision = getCurrentRevision(proposal);
+    const items = revision?.proposal_item ?? [];
+    return items.length > 0 || Number(proposal.total_amount_cents ?? 0) > 0;
+  };
+
+  const openCreateDialog = () => {
+    setEditingProposal(null);
+    setFormOpen(true);
+  };
+
+  const openEditDialog = (proposal: ProposalRecord) => {
+    setEditingProposal(proposal);
+    setSelectedProposalId(proposal.id);
+    setFormOpen(true);
+  };
+
+  const refreshAll = async (proposalId?: number | null) => {
+    await Promise.all([
+      refetchProposals(),
+      proposalId && proposalId === selectedProposalId
+        ? refetchProposalDetail()
+        : Promise.resolve(),
+      Promise.resolve(onLeadUpdated(lead)),
+    ]);
+  };
+
+  const handleSave = async (values: ProposalFormValues) => {
+    const amountInCents = Math.round(Number(values.totalAmount || 0) * 100);
+    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: values.validUntil
+        ? new Date(`${values.validUntil}T00:00:00`).toISOString()
+        : null,
+      subtotal_amount_cents: amountInCents,
+      total_amount_cents: amountInCents,
+      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',
+              },
+            ]
+          : [],
+    };
+
+    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);
+      }
+
+      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'
+  ) => {
+    try {
+      setActionKey(`${action}-${proposal.id}`);
+
+      await request({
+        url: `/proposal/${proposal.id}/${action}`,
+        method: 'POST',
+        data: {},
+      });
+
+      toast.success(
+        t(`proposals.toasts.${action}Success` as Parameters<typeof t>[0])
+      );
+      setSelectedProposalId(proposal.id);
+      await refreshAll(proposal.id);
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : t(`proposals.toasts.${action}Error` as Parameters<typeof t>[0]);
+
+      toast.error(message);
+    } finally {
+      setActionKey(null);
+    }
+  };
+
+  const handleGeneratePdf = async (proposal: ProposalRecord) => {
+    try {
+      setActionKey(`generate-pdf-${proposal.id}`);
+
+      const response = await request<GenerateProposalDocumentResponse>({
+        url: `/proposal/${proposal.id}/generate-pdf`,
+        method: 'POST',
+        data: {},
+      });
+
+      toast.success(t('proposals.toasts.generatePdfSuccess'));
+      setSelectedProposalId(proposal.id);
+      await refreshAll(proposal.id);
+
+      const fileId = Number(response.data?.fileId ?? 0) || null;
+      if (fileId) {
+        openStoredFile(fileId);
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : t('proposals.toasts.generatePdfError');
+
+      toast.error(message);
+    } finally {
+      setActionKey(null);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+
+    try {
+      setActionKey(`delete-${deleteTarget.id}`);
+
+      await request({
+        url: '/proposal',
+        method: 'DELETE',
+        data: {
+          ids: [deleteTarget.id],
+        },
+      });
+
+      toast.success(t('proposals.toasts.deleteSuccess'));
+      setDeleteTarget(null);
+      await Promise.all([
+        refetchProposals(),
+        Promise.resolve(onLeadUpdated(lead)),
+      ]);
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : t('proposals.toasts.deleteError');
+
+      toast.error(message);
+    } finally {
+      setActionKey(null);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden px-5 py-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+            {t('detail.tabs.proposals')}
+          </p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t('proposals.selectHint')}
+          </p>
+        </div>
+
+        <Button size="sm" className="gap-2" onClick={openCreateDialog}>
+          <Plus className="size-4" />
+          {t('proposals.new')}
+        </Button>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        <Badge variant="secondary">
+          {t('proposals.count', { count: proposals.length })}
+        </Badge>
+        {statusCounts.draft ? (
+          <Badge variant="outline" className={getStatusBadgeClassName('draft')}>
+            {getStatusLabel('draft')}: {statusCounts.draft}
+          </Badge>
+        ) : null}
+        {statusCounts.pending_approval ? (
+          <Badge
+            variant="outline"
+            className={getStatusBadgeClassName('pending_approval')}
+          >
+            {getStatusLabel('pending_approval')}:{' '}
+            {statusCounts.pending_approval}
+          </Badge>
+        ) : null}
+        {statusCounts.approved ? (
+          <Badge
+            variant="outline"
+            className={getStatusBadgeClassName('approved')}
+          >
+            {getStatusLabel('approved')}: {statusCounts.approved}
+          </Badge>
+        ) : null}
+      </div>
+
+      <div className="mt-4 flex-1 overflow-y-auto pr-1">
+        {isLoadingProposals ? (
+          <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
+            {t('proposals.loading')}
+          </div>
+        ) : proposals.length === 0 ? (
+          <Card className="border-dashed">
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t('proposals.emptyTitle')}
+              </CardTitle>
+              <CardDescription>
+                {t('proposals.emptyDescription')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button size="sm" className="gap-2" onClick={openCreateDialog}>
+                <Plus className="size-4" />
+                {t('proposals.emptyAction')}
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            <div className="space-y-2.5">
+              {proposals.map((proposal) => {
+                const currentRevision = getCurrentRevision(proposal);
+                const isSelected = proposal.id === selectedProposalId;
+
+                return (
+                  <div
+                    key={proposal.id}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setSelectedProposalId(proposal.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setSelectedProposalId(proposal.id);
+                      }
+                    }}
+                    className={cn(
+                      'cursor-pointer rounded-xl border border-border/60 bg-muted/10 p-3 transition-colors',
+                      isSelected && 'border-primary bg-primary/5'
+                    )}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 space-y-1">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <p className="text-sm font-semibold text-foreground">
+                            {proposal.title}
+                          </p>
+                          <Badge
+                            variant="outline"
+                            className={getStatusBadgeClassName(proposal.status)}
+                          >
+                            {getStatusLabel(proposal.status)}
+                          </Badge>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {proposal.code || `#${proposal.id}`}
+                        </p>
+                      </div>
+
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-8"
+                          >
+                            <MoreHorizontal className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          {canEditProposal(proposal.status) ? (
+                            <DropdownMenuItem
+                              onClick={() => openEditDialog(proposal)}
+                            >
+                              <Pencil className="mr-2 size-4" />
+                              {t('proposals.actions.edit')}
+                            </DropdownMenuItem>
+                          ) : null}
+
+                          {canSubmitProposal(proposal.status) ? (
+                            <DropdownMenuItem
+                              onClick={() =>
+                                handleStatusAction(proposal, 'submit')
+                              }
+                            >
+                              <Send className="mr-2 size-4" />
+                              {t('proposals.actions.submit')}
+                            </DropdownMenuItem>
+                          ) : null}
+
+                          {proposal.status === 'pending_approval' ? (
+                            <>
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  handleStatusAction(proposal, 'approve')
+                                }
+                              >
+                                <CheckCircle2 className="mr-2 size-4" />
+                                {t('proposals.actions.approve')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  handleStatusAction(proposal, 'reject')
+                                }
+                              >
+                                <XCircle className="mr-2 size-4" />
+                                {t('proposals.actions.reject')}
+                              </DropdownMenuItem>
+                            </>
+                          ) : null}
+
+                          <DropdownMenuItem
+                            disabled={
+                              !canGeneratePdf(proposal) ||
+                              actionKey === `generate-pdf-${proposal.id}`
+                            }
+                            onClick={() => handleGeneratePdf(proposal)}
+                          >
+                            {actionKey === `generate-pdf-${proposal.id}` ? (
+                              <Loader2 className="mr-2 size-4 animate-spin" />
+                            ) : (
+                              <FileText className="mr-2 size-4" />
+                            )}
+                            {t('proposals.actions.generatePdf')}
+                          </DropdownMenuItem>
+
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-red-600 focus:text-red-700"
+                            onClick={() => setDeleteTarget(proposal)}
+                          >
+                            <Trash2 className="mr-2 size-4" />
+                            {t('proposals.actions.delete')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+
+                    <div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                      <span>
+                        {t('proposals.info.revision', {
+                          number:
+                            currentRevision?.revision_number ||
+                            proposal.current_revision_number ||
+                            1,
+                        })}
+                      </span>
+                      <span>
+                        {formatCurrency(
+                          proposal.total_amount_cents,
+                          proposal.currency_code
+                        )}
+                      </span>
+                      <span>{formatDate(proposal.valid_until)}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <Separator />
+
+            <Card>
+              <CardHeader className="gap-3">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div className="space-y-1">
+                    <CardTitle className="text-base">
+                      {selectedProposal?.title || t('proposals.detailTitle')}
+                    </CardTitle>
+                    <CardDescription>
+                      {selectedProposal?.code || t('proposals.notSelected')}
+                    </CardDescription>
+                  </div>
+
+                  {selectedProposal ? (
+                    <div className="flex flex-wrap gap-2">
+                      {canEditProposal(selectedProposal.status) ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="gap-2"
+                          onClick={() => openEditDialog(selectedProposal)}
+                        >
+                          <Pencil className="size-4" />
+                          {t('proposals.actions.edit')}
+                        </Button>
+                      ) : null}
+
+                      {canSubmitProposal(selectedProposal.status) ? (
+                        <Button
+                          size="sm"
+                          className="gap-2"
+                          onClick={() =>
+                            handleStatusAction(selectedProposal, 'submit')
+                          }
+                          disabled={
+                            actionKey === `submit-${selectedProposal.id}`
+                          }
+                        >
+                          {actionKey === `submit-${selectedProposal.id}` ? (
+                            <Loader2 className="size-4 animate-spin" />
+                          ) : (
+                            <Send className="size-4" />
+                          )}
+                          {t('proposals.actions.submit')}
+                        </Button>
+                      ) : null}
+
+                      {selectedProposal.status === 'pending_approval' ? (
+                        <>
+                          <Button
+                            size="sm"
+                            className="gap-2"
+                            onClick={() =>
+                              handleStatusAction(selectedProposal, 'approve')
+                            }
+                            disabled={
+                              actionKey === `approve-${selectedProposal.id}`
+                            }
+                          >
+                            {actionKey === `approve-${selectedProposal.id}` ? (
+                              <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                              <CheckCircle2 className="size-4" />
+                            )}
+                            {t('proposals.actions.approve')}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="gap-2"
+                            onClick={() =>
+                              handleStatusAction(selectedProposal, 'reject')
+                            }
+                            disabled={
+                              actionKey === `reject-${selectedProposal.id}`
+                            }
+                          >
+                            {actionKey === `reject-${selectedProposal.id}` ? (
+                              <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                              <XCircle className="size-4" />
+                            )}
+                            {t('proposals.actions.reject')}
+                          </Button>
+                        </>
+                      ) : null}
+
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-2"
+                        onClick={() => handleGeneratePdf(selectedProposal)}
+                        disabled={
+                          !canGeneratePdf(selectedProposal) ||
+                          actionKey === `generate-pdf-${selectedProposal.id}`
+                        }
+                      >
+                        {actionKey === `generate-pdf-${selectedProposal.id}` ? (
+                          <Loader2 className="size-4 animate-spin" />
+                        ) : (
+                          <FileText className="size-4" />
+                        )}
+                        {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">
+                {!selectedProposal ? (
+                  <p className="text-sm text-muted-foreground">
+                    {t('proposals.notSelected')}
+                  </p>
+                ) : isLoadingDetail ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin" />
+                    {t('proposals.loading')}
+                  </div>
+                ) : (
+                  <>
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                      <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('card.dealValue')}
+                        </p>
+                        <p className="mt-2 text-sm font-semibold text-foreground">
+                          {formatCurrency(
+                            selectedProposal.total_amount_cents,
+                            selectedProposal.currency_code
+                          )}
+                        </p>
+                      </div>
+                      <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.fields.status')}
+                        </p>
+                        <div className="mt-2">
+                          <Badge
+                            variant="outline"
+                            className={getStatusBadgeClassName(
+                              selectedProposal.status
+                            )}
+                          >
+                            {getStatusLabel(selectedProposal.status)}
+                          </Badge>
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.fields.validUntil')}
+                        </p>
+                        <p className="mt-2 text-sm font-semibold text-foreground">
+                          {formatDate(selectedProposal.valid_until)}
+                        </p>
+                      </div>
+                      <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.fields.revision')}
+                        </p>
+                        <p className="mt-2 text-sm font-semibold text-foreground">
+                          {t('proposals.info.revision', {
+                            number:
+                              selectedRevision?.revision_number ||
+                              selectedProposal.current_revision_number ||
+                              1,
+                          })}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+                      <div className="rounded-lg border border-border/50 bg-background p-3 text-sm">
+                        <span className="text-xs text-muted-foreground">
+                          {t('proposals.fields.contractCategory')}
+                        </span>
+                        <p className="mt-1 font-medium text-foreground">
+                          {formatEnumLabel(selectedProposal.contract_category)}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border border-border/50 bg-background p-3 text-sm">
+                        <span className="text-xs text-muted-foreground">
+                          {t('proposals.fields.contractType')}
+                        </span>
+                        <p className="mt-1 font-medium text-foreground">
+                          {formatEnumLabel(selectedProposal.contract_type)}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border border-border/50 bg-background p-3 text-sm">
+                        <span className="text-xs text-muted-foreground">
+                          {t('proposals.fields.billingModel')}
+                        </span>
+                        <p className="mt-1 font-medium text-foreground">
+                          {formatEnumLabel(selectedProposal.billing_model)}
+                        </p>
+                      </div>
+                    </div>
+
+                    {selectedRevision?.summary ? (
+                      <div className="space-y-1">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.info.summary')}
+                        </p>
+                        <div className="rounded-xl border border-border/50 bg-muted/15 p-3 text-sm text-foreground">
+                          {selectedRevision.summary}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    {selectedProposal.notes ? (
+                      <div className="space-y-1">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.info.notes')}
+                        </p>
+                        <div className="rounded-xl border border-border/50 bg-muted/15 p-3 text-sm text-foreground">
+                          {selectedProposal.notes}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                        {t('proposals.info.lineItems')}
+                      </p>
+
+                      {selectedItems.length === 0 ? (
+                        <div className="rounded-xl border border-dashed p-3 text-sm text-muted-foreground">
+                          {t('proposals.info.noItems')}
+                        </div>
+                      ) : (
+                        <div className="space-y-2">
+                          {selectedItems.map((item, index) => (
+                            <div
+                              key={`${selectedProposal.id}-${item.name}-${index}`}
+                              className="rounded-xl border border-border/50 bg-muted/15 p-3"
+                            >
+                              <div className="flex items-start justify-between gap-3">
+                                <div>
+                                  <p className="text-sm font-medium text-foreground">
+                                    {item.name}
+                                  </p>
+                                  {item.description ? (
+                                    <p className="mt-1 text-xs text-muted-foreground">
+                                      {item.description}
+                                    </p>
+                                  ) : null}
+                                </div>
+                                <span className="text-sm font-semibold text-foreground">
+                                  {formatCurrency(
+                                    item.total_amount_cents,
+                                    selectedProposal.currency_code
+                                  )}
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                        {t('proposals.info.linkedRecords')}
+                      </p>
+
+                      {selectedProposal.integration_links?.length ? (
+                        <div className="flex flex-wrap gap-2">
+                          {selectedProposal.integration_links.map(
+                            (link, index) => (
+                              <Badge
+                                key={`${link.targetModule}-${link.targetEntityId}-${index}`}
+                                variant="secondary"
+                              >
+                                {`${formatEnumLabel(link.targetModule)} ${formatEnumLabel(link.targetEntityType)} #${link.targetEntityId}`}
+                              </Badge>
+                            )
+                          )}
+                        </div>
+                      ) : (
+                        <div className="rounded-xl border border-dashed p-3 text-sm text-muted-foreground">
+                          {t('proposals.info.noLinkedRecords')}
+                        </div>
+                      )}
+                    </div>
+
+                    {selectedProposal.proposal_approval?.[0]?.decision_note ? (
+                      <div className="space-y-1">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {t('proposals.info.approvalNote')}
+                        </p>
+                        <div className="rounded-xl border border-border/50 bg-muted/15 p-3 text-sm text-foreground">
+                          {selectedProposal.proposal_approval[0].decision_note}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                        {t('proposals.info.generatedDocument')}
+                      </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">
+                            <p className="text-sm font-medium text-foreground">
+                              {currentGeneratedPdf.file_name ||
+                                t('proposals.info.generatedDocument')}
+                            </p>
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              {t('proposals.info.documents', {
+                                count: selectedProposal.proposal_document?.length ?? 1,
+                              })}
+                            </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>
+                      ) : (
+                        <div className="rounded-xl border border-dashed p-3 text-sm text-muted-foreground">
+                          {t('proposals.info.noGeneratedDocument')}
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {editingProposal
+                ? t('proposals.form.editTitle')
+                : t('proposals.form.createTitle')}
+            </DialogTitle>
+            <DialogDescription>
+              {editingProposal
+                ? t('proposals.form.editDescription')
+                : t('proposals.form.createDescription')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSave)}
+              className="space-y-4"
+            >
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem className="sm: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>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="totalAmount"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('proposals.form.amount')}</FormLabel>
+                      <FormControl>
+                        <Input type="number" min="0" step="0.01" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <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}>
+                              {formatEnumLabel(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}>
+                              {formatEnumLabel(option)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="billingModel"
+                  render={({ field }) => (
+                    <FormItem className="sm: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}>
+                              {formatEnumLabel(option)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="summary"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormLabel>{t('proposals.form.summary')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          {...field}
+                          value={field.value ?? ''}
+                          rows={3}
+                          placeholder={t('proposals.form.summaryPlaceholder')}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="notes"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormLabel>{t('proposals.form.notes')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          {...field}
+                          value={field.value ?? ''}
+                          rows={4}
+                          placeholder={t('proposals.form.notesPlaceholder')}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <DialogFooter>
+                <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>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t('proposals.dialogDeleteTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('proposals.dialogDeleteDescription', {
+                title: deleteTarget?.title || '',
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={actionKey?.startsWith('delete-')}>
+              {t('proposals.actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDelete();
+              }}
+              disabled={actionKey?.startsWith('delete-')}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {actionKey?.startsWith('delete-') ? (
+                <Loader2 className="mr-2 size-4 animate-spin" />
+              ) : null}
+              {t('proposals.actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}