mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
feat: rendering pdf templates on the server-side
This commit is contained in:
Ahmed Bouhuolia
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user