Hello,
On usual VAT transaction :
Base price = 1000
VAT 11% = 110
Total = 1110
But now our country has new rule :
Price = 1000
Adjusted Base price for tax = 1000 x 11/12 = 916,67
VAT 12% = 110
Total = 1110
How to accomodate this adjusted based price for tax on Manager Sales Invoice?
Thanks
I created it with a custom theme. I created a tax code with the label VAT 12%, but the percentage still uses the 11%, so the VAT will still have the same result with the “Sales Price x 11/12 x VAT 12%” formula.
You can create it like this in the custom theme.,custom field, or footer. You can see the example from this post by @Mabaega "Adding Retention Field and Balance in Invoice Footer" - #7 by Mabaega
Try this
Create New TaxCode
Create New Footer for Sales Invoice and paste this script
<script id="script-wrapper">
document.addEventListener('DOMContentLoaded', () => {
// Cari semua baris di tabel
const rows = document.querySelectorAll('tbody tr');
// Temukan baris Subtotal berdasarkan teks "Subtotal"
let subtotalRow = null;
rows.forEach((row) => {
const cells = row.querySelectorAll('td');
cells.forEach((cell) => {
if (cell.textContent.trim() === 'Subtotal') {
subtotalRow = row;
}
});
});
if (!subtotalRow) {
console.error('Subtotal row not found.');
return;
}
// Ambil nilai Subtotal
const subtotalValueCell = subtotalRow.querySelector('td[data-value]');
if (!subtotalValueCell) {
console.error('Subtotal value cell not found.');
return;
}
const subtotalValue = parseFloat(
subtotalValueCell.dataset.value.replace(/\./g, '').replace(',', '.') || 0
);
if (isNaN(subtotalValue)) {
console.error('Invalid Subtotal value.');
return;
}
// Hitung DPP Nilai Lain (11/12 * Subtotal)
const dppNilaiLain = (11 / 12) * subtotalValue;
// Kloning baris Subtotal
const dppRow = subtotalRow.cloneNode(true);
// Perbarui teks untuk DPP Nilai Lain
const dppLabelCell = dppRow.querySelector('td[colspan]');
const dppValueCell = dppRow.querySelector('td[data-value]');
if (!dppLabelCell || !dppValueCell) {
console.error('Failed to clone or find cells.');
return;
}
dppLabelCell.textContent = 'DPP Nilai Lain';
dppValueCell.textContent = `Rp ${dppNilaiLain.toLocaleString('id-ID', {
minimumFractionDigits: 2,
})}`;
dppValueCell.setAttribute(
'data-value',
dppNilaiLain.toLocaleString('id-ID', { useGrouping: false })
);
// Sisipkan baris DPP Nilai Lain setelah Subtotal
subtotalRow.parentNode.insertBefore(dppRow, subtotalRow.nextSibling);
// Hapus script setelah selesai
const scriptWrapper = document.getElementById('script-wrapper');
if (scriptWrapper) {
scriptWrapper.remove();
}
});
</script>
Add Footer to Sales Invoice
Result
This is super helpful, thanks! I have tried it on footer and it works.
However, I have a custom theme, which mainly just edited the column header’s color. If I activated the theme then the footer doesn’t work.
Do theme and footer block each other code? I have tried to put the script code into the theme code, but only the theme code is working and the footer’s code result doesn’t appear
You don’t need a footer if you’re using a custom theme.
Let’s try this script for the default custom themes.
Replace this part
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
Become
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus: 1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">
{{ total.label }}
</td>
<td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">
{{ total.text }}
</td>
</tr>
{% if total.label == 'Subtotal' %}
{% assign subtotal_value = total.number %}
{% assign dpp_value = subtotal_value | times: 11 | divided_by: 12 %}
<tr id="dpp-row">
<td colspan="{{ table.columns | size | minus: 1 }}" style="text-align: end; padding: 5px 10px">
DPP Nilai Lain
</td>
<td id="dpp-value" data-value="{{ dpp_value }}" style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px">
<!-- This will be populated with formatted value by JavaScript -->
Rp {{ dpp_value | round: 2 }}
</td>
</tr>
{% endif %}
{% endfor %}
<script id="format-dpp-script">
document.addEventListener('DOMContentLoaded', () => {
// Function to format the number to 'id-ID' locale currency format
const formatCurrency = (number) => {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 2
}).format(number).replace('Rp', '').trim(); // Remove the 'Rp' sign
};
// Format DPP Nilai Lain value after the page loads
const dppValueCell = document.getElementById('dpp-value');
if (dppValueCell) {
const rawDppValue = parseFloat(dppValueCell.getAttribute('data-value'));
const formattedDppValue = formatCurrency(rawDppValue);
dppValueCell.textContent = `Rp ${formattedDppValue}`; // Set the formatted value
}
// Remove the specific script element after execution
const scriptElement = document.getElementById('format-dpp-script');
if (scriptElement) {
scriptElement.remove();
}
});
</script>