Merge pull request #691 from bigcapitalhq/pdf-templates-layout

fix: Pdf templates layout
2026-02-18 05:40:31 +00:00 · 2024-10-05 21:26:37 +02:00
parent 90f08c5d51 59996e7a40
commit bca5b3481c
17 changed files with 413 additions and 269 deletions
--- a/packages/server/resources/views/modules/credit-note-regular.pug
+++ b/packages/server/resources/views/modules/credit-note-regular.pug
--- a/packages/server/resources/views/modules/credit-note-standard.pug
+++ b/packages/server/resources/views/modules/credit-note-standard.pug
@@ -10,21 +10,37 @@ block head
      position: relative;
      box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
    }
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
    .#{prefix}-big-title {
      font-size: 60px;
      margin: 0;
      line-height: 1;
-      margin-bottom: 25px;
      font-weight: 500;
      color: #333;
    }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
    }
    .#{prefix}-terms-list {
      display: flex;
@@ -132,22 +148,27 @@ block head

 block content
 div(class=`${prefix}-root`)
-  div(class=`${prefix}-big-title`) Credit Note
-
-  if showCompanyLogo && companyLogoUri
-    div(class=`${prefix}-logo-wrap`)
-      img(src=companyLogoUri alt=`Company Logo`)
  
-  div(class=`${prefix}-terms-list`)
-    if showCreditNoteNumber
-      div(class=`${prefix}-terms-item`)
-        div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}:
-        div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr}
+  //- Header (includes big title, details and logo)
+  div(class=`${prefix}-header`)
+    //- Header details (includes big title and details)
+    div(class=`${prefix}-header-details`)
+      div(class=`${prefix}-big-title`) Credit Note

-    if showCreditNoteDate
-      div(class=`${prefix}-terms-item`)
-        div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
-        div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
+      div(class=`${prefix}-terms-list`)
+        if showCreditNoteNumber
+          div(class=`${prefix}-terms-item`)
+            div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}:
+            div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr}
+
+        if showCreditNoteDate
+          div(class=`${prefix}-terms-item`)
+            div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
+            div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
+
+    if showCompanyLogo && companyLogoUri
+      div(class=`${prefix}-logo-wrap`)
+        img(src=companyLogoUri alt=`Company Logo`)

  div(class=`${prefix}-address-section`)
    if showCompanyAddress
--- a/packages/server/resources/views/modules/estimate-regular.pug
+++ b/packages/server/resources/views/modules/estimate-regular.pug
@@ -10,21 +10,37 @@ block head
      position: relative;
      box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
    }
+    .#{prefix}-header {
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
    .#{prefix}-big-title {
      font-size: 60px;
      margin: 0;
      line-height: 1;
-      margin-bottom: 25px;
      font-weight: 500;
      color: #333;
    }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
    }
    .#{prefix}-terms {
      display: flex;
@@ -131,26 +147,35 @@ block head

 block content 
  div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-    h1(class=`${prefix}-big-title`) Estimate

-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(alt="Company logo", src=companyLogoUri)
+    //- Header (invluces big title, details and logo)
+    div(class=`${prefix}-header`)

-    //- Terms List
-    div(class=`${prefix}-terms`)
-      if showEstimateNumber
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel}
-          div(class=`${prefix}-terms-item__value`) #{estimateNumebr}
-      if showEstimateDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{estimateDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{estimateDate}
-      if showExpirationDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{expirationDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{expirationDate}
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)            
+        h1(class=`${prefix}-big-title`) Estimate
+
+        //- Terms List
+        div(class=`${prefix}-terms`)
+          if showEstimateNumber
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel}
+              div(class=`${prefix}-terms-item__value`) #{estimateNumebr}
+
+          if showEstimateDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{estimateDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{estimateDate}
+
+          if showExpirationDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{expirationDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{expirationDate}
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(alt="Company logo", src=companyLogoUri)

    //- Addresses (Group section)
    div(class=`${prefix}-addresses`)
--- a/packages/server/resources/views/modules/invoice-standard.pug
+++ b/packages/server/resources/views/modules/invoice-standard.pug
@@ -10,21 +10,37 @@ block head
      position: relative;
      box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
    }
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
    .#{prefix}-big-title {
      font-size: 60px;
      margin: 0;
      line-height: 1;
-      margin-bottom: 25px;
      font-weight: 500;
      color: #333;
    }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
    }
    .#{prefix}-details {
      display: flex;
