mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: rendering pdf templates on the server-side
This commit is contained in:
Ahmed Bouhuolia
@@ -1,81 +1,205 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/credit-rtl.css
|
||||
else
|
||||
include ../../css/modules/credit.css
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
color: #111;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
||||
}
|
||||
.#{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}-terms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-terms-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-terms-item__label {
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-terms-item__value {
|
||||
/* Styles for the term value */
|
||||
}
|
||||
|
||||
.#{prefix}-group {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
||||
.#{prefix}-address {
|
||||
/* Styles for each address block */
|
||||
}
|
||||
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
.#{prefix}-table__header {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px 10px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-table__header:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__header:last-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__header--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.#{prefix}-table__cell:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__cell:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__cell--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-totals__item {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__item--border-gray {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
.#{prefix}-totals__item--border-dark {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.#{prefix}-totals__item--font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.#{prefix}-totals__item-label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__item-amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{prefix}-statement {
|
||||
/* Styles for customer note/terms statement section */
|
||||
}
|
||||
|
||||
.#{prefix}-statement__label {
|
||||
/* Styles for statement label */
|
||||
}
|
||||
|
||||
.#{prefix}-statement__value {
|
||||
/* Styles for statement value */
|
||||
}
|
||||
|
||||
block content
|
||||
div.credit
|
||||
div.credit__header
|
||||
div.paper
|
||||
h1.title #{__('credit.paper.credit_note')}
|
||||
if creditNote.creditNoteNumber
|
||||
span.creditNoteNumber #{creditNote.creditNoteNumber}
|
||||
div(class=`${prefix}-root`)
|
||||
div(class=`${prefix}-big-title`) Credit Note
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if organizationEmail
|
||||
span.email #{organizationEmail}
|
||||
if showCompanyLogo
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(src=companyLogo 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}
|
||||
|
||||
div.credit__full-amount
|
||||
div.label #{__('credit.paper.amount')}
|
||||
div.amount #{creditNote.formattedAmount}
|
||||
if showCreditNoteDate
|
||||
div(class=`${prefix}-terms-item`)
|
||||
div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
|
||||
div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
|
||||
|
||||
div.credit__meta
|
||||
div.credit__meta-item.credit__meta-item--amount
|
||||
span.label #{__('credit.paper.remaining')}
|
||||
span.value #{creditNote.formattedCreditsRemaining}
|
||||
div(class=`${prefix}-group`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{companyName}
|
||||
each address in billedFromAddress
|
||||
div #{address}
|
||||
if showBilledToAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{billedToLabel}
|
||||
each address in billedToAddress
|
||||
div #{address}
|
||||
|
||||
div.credit__meta-item.credit__meta-item--billed-to
|
||||
span.label #{__("credit.paper.billed_to")}
|
||||
span.value #{creditNote.customer.displayName}
|
||||
|
||||
div.credit__meta-item.credit__meta-item--credit-date
|
||||
span.label #{__("credit.paper.credit_date")}
|
||||
span.value #{creditNote.formattedCreditNoteDate}
|
||||
|
||||
div.credit__table
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.item #{__("item_entry.paper.item_name")}
|
||||
th.rate #{__("item_entry.paper.rate")}
|
||||
th.quantity #{__("item_entry.paper.quantity")}
|
||||
th.total #{__("item_entry.paper.total")}
|
||||
table(class=`${prefix}-table`)
|
||||
thead(class=`${prefix}-table__header`)
|
||||
tr
|
||||
th #{'Item'}
|
||||
th #{'Description'}
|
||||
th #{'Rate'}
|
||||
th #{'Total'}
|
||||
tbody
|
||||
each entry in creditNote.entries
|
||||
tr
|
||||
td.item
|
||||
div.title=entry.item.name
|
||||
span.description=entry.description
|
||||
td.rate=entry.rate
|
||||
td.quantity=entry.quantity
|
||||
td.total=entry.amount
|
||||
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}
|
||||
|
||||
div.credit__table-after
|
||||
div.credit__table-total
|
||||
table
|
||||
tbody
|
||||
tr.total
|
||||
td #{__('credit.paper.total')}
|
||||
td #{creditNote.formattedAmount}
|
||||
tr.payment-amount
|
||||
td #{__('credit.paper.credits_used')}
|
||||
td #{creditNote.formattedCreditsUsed}
|
||||
tr.blanace-due
|
||||
td #{__('credit.paper.credits_remaining')}
|
||||
td #{creditNote.formattedCreditsRemaining}
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
|
||||
div #{subtotalLabel}:
|
||||
div #{subtotal}
|
||||
|
||||
div.credit__footer
|
||||
if creditNote.termsConditions
|
||||
div.credit__conditions
|
||||
h3 #{__("credit.paper.terms_conditions")}
|
||||
p #{creditNote.termsConditions}
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark`)
|
||||
div #{totalLabel}:
|
||||
div #{total}
|
||||
|
||||
if creditNote.note
|
||||
div.credit__notes
|
||||
h3 #{__("credit.paper.notes")}
|
||||
p #{creditNote.note}
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{customerNoteLabel}:
|
||||
div(class=`${prefix}-statement__value`) #{customerNote}
|
||||
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{termsConditionsLabel}:
|
||||
div(class=`${prefix}-statement__value`) #{termsConditions}
|
||||
|
||||
@@ -1,82 +1,202 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/estimate-rtl.css
|
||||
else
|
||||
include ../../css/modules/estimate.css
|
||||
block head
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
color: #111;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
||||
}
|
||||
.#{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}-terms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-terms-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-terms-item__label {
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-terms-item__value {
|
||||
}
|
||||
.#{prefix}-address-section{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-address {
|
||||
}
|
||||
.#{prefix}-address__item {
|
||||
}
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
.#{prefix}-table__header {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px 10px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-table__header:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__header:last-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__header--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.#{prefix}-table__cell--right{
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__cell:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-totals__item {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__item--border-gray {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
.#{prefix}-totals__item--border-dark {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.#{prefix}-totals__item--font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.#{prefix}-totals__item-label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__item-amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-statement {
|
||||
}
|
||||
.#{prefix}-statement__label {
|
||||
}
|
||||
.#{prefix}-statement__value {
|
||||
}
|
||||
|
||||
block content
|
||||
div.estimate
|
||||
div.estimate__header
|
||||
div.paper
|
||||
h1.title #{__("estimate.paper.estimate")}
|
||||
span.email #{saleEstimate.estimateNumber}
|
||||
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
|
||||
h1(class=`${prefix}-big-title`) Estimate
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if organizationEmail
|
||||
span.email #{organizationEmail}
|
||||
if showCompanyLogo
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(alt="", src=companyLogo)
|
||||
|
||||
div.estimate__estimate-amount
|
||||
div.label #{__('estimate.paper.estimate_amount')}
|
||||
div.amount #{saleEstimate.formattedAmount}
|
||||
//- 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}
|
||||
|
||||
div.estimate__meta
|
||||
if saleEstimate.estimateNumber
|
||||
div.estimate__meta-item.estimate__meta-item--estimate-number
|
||||
span.label #{__("estimate.paper.estimate_number")}
|
||||
span.value #{saleEstimate.estimateNumber}
|
||||
//- Addresses (Group section)
|
||||
div(class=`${prefix}-address-section`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{companyName}
|
||||
each item in billedFromAddress
|
||||
div(class=`${prefix}-address__item`) #{item}
|
||||
|
||||
div.estimate__meta-item.estimate__meta-item--billed-to
|
||||
span.label #{__("estimate.paper.billed_to")}
|
||||
span.value #{saleEstimate.customer.displayName}
|
||||
if showBilledToAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{billedToLabel}
|
||||
each item in billedToAddress
|
||||
div(class=`${prefix}-address__item`) #{item}
|
||||
|
||||
div.estimate__meta-item.estimate__meta-item--estimate-date
|
||||
span.label #{__("estimate.paper.estimate_date")}
|
||||
span.value #{saleEstimate.formattedEstimateDate}
|
||||
|
||||
div.estimate__meta-item.estimate__meta-item--due-date
|
||||
span.label #{__("estimate.paper.expiration_date")}
|
||||
span.value #{saleEstimate.formattedExpirationDate}
|
||||
|
||||
div.estimate__table
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.item #{__("item_entry.paper.item_name")}
|
||||
th.rate #{__("item_entry.paper.rate")}
|
||||
th.quantity #{__("item_entry.paper.quantity")}
|
||||
th.total #{__("item_entry.paper.total")}
|
||||
//- Table section (Line items)
|
||||
table(class=`${prefix}-table`)
|
||||
thead
|
||||
tr
|
||||
th(class=`${prefix}-table__header`) Item
|
||||
th(class=`${prefix}-table__header`) Description
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Rate
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
|
||||
tbody
|
||||
each entry in saleEstimate.entries
|
||||
tr
|
||||
td.item
|
||||
div.title=entry.item.name
|
||||
span.description=entry.description
|
||||
td.rate=entry.rate
|
||||
td.quantity=entry.quantity
|
||||
td.total=entry.amount
|
||||
each line in lines
|
||||
tr
|
||||
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}
|
||||
|
||||
div.estimate__table-after
|
||||
div.estimate__table-total
|
||||
table
|
||||
tbody
|
||||
tr.subtotal
|
||||
td #{__('estimate.paper.subtotal')}
|
||||
td #{saleEstimate.formattedAmount}
|
||||
tr.total
|
||||
td #{__('estimate.paper.total')}
|
||||
td #{saleEstimate.formattedAmount}
|
||||
//- Totals section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
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-label`) #{totalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{total}
|
||||
|
||||
div.estimate__footer
|
||||
if saleEstimate.termsConditions
|
||||
div.estimate__conditions
|
||||
h3 #{__("estimate.paper.conditions_title")}
|
||||
p #{saleEstimate.termsConditions}
|
||||
//- Statements section
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{customerNoteLabel}
|
||||
div(class=`${prefix}-statement__value`) #{customerNote}
|
||||
|
||||
if saleEstimate.note
|
||||
div.estimate__notes
|
||||
h3 #{__("estimate.paper.notes_title")}
|
||||
p #{saleEstimate.note}
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{termsConditionsLabel}
|
||||
div(class=`${prefix}-statement__value`) #{termsConditions}
|
||||
@@ -4,7 +4,6 @@ block head
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
background-color: #fff;
|
||||
color: #111;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
@@ -25,7 +24,6 @@ block head
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 26px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-details {
|
||||
@@ -122,7 +120,6 @@ block head
|
||||
}
|
||||
.#{prefix}-totals__item--font-weight-bold {
|
||||
font-weight: bold;
|
||||
/* Additional styles for total items with bold font weight */
|
||||
}
|
||||
.#{prefix}-totals__item-label {
|
||||
min-width: 160px;
|
||||
@@ -143,6 +140,7 @@ 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
|
||||
|
||||
|
||||
@@ -1,67 +1,187 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/payment-rtl.css
|
||||
else
|
||||
include ../../css/modules/payment.css
|
||||
- var prefix = 'bp3';
|
||||
|
||||
style.
|
||||
.#{prefix}-root{
|
||||
color: #111;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
||||
}
|
||||
.#{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}-terms-list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-terms-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-terms-item__label{
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-group{
|
||||
|
||||
}
|
||||
.#{prefix}-addresses{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-addresses > * {
|
||||
flex: 1 1;
|
||||
}
|
||||
.#{prefix}-address__label{
|
||||
|
||||
}
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
.#{prefix}-table__header {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px 10px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-table__header:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__header:last-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__header--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.#{prefix}-table__cell:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__cell:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__cell--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__column{
|
||||
|
||||
}
|
||||
.#{prefix}-table__column--right{
|
||||
|
||||
}
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-totals__item {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__item--gray-border {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
.#{prefix}-totals__item--dark-border {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.#{prefix}-totals__item--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.#{prefix}-totals__item-label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__item-amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
block content
|
||||
div.payment
|
||||
div.payment__header
|
||||
div.paper
|
||||
h1.title #{__("payment.paper.payment_receipt")}
|
||||
if paymentReceive.paymentReceiveNo
|
||||
span.paymentNumber #{paymentReceive.paymentReceiveNo}
|
||||
div(class=`${prefix}-root`)
|
||||
div(class=`${prefix}-big-title`) Payment
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if organizationEmail
|
||||
span.email #{organizationEmail}
|
||||
if showCompanyLogo
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(src=companyLogo 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}
|
||||
|
||||
div.payment__received-amount
|
||||
div.label #{__('payment.paper.amount_received')}
|
||||
div.amount #{paymentReceive.formattedAmount}
|
||||
if showPaymentReceivedDate
|
||||
div(class=`${prefix}-terms-item`)
|
||||
div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
|
||||
div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
|
||||
|
||||
div(class=`${prefix}-addresses`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong(class=`${prefix}-address__item`) #{companyName}
|
||||
each addressLine in billedFromAddress
|
||||
div(class=`${prefix}-address__item`) #{addressLine}
|
||||
|
||||
div.payment__meta
|
||||
div.payment__meta-item.payment__meta-item--billed-to
|
||||
span.label #{__("payment.paper.billed_to")}
|
||||
span.value #{paymentReceive.customer.displayName}
|
||||
if showBillingToAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong(class=`${prefix}-address__item`) #{billedToLabel}
|
||||
each addressLine in billedToAddress
|
||||
div(class=`${prefix}-address__item`) #{addressLine}
|
||||
|
||||
div.payment__meta-item.payment__meta-item--payment-date
|
||||
span.label #{__("payment.paper.payment_date")}
|
||||
span.value #{paymentReceive.formattedPaymentDate}
|
||||
table(class=`${prefix}-table`)
|
||||
thead
|
||||
tr
|
||||
th(class=`${prefix}-table__header`) Invoice #
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Invoice Amount
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Paid Amount
|
||||
|
||||
div.payment__table
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.item #{__("payment.paper.invoice_number")}
|
||||
th.date #{__("payment.paper.invoice_date")}
|
||||
th.invoiceAmount #{__("payment.paper.invoice_amount")}
|
||||
th.paymentAmount #{__("payment.paper.payment_amount")}
|
||||
tbody
|
||||
each entry in paymentReceive.entries
|
||||
tr
|
||||
td.item=entry.invoice.invoiceNo
|
||||
td.date=entry.invoice.invoiceDateFormatted
|
||||
td.invoiceAmount=entry.invoice.totalFormatted
|
||||
td.paymentAmount=entry.invoice.paymentAmountFormatted
|
||||
tbody
|
||||
each line in lines
|
||||
tr
|
||||
td(class=`${prefix}-table__cell`) #{line.invoiceNumber}
|
||||
td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.invoiceAmount}
|
||||
td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.paidAmount}
|
||||
|
||||
div.payment__table-after
|
||||
div.payment__table-total
|
||||
table
|
||||
tbody
|
||||
tr.payment-amount
|
||||
td #{__('payment.paper.payment_amount')}
|
||||
td #{paymentReceive.formattedAmount}
|
||||
tr.blanace-due
|
||||
td #{__('payment.paper.balance_due')}
|
||||
td #{paymentReceive.customer.closingBalance}
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{subtotal}
|
||||
|
||||
div.payment__footer
|
||||
if paymentReceive.statement
|
||||
div.payment__notes
|
||||
h3 #{__("payment.paper.statement")}
|
||||
p #{paymentReceive.statement}
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item-label`) #{totalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{total}
|
||||
|
||||
@@ -1,77 +1,190 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/receipt-rtl.css
|
||||
else
|
||||
include ../../css/modules/receipt.css
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
color: #111;
|
||||
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;
|
||||
right: 26px;
|
||||
top: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-terms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-terms-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-terms-item__label {
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-terms-item__value {}
|
||||
.#{prefix}-address-section {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-address {}
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
.#{prefix}-table__header {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px 10px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-table__header:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__header:last-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__header--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.#{prefix}-table__cell:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__cell:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__cell--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-totals__line {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__line--gray-border {}
|
||||
.#{prefix}-totals__line--dark-border {}
|
||||
.#{prefix}-totals__line__label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__line__amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-statement {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.#{prefix}-statement__label {}
|
||||
.#{prefix}-statement__value {}
|
||||
|
||||
block content
|
||||
div.receipt
|
||||
div.receipt__header
|
||||
div.paper
|
||||
h1.title #{__("receipt.paper.receipt")}
|
||||
span.receiptNumber #{saleReceipt.receiptNumber}
|
||||
//- 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
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if showCompanyLogo
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(src=companyLogo alt=`Company Logo`)
|
||||
|
||||
div.receipt__receipt-amount
|
||||
div.label #{__('receipt.paper.receipt_amount')}
|
||||
div.amount #{saleReceipt.formattedAmount}
|
||||
//- 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
|
||||
|
||||
div.receipt__meta
|
||||
div.receipt__meta-item.receipt__meta-item--billed-to
|
||||
span.label #{__("receipt.paper.billed_to")}
|
||||
span.value #{saleReceipt.customer.displayName}
|
||||
//- Address Section
|
||||
div(class=`${prefix}-address-section`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong= companyName
|
||||
each addressLine in billedFromAddress
|
||||
div= addressLine
|
||||
|
||||
div.receipt__meta-item.receipt__meta-item--invoice-date
|
||||
span.label #{__("receipt.paper.receipt_date")}
|
||||
span.value #{saleReceipt.formattedReceiptDate}
|
||||
if showBilledToAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong= billedToLabel
|
||||
each addressLine in billedToAddress
|
||||
div= addressLine
|
||||
|
||||
if saleReceipt.receiptNumber
|
||||
div.receipt__meta-item.receipt__meta-item--invoice-number
|
||||
span.label #{__("receipt.paper.receipt_number")}
|
||||
span.value #{saleReceipt.receiptNumber}
|
||||
//- Table Section
|
||||
table(class=`${prefix}-table`)
|
||||
thead(class=`${prefix}-table__header`)
|
||||
tr
|
||||
th(class=`${prefix}-table__header`) Item
|
||||
th(class=`${prefix}-table__header`) Description
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Rate
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
|
||||
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
|
||||
|
||||
div.receipt__table
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.item #{__("item_entry.paper.item_name")}
|
||||
th.rate #{__("item_entry.paper.rate")}
|
||||
th.quantity #{__("item_entry.paper.quantity")}
|
||||
th.total #{__("item_entry.paper.total")}
|
||||
tbody
|
||||
each entry in saleReceipt.entries
|
||||
tr
|
||||
td.item=entry.item.name
|
||||
td.rate=entry.rate
|
||||
td.quantity=entry.quantity
|
||||
td.total=entry.amount
|
||||
|
||||
div.receipt__table-after
|
||||
div.receipt__table-total
|
||||
table
|
||||
tbody
|
||||
tr.total
|
||||
td #{__('receipt.paper.total')}
|
||||
td #{saleReceipt.formattedAmount}
|
||||
tr.payment-amount
|
||||
td #{__('receipt.paper.payment_amount')}
|
||||
td #{saleReceipt.formattedAmount}
|
||||
tr.blanace-due
|
||||
td #{__('receipt.paper.balance_due')}
|
||||
td #{'$0'}
|
||||
//- Totals Section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
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`)
|
||||
span(class=`${prefix}-totals__line__label`)= totalLabel
|
||||
span(class=`${prefix}-totals__line__amount`)= total
|
||||
|
||||
div.receipt__footer
|
||||
if saleReceipt.statement
|
||||
div.receipt__conditions
|
||||
h3 #{__("receipt.paper.statement")}
|
||||
p #{saleReceipt.statement}
|
||||
//- Customer Note Section
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= customerNoteLabel
|
||||
p(class=`${prefix}-statement__value`)= customerNote
|
||||
|
||||
if saleReceipt.receiptMessage
|
||||
div.receipt__notes
|
||||
h3 #{__("receipt.paper.notes")}
|
||||
p #{saleReceipt.receiptMessage}
|
||||
//- Terms & Conditions Section
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= termsConditionsLabel
|
||||
p(class=`${prefix}-statement__value`)= termsConditions
|
||||
|
||||
Reference in New Issue
Block a user