From d98a250a76762547bb250c24ced735c8db26267f Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 11 Jun 2024 15:12:33 +0700
Subject: [PATCH] feat: total product UI

---
 public/blank-image.png                        | Bin 0 -> 731 bytes
 .../TotalProductCardComponent.vue             |  45 ++++++++++++++++++
 .../TotalProductComponent.vue                 |  20 ++++++++
 src/components/ItemCard.vue                   |   2 +
 4 files changed, 67 insertions(+)
 create mode 100644 public/blank-image.png
 create mode 100644 src/components/04_product-service/TotalProductCardComponent.vue
 create mode 100644 src/components/04_product-service/TotalProductComponent.vue

diff --git a/public/blank-image.png b/public/blank-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..08bb3fc5be650306b63e5b8ccaacadd6b41df66a
GIT binary patch
literal 731
zcmeAS@N?(olHy`uVBq!ia0vp^X&}tO3?%s&MFM~nV{wqX6XVU3I`u#fXMsm#F#`j)
zFbFd;%$g$s6l@Ie32_C|1_c2?WK<YxR2*(x9Bxz;Zcq?mP#R@i9A;7wVOSUj6f`JE
zFf9!=C<!qt3N<JQ1xi6wniNF<bpf>)7e|-?)t5vV7lu0kO)CnssE9Bs0&>HQO2P~Z
zLV#Mp=7)h5gDe6fi-L#-^N?_$BeY9`{DK)21SY)yKVQKh-eJLh0Rx8wgMjx14eReO
zINvZqpg|#FLA}HJ`|tbb-(RngZ>;hh=*c~vE{-7;bKc&F^*>}F!uFu-B9C*21*bso
z3$b;7{?{MlUaZuq=HhyUKP2Ez`tgYKFOzy_Z4cjIT5IuocbRjSe5MeOgh9fA21aH!
z5aUa%-5TS*Dc;8>8n5<wYx{1)$DE0U&tLvLt6uH%*Hn1<wHe2{Kc!|Tb>9rr52^ig
ze5P!voz(Vi5*t^aIbJi-`e{e&19RKUyZr6V+%1=ss_!xUKTkF9{5xN!xTk&Xp5NWx
zG_5$ArmwX~xBb<{9jD$sEjL`WJ?8SVtum8z`S`wX3cbZ)<@w@<x3lQ6^I4CV?O_tu
zFh1nlX!+ReD%T86gY+q(zgK?@N;soYo^zu@(;#(9uU_67kr_sF4=q?DB4PAzLq*SI
zrdccBo_73{AiPF);zXuNoa&D=1p20&FS^$1$9U4^XRlk-$)Z~?L;`xG&#$jHEdG_Q
zIv2?E2|MtxvNGO?mF2OKxt<m)OR$-A>wM=W4HY|5-yd?}y1~EQMLB3e>W`xVniq`z
zB(Y3nl1&cc0g}Z9xraKocb$2~m)7~xcGjLtEb5|?54ZZ?^!lH8Hta}pi^Vf7VcAc!
m|J5--!WbObXZEMsF~0kdlYaY}>?&aNGkCiCxvX<aXaWGD`X;mh

literal 0
HcmV?d00001

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
new file mode 100644
index 00000000..70ba2036
--- /dev/null
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import AppBox from 'components/app/AppBox.vue';
+</script>
+
+<template>
+  <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
+    <div class="row q-pa-sm q-col-gutter-md">
+      <div class="col-4">
+        <div
+          class="rounded q-pa-md"
+          style="
+            border: 1px solid var(--green-10);
+            background-color: var(--surface-2);
+          "
+        >
+          <q-img src="blank-image.png"></q-img>
+        </div>
+      </div>
+      <div class="col-8">
+        <div class="q-pr-sm q-mb-sm">
+          {{ 'ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า' }}
+        </div>
+        <div class="row justify-between q-mb-xs">
+          <div
+            class="q-px-sm row items-center justify-between rounded hover-item text-white"
+            style="background-color: var(--blue-6)"
+            @click.stop="$emit('viewDetail')"
+          >
+            {{ 'AC103' }}
+          </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>
+  </AppBox>
+</template>
+
+<style scoped></style>
diff --git a/src/components/04_product-service/TotalProductComponent.vue b/src/components/04_product-service/TotalProductComponent.vue
new file mode 100644
index 00000000..836a2aac
--- /dev/null
+++ b/src/components/04_product-service/TotalProductComponent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
+</script>
+<template>
+  <AppBox
+    class="row"
+    bordered
+    style="
+      width: 75vw;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--size-3);
+    "
+  >
+    <div v-for="i in 12" :key="i">
+      <TotalProductCardComponent />
+    </div>
+  </AppBox>
+</template>
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index c60abaf8..05b96579 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -5,6 +5,7 @@ defineProps<{
   icon: string;
   text: string;
   color: string;
+  changeColor?: boolean;
 }>();
 </script>
 
@@ -26,6 +27,7 @@ defineProps<{
           :icon="icon"
           width="64px"
           :class="`${$q.dark.isActive ? '' : 'app-text-muted'}`"
+          :color="changeColor ? color : ''"
         />
       </div>
       <div