From 7d75535d152f509f880d77b694e0594b9b91c4b1 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 7 Nov 2024 14:51:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   2 +
 .../01_Information/01_Information.vue         |   8 +-
 .../01_Information/02_ChangeName.vue          | 159 +++++------
 .../10_registry/01_Information/03_Address.vue |   8 +-
 .../10_registry/01_Information/04_Family.vue  |  10 +-
 .../01_Information/05_Educations.vue          | 160 +++++------
 .../10_registry/01_Information/06_Ability.vue | 161 ++++++-----
 .../02_Government/01_Government.vue           |   6 +-
 .../02_Government/02_Discipline.vue           |   8 +-
 .../10_registry/02_Government/03_Leave.vue    |   8 +-
 .../10_registry/02_Government/04_Duty.vue     |   8 +-
 .../10_registry/03_Salary/01_Salary.vue       |   8 +-
 .../10_registry/03_Salary/02_Nopaid.vue       | 162 ++++++------
 .../04_Achievement/01_Certificate.vue         | 162 ++++++------
 .../04_Achievement/02_Training.vue            | 145 +++++-----
 .../04_Achievement/03_Insignia.vue            | 190 ++++++-------
 .../10_registry/04_Achievement/04_Honor.vue   | 154 +++++------
 .../04_Achievement/05_Assessments.vue         | 163 ++++++------
 .../04_Achievement/06_DevelopmentPlan.vue     | 250 +++++++++---------
 src/modules/10_registry/05_Other/01_Other.vue |  13 +-
 .../components/DialogAddRequestEdit.vue       |   6 +-
 .../10_registry/views/requestEditDetail.vue   |   4 +-
 .../10_registry/views/requestEditMain.vue     |   6 +-
 src/stores/data.ts                            |  26 +-
 src/views/MainLayout.vue                      |   7 +-
 25 files changed, 942 insertions(+), 892 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index a3d62c7..e3f8c51 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -119,7 +119,9 @@ export default {
   developmentUserByType: (type: string) => `${org}/profile${type}/development/user`,
 
   upDateNumber: `${profileOrg}/updatePhoneNumber/user`,
+  upDateNumberByType: (type: string) => `${org}/profile${type}/updatePhoneNumber/user`,
   updateEmail: `${profileOrg}/updateEmail/user`,
+  updateEmailByType: (type: string) => `${org}/profile${type}/updateEmail/user`,
   /**
    * workflow
    */
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index addbc32..76b3bad 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
@@ -243,7 +244,7 @@ function onHistory() {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.dataUserInformationByType(dataStore.officerLink))
+    .get(config.API.dataUserInformationByType(link.value))
     .then(async (res) => {
       const data = await res.data.result;
       formDataInformation.citizenId = data.citizenId;
@@ -318,7 +319,7 @@ function onSubmitEdit(type: string) {
 /** บันทึกเบอร์โทร */
 async function onSavePhone() {
   await http
-    .put(config.API.upDateNumber, {
+    .put(config.API.upDateNumberByType(link.value), {
       phone: formDataInformation.phone,
     })
     .then(async (res) => {
@@ -335,7 +336,7 @@ async function onSavePhone() {
 /** บันทึก email */
 async function onSaveEmail() {
   await http
-    .put(config.API.updateEmail, {
+    .put(config.API.updateEmailByType(link.value), {
       email: formDataInformation.email + `@bangkok.go.th`,
     })
     .then(async (res) => {
@@ -350,6 +351,7 @@ async function onSaveEmail() {
 }
 
 onMounted(async () => {
+  link.value = await dataStore.getProFileType();
   await getData();
 });
 </script>
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 86c06bb..0cd835c 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
@@ -161,10 +162,10 @@ function onHistory(id: string) {
 }
 
 /** get data */
-function getData() {
+async function getData() {
   showLoader();
   http
-    .get(config.API.dataUserChangeNameByType(dataStore.officerLink))
+    .get(config.API.dataUserChangeNameByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -183,7 +184,10 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserChangeNameHistoryByType(dataStore.officerLink) + `/${idByrow.value}`)
+    .get(
+      config.API.dataUserChangeNameHistoryByType(link.value) +
+        `/${idByrow.value}`
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -196,8 +200,9 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
-  getData();
+onMounted(async () => {
+  link.value = await dataStore.getProFileType();
+  await getData();
 });
 </script>
 <template>
@@ -240,7 +245,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -249,88 +253,87 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
-                <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
+                <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>
-                    <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>
+              <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>
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
diff --git a/src/modules/10_registry/01_Information/03_Address.vue b/src/modules/10_registry/01_Information/03_Address.vue
index 0454e72..1268328 100644
--- a/src/modules/10_registry/01_Information/03_Address.vue
+++ b/src/modules/10_registry/01_Information/03_Address.vue
@@ -18,6 +18,7 @@ import type {
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
 const rowsHistory = ref<any[]>([]);
@@ -226,10 +227,10 @@ function onHistory() {
 }
 
 /** get data */
-function getData() {
+async function getData() {
   showLoader();
   http
-    .get(config.API.dataUserAddressByType(dataStore.officerLink))
+    .get(config.API.dataUserAddressByType(link.value))
     .then((res) => {
       const data: Address = res.data.result;
       fetchDistrict(data.registrationProvinceId, "1");
@@ -262,7 +263,7 @@ function getData() {
 /** get history */
 function getHistory() {
   const url =
-  dataStore.officerType == "OFFICER"
+    dataStore.officerType == "OFFICER"
       ? config.API.dataUserHistory("")
       : config.API.dataUserHistory("-employee");
   showLoader();
@@ -371,6 +372,7 @@ function convertSubDistrictName(id: string, type: string) {
 }
 
 onMounted(async () => {
+  link.value = await dataStore.getProFileType();
   await fetchProvince();
   await getData();
 });
diff --git a/src/modules/10_registry/01_Information/04_Family.vue b/src/modules/10_registry/01_Information/04_Family.vue
index 6ae1f6c..dd286a7 100644
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@@ -12,6 +12,7 @@ import type { FormChildren } from "@/modules/10_registry/interface/index/Family"
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
@@ -146,10 +147,10 @@ function onHistory(type: string, id: string) {
 }
 
 /** get data */
-function getData(type: string) {
+async function getData(type: string) {
   showLoader();
   http
-    .get(config.API.dataUserFamilyByType(dataStore.officerLink,type))
+    .get(config.API.dataUserFamilyByType(link.value, type))
     .then((res) => {
       const data = res.data.result;
       if (data) {
@@ -201,7 +202,7 @@ function getData(type: string) {
 /** get history */
 function getHistory() {
   const url =
-  dataStore.officerType == "OFFICER"
+    dataStore.officerType == "OFFICER"
       ? config.API.dataUserFamilyHistory(typeForm.value, "", idFamily.value)
       : config.API.dataUserFamilyHistory(
           typeForm.value,
@@ -233,7 +234,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataStore.getProFileType();
   getData("father");
   getData("mother");
   getData("couple");
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index f34d788..643a7ff 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -12,6 +12,7 @@ import type { EducationProfile } from "@/modules/10_registry/interface/index/Mai
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
@@ -440,10 +441,10 @@ function onHistory(id: string) {
 }
 
 /** get data */
-function getData() {
+async function getData() {
   showLoader();
   http
-    .get(config.API.dataUserEducationsByType(dataStore.officerLink))
+    .get(config.API.dataUserEducationsByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -462,7 +463,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserEducationsHistoryByType(dataStore.officerLink,idByRow.value))
+    .get(config.API.dataUserEducationsHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -475,8 +476,10 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
-  getData();
+onMounted(async () => {
+  link.value = await dataStore.getProFileType();
+
+  await getData();
 });
 </script>
 <template>
@@ -519,7 +522,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -528,91 +530,89 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
- 
-
+              <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>
   <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 b6d241e..a133a08 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -11,6 +11,7 @@ import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const rows = ref<AbilityRows[]>([]);
 const rowsHistory = ref<AbilityRows[]>([]);
 const idByRow = ref<string>("");
@@ -162,10 +163,10 @@ function onHistory(id: string) {
 }
 
 /** get data */
-function getData() {
+async function getData() {
   showLoader();
   http
-    .get(config.API.dataUserAbilityByType(dataStore.officerLink))
+    .get(config.API.dataUserAbilityByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -184,7 +185,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserAbilityHistoryByType(dataStore.officerLink,idByRow.value))
+    .get(config.API.dataUserAbilityHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -197,8 +198,9 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
-  getData();
+onMounted(async () => {
+  link.value = await dataStore.getProFileType();
+  await getData();
 });
 </script>
 <template>
@@ -241,7 +243,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -250,92 +251,90 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
-
-
+              <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>
   <DialogHistory
     v-model:modal="modalHistory"
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index 0ede1ae..0b56223 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -16,6 +16,7 @@ import type {
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataPerson = useDataStore()
@@ -285,7 +286,7 @@ function onHistory() {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserGovernmentByType(dataPerson.officerLink))
+    .get(config.API.dataUserGovernmentByType(link.value))
     .then((res) => {
       const data = res.data.result;
       formData.org = data.org;
@@ -336,7 +337,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async() => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index 914b767..bcdbc48 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -11,6 +11,7 @@ import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Mai
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore()
@@ -140,7 +141,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserDisciplineByType(dataStore.officerLink))
+    .get(config.API.dataUserDisciplineByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -157,7 +158,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserDisciplineHistoryByType(dataStore.officerLink,idByRow.value))
+    .get(config.API.dataUserDisciplineHistoryByType(link.value,idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -170,7 +171,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async() => {
+  link.value = await dataStore.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index a4cfb30..6fabf66 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -10,6 +10,7 @@ import { useDataStore } from "@/stores/data";
 import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore()
@@ -216,7 +217,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserLeaveByType(dataStore.officerLink))
+    .get(config.API.dataUserLeaveByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data.map((item: any) => ({
@@ -243,7 +244,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserLeaveHistoryByType(dataStore.officerLink,idByRow.value))
+    .get(config.API.dataUserLeaveHistoryByType(link.value,idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data.map((item: any) => ({
@@ -292,7 +293,8 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
-onMounted(() => {
+onMounted(async() => {
+  link.value = await dataStore.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 3a5d1f3..b1dbf3d 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -11,6 +11,7 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const dataStore = useDataStore()
 const idByRow = ref<string>("");
 const rows = ref<DutyFormType[]>([]);
@@ -218,7 +219,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserDutyByType(dataStore.officerLink))
+    .get(config.API.dataUserDutyByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -235,7 +236,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserDutyHistoryByType(dataStore.officerLink,idByRow.value))
+    .get(config.API.dataUserDutyHistoryByType(link.value,idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -248,7 +249,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async() => {
+  link.value = await dataStore.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 8693514..176e6f9 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -12,6 +12,7 @@ import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main"
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
@@ -358,7 +359,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserSalaryByType(dataPerson.officerLink))
+    .get(config.API.dataUserSalaryByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -375,7 +376,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserSalaryHistoryByType(dataPerson.officerLink,idByRow.value))
+    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -388,7 +389,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index f36e9f6..a0e8392 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -5,13 +5,14 @@ import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data"
+import { useDataStore } from "@/stores/data";
 
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<NopaidFormType[]>([]);
 const filter = ref<string>("");
@@ -195,7 +196,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserNopaidByType(dataPerson.officerLink))
+    .get(config.API.dataUserNopaidByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -212,7 +213,9 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserSalaryNopaidHistoryByType(dataPerson.officerLink,idByRow.value))
+    .get(
+      config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -225,7 +228,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -269,7 +273,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -278,94 +281,91 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
-
+              <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>
   <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 e62c5fd..dfc7e73 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -7,14 +7,14 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
 
-
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
-const dataPerson = useDataStore()
+const dataPerson = useDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
@@ -196,7 +196,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateByType(dataPerson.officerLink,"certificate"))
+    .get(config.API.dataUserCertificateByType(link.value, "certificate"))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -213,7 +213,13 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateHistoryByType(dataPerson.officerLink,"certificate", idByRow.value))
+    .get(
+      config.API.dataUserCertificateHistoryByType(
+        link.value,
+        "certificate",
+        idByRow.value
+      )
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -226,7 +232,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -270,7 +277,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -279,89 +285,89 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
+              <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>
   <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 b5c523a..c57e628 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -12,7 +12,8 @@ import type { TrainingFormType } from "@/modules/10_registry/interface/index/Mai
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<TrainingFormType[]>([]);
 const filter = ref<string>("");
@@ -322,7 +323,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateByType(dataPerson.officerLink,"training"))
+    .get(config.API.dataUserCertificateByType(link.value, "training"))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -339,7 +340,13 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateHistoryByType(dataPerson.officerLink,"training", idByRow.value))
+    .get(
+      config.API.dataUserCertificateHistoryByType(
+        link.value,
+        "training",
+        idByRow.value
+      )
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -352,7 +359,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -396,7 +404,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -405,81 +412,81 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
+              <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>
   <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 3aa7d94..484ca70 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -7,13 +7,13 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<InsigniaFormType[]>([]);
 const filter = ref<string>("");
@@ -400,7 +400,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateByType(dataPerson.officerLink,"insignia"))
+    .get(config.API.dataUserCertificateByType(link.value, "insignia"))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -417,7 +417,13 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateHistoryByType(dataPerson.officerLink,"insignia", idByRow.value))
+    .get(
+      config.API.dataUserCertificateHistoryByType(
+        link.value,
+        "insignia",
+        idByRow.value
+      )
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -431,7 +437,8 @@ function getHistory() {
 }
 
 onMounted(async () => {
-  await getData();
+  link.value = await dataPerson.getProFileType();
+  getData();
 });
 </script>
 <template>
@@ -474,7 +481,6 @@ onMounted(async () => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -483,104 +489,102 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @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 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>
+              <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>
   <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 8a498e9..66f93eb 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -13,7 +13,8 @@ import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const store = useRegistryInFormationStore();
 const rows = ref<HonorFormData[]>([]);
@@ -196,7 +197,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateByType(dataPerson.officerLink,"honor"))
+    .get(config.API.dataUserCertificateByType(link.value, "honor"))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -230,7 +231,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -274,7 +276,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -283,90 +284,89 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
-
+              <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>
   <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 104c747..489e9e1 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -12,7 +12,8 @@ import type { AssessmentsFormType } from "@/modules/10_registry/interface/index/
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<AssessmentsFormType[]>([]);
 const filter = ref<string>("");
@@ -257,7 +258,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateByType(dataPerson.officerLink,"assessments"))
+    .get(config.API.dataUserCertificateByType(link.value, "assessments"))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -274,7 +275,13 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateHistoryByType(dataPerson.officerLink,"assessments", idByRow.value))
+    .get(
+      config.API.dataUserCertificateHistoryByType(
+        link.value,
+        "assessments",
+        idByRow.value
+      )
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -307,7 +314,8 @@ function textPoint(val: number | undefined) {
   else return "-";
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -351,7 +359,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -360,91 +367,89 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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>
+      <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"
-                icon="mdi-history"
+                class="absolute_button"
                 @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>
+              <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>
   <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
index 7218841..2d36ef5 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -12,7 +12,8 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
 
-const dataPerson = useDataStore()
+const link = ref<string>("");
+const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<any[]>([]);
 const filter = ref<string>("");
@@ -118,7 +119,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.developmentUserByType(dataPerson.officerLink))
+    .get(config.API.developmentUserByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -135,7 +136,13 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserCertificateHistoryByType(dataPerson.officerLink,"assessments", idByRow.value))
+    .get(
+      config.API.dataUserCertificateHistoryByType(
+        link.value,
+        "assessments",
+        idByRow.value
+      )
+    )
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -157,7 +164,8 @@ function openDialogDevelop(data: any) {
   kpiDevelopmentId.value = data.kpiDevelopmentId;
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
@@ -201,7 +209,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -210,136 +217,135 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? 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.length !== 0 ? 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="vertical-top">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (paginationPlan.page - 1) * paginationPlan.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
+      <template v-if="mode" v-slot:body="props">
+        <q-tr :props="props" class="vertical-top">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{
+                (paginationPlan.page - 1) * paginationPlan.rowsPerPage +
+                props.rowIndex +
+                1
+              }}
+            </div>
+            <div v-else-if="col.name == 'developmentProjects'">
+              <div class="column">
+                <q-checkbox
+                  size="xs"
+                  :model-value="props.row.isDevelopment70"
+                  label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                />
+                <q-checkbox
+                  size="xs"
+                  :model-value="props.row.isDevelopment20"
+                  label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                />
+                <q-checkbox
+                  size="xs"
+                  :model-value="props.row.isDevelopment10"
+                  label="10 การฝึกอบรมอื่นๆ"
+                />
               </div>
-              <div v-else-if="col.name == 'developmentProjects'">
-                <div class="column">
-                  <q-checkbox
-                    size="xs"
-                    :model-value="props.row.isDevelopment70"
-                    label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-                  />
-                  <q-checkbox
-                    size="xs"
-                    :model-value="props.row.isDevelopment20"
-                    label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-                  />
-                  <q-checkbox
-                    size="xs"
-                    :model-value="props.row.isDevelopment10"
-                    label="10 การฝึกอบรมอื่นๆ"
-                  />
-                </div>
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-            <q-td auto-width>
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              flat
+              round
+              dense
+              color="info"
+              icon="mdi-eye"
+              @click="openDialogDevelop(props.row)"
+            >
+              <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
                 flat
                 round
                 dense
                 color="info"
                 icon="mdi-eye"
+                size="14px"
+                class="absolute_button"
                 @click="openDialogDevelop(props.row)"
               >
                 <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
-                  flat
-                  round
-                  dense
-                  color="info"
-                  icon="mdi-eye"
-                  size="14px"
-                  class="absolute_button"
-                  @click="openDialogDevelop(props.row)"
+              </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 == 'developmentProjects'"
+                  class="fix_top"
                 >
-                  <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 == 'developmentProjects'"
-                    class="fix_top"
-                  >
-                    <div class="column">
-                      <q-checkbox
-                        class="check_box"
-                        size="xs"
-                        :model-value="props.row.isDevelopment70"
-                        label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-                      />
-                      <q-checkbox
-                        class="check_box"
-                        size="xs"
-                        :model-value="props.row.isDevelopment20"
-                        label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-                      />
-                      <q-checkbox
-                        class="check_box"
-                        size="xs"
-                        :model-value="props.row.isDevelopment10"
-                        label="10 การฝึกอบรมอื่นๆ"
-                      />
-                    </div>
-                  </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 class="column">
+                    <q-checkbox
+                      class="check_box"
+                      size="xs"
+                      :model-value="props.row.isDevelopment70"
+                      label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                    />
+                    <q-checkbox
+                      class="check_box"
+                      size="xs"
+                      :model-value="props.row.isDevelopment20"
+                      label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                    />
+                    <q-checkbox
+                      class="check_box"
+                      size="xs"
+                      :model-value="props.row.isDevelopment10"
+                      label="10 การฝึกอบรมอื่นๆ"
+                    />
+                  </div>
+                </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>
 
   <DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" />
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index 077539e..262e7ad 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -12,6 +12,7 @@ import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataPerson = useDataStore();
@@ -113,7 +114,7 @@ function onHistory(id: string) {
 function getData() {
   showLoader();
   http
-    .get(config.API.dataUserOtherByType(dataPerson.officerLink))
+    .get(config.API.dataUserOtherByType(link.value))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -128,12 +129,7 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(
-      config.API.dataUserOtherHistoryByType(
-        dataPerson.officerLink,
-        idByRow.value
-      )
-    )
+    .get(config.API.dataUserOtherHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
@@ -146,7 +142,8 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
   getData();
 });
 </script>
diff --git a/src/modules/10_registry/components/DialogAddRequestEdit.vue b/src/modules/10_registry/components/DialogAddRequestEdit.vue
index 24381ac..92a4ac8 100644
--- a/src/modules/10_registry/components/DialogAddRequestEdit.vue
+++ b/src/modules/10_registry/components/DialogAddRequestEdit.vue
@@ -16,6 +16,7 @@ import { useCounterMixin } from "@/stores/mixin";
  * use
  */
 const $q = useQuasar();
+const link = ref<string>('')
 const store = useRequestEditStore();
 const dataStore = useDataStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
@@ -55,7 +56,7 @@ function onSubmit() {
     async () => {
       showLoader();
       await http
-        .post(config.API.requestsEditByType(dataStore.officerLink), {
+        .post(config.API.requestsEditByType(link.value), {
           topic: formData.topic,
           detail: formData.detail,
           [dataStore.officerType === "OFFICER"
@@ -191,8 +192,9 @@ function onInfo(val: string) {
 
 watch(
   () => modal.value,
-  () => {
+  async () => {
     modal.value && fetchProfile();
+    link.value = await dataStore.getProFileType();
   }
 );
 </script>
diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index 5312ae4..783cc86 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -14,6 +14,7 @@ import type { DataOption } from "@/modules/10_registry/interface/index/Main";
 import Workflow from "@/components/Workflow/Main.vue";
 
 const $q = useQuasar();
+const link = ref<string>('')
 const store = useRequestEditStore();
 const dataStore = useDataStore();
 const router = useRouter();
@@ -39,7 +40,7 @@ const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเ
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.requestEditByType(dataStore.officerLink) + `${requestId.value}`)
+    .get(config.API.requestEditByType(link.value) + `${requestId.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       dataRequest.value = {
@@ -122,6 +123,7 @@ async function downloadUrl(id: string, fileName: string) {
 }
 
 onMounted(async () => {
+  link.value = await dataStore.getProFileType();
   await fetchData();
 });
 </script>
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 9b1a67e..9d52232 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -33,6 +33,7 @@ import { useCounterMixin } from "@/stores/mixin";
  */
 const $q = useQuasar();
 const store = useRequestEditStore();
+const link = ref<string>('')
 const router = useRouter();
 const dataStore = useDataStore()
 const { showLoader, hideLoader, messageError, dialogRemove, success } =
@@ -149,7 +150,7 @@ function fetchListRequset() {
   };
   showLoader();
   http
-    .get(config.API.requestEditByType(dataStore.officerLink) + `user`, { params: queryParams })
+    .get(config.API.requestEditByType(link.value) + `user`, { params: queryParams })
     .then((res) => {
       const data = res.data.result;
       maxPage.value = Math.ceil(data.total / pageSize.value);
@@ -275,7 +276,8 @@ watch(
   }
 );
 
-onMounted(() => {
+onMounted(async() => {
+  link.value = await dataStore.getProFileType();
   fetchListRequset();
 });
 </script>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 6a41a2b..271f7c0 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -91,8 +91,7 @@ export const useDataStore = defineStore("data", () => {
   async function getData(dataPerson: any) {
     const data = await dataPerson;
     isProbation.value = data.isProbation;
-    officerType.value = data.type;
-    officerLink.value = await convertEmType(data.type);
+
     formData.prefix = data.prefix;
     formData.firstName = data.firstName;
     formData.lastName = data.lastName;
@@ -107,17 +106,18 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function getProFileType() {
-    http
-      .get(config.API.proFileType)
-      .then(async (res) => {
-        const data = res.data.result;
-        officerType.value = data.type;
-        officerLink.value = await convertEmType(data.type);
-        hideLoader();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      });
+    if (officerType.value == "") {
+      await http
+        .get(config.API.proFileType)
+        .then(async (res) => {
+          const data = await res.data.result;
+          officerType.value = data;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        });
+    }
+    return convertEmType(officerType.value);
   }
 
   return {
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index eec6a9f..d368a44 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -15,7 +15,6 @@ const route = useRoute();
 const router = useRouter();
 
 const $q = useQuasar();
-const profileImg = ref<string>("");
 const dataStore = useDataStore();
 
 const mixin = useCounterMixin();
@@ -52,10 +51,11 @@ async function checkUser() {
     .then(async (res) => {
       const data = await res.data.result;
       await dataStore.getData(data);
+      await dataStore.getProFileType();
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
       } else {
-        profileImg.value = avatar;
+        
         dataStore.profileImg = avatar;
       }
     })
@@ -83,7 +83,6 @@ function getImg(id: string, pathName: string) {
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
     .then((res) => {
-      profileImg.value = res.data.downloadUrl;
       dataStore.profileImg = res.data.downloadUrl;
     })
     .catch((e) => {
@@ -471,7 +470,7 @@ function onInfo() {
             <q-item dense v-close-popup class="q-pa-none q-pl-xs">
               <q-item-section avatar class="q-pa-none" style="min-width: 30px">
                 <q-img
-                  :src="profileImg"
+                  :src="dataStore.profileImg"
                   class="border-100"
                   spinner-color="white"
                   style="height: 30px; max-width: 30px"