fix: 03 customer info layout

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

@@ -87,7 +87,7 @@ watch(currentStatus, async () => {
 </script>
 
 <template>
-  <AppBox no-padding bordered>
+  <div class="bordered surface-1 col column">
     <div class="row no-wrap justify-between bordered-b surface-2">
       <div class="row items-center">
         <q-btn
@@ -186,8 +186,11 @@ watch(currentStatus, async () => {
       </div>
     </div>
     <div
-      class="row q-pa-md q-col-gutter-md"
+      class="row q-pa-md q-col-gutter-md col"
-      :class="{ 'justify-center': totalBranch === 0 }"
+      :class="{
+        'justify-center': totalBranch === 0,
+        'items-center': totalBranch === 0,
+      }"
       style="min-height: 350px"
     >
       <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
@@ -213,7 +216,8 @@ watch(currentStatus, async () => {
       </div>
     </div>
 
-    <div class="row justify-between q-pb-md q-px-lg">
+    <div class="row justify-between items-center q-px-md">
+      <div class="row col-4 items-center"></div>
       <div class="app-text-muted">
         {{
           $t('recordsPage', {
@@ -222,18 +226,20 @@ watch(currentStatus, async () => {
           })
         }}
       </div>
-      <PaginationComponent
+      <div class="col-4 flex justify-end">
-        v-model:current-page="currentPageBranch"
+        <PaginationComponent
-        v-model:max-page="maxPageBranch"
+          v-model:current-page="currentPageBranch"
-        :fetch-data="
+          v-model:max-page="maxPageBranch"
-          async () => {
+          :fetch-data="
-            await fetchList();
+            async () => {
-            flowStore.rotate();
+              await fetchList();
-          }
+              flowStore.rotate();
-        "
+            }
-      />
+          "
+        />
+      </div>
     </div>
-  </AppBox>
+  </div>
 </template>
 
 <style scoped>

src/pages/03_customer-management/MainPage.vue

@@ -2732,7 +2732,7 @@ watch([inputSearch, currentStatus], async () => {
         </q-splitter>
       </div>
     </div>
-    <div v-else>
+    <div class="col column" v-else>
       <CustomerInfoComponent
         :customer-type="customerType"
         :customer-id="currentCustomerId"