fix: change UI

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

@@ -5,37 +5,91 @@ import AppBox from 'components/app/AppBox.vue';
 
 <template>
   <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
-    <div class="row q-pa-sm q-col-gutter-md">
+    <div class="q-pa-sm">
-      <div class="col-4">
+      <div class="row flex justify-between text-bold">
-        <div
+        <div class="col-9">ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า</div>
-          class="rounded q-pa-md"
+        <div class="col-3 relative-position" style="left: 10px; bottom: 10px">
-          style="
+          <q-btn
-            border: 1px solid var(--green-10);
+            flat
-            background-color: var(--surface-2);
+            round
-          "
+            padding="sm"
-        >
+            class="absolute-top-right dots-btn app-text-muted"
-          <q-img src="blank-image.png"></q-img>
+            icon="mdi-dots-vertical"
+            style="z-index: 99"
+            size="sm"
+            @click.stop=""
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup>
+                <q-item
+                  clickable
+                  dense
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="$emit('a')"
+                >
+                  <q-icon
+                    name="mdi-eye-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--green-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('viewDetail') }}
+                  </span>
+                </q-item>
+                <q-item
+                  dense
+                  clickable
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="$emit('a')"
+                  v-close-popup
+                >
+                  <q-icon
+                    name="mdi-pencil-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--cyan-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('edit') }}
+                  </span>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </div>
       </div>
-      <div class="col-8">
+      <div class="app-text-muted">AC102</div>
-        <div class="q-pr-sm q-mb-sm">
+      <div class="flex justify-end text-bold" style="color: var(--green-10)">
-          {{ 'ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า' }}
+        ฿ 1,200.00
+      </div>
+      <div
+        class="flex justify-center rounded items-center q-my-md q-py-lg"
+        style="background-color: var(--stone-3)"
+      >
+        <q-img
+          src="shop-image.png"
+          style="height: 86px; max-width: 100px"
+        ></q-img>
+      </div>
+      <div class="row justify-between items-center q-mb-xs">
+        <div>
+          <q-icon
+            name="mdi-clock-outline surface-0 rounded q-pa-xs app-text-muted"
+            size="20px"
+          />
+          14 วัน
         </div>
-        <div class="row justify-between q-mb-xs">
+        <div>
-          <div
+          <q-btn
-            class="q-px-sm row items-center justify-between rounded hover-item text-white"
+            unelevated
-            style="background-color: var(--blue-6)"
+            class="surface-0 q-mr-sm"
-            @click.stop="$emit('viewDetail')"
+            label="เพิ่มสินค้า"
-          >
+            @click="console.log('add')"
-            {{ 'AC103' }}
+            style="color: var(--blue-5)"
-          </div>
+          />
-          <div class="text-bold" style="color: var(--green-9)">
-            {{ '฿1,200.00' }}
-          </div>
-        </div>
-        <div class="row justify-between app-text-muted">
-          <div>ระยะเวลาในการดำเนินการ</div>
-          <div>14 วัน</div>
         </div>
       </div>
     </div>

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

@@ -5,11 +5,12 @@ import TotalProductCardComponent from 'components/04_product-service/TotalProduc
 <template>
   <AppBox
     class="row"
-    bordered
+    no-padding
     style="
       width: 75vw;
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+
+      grid-template-columns: repeat(4, 1fr);
       gap: var(--size-3);
     "
   >