From 991e44f157686b7f8e5473b700ae0f7733b71fd5 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 19 Apr 2024 15:30:39 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/01_Assessment.vue   |  35 +-
 .../components/Tab/02_CommanderAbove.vue      |   2 +-
 .../Tab/03_CommanderAboveOneStep.vue          |   2 +-
 src/modules/08_KPI/components/Tab/04_File.vue |   2 +-
 .../components/Tab/Dialog/01_Dialog.vue       | 313 +++++++++---------
 .../components/Tab/Dialog/04_Dialog.vue       | 197 ++++++-----
 .../components/Tab/Topic/01_Template.vue      |  12 +-
 .../components/Tab/Topic/02_Template.vue      |   9 +-
 src/modules/08_KPI/views/TabMain.vue          |  18 +-
 src/modules/08_KPI/views/form.vue             |  57 ++--
 src/modules/08_KPI/views/main.vue             |   2 +-
 11 files changed, 345 insertions(+), 304 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 1f45562..1d4c17e 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -36,10 +36,10 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-scroll-area style="height: 400px" class="bg-white row col-12">
-    <div class="text-weight-bold text-body1">
-      <span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
-      <span> ผลสัมฤทธิ์ของงาน</span>
+  <q-scroll-area style="height: 56vh" class="bg-white row col-12 text-dark q-pa-md">
+    <div class="text-weight-bold text-body2">
+      <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
+      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
     </div>
 
     <div class="q-gutter-md q-mt-sm">
