fix: pdf templates

packages/server/resources/scss/base.css

@@ -29,14 +29,12 @@ body{
   line-height: 1.5;
   color: #000;
   background-color: #fff;
-  direction: ltr;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
+}
 
+body, h1, h2, h3, h4, h5, h6{
   font-family: "Noto Sans", sans-serif;
   font-optical-sizing: auto;
-  /* font-weight: <weight>; */
   font-style: normal;
-  /* font-variation-settings:
-    "wdth" 100; */
 }

packages/server/resources/views/modules/credit-note-standard.pug

@@ -44,8 +44,7 @@ block head
     .#{prefix}-terms-item__value {
       /* Styles for the term value */
     }
-
-    .#{prefix}-group {
+    .#{prefix}-address-section{
       box-sizing: border-box;
       display: flex;
       flex-flow: wrap;
@@ -56,12 +55,9 @@ block head
       gap: 10px;
       margin-bottom: 24px;
     }
-
-
-    .#{prefix}-address {
-      /* Styles for each address block */
+    .#{prefix}-address-section > * {
+      flex: 1 1;
     }
-
     .#{prefix}-table {
       width: 100%;
       border-collapse: collapse;
@@ -124,15 +120,12 @@ block head
       flex: 1 1 auto;
       text-align: right;
     }
-
     .#{prefix}-statement {
-      /* Styles for customer note/terms statement section */
+      margin-bottom: 20px;
     }
-
     .#{prefix}-statement__label {
-      /* Styles for statement label */
+      color: #666;
     }
-
     .#{prefix}-statement__value {
       /* Styles for statement value */
     }
@@ -156,7 +149,7 @@ block content
         div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
         div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
 
-  div(class=`${prefix}-group`)
+  div(class=`${prefix}-address-section`)
     if showBilledFromAddress
       div(class=`${prefix}-address`)
         strong #{companyName}
@@ -169,30 +162,30 @@ block content
           div #{address}
 
   table(class=`${prefix}-table`)
-    thead(class=`${prefix}-table__header`)
+    thead
       tr
-        th #{'Item'}
-        th #{'Description'}
-        th #{'Rate'}
-        th #{'Total'}
+        th(class=`${prefix}-table__header`) #{'Item'}
+        th(class=`${prefix}-table__header`) #{'Description'}
+        th(class=`${prefix}-table__header`) #{'Rate'}
+        th(class=`${prefix}-table__header`) #{'Total'}
     tbody
       each line in lines
         tr(class=`${prefix}-table__row`)
-          td #{line.item}
-          td #{line.description}
-          td(class=`${prefix}-table__column--right`) #{line.rate}
-          td(class=`${prefix}-table__column--right`) #{line.total}
+          td(class=`${prefix}-table__cell`) #{line.item}
+          td(class=`${prefix}-table__cell`) #{line.description}
+          td(class=`${prefix}-table__cell--right`) #{line.rate}
+          td(class=`${prefix}-table__cell--right`) #{line.total}
 
   div(class=`${prefix}-totals`)
     if showSubtotal
       div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
-        div #{subtotalLabel}:
-        div #{subtotal}
+        div(class=`${prefix}-totals__item-label`) #{subtotallabel}
+        div(class=`${prefix}-totals__item-amount`) #{subtotal}
 
     if showTotal
       div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark`)
-        div #{totalLabel}:
-        div #{total}
+        div(class=`${prefix}-totals__item-amount`) #{totalLabel}:
+        div(class=`${prefix}-totals__item-label`) #{total}
 
   if showCustomerNote
     div(class=`${prefix}-statement`)

packages/server/resources/views/modules/estimate-regular.pug

@@ -26,7 +26,7 @@ block head
       top: 26px;
       overflow: hidden;
     }
-    .#{prefix}-terms-list {
+    .#{prefix}-terms {
       display: flex;
       flex-direction: column;
       gap: 4px;
@@ -43,7 +43,7 @@ block head
     }
     .#{prefix}-terms-item__value {
     }
-    .#{prefix}-address-section{
+    .#{prefix}-addresses{
       box-sizing: border-box;
       display: flex;
       flex-flow: wrap;
@@ -54,6 +54,9 @@ block head
       gap: 10px;
       margin-bottom: 24px;
     }
+    .#{prefix}-addresses > * {
+      flex: 1 1;
+    }
     .#{prefix}-address {
     }
     .#{prefix}-address__item {
@@ -120,8 +123,10 @@ block head
       text-align: right;
     }
     .#{prefix}-statement {
+      margin-bottom: 20px;
     }
     .#{prefix}-statement__label {
+      color: #666;
     }
     .#{prefix}-statement__value {
     }
@@ -150,7 +155,7 @@ block content
           div(class=`${prefix}-terms-item__value`) #{expirationDate}
 
     //- Addresses (Group section)
-    div(class=`${prefix}-address-section`)
+    div(class=`${prefix}-addresses`)
       if showBilledFromAddress
         div(class=`${prefix}-address`)
           strong #{companyName}
@@ -182,21 +187,21 @@ block content
     //- Totals section
     div(class=`${prefix}-totals`)
       if showSubtotal
-        div(class=`${prefix}-totals__item`)
+        div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
           div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
           div(class=`${prefix}-totals__item-amount`) #{subtotal}
       if showTotal
-        div(class=`${prefix}-totals__item`)
+        div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark  ${prefix}-totals__item--font-weight-bold`)
           div(class=`${prefix}-totals__item-label`) #{totalLabel}
           div(class=`${prefix}-totals__item-amount`) #{total}
 
     //- Statements section
