From 4164b560ebb0656c8e93f3e2bbdeb7daca30f228 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 12 Mar 2024 15:51:47 +0700
Subject: [PATCH] updated layout registry

---
 .../components/detail/Achievement/Main.vue    |   9 +-
 .../detail/GovernmentInformation/Main.vue     |   9 +-
 .../components/detail/Other/Main.vue          |   9 +-
 .../detail/PersonalInformation/Main.vue       |  14 +-
 .../detail/Salary/01_PositionSalary.vue       | 513 +++++++++---------
 .../detail/Salary/02_NotReceiveSalary.vue     |  10 +-
 .../components/detail/Salary/Main.vue         |  12 +-
 .../components/detail/TabMain.vue             |   3 +-
 .../04_registryNew/views/detailView.vue       |  41 +-
 src/style/quasar-variables.sass               |  10 +
 10 files changed, 320 insertions(+), 310 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/Main.vue b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
index 7b717afeb..6f893ebb7 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
@@ -11,17 +11,16 @@ import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achie
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-medal" class="q-mr-md" />
-      <span>ข้อมูลผลงานและเครื่องราชฯ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-medal" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลผลงานและเครื่องราชฯ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
index 7978d9e98..f9be3a062 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
@@ -10,17 +10,16 @@ import PerformSpecialWork from "@/modules/04_registryNew/components/detail/Gover
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
-      <q-icon name="mdi-account-tie" class="q-mr-md" />
-      <span>ข้อมูลราชการ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-account-tie" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลราชการ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
diff --git a/src/modules/04_registryNew/components/detail/Other/Main.vue b/src/modules/04_registryNew/components/detail/Other/Main.vue
index b981c40ee..767f96360 100644
--- a/src/modules/04_registryNew/components/detail/Other/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Other/Main.vue
@@ -8,17 +8,16 @@ import Documentipline from "@/modules/04_registryNew/components/detail/Other/02_
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
-      <q-icon name="mdi-bookmark" class="q-mr-md" />
-      <span>เอกสารหลักฐานและอื่นๆ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-bookmark" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">เอกสารหลักฐานและอื่นๆ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
index a19b72826..46ed4d66b 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -12,20 +12,16 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div
-      class="text-dark row items-center text-weight-bold"
-      style="font-size: 20px"
-    >
-      <q-icon name="mdi-account" class="q-mr-md" />
-      <span>ข้อมูลส่วนตัว</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-account" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
@@ -33,7 +29,7 @@ const tab = ref<string>("1");
     narrow-indicator
     bordered
   >
-    <q-tab name="1" label="ข้อมูลส่วนตัว" />
+    <q-tab name="1" label="ประวัติส่วนตัว" />
     <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
     <q-tab name="3" label="ข้อมูลที่อยู่" />
     <q-tab name="4" label="ข้อมูลครอบครัว" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 358c2ef7b..2f405bcf4 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -327,11 +327,11 @@ function ocClikcHistory() {
 }
 </script>
 <template>
-  <div class="row items-center q-gutter-sm">
+  <!-- <div class="row items-center q-gutter-sm">
     <div class="toptitle text-dark row items-center q-py-xs">
       ตำแหน่งเงินเดือน
     </div>
-  </div>
+  </div> -->
 
   <q-toolbar style="padding: 0px" class="text-primary">
     <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
@@ -475,290 +475,285 @@ function ocClikcHistory() {
           :close="onClickCloseDialog"
         />
         <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
+        <q-card-section class="q-pa-md bg-grey-1">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12">
-              <q-card flat bordered class="fit q-pa-sm">
-                <div class="row col-12 q-col-gutter-xs">
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      v-model="formDataSalary.date"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          ref="dateRef"
-                          outlined
-                          dense
-                          borderless
-                          :model-value="date2Thai(formDataSalary.date)"
-                          :rules="[
+            <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  v-model="formDataSalary.date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateRef"
+                      outlined
+                      dense
+                      borderless
+                      :model-value="date2Thai(formDataSalary.date)"
+                      :rules="[
                             (val: string) =>
                               !!val ||
                               `${'กรุณาเลือก วัน/เดือน/ปี'}`,
                           ]"
