mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 05:40:31 +00:00
feat: hook up branding templates to invoices
This commit is contained in:
Ahmed Bouhuolia
@@ -1,92 +0,0 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/invoice-rtl.css
|
||||
else
|
||||
include ../../css/modules/invoice.css
|
||||
|
||||
block content
|
||||
div.invoice
|
||||
div.invoice__header
|
||||
div.paper
|
||||
h1.title #{__("invoice.paper.invoice")}
|
||||
if saleInvoice.invoiceNo
|
||||
span.invoiceNo #{saleInvoice.invoiceNo}
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if organizationEmail
|
||||
span.email #{organizationEmail}
|
||||
|
||||
div.invoice__due-amount
|
||||
div.label #{__('invoice.paper.invoice_amount')}
|
||||
div.amount #{saleInvoice.totalFormatted}
|
||||
|
||||
div.invoice__meta
|
||||
div.invoice__meta-item.invoice__meta-item--amount
|
||||
span.label #{__('invoice.paper.due_amount')}
|
||||
span.value #{saleInvoice.dueAmountFormatted}
|
||||
|
||||
div.invoice__meta-item.invoice__meta-item--billed-to
|
||||
span.label #{__("invoice.paper.billed_to")}
|
||||
span.value #{saleInvoice.customer.displayName}
|
||||
|
||||
div.invoice__meta-item.invoice__meta-item--invoice-date
|
||||
span.label #{__("invoice.paper.invoice_date")}
|
||||
span.value #{saleInvoice.invoiceDateFormatted}
|
||||
|
||||
div.invoice__meta-item.invoice__meta-item--due-date
|
||||
span.label #{__("invoice.paper.due_date")}
|
||||
span.value #{saleInvoice.dueDateFormatted}
|
||||
|
||||
div.invoice__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 saleInvoice.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
|
||||
|
||||
div.invoice__table-after
|
||||
div.invoice__table-total
|
||||
table
|
||||
tbody
|
||||
tr.subtotal
|
||||
td #{__('invoice.paper.subtotal')}
|
||||
td #{saleInvoice.subtotalFormatted}
|
||||
each tax in saleInvoice.taxes
|
||||
tr.tax_line
|
||||
td #{tax.name} [#{tax.taxRate}%]
|
||||
td #{tax.taxRateAmountFormatted}
|
||||
tr.total
|
||||
td #{__('invoice.paper.total')}
|
||||
td #{saleInvoice.totalFormatted}
|
||||
tr.payment-amount
|
||||
td #{__('invoice.paper.payment_amount')}
|
||||
td #{saleInvoice.paymentAmountFormatted}
|
||||
tr.blanace-due
|
||||
td #{__('invoice.paper.balance_due')}
|
||||
td #{saleInvoice.dueAmountFormatted}
|
||||
|
||||
div.invoice__footer
|
||||
if saleInvoice.termsConditions
|
||||
div.invoice__conditions
|
||||
h3 #{__("invoice.paper.conditions_title")}
|
||||
p #{saleInvoice.termsConditions}
|
||||
|
||||
if saleInvoice.invoiceMessage
|
||||
div.invoice__notes
|
||||
h3 #{__("invoice.paper.notes_title")}
|
||||
p #{saleInvoice.invoiceMessage}
|
||||
244
packages/server/resources/views/modules/invoice-standard.pug
Normal file
244
packages/server/resources/views/modules/invoice-standard.pug
Normal file
@@ -0,0 +1,244 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
background-color: #fff;
|
||||
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;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-detail {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-detail__label {
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-detail__value {
|
||||
/* Styles for detail values */
|
||||
}
|
||||
.#{prefix}-address-root {
|
||||
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-from {
|
||||
flex: 1;
|
||||
}
|
||||
.#{prefix}-address-from__item {
|
||||
/* Styles for items in the billed-from address */
|
||||
}
|
||||
.#{prefix}-address-to {
|
||||
flex: 1;
|
||||
}
|
||||
.#{prefix}-address-to__item {
|
||||
/* Styles for items in the billed-to 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__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;
|
||||
/* Additional styles for total items with bold font weight */
|
||||
}
|
||||
.#{prefix}-totals__item-label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__item-amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-paragraph {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.#{prefix}-paragraph__label {
|
||||
color: #666;
|
||||
}
|
||||
.#{prefix}-paragraph__value {
|
||||
/* Styles for values within the paragraph section */
|
||||
}
|
||||
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
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(alt="", src=companyLogo)
|
||||
|
||||
//- 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 showDueDate
|
||||
div(class=`${prefix}-detail`)
|
||||
div(class=`${prefix}-detail__label`) #{dueDateLabel}
|
||||
div(class=`${prefix}-detail__value`) #{dueDate}
|
||||
|
||||
//- Address section
|
||||
div(class=`${prefix}-address-root`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address-from`)
|
||||
strong #{companyName}
|
||||
each item in billedFromAddres
|
||||
div(class=`${prefix}-address-from__item`) #{item}
|
||||
|
||||
if showBillingToAddress
|
||||
div(class=`${prefix}-address-to`)
|
||||
strong #{billedToLabel}
|
||||
each item in billedToAddress
|
||||
div(class=`${prefix}-address-to__item`) #{item}
|
||||
|
||||
//- Invoice table
|
||||
table(class=`${prefix}-table`)
|
||||
thead
|
||||
tr
|
||||
th(class=`${prefix}-table__header`) #{lineItemLabel}
|
||||
th(class=`${prefix}-table__header`) #{lineDescriptionLabel}
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineRateLabel}
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineTotalLabel}
|
||||
tbody
|
||||
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}
|
||||
|
||||
//- Totals section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
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 showDiscount
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item-label`) #{discountLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{discount}
|
||||
|
||||
if showTaxes
|
||||
each tax in taxes
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item-label`) #{tax.label}
|
||||
div(class=`${prefix}-totals__item-amount`) #{tax.amount}
|
||||
|
||||
if showTotal
|
||||
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}
|
||||
|
||||
if showPaymentMade
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item-label`) #{paymentMadeLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{paymentMade}
|
||||
|
||||
if showBalanceDue
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark ${prefix}-totals__item--font-weight-bold`)
|
||||
div(class=`${prefix}-totals__item-label`) #{balanceDueLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{balanceDue}
|
||||
|
||||
//- Footer section
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-paragraph`)
|
||||
if termsConditionsLabel
|
||||
div(class=`${prefix}-paragraph__label`) #{termsConditionsLabel}
|
||||
div(class=`${prefix}-paragraph__value`) #{termsConditions}
|
||||
|
||||
if showStatement
|
||||
div(class=`${prefix}-paragraph`)
|
||||
if statementLabel
|
||||
div(class=`${prefix}-paragraph__label`) #{statementLabel}
|
||||
div(class=`${prefix}-paragraph__value`) #{statement}
|
||||
Reference in New Issue
Block a user