@@ -47,33 +47,32 @@ onMounted(() => {
       <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
       <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
       <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
-      <div class="row text-body1 text-weight-bold">
-        <div class="col-5 text-center">
+      <div class="row text-body2 text-weight-bold">
+        <div class="col-6 text-center row justify-center">
           <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+          <div class="text-primary q-pl-md">{{ total }}</div>
         </div>
-        <div class="col-1 text-primary">{{ total }}</div>
-        <div class="col-5 text-center">
+        
+        <div class="col-6 text-center row justify-center">
           <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+           <div class="text-primary q-pl-md">{{ resultWork }}</div>
         </div>
-        <div class="col-1 text-primary">{{ resultWork }}</div>
       </div>
 
-      <q-separator class="q-py-xs" />
+      <q-separator size="3px" class="q-my-lg" />
 
       <!-- องค์ประกอบที่ 2 -->
-      <div class="text-weight-bold text-body1 q-mb-sm">
-        <span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
-        <span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+      <div class="text-weight-bold text-body2 q-mb-sm">
+        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
+        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
       </div>
 
       <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
       <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
 
-      <div class="row justify-evenly text-body1 text-weight-bold">
-        <div class="col-5 text-right">
-          <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
-        </div>
-        <div class="col-5 text-primary">{{ resultEvaluation }}</div>
+      <div class="row text-body2 text-weight-bold justify-center">
+        <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
       </div>
     </div>
   </q-scroll-area>
diff --git a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
index e894c43..d33dbfe 100644
--- a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
+++ b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>2</div>
+    <div class="q-pa-md">2</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
index cb489dc..c60e299 100644
--- a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
+++ b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>3</div>
+    <div class="q-pa-md">3</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/04_File.vue b/src/modules/08_KPI/components/Tab/04_File.vue
index c8199f4..dd2618a 100644
--- a/src/modules/08_KPI/components/Tab/04_File.vue
+++ b/src/modules/08_KPI/components/Tab/04_File.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>4</div>
+    <div class="q-pa-md">4</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
index 628e956..1314c8e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
@@ -4,7 +4,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 const numpage = defineModel<number>("numpage", { required: true });
-const splitterModel = ref<number>(30);
+const splitterModel = ref<number>(25);
 const search = ref<string>("");
 
 const define = ref<string>("");
@@ -88,7 +88,7 @@ function onSubmit() {}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 85%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
       <DialogHeader
         :tittle="
@@ -101,162 +101,156 @@ function onSubmit() {}
       <q-separator />
 
       <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-        <q-splitter v-model="splitterModel" disable>
-          <template v-slot:before>
-            <div class="bg-grey-1 q-pa-md">
-              <q-input
-                v-model="search"
-                outlined
-                dense
-                label="ค้นหา"
-                bg-color="white"
-                :class="getclass()"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="search == ''" name="search" />
-                  <q-icon
-                    v-if="search !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="search = ''"
-                  />
-                </template>
-              </q-input>
-              <q-card flat bordered class="q-mt-sm">
-                <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                  <div class="col-4">
-                    <span>รหัสตัวชี้วัด</span>
+        <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 fit">
+                <div class="col-12 ">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    :class="getclass()"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="search = ''"
+                      />
+                    </template>
+                  </q-input>
                   </div>
-                  <div class="col-4">
-                    <span>ชื่อตัวชี้วัด</span>
+                  <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
+                    <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                      <div class="col-4">
+                        <span>รหัสตัวชี้วัด</span>
+                      </div>
+                      <div class="col-4">
+                        <span>ชื่อตัวชี้วัด</span>
+                      </div>
+                    </div>
+                    <q-separator/>
+
+                    <q-card-section class="q-pa-none">
+                        <q-list
+                          separator
+                          dense
+                        >
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                          :key="index"
+                            clickable
+                            v-ripple
+                            :active="listCheck === index"
+                            active-class="my-menu-link"
+                            @click="clickList(index, item.id)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center" style="height: 20px">
+                                <div class="col-4">
+                                  <span>{{ item.metricCode }}</span>
+                                </div>
+                                <div class="col-4">
+                                  <span>{{ item.indicatorName }}</span>
+                                </div>
+                              </div>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                    </q-card-section>
+                  </q-card>
+                </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8">
+                  <q-card bordered class="full-height q-pa-sm">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4 row ">
+                  <div class="row col-12 card-box">
+                    <div class="col-12 bg-grey-2 row items-center text-weight-medium">
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    
+                    <div
+                      v-for="(field, index) in Object.keys(fieldLabels)"
+                      :key="index + 1"
+                      class="row col-12 items-center lineTop"
+                    >
+                        <div
+                          class="col-6 text-center text-body2"
+                        >
+                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                        </div>
+                        <div class="col-6 text-center text-primary">
+                          <span>{{
+                            formScore[field] ? formScore[field] : "-"
+                          }}</span>
+                        </div>
+                        
+                      
+                    </div>
                   </div>
                 </div>
-
-                <q-separator />
-                <q-card-section class="q-pa-none">
-                  <q-scroll-area
-                    style="height: 71vh"
-                    class="bg-white row col-12"
-                  >
-                    <q-list
-                      v-for="(item, index) in listTarget"
-                      :key="index"
-                      bordered
-                      separator
-                    >
-                      <q-item
-                        clickable
-                        v-ripple
-                        :active="listCheck === index"
-                        active-class="my-menu-link"
-                        @click="clickList(index, item.id)"
-                      >
-                        <q-item-section class="q-pa-none">
-                          <div class="row items-center" style="height: 20px">
-                            <div class="col-4">
-                              <span>{{ item.metricCode }}</span>
-                            </div>
-                            <div class="col-4">
-                              <span>{{ item.indicatorName }}</span>
-                            </div>
-                          </div>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-scroll-area>
-                </q-card-section>
-              </q-card>
-            </div>
-          </template>
-
-          <template v-slot:after>
-            <div class="row q-pa-md q-col-gutter-md">
-              <div class="col-12">
-                <span class="text-body1 text-weight-bold"
-                  >รายละเอียดตัวชี้วัด</span
-                >
-              </div>
-              <div class="col-8">
-                <q-card bordered class="full-height">
-                  <div
-                    v-for="(field, index) in Object.keys(fieldDetailLabels)"
-                    :key="index + 1"
-                  >
-                    <div class="row q-pa-md">
-                      <div class="col-3 text-grey-6 text-weight-medium">
-                        {{
-                          fieldDetailLabels[
-                            field as keyof typeof fieldDetailLabels
-                          ]
-                        }}
-                      </div>
-                      <div class="col-7">
-                        <span>{{
-                          formDetail[field] ? formDetail[field] : "-"
-                        }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-4">
-                <q-card bordered>
-                  <div class="bg-grey-2 row q-py-sm text-weight-bold">
-                    <div class="col-6 text-center">ระดับคะแนน</div>
-                    <div class="col-6 text-center">ผลสำเร็จของงาน</div>
-                  </div>
-                  <div
-                    v-for="(field, index) in Object.keys(fieldLabels)"
-                    :key="index + 1"
-                  >
-                    <div class="row q-py-lg">
-                      <div
-                        class="col-6 text-center text-body1 text-weight-bold"
-                      >
-                        {{ fieldLabels[field as keyof typeof fieldLabels] }}
-                      </div>
-                      <div class="col-6 text-center">
-                        <span>{{
-                          formScore[field] ? formScore[field] : "-"
-                        }}</span>
-                      </div>
-                    </div>
-                    <div
-                      class="col-12"
-                      v-if="index !== Object.keys(fieldLabels).length - 1"
-                    >
-                      <q-separator />
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="define"
-                  label="นิยามหรือความหมายของตัวชี้วัด"
-                  type="textarea"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
-                  hide-bottom-space
-                  :class="getclass()"
-                />
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="formula"
-                  label="สูตรคำนวณ"
-                  type="textarea"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
-                  hide-bottom-space
-                  :class="getclass()"
-                />
+                <div class="col-12">
+                  <q-input
+                    v-model="define"
+                    label="นิยามหรือความหมายของตัวชี้วัด"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formula"
+                    label="สูตรคำนวณ"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
               </div>
             </div>
-          </template>
-        </q-splitter>
+          </div>
       </q-card-section>
       <q-separator />
 
@@ -278,4 +272,17 @@ function onSubmit() {}
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
index 6a31ada..12aa2e5 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -110,115 +110,116 @@ function onSubmit() {}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 85%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
         <q-separator />
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-          <q-splitter v-model="splitterModel" disable>
-            <template v-slot:before>
-              <div class="bg-grey-1 q-pa-md q-gutter-sm">
-                <q-select
-                  v-model="type"
-                  outlined
-                  label="ประเภทสมรรถนะ"
-                  dense
-                  bg-color="white"
-                  option-label="name"
-                  option-value="id"
-                  :options="competencyTypeOp"
-                  emit-value
-                  :class="getclass()"
-                  map-options
-                />
-                <q-input
-                  v-model="search"
-                  outlined
-                  dense
-                  label="ค้นหา"
-                  bg-color="white"
-                  :class="getclass()"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="search == ''" name="search" />
-                    <q-icon
-                      v-if="search !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="search = ''"
-                    />
-                  </template>
-                </q-input>
-                <q-card flat bordered>
-                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                    <div class="col-4">
-                      <span>รหัสตัวชี้วัด</span>
+          <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 q-col-gutter-sm fit">
+                <div class="col-12 ">
+                  <q-select
+                    v-model="type"
+                    outlined
+                    label="ประเภทสมรรถนะ"
+                    dense
+                    bg-color="white"
+                    option-label="name"
+                    option-value="id"
+                    :options="competencyTypeOp"
+                    emit-value
+                    :class="getclass()"
+                    map-options
+                  />
+                </div>
+                <div class="col-12 ">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    bg-color="white"
+                    :class="getclass()"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="search = ''"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12 ">
+                  <q-card bordered flat class="no-shadow bg-white col-12">
+                    <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                      <div class="col-4">
+                        <span>รหัสตัวชี้วัด</span>
+                      </div>
+                      <div class="col-4">
+                        <span>ชื่อตัวชี้วัด</span>
+                      </div>
                     </div>
-                    <div class="col-4">
-                      <span>ชื่อตัวชี้วัด</span>
-                    </div>
-                  </div>
 
-                  <q-separator />
-                  <q-card-section class="q-pa-none">
-                    <q-scroll-area
-                      style="height: 33vh"
-                      class="bg-white row col-12"
-                    >
-                      <q-list
-                        v-for="(item, index) in listTarget"
-                        :key="index"
-                        bordered
-                        separator
-                      >
-                        <q-item
-                          clickable
-                          v-ripple
-                          :active="listCheck === index"
-                          active-class="my-menu-link"
-                          @click="clickList(index, item.id)"
+                    <q-separator />
+                    <q-card-section class="q-pa-none">
+                        <q-list
+                          separator
+                          dense
                         >
-                          <q-item-section class="q-pa-none">
-                            <div class="row items-center" style="height: 20px">
-                              <div class="col-4">
-                                <span>{{ item.metricCode }}</span>
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                            :key="index"
+                            clickable
+                            v-ripple
+                            :active="listCheck === index"
+                            active-class="my-menu-link"
+                            @click="clickList(index, item.id)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center" style="height: 20px">
+                                <div class="col-4">
+                                  <span>{{ item.metricCode }}</span>
+                                </div>
+                                <div class="col-4">
+                                  <span>{{ item.indicatorName }}</span>
+                                </div>
                               </div>
-                              <div class="col-4">
-                                <span>{{ item.indicatorName }}</span>
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-scroll-area>
-                  </q-card-section>
-                </q-card>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                    </q-card-section>
+                  </q-card>
+                </div>
               </div>
-            </template>
+            </div>
 
-            <template v-slot:after>
-              <div class="row q-pa-md q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row col-12 q-pa-md q-col-gutter-sm">
                 <div class="col-12">
-                  <span class="text-body1 text-weight-bold"
+                  <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-8">
-                  <q-card bordered class="full-height">
+                <div class="col-8 row">
+                  <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
                       :key="index + 1"
                     >
-                      <div class="row q-pa-md">
-                        <div class="col-3 text-grey-6 text-weight-medium">
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
                           {{
                             fieldDetailLabels[
                               field as keyof typeof fieldDetailLabels
                             ]
                           }}
                         </div>
-                        <div class="col-7">
+                        <div class="col-8">
                           <span>{{
                             formDetail[field] ? formDetail[field] : "-"
                           }}</span>
@@ -227,19 +228,20 @@ function onSubmit() {}
                     </div>
                   </q-card>
                 </div>
-                <div class="col-4">
-                  <q-card bordered>
-                    <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                <div class="col-4 row ">
+                  <q-card bordered class="col-12 row no-shadow">
+                    <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                       <div class="col-6 text-center">ระดับคะแนน</div>
                       <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                     </div>
                     <div
                       v-for="(field, index) in Object.keys(fieldLabels)"
                       :key="index + 1"
+                      class="col-12"
                     >
-                      <div class="row q-py-lg">
+                      <div class="row col-12 q-py-sm">
                         <div
-                          class="col-6 text-center text-body1 text-weight-bold"
+                          class="col-6 text-center text-body2"
                         >
                           {{ fieldLabels[field as keyof typeof fieldLabels] }}
                         </div>
@@ -259,8 +261,8 @@ function onSubmit() {}
                   </q-card>
                 </div>
               </div>
-            </template>
-          </q-splitter>
+            </div>
+          </div>
         </q-card-section>
         <q-separator />
 
@@ -279,4 +281,17 @@ function onSubmit() {}
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
index ef5c41d..dfbb22f 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
@@ -102,22 +102,24 @@ function onAdd() {
 }
 </script>
 <template>
-  <q-card bordered style="border-radius: 5px">
-    <q-card-section class="bg-grey-3 q-py-sm">
-      <span class="text-weight-bold">{{ title }}</span>
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <span class="text-weight-medium">{{ title }}</span>
       <q-btn
         class="q-ml-xs"
         flat
         round
         icon="mdi-plus"
         color="primary"
-        size="md"
+        size="12px"
+        dense
         @click="onAdd"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </q-card-section>
-    <q-card-section>
+    <q-separator/>
+    <q-card-section class="q-pa-sm">
       <q-table
         ref="table"
         :columns="columns"
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Template.vue b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
index cda94dc..8335cc1 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
@@ -86,22 +86,23 @@ function onAdd() {
 }
 </script>
 <template>
-  <q-card bordered style="border-radius: 5px">
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
     <q-card-section class="bg-grey-3 q-py-sm">
-      <span class="text-weight-bold">{{ title }}</span>
+      <span class="text-weight-medium">{{ title }}</span>
       <q-btn
         class="q-ml-xs"
         flat
         round
         icon="mdi-plus"
         color="primary"
-        size="md"
+        size="12px"
+        dense
         @click="onAdd"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </q-card-section>
-    <q-card-section>
+    <q-card-section class="q-pa-sm">
       <q-table
         ref="table"
         :columns="columns"
diff --git a/src/modules/08_KPI/views/TabMain.vue b/src/modules/08_KPI/views/TabMain.vue
index fec1e92..dd1eeba 100644
--- a/src/modules/08_KPI/views/TabMain.vue
+++ b/src/modules/08_KPI/views/TabMain.vue
@@ -28,20 +28,28 @@ const itemsTab = ref<any>([
   },
 ]);
 
-const splitterModel = ref<number>(15);
+const splitterModel = ref<number>(12);
 </script>
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
-      <q-tabs v-model="store.tabMain" vertical class="text-blue">
-        <q-tab
+      <q-tabs v-model="store.tabMain" vertical class="text-grey-7 text-weight-light" active-class="bg-blue-1 text-blue-8 text-weight-bold">
+        <!-- <q-tab
           class="hover-tab"
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
           :icon="tab.icon"
           :label="tab.label"
-        />
+        /> -->
+        <q-tab name="1" label="ผู้ขอรับการประเมิน" />
+        <q-tab name="2" label="ผู้บังคับบัญชา">
+         <div class="text-caption">เหนือขึ้นไป</div>
+        </q-tab>
+        <q-tab name="3" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
+        </q-tab>
+        <q-tab name="4" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>
 
@@ -53,12 +61,12 @@ const splitterModel = ref<number>(15);
         vertical
         transition-prev="jump-up"
         transition-next="jump-up"
-        class="q-px-md"
       >
         <q-tab-panel
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
+          class="q-pa-none"
         >
           <Assessment v-if="store.tabMain === '1'" />
           <CommanderAbove v-if="store.tabMain === '2'" />
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d42f446..9750935 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -28,7 +28,7 @@ const formProfile = reactive<FormProfile>({
   status: "จัดเตรียมข้อมูล",
   score: "100",
   avartar:
-    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
+    "https://cdn.quasar.dev/img/boy-avatar.png",
 });
 
 const router = useRouter();
@@ -77,12 +77,20 @@ onMounted(() => {
         >
       </div>
       <div class="col-12">
-        <q-card bordered flatclass="relative-position">
-          <div class="column">
-            <div class="row items-center">
-              <div class="offset-2 col-10">
-                <q-toolbar class="q-pl-none">
-                  <span class="text-h6 text-bold text-primary">{{
+        <q-card bordered flat class="relative-position"> 
+          <div
+              class="absolute"
+              style="left: 2%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="95px">
+                <q-img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+          <div class="row col-12">
+            <div class="row items-center col-12 q-pa-sm">
+              <div class="col-12" style="padding-left: 12%;">
+                <div class="row col-12 items-center">
+                  <span class="text-h6 text-weight-medium text-primary">{{
                     formProfile.fullName ? formProfile.fullName : "-"
                   }}</span>
                   <q-space />
@@ -93,6 +101,7 @@ onMounted(() => {
                       icon="mdi-file-eye-outline"
                       color="grey-2"
                       text-color="primary"
+                      size="md"
                     >
                       <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                     </q-btn>
@@ -102,29 +111,23 @@ onMounted(() => {
                       color="grey-2"
                       text-color="blue-5"
                       icon="mdi-file-eye-outline"
+                      size="md"
                     >
                       <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                     </q-btn>
                   </div>
-                </q-toolbar>
+                </div>
               </div>
             </div>
-            <div
-              class="absolute"
-              style="left: 3%; top: 50%; transform: translateY(-50%)"
-            >
-              <q-avatar size="150px">
-                <img :src="formProfile.avartar" />
-              </q-avatar>
-            </div>
+           
 
-            <div class="row items-center bg-teal-1">
-              <div class="offset-2 col-10">
-                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
+            <div class="row items-center bg-toolbar col-12 q-pa-sm">
+              <div class="col-12 q-py-xs" style="padding-left: 12%;">
+                <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ตำแหน่งในสายงาน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.position
                       }}</span>
                     </div>
@@ -132,7 +135,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ประเภท</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.type
                       }}</span>
                     </div>
@@ -140,7 +143,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ระดับชั้นงาน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.level
                       }}</span>
                     </div>
@@ -148,7 +151,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">สถานะการประเมิน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.status
                       }}</span>
                     </div>
@@ -156,7 +159,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">คะแนนประเมิน</span>
-                      <span class="text-weight-bold text-primary">{{
+                      <span class="text-weight-medium text-primary">{{
                         formProfile.score
                       }}</span>
                     </div>
@@ -174,3 +177,9 @@ onMounted(() => {
     </div>
   </div>
 </template>
+<style>
+.bg-toolbar{
+  background-color: #F2FBFA;
+}
+
+</style>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 1d35fa2..953c436 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -130,7 +130,7 @@ onMounted(async () => {
               emit-value
               map-options
             />
-            <q-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
+            <q-btn class="q-ml-sm" flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
               <q-tooltip> เพิ่มข้อมูล </q-tooltip>
             </q-btn>
             <q-space />