-                          :label="`${'วัน/เดือน/ปี'}`"
-                          hide-bottom-space
-                        >
-                          <template v-slot:prepend>
-                            <q-icon name="event" class="cursor-pointer">
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-input
-                      ref="posNoRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.posNo"
+                      :label="`${'วัน/เดือน/ปี'}`"
                       hide-bottom-space
-                      :label="`${'เลขที่ตำแหน่ง'}`"
-                      :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                     >
+                      <template v-slot:prepend>
+                        <q-icon name="event" class="cursor-pointer"> </q-icon>
+                      </template>
                     </q-input>
-                  </div>
+                  </template>
+                </datepicker>
+              </div>
 
-                  <div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg">
-                    <q-select
-                      ref="templatePosRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.templatePos"
-                      :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
-                      option-label="name"
-                      :options="posNoOptions"
-                      option-value="name"
-                      hide-bottom-space
-                      emit-value
-                      use-input
-                      input-debounce="0"
-                      @update:modelValue="updatePos"
-                      @filter="(inputValue: any,
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="posNoRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.posNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่ตำแหน่ง'}`"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templatePosRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.templatePos"
+                  :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                  option-label="name"
+                  :options="posNoOptions"
+                  option-value="name"
+                  hide-bottom-space
+                  emit-value
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updatePos"
+                  @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                         )"
-                    />
-                  </div>
+                />
+              </div>
 
-                  <div class="col-xs-12 col-sm-12 col-md-12">
-                    <q-input
-                      ref="positionRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.position"
-                      :label="`${'ตำแหน่ง'}`"
-                      type="textarea"
-                      hide-bottom-space
-                      :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    />
-                  </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="positionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.position"
+                  :label="`${'ตำแหน่ง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                />
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-select
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.positionLineName"
-                      :label="`${'สายงาน'}`"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="positionLineOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue: any,
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionLineName"
+                  :label="`${'สายงาน'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionLineOptions"
+                  option-value="id"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
                         )"
-                    />
-                  </div>
+                />
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-select
-                      ref="typePositionRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.typePosition"
-                      :label="`${'ตำแหน่งประเภท'}`"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="posTypeOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
-                      @filter="(inputValue: any,
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="formDataSalary.positionPathSideName"
+                  hide-bottom-space
+                  :label="`${'ด้าน/สาขา'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionExecutiveName"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งทางการบริหาร'}`"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="typePositionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.typePosition"
+                  :label="`${'ตำแหน่งประเภท'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="posTypeOptions"
+                  option-value="id"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                  @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                         )"
-                    />
-                  </div>
+                />
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-3">
-                    <q-select
-                      ref="levelPositionRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.levelPosition"
-                      :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                      :label="`${'ระดับ'}`"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="posLevelOption"
-                      option-value="name"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue: any,
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="levelPositionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.levelPosition"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                  :label="`${'ระดับตำแหน่ง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="posLevelOption"
+                  option-value="name"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                           )"
-                    />
-                  </div>
+                />
+              </div>
+              <div class="col-md-4"></div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="salaryRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salary"
+                  label="เงินเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-3">
-                    <q-input
-                      outlined
-                      dense
-                      lazy-rules
-                      v-model="formDataSalary.positionPathSideName"
-                      hide-bottom-space
-                      :label="`${'ด้าน/สาขา'}`"
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-input
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.positionExecutiveName"
-                      hide-bottom-space
-                      :label="`${'ตำแหน่งทางการบริหาร'}`"
-                    >
-                    </q-input>
-                  </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryPos"
+                  label="เงินประจำตำแหน่ง"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryCompensation"
+                  label="เงินค่าตอบแทนรายเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-4">
-                    <q-input
-                      ref="salaryRef"
-                      dense
-                      outlined
-                      v-model="formDataSalary.salary"
-                      label="เงินเดือน"
-                      mask="###,###,###,###"
-                      reverse-fill-mask
-                      :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                  </div>
+              <div class="col-xs-6 col-sm-6 col-md-12">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.refCommandNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่คำสั่ง'}`"
+                  mask="#####################"
+                >
+                  <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                </q-input>
+              </div>
 
