From bb0d91a9cb49a641392b5ed25a638e6534b7bc3f Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 17 Sep 2024 17:46:56 +0200 Subject: [PATCH] fix: pdf templates --- packages/server/resources/scss/base.css | 6 +- .../views/modules/credit-note-standard.pug | 45 +++++------- .../views/modules/estimate-regular.pug | 19 +++-- .../views/modules/invoice-standard.pug | 4 +- .../modules/payment-receive-standard.pug | 13 +--- .../views/modules/receipt-regular.pug | 50 +++++++------ packages/server/src/interfaces/CreditNote.ts | 2 + .../server/src/interfaces/PaymentReceive.ts | 70 +++++++------------ packages/server/src/interfaces/SaleReceipt.ts | 54 ++++++++++++++ .../server/src/services/CreditNotes/utils.ts | 24 +++++-- .../ReceiptForm/ReceiptFormProvider.tsx | 21 +++--- 11 files changed, 177 insertions(+), 131 deletions(-) diff --git a/packages/server/resources/scss/base.css b/packages/server/resources/scss/base.css index d7d148cab..9c11398a2 100644 --- a/packages/server/resources/scss/base.css +++ b/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: ; */ font-style: normal; - /* font-variation-settings: - "wdth" 100; */ } \ No newline at end of file diff --git a/packages/server/resources/views/modules/credit-note-standard.pug b/packages/server/resources/views/modules/credit-note-standard.pug index 16b1c8834..f580b8fc9 100644 --- a/packages/server/resources/views/modules/credit-note-standard.pug +++ b/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`) diff --git a/packages/server/resources/views/modules/estimate-regular.pug b/packages/server/resources/views/modules/estimate-regular.pug index 393cbceaf..a908cb6f1 100644 --- a/packages/server/resources/views/modules/estimate-regular.pug +++ b/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} \ No newline at end of file diff --git a/packages/server/resources/views/modules/invoice-standard.pug b/packages/server/resources/views/modules/invoice-standard.pug index 006e33569..ba9339637 100644 --- a/packages/server/resources/views/modules/invoice-standard.pug +++ b/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} diff --git a/packages/server/resources/views/modules/payment-receive-standard.pug b/packages/server/resources/views/modules/payment-receive-standard.pug index 2c6e417cd..36ba86ed2 100644 --- a/packages/server/resources/views/modules/payment-receive-standard.pug +++ b/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} diff --git a/packages/server/resources/views/modules/receipt-regular.pug b/packages/server/resources/views/modules/receipt-regular.pug index f9ccd1a72..2aa504031 100644 --- a/packages/server/resources/views/modules/receipt-regular.pug +++ b/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 diff --git a/packages/server/src/interfaces/CreditNote.ts b/packages/server/src/interfaces/CreditNote.ts index 136425818..ffb4c26ba 100644 --- a/packages/server/src/interfaces/CreditNote.ts +++ b/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 { diff --git a/packages/server/src/interfaces/PaymentReceive.ts b/packages/server/src/interfaces/PaymentReceive.ts index fbc24ba43..8dd880872 100644 --- a/packages/server/src/interfaces/PaymentReceive.ts +++ b/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; } diff --git a/packages/server/src/interfaces/SaleReceipt.ts b/packages/server/src/interfaces/SaleReceipt.ts index 14f451dda..d3e458313 100644 --- a/packages/server/src/interfaces/SaleReceipt.ts +++ b/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; +} diff --git a/packages/server/src/services/CreditNotes/utils.ts b/packages/server/src/services/CreditNotes/utils.ts index e81de43f2..6b94d955e 100644 --- a/packages/server/src/services/CreditNotes/utils.ts +++ b/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 { +export const transformCreditNoteToPdfTemplate = ( + creditNote: ICreditNote +): Partial => { 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, }; -} \ No newline at end of file +}; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx index d51877c01..e4a8a1095 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx +++ b/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 ( - + );