-    if showCustomerNote
+    if showCustomerNote && customerNote
       div(class=`${prefix}-statement`)
         div(class=`${prefix}-statement__label`) #{customerNoteLabel}
         div(class=`${prefix}-statement__value`) #{customerNote}
 
-    if showTermsConditions
+    if showTermsConditions && termsConditions
       div(class=`${prefix}-statement`)
         div(class=`${prefix}-statement__label`) #{termsConditionsLabel}
         div(class=`${prefix}-statement__value`) #{termsConditions}

packages/server/resources/views/modules/invoice-standard.pug

@@ -229,13 +229,13 @@ block content
           div(class=`${prefix}-totals__item-amount`) #{balanceDue}
 
     //- Footer section
-    if showTermsConditions
+    if showTermsConditions && termsConditions
       div(class=`${prefix}-paragraph`)
         if termsConditionsLabel
           div(class=`${prefix}-paragraph__label`) #{termsConditionsLabel}
         div(class=`${prefix}-paragraph__value`) #{termsConditions}
 
-    if showStatement
+    if showStatement && statement
       div(class=`${prefix}-paragraph`)
         if statementLabel
           div(class=`${prefix}-paragraph__label`) #{statementLabel}

packages/server/resources/views/modules/payment-receive-standard.pug

@@ -41,9 +41,6 @@ block head
     .#{prefix}-terms-item__label{ 
       min-width: 120px;
       color: #333;
-    }
-    .#{prefix}-group{ 
-
     }
     .#{prefix}-addresses{ 
       box-sizing: border-box;
@@ -95,12 +92,6 @@ block head
     }
     .#{prefix}-table__cell--right {
       text-align: right;
-    }
-    .#{prefix}-table__column{ 
-
-    }
-    .#{prefix}-table__column--right{ 
-
     }
     .#{prefix}-totals {
       display: flex;
@@ -177,11 +168,11 @@ block content
 
     div(class=`${prefix}-totals`)
       if showSubtotal
-        div(class=`${prefix}-totals__item`)
+        div(class=`${prefix}-totals__item ${prefix}-totals__item--gray-border`)
           div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
           div(class=`${prefix}-totals__item-amount`) #{subtotal}
 
       if showTotal
-        div(class=`${prefix}-totals__item`)
+        div(class=`${prefix}-totals__item ${prefix}-totals__item--dark-border`)
           div(class=`${prefix}-totals__item-label`) #{totalLabel}
           div(class=`${prefix}-totals__item-amount`) #{total}

packages/server/resources/views/modules/receipt-regular.pug

@@ -4,21 +4,13 @@ block head
   - var prefix = 'bc'
   style.
     .#{prefix}-root {
-      color: #111;
+      color: #000;
       padding: 24px 30px;
       font-size: 12px;
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
     }
     .#{prefix}-logo-wrap {
-      font-size: 60px;
-      margin: 0;
-      line-height: 1;
-      margin-bottom: 25px;
-      font-weight: 500;
-      color: #333;
-    }
-    .#{prefix}-big-title {
       height: 120px;
       width: 120px;
       position: absolute;
@@ -26,6 +18,14 @@ block head
       top: 26px;
       overflow: hidden;
     }
+    .#{prefix}-big-title {
+      font-size: 60px;
+      margin: 0;
+      line-height: 1;
+      margin-bottom: 25px;
+      font-weight: 500;
+      color: #333;      
+    }
     .#{prefix}-terms-list {
       display: flex;
       flex-direction: column;
