From a65e6645bc2b8cb124b859045c28648568fa6d1b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 6 Oct 2025 14:30:52 +0700
Subject: [PATCH] style(placement):layout

---
 .../components/PersonalList/DialogOrders.vue  | 401 +++++++++---------
 .../PersonalList/PersonalListPage.vue         |   2 +-
 .../components/PersonalList/Table.vue         | 351 +++++++--------
 .../components/PersonalList/TableView.vue     | 327 +++++++-------
 .../components/Transfer/DialogOrders.vue      |  67 +--
 src/modules/05_placement/views/01_Main.vue    | 284 +++++++------
 6 files changed, 755 insertions(+), 677 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/DialogOrders.vue b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
index c39c58d8e..253a7cf7f 100644
--- a/src/modules/05_placement/components/PersonalList/DialogOrders.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
@@ -260,217 +260,236 @@ watch(
       <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
       <q-separator />
       <q-card-section>
-        <div class="row q-mb-sm" style="padding: 0">
-          <q-select
-            v-model="commandType"
-            dense
-            outlined
-            label="ประเภทคำสั่ง"
-            :options="commandOp"
-            option-label="name"
-            option-value="code"
-            emit-value
-            map-options
-            use-input
-            hide-selected
-            fill-input
-            style="width: 350px; max-width: auto"
-            @update:model-value="filterSelectOrder"
-            @filter="(inputValue:any,
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm items-end">
+              <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-select
+                      v-model="commandType"
+                      dense
+                      outlined
+                      label="ประเภทคำสั่ง"
+                      :options="commandOp"
+                      option-label="name"
+                      option-value="code"
+                      emit-value
+                      map-options
+                      use-input
+                      hide-selected
+                      fill-input
+                      @update:model-value="filterSelectOrder"
+                      @filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn
                     ) "
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template></q-select
-          >
-          <q-space />
-          <q-input
-            borderless
-            outlined
-            dense
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="width: 200px; max-width: auto"
-            @keydown.enter.prevent="onSearch"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-              <!-- <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              /> -->
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-2 col-lg-4"></div>
 
-        <d-table
-          :columns="columns"
-          :rows="rows"
-          row-key="id"
-          :visible-columns="visibleColumns"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              :disable="commandType"
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td>
+              <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-8 col-md-7 col-lg-7">
+                    <q-input
+                      borderless
+                      outlined
+                      dense
+                      v-model="filter"
+                      placeholder="ค้นหา"
+                      @keydown.enter.prevent="onSearch"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" />
+                      </template>
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5">
+                    <q-select
+                      v-model="visibleColumns"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              :visible-columns="visibleColumns"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
                   :disable="commandType"
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
-              <q-td
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                class="cursor-pointer"
-              >
-                <template v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </template>
-                <template
-                  v-else-if="col.name === 'fullName'"
-                  class="table_ellipsis"
-                >
-                  <q-item v-ripple style="padding: 0">
-                    <q-item-section avatar>
-                      <q-avatar size="30px" color="grey-4">
-                        <q-img
-                          :src="props.row.avatar"
-                          class="photo-profile"
-                          v-if="props.row.avatar"
-                        />
-                        <q-img :src="avatar" class="photo-profile" v-else/>
-                      </q-avatar>
-                    </q-item-section>
-
-                    <q-item-section>
-                      <div class="text-weight-medium">{{ props.row.name }}</div>
-                      <div class="text-weight-light">
-                        {{ props.row.idCard }}
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </template>
-
-                <template v-else-if="col.name === 'examNumber'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.examNumber !== null ? props.row.examNumber : "-"
-                    }}
-                  </div>
-                </template>
-
-                <template v-else-if="col.name === 'organizationName'">
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      :disable="commandType"
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="cursor-pointer"
                   >
-                    <div class="col-4">
+                    <template v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </template>
+                    <template
+                      v-else-if="col.name === 'fullName'"
+                      class="table_ellipsis"
+                    >
+                      <q-item v-ripple style="padding: 0">
+                        <q-item-section avatar>
+                          <q-avatar size="30px" color="grey-4">
+                            <q-img
+                              :src="props.row.avatar"
+                              class="photo-profile"
+                              v-if="props.row.avatar"
+                            />
+                            <q-img :src="avatar" class="photo-profile" v-else />
+                          </q-avatar>
+                        </q-item-section>
+
+                        <q-item-section>
+                          <div class="text-weight-medium">
+                            {{ props.row.name }}
+                          </div>
+                          <div class="text-weight-light">
+                            {{ props.row.idCard }}
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </template>
+
+                    <template v-else-if="col.name === 'examNumber'">
                       <div class="text-weight-medium">
-                        {{ props.row.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.rootShortName !== null
-                            ? `(${props.row.rootShortName})`
-                            : ""
+                          props.row.examNumber !== null
+                            ? props.row.examNumber
+                            : "-"
                         }}
                       </div>
-                      <div class="text-weight-light">
+                    </template>
+
+                    <template v-else-if="col.name === 'organizationName'">
+                      <div
+                        v-if="
+                          props.row.orgName !== null ||
+                          props.row.positionPath !== null
+                        "
+                      >
+                        <div class="col-4">
+                          <div class="text-weight-medium">
+                            {{ props.row.root !== null ? props.row.root : "-" }}
+                            {{
+                              props.row.rootShortName !== null
+                                ? `(${props.row.rootShortName})`
+                                : ""
+                            }}
+                          </div>
+                          <div class="text-weight-light">
+                            {{
+                              props.row.nodeName !== null
+                                ? props.row.nodeName
+                                : ""
+                            }}
+                            {{
+                              props.row.nodeShortName !== null
+                                ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                                : ""
+                            }}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div v-else>
+                        <div class="col-4">
+                          <div class="text-weight-medium">-</div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-else-if="col.name === 'positionCandidate'">
+                      <div
+                        class="text-weight-medium"
+                        v-if="props.row.positionCandidate == null"
+                      >
+                        -
+                      </div>
+                      <div class="text-weight-medium" v-else>
+                        {{ props.row.positionCandidate }}
+                      </div>
+                    </template>
+
+                    <template v-else-if="col.name === 'reportingDate'">
+                      <div class="text-weight-medium">
                         {{
-                          props.row.nodeName !== null ? props.row.nodeName : ""
-                        }}
-                        {{
-                          props.row.nodeShortName !== null
-                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
-                            : ""
+                          props.row.reportingDate !== null
+                            ? dateText(props.row.reportingDate)
+                            : "-"
                         }}
                       </div>
-                    </div>
-                  </div>
+                    </template>
 
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
-                  </div>
-                </template>
+                    <template v-else-if="col.name === 'bmaOfficer'">
+                      <div class="text-weight-medium">
+                        {{ props.row.bmaOfficer }}
+                      </div>
+                    </template>
 
-                <template v-else-if="col.name === 'positionCandidate'">
-                  <div
-                    class="text-weight-medium"
-                    v-if="props.row.positionCandidate == null"
-                  >
-                    -
-                  </div>
-                  <div class="text-weight-medium" v-else>
-                    {{ props.row.positionCandidate }}
-                  </div>
-                </template>
+                    <template v-else-if="col.name === 'draft'">
+                      <div class="text-weight-medium">
+                        {{ props.row.draft }}
+                      </div>
+                    </template>
 
-                <template v-else-if="col.name === 'reportingDate'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.reportingDate !== null
-                        ? dateText(props.row.reportingDate)
-                        : "-"
-                    }}
-                  </div>
-                </template>
-
-                <template v-else-if="col.name === 'bmaOfficer'">
-                  <div class="text-weight-medium">
-                    {{ props.row.bmaOfficer }}
-                  </div>
-                </template>
-
-                <template v-else-if="col.name === 'draft'">
-                  <div class="text-weight-medium">
-                    {{ props.row.draft }}
-                  </div>
-                </template>
-
-                <template v-else-if="col.name === 'statusName'">
-                  <div class="text-weight-medium">
-                    {{ props.row.statusName }}
-                  </div>
-                </template>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+                    <template v-else-if="col.name === 'statusName'">
+                      <div class="text-weight-medium">
+                        {{ props.row.statusName }}
+                      </div>
+                    </template>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
diff --git a/src/modules/05_placement/components/PersonalList/PersonalListPage.vue b/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
index dff7eff9d..b30396a3c 100644
--- a/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
+++ b/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
@@ -153,7 +153,7 @@ onMounted(async () => {
       </div>
     </q-card>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+  <q-card flat bordered class="col-12 q-mt-sm">
     <div class="q-pa-none">
       <AddTablePosition :statCard="getStat" />
     </div>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 93161ee36..8464ce5d1 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -1447,188 +1447,201 @@ onMounted(async () => {
         :close="clickCloseSendModal"
       />
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="200"
-                v-model="filterlistAdd"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-                @keydown.enter.prevent="onSearchAdd"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumnslist"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm items-end">
+              <div class="col-xs-0 col-sm-0 col-md-4 col-lg-5"></div>
+              <div class="col-xs-12 col-sm-12 col-md-8 col-lg-7">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-md-8 col-lg-7">
+                    <q-input
+                      borderless
+                      outlined
+                      dense
+                      v-model="filterlistAdd"
+                      placeholder="ค้นหา"
+                      @keydown.enter.prevent="onSearchAdd"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" />
+                      </template>
+                    </q-input>
+                  </div>
 
-        <d-table
-          flat
-          bordered
-          dense
-          :rows="rowsFilter"
-          :columns="columns"
-          row-key="name"
-          class="custom-header-table"
-          selection="multiple"
-          v-model:selected="selected"
-          :pagination-label="paginationLabel"
-          :visible-columns="visibleColumnslist"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
+                  <div class="col-xs-12 col-md-4 col-lg-5">
+                    <q-select
+                      v-model="visibleColumnslist"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
               dense
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td>
+              :rows="rowsFilter"
+              :columns="columns"
+              row-key="name"
+              class="custom-header-table"
+              selection="multiple"
+              v-model:selected="selected"
+              :pagination-label="paginationLabel"
+              :visible-columns="visibleColumnslist"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
-              <q-td
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                class="cursor-pointer"
-              >
-                <template v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </template>
-                <template
-                  v-else-if="col.name === 'fullName'"
-                  class="table_ellipsis"
-                >
-                  <q-item v-ripple style="padding: 0">
-                    <q-item-section avatar>
-                      <q-avatar size="30px" color="grey-4">
-                        <q-img
-                          :src="props.row.avatar"
-                          class="photo-profile"
-                          v-if="props.row.avatar"
-                        />
-                        <q-img :src="avatar" class="photo-profile" v-else/>
-                      </q-avatar>
-                    </q-item-section>
-
-                    <q-item-section>
-                      <div class="text-weight-medium">{{ props.row.name }}</div>
-                      <div class="text-weight-light">
-                        {{ props.row.idCard }}
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </template>
-                <template v-else-if="col.name === 'examNumber'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.examNumber !== null ? props.row.examNumber : "-"
-                    }}
-                  </div>
-                </template>
-
-                <template v-else-if="col.name === 'organizationName'">
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="cursor-pointer"
                   >
-                    <div class="col-4">
+                    <template v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </template>
+                    <template
+                      v-else-if="col.name === 'fullName'"
+                      class="table_ellipsis"
+                    >
+                      <q-item v-ripple style="padding: 0">
+                        <q-item-section avatar>
+                          <q-avatar size="30px" color="grey-4">
+                            <q-img
+                              :src="props.row.avatar"
+                              class="photo-profile"
+                              v-if="props.row.avatar"
+                            />
+                            <q-img :src="avatar" class="photo-profile" v-else />
+                          </q-avatar>
+                        </q-item-section>
+
+                        <q-item-section>
+                          <div class="text-weight-medium">
+                            {{ props.row.name }}
+                          </div>
+                          <div class="text-weight-light">
+                            {{ props.row.idCard }}
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                    <template v-else-if="col.name === 'examNumber'">
                       <div class="text-weight-medium">
-                        {{ props.row.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.rootShortName !== null
-                            ? `(${props.row.rootShortName})`
-                            : ""
+                          props.row.examNumber !== null
+                            ? props.row.examNumber
+                            : "-"
                         }}
                       </div>
-                      <div class="text-weight-light">
-                        {{
-                          props.row.nodeName !== null ? props.row.nodeName : ""
-                        }}
-                        {{
-                          props.row.nodeShortName !== null
-                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
-                            : ""
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                    </template>
 
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'positionCandidate'">
-                  <div
-                    class="text-weight-medium"
-                    v-if="props.row.positionCandidate == null"
-                  >
-                    -
-                  </div>
-                  <div class="text-weight-medium" v-else>
-                    {{ props.row.positionCandidate }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'reportingDate'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.reportingDate !== null
-                        ? dateText(props.row.reportingDate)
-                        : "-"
-                    }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'bmaOfficer'">
-                  <div class="text-weight-medium">
-                    {{ props.row.bmaOfficer }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'draft'">
-                  <div class="text-weight-medium">
-                    {{ props.row.draft }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'statusName'">
-                  <div class="text-weight-medium">
-                    {{ props.row.statusName }}
-                  </div>
-                </template>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+                    <template v-else-if="col.name === 'organizationName'">
+                      <div
+                        v-if="
+                          props.row.orgName !== null ||
+                          props.row.positionPath !== null
+                        "
+                      >
+                        <div class="col-4">
+                          <div class="text-weight-medium">
+                            {{ props.row.root !== null ? props.row.root : "-" }}
+                            {{
+                              props.row.rootShortName !== null
+                                ? `(${props.row.rootShortName})`
+                                : ""
+                            }}
+                          </div>
+                          <div class="text-weight-light">
+                            {{
+                              props.row.nodeName !== null
+                                ? props.row.nodeName
+                                : ""
+                            }}
+                            {{
+                              props.row.nodeShortName !== null
+                                ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                                : ""
+                            }}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div v-else>
+                        <div class="col-4">
+                          <div class="text-weight-medium">-</div>
+                        </div>
+                      </div>
+                    </template>
+                    <template v-else-if="col.name === 'positionCandidate'">
+                      <div
+                        class="text-weight-medium"
+                        v-if="props.row.positionCandidate == null"
+                      >
+                        -
+                      </div>
+                      <div class="text-weight-medium" v-else>
+                        {{ props.row.positionCandidate }}
+                      </div>
+                    </template>
+                    <template v-else-if="col.name === 'reportingDate'">
+                      <div class="text-weight-medium">
+                        {{
+                          props.row.reportingDate !== null
+                            ? dateText(props.row.reportingDate)
+                            : "-"
+                        }}
+                      </div>
+                    </template>
+                    <template v-else-if="col.name === 'bmaOfficer'">
+                      <div class="text-weight-medium">
+                        {{ props.row.bmaOfficer }}
+                      </div>
+                    </template>
+                    <template v-else-if="col.name === 'draft'">
+                      <div class="text-weight-medium">
+                        {{ props.row.draft }}
+                      </div>
+                    </template>
+                    <template v-else-if="col.name === 'statusName'">
+                      <div class="text-weight-medium">
+                        {{ props.row.statusName }}
+                      </div>
+                    </template>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index 92f318067..cbd4bfc12 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -205,166 +205,187 @@ function filterSelector(val: string, update: Function) {
 </script>
 
 <template>
-  <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm">
-      <div class="row q-col-gutter-sm">
-        <q-select
-          outlined
-          dense
-          v-model="bmaOfficer"
-          :options="bmaOfficerOption"
-          emit-value
-          map-options
-          option-value="id"
-          option-label="name"
-          label="สถานภาพ"
-          :clearable="bmaOfficer !== ''"
-          style="width: 200px"
-          @update:model-value="onUpdateNewRows"
-          @clear="bmaOfficer = ''"
-        >
-        </q-select>
-
-        <q-select
-          outlined
-          dense
-          v-model="positionCandidate"
-          :options="positionCandidateOptions"
-          emit-value
-          map-options
-          option-value="id"
-          option-label="name"
-          label="ตำแหน่งที่สอบ"
-          style="width: 250px"
-          hide-selected
-          fill-input
-          use-input
-          :clearable="positionCandidate !== ''"
-          @clear="
-            (positionCandidate = ''),
-              (positionCandidateOptions = positionCandidateData || []),
-              onUpdateNewRows()
-          "
-          @update:model-value="onUpdateNewRows"
-          @filter="(inputValue:string,
+  <div class="q-pa-md q-gutter-sm row">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm items-end">
+        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4">
+              <q-select
+                outlined
+                dense
+                v-model="bmaOfficer"
+                :options="bmaOfficerOption"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                label="สถานภาพ"
+                :clearable="bmaOfficer !== ''"
+                @update:model-value="onUpdateNewRows"
+                @clear="bmaOfficer = ''"
+              >
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-5 col-md-4 col-lg-6">
+              <q-select
+                outlined
+                dense
+                v-model="positionCandidate"
+                :options="positionCandidateOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                label="ตำแหน่งที่สอบ"
+                hide-selected
+                fill-input
+                use-input
+                :clearable="positionCandidate !== ''"
+                @clear="
+                  (positionCandidate = ''),
+                    (positionCandidateOptions = positionCandidateData || []),
+                    onUpdateNewRows()
+                "
+                @update:model-value="onUpdateNewRows"
+                @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn
                       ) "
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-      </div>
-      <div>
-        <q-btn
-          flat
-          round
-          color="blue"
-          icon="mdi-account-arrow-right"
-          @click="updateModaladdlist"
-          v-if="displayAdd && checkPermission($route)?.attrIsUpdate"
-        >
-          <q-tooltip>ส่งรายชื่อไปยังหน่วยงาน</q-tooltip>
-        </q-btn>
-      </div>
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+              <div class="row q-col-gutter-sm">
+                <div
+                  class="col"
+                  v-if="displayAdd && checkPermission($route)?.attrIsUpdate"
+                >
+                  <q-btn
+                    flat
+                    round
+                    color="blue"
+                    icon="mdi-account-arrow-right"
+                    @click="updateModaladdlist"
+                  >
+                    <q-tooltip>ส่งรายชื่อไปยังหน่วยงาน</q-tooltip>
+                  </q-btn>
+                </div>
+                <div
+                  class="col"
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermissionList(['COMMAND']) &&
+                    checkPermissionCreate('COMMAND')
+                  "
+                >
+                  <q-btn
+                    flat
+                    round
+                    color="primary"
+                    icon="mdi-account-arrow-right"
+                    @click="openModalOrder()"
+                  >
+                    <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-      <q-btn
-        v-if="
-          checkPermission($route)?.attrIsUpdate &&
-          checkPermissionList(['COMMAND']) &&
-          checkPermissionCreate('COMMAND')
-        "
-        flat
-        round
-        color="primary"
-        icon="mdi-account-arrow-right"
-        @click="openModalOrder()"
-      >
-        <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-      </q-btn>
+        <div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>
 
-      <q-space />
-
-      <div class="items-center" style="display: flex">
-        <q-toggle
-          class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
-          :model-value="containStatus"
-          color="blue"
-          label="แสดงสถานะบรรจุแล้ว"
-          @update:model-value="updateContain"
-        />
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-          @keydown.enter.prevent="onUpdateNewRows"
-        >
-          <template v-slot:append> </template>
-        </q-input>
-        <!-- แสดง table ใน คอลัมน์ -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 140px"
-          class="gt-xs q-ml-sm"
-        />
+        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-toggle
+                class="toggle-expired-account"
+                :model-value="containStatus"
+                color="blue"
+                label="แสดงสถานะบรรจุแล้ว"
+                @update:model-value="updateContain"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-5 col-md-5">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="onUpdateNewRows"
+              >
+                <template v-slot:append> </template>
+              </q-input>
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      v-model:pagination="pagination"
-    >
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ attrs.rows.length.toLocaleString() }} รายการ
-        <q-pagination
-          v-model="pagination.page"
-          active-color="primary"
-          color="dark"
-          :max="scope.pagesNumber"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
-      </template>
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th auto-width v-if="history == true" />
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-        </q-tr>
-      </template>
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-    </q-table>
+    <div class="col-12">
+      <q-table
+        ref="table"
+        flat
+        bordered
+        class="custom-header-table"
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :pagination-label="paginationLabel"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ attrs.rows.length.toLocaleString() }} รายการ
+          <q-pagination
+            v-model="pagination.page"
+            active-color="primary"
+            color="dark"
+            :max="scope.pagesNumber"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width v-if="history == true" />
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template #body="props">
+          <slot v-bind="props" name="columns"></slot>
+        </template>
+      </q-table>
+    </div>
   </div>
 </template>
 
diff --git a/src/modules/05_placement/components/Transfer/DialogOrders.vue b/src/modules/05_placement/components/Transfer/DialogOrders.vue
index f761663da..502f3a5c9 100644
--- a/src/modules/05_placement/components/Transfer/DialogOrders.vue
+++ b/src/modules/05_placement/components/Transfer/DialogOrders.vue
@@ -189,40 +189,49 @@ watch(
       <q-separator />
       <q-card-section>
         <div class="row col-12 q-col-gutter-sm">
-          <div class="row col-12">
-            <q-space />
-            <q-input
-              borderless
-              outlined
-              dense
-              v-model="filter"
-              placeholder="ค้นหา"
-              @keydown.enter.prevent="onSearch"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-                <!-- <q-icon
+          <div class="col-12">
+            <div class="row q-col-gutter-xs items-end">
+              <div class="col-xs-0 col-sm-4 col-md-6 col-lg-8"></div>
+
+              <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
+                    <q-input
+                      borderless
+                      outlined
+                      dense
+                      v-model="filter"
+                      placeholder="ค้นหา"
+                      @keydown.enter.prevent="onSearch"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" />
+                        <!-- <q-icon
                       v-if="filter !== ''"
                       name="clear"
                       class="cursor-pointer"
                       @click="filter = ''"
                     /> -->
-              </template>
-            </q-input>
-            <q-select
-              v-model="visibleColumns2"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns2"
-              option-value="name"
-              style="min-width: 140px"
-              class="gt-xs q-ml-sm"
-            />
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
+                    <q-select
+                      v-model="visibleColumns2"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns2"
+                      option-value="name"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
 
           <div class="col-12">
diff --git a/src/modules/05_placement/views/01_Main.vue b/src/modules/05_placement/views/01_Main.vue
index b461d5fbb..b0ab311a1 100644
--- a/src/modules/05_placement/views/01_Main.vue
+++ b/src/modules/05_placement/views/01_Main.vue
@@ -385,147 +385,163 @@ onMounted(() => {
 
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-col-gutter-sm">
-      <div class="row col-12">
-        <q-select
-          class="col-xs-12 col-sm-3 col-md-2"
-          v-model="searchYear"
-          label="ปีงบประมาณ"
-          dense
-          emit-value
-          map-options
-          :options="yearOptionsFn"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          @update:model-value="filterYear"
-          use-input
-          hide-selected
-          fill-input
-          @filter="filterFnYear"
-          ><template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-
-        <q-space />
-
-        <q-input
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          placeholder="ค้นหา"
-          @keydown.enter.prevent="onSearch"
-        >
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-
-        <q-select
-          class="q-ml-sm"
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          style="min-width: 140px"
-        />
+      <div class="col-12">
+        <div class="row q-col-gutter-xs items-end">
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-8 col-md-6">
+                <q-select
+                  v-model="searchYear"
+                  label="ปีงบประมาณ"
+                  dense
+                  emit-value
+                  map-options
+                  :options="yearOptionsFn"
+                  option-value="id"
+                  option-label="name"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="filterYear"
+                  use-input
+                  hide-selected
+                  fill-input
+                  @filter="filterFnYear"
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
+          <div class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
+            <div class="row q-col-gutter-xs">
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="onSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
+                <q-select
+                  v-model="visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="col-12">
         <q-card bordered class="col-12 filter-card q-pa-sm">
           <div class="row col-12 q-col-gutter-sm">
-            <q-select
-              class="col-xs-12 col-sm-3 col-md-2"
-              v-model="examTime"
-              label="ครั้งที่"
-              dense
-              emit-value
-              map-options
-              :options="examTimeOP2"
-              option-value="id"
-              option-label="name"
-              lazy-rules
-              hide-selected
-              fill-input
-              hide-bottom-space
-              :readonly="false"
-              :borderless="false"
-              :outlined="true"
-              :hide-dropdown-icon="false"
-              @update:model-value="searchFilterTable"
-              @filter="filterFnexamTime"
-              :clearable="examTime !== 'all' && examTime !== 'ทั้งหมด'"
-              @clear="(examTime = 'ทั้งหมด'), searchFilterTable()"
-              use-input
-              input-debounce="0"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
+            <div class="col-xs-12 col-sm-4 col-md-2">
+              <q-select
+                v-model="examTime"
+                label="ครั้งที่"
+                dense
+                emit-value
+                map-options
+                :options="examTimeOP2"
+                option-value="id"
+                option-label="name"
+                lazy-rules
+                hide-selected
+                fill-input
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+                @filter="filterFnexamTime"
+                :clearable="examTime !== 'all' && examTime !== 'ทั้งหมด'"
+                @clear="(examTime = 'ทั้งหมด'), searchFilterTable()"
+                use-input
+                input-debounce="0"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
 
-            <q-select
-              class="col-xs-12 col-sm-3 col-md-3"
-              v-model="examType"
-              label="ประเภทการสอบ"
-              dense
-              emit-value
-              map-options
-              option-label="name"
-              :options="examTypeOP2"
-              option-value="id"
-              lazy-rules
-              hide-bottom-space
-              :readonly="false"
-              :borderless="false"
-              :outlined="true"
-              :hide-dropdown-icon="false"
-              @update:model-value="searchFilterTable"
-              @filter="filterFnExamtype"
-              use-input
-              hide-selected
-              fill-input
-              :clearable="examType !== 'all' && examType !== 'ทั้งหมด'"
-              @clear="
-                (examTimeOP2 = examTimeOP),
-                  (examType = 'ทั้งหมด'),
-                  searchFilterTable()
-              "
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
+            <div class="col-xs-12 col-sm-4 col-md-3">
+              <q-select
+                v-model="examType"
+                label="ประเภทการสอบ"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="examTypeOP2"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+                @filter="filterFnExamtype"
+                use-input
+                hide-selected
+                fill-input
+                :clearable="examType !== 'all' && examType !== 'ทั้งหมด'"
+                @clear="
+                  (examTimeOP2 = examTimeOP),
+                    (examType = 'ทั้งหมด'),
+                    searchFilterTable()
+                "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
 
-            <q-toggle
-              class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
-              v-model="expiredAccount"
-              color="blue"
-              label="แสดงบัญชีหมดอายุ"
-              @update:model-value="searchFilterTable"
-            />
+            <div class="col-xs-12 col-sm-4 col-md-5">
+              <q-toggle
+                class="toggle-expired-account"
+                v-model="expiredAccount"
+                color="blue"
+                label="แสดงบัญชีหมดอายุ"
+                @update:model-value="searchFilterTable"
+              />
+            </div>
           </div>
         </q-card>
       </div>