-                  <div class="col-xs-6 col-sm-6 col-md-4">
-                    <q-input
-                      ref="amountRef"
-                      dense
-                      outlined
-                      v-model="formDataSalary.salaryPos"
-                      label="เงินประจำตำแหน่ง"
-                      mask="###,###,###,###"
-                      reverse-fill-mask
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-4">
-                    <q-input
-                      ref="amountRef"
-                      dense
-                      outlined
-                      v-model="formDataSalary.salaryCompensation"
-                      label="เงินค่าตอบแทนรายเดือน"
-                      mask="###,###,###,###"
-                      reverse-fill-mask
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                  </div>
-
-                  <div class="col-xs-6 col-sm-6 col-md-12">
-                    <q-input
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.refCommandNo"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                      mask="#####################"
-                    >
-                      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
-                    </q-input>
-                  </div>
-
-                  <div class="col-xs-12 col-sm-12 col-md-12">
-                    <q-select
-                      ref="templateDocRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.templateDoc"
-                      :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                      option-label="name"
-                      :options="docOption"
-                      option-value="name"
-                      emit-value
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @update:modelValue="updateDoc"
-                      @filter="(inputValue: any,
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templateDocRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.templateDoc"
+                  :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                  option-label="name"
+                  :options="docOption"
+                  option-value="name"
+                  emit-value
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updateDoc"
+                  @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                           )"
-                    />
-                  </div>
+                />
+              </div>
 
-                  <div class="col-xs-12 col-sm-12 col-md-12">
-                    <q-input
-                      ref="docRef"
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formDataSalary.doc"
-                      :label="`${'เอกสารอ้างอิง'}`"
-                      type="textarea"
-                      hide-bottom-space
-                      :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                    />
-                  </div>
-                </div>
-              </q-card>
-            </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="docRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.doc"
+                  :label="`${'เอกสารอ้างอิง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                />
+              </div>
+            </q-card>
           </div>
         </q-card-section>
         <q-separator />
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index 51b4ebc17..73a124a76 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -183,11 +183,11 @@ function ocClikcHistory() {
 }
 </script>
 <template>
-  <div class="row items-center q-gutter-sm">
+  <!-- <div class="row items-center q-gutter-sm">
     <div class="toptitle text-dark row items-center q-py-xs">
       บันทึกวันที่ไม่ได้รับเงินเดือนฯ
     </div>
-  </div>
+  </div> -->
   <q-toolbar style="padding: 0px" class="text-primary">
     <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
       <q-tooltip>เพิ่ม</q-tooltip>