@@ -53,6 +53,9 @@ block head
       gap: 10px;
       margin-bottom: 24px;
     }
+    .#{prefix}-address-section > * {
+      flex: 1 1 auto;
+    }
     .#{prefix}-address {}
     .#{prefix}-table {
       width: 100%;
@@ -99,8 +102,12 @@ block head
       display: flex;
       padding: 4px 0;
     }
-    .#{prefix}-totals__line--gray-border {}
-    .#{prefix}-totals__line--dark-border {}
+    .#{prefix}-totals__line--gray-border {
+      border-bottom: 1px solid #DADADA;
+    }
+    .#{prefix}-totals__line--dark-border {
+      border-bottom: 1px solid #000;
+    }
     .#{prefix}-totals__line__label {
       min-width: 160px;
     }
@@ -161,30 +168,31 @@ block content
       tbody
         each line in lines
           tr(class=`${prefix}-table__row`)
-            td(class=`${prefix}-table__column`)= line.item
-            td(class=`${prefix}-table__column`)= line.description
-            td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.rate
-            td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.total
+            td(class=`${prefix}-table__cell`)= line.item
+            td(class=`${prefix}-table__cell`)= line.description
+            td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.rate
+            td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.total
 
     //- Totals Section
     div(class=`${prefix}-totals`)
       if showSubtotal
-        div(class=`${prefix}-totals__line #{prefix}-totals__line--gray-border`)
+        div(class=`${prefix}-totals__line ${prefix}-totals__line--gray-border`)
           span(class=`${prefix}-totals__line__label`)= subtotalLabel
           span(class=`${prefix}-totals__line__amount`)= subtotal
+
       if showTotal
-        div(class=`${prefix}-totals__line #{prefix}-totals__line--dark-border`)
+        div(class=`${prefix}-totals__line ${prefix}-totals__line--dark-border`)
           span(class=`${prefix}-totals__line__label`)= totalLabel
           span(class=`${prefix}-totals__line__amount`)= total
 
     //- Customer Note Section
     if showCustomerNote
       div(class=`${prefix}-statement`)
-        span(class=`${prefix}-statement__label`)= customerNoteLabel
-        p(class=`${prefix}-statement__value`)= customerNote
+        div(class=`${prefix}-statement__label`)= customerNoteLabel
+        div(class=`${prefix}-statement__value`)= customerNote
 
     //- Terms & Conditions Section
     if showTermsConditions
       div(class=`${prefix}-statement`)
-        span(class=`${prefix}-statement__label`)= termsConditionsLabel
-        p(class=`${prefix}-statement__value`)= termsConditions
+        div(class=`${prefix}-statement__label`)= termsConditionsLabel
+        div(class=`${prefix}-statement__value`)= termsConditions

packages/server/src/interfaces/CreditNote.ts

