Different Base Price on VAT

1

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

2

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.

image
image366Ă—265 7.91 KB

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

3 Likes
3

Try this

Create New TaxCode

image
image670Ă—287 7.29 KB

Create New Footer for Sales Invoice and paste this script

<script id="script-wrapper">
    document.addEventListener("DOMContentLoaded", processSubtotal);

    function processSubtotal() {
        // Cari semua sel di kolom pertama yang mungkin mengandung "Subtotal" atau "Sub-total"
        const subtotalCell = [...document.querySelectorAll("tbody td:first-child")]
            .find(td => ["subtotal", "sub-total"].includes(td.textContent.trim().toLowerCase()));

        if (!subtotalCell) return;

        // Ambil baris tempat Subtotal ditemukan
        const firstSubtotalRow = subtotalCell.closest("tr");
        const subtotalValueCell = firstSubtotalRow.querySelector("td[data-value]") || firstSubtotalRow.querySelector("td:last-child");

        if (!subtotalValueCell) return;

        // Ambil nilai Subtotal
        const rawValue = subtotalValueCell.dataset.value || subtotalValueCell.textContent.trim();
        const isIdLocale = /,\d{2}$/.test(rawValue);
        const isEnLocale = /\.\d{2}$/.test(rawValue);

        let subtotalValue = isIdLocale 
            ? parseFloat(rawValue.replace(/\./g, "").replace(",", ".")) 
            : parseFloat(rawValue.replace(/,/g, ""));

        if (isNaN(subtotalValue) || subtotalValue === 0) return;

        // Hitung DPP Nilai Lain
        let dppNilaiLain = Math.round((11 / 12) * subtotalValue * 100) / 100;

        // Hapus DPP Nilai Lain sebelumnya jika sudah ada
        const existingDppRow = [...document.querySelectorAll("tbody td:first-child")]
            .find(td => td.textContent.trim().toLowerCase() === "dpp nilai lain");

        if (existingDppRow) existingDppRow.closest("tr").remove();

        // Kloning baris Subtotal dan ubah menjadi DPP Nilai Lain
        const dppRow = firstSubtotalRow.cloneNode(true);
        const dppLabelCell = dppRow.querySelector("td[colspan]") || dppRow.querySelector("td:first-child");
        const dppValueCell = dppRow.querySelector("td[data-value]") || dppRow.querySelector("td:last-child");

        if (!dppLabelCell || !dppValueCell) return;

        dppLabelCell.textContent = "DPP Nilai Lain";
        const includeCurrencySymbol = subtotalValueCell.textContent.trim().includes("Rp");

        // Format angka sesuai locale
        const numberFormatter = new Intl.NumberFormat(isIdLocale ? "id-ID" : "en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        dppValueCell.textContent = includeCurrencySymbol
            ? `Rp ${numberFormatter.format(dppNilaiLain)}`
            : numberFormatter.format(dppNilaiLain);

        dppValueCell.setAttribute("data-value", dppNilaiLain.toFixed(2).replace(".", isIdLocale ? "," : "."));

        // Sisipkan baris setelah Subtotal pertama
        firstSubtotalRow.insertAdjacentElement("afterend", dppRow);

        // Hapus script setelah eksekusi
        document.getElementById("script-wrapper")?.remove();
    }
</script>

Add Footer to Sales Invoice

image
image1625Ă—793 24.6 KB

Result

image
image836Ă—284 6.05 KB

Script Updated to support :

  • Business data without Base Currency,
  • Sales with Witolding Tax,
  • Indonesian and English Language,
  • en_US and id_ID Number Format,
2 Likes
4

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

5

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>
1 Like