refactor: ปรับ ui เปลี่ยนหน้า

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

@@ -1601,7 +1601,9 @@ watch([inputSearch, currentStatus], async () => {
           >
             <div class="col-4">
               <div class="row items-center">
-                <div style="width: 80px">{{ $t('showing') }}</div>
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
                 <div>
                   <q-btn-dropdown dense unelevated :label="pageSize">
                     <q-list>
@@ -1696,8 +1698,37 @@ watch([inputSearch, currentStatus], async () => {
               @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
             />
 
-            <div class="row justify-between q-pt-md">
+            <div class="col-4 row justify-center">
-              <div class="app-text-muted">
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
+                  </div>
+                  <div>
+                    <q-btn-dropdown dense unelevated :label="pageSize">
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSize = v;
+                              await fetchListEmployee();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4 row justify-center app-text-muted">
                 {{
                   $t('recordsPage', {
                     resultcurrentPage: listEmployee.length,
@@ -1705,6 +1736,7 @@ watch([inputSearch, currentStatus], async () => {
                   })
                 }}
               </div>
+              <div class="col-4 row justify-end">
                 <PaginationComponent
                   v-model:current-page="currentPageEmployee"
                   v-model:max-page="maxPageEmployee"
@@ -1717,6 +1749,7 @@ watch([inputSearch, currentStatus], async () => {
                 />
               </div>
             </div>
+          </div>
         </template>
 
         <template