Adding Flat Tax support with fixed amount (#253)

* Possibility to set a fixed amount on tax types settings * Pint and manage flat taxes on items * Fix display errors and handle global taxes * Tests * Pint with PHP 8.2 cause with PHP 8.3 version it cause workflow error * Merging percent and fixed amount into one column * Now display the currency on SelectTaxPopup on fixed taxes
2026-04-07 13:41:23 +00:00 · 2025-05-04 02:24:56 +02:00
parent 546f75d3a6
commit bf5b544ca3
22 changed files with 306 additions and 39 deletions
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@@ -19,12 +19,24 @@
      >
        <template #singlelabel="{ value }">
          <div class="absolute left-3.5">
-            {{ value.name }} - {{ value.percent }} %
+            {{ value.name }} - 
+            <template v-if="value.calculation_type === 'fixed'">
+              <BaseFormatMoney :amount="value.fixed_amount" :currency="currency" />
+            </template>
+            <template v-else>
+              {{ value.percent }} %
+            </template>
          </div>
        </template>

        <template #option="{ option }">
-          {{ option.name }} - {{ option.percent }} %
+          {{ option.name }} - 
+          <template v-if="option.calculation_type === 'fixed'">
+            <BaseFormatMoney :amount="option.fixed_amount" :currency="currency" />
+          </template>
+          <template v-else>
+            {{ option.percent }} %
+          </template>
        </template>

        <template v-if="userStore.hasAbilities(ability)" #action>
@@ -146,7 +158,12 @@ const filteredTypes = computed(() => {
 })

 const taxAmount = computed(() => {
-  if (props.discountedTotal && localTax.percent) {
+
+  if(localTax.calculation_type === 'fixed') {
+    return localTax.fixed_amount
+  }
+  
+  if (props.discountedTotal) {
    const taxPerItemEnabled = props.store[props.storeProp].tax_per_item === 'YES'
    const discountPerItemEnabled = props.store[props.storeProp].discount_per_item === 'YES'
    if (taxPerItemEnabled && !discountPerItemEnabled){
@@ -188,7 +205,9 @@ if (props.taxData.tax_type_id > 0) {
 updateRowTax()

 function onSelectTax(val) {
-  localTax.percent = val.percent
+  localTax.calculation_type = val.calculation_type
+  localTax.percent = val.calculation_type === 'percentage' ? val.percent : null
+  localTax.fixed_amount = val.calculation_type === 'fixed' ? val.fixed_amount : null
  localTax.tax_type_id = val.id
  localTax.name = val.name

@@ -232,6 +251,11 @@ function removeTax(index) {
 }

 function getTaxAmount() {
+
+  if (localTax.calculation_type === 'fixed') {
+    return localTax.fixed_amount
+  }
+
  let total = 0
  let discount = 0
  const itemTotal = props.discountedTotal
@@ -250,3 +274,4 @@ function getTaxAmount() {
  return Math.round((props.discountedTotal * localTax.percent) / 100)
 }
 </script>
+
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -50,7 +50,12 @@
        v-else-if="store[storeProp].tax_per_item === 'YES'"
        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
      >
-        {{ tax.name }} - {{ tax.percent }}%
+        <template v-if="tax.calculation_type === 'percentage'">
+          {{ tax.name }} - {{ tax.percent }}%
+        </template>
+        <template v-else>
+          {{ tax.name }} - <BaseFormatMoney :amount="tax.fixed_amount" :currency="defaultCurrency" />
+        </template>
      </label>

      <BaseContentPlaceholders v-if="isLoading">
@@ -269,6 +274,8 @@ const itemWiseTaxes = computed(() => {
            amount: Math.round(tax.amount),
            percent: tax.percent,
            name: tax.name,
+            calculation_type: tax.calculation_type,
+            fixed_amount: tax.fixed_amount
          })
        }
      })
@@ -323,10 +330,12 @@ function selectPercentage() {

 function onSelectTax(selectedTax) {
  let amount = 0
-  if (props.store.getSubtotalWithDiscount && selectedTax.percent) {
+  if (selectedTax.calculation_type === 'percentage' && props.store.getSubtotalWithDiscount && selectedTax.percent) {
    amount = Math.round(
      (props.store.getSubtotalWithDiscount * selectedTax.percent) / 100
    )
+  } else if (selectedTax.calculation_type === 'fixed') {
+    amount = selectedTax.fixed_amount
  }

  let data = {
@@ -336,6 +345,8 @@ function onSelectTax(selectedTax) {
    percent: selectedTax.percent,
    tax_type_id: selectedTax.id,
    amount,
+    calculation_type: selectedTax.calculation_type,
+    fixed_amount: selectedTax.fixed_amount
  }
  props.store.$patch((state) => {
    state[props.storeProp].taxes.push({ ...data })
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -1,8 +1,11 @@
 <template>
  <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-gray-500 uppercase">
      {{ tax.name }} ({{ tax.percent }} %)
    </label>
+    <label v-else class="font-semibold leading-5 text-gray-500 uppercase">
+      {{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
+    </label>
    <label class="flex items-center justify-center text-lg text-black">
      <BaseFormatMoney :amount="tax.amount" :currency="currency" />

@@ -50,6 +53,10 @@ const emit = defineEmits(['update', 'remove'])
 const utils = inject('$utils')

 const taxAmount = computed(() => {
+  if (props.tax.calculation_type === 'fixed') {
+    return props.tax.fixed_amount;
+  }
+  
  if (props.tax.compound_tax && props.store.getSubtotalWithDiscount) {
    return Math.round(
      ((props.store.getSubtotalWithDiscount + props.store.getTotalSimpleTax) *
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -110,7 +110,12 @@
                          cursor-pointer
                        "
                      >
-                        {{ taxType.percent }} %
+                        <template v-if="taxType.calculation_type === 'fixed'">
+                          <BaseFormatMoney :amount="taxType.fixed_amount" :currency="companyStore.selectedCompanyCurrency" />
+                        </template>
+                        <template v-else>
+                          {{ taxType.percent }} %
+                        </template>
                      </label>
                    </div>
                  </div>
@@ -173,7 +178,9 @@ import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import { useCompanyStore } from '@/scripts/admin/stores/company'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'

 const props = defineProps({
  type: {
@@ -195,10 +202,15 @@ const emit = defineEmits(['select:taxType'])
 const modalStore = useModalStore()
 const taxTypeStore = useTaxTypeStore()
 const userStore = useUserStore()
+const companyStore = useCompanyStore()

 const { t } = useI18n()
 const textSearch = ref(null)

+const formatMoney = (amount) => {
+  return companyStore.formatMoney(amount)
+}
+
 const filteredTaxType = computed(() => {
  if (textSearch.value) {
    return taxTypeStore.taxTypes.filter(function (el) {
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -169,7 +169,7 @@ const taxes = computed({
        return {
          ...tax,
          tax_type_id: tax.id,
-          tax_name: tax.name + ' (' + tax.percent + '%)',
+          tax_name: tax.name + ' (' + (tax.calculation_type === 'fixed' ? tax.fixed_amount : tax.percent) + (tax.calculation_type === 'fixed' ? companyStore.selectedCompanyCurrency.symbol : '%') + ')',
        }
      }
    }),
@@ -208,7 +208,17 @@ const v$ = useVuelidate(

 const getTaxTypes = computed(() => {
  return taxTypeStore.taxTypes.map((tax) => {
-    return { ...tax, tax_name: tax.name + ' (' + tax.percent + '%)' }
+    const amount = tax.calculation_type === 'fixed' 
+      ? new Intl.NumberFormat(undefined, {
+          style: 'currency',
+          currency: companyStore.selectedCompanyCurrency.code
+        }).format(tax.fixed_amount / 100)
+      : `${tax.percent}%`
+    
+    return { 
+      ...tax, 
+      tax_name: `${tax.name} (${amount})`
+    }
  })
 })

@@ -229,8 +239,10 @@ async function submitItemData() {
    taxes: itemStore.currentItem.taxes.map((tax) => {
      return {
        tax_type_id: tax.id,
-        amount: (price.value * tax.percent) / 100,
+        amount: tax.calculation_type === 'fixed' ? tax.fixed_amount : (price.value * tax.percent) / 100,
        percent: tax.percent,
+        fixed_amount: tax.fixed_amount,
+        calculation_type: tax.calculation_type,
        name: tax.name,
        collective_tax: 0,
      }
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -34,12 +34,28 @@
          </BaseInputGroup>

          <BaseInputGroup
+            :label="$t('tax_types.tax_type')"
+            variant="horizontal"
+            required
+          >
+            <BaseSelectInput
+              v-model="taxTypeStore.currentTaxType.calculation_type"
+              :options="[
+                { id: 'percentage', label: $t('tax_types.percentage') }, 
+                { id: 'fixed', label: $t('tax_types.fixed_amount') }
+              ]"
+              :allow-empty="false"
+              value-prop="id"
+              label-prop="label"
+              track-by="label"
+              :searchable="false"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-if="taxTypeStore.currentTaxType.calculation_type === 'percentage'"
            :label="$t('tax_types.percent')"
            variant="horizontal"
-            :error="
-              v$.currentTaxType.percent.$error &&
-              v$.currentTaxType.percent.$errors[0].$message
-            "
            required
          >
            <BaseMoney
@@ -51,13 +67,18 @@
                precision: 2,
                masked: false,
              }"
-              :invalid="v$.currentTaxType.percent.$error"
-              class="
-                relative
-                w-full
-                focus:border focus:border-solid focus:border-primary
-              "
-              @input="v$.currentTaxType.percent.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-else
+            :label="$t('tax_types.fixed_amount')"
+            variant="horizontal"
+            required
+          >
+            <BaseMoney
+              v-model="fixedAmount"
+              :currency="defaultCurrency"
            />
          </BaseInputGroup>

@@ -127,6 +148,8 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Guid from 'guid'
 import TaxStub from '@/scripts/admin/stub/abilities'
+import { useCompanyStore } from '@/scripts/admin/stores/company'
+
 import {
  required,
  minLength,
@@ -140,6 +163,8 @@ const taxTypeStore = useTaxTypeStore()
 const modalStore = useModalStore()
 const notificationStore = useNotificationStore()
 const estimateStore = useEstimateStore()
+const companyStore = useCompanyStore()
+const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)

 const { t, tm } = useI18n()
 let isSaving = ref(false)
@@ -154,6 +179,9 @@ const rules = computed(() => {
          minLength(3)
        ),
      },
+      calculation_type: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
      percent: {
        required: helpers.withMessage(t('validation.required'), required),
        between: helpers.withMessage(
@@ -161,6 +189,9 @@ const rules = computed(() => {
          between(-100, 100)
        ),
      },
+      fixed_amount: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
      description: {
        maxLength: helpers.withMessage(
          t('validation.description_maxlength', { count: 255 }),
@@ -198,16 +229,22 @@ async function submitTaxTypeData() {

 function SelectTax(taxData) {
  let amount = 0
- if (estimateStore.getSubtotalWithDiscount && taxData.percent) {
-    amount = Math.round(
-      (estimateStore.getSubtotalWithDiscount * taxData.percent) / 100
-    )
+  if (estimateStore.getSubtotalWithDiscount) {
+    if (taxData.calculation_type === 'percentage') {
+      amount = Math.round(
+        (estimateStore.getSubtotalWithDiscount * taxData.percent) / 100
+      )
+    } else {
+      amount = taxData.fixed_amount
+    }
  }
  let data = {
    ...TaxStub,
    id: Guid.raw(),
    name: taxData.name,
+    calculation_type: taxData.calculation_type,
    percent: taxData.percent,
+    fixed_amount: taxData.fixed_amount,
    tax_type_id: taxData.id,
    amount,
  }
@@ -222,7 +259,9 @@ function selectItemTax(taxData) {
      ...TaxStub,
      id: Guid.raw(),
      name: taxData.name,
+      calculation_type: taxData.calculation_type,
      percent: taxData.percent,
+      fixed_amount: taxData.fixed_amount,
      tax_type_id: taxData.id,
    }
    modalStore.refreshData(data)
@@ -236,4 +275,11 @@ function closeTaxTypeModal() {
    v$.value.$reset()
  }, 300)
 }
+
+const fixedAmount = computed({
+  get: () => taxTypeStore.currentTaxType.fixed_amount / 100,
+  set: (value) => {
+    taxTypeStore.currentTaxType.fixed_amount = Math.round(value * 100)
+  },
+})
 </script>
--- a/resources/scripts/admin/stores/tax-type.js
+++ b/resources/scripts/admin/stores/tax-type.js
@@ -15,7 +15,9 @@ export const useTaxTypeStore = (useWindow = false) => {
      currentTaxType: {
        id: null,
        name: '',
+        calculation_type: 'percentage',
        percent: 0,
+        fixed_amount: 0,
        description: '',
        compound_tax: false,
        collective_tax: 0,
@@ -31,7 +33,9 @@ export const useTaxTypeStore = (useWindow = false) => {
        this.currentTaxType = {
          id: null,
          name: '',
+          calculation_type: 'percentage',
          percent: 0,
+          fixed_amount: 0,
          description: '',
          compound_tax: false,
          collective_tax: 0,
--- a/resources/scripts/admin/views/items/Create.vue
+++ b/resources/scripts/admin/views/items/Create.vue
@@ -184,7 +184,12 @@ const taxes = computed({
        return {
          ...tax,
          tax_type_id: tax.id,
-          tax_name: tax.name + ' (' + tax.percent + '%)',
+          tax_name: `${tax.name} (${tax.calculation_type === 'fixed' 
+            ? new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: companyStore.selectedCompanyCurrency.code
+              }).format(tax.fixed_amount / 100)
+            : `${tax.percent}%`})`,
        }
      }
    }),
@@ -204,7 +209,12 @@ const getTaxTypes = computed(() => {
    return {
      ...tax,
      tax_type_id: tax.id,
-      tax_name: tax.name + ' (' + tax.percent + '%)',
+      tax_name: `${tax.name} (${tax.calculation_type === 'fixed' 
+        ? new Intl.NumberFormat(undefined, {
+            style: 'currency',
+            currency: companyStore.selectedCompanyCurrency.code
+          }).format(tax.fixed_amount / 100)
+        : `${tax.percent}%`})`,
    }
  })
 })
@@ -280,7 +290,9 @@ async function submitItem() {
      data.taxes = itemStore.currentItem.taxes.map((tax) => {
        return {
          tax_type_id: tax.tax_type_id,
-          amount: price.value * tax.percent,
+          calculation_type: tax.calculation_type,
+          fixed_amount: tax.fixed_amount,
+          amount: tax.calculation_type === 'fixed' ? tax.fixed_amount : price.value * tax.percent,
          percent: tax.percent,
          name: tax.name,
          collective_tax: 0,
--- a/resources/scripts/admin/views/settings/TaxTypesSetting.vue
+++ b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
@@ -20,7 +20,20 @@
      :data="fetchData"
      :columns="taxTypeColumns"
    >
-      <template #cell-percent="{ row }"> {{ row.data.percent }} % </template>
+    <template #cell-calculation_type="{ row }">
+      {{ $t(`settings.tax_types.${row.data.calculation_type}`) }}
+    </template>
+    <template #cell-amount="{ row }">
+      <template v-if="row.data.calculation_type === 'percentage'">
+        {{ row.data.percent }} %
+      </template>
+      <template v-else-if="row.data.calculation_type === 'fixed'">
+        <BaseFormatMoney :amount="row.data.fixed_amount" :currency="defaultCurrency" />
+      </template>
+      <template v-else>
+        -
+      </template>
+    </template>

      <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
        <TaxTypeDropdown
@@ -64,9 +77,9 @@ const taxTypeStore = useTaxTypeStore()
 const modalStore = useModalStore()
 const userStore = useUserStore()
 const moduleStore = useModuleStore()
-
 const table = ref(null)
 const taxPerItemSetting = ref(companyStore.selectedCompanySettings.tax_per_item)
+const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)

 const taxTypeColumns = computed(() => {
  return [
@@ -77,8 +90,14 @@ const taxTypeColumns = computed(() => {
      tdClass: 'font-medium text-gray-900',
    },
    {
-      key: 'percent',
-      label: t('settings.tax_types.percent'),
+      key: 'calculation_type',
+      label: t('settings.tax_types.calculation_type'),
+      thClass: 'extra',
+      tdClass: 'font-medium text-gray-900',
+    },
+    {
+      key: 'amount',
+      label: t('settings.tax_types.amount'),
      thClass: 'extra',
      tdClass: 'font-medium text-gray-900',
    },