feat(04): product expense type and vat

public/option/option.json

@@ -854,6 +854,21 @@
         "label": "Certificate of Identity",
         "value": "ci"
       }
+    ],
+
+    "expenseType": [
+      {
+        "label": "Service Fee",
+        "value": "serviceFee"
+      },
+      {
+        "label": "Fee",
+        "value": "fee"
+      },
+      {
+        "label": "Processing Fee",
+        "value": "processingFee"
+      }
     ]
   },
 
@@ -1712,6 +1727,21 @@
         "label": "เอกสารสำคัญประจำตัวเพื่อใช้แทนหนังสือเดินทาง",
         "value": "ci"
       }
+    ],
+
+    "expenseType": [
+      {
+        "label": "ค่าบริการ",
+        "value": "serviceFee"
+      },
+      {
+        "label": "ค่าธรรมเนียม",
+        "value": "fee"
+      },
+      {
+        "label": "ค่าดำเนินการ",
+        "value": "processingFee"
+      }
     ]
   }
 }

src/components/04_product-service/BasicInfoProduct.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { QSelect } from 'quasar';
 import { getRole } from 'src/services/keycloak';
+import useOptionStore from 'src/stores/options';
 import { selectFilterOptionRefMod } from 'stores/utils';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { locale } = useI18n({ useScope: 'global' });
 
+const optionStore = useOptionStore();
+
 const remark = defineModel<string>('remark', { default: '' });
 const detail = defineModel<string>('detail', { default: '' });
 const process = defineModel<number>('process');
 const name = defineModel<string>('name');
 const code = defineModel<string>('code');
-
+const expenseType = defineModel<string>('expenseType');
 const registeredBranchId = defineModel<string>('registeredBranchId');
+
 const codeOption = ref<{ id: string; name: string }[]>([]);
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -48,6 +52,33 @@ const branchFilter = selectFilterOptionRefMod(
   branchOptions,
   'name',
 );
+
+const expenseTypeOptions = ref<Record<string, unknown>[]>([]);
+let expenseTypeFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  if (optionStore.globalOption) {
+    expenseTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.expenseType),
+      expenseTypeOptions,
+      'label',
+    );
+  }
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    expenseTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.expenseType),
+      expenseTypeOptions,
+      'label',
+    );
+  },
+);
 </script>
 
 <template>
@@ -170,7 +201,16 @@ const branchFilter = selectFilterOptionRefMod(
         :label="$t('productService.product.processingTime')"
         v-model="process"
         type="number"
-      />
+      >
+        <template #prepend>
+          <q-icon
+            color="primary"
+            name="mdi-clock-outline"
+            size="xs"
+            class="q-mr-xs"
+          />
+        </template>
+      </q-input>
       <!-- <q-input
         lazy-rules="ondemand"
         for="input-detail"
@@ -184,6 +224,37 @@ const branchFilter = selectFilterOptionRefMod(
         :label="$t('serviceDetail')"
         v-model="detail"
       /> -->
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        class="col-md-3 col-6"
+        v-model="expenseType"
+        id="select-br-id"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        :dense="dense"
+        :readonly="readonly"
+        :options="expenseTypeOptions"
+        :label="$t('productService.product.expenseType')"
+        :hide-dropdown-icon="readonly"
+        @filter="expenseTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('general.noData') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
 
       <div class="col-12">
         <q-field

src/components/04_product-service/PriceDataComponent.vue

@@ -2,6 +2,7 @@
 const serviceCharge = defineModel<number>('serviceCharge');
 const agentPrice = defineModel<number>('agentPrice');
 const price = defineModel<number>('price');
+const vatIncluded = defineModel<boolean>('vatIncluded');
 
 withDefaults(
   defineProps<{
@@ -38,6 +39,36 @@ withDefaults(
         style="background-color: var(--surface-3)"
       />
       {{ $t('productService.product.priceInformation') }}
+
+      <div
+        class="surface-3 q-px-sm q-py-xs row text-caption q-ml-md app-text-muted"
+        style="border-radius: var(--radius-3)"
+      >
+        <span
+          id="btn-include-vat"
+          class="q-px-sm q-mr-lg rounded cursor-pointer"
+          :class="{
+            dark: $q.dark.isActive,
+            'active-addr': vatIncluded,
+            'cursor-not-allowed': readonly,
+          }"
+          @click="readonly ? '' : (vatIncluded = true)"
+        >
+          {{ $t('productService.product.vatIncluded') }}
+        </span>
+        <span
+          id="btn-no-include-vat"
+          class="q-px-sm rounded cursor-pointer"
+          :class="{
+            dark: $q.dark.isActive,
+            'active-addr': !vatIncluded,
+            'cursor-not-allowed': readonly,
+          }"
+          @click="readonly ? '' : (vatIncluded = false)"
+        >
+          {{ $t('productService.product.vatExcluded') }}
+        </span>
+      </div>
     </div>
     <div class="col-12 row q-col-gutter-sm">
       <q-input
@@ -85,4 +116,14 @@ withDefaults(
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.active-addr {
+  color: hsl(var(--info-bg));
+  background-color: hsla(var(--info-bg) / 0.1);
+  border-radius: var(--radius-3);
+
+  &.dark {
+    background-color: var(--surface-1);
+  }
+}
+</style>

src/i18n/eng/index.ts

@@ -509,6 +509,10 @@ export default {
       salePrice: 'Sale Price',
       agentPrice: 'Agent Price',
       processingPrice: 'Processing Price',
+      expenseType: 'Expense Type',
+      vatIncluded: 'Include VAT',
+      vatExcluded: 'Exclude VAT',
+      vat: 'VAT',
     },
   },
 

src/i18n/tha/index.ts

@@ -507,6 +507,10 @@ export default {
       salePrice: 'ราคาขาย',
       agentPrice: 'ราคาตัวแทน',
       processingPrice: 'ราคาดำเนินการ',
+      expenseType: 'ประเภทค่าใช้จ่าย',
+      vatIncluded: 'รวม VAT',
+      vatExcluded: 'ไม่รวม VAT',
+      vat: 'คำนวณ VAT',
     },
   },