@@ -62,6 +62,8 @@ export interface ICreditNote {
   branchId?: number;
   warehouseId: number;
   createdAt?: Date;
+  termsConditions: string;
+  note: string;
 }
 
 export enum CreditNoteAction {

packages/server/src/interfaces/PaymentReceive.ts

@@ -203,53 +203,35 @@ export interface PaymentReceivedPdfTax {
 export interface PaymentReceivedPdfTemplateAttributes {
   primaryColor: string;
   secondaryColor: string;
-  companyName: string;
-
   showCompanyLogo: boolean;
   companyLogo: string;
+  companyName: string;
 
-  dueDateLabel: string;
-  showDueDate: boolean;
-
-  dateIssueLabel: string;
-  showDateIssue: boolean;
-
-  invoiceNumberLabel: string;
-  showInvoiceNumber: boolean;
-
-  showBillingToAddress: boolean;
-  showBilledFromAddress: boolean;
-  billedToLabel: string;
-
-  lineItemLabel: string;
-  lineDescriptionLabel: string;
-  lineRateLabel: string;
-  lineTotalLabel: string;
-
-  totalLabel: string;
-  subtotalLabel: string;
-  discountLabel: string;
-  paymentMadeLabel: string;
-  balanceDueLabel: string;
-
-  showTotal: boolean;
-  showSubtotal: boolean;
-  showDiscount: boolean;
-  showTaxes: boolean;
-  showPaymentMade: boolean;
-  showDueAmount: boolean;
-  showBalanceDue: boolean;
-
-  discount: string;
-
-  termsConditionsLabel: string;
-  showTermsConditions: boolean;
-
-  lines: PaymentReceivedPdfLineItem[];
-  taxes: PaymentReceivedPdfTax[];
-
-  statementLabel: string;
-  showStatement: boolean;
   billedToAddress: string[];
   billedFromAddress: string[];
+  showBilledFromAddress: boolean;
+  showBillingToAddress: boolean;
+  billedToLabel: string;
+
+  total: string;
+  totalLabel: string;
+  showTotal: boolean;
+
+  subtotal: string;
+  subtotalLabel: string;
+  showSubtotal: boolean;
+
+  lines: Array<{
+    invoiceNumber: string;
+    invoiceAmount: string;
+    paidAmount: string;
+  }>;
+
+  showPaymentReceivedNumber: boolean;
+  paymentReceivedNumberLabel: string;
+  paymentReceivedNumebr: string;
+
+  paymentReceivedDate: string;
+  showPaymentReceivedDate: boolean;
+  paymentReceivedDateLabel: string;
 }

packages/server/src/interfaces/SaleReceipt.ts

@@ -155,3 +155,57 @@ export interface ISaleReceiptMailPresend {
   saleReceiptId: number;
   messageOptions: SaleReceiptMailOptsDTO;
 }
+
+export interface ISaleReceiptBrandingTemplateAttributes {
+  primaryColor: string;
+  secondaryColor: string;
+  showCompanyLogo: boolean;
+  companyLogo: string;
+  companyName: string;
+
+  // Address
+  billedToAddress: string[];
+  billedFromAddress: string[];
+  showBilledFromAddress: boolean;
+  showBilledToAddress: boolean;
+  billedToLabel: string;
+
+  // Total
+  total: string;
+  totalLabel: string;
+  showTotal: boolean;
+
+  // Subtotal
+  subtotal: string;
+  subtotalLabel: string;
+  showSubtotal: boolean;
+
+  // Customer Note
+  showCustomerNote: boolean;
+  customerNote: string;
+  customerNoteLabel: string;
+
+  // Terms & Conditions
+  showTermsConditions: boolean;
+  termsConditions: string;
+  termsConditionsLabel: string;
+
+  // Lines
+  lines: Array<{
+    item: string;
+    description: string;
+    rate: string;
+    quantity: string;
+    total: string;
+  }>;
+
+  // Receipt Number
+  showReceiptNumber: boolean;
+  receiptNumberLabel: string;
+  receiptNumebr: string;
+
+  // Receipt Date
+  receiptDate: string;
+  showReceiptDate: boolean;
+  receiptDateLabel: string;
+}

packages/server/src/services/CreditNotes/utils.ts

@@ -1,9 +1,23 @@
-import { CreditNotePdfTemplateAttributes } from "@/interfaces";
-import CreditNote from "@/models/CreditNote";
+import { CreditNotePdfTemplateAttributes, ICreditNote } from '@/interfaces';
 
-
-export const transformCreditNoteToPdfTemplate = (creditNote: CreditNote): Partial<CreditNotePdfTemplateAttributes> {
+export const transformCreditNoteToPdfTemplate = (
+  creditNote: ICreditNote
+): Partial<CreditNotePdfTemplateAttributes> => {
   return {
+    creditNoteDate: creditNote.formattedCreditNoteDate,
+    creditNoteNumebr: creditNote.creditNoteNumber,
 
+    total: creditNote.formattedAmount,
+    subtotal: creditNote.formattedSubtotal,
+
+    lines: creditNote.entries?.map((entry) => ({
+      item: entry.item.name,
+      description: entry.description,
+      rate: entry.rateFormatted,
+      quantity: entry.quantityFormatted,
+      total: entry.totalFormatted,
+    })),
+    customerNote: creditNote.note,
+    termsConditions: creditNote.termsConditions,
   };
-}
+};

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx

@@ -136,19 +136,18 @@ function ReceiptFormProvider({ receiptId, ...props }) {
 
     // Branding templates
     brandingTemplates,
-    isBrandingTemplatesLoading
+    isBrandingTemplatesLoading,
   };
+  const isLoading =
+    isReceiptLoading ||
+    isAccountsLoading ||
+    isCustomersLoading ||
+    isItemsLoading ||
+    isSettingLoading ||
+    isBrandingTemplatesLoading;
+
   return (
-    <DashboardInsider
-      loading={
-        isReceiptLoading ||
-        isAccountsLoading ||
-        isCustomersLoading ||
-        isItemsLoading ||
-        isSettingLoading
-      }
-      name={'receipt-form'}
-    >
+    <DashboardInsider loading={isLoading} name={'receipt-form'}>
       <ReceiptFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );