fix(05): product item table

src/components/05_quotation/ProductItem.vue

@@ -123,7 +123,7 @@ const columns = [
       @delete="(i) => $emit('delete', i)"
     >
       <template v-slot:body-cell-name="{ props }">
-        <div>
+        <q-td>
           <q-avatar class="q-mr-sm" size="md">
             <q-icon
               class="full-width full-height"
@@ -132,7 +132,7 @@ const columns = [
             />
           </q-avatar>
           {{ props.row.product.name }}
-        </div>
+        </q-td>
       </template>
 
       <template v-slot:body-cell-amount="{ props }">
@@ -155,6 +155,8 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
+            readonly
+            class="bordered rounded"
             min="0"
             v-model="props.row.pricePerUnit"
           />
@@ -180,18 +182,28 @@ const columns = [
 
       <template v-slot:body-cell-tax="{ props }">
         <q-td align="center">
-          <q-input
-            dense
-            min="0"
-            outlined
-            type="number"
-            style="width: 70px"
-            v-model="props.row.vat"
-          >
-            <template v-slot:append>
-              <span class="text-caption no-padding">%</span>
-            </template>
-          </q-input>
+          <div class="row justify-around items-center">
+            <q-checkbox
+              :model-value="Number(props.row.vat) === 7"
+              size="xs"
+              :label="$t('quotation.calTax')"
+              @click="props.row.vat ? (props.row.vat = 0) : (props.row.vat = 7)"
+            />
+            <q-input
+              dense
+              min="0"
+              outlined
+              type="number"
+              readonly
+              class="bordered rounded"
+              style="width: 70px"
+              v-model="props.row.vat"
+            >
+              <template v-slot:append>
+                <span class="text-caption no-padding">%</span>
+              </template>
+            </q-input>
+          </div>
         </q-td>
       </template>
 
@@ -216,18 +228,12 @@ const columns = [
         />
       </template>
     </TableComponents>
-    <q-checkbox
-      v-model="calTax"
-      class="q-pt-md"
-      size="xs"
-      :label="$t('quotation.calTax')"
-    />
     <div
-      class="column q-ml-auto text-caption app-text-muted"
+      class="column q-ml-auto text-caption app-text-muted q-pt-md"
       style="width: 15vw"
     >
       <div class="row">
-        {{ $t('quotation.price') }}
+        {{ $t('quotation.allProductPrice') }}
         <span class="q-ml-auto">{{ summary.totalPrice }} ฿</span>
       </div>
       <div class="row">
@@ -240,7 +246,7 @@ const columns = [
       </div>
       <q-separator spaced="md" />
       <div class="row text-bold text-body2" style="color: var(--foreground)">
-        Total Price
+        {{ $t('quotation.totalPrice') }}
         <span class="q-ml-auto">{{ summary.finalPrice }} ฿</span>
       </div>
     </div>

src/components/05_quotation/QuotationCard.vue

@@ -101,7 +101,7 @@ defineEmits<{
         icon="ph:money-fill"
         style="font-size: 24px; color: var(--green-9)"
       />
-      {{ $t('quotation.totalPrice') }} :
+      {{ $t('quotation.totalPriceBaht') }} :
       <div class="q-pl-xs" style="color: var(--orange-5)">
         {{ formatNumberDecimal(totalPrice || 0, 2) }}
       </div>

src/components/TableComponents.vue

@@ -86,44 +86,46 @@ defineEmits<{
     </template>
 
     <template v-slot:body-cell-action="props">
-      <q-td class="text-center row items-center">
-        <slot name="button" :props="props"></slot>
-        <DeleteButton
-          iconOnly
-          v-if="buttonDelete"
-          @click="$emit('delete', props.rowIndex)"
-        />
+      <q-td>
+        <div class="row items-center full-width justify-end">
+          <slot name="button" :props="props"></slot>
+          <DeleteButton
+            iconOnly
+            v-if="buttonDelete"
+            @click="$emit('delete', props.rowIndex)"
+          />
 
-        <q-btn
-          v-if="!buttonDelete"
-          icon="mdi-eye-outline"
-          size="sm"
-          dense
-          round
-          flat
-          @click.stop="$emit('view', props.rowIndex)"
-        />
+          <q-btn
+            v-if="!buttonDelete"
+            icon="mdi-eye-outline"
+            size="sm"
+            dense
+            round
+            flat
+            @click.stop="$emit('view', props.rowIndex)"
+          />
 
-        <q-btn
-          v-if="buttomDownload && props.row.id !== undefined"
-          icon="mdi-download-outline"
-          size="sm"
-          dense
-          round
-          flat
-          @click.stop="$emit('download', props.rowIndex)"
-        />
+          <q-btn
+            v-if="buttomDownload && props.row.id !== undefined"
+            icon="mdi-download-outline"
+            size="sm"
+            dense
+            round
+            flat
+            @click.stop="$emit('download', props.rowIndex)"
+          />
 
-        <KebabAction
-          v-if="!buttonDelete"
-          hide-toggle
-          :id-name="props.row.code"
-          :status="props.row.status"
-          @view="$emit('view', props.rowIndex)"
-          @edit="$emit('edit', props.rowIndex)"
-          @delete="$emit('delete', props.rowIndex)"
-          @change-status="$emit('toggleStatus', props.row)"
-        />
+          <KebabAction
+            v-if="!buttonDelete"
+            hide-toggle
+            :id-name="props.row.code"
+            :status="props.row.status"
+            @view="$emit('view', props.rowIndex)"
+            @edit="$emit('edit', props.rowIndex)"
+            @delete="$emit('delete', props.rowIndex)"
+            @change-status="$emit('toggleStatus', props.row)"
+          />
+        </div>
       </q-td>
 
       <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>