feat: UI Customer Detail 2 (more detail + i18n)

src/components/03_customer-management/CustomerInfoComponent.vue

@@ -17,7 +17,7 @@ withDefaults(
 
 <template>
   <AppBox no-padding bordered>
-    <div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
+    <div class="row no-wrap justify-between bordered-b surface-2">
       <div class="row items-center">
         <q-btn
           round
@@ -28,8 +28,8 @@ withDefaults(
           class="q-mr-md"
         />
         <q-card-section
-          class="q-pa-sm q-pt-md bg-green q-mr-md"
-          style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
+          class="q-pa-sm q-pt-md bg-green q-mr-md q-mb-sm"
+          style="border-radius: 0 0 40px 40px; position: relative"
         >
           <q-avatar no-padding size="50px">
             <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
@@ -37,23 +37,27 @@ withDefaults(
         </q-card-section>
         <div>
           <div>นายสุขใจ แสนดี</div>
-          <div class="flex items-center">
+          <div class="row items-center">
             <i
               class="isax isax-frame5"
               style="font-size: 1rem; color: var(--stone-6)"
             />
-            {{ '10' }}
+            <div class="q-px-sm">
+              {{ '10' }}
+            </div>
             <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
-            {{ '2' }}
+            <div class="q-px-sm">
+              {{ '2' }}
+            </div>
           </div>
         </div>
       </div>
-      <div class="row items-center">
+      <div class="row items-center q-pa-md">
         <q-btn
           id="btn-add-customer"
           dense
           unelevated
-          :label="'+ ' + $t('customerAdd')"
+          :label="'+ ' + $t('formDialogTitleCreateSubBranch')"
           padding="4px 16px"
           @click="console.log('add')"
           style="background-color: var(--cyan-6); color: white"
@@ -63,7 +67,7 @@ withDefaults(
           style="width: 250px"
           outlined
           dense
-          label="ค้นหา"
+          :label="$t('search')"
           class="q-mr-lg"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearch"
@@ -72,6 +76,8 @@ withDefaults(
         <q-btn
           icon="mdi-tune-vertical-variant"
           size="sm"
+          :color="$q.dark.isActive ? 'dark' : 'white'"
+          :text-color="$q.dark.isActive ? 'white' : 'dark'"
           class="bordered rounded"
           unelevated
         >
@@ -105,7 +111,9 @@ withDefaults(
     </div>
     <div class="row q-pa-lg q-col-gutter-xl">
       <div v-for="i in 2" class="col-4">
-        <BranchCardCustomer></BranchCardCustomer>
+        <BranchCardCustomer
+          @view-detail="$emit('viewDetail')"
+        ></BranchCardCustomer>
       </div>
     </div>
   </AppBox>