fix: sum price, vat, amount info

src/pages/05_quotation/QuotationFormInfo.vue

@@ -7,11 +7,13 @@ import { useI18n } from 'vue-i18n';
 
 import { formatNumberDecimal } from 'stores/utils';
 
+import { useConfigStore } from 'stores/config';
 import AppBox from 'components/app/AppBox.vue';
 import DatePicker from 'src/components/shared/DatePicker.vue';
 import SelectInput from 'src/components/shared/SelectInput.vue';
 
 import useOptionStore from 'src/stores/options';
+import { storeToRefs } from 'pinia';
 
 defineProps<{
   readonly?: boolean;
@@ -25,6 +27,8 @@ defineProps<{
 }>();
 
 const { t } = useI18n();
+const configStore = useConfigStore();
+const { data: config } = storeToRefs(configStore);
 
 const urgent = defineModel<boolean>('urgent', {
   required: true,
@@ -67,6 +71,7 @@ const summaryPrice = defineModel<{
 
 const optionStore = useOptionStore();
 
+const finalDiscount = ref<number>(0);
 const payTypeOpion = ref([
   {
     value: 'Full',
@@ -421,11 +426,21 @@ watch(
     <div class="q-pa-sm">
       <div class="row">
         {{ $t('general.total') }}
-        <span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
+        <span class="q-ml-auto">
+          {{
+            formatNumberDecimal(
+              summaryPrice.finalPrice + Number(finalDiscount),
+              2,
+            ) || 0
+          }}
+          ฿
+        </span>
       </div>
       <div class="row">
-        {{ $t('general.discount') }}
-        <span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
+        {{ $t('quotation.discountList') }}
+        <span class="q-ml-auto">
+          {{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
+        </span>
       </div>
       <div class="row">
         {{ $t('general.totalAfterDiscount') }}
@@ -436,15 +451,35 @@ watch(
         <span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
       </div>
       <div class="row">
-        {{ $t('general.totalVatIncluded') + ' 7%' }}
+        {{ $t('general.totalVatIncluded') }}
         <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
       </div>
+      <div class="row">
+        {{
+          $t('general.vat', {
+            msg: `${config && Math.round(config.vat * 100)}%`,
+          })
+        }}
+        <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
+      </div>
+      <div class="row">
+        {{ $t('general.discountAfterVat') }}
+        <q-input
+          dense
+          outlined
+          class="q-ml-auto price-tag"
+          input-class="text-right"
+          v-model="finalDiscount"
+        />
+        <!-- <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span> -->
+      </div>
     </div>
     <div class="q-pa-sm row surface-2 items-center text-weight-bold">
       {{ $t('general.totalAmount') }}
 
       <span class="q-ml-auto" style="color: var(--brand-1)">
-        {{ data?.totalVatIncluded || 0 }} ฿
+        {{ formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0 }}
+        ฿
       </span>
     </div>
   </AppBox>
@@ -461,6 +496,13 @@ watch(
   border-radius: var(--radius-2);
 }
 
+:deep(.price-tag .q-field__control) {
+  display: flex;
+  align-items: center;
+  width: 90px;
+  height: 25px;
+}
+
 .bg-color-orange {
   --_color: var(--yellow-7-hsl);
   color: white;