mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-14 18:51:21 +00:00
fix: update styles to work with wkhtmltopdf rendering
This commit is contained in:
khushi8112
@@ -2,23 +2,26 @@
|
|||||||
print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
|
print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
|
||||||
<div class="letter-head">{{ letter_head }}</div>
|
<div class="letter-head">{{ letter_head }}</div>
|
||||||
{% endif %} {% if print_heading_template %} {{ frappe.render_template(print_heading_template, {"doc":doc}) }}
|
{% endif %} {% if print_heading_template %} {{ frappe.render_template(print_heading_template, {"doc":doc}) }}
|
||||||
{% endif %} {%- if doc.meta.is_submittable and doc.docstatus==2 -%}
|
{% endif %} {%- endmacro -%} {% for page in layout %}
|
||||||
<div class="text-center" document-status="cancelled">
|
|
||||||
<h4 style="margin: 0px; color: red">{{ _("CANCELLED") }}</h4>
|
|
||||||
</div>
|
|
||||||
{%- endif -%} {%- endmacro -%} {% for page in layout %}
|
|
||||||
<div class="page-break invoice-page">
|
<div class="page-break invoice-page">
|
||||||
<div {% if print_settings.repeat_header_footer %} id="header-html" class="hidden-pdf" {% endif %}>
|
<div {% if print_settings.repeat_header_footer %} id="header-html" class="hidden-pdf" {% endif %}>
|
||||||
{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
|
{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.letter-head {
|
||||||
|
padding-top: 12px !important;
|
||||||
|
/* margin-top: 0px !important; */
|
||||||
|
}
|
||||||
.invoice-page {
|
.invoice-page {
|
||||||
font-family: Inter, sans-serif;
|
font-family: Inter, sans-serif;
|
||||||
font-size: 13px;
|
|
||||||
color: #171717;
|
color: #171717;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.print-format-body {
|
||||||
|
padding: 30px 12px 12px 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #7c7c7c !important;
|
color: #7c7c7c !important;
|
||||||
}
|
}
|
||||||
@@ -86,12 +89,12 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
|
|||||||
.items-table tr:first-child td:first-child,
|
.items-table tr:first-child td:first-child,
|
||||||
.tax-table tr:first-child td:first-child {
|
.tax-table tr:first-child td:first-child {
|
||||||
border-top-left-radius: 10px;
|
border-top-left-radius: 10px;
|
||||||
border-bottom-left-radius: 10px;
|
border-bottom-left-radius: 10px;
|
||||||
}
|
}
|
||||||
.items-table tr:first-child td:last-child,
|
.items-table tr:first-child td:last-child,
|
||||||
.tax-table tr:first-child td:last-child {
|
.tax-table tr:first-child td:last-child {
|
||||||
border-top-right-radius: 10px;
|
border-top-right-radius: 10px;
|
||||||
border-bottom-right-radius: 10px;
|
border-bottom-right-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.in-words {
|
.in-words {
|
||||||
@@ -128,185 +131,209 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
|
|||||||
color: #7c7c7c;
|
color: #7c7c7c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-text {
|
.info-text {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.print-format {
|
.print-format {
|
||||||
padding: 24px;
|
color: #171717;
|
||||||
line-height: 1.5;
|
font-size: 14px;
|
||||||
letter-spacing: 0.14px;
|
font-style: normal;
|
||||||
}
|
font-weight: 420;
|
||||||
|
line-height: 21px;
|
||||||
|
padding: 0px !important;
|
||||||
|
margin-left: 0mm !important;
|
||||||
|
margin-right: 0mm !important;
|
||||||
|
}
|
||||||
|
|
||||||
.print-format td{
|
.letter-head-footer {
|
||||||
padding: 8px 8px !important;
|
margin-top: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tax-table td, .items-table td{
|
.print-format-body td {
|
||||||
height: 40px;
|
padding: 8px 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tax-table thead td, .items-table thead td{
|
.tax-table td,
|
||||||
height: 32px;
|
.items-table td {
|
||||||
}
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tax-table thead td,
|
||||||
|
.items-table thead td {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<table class="info-table col-xs-12" style="width: 100%">
|
<div class="print-format-body">
|
||||||
<tr>
|
<table class="info-table col-xs-12" style="width: 100%">
|
||||||
<td class="col-xs-7" style="padding: 0 !important;">
|
|
||||||
<div class="title col-xs-5 p-0">
|
|
||||||
<div class="info-text">Customer Name:</div>
|
|
||||||
<div class="info-text">Bill to:</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-7">
|
|
||||||
<div class="info-text">{{ doc.customer_name }}</div>
|
|
||||||
<div class="info-text">{{ doc.address_display or "" }}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="col-xs-5" style="padding: 0 !important;">
|
|
||||||
<div class="title col-xs-6 p-0">
|
|
||||||
<div class="info-text">Invoice Number:</div>
|
|
||||||
<div class="info-text">Invoice Date:</div>
|
|
||||||
<div class="info-text">Payment Due Date:</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6">
|
|
||||||
<div class="info-text">{{ doc.name }}</div>
|
|
||||||
<div class="info-text">{{ frappe.utils.format_date(doc.posting_date) }}</div>
|
|
||||||
<div class="info-text">{{ frappe.utils.format_date(doc.due_date) }}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- Items Table -->
|
|
||||||
<table class="items-table mt-15">
|
|
||||||
<colgroup>
|
|
||||||
<col style="width: 5%" />
|
|
||||||
<col style="width: 35%" />
|
|
||||||
<col style="width: 15%" />
|
|
||||||
<col style="width: 10%" />
|
|
||||||
<col style="width: 20%" />
|
|
||||||
<col style="width: 15%" />
|
|
||||||
</colgroup>
|
|
||||||
<thead class="highlight-bg">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-center">{{ _("No") }}</td>
|
<td class="col-xs-7" style="padding: 0 !important">
|
||||||
<td class="text-left">{{ _("Item") }}</td>
|
<div class="title col-xs-5 p-0">
|
||||||
<td class="text-center">{{ _("HSN/SAC") }}</td>
|
<div class="info-text">Customer Name:</div>
|
||||||
<td class="text-right">{{ _("Quantity") }}</td>
|
<div class="info-text">Bill to:</div>
|
||||||
<td class="text-right">{{ _("Rate") }}</td>
|
</div>
|
||||||
<td class="text-right">{{ _("Amount") }}</td>
|
<div class="col-xs-7">
|
||||||
</tr>
|
<div class="info-text">{{ doc.customer_name }}</div>
|
||||||
</thead>
|
<div class="info-text">{{ doc.address_display or "" }}</div>
|
||||||
<tbody>
|
|
||||||
{% for item in doc.items %}
|
|
||||||
<tr>
|
|
||||||
<td class="text-center">{{ loop.index }}</td>
|
|
||||||
<td class="text-left">
|
|
||||||
<div style="display: flex; align-items: center; gap: 8px">
|
|
||||||
<div class="img-thumb">
|
|
||||||
{% if item.image %}
|
|
||||||
<div>
|
|
||||||
<img src="{{ item.image }}" alt="{{ item.item_name }}" />
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div>{{ item.item_name }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-center">{{ item.gst_hsn_code }}</td>
|
<td class="col-xs-5" style="padding: 0 !important">
|
||||||
<td class="text-right">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
|
<div class="title col-xs-6 p-0">
|
||||||
<td class="text-right">{{ item.get_formatted("net_rate", doc) }}</td>
|
<div class="info-text">Invoice Number:</div>
|
||||||
<td class="text-right">{{ item.get_formatted("net_amount", doc) }}</td>
|
<div class="info-text">Invoice Date:</div>
|
||||||
|
<div class="info-text">Payment Due Date:</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="info-text">{{ doc.name }}</div>
|
||||||
|
<div class="info-text">{{ frappe.utils.format_date(doc.posting_date) }}</div>
|
||||||
|
<div class="info-text">{{ frappe.utils.format_date(doc.due_date) }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
</table>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<table class="totals mt-16" style="width: 100%;">
|
<!-- Items Table -->
|
||||||
<tr>
|
<table class="items-table mt-15">
|
||||||
<td style="width: 65%"> </td>
|
<colgroup>
|
||||||
|
<col style="width: 5%" />
|
||||||
|
<col style="width: 35%" />
|
||||||
|
<col style="width: 15%" />
|
||||||
|
<col style="width: 10%" />
|
||||||
|
<col style="width: 20%" />
|
||||||
|
<col style="width: 15%" />
|
||||||
|
</colgroup>
|
||||||
|
<thead class="highlight-bg">
|
||||||
|
<tr>
|
||||||
|
<td class="text-center">{{ _("No") }}</td>
|
||||||
|
<td class="text-left">{{ _("Item") }}</td>
|
||||||
|
<td class="text-center">{{ _("HSN/SAC") }}</td>
|
||||||
|
<td class="text-right">{{ _("Quantity") }}</td>
|
||||||
|
<td class="text-right">{{ _("Rate") }}</td>
|
||||||
|
<td class="text-right">{{ _("Amount") }}</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for item in doc.items %}
|
||||||
|
<tr>
|
||||||
|
<td class="text-center">{{ loop.index }}</td>
|
||||||
|
<td class="text-left">
|
||||||
|
<div style="display: flex; align-items: center; gap: 8px">
|
||||||
|
<div class="img-thumb">
|
||||||
|
{% if item.image %}
|
||||||
|
<div>
|
||||||
|
<img src="{{ item.image }}" alt="{{ item.item_name }}" />
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div>{{ item.item_name }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
<td style="width: 35%; vertical-align: top; text-align: right; padding: 0px 0px 6px 0px !important">
|
<td class="text-center">{{ item.gst_hsn_code }}</td>
|
||||||
<table style="width: 100%; border-collapse: collapse">
|
<td class="text-right">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
|
||||||
<tr class="row-divider">
|
<td class="text-right">{{ item.get_formatted("net_rate", doc) }}</td>
|
||||||
<td class="text-right title">{{ _("Sub Total:") }}</td>
|
<td class="text-right">{{ item.get_formatted("net_amount", doc) }}</td>
|
||||||
<td class="text-right">{{ doc.get_formatted("total", doc) }}</td>
|
</tr>
|
||||||
</tr>
|
{% endfor %}
|
||||||
<tr class="row-divider">
|
</tbody>
|
||||||
<td class="text-right title">
|
</table>
|
||||||
{{ _("Discount") }} ({{ doc.additional_discount_percentage or 0 }}%):
|
|
||||||
</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {% if
|
|
||||||
tax_rate > 0 %}
|
|
||||||
<tr class="row-divider">
|
|
||||||
<td class="text-right title">{{ _("Tax") }} ({{ tax_rate }}%):</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("total_taxes_and_charges", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
{% endif %}
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr style="border-bottom: 1px solid #ededed;">
|
<table class="totals mt-16" style="width: 100%">
|
||||||
<td colspan="2" style="padding: 0 0 6px 0 !important">
|
<tr>
|
||||||
<div class="highlight-bg" style="border-radius: 12px">
|
<td style="width: 65%"> </td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
style="
|
||||||
|
width: 35%;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0px 0px 6px 0px !important;
|
||||||
|
"
|
||||||
|
>
|
||||||
<table style="width: 100%; border-collapse: collapse">
|
<table style="width: 100%; border-collapse: collapse">
|
||||||
<tr>
|
<tr class="row-divider">
|
||||||
<td class="text-left mw-400">
|
<td class="text-right title">{{ _("Sub Total:") }}</td>
|
||||||
<div class="text-capitalize"><span class="title"> {{ _("In Words: ") }}</span>{{ doc.in_words }}</div>
|
<td class="text-right">{{ doc.get_formatted("total", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="row-divider">
|
||||||
|
<td class="text-right title">
|
||||||
|
{{ _("Discount") }} ({{ doc.additional_discount_percentage or 0 }}%):
|
||||||
</td>
|
</td>
|
||||||
<td class="text-right"><b>{{ _("Grand Total:") }}</b></td>
|
<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {%
|
||||||
|
if tax_rate > 0 %}
|
||||||
|
<tr class="row-divider">
|
||||||
|
<td class="text-right title">{{ _("Tax") }} ({{ tax_rate }}%):</td>
|
||||||
<td class="text-right">
|
<td class="text-right">
|
||||||
<span style="font-weight: 700">
|
{{ doc.get_formatted("total_taxes_and_charges", doc) }}
|
||||||
{{ doc.get_formatted("grand_total", doc) }}
|
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{% endif %}
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{% if doc.taxes_and_charges %}
|
|
||||||
<table class="tax-table mt-15">
|
|
||||||
<div class="mt-40 pb-8">{{ _("Tax Breakup") }}</div>
|
|
||||||
<thead class="highlight-bg">
|
|
||||||
<tr>
|
|
||||||
<td style="width: 5%" class="text-left">{{ _("HSN/SAC") }}</td>
|
|
||||||
<td style="width: 15%" class="text-right">{{ _("Taxable Amount") }}</td>
|
|
||||||
{% for row in doc.taxes %}
|
|
||||||
<td style="width: 10%" class="text-right">{{ row.description }} ({{ row.rate }}%)</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for item in doc.items %}
|
|
||||||
<tr>
|
|
||||||
<td class="text-left">{{ item.gst_hsn_code }}</td>
|
|
||||||
<td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td>
|
|
||||||
{% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100) %}
|
|
||||||
<td class="text-right">
|
|
||||||
{{ frappe.format_value(tax_amount, {"fieldtype": "Currency"}, doc) }}
|
|
||||||
</td>
|
</td>
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Terms -->
|
<tr style="border-bottom: 1px solid #ededed">
|
||||||
{% if doc.terms %}
|
<td colspan="2" style="padding: 0 0 6px 0 !important">
|
||||||
<div class="info-card">
|
<div class="highlight-bg" style="border-radius: 12px">
|
||||||
<div class="title">{{ _("Terms and Conditions") }}</div>
|
<table style="width: 100%; border-collapse: collapse">
|
||||||
{{ doc.terms}}
|
<tr>
|
||||||
|
<td class="text-left mw-400">
|
||||||
|
<div class="text-capitalize">
|
||||||
|
<span class="title"> {{ _("In Words: ") }}</span>{{ doc.in_words }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right"><b>{{ _("Grand Total:") }}</b></td>
|
||||||
|
<td class="text-right">
|
||||||
|
<span style="font-weight: 700">
|
||||||
|
{{ doc.get_formatted("grand_total", doc) }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{% if doc.taxes_and_charges %}
|
||||||
|
<table class="tax-table mt-15">
|
||||||
|
<div class="mt-40 pb-8">{{ _("Tax Breakup") }}</div>
|
||||||
|
<thead class="highlight-bg">
|
||||||
|
<tr>
|
||||||
|
<td style="width: 5%" class="text-left">{{ _("HSN/SAC") }}</td>
|
||||||
|
<td style="width: 15%" class="text-right">{{ _("Taxable Amount") }}</td>
|
||||||
|
{% for row in doc.taxes %}
|
||||||
|
<td style="width: 10%" class="text-right">{{ row.description }} ({{ row.rate }}%)</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for item in doc.items %}
|
||||||
|
<tr>
|
||||||
|
<td class="text-left">{{ item.gst_hsn_code }}</td>
|
||||||
|
<td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td>
|
||||||
|
{% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100) %}
|
||||||
|
<td class="text-right">
|
||||||
|
{{ frappe.format_value(tax_amount, {"fieldtype": "Currency"}, doc) }}
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Terms -->
|
||||||
|
{% if doc.terms %}
|
||||||
|
<div class="info-card">
|
||||||
|
<div class="title">{{ _("Terms and Conditions") }}</div>
|
||||||
|
{{ doc.terms}}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@@ -12,278 +12,304 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
|
|||||||
{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
|
{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.invoice-wrapper {
|
.letter-head {
|
||||||
font-family: "Inter", sans-serif;
|
margin-top: 12px !important;
|
||||||
color: var(--black-overlay-700);
|
}
|
||||||
padding: 12px;
|
.invoice-wrapper {
|
||||||
}
|
font-family: "Inter", sans-serif;
|
||||||
|
color: var(--black-overlay-700);
|
||||||
|
}
|
||||||
|
|
||||||
table.info-table,
|
.print-format-body {
|
||||||
table.items-table,
|
padding: 30px 12px 12px 12px !important;
|
||||||
table.tax-table {
|
}
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
border: 1px solid #ededed;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.info-table td {
|
body {
|
||||||
border-bottom: 1px solid #ededed;
|
margin-bottom: 0mm !important;
|
||||||
padding: 8px 10px !important;
|
padding: 0px !important;
|
||||||
}
|
}
|
||||||
table.items-table td,
|
|
||||||
table.tax-table td {
|
|
||||||
border-bottom: 1px solid #ededed;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.info-table td:not(:first-of-type),
|
table.info-table,
|
||||||
table.items-table td:not(:first-of-type),
|
table.items-table,
|
||||||
table.tax-table td:not(:first-of-type) {
|
table.tax-table {
|
||||||
border-left: 1px solid #ededed;
|
border-collapse: separate;
|
||||||
}
|
border-spacing: 0;
|
||||||
|
border: 1px solid #ededed;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
table.info-table tbody tr:last-of-type td,
|
table.info-table td {
|
||||||
table.items-table tbody tr:last-of-type td,
|
border-bottom: 1px solid #ededed;
|
||||||
table.tax-table tbody tr:last-of-type td {
|
padding: 8px 10px !important;
|
||||||
border-bottom: none;
|
}
|
||||||
}
|
table.items-table td,
|
||||||
|
table.tax-table td {
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
thead.table-header {
|
table.info-table td:not(:first-of-type),
|
||||||
background: #f8f8f8;
|
table.items-table td:not(:first-of-type),
|
||||||
}
|
table.tax-table td:not(:first-of-type) {
|
||||||
thead.table-header td {
|
border-left: 1px solid #ededed;
|
||||||
color: #7c7c7c;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
table.info-table tbody tr:last-of-type td,
|
||||||
text-align: center;
|
table.items-table tbody tr:last-of-type td,
|
||||||
}
|
table.tax-table tbody tr:last-of-type td {
|
||||||
.text-left {
|
border-bottom: none;
|
||||||
text-align: left;
|
}
|
||||||
}
|
|
||||||
.text-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.text-muted {
|
|
||||||
color: #7c7c7c;
|
|
||||||
}
|
|
||||||
.text-dark {
|
|
||||||
color: #525252;
|
|
||||||
}
|
|
||||||
.text-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.small-text {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-10 {
|
thead.table-header {
|
||||||
margin-top: 10px;
|
background: #f8f8f8;
|
||||||
}
|
}
|
||||||
.mt-15 {
|
thead.table-header td {
|
||||||
margin-top: 15px;
|
color: #7c7c7c;
|
||||||
}
|
}
|
||||||
.mt-20 {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.mt-40 {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
.mt-80 {
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
.mb-20 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.pb-8 {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.totals-table {
|
.text-center {
|
||||||
border-radius: 5px;
|
text-align: center;
|
||||||
width: 100%;
|
}
|
||||||
}
|
.text-left {
|
||||||
.totals-table td {
|
text-align: left;
|
||||||
padding: 4px 8px;
|
}
|
||||||
}
|
.text-right {
|
||||||
.totals-table tr {
|
text-align: right;
|
||||||
border-bottom: 1px solid #ededed;
|
}
|
||||||
}
|
.text-muted {
|
||||||
.totals-table tr:last-child {
|
color: #7c7c7c;
|
||||||
border-bottom: none;
|
}
|
||||||
}
|
.text-dark {
|
||||||
.totals-table .grand-total td {
|
color: #525252;
|
||||||
padding: 6px 8px;
|
}
|
||||||
font-weight: bold;
|
.text-bold {
|
||||||
}
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.small-text {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.words-box {
|
.mt-10 {
|
||||||
background: #f8f8f8;
|
margin-top: 10px;
|
||||||
border-radius: 8px;
|
}
|
||||||
padding: 8px;
|
.mt-15 {
|
||||||
line-height: 21px;
|
margin-top: 15px;
|
||||||
letter-spacing: 0.21px;
|
}
|
||||||
font-size: small;
|
.mt-20 {
|
||||||
}
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.mt-40 {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.mt-80 {
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.pb-8 {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.info-card {
|
.totals-table {
|
||||||
color: #7c7c7c;
|
border-radius: 5px;
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
|
.totals-table td {
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
.totals-table tr {
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
.totals-table tr:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.totals-table .grand-total td {
|
||||||
|
padding: 6px 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.words-box {
|
||||||
color: #7c7c7c !important;
|
background: #f8f8f8;
|
||||||
}
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
line-height: 21px;
|
||||||
|
letter-spacing: 0.21px;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
.heading {
|
.info-card {
|
||||||
color: #525252 !important;
|
color: #7c7c7c;
|
||||||
font-weight: 300;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.print-format {
|
.title {
|
||||||
color: var(--ink-gray-8, #171717);
|
color: #7c7c7c !important;
|
||||||
font-size: 14px;
|
}
|
||||||
font-style: normal;
|
|
||||||
font-weight: 420;
|
|
||||||
line-height: 21px;
|
|
||||||
padding: 5px;
|
|
||||||
letter-spacing: 0.14px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<table class="info-table mb-20">
|
.heading {
|
||||||
<tr>
|
color: #525252 !important;
|
||||||
<td style="width: 50%">
|
font-weight: 300;
|
||||||
<span class="heading">{{ _("Customer Name") }}:</span> {{doc.customer_name }}
|
}
|
||||||
</td>
|
|
||||||
<td style="width: 50%">
|
|
||||||
<span class="heading">{{ _("Payment Due Date") }}:</span> {{
|
|
||||||
frappe.utils.format_date(doc.due_date) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><span class="heading">{{ _("Invoice Number") }}:</span> {{ doc.name }}</td>
|
|
||||||
<td>
|
|
||||||
<span class="heading">{{ _("Invoice Date") }}:</span> {{
|
|
||||||
frappe.utils.format_date(doc.posting_date) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
{% set address = (doc.address_display) %} {% if address and address.rstrip().endswith("<br />") %} {% set
|
|
||||||
address = address[:-5] %} {% endif %} {% set company_address_display =
|
|
||||||
(doc.company_address_display) %} {% if company_address_display and company_address_display.rstrip().endswith("<br />") %} {%
|
|
||||||
set company_address_display = company_address_display[:-5] %} {% endif %}
|
|
||||||
<td><span class="heading">{{ _("Bill From") }}:</span><br />{{ address }}</td>
|
|
||||||
<td><span class="heading">{{ _("Bill To") }}:</span><br />{{ company_address_display }}</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- Items Table -->
|
.print-format {
|
||||||
<table class="items-table mt-15" style="width: 100%">
|
color: #171717;
|
||||||
<colgroup>
|
font-size: 14px;
|
||||||
<col style="width: 5%" />
|
font-style: normal;
|
||||||
<col style="width: 45%" />
|
font-weight: 420;
|
||||||
<col style="width: 10%" />
|
line-height: 21px;
|
||||||
<col style="width: 20%" />
|
padding: 0px;
|
||||||
<col style="width: 20%" />
|
letter-spacing: 0.14px;
|
||||||
</colgroup>
|
margin-left: 0mm !important;
|
||||||
<thead class="table-header">
|
margin-right: 0mm !important;
|
||||||
|
}
|
||||||
|
.letter-head-footer {
|
||||||
|
margin-top: 0px !important;
|
||||||
|
}
|
||||||
|
.print-heading {
|
||||||
|
margin-top: 0px !important;
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
padding-bottom: 0px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="print-format-body">
|
||||||
|
<table class="info-table mb-20">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-center">{{ _("No") }}</td>
|
<td style="width: 50%">
|
||||||
<td class="text-left">{{ _("Item") }}</td>
|
<span class="heading">{{ _("Customer Name") }}:</span> {{doc.customer_name }}
|
||||||
<td class="text-right">{{ _("Quantity") }}</td>
|
</td>
|
||||||
<td class="text-right">{{ _("Rate") }}</td>
|
<td style="width: 50%">
|
||||||
<td class="text-right">{{ _("Amount") }}</td>
|
<span class="heading">{{ _("Payment Due Date") }}:</span> {{
|
||||||
|
frappe.utils.format_date(doc.due_date) }}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for item in doc.items %}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-center text-dark">{{ loop.index }}</td>
|
<td><span class="heading">{{ _("Invoice Number") }}:</span> {{ doc.name }}</td>
|
||||||
<td>{{ item.item_name }}</td>
|
<td>
|
||||||
<td class="text-right text-dark">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
|
<span class="heading">{{ _("Invoice Date") }}:</span> {{
|
||||||
<td class="text-right text-dark">{{ item.get_formatted("net_rate", doc) }}</td>
|
frappe.utils.format_date(doc.posting_date) }}
|
||||||
<td class="text-right" style="color: #171717">{{ item.get_formatted("net_amount", doc) }}</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
<tr>
|
||||||
</tbody>
|
{% set address = (doc.address_display) %} {% if address and address.rstrip().endswith("<br />")
|
||||||
</table>
|
%} {% set address = address[:-5] %} {% endif %} {% set company_address_display =
|
||||||
|
(doc.company_address_display) %} {% if company_address_display and
|
||||||
|
company_address_display.rstrip().endswith("<br />") %} {% set company_address_display =
|
||||||
|
company_address_display[:-5] %} {% endif %}
|
||||||
|
<td><span class="heading">{{ _("Bill From") }}:</span><br />{{ address }}</td>
|
||||||
|
<td><span class="heading">{{ _("Bill To") }}:</span><br />{{ company_address_display }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
<!-- Totals Section -->
|
<!-- Items Table -->
|
||||||
<div class="row section-break mt-20">
|
<table class="items-table mt-15" style="width: 100%">
|
||||||
<div class="col-xs-7">
|
<colgroup>
|
||||||
<div class="mt-80">
|
<col style="width: 5%" />
|
||||||
<p class="title">{{ _("Total in words") }}</p>
|
<col style="width: 45%" />
|
||||||
<div class="words-box text-uppercase">{{ doc.in_words }}</div>
|
<col style="width: 10%" />
|
||||||
</div>
|
<col style="width: 20%" />
|
||||||
</div>
|
<col style="width: 20%" />
|
||||||
<div class="col-xs-5">
|
</colgroup>
|
||||||
<table class="totals-table">
|
|
||||||
<tr>
|
|
||||||
<td class="text-right text-muted">{{ _("Sub Total:") }}</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("total", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="text-right text-muted">
|
|
||||||
{{ _("Discount") }} ({{ doc.additional_discount_percentage }}%):
|
|
||||||
</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {% if
|
|
||||||
tax_rate > 0 %}
|
|
||||||
<tr>
|
|
||||||
<td class="text-right text-muted">{{ _("Tax") }} ({{ tax_rate }}%):</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("total_taxes_and_charges", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
{% endif %}
|
|
||||||
<tr class="grand-total">
|
|
||||||
<td class="text-right">{{ _("Grand Total:") }}</td>
|
|
||||||
<td class="text-right">{{ doc.get_formatted("grand_total", doc) }}</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tax Breakup -->
|
|
||||||
{% if doc.taxes_and_charges %}
|
|
||||||
<div class="mt-40 pb-8">{{ _("Tax Breakup") }}</div>
|
|
||||||
<div>
|
|
||||||
<table class="tax-table" style="width: 100%">
|
|
||||||
<thead class="table-header">
|
<thead class="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-left">{{ _("HSN/SAC") }}</td>
|
<td class="text-center">{{ _("No") }}</td>
|
||||||
<td class="text-right">{{ _("Taxable Amount") }}</td>
|
<td class="text-left">{{ _("Item") }}</td>
|
||||||
{% for row in doc.taxes %}
|
<td class="text-right">{{ _("Quantity") }}</td>
|
||||||
<td class="text-right">{{ row.description }}</td>
|
<td class="text-right">{{ _("Rate") }}</td>
|
||||||
{% endfor %}
|
<td class="text-right">{{ _("Amount") }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for item in doc.items %}
|
{% for item in doc.items %}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-left">{{ item.gst_hsn_code }}</td>
|
<td class="text-center text-dark">{{ loop.index }}</td>
|
||||||
<td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td>
|
<td>{{ item.item_name }}</td>
|
||||||
{% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100) %}
|
<td class="text-right text-dark">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
|
||||||
<td class="text-right">
|
<td class="text-right text-dark">{{ item.get_formatted("net_rate", doc) }}</td>
|
||||||
({{ (row.rate) }}%) {{ frappe.format_value(tax_amount, {"fieldtype": "Currency"}, doc)
|
<td class="text-right" style="color: #171717">
|
||||||
}}
|
{{ item.get_formatted("net_amount", doc) }}
|
||||||
</td>
|
</td>
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Terms -->
|
<!-- Totals Section -->
|
||||||
{% if doc.terms %}
|
<div class="row section-break mt-20">
|
||||||
<div class="info-card mt-40">
|
<div class="col-xs-7">
|
||||||
<div>{{ _("Terms and Conditions") }}</div>
|
<div class="mt-80">
|
||||||
{{ doc.terms}}
|
<p class="title">{{ _("Total in words") }}</p>
|
||||||
|
<div class="words-box text-uppercase">{{ doc.in_words }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-5">
|
||||||
|
<table class="totals-table">
|
||||||
|
<tr>
|
||||||
|
<td class="text-right text-muted">{{ _("Sub Total:") }}</td>
|
||||||
|
<td class="text-right">{{ doc.get_formatted("total", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-right text-muted">
|
||||||
|
{{ _("Discount") }} ({{ doc.additional_discount_percentage }}%):
|
||||||
|
</td>
|
||||||
|
<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {% if
|
||||||
|
tax_rate > 0 %}
|
||||||
|
<tr>
|
||||||
|
<td class="text-right text-muted">{{ _("Tax") }} ({{ tax_rate }}%):</td>
|
||||||
|
<td class="text-right">{{ doc.get_formatted("total_taxes_and_charges", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
{% endif %}
|
||||||
|
<tr class="grand-total">
|
||||||
|
<td class="text-right">{{ _("Grand Total:") }}</td>
|
||||||
|
<td class="text-right">{{ doc.get_formatted("grand_total", doc) }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tax Breakup -->
|
||||||
|
{% if doc.taxes_and_charges %}
|
||||||
|
<div class="mt-40 pb-8">{{ _("Tax Breakup") }}</div>
|
||||||
|
<div>
|
||||||
|
<table class="tax-table" style="width: 100%">
|
||||||
|
<thead class="table-header">
|
||||||
|
<tr>
|
||||||
|
<td class="text-left">{{ _("HSN/SAC") }}</td>
|
||||||
|
<td class="text-right">{{ _("Taxable Amount") }}</td>
|
||||||
|
{% for row in doc.taxes %}
|
||||||
|
<td class="text-right">{{ row.description }}</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for item in doc.items %}
|
||||||
|
<tr>
|
||||||
|
<td class="text-left">{{ item.gst_hsn_code }}</td>
|
||||||
|
<td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td>
|
||||||
|
{% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100)
|
||||||
|
%}
|
||||||
|
<td class="text-right">
|
||||||
|
({{ (row.rate) }}%) {{ frappe.format_value(tax_amount, {"fieldtype": "Currency"},
|
||||||
|
doc) }}
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Terms -->
|
||||||
|
{% if doc.terms %}
|
||||||
|
<div class="info-card mt-40">
|
||||||
|
<div>{{ _("Terms and Conditions") }}</div>
|
||||||
|
{{ doc.terms}}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
Reference in New Issue
Block a user