@hed-hog/contact 0.0.328 → 0.0.330

package/src/proposal/proposal.service.ts

@@ -3,33 +3,33 @@ import { getLocaleText } from '@hed-hog/api-locale';
 import { PaginationDTO } from '@hed-hog/api-pagination';
 import { PrismaService } from '@hed-hog/api-prisma';
 import {
-    FileService,
-    IntegrationDeveloperApiService,
-    SettingService,
+  FileService,
+  IntegrationDeveloperApiService,
+  SettingService,
 } from '@hed-hog/core';
 import {
-    BadRequestException,
-    Inject,
-    Injectable,
-    InternalServerErrorException,
-    Logger,
-    NotFoundException,
-    forwardRef,
+  BadRequestException,
+  Inject,
+  Injectable,
+  InternalServerErrorException,
+  Logger,
+  NotFoundException,
+  forwardRef,
 } from '@nestjs/common';
 import {
-    CreateProposalDto,
-    ProposalDecisionDto,
-    ProposalDocumentDto,
-    ProposalItemDto,
-    ProposalListQueryDto,
-    ProposalStatus,
-    SubmitProposalDto,
-    UpdateProposalDto,
+  CreateProposalDto,
+  ProposalDecisionDto,
+  ProposalDocumentDto,
+  ProposalItemDto,
+  ProposalListQueryDto,
+  ProposalStatus,
+  SubmitProposalDto,
+  UpdateProposalDto,
 } from './dto/proposal.dto';
 import {
-    PROPOSAL_EVENT_NAMES,
-    ProposalLifecycleEventName,
-    ProposalLifecycleEventPayload,
+  PROPOSAL_EVENT_NAMES,
+  ProposalLifecycleEventName,
+  ProposalLifecycleEventPayload,
 } from './proposal-event.types';
 
 @Injectable()
@@ -52,6 +52,7 @@ export class ProposalService {
         skip?: number;
         pageSize?: number;
       },
+    userId?: number,
   ) {
     const take = Math.max(1, Number(params.take || params.pageSize || 10));
     const skip = Math.max(0, Number(params.skip || 0));
@@ -107,6 +108,7 @@ export class ProposalService {
             select: {
               id: true,
               name: true,
+              avatar_id: true,
             },
           },
           proposal_revision: {
@@ -125,6 +127,13 @@ export class ProposalService {
               },
             },
           },
+          proposal_approval: {
+            where: { deleted_at: null },
+            select: {
+              approver_user_id: true,
+              status: true,
+            },
+          },
         },
         orderBy: {
           id: 'desc',
@@ -135,12 +144,37 @@ export class ProposalService {
       (this.prisma as any).proposal.count({ where }),
     ]);
 
+    const settings = await this.settingService.getSettingValues(
+      'crm-proposal-required-approvals',
+    );
+    const requiredApprovals = Number(
+      settings['crm-proposal-required-approvals'] ?? 1,
+    );
+
     const normalizedData = await this.attachPersonTradeNames(this.prisma, data);
+    const enrichedData = normalizedData.map((proposal: any) => {
+      const approvals: any[] = proposal.proposal_approval ?? [];
+      const approvalCount = approvals.filter(
+        (a) => a.status === 'approved',
+      ).length;
+      const currentUserHasApproved = userId
+        ? approvals.some(
+            (a) => a.approver_user_id === userId && a.status === 'approved',
+          )
+        : false;
+      return {
+        ...proposal,
+        required_approvals: requiredApprovals,
+        approval_count: approvalCount,
+        current_user_has_approved: currentUserHasApproved,
+      };
+    });
+
     const page = Math.floor(skip / take) + 1;
     const lastPage = Math.max(1, Math.ceil(total / take));
 
     return {
-      data: normalizedData,
+      data: enrichedData,
       total,
       page,
       pageSize: take,
@@ -189,7 +223,7 @@ export class ProposalService {
     };
   }
 
