From b5a2dee9aa0586bc0412e049275fc40671430c18 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 17 Jul 2024 07:38:44 +0000
Subject: [PATCH] fix: 03 layout

---
 .../CustomerInfoComponent.vue                 |  19 +-
 src/pages/03_customer-management/MainPage.vue | 201 +++++++++---------
 2 files changed, 111 insertions(+), 109 deletions(-)

diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index c4ecf952..399b7699 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -87,8 +87,8 @@ watch(currentStatus, async () => {
 </script>
 
 <template>
-  <div class="bordered surface-1 col column">
-    <div class="row no-wrap justify-between bordered-b surface-2">
+  <div class="bordered surface-1 col column surface-2">
+    <div class="row no-wrap justify-between bordered-b surface-3">
       <div class="row items-center">
         <q-btn
           round
@@ -128,7 +128,7 @@ watch(currentStatus, async () => {
           </div>
         </div>
       </div>
-      <div class="row items-center q-pa-md">
+      <div class="row items-center q-px-md">
         <q-btn
           id="btn-add-customer"
           dense
@@ -138,23 +138,27 @@ watch(currentStatus, async () => {
           @click="$emit('dialog')"
           style="background-color: var(--cyan-6); color: white"
         />
-        <q-separator vertical inset class="q-mx-lg" />
+        <q-separator vertical inset class="q-mx-md" />
         <q-input
           style="width: 250px"
           outlined
           dense
           :label="$t('search')"
-          class="q-mr-lg"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearch"
           debounce="500"
-        ></q-input>
+        >
+          <template v-slot:prepend>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
         <q-btn
+          padding="10px 16px"
           icon="mdi-tune-vertical-variant"
           size="sm"
           :color="$q.dark.isActive ? 'dark' : 'white'"
           :text-color="$q.dark.isActive ? 'white' : 'dark'"
-          class="bordered rounded"
+          class="bordered rounded q-ml-md"
           unelevated
         >
           <q-menu class="bordered">
@@ -197,6 +201,7 @@ watch(currentStatus, async () => {
 
       <div v-for="(br, i) in branch" :key="i" class="col-4">
         <BranchCardCustomer
+          class="surface-1"
           :inactive="br.status === 'INACTIVE'"
           :color="customerType === 'CORP' ? 'corp' : 'pers'"
           :badgeField="['status']"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index bdf65736..00c00437 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1650,112 +1650,108 @@ watch([inputSearch, currentStatus], async () => {
       >
         <!-- tabs -->
         <div class="column">
-          <div
-            class="row justify-between full-width items-center surface-3"
-            style="z-index: 1"
-          >
-            <div class="row q-py-sm q-px-md justify-between full-width">
-              <q-input
-                for="input-search"
+          <div class="row q-px-md q-py-sm justify-between full-width surface-3">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('search')"
+              class="col-12 col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div
+              class="row col-md-5 col-12"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+              style="white-space: nowrap"
+            >
+              <q-select
+                v-model="currentStatus"
                 outlined
                 dense
-                :label="$t('search')"
-                class="q-mr-md col-12 col-md-3"
-                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-                v-model="inputSearch"
-                debounce="200"
+                option-value="value"
+                option-label="label"
+                class="col"
+                map-options
+                emit-value
+                :options="[
+                  { label: $t('all'), value: 'All' },
+                  { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                  { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+                ]"
+              ></q-select>
+              <q-select
+                v-if="modeView === false"
+                id="select-field"
+                for="select-field"
+                class="q-mx-sm col"
+                :options="
+                  currentTab === 'employer'
+                    ? fieldDisplayEmployer
+                    : fieldDisplayEmployee
+                "
+                :display-value="$t('displayField')"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="modeView"
+                dense
+                class="no-shadow bordered rounded surface-1"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
               >
-                <template #prepend>
-                  <q-icon name="mdi-magnify" />
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? modeView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : modeView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
                 </template>
-              </q-input>
-
-              <div
-                class="row col-12 col-md-4"
-                :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              >
-                <q-select
-                  v-model="currentStatus"
-                  outlined
-                  dense
-                  option-value="value"
-                  option-label="label"
-                  class="col"
-                  map-options
-                  emit-value
-                  :options="[
-                    { label: $t('all'), value: 'All' },
-                    { label: $t('statusACTIVE'), value: 'ACTIVE' },
-                    { label: $t('statusINACTIVE'), value: 'INACTIVE' },
-                  ]"
-                ></q-select>
-                <q-select
-                  v-if="modeView === false"
-                  id="select-field"
-                  for="select-field"
-                  class="col q-mx-sm"
-                  :options="
-                    currentTab === 'employer'
-                      ? fieldDisplayEmployer
-                      : fieldDisplayEmployee
-                  "
-                  :display-value="$t('displayField')"
-                  v-model="fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
-
-                <q-btn-toggle
-                  id="btn-mode"
-                  v-model="modeView"
-                  dense
-                  class="no-shadow bordered rounded surface-1"
-                  :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
-                  size="xs"
-                  :options="[
-                    { value: true, slot: 'folder' },
-                    { value: false, slot: 'list' },
-                  ]"
-                >
-                  <template v-slot:folder>
-                    <q-icon
-                      name="mdi-view-grid-outline"
-                      size="16px"
-                      class="q-px-sm q-py-xs rounded"
-                      :style="{
-                        color: $q.dark.isActive
-                          ? modeView
-                            ? '#C9D3DB '
-                            : '#787B7C'
-                          : modeView
-                            ? '#787B7C'
-                            : '#C9D3DB',
-                      }"
-                    />
-                  </template>
-                  <template v-slot:list>
-                    <q-icon
-                      name="mdi-format-list-bulleted"
-                      class="q-px-sm q-py-xs rounded"
-                      size="16px"
-                      :style="{
-                        color: $q.dark.isActive
-                          ? modeView === false
-                            ? '#C9D3DB'
-                            : '#787B7C'
-                          : modeView === false
-                            ? '#787B7C'
-                            : '#C9D3DB',
-                      }"
-                    />
-                  </template>
-                </q-btn-toggle>
-              </div>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? modeView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : modeView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
             </div>
           </div>
 
@@ -1814,6 +1810,7 @@ watch([inputSearch, currentStatus], async () => {
         </div>
 
         <!-- body -->
+
         <q-splitter
           v-model="splitterModel"
           :limits="[15, 80]"