@@ -138,30 +154,35 @@ block head
 block content
  //- block head
  div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-  
-    //- Title and company logo
-    h1(class=`${prefix}-big-title`) Invoice

-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(alt="Company logo", src=companyLogoUri)
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        //- Title and company logo
+        h1(class=`${prefix}-big-title`) Invoice

-    //- Invoice details
-    div(class=`${prefix}-details`)
-      if showInvoiceNumber
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
-          div(class=`${prefix}-detail__value`) #{invoiceNumber}
+        //- Invoice details
+        div(class=`${prefix}-details`)
+          if showInvoiceNumber
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
+              div(class=`${prefix}-detail__value`) #{invoiceNumber}

-      if showDateIssue
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{dateIssueLabel}
-          div(class=`${prefix}-detail__value`) #{dateIssue}
+          if showDateIssue
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{dateIssueLabel}
+              div(class=`${prefix}-detail__value`) #{dateIssue}

-      if showDueDate
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{dueDateLabel}
-          div(class=`${prefix}-detail__value`) #{dueDate}
+          if showDueDate
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{dueDateLabel}
+              div(class=`${prefix}-detail__value`) #{dueDate}
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(alt="Company logo", src=companyLogoUri)

    //- Address section
    div(class=`${prefix}-address-root`)
--- a/packages/server/resources/views/modules/payment-receipt-regular.pug
+++ b/packages/server/resources/views/modules/payment-receipt-regular.pug
--- a/packages/server/resources/views/modules/payment-receive-standard.pug
+++ b/packages/server/resources/views/modules/payment-receive-standard.pug
@@ -10,22 +10,38 @@ block head
      font-size: 12px;
      position: relative;
      box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
+    }
+        .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
    }
    .#{prefix}-big-title{ 
      font-size: 60px;
      margin: 0;
      line-height: 1;
-      margin-bottom: 25px;
      font-weight: 500;
      color: #333;
    }
-    .#{prefix}-logo-wrap{ 
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
    }
    .#{prefix}-terms-list{ 
      display: flex;
@@ -120,23 +136,26 @@ block head
    }
 block content
  div(class=`${prefix}-root`)
-    div(class=`${prefix}-big-title`) Payment
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        div(class=`${prefix}-big-title`) Payment
+        div(class=`${prefix}-terms-list`)
+          if showPaymentReceivedNumber
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
+              div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}

-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(src=companyLogoUri alt="Company Logo")
-    
-    div(class=`${prefix}-terms-list`)
-      if showPaymentReceivedNumber
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
-          div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}
+          if showPaymentReceivedDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}

-      if showPaymentReceivedDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
-    
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(src=companyLogoUri alt="Company Logo")
+        
    div(class=`${prefix}-addresses`)
      if showCompanyAddress
        div(class=`${prefix}-address-from`)
--- a/packages/server/resources/views/modules/purchase-invoice-regular.pug
+++ b/packages/server/resources/views/modules/purchase-invoice-regular.pug
--- a/packages/server/resources/views/modules/receipt-regular.pug
+++ b/packages/server/resources/views/modules/receipt-regular.pug
@@ -10,19 +10,33 @@ block head
      position: relative;
      box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
    }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      align-items: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
    }
    .#{prefix}-big-title {
      font-size: 60px;
      margin: 0;
      line-height: 1;
-      margin-bottom: 25px;
      font-weight: 500;
      color: #333;      
    }
@@ -124,25 +138,30 @@ block head
 block content 
  //- block head
  div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-  
-    //- Title and company logo
-    h1(class=`${prefix}-big-title`) Receipt

-    //- Company Logo
-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(src=companyLogoUri alt=`Company Logo`)
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        //- Title and company logo
+        h1(class=`${prefix}-big-title`) Receipt

