From 890a5214c526ae6f4870fd25785f7c396f4034af Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 26 Aug 2024 10:11:55 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5=20(Individual=20D?=
 =?UTF-8?q?evelopment=20Plan)=20/=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=9E=E0=B8=9A=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_Information/02_ChangeName.vue          | 155 +++----
 .../10_registry/01_Information/04_Family.vue  |   2 +-
 .../01_Information/05_Educations.vue          | 159 ++++----
 .../10_registry/01_Information/06_Ability.vue | 161 ++++----
 .../02_Government/02_Discipline.vue           | 159 ++++----
 .../10_registry/02_Government/03_Leave.vue    | 214 +++++-----
 .../10_registry/02_Government/04_Duty.vue     | 159 ++++----
 .../10_registry/03_Salary/01_Salary.vue       | 177 ++++----
 .../10_registry/03_Salary/02_Nopaid.vue       | 161 ++++----
 .../04_Achievement/01_Certificate.vue         | 159 ++++----
 .../04_Achievement/02_Training.vue            | 143 +++----
 .../04_Achievement/03_Insignia.vue            | 187 +++++----
 .../10_registry/04_Achievement/04_Honor.vue   | 159 ++++----
 .../04_Achievement/05_Assessments.vue         | 161 ++++----
 .../04_Achievement/06_DevelopmentPlan.vue     | 386 ++++++++++++++++++
 .../10_registry/tabs/04_Achievement.vue       |   2 +
 16 files changed, 1500 insertions(+), 1044 deletions(-)
 create mode 100644 src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 3edbd24..71fe2b1 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -246,93 +246,98 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
