From 47d2c7757c911974855b18308c31555672481d19 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:51:57 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20layout=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20=20=E0=B8=AA=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=84=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TotalProductCardComponent.vue             | 69 ++++++++-----------
 1 file changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 53c6d51f..95867f30 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
-
 import { dateFormat } from 'src/utils/datetime';
 
+import { formatNumberDecimal } from 'src/stores/utils';
+
 const addedProduct = ref<boolean>(false);
 
 import {
@@ -149,61 +150,45 @@ withDefaults(
             class="bordered q-pa-xs row surface-0"
             style="font-size: 12px; border-radius: 5px; width: 80px"
           >
-            <div class="col">งาน</div>
+            <div class="col ellipsis-2-lines">งาน</div>
             <q-space />
             <div class="col text-center">0</div>
           </div>
         </div>
 
-        <div
-          v-if="data?.type === 'product'"
-          class="row q-gutter-x-md flex justify-end"
-        >
-          <div class="column text-right" style="height: 25px">
-            <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
-            >
-              ราคาขาย
-            </div>
-            <div
-              class="col text-weight-bold"
-              style="font-size: 16px; color: hsl(var(--orange-5-hsl))"
-            >
-              ฿{{ data?.price }}.00
-            </div>
+        <div v-if="data?.type === 'product'" class="flex">
+          <div
+            class="row full-width text-right"
+            style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
+          >
+            <div class="col-4">ราคาขาย</div>
+            <div class="col-4">ราคาตัวแทน</div>
+            <div class="col-4">ราคาค่าดำเนินการ</div>
           </div>
 
-          <div class="column text-right" style="height: 25px">
+          <div
+            class="row full-width text-right items-center"
+            style="margin-top: -5px"
+          >
             <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
+              class="col-4 text-weight-bold"
+              style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
             >
-              ราคาตัวแทน
+              ฿{{ formatNumberDecimal(data?.price, 2) }}
             </div>
             <div
-              class="col text-weight-bold"
-              style="font-size: 16px; color: hsl(var(--purple-9-hsl))"
+              class="col-4 text-weight-bold"
+              style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
             >
-              ฿{{ data?.agentPrice }}.00
+              ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
+            </div>
+            <div
+              class="col-4"
+              style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
+            >
+              ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
             </div>
           </div>
-          <div class="column text-right" style="height: 25px">
-            <div
-              class="col"
-              style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
-            >
-              ราคาค่าดำเนินการ
-            </div>
-            <div
-              class="col"
-              style="font-size: 16px; color: hsl(var(--pink-7-hsl))"
-            >
-              ฿{{ data?.serviceCharge }}.00
-            </div>
-          </div>
-
-          <!-- ฿ {{ data?.price }} -->
         </div>
 
         <div