-    //- Terms List
-    div(class=`${prefix}-terms-list`)
-      if showReceiptNumber
-        div(class=`${prefix}-terms-item`)
-          span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
-          span(class=`${prefix}-terms-item__value`)= receiptNumber
-      if showReceiptDate
-        div(class=`${prefix}-terms-item`)
-          span(class=`${prefix}-terms-item__label`)= receiptDateLabel
-          span(class=`${prefix}-terms-item__value`)= receiptDate
+        //- Terms List
+        div(class=`${prefix}-terms-list`)
+          if showReceiptNumber
+            div(class=`${prefix}-terms-item`)
+              span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
+              span(class=`${prefix}-terms-item__value`)= receiptNumber
+
+          if showReceiptDate
+            div(class=`${prefix}-terms-item`)
+              span(class=`${prefix}-terms-item__label`)= receiptDateLabel
+              span(class=`${prefix}-terms-item__value`)= receiptDate
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(src=companyLogoUri alt=`Company Logo`)

    //- Address Section
    div(class=`${prefix}-address-section`)
--- a/packages/webapp/src/components/Layout/Group/Group.tsx
+++ b/packages/webapp/src/components/Layout/Group/Group.tsx
@@ -27,11 +27,14 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {

  /** Defines align-items css property */
  align?: React.CSSProperties['alignItems'];
+
+  flex?: React.CSSProperties['flex'];
 }

 const defaultProps: Partial<GroupProps> = {
  position: 'left',
  spacing: 20,
+  flex: 'none'
 };

 export function Group({ children, ...props }: GroupProps) {
@@ -48,6 +51,7 @@ const GroupStyled = styled(Box)`
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
+  flex: ${(props: GroupProps) => (props.flex)};
  align-items: ${(props: GroupProps) => (props.align || 'center')};
  flex-wrap: ${(props: GroupProps) => (props.noWrap ? 'nowrap' : 'wrap')};
  justify-content: ${(props: GroupProps) =>
--- a/packages/webapp/src/components/Layout/Stack/Stack.tsx
+++ b/packages/webapp/src/components/Layout/Stack/Stack.tsx
@@ -11,12 +11,15 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {

  /** justify-content CSS property */
  justify?: React.CSSProperties['justifyContent'];
+
+  flex?: React.CSSProperties['flex'];
 }

 const defaultProps: Partial<StackProps> = {
  spacing: 20,
  align: 'stretch',
  justify: 'top',
+  flex: 'none',
 };

 export function Stack(props: StackProps) {
@@ -33,4 +36,5 @@ const StackStyled = styled(Box)`
  align-items: ${(props: StackProps) => props.align};
  justify-content: justify;
  gap: ${(props: StackProps) => props.spacing}px;
+  flex: ${(props: StackProps) => props.flex};
 `;
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -13,6 +13,13 @@ import {
 } from '@/constants/PdfTemplates';

 export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
  // Address
  showCustomerAddress?: boolean;
  customerAddress?: string;
@@ -122,26 +129,30 @@ export function CreditNotePaperTemplate({
  creditNoteDateLabel = 'Credit Note Date',
 }: CreditNotePaperTemplateProps) {
  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Credit Note'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showCreditNoteNumber && (
-            <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
-              {creditNoteNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Credit Note'} />
+
+            <PaperTemplate.TermsList>
+              {showCreditNoteNumber && (
+                <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
+                  {creditNoteNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showCreditNoteDate && (
+                <PaperTemplate.TermsItem label={creditNoteDateLabel}>
+                  {creditNoteDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
          )}
-          {showCreditNoteDate && (
-            <PaperTemplate.TermsItem label={creditNoteDateLabel}>
-              {creditNoteDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>

        <PaperTemplate.AddressesGroup>
          {showCompanyAddress && (
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -13,6 +13,10 @@ import {
 } from '@/constants/PdfTemplates';

 export interface EstimatePaperTemplateProps extends PaperTemplateProps {
+  // # Company
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
  // # Estimate number
  estimateNumebr?: string;
  estimateNumberLabel?: string;
@@ -132,31 +136,35 @@ export function EstimatePaperTemplate({
  expirationDate = 'September 3, 2024',
 }: EstimatePaperTemplateProps) {
  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Estimate'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showEstimateNumber && (
-            <PaperTemplate.TermsItem label={estimateNumberLabel}>
-              {estimateNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Estimate'} />
+
+            <PaperTemplate.TermsList>
+              {showEstimateNumber && (
+                <PaperTemplate.TermsItem label={estimateNumberLabel}>
+                  {estimateNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showEstimateDate && (
+                <PaperTemplate.TermsItem label={estimateDateLabel}>
+                  {estimateDate}
+                </PaperTemplate.TermsItem>
+              )}
+              {showExpirationDate && (
+                <PaperTemplate.TermsItem label={expirationDateLabel}>
+                  {expirationDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
          )}
-          {showEstimateDate && (
-            <PaperTemplate.TermsItem label={estimateDateLabel}>
-              {estimateDate}
-            </PaperTemplate.TermsItem>
-          )}
-          {showExpirationDate && (
-            <PaperTemplate.TermsItem label={expirationDateLabel}>
-              {expirationDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>

        <PaperTemplate.AddressesGroup>
          {showCompanyAddress && (
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
@@ -11,16 +11,13 @@
  width: 794px;
  height: 1123px;
 }
-
 .bigTitle{
  font-size: 60px;
  margin: 0;
  line-height: 1;
-  margin-bottom: 25px;
  font-weight: 500;
  color: #333;
 }
-
 .details {
  display: flex;
  flex-direction: column;
@@ -35,13 +32,11 @@
  min-width: 120px;
  color: #333;
 }
-
 .addressRoot{
  > div{
    flex: 1;
  }
 }
-
 .table {
  width: 100%;
  border-collapse: collapse;
@@ -66,10 +61,6 @@
  }

  tbody{
-
-    tr {
-
-    }
    td{
      border-bottom: 1px solid #F6F6F6;
      padding: 12px 10px;
@@ -80,7 +71,6 @@
      &:last-of-type{
        padding-right: 0;
      }
-
      &.rate,
      &.total{
        text-align: right;
@@ -88,7 +78,6 @@
    }
  }
 }
-
 .totals{
  display: flex;
  flex-direction: column;
@@ -112,25 +101,22 @@
 .totalBottomGrayBordered {
  border-bottom: 1px solid #DADADA;
 }
-
 .logoWrap{
-  height: 120px;
-  width: 120px;
-  position: absolute;
-  right: 26px;
-  top: 26px;
-  border-radius: 5px;
  overflow: hidden;

  img{
    max-width: 100%;
  }
 }
-
+.logoImg {
+  height: auto;
+  width: auto;
+  max-width: 400px;
+  max-height: 160px;
+}
 .footer{

 }
-
 .paragraph{
  margin-bottom: 20px;  
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
  DefaultPdfTemplateTerms,
  DefaultPdfTemplateItemDescription,
@@ -178,31 +178,35 @@ export function InvoicePaperTemplate({
  statement = DefaultPdfTemplateStatement,
 }: InvoicePaperTemplateProps) {
  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Invoice'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showInvoiceNumber && (
-            <PaperTemplate.TermsItem label={invoiceNumberLabel}>
-              {invoiceNumber}
-            </PaperTemplate.TermsItem>
+        <Group align="start" spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Invoice'} />
+
+            <PaperTemplate.TermsList>
+              {showInvoiceNumber && (
+                <PaperTemplate.TermsItem label={invoiceNumberLabel}>
+                  {invoiceNumber}
+                </PaperTemplate.TermsItem>
+              )}
+              {showDateIssue && (
+                <PaperTemplate.TermsItem label={dateIssueLabel}>
+                  {dateIssue}
+                </PaperTemplate.TermsItem>
+              )}
+              {showDueDate && (
+                <PaperTemplate.TermsItem label={dueDateLabel}>
+                  {dueDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
          )}
-          {showDateIssue && (
-            <PaperTemplate.TermsItem label={dateIssueLabel}>
-              {dateIssue}
-            </PaperTemplate.TermsItem>
-          )}
-          {showDueDate && (
-            <PaperTemplate.TermsItem label={dueDateLabel}>
-              {dueDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>

        <PaperTemplate.AddressesGroup>
          {showCompanyAddress && (
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
@@ -7,38 +7,18 @@ import styles from './InvoicePaperTemplate.module.scss';
 export interface PaperTemplateProps {
  primaryColor?: string;
  secondaryColor?: string;
-
-  showCompanyLogo?: boolean;
-  companyLogoUri?: string;
-  companyName?: string;
-
-  bigtitle?: string;
-
  children?: React.ReactNode;
 }

 export function PaperTemplate({
  primaryColor,
  secondaryColor,
-  showCompanyLogo,
-  companyLogoUri,
-  bigtitle = 'Invoice',
  children,
 }: PaperTemplateProps) {
  return (
    <div className={styles.root}>
      <style>{`:root { --invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor}; }`}</style>

-      <div>
-        <h1 className={styles.bigTitle}>{bigtitle}</h1>
-
-        {showCompanyLogo && companyLogoUri && (
-          <div className={styles.logoWrap}>
-            <img alt="" src={companyLogoUri} />
-          </div>
-        )}
-      </div>
-
      {children}
    </div>
  );
@@ -53,6 +33,26 @@ interface PaperTemplateTableProps {
  data: Array<Record<string, any>>;
 }

+interface PaperTemplateBigTitleProps {
+  title: string;
+}
+
+PaperTemplate.BigTitle = ({ title }: PaperTemplateBigTitleProps) => {
+  return <h1 className={styles.bigTitle}>{title}</h1>;
+};
+
+interface PaperTemplateLogoProps {
+  logoUri: string;
+}
+
+PaperTemplate.Logo = ({ logoUri }: PaperTemplateLogoProps) => {
+  return (
+    <div className={styles.logoWrap}>
+      <img className={styles.logoImg} alt="" src={logoUri} />
+    </div>
+  );
+};
+
 PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
  return (
    <table className={styles.table}>
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -10,6 +10,13 @@ import {
 } from '@/constants/PdfTemplates';

 export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
  // Customer address
  showCustomerAddress?: boolean;
  customerAddress?: string;
@@ -93,27 +100,31 @@ export function PaymentReceivedPaperTemplate({
  paymentReceivedDateLabel = 'Payment Date',
 }: PaymentReceivedPaperTemplateProps) {
  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Payment'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showPaymentReceivedNumber && (
-            <PaperTemplate.TermsItem label={paymentReceivedNumberLabel}>
-              {paymentReceivedNumebr}
-            </PaperTemplate.TermsItem>
-          )}
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Payment'} />

-          {showPaymentReceivedDate && (
-            <PaperTemplate.TermsItem label={paymentReceivedDateLabel}>
-              {paymentReceivedDate}
-            </PaperTemplate.TermsItem>
+            <PaperTemplate.TermsList>
+              {showPaymentReceivedNumber && (
+                <PaperTemplate.TermsItem label={paymentReceivedNumberLabel}>
+                  {paymentReceivedNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+
+              {showPaymentReceivedDate && (
+                <PaperTemplate.TermsItem label={paymentReceivedDateLabel}>
+                  {paymentReceivedDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
          )}
-        </PaperTemplate.TermsList>
+        </Group>

        <PaperTemplate.AddressesGroup>
          {showCompanyAddress && (
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -13,6 +13,13 @@ import {
 } from '@/constants/PdfTemplates';

 export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
  // Addresses
  showCustomerAddress?: boolean;
  customerAddress?: string;
@@ -117,26 +124,30 @@ export function ReceiptPaperTemplate({
  receiptDateLabel = 'Receipt Date',
 }: ReceiptPaperTemplateProps) {
  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Receipt'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showReceiptNumber && (
-            <PaperTemplate.TermsItem label={receiptNumberLabel}>
-              {receiptNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Receipt'} />
+
+            <PaperTemplate.TermsList>
+              {showReceiptNumber && (
+                <PaperTemplate.TermsItem label={receiptNumberLabel}>
+                  {receiptNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showReceiptDate && (
+                <PaperTemplate.TermsItem label={receiptDateLabel}>
+                  {receiptDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
          )}
-          {showReceiptDate && (
-            <PaperTemplate.TermsItem label={receiptDateLabel}>
-              {receiptDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>

        <PaperTemplate.AddressesGroup>
          {showCompanyAddress && (