-                <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+                <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section>
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section>
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/01_Information/04_Family.vue b/src/modules/10_registry/01_Information/04_Family.vue
index 6e63dd2..c5a8a94 100644
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@@ -263,7 +263,7 @@ onMounted(() => {
         !checkCoupleData &&
         !checkChildData
       "
-      class="col-12 q-pa-sm"
+      class="col-12"
     >
       <q-card
         class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 86fb236..2785d8d 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -522,96 +522,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 66d3306..3668799 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -247,97 +247,102 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index d831626..721b76e 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -295,96 +295,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index d07cbfa..47223de 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -339,124 +339,128 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
-
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'dateLeave'">
-              {{
-                dateThaiRange([
-                  props.row.dateStartLeave,
-                  props.row.dateEndLeave,
-                ])
-              }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'dateLeave'">
+                {{
+                  dateThaiRange([
+                    props.row.dateStartLeave,
+                    props.row.dateEndLeave,
+                  ])
+                }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label
-                    v-if="col.name == 'dateLeave'"
-                    class="text-dark text-weight-medium"
-                  >
-                    {{
-                      dateThaiRange([
-                        props.row.dateStartLeave,
-                        props.row.dateEndLeave,
-                      ])
-                    }}</q-item-label
-                  >
-                  <q-item-label
-                    v-else-if="col.name == 'status'"
-                    class="text-dark text-weight-medium"
-                  >
-                    {{
-                      props.row.status ? statusLeave(props.row.status) : "-"
-                    }}</q-item-label
-                  >
-                  <q-item-label v-else class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label
+                      v-if="col.name == 'dateLeave'"
+                      class="text-dark text-weight-medium"
+                    >
+                      {{
+                        dateThaiRange([
+                          props.row.dateStartLeave,
+                          props.row.dateEndLeave,
+                        ])
+                      }}</q-item-label
+                    >
+                    <q-item-label
+                      v-else-if="col.name == 'status'"
+                      class="text-dark text-weight-medium"
+                    >
+                      {{
+                        props.row.status ? statusLeave(props.row.status) : "-"
+                      }}</q-item-label
+                    >
+                    <q-item-label v-else class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 97f22c6..db0a704 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -298,96 +298,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 21278a4..857869c 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -9,7 +9,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const idByRow = ref<string>('')
+const idByRow = ref<string>("");
 const rows = ref<any[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<any[]>([]);
@@ -314,9 +314,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id:string) {
+function onHistory(id: string) {
   modalHistory.value = true;
-  idByRow.value = id
+  idByRow.value = id;
 }
 
 /** get data */
@@ -406,97 +406,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value?col.value:'-' }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
-          <span>
-            ไม่พบข้อมูลตำแหน่ง/เงินเดือน
-          </span>
-        </div>
-      </template>
-    </d-table>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
+          class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
+        >
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
@@ -506,7 +510,6 @@ onMounted(() => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />
-
 </template>
 <style scoped>
 .absolute_button {
@@ -515,7 +518,7 @@ onMounted(() => {
   top: -20px;
 }
 
-.fix_top{
-  justify-content: start!important;
+.fix_top {
+  justify-content: start !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index e94fb5c..204df45 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -275,98 +275,105 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip
                   >ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
                 >
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip
+                    >ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
+                  >
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index ba0facd..8a1da2c 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -273,96 +273,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index 925f704..041adc7 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -401,88 +401,93 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            {{ col.value ? col.value : "-" }}
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              {{ col.value ? col.value : "-" }}
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 3192c30..599c2ca 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -480,109 +480,116 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'insignia'">
-              {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
-              }}{{
-                props.row.insignia.shortName
-                  ? `(${props.row.insignia.shortName})`
-                  : ""
-              }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'insignia'">
+                {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                }}{{
+                  props.row.insignia.shortName
+                    ? `(${props.row.insignia.shortName})`
+                    : ""
+                }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section v-if="col.name == 'insignia'" class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium"
-                    >{{
-                      props.row.insignia ? `${props.row.insignia.name} ` : "-"
-                    }}{{
-                      props.row.insignia.shortName
-                        ? `(${props.row.insignia.shortName})`
-                        : ""
-                    }}</q-item-label
-                  >
-                </q-item-section>
-                <q-item-section v-else class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section v-if="col.name == 'insignia'" class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium"
+                      >{{
+                        props.row.insignia
+                          ? `${props.row.insignia.name} `
+                          : "-"
+                      }}{{
+                        props.row.insignia.shortName
+                          ? `(${props.row.insignia.shortName})`
+                          : ""
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section v-else class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index dc2a59e..28dbffe 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -279,96 +279,101 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/05_Assessments.vue b/src/modules/10_registry/04_Achievement/05_Assessments.vue
index 7e77294..865ab0d 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -356,96 +356,103 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows"
-      :columns="columns"
-      :grid="!mode"
-      :filter="filter"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-      <template v-slot:no-data>
-        <div
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip
+                    >ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
+                  >
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
           class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
         >
-          <span> ไม่พบข้อมูล</span>
-        </div>
-      </template>
-    </d-table>
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
new file mode 100644
index 0000000..98f66e7
--- /dev/null
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>("");
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "Knowledge",
+  "develop",
+  "target",
+  "developmentResults",
+  "developmentReport",
+]);
+const visibleColumnsHistory = ref<string[]>([
+  "no",
+  "Knowledge",
+  "develop",
+  "target",
+  "developmentResults",
+  "developmentReport",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "Knowledge",
+    align: "left",
+    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "Knowledge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "develop",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "develop",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: true,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentReport",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: true,
+    field: "developmentReport",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "Knowledge",
+    align: "left",
+    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "Knowledge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "develop",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "develop",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: true,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentReport",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: true,
+    field: "developmentReport",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate("assessments"))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificateHistory("assessments", idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >การพัฒนารายบุคคล (Individual Development Plan)</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <div v-if="rows.length != 0">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows"
+        :columns="columns"
+        :grid="!mode"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="onHistory(props.row.id)"
+              >
+                <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip
+                    >ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
+                  >
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
+    <div v-else>
+      <div class="col-12">
+        <q-card
+          class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+          bordered
+        >
+          ไม่พบข้อมูล
+        </q-card>
+      </div>
+    </div>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>
diff --git a/src/modules/10_registry/tabs/04_Achievement.vue b/src/modules/10_registry/tabs/04_Achievement.vue
index 4788487..d5f9d67 100644
--- a/src/modules/10_registry/tabs/04_Achievement.vue
+++ b/src/modules/10_registry/tabs/04_Achievement.vue
@@ -7,6 +7,7 @@ import Training from "@/modules/10_registry/04_Achievement/02_Training.vue";
 import Insignia from "@/modules/10_registry/04_Achievement/03_Insignia.vue";
 import Honor from "@/modules/10_registry/04_Achievement/04_Honor.vue";
 import Assessments from "@/modules/10_registry/04_Achievement/05_Assessments.vue";
+import DevelopmentPlan from "@/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue";
 
 const router = useRouter();
 </script>
@@ -33,6 +34,7 @@ const router = useRouter();
     <Insignia />
     <Honor />
     <Assessments />
+    <DevelopmentPlan />
   </div>
 </template>
 <style scoped>