-  async getById(id: number, locale: string) {
+  async getById(id: number, locale: string, userId?: number) {
     const proposal = await this.loadProposalDetail(this.prisma, id);
 
     if (!proposal) {
@@ -204,9 +238,28 @@ export class ProposalService {
       entityId: String(id),
     });
 
+    const settings = await this.settingService.getSettingValues(
+      'crm-proposal-required-approvals',
+    );
+    const requiredApprovals = Number(
+      settings['crm-proposal-required-approvals'] ?? 1,
+    );
+    const approvals: any[] = proposal.proposal_approval ?? [];
+    const approvalCount = approvals.filter(
+      (a) => a.status === 'approved',
+    ).length;
+    const currentUserHasApproved = userId
+      ? approvals.some(
+          (a) => a.approver_user_id === userId && a.status === 'approved',
+        )
+      : false;
+
     return {
       ...proposal,
       integration_links: links,
+      required_approvals: requiredApprovals,
+      approval_count: approvalCount,
+      current_user_has_approved: currentUserHasApproved,
     };
   }
 
@@ -712,6 +765,15 @@ export class ProposalService {
 
     this.assertProposalWorkflowReadiness(current, 'approved');
 
+    const settings = await this.settingService.getSettingValues(
+      'crm-proposal-required-approvals',
+    );
+    const requiredApprovals = Number(
+      settings['crm-proposal-required-approvals'] ?? 1,
+    );
+
+    let fullyApproved = false;
+
     await this.prisma.$transaction(async (tx) => {
       const lockedProposal = await this.lockProposalForTransition(tx as any, id);
 
@@ -723,6 +785,7 @@ export class ProposalService {
         lockedProposal.status === ProposalStatus.APPROVED ||
         lockedProposal.status === ProposalStatus.CONTRACT_GENERATED
       ) {
+        fullyApproved = true;
         return;
       }
 
@@ -740,35 +803,58 @@ export class ProposalService {
         throw new NotFoundException('Current proposal revision not found.');
       }
 
-      const approval = await (tx as any).proposal_approval.findFirst({
+      if (userId) {
+        const alreadyApproved = await (tx as any).proposal_approval.findFirst({
+          where: {
+            proposal_revision_id: currentRevision.id,
+            approver_user_id: userId,
+            status: 'approved',
+            deleted_at: null,
+          },
+        });
+
+        if (alreadyApproved) {
+          throw new BadRequestException(
+            'You have already approved this proposal.',
+          );
+        }
+      }
+
+      const pendingApproval = await (tx as any).proposal_approval.findFirst({
         where: {
-          proposal_id: id,
           proposal_revision_id: currentRevision.id,
+          status: 'pending',
           deleted_at: null,
-          step_order: 1,
         },
       });
 
       const approvedAt = new Date();
 
-      if (approval) {
+      if (pendingApproval) {
         await (tx as any).proposal_approval.update({
-          where: { id: approval.id },
+          where: { id: pendingApproval.id },
           data: {
-            approver_user_id: userId || approval.approver_user_id || null,
+            approver_user_id: userId || null,
             status: 'approved',
             decided_at: approvedAt,
             decision_note: this.normalizeOptionalText(data.note),
           },
         });
       } else {
+        const existingCount = await (tx as any).proposal_approval.count({
+          where: {
+            proposal_revision_id: currentRevision.id,
+            deleted_at: null,
+          },
+        });
+
         await (tx as any).proposal_approval.create({
           data: {
             proposal_id: id,
             proposal_revision_id: currentRevision.id,
             requester_user_id: null,
             approver_user_id: userId || null,
-            step_order: 1,
+            step_order: existingCount + 1,
             status: 'approved',
             submitted_at: approvedAt,
             decided_at: approvedAt,
@@ -777,54 +863,68 @@ export class ProposalService {
         });
       }
 
-      await (tx as any).proposal_revision.update({
-        where: { id: currentRevision.id },
-        data: {
-          status: ProposalStatus.APPROVED,
-          approved_at: approvedAt,
+      const approvedCount = await (tx as any).proposal_approval.count({
+        where: {
+          proposal_revision_id: currentRevision.id,
+          status: 'approved',
+          deleted_at: null,
         },
       });
 
-      await (tx as any).proposal.update({
-        where: { id },
-        data: {
-          status: ProposalStatus.APPROVED,
-          approved_at: approvedAt,
-          approved_by_user_id: userId || null,
-          updated_by_user_id: userId || null,
-        },
-      });
+      if (approvedCount >= requiredApprovals) {
+        fullyApproved = true;
 
-      await this.publishProposalLifecycleEvent(
-        tx as any,
-        PROPOSAL_EVENT_NAMES.APPROVED,
-        id,
-        locale,
-        userId || null,
-        {
-          note: this.normalizeOptionalText(data.note),
-        },
-      );
+        await (tx as any).proposal_revision.update({
+          where: { id: currentRevision.id },
+          data: {
+            status: ProposalStatus.APPROVED,
+            approved_at: approvedAt,
+          },
+        });
 
-      await this.publishProposalLifecycleEvent(
-        tx as any,
-        PROPOSAL_EVENT_NAMES.CONVERT_REQUESTED,
-        id,
-        locale,
-        userId || null,
-        {
-          note: this.normalizeOptionalText(data.note),
-          metadata: {
-            trigger: 'approval',
+        await (tx as any).proposal.update({
+          where: { id },
+          data: {
+            status: ProposalStatus.APPROVED,
+            approved_at: approvedAt,
+            approved_by_user_id: userId || null,
+            updated_by_user_id: userId || null,
           },
-        },
-      );
+        });
+
+        await this.publishProposalLifecycleEvent(
+          tx as any,
+          PROPOSAL_EVENT_NAMES.APPROVED,
+          id,
+          locale,
+          userId || null,
+          {
+            note: this.normalizeOptionalText(data.note),
+          },
+        );
+
+        await this.publishProposalLifecycleEvent(
+          tx as any,
+          PROPOSAL_EVENT_NAMES.CONVERT_REQUESTED,
+          id,
+          locale,
+          userId || null,
+          {
+            note: this.normalizeOptionalText(data.note),
+            metadata: {
+              trigger: 'approval',
+            },
+          },
+        );
+      }
     });
 
-    await this.syncPersonDealValueFromApprovedProposals(
-      this.prisma,
-      current.person_id,
-    );
+    if (fullyApproved) {
+      await this.syncPersonDealValueFromApprovedProposals(
+        this.prisma,
+        current.person_id,
+      );
+    }
 
     return this.getById(id, locale);
   }
@@ -2010,12 +2110,12 @@ export class ProposalService {
     await (client as any).proposal_document.updateMany({
       where: {
         proposal_id: proposalId,
-        proposal_revision_id: proposalRevision.id,
         document_type: 'generated_pdf',
         deleted_at: null,
       },
       data: {
         is_current: false,
+        deleted_at: new Date(),
       },
     });
 
@@ -2048,6 +2148,12 @@ export class ProposalService {
   ) {
     const renderedHtml = html ?? (await this.buildProposalDocumentHtml(proposal, locale));
 
+    // Extract theme colors embedded in <meta> tags for use in PDF header/footer templates.
+    const accentColor =
+      renderedHtml.match(/name="pdf-accent-color" content="([^"]+)"/)?.[1] ?? '#ff760c';
+    const mutedFgColor =
+      renderedHtml.match(/name="pdf-muted-fg" content="([^"]+)"/)?.[1] ?? '#71717a';
+
     let browser: any = null;
 
     try {
@@ -2063,11 +2169,14 @@ export class ProposalService {
         await page.pdf({
           format: 'A4',
           printBackground: true,
+          displayHeaderFooter: true,
+          headerTemplate: `<style>*{margin:0;padding:0;box-sizing:border-box;}html,body{margin:0;padding:0;}</style><div style="position:absolute;top:0;left:0;right:0;width:100%;height:8px;background:${accentColor};-webkit-print-color-adjust:exact;print-color-adjust:exact;"></div>`,
+          footerTemplate: `<div style="width:100%;text-align:center;font-family:Arial,sans-serif;font-size:9px;color:${mutedFgColor};-webkit-print-color-adjust:exact;"><span class="pageNumber"></span> / <span class="totalPages"></span></div>`,
           margin: {
             top: '72px',
-            right: '18px',
+            right: '56px',
             bottom: '56px',
-            left: '18px',
+            left: '56px',
           },
         }),
       );
@@ -2098,7 +2207,9 @@ export class ProposalService {
 
   private async buildProposalDocumentHtml(proposal: any, locale = 'en') {
     const labels = this.getProposalDocumentLabels(locale);
-    const logoUrl = await this.resolveProposalDocumentLogoUrl();
+    const theme = await this.resolveProposalDocumentTheme();
+    const { primaryColor, mutedBg, mutedFg, secondaryFg } = theme;
+    const logoUrl = await this.resolveProposalDocumentLogoUrl(primaryColor);
     const companyName = await this.resolveProposalDocumentCompanyName();
     const currentRevision = this.getCurrentProposalRevision(proposal);
     const items = Array.isArray(currentRevision?.proposal_item)
@@ -2110,7 +2221,7 @@ export class ProposalService {
         ?.split(/\n{2,}/)
         .map((paragraph) => `<p>${this.escapeHtml(paragraph)}</p>`)
         .join('') ||
-      '<p>No additional commercial narrative was provided yet.</p>';
+      '<p>' + this.escapeHtml(labels.noSummary) + '</p>';
     const itemsHtml = items.length
       ? items
           .map(
@@ -2119,7 +2230,7 @@ export class ProposalService {
                 <td>${this.escapeHtml(item.name || 'Item')}</td>
                 <td>${this.escapeHtml(item.description || '—')}</td>
                 <td class="numeric">${this.escapeHtml(String(Number(item.quantity || 1)))}</td>
-                <td>${this.escapeHtml(this.humanizeEnumLabel(item.recurrence || 'one_time'))}</td>
+                <td>${this.escapeHtml(this.translateEnumLabel(item.recurrence || 'one_time', locale))}</td>
                 <td class="numeric">${this.escapeHtml(
                   this.formatMoney(Number(item.unit_amount_cents || 0) / 100, proposal.currency_code, locale),
                 )}</td>
@@ -2135,8 +2246,8 @@ export class ProposalService {
         </tr>`;
     const conditions = [
       `${labels.validity}: ${this.formatDateLabel(proposal.valid_until, locale, labels.openEnded)}`,
-      `${labels.billingModel}: ${this.humanizeEnumLabel(proposal.billing_model || 'fixed_price')}`,
-      `${labels.proposalType}: ${this.humanizeEnumLabel(proposal.contract_type || 'service_agreement')}`,
+      `${labels.billingModel}: ${this.translateEnumLabel(proposal.billing_model || 'fixed_price', locale)}`,
+      `${labels.proposalType}: ${this.translateEnumLabel(proposal.contract_type || 'service_agreement', locale)}`,
       `${labels.acceptanceReady}`,
     ]
       .filter(Boolean)
@@ -2149,109 +2260,296 @@ export class ProposalService {
           .join('')
       : `<p>${this.escapeHtml(labels.noNotes)}</p>`;
 
+    const clientName = proposal.person?.trade_name || proposal.person?.name || labels.notInformed;
+    const clientTradeName = proposal.person?.trade_name && proposal.person?.name && proposal.person.trade_name !== proposal.person.name
+      ? proposal.person.name
+      : null;
+    const clientEmail = proposal.person?.email || null;
+    const clientPhone = proposal.person?.phone || null;
+    const clientDocument = proposal.person?.document || null;
+    const clientAvatarDataUrl = await this.resolvePersonAvatarDataUrl(proposal.person?.avatar_id);
+
     return `<!DOCTYPE html>
 <html lang="${this.escapeHtml(locale || 'en')}">
   <head>
     <meta charset="utf-8" />
+    <meta name="pdf-accent-color" content="${primaryColor}" />
+    <meta name="pdf-muted-fg" content="${mutedFg}" />
     <style>
       @page {
         size: A4;
-        margin: 72px 18px 56px 18px;
+        margin: 72px 56px 56px 56px;
       }
+      * { box-sizing: border-box; }
       body {
-        color: #0f172a;
+        color: ${secondaryFg};
         font-family: Arial, sans-serif;
-        font-size: 12px;
-        line-height: 1.5;
+        font-size: 11.5px;
+        line-height: 1.55;
         margin: 0;
       }
+      /* accent-bar is rendered via Playwright headerTemplate (top of every page) */
+      /* ── Header ── */
       header {
-        align-items: center;
-        border-bottom: 2px solid #dbeafe;
         display: flex;
         justify-content: space-between;
-        gap: 16px;
+        align-items: flex-start;
+        gap: 24px;
         margin-bottom: 24px;
-        padding-bottom: 16px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #e4e4e7;
       }
-      .brand { display: flex; align-items: center; gap: 12px; }
-      .brand img { height: 42px; max-width: 140px; object-fit: contain; }
-      .eyebrow {
-        color: #2563eb;
-        font-size: 10px;
+      .brand { display: flex; align-items: center; gap: 14px; }
+      .brand img { height: 44px; max-width: 150px; object-fit: contain; }
+      .brand-text .eyebrow {
+        color: ${primaryColor};
+        font-size: 9px;
         font-weight: 700;
-        letter-spacing: 0.12em;
+        letter-spacing: 0.14em;
         text-transform: uppercase;
+        margin-bottom: 3px;
+      }
+      .brand-text h1 {
+        font-size: 20px;
+        font-weight: 700;
+        color: ${secondaryFg};
+        margin: 0 0 2px;
+        line-height: 1.2;
+      }
+      .brand-text .company-name {
+        font-size: 11px;
+        color: ${mutedFg};
+      }
+      .meta-block {
+        text-align: right;
+        font-size: 11px;
+        color: ${mutedFg};
+        line-height: 1.7;
+      }
+      .meta-block .meta-value {
+        font-weight: 600;
+        color: ${secondaryFg};
       }
-      h1 { font-size: 22px; margin: 4px 0 0; }
-      .meta-grid {
+      /* ── Party cards ── */
+      .parties {
         display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 12px;
-        margin: 18px 0 20px;
-      }
-      .meta-card, .totals-card {
-        background: #f8fafc;
-        border: 1px solid #dbeafe;
-        border-radius: 12px;
-        padding: 12px;
-      }
-      .meta-card strong, .totals-card strong {
-        display: block;
-        font-size: 10px;
-        letter-spacing: 0.08em;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        margin-bottom: 22px;
+      }
+      .party-card {
+        background: ${mutedBg};
+        border: 1px solid #e4e4e7;
+        border-top: 2px solid ${primaryColor};
+        border-radius: 10px;
+        padding: 14px 16px;
+      }
+      .party-card .party-label {
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: ${mutedFg};
+        margin-bottom: 8px;
+      }
+      .party-card .party-name-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
         margin-bottom: 4px;
+      }
+      .party-card .client-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 1px solid ${mutedBg};
+      }
+      .party-card .client-avatar-initials {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: ${mutedBg};
+        color: ${mutedFg};
+        font-size: 12px;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+      .party-card .party-name {
+        font-size: 13px;
+        font-weight: 700;
+        color: ${secondaryFg};
+      }
+      .party-card .party-sub {
+        font-size: 10.5px;
+        color: ${mutedFg};
+        line-height: 1.6;
+      }
+      /* ── Sections ── */
+      section { margin-top: 22px; }
+      h2 {
+        font-size: 12.5px;
+        font-weight: 700;
+        color: ${secondaryFg};
+        margin: 0 0 10px;
+        padding-bottom: 6px;
+        border-bottom: 1px solid #e4e4e7;
         text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .section-accent { border-color: #e4e4e7; }
+      .content-box {
+        border: 1px solid #e4e4e7;
+        border-radius: 10px;
+        padding: 14px 16px;
+        color: ${secondaryFg};
+        line-height: 1.6;
       }
-      section { margin-top: 18px; }
-      h2 { color: #1d4ed8; font-size: 14px; margin: 0 0 10px; }
+      .content-box p { margin: 0 0 8px; }
+      .content-box p:last-child { margin-bottom: 0; }
+      /* ── Items table ── */
       .items-table {
         border-collapse: collapse;
         width: 100%;
+        font-size: 11px;
       }
-      .items-table th, .items-table td {
-        border-bottom: 1px solid #e2e8f0;
-        padding: 8px 10px;
-        text-align: left;
-        vertical-align: top;
+      .items-table thead tr {
+        border-bottom: 1px solid #e4e4e7;
       }
       .items-table th {
-        background: #eff6ff;
-        font-size: 10px;
+        background: ${mutedBg};
+        color: ${mutedFg};
+        font-size: 9.5px;
+        font-weight: 700;
         letter-spacing: 0.08em;
         text-transform: uppercase;
+        padding: 8px 10px;
+        text-align: left;
+        vertical-align: middle;
       }
-      .numeric { text-align: right; }
-      .content, .notes, .acceptance {
-        border: 1px solid #e2e8f0;
-        border-radius: 14px;
-        padding: 16px 18px;
+      .items-table td {
+        border-bottom: 1px solid #e4e4e7;
+        padding: 8px 10px;
+        text-align: left;
+        vertical-align: top;
+        color: ${secondaryFg};
       }
-      .totals-grid {
+      .items-table tr:last-child td { border-bottom: none; }
+      .items-table tbody tr:nth-child(even) td { background: ${mutedBg}; }
+      .numeric { text-align: right !important; }
+      /* ── Totals / Conditions grid ── */
+      .bottom-grid {
         display: grid;
-        grid-template-columns: 1.5fr 1fr;
+        grid-template-columns: 1.6fr 1fr;
         gap: 16px;
         align-items: start;
+        margin-top: 22px;
+      }
+      .conditions-box {
+        border: 1px solid #e4e4e7;
+        border-radius: 10px;
+        padding: 14px 16px;
+      }
+      .conditions-box h3 {
+        font-size: 10.5px;
+        font-weight: 700;
+        color: ${mutedFg};
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        margin: 0 0 8px;
+      }
+      .conditions-box h3 + h3 { margin-top: 14px; }
+      ul { margin: 0; padding-left: 16px; color: ${mutedFg}; }
+      li { margin-bottom: 3px; }
+      .notes-text { color: ${mutedFg}; font-size: 11px; }
+      .notes-text p { margin: 0 0 6px; }
+      .totals-card {
+        background: ${mutedBg};
+        border: 1px solid #e4e4e7;
+        border-top: 3px solid ${primaryColor};
+        border-radius: 10px;
+        padding: 14px 16px;
+      }
+      .totals-card .totals-title {
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: ${mutedFg};
+        margin-bottom: 10px;
       }
       .totals-card .row {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 6px;
+        align-items: center;
+        padding: 4px 0;
+        font-size: 11px;
+        color: ${mutedFg};
       }
-      .totals-card .row.total {
-        border-top: 1px solid #cbd5e1;
-        font-size: 14px;
-        font-weight: 700;
-        margin-top: 10px;
+      .totals-card .row + .row { border-top: 1px solid #e4e4e7; }
+      .totals-card .row.total-row {
+        border-top: 2px solid #e4e4e7 !important;
+        margin-top: 6px;
         padding-top: 10px;
+        font-size: 13.5px;
+        font-weight: 700;
+        color: ${primaryColor};
+      }
+      /* ── Signature block ── */
+      .signature-section { margin-top: 28px; page-break-inside: avoid; }
+      .acceptance-note {
+        background: ${mutedBg};
+        border: 1px solid #e4e4e7;
+        border-left: 3px solid ${primaryColor};
+        border-radius: 6px;
+        padding: 10px 14px;
+        font-size: 11px;
+        color: ${mutedFg};
+        margin-bottom: 20px;
+      }
+      .sig-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+      }
+      .sig-box { padding: 0; }
+      .sig-box .sig-party-label {
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: ${mutedFg};
+        margin-bottom: 32px;
+      }
+      .sig-line {
+        border-top: 1px solid ${secondaryFg};
+        margin-bottom: 6px;
       }
-      ul { margin: 0; padding-left: 18px; }
-      footer {
-        border-top: 1px solid #dbeafe;
-        color: #475569;
+      .sig-field {
         font-size: 10px;
+        color: ${mutedFg};
+        margin-bottom: 4px;
+      }
+      .sig-field span {
+        display: inline-block;
+        min-width: 120px;
+        border-bottom: 1px solid #d4d4d8;
+        margin-left: 4px;
+      }
+      /* ── Page footer ── */
+      .doc-footer {
         margin-top: 28px;
-        padding-top: 12px;
+        padding-top: 10px;
+        border-top: 1px solid #e4e4e7;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 9px;
+        color: ${mutedFg};
       }
     </style>
   </head>
@@ -2259,45 +2557,47 @@ export class ProposalService {
     <header>
       <div class="brand">
         <img src="${logoUrl}" alt="${this.escapeHtml(companyName)}" />
-        <div>
+        <div class="brand-text">
           <div class="eyebrow">${this.escapeHtml(labels.documentTag)}</div>
           <h1>${this.escapeHtml(proposal.title || currentRevision?.title || labels.documentTitle)}</h1>
-          <div>${this.escapeHtml(companyName)}</div>
+          <div class="company-name">${this.escapeHtml(companyName)}</div>
         </div>
       </div>
-      <div>
-        <div><strong>${this.escapeHtml(labels.code)}:</strong> ${this.escapeHtml(proposal.code || `PROP-${proposal.id}`)}</div>
-        <div><strong>${this.escapeHtml(labels.version)}:</strong> ${this.escapeHtml(`R${Number(currentRevision?.revision_number || proposal.current_revision_number || 1) || 1}`)}</div>
-        <div><strong>${this.escapeHtml(labels.status)}:</strong> ${this.escapeHtml(this.humanizeEnumLabel(proposal.status || 'draft'))}</div>
+      <div class="meta-block">
+        <div>${this.escapeHtml(labels.code)}: <span class="meta-value">${this.escapeHtml(proposal.code || `PROP-${proposal.id}`)}</span></div>
+        <div>${this.escapeHtml(labels.version)}: <span class="meta-value">R${this.escapeHtml(String(Number(currentRevision?.revision_number || proposal.current_revision_number || 1) || 1))}</span></div>
+        <div>${this.escapeHtml(labels.status)}: <span class="meta-value">${this.escapeHtml(this.translateEnumLabel(proposal.status || 'draft', locale))}</span></div>
+        <div>${this.escapeHtml(labels.validity)}: <span class="meta-value">${this.escapeHtml(this.formatDateLabel(proposal.valid_until, locale, labels.openEnded))}</span></div>
       </div>
     </header>
 
-    <div class="meta-grid">
-      <div class="meta-card">
-        <strong>${this.escapeHtml(labels.client)}</strong>
-        ${this.escapeHtml(proposal.person?.trade_name || proposal.person?.name || labels.notInformed)}
+    <div class="parties">
+      <div class="party-card">
+        <div class="party-label">${this.escapeHtml(labels.issuedBy)}</div>
+        <div class="party-name">${this.escapeHtml(companyName)}</div>
       </div>
-      <div class="meta-card">
-        <strong>${this.escapeHtml(labels.validity)}</strong>
-        ${this.escapeHtml(this.formatDateLabel(proposal.valid_until, locale, labels.openEnded))}
-      </div>
-      <div class="meta-card">
-        <strong>${this.escapeHtml(labels.email)}</strong>
-        ${this.escapeHtml(proposal.person?.email || labels.notInformed)}
-      </div>
-      <div class="meta-card">
-        <strong>${this.escapeHtml(labels.document)}</strong>
-        ${this.escapeHtml(proposal.person?.document || labels.notInformed)}
+      <div class="party-card">
+        <div class="party-label">${this.escapeHtml(labels.proposedTo)}</div>
+        <div class="party-name-row">
+          ${clientAvatarDataUrl ? `<img class="client-avatar" src="${clientAvatarDataUrl}" alt="${this.escapeHtml(clientName)}" />` : `<div class="client-avatar-initials">${this.escapeHtml(this.getPersonInitials(clientName))}</div>`}
+          <span class="party-name">${this.escapeHtml(clientName)}</span>
+        </div>
+        <div class="party-sub">
+          ${clientTradeName ? `${this.escapeHtml(labels.tradeName)}: ${this.escapeHtml(clientTradeName)}<br>` : ''}
+          ${clientEmail ? `${this.escapeHtml(labels.email)}: ${this.escapeHtml(clientEmail)}<br>` : ''}
+          ${clientPhone ? `${this.escapeHtml(labels.phone)}: ${this.escapeHtml(clientPhone)}<br>` : ''}
+          ${clientDocument ? `${this.escapeHtml(labels.document)}: ${this.escapeHtml(clientDocument)}` : ''}
+        </div>
       </div>
     </div>
 
     <section>
-      <h2>${this.escapeHtml(labels.executiveSummary)}</h2>
-      <div class="content">${bodyHtml}</div>
+      <h2 class="section-accent">${this.escapeHtml(labels.executiveSummary)}</h2>
+      <div class="content-box">${bodyHtml}</div>
     </section>
 
     <section>
-      <h2>${this.escapeHtml(labels.items)}</h2>
+      <h2 class="section-accent">${this.escapeHtml(labels.items)}</h2>
       <table class="items-table">
         <thead>
           <tr>
@@ -2313,40 +2613,52 @@ export class ProposalService {
       </table>
     </section>
 
-    <section>
-      <div class="totals-grid">
-        <div class="notes">
-          <h2>${this.escapeHtml(labels.commercialConditions)}</h2>
-          <ul>${conditions}</ul>
-          <h2 style="margin-top: 16px;">${this.escapeHtml(labels.notes)}</h2>
-          ${notesHtml}
-        </div>
-        <div class="totals-card">
-          <strong>${this.escapeHtml(labels.totals)}</strong>
-          <div class="row"><span>${this.escapeHtml(labels.subtotal)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.subtotal_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
-          <div class="row"><span>${this.escapeHtml(labels.discount)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.discount_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
-          <div class="row"><span>${this.escapeHtml(labels.tax)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.tax_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
-          <div class="row total"><span>${this.escapeHtml(labels.total)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.total_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
-        </div>
+    <div class="bottom-grid">
+      <div class="conditions-box">
+        <h3>${this.escapeHtml(labels.commercialConditions)}</h3>
+        <ul>${conditions}</ul>
+        <h3>${this.escapeHtml(labels.notes)}</h3>
+        <div class="notes-text">${notesHtml}</div>
       </div>
-    </section>
+      <div class="totals-card">
+        <div class="totals-title">${this.escapeHtml(labels.totals)}</div>
+        <div class="row"><span>${this.escapeHtml(labels.subtotal)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.subtotal_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
+        <div class="row"><span>${this.escapeHtml(labels.discount)}</span><span>-${this.escapeHtml(this.formatMoney(Number(proposal.discount_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
+        <div class="row"><span>${this.escapeHtml(labels.tax)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.tax_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
+        <div class="row total-row"><span>${this.escapeHtml(labels.total)}</span><span>${this.escapeHtml(this.formatMoney(Number(proposal.total_amount_cents || 0) / 100, proposal.currency_code, locale))}</span></div>
+      </div>
+    </div>
 
-    <section>
-      <h2>${this.escapeHtml(labels.acceptanceSection)}</h2>
-      <div class="acceptance">
-        <p>${this.escapeHtml(labels.acceptanceMessage)}</p>
-        <p><strong>${this.escapeHtml(labels.acceptanceStatus)}:</strong> ${this.escapeHtml(labels.pending)}</p>
+    <div class="signature-section">
+      <h2 class="section-accent">${this.escapeHtml(labels.acceptanceSection)}</h2>
+      <div class="acceptance-note">${this.escapeHtml(labels.acceptanceMessage)}</div>
+      <div class="sig-grid">
+        <div class="sig-box">
+          <div class="sig-party-label">${this.escapeHtml(labels.signatureIssuer)}</div>
+          <div class="sig-line"></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureName)}: <span>&nbsp;</span></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureTitle)}: <span>&nbsp;</span></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureDate)}: <span>&nbsp;</span></div>
+        </div>
+        <div class="sig-box">
+          <div class="sig-party-label">${this.escapeHtml(labels.signatureClient)}</div>
+          <div class="sig-line"></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureName)}: <span>&nbsp;</span></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureTitle)}: <span>&nbsp;</span></div>
+          <div class="sig-field">${this.escapeHtml(labels.signatureDate)}: <span>&nbsp;</span></div>
+        </div>
       </div>
-    </section>
+    </div>
 
-    <footer>
-      ${this.escapeHtml(labels.generatedOn)} ${this.escapeHtml(this.formatDateLabel(new Date().toISOString(), locale, labels.notInformed))} · ${this.escapeHtml(companyName)}
-    </footer>
+    <div class="doc-footer">
+      <span>${this.escapeHtml(labels.confidential)}</span>
+      <span>${this.escapeHtml(labels.generatedOn)} ${this.escapeHtml(this.formatDateLabel(new Date().toISOString(), locale, labels.notInformed))} · ${this.escapeHtml(companyName)}</span>
+    </div>
   </body>
 </html>`;
   }
 
-  private async resolveProposalDocumentLogoUrl() {
+  private async resolveProposalDocumentLogoUrl(primaryColor: string) {
     const settings = await this.settingService.getSettingValues([
       'image-url',
       'icon-url',
@@ -2355,14 +2667,19 @@ export class ProposalService {
       this.normalizeOptionalText(settings['image-url']) ??
       this.normalizeOptionalText(settings['icon-url']);
 
-    if (configuredUrl && /^https?:\/\//i.test(configuredUrl)) {
-      return configuredUrl;
+    if (configuredUrl) {
+      const absoluteUrl = this.resolveLogoAbsoluteUrl(configuredUrl);
+      // Fetch and embed as base64 so Playwright can render it without network access
+      const dataUri = await this.fetchLogoAsDataUri(absoluteUrl);
+      if (dataUri) return dataUri;
+      // If fetch fails, return the resolved absolute URL as fallback
+      return absoluteUrl;
     }
 
     const inlineSvg = encodeURIComponent(
       `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72">
         <rect width="240" height="72" rx="18" fill="#0f172a"/>
-        <circle cx="38" cy="36" r="18" fill="#3b82f6"/>
+        <circle cx="38" cy="36" r="18" fill="${primaryColor}"/>
         <text x="72" y="43" fill="#ffffff" font-size="26" font-family="Arial, sans-serif" font-weight="700">HedHog</text>
       </svg>`,
     );
@@ -2370,11 +2687,73 @@ export class ProposalService {
     return `data:image/svg+xml;charset=UTF-8,${inlineSvg}`;
   }
 
+  private resolveLogoAbsoluteUrl(url: string): string {
+    if (!url) return '';
+    if (url.startsWith('data:') || /^https?:\/\//i.test(url)) return url;
+    // For relative paths, use the frontend URL (logo is typically served by the frontend)
+    const frontendUrls = process.env['FRONTEND_URLS'] ?? '';
+    const firstFrontend = frontendUrls.split(',')[0]?.trim() ?? '';
+    const port = process.env['PORT'] ?? '3100';
+    const baseUrl =
+      firstFrontend || process.env['API_URL'] || `http://localhost:${port}`;
+    return baseUrl.replace(/\/$/, '') + (url.startsWith('/') ? url : '/' + url);
+  }
+
+  private async fetchLogoAsDataUri(url: string): Promise<string | null> {
+    try {
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5000);
+      const response = await globalThis.fetch(url, { signal: controller.signal });
+      clearTimeout(timeout);
+      if (!response.ok) return null;
+      const contentType = response.headers.get('content-type') ?? 'image/svg+xml';
+      const buffer = await response.arrayBuffer();
+      return `data:${contentType};base64,${Buffer.from(buffer).toString('base64')}`;
+    } catch {
+      return null;
+    }
+  }
+
+  private async resolveProposalDocumentTheme() {
+    const settings = await this.settingService.getSettingValues([
+      'theme-primary-light',
+      'theme-muted-light',
+      'theme-muted-foreground-light',
+      'theme-secondary-light',
+      'theme-secondary-foreground-light',
+    ]);
+    return {
+      primaryColor: (settings['theme-primary-light'] as string) || '#ff760c',
+      mutedBg: (settings['theme-muted-light'] as string) || '#f4f4f5',
+      mutedFg: (settings['theme-muted-foreground-light'] as string) || '#71717a',
+      secondaryBg: (settings['theme-secondary-light'] as string) || '#f4f4f5',
+      secondaryFg: (settings['theme-secondary-foreground-light'] as string) || '#18181b',
+    };
+  }
+
   private async resolveProposalDocumentCompanyName() {
     const settings = await this.settingService.getSettingValues(['system-name']);
     return this.normalizeOptionalText(settings['system-name']) ?? 'HedHog';
   }
 
+  private async resolvePersonAvatarDataUrl(avatarId?: number | null): Promise<string | null> {
+    if (!avatarId) return null;
+    try {
+      const { file, buffer } = await this.fileService.getBuffer(avatarId);
+      const mimeType = file?.file_mimetype?.name ?? 'image/jpeg';
+      return `data:${mimeType};base64,${buffer.toString('base64')}`;
+    } catch {
+      return null;
+    }
+  }
+
+  private getPersonInitials(name: string): string {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) return '?';
+    if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();
+    return ((parts[0]?.[0] ?? '') + (parts[parts.length - 1]?.[0] ?? '')).toUpperCase();
+  }
+
   private buildProposalDocumentFileName(proposal: any, revision: any) {
     const base =
       this.normalizeOptionalText(proposal.code) ??
@@ -2430,7 +2809,11 @@ export class ProposalService {
           code: 'Código',
           version: 'Versão',
           status: 'Status',
+          issuedBy: 'Emitido por',
+          proposedTo: 'Preparado para',
           client: 'Cliente',
+          tradeName: 'Nome Comercial',
+          phone: 'Telefone',
           validity: 'Validade',
           email: 'E-mail',
           document: 'Documento',
@@ -2449,17 +2832,24 @@ export class ProposalService {
           commercialConditions: 'Condições Comerciais',
           notes: 'Observações',
           noNotes: 'Nenhuma observação adicional informada.',
+          noSummary: 'Nenhum resumo comercial foi informado para esta versão.',
           emptyItems: 'Nenhum item comercial foi registrado nesta versão.',
           notInformed: 'Não informado',
           openEnded: 'Em aberto',
           billingModel: 'Modelo de cobrança',
           proposalType: 'Tipo comercial',
           acceptanceReady: 'Documento preparado para aceite eletrônico simples em uma etapa futura.',
-          acceptanceSection: 'Aceite Eletrônico (preparação)',
-          acceptanceMessage: 'Esta versão já preserva o HTML da proposta e o PDF assinado visualmente, facilitando a inclusão de um aceite eletrônico simples no futuro.',
+          acceptanceSection: 'Termos de Aceite',
+          acceptanceMessage: 'Ao assinar este documento, ambas as partes concordam com todos os termos e condições descritos nesta proposta comercial.',
           acceptanceStatus: 'Status do aceite',
+          signatureIssuer: 'Assinatura Autorizada — Empresa',
+          signatureClient: 'Assinatura Autorizada — Cliente',
+          signatureName: 'Nome',
+          signatureTitle: 'Cargo',
+          signatureDate: 'Data',
           pending: 'Pendente',
           generatedOn: 'Gerado em',
+          confidential: 'Documento Confidencial',
         }
       : {
           documentTag: 'Commercial Proposal',
@@ -2467,7 +2857,11 @@ export class ProposalService {
           code: 'Code',
           version: 'Version',
           status: 'Status',
+          issuedBy: 'Issued by',
+          proposedTo: 'Prepared for',
           client: 'Client',
+          tradeName: 'Trade Name',
+          phone: 'Phone',
           validity: 'Validity',
           email: 'Email',
           document: 'Document',
@@ -2486,17 +2880,24 @@ export class ProposalService {
           commercialConditions: 'Commercial Conditions',
           notes: 'Notes',
           noNotes: 'No additional notes were provided.',
+          noSummary: 'No commercial narrative was provided for this version.',
           emptyItems: 'No commercial items were registered for this version.',
           notInformed: 'Not informed',
           openEnded: 'Open ended',
           billingModel: 'Billing model',
           proposalType: 'Commercial type',
           acceptanceReady: 'This document is ready for a future lightweight electronic acceptance step.',
-          acceptanceSection: 'Electronic Acceptance (prepared)',
-          acceptanceMessage: 'This version already preserves the rendered HTML and visual PDF, which will simplify adding a lightweight electronic acceptance flow later.',
+          acceptanceSection: 'Acceptance Terms',
+          acceptanceMessage: 'By signing this document, both parties agree to all terms and conditions described in this commercial proposal.',
           acceptanceStatus: 'Acceptance status',
+          signatureIssuer: 'Authorized Signature — Company',
+          signatureClient: 'Authorized Signature — Client',
+          signatureName: 'Name',
+          signatureTitle: 'Title',
+          signatureDate: 'Date',
           pending: 'Pending',
           generatedOn: 'Generated on',
+          confidential: 'Confidential Document',
         };
   }
 
@@ -2553,6 +2954,73 @@ export class ProposalService {
       .join(' ');
   }
 
+  private translateEnumLabel(value: string, locale: string) {
+    const isPt = String(locale || '').toLowerCase().startsWith('pt');
+    const key = String(value ?? '').toLowerCase();
+
+    if (isPt) {
+      const pt: Record<string, string> = {
+        // status
+        draft: 'Rascunho',
+        pending_approval: 'Aguardando Aprovação',
+        approved: 'Aprovado',
+        rejected: 'Rejeitado',
+        cancelled: 'Cancelado',
+        expired: 'Expirado',
+        contract_generated: 'Contrato Gerado',
+        // recurrence
+        one_time: 'Uma vez',
+        monthly: 'Mensal',
+        quarterly: 'Trimestral',
+        yearly: 'Anual',
+        // billing model
+        time_and_material: 'Tempo e Material',
+        monthly_retainer: 'Retainer Mensal',
+        fixed_price: 'Preço Fixo',
+        // contract type
+        clt: 'CLT',
+        pj: 'PJ',
+        freelancer_agreement: 'Contrato de Freelancer',
+        service_agreement: 'Contrato de Serviço',
+        fixed_term: 'Prazo Determinado',
+        recurring_service: 'Serviço Recorrente',
+        nda: 'NDA',
+        amendment: 'Emenda',
+        addendum: 'Adendo',
+        other: 'Outro',
+      };
+      return pt[key] ?? this.humanizeEnumLabel(value);
+    }
+
+    const en: Record<string, string> = {
+      draft: 'Draft',
+      pending_approval: 'Pending Approval',
+      approved: 'Approved',
+      rejected: 'Rejected',
+      cancelled: 'Cancelled',
+      expired: 'Expired',
+      contract_generated: 'Contract Generated',
+      one_time: 'One Time',
+      monthly: 'Monthly',
+      quarterly: 'Quarterly',
+      yearly: 'Yearly',
+      time_and_material: 'Time & Material',
+      monthly_retainer: 'Monthly Retainer',
+      fixed_price: 'Fixed Price',
+      clt: 'CLT',
+      pj: 'PJ',
+      freelancer_agreement: 'Freelancer Agreement',
+      service_agreement: 'Service Agreement',
+      fixed_term: 'Fixed Term',
+      recurring_service: 'Recurring Service',
+      nda: 'NDA',
+      amendment: 'Amendment',
+      addendum: 'Addendum',
+      other: 'Other',
+    };
+    return en[key] ?? this.humanizeEnumLabel(value);
+  }
+
   private escapeHtml(value: string) {
     return String(value ?? '')
       .replace(/&/g, '&amp;')
@@ -2764,6 +3232,7 @@ export class ProposalService {
             String(documents[0].value).trim().length > 0
               ? String(documents[0].value).trim()
               : null,
+          avatar_id: proposal.person.avatar_id ?? null,
         },
       };
     });
@@ -2782,6 +3251,7 @@ export class ProposalService {
           select: {
             id: true,
             name: true,
+            avatar_id: true,
           },
         },
         proposal_revision: {