@@ -225,7 +225,7 @@ function ocClikcHistory() {
     <q-btn-toggle
       v-model="modelView"
       toggle-color="grey-4"
-      class="no-shadow"
+      class="no-shadow toggle-borderd"
       :options="[
         { value: 'table', slot: 'table' },
         { value: 'card', slot: 'card' },
@@ -234,7 +234,7 @@ function ocClikcHistory() {
       <template v-slot:table>
         <q-icon
           name="format_list_bulleted"
-          size="24px"
+          size="sm"
           :style="{
             color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
@@ -243,7 +243,7 @@ function ocClikcHistory() {
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
-          size="24px"
+          size="sm"
           :style="{
             color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
diff --git a/src/modules/04_registryNew/components/detail/Salary/Main.vue b/src/modules/04_registryNew/components/detail/Salary/Main.vue
index ba24c14ab..1d01bc502 100644
--- a/src/modules/04_registryNew/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/Main.vue
@@ -8,20 +8,16 @@ import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div
-      class="text-dark row items-center text-weight-bold"
-      style="font-size: 20px"
-    >
-      <q-icon name="mdi-cash" class="q-mr-md" />
-      <span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-cash" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลเงินเดือน/ค่าจ้าง</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index e6b174f26..7cacabc1c 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -41,6 +41,7 @@ const itemsTab = ref<any>([
 
 const splitterModel = ref<number>(12);
 </script>
+
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
@@ -64,7 +65,7 @@ const splitterModel = ref<number>(12);
         vertical
         transition-prev="jump-up"
         transition-next="jump-up"
-        class="q-pa-md"
+        class="q-px-md"
       >
         <q-tab-panel
           v-for="(tab, index) in itemsTab"
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 96a8a3d7c..68469e058 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -67,7 +67,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-sm">
+  <div class="row items-center q-gutter-sm q-mb-xs">
     <div class="toptitle text-dark row items-center q-py-xs">
       <q-btn
         icon="mdi-arrow-left"
@@ -83,7 +83,7 @@ onMounted(() => {
     </div>
     <q-space />
     <q-btn-dropdown
-      size="16px"
+      size="md"
       rounded
       unelevated
       color="grey-4"
@@ -104,6 +104,7 @@ onMounted(() => {
       color="grey-4"
       text-color="primary"
       icon="mdi-file-eye-outline"
+      size="md"
     >
       <q-tooltip>ดาวน์ไฟล์</q-tooltip>
       <q-menu>
@@ -120,17 +121,19 @@ onMounted(() => {
   </div>
 
   <q-card>
-    <div class="column" style="height: 170px">
+    <div class="column" style="height: 160px">
       <div class="col row items-center">
         <div class="row col-12">
           <div class="col-sm-3 col-md-2"></div>
           <div class="col">
-            <div class="col-12 text-primary" style="font-size: 20px">
-              {{
-                `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
-              }}
+            <div class="col-12 text-primary">
+              <h2 class="title q-ma-none q-pa-none">
+                {{
+                  `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
+                }}
+              </h2>
             </div>
-            <div class="col-12">{{ formDetail?.position }}</div>
+            <div class="col-12 subtitle">{{ formDetail?.position }}</div>
           </div>
         </div>
       </div>
@@ -153,20 +156,20 @@ onMounted(() => {
           <div class="col-sm-3 col-md-2"></div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ตำแหน่งในสายงาน</div>
+              <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
               <div class="col">หัวหน้าสำนักงาน</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ประเภทตำแหน่ง</div>
+              <div class="col text-grey-6">ประเภทตำแหน่ง</div>
               <div class="col">บริหาร</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ระดับตำแหน่งง</div>
-              <div class="col">สำนาญการพิเศษ</div>
+              <div class="col text-grey-6">ระดับตำแหน่งง</div>
+              <div class="col">ชำนาญการพิเศษ</div>
             </div>
           </div>
         </div>
@@ -174,15 +177,27 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <q-card class="q-mt-md">
+  <q-card class="q-mt-md rounded">
     <TabMain />
   </q-card>
 </template>
 
 <style scoped>
+h2.title {
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  font-weight: 500;
+}
+.subtitle {
+  font-size: 1rem;
+  color: #34373c;
+}
 .absolute-center-left {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
+.rounded {
+  border-radius: 10px;
+}
 </style>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 12bf0f847..cfb2edf5b 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -145,3 +145,13 @@ $muti-tab: #87d4cc
 
 .input-alert i.text-primary
     color: #f00 !important
+
+/* registry common style */
+.toggle-borderd 
+  border: 1px solid #ecebeb
+
+h3.resigtry-tab-title 
+  font-size: 1.2rem
+  font-weight: 600
+  margin: 0 0
+  padding: 0 0