diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 668cc2b..68a7e16 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const route = useRoute()
+const idKpi = ref<string>(route.params.id.toLocaleString())
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, dialogConfirm, messageError } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
 const isEdit = defineModel<boolean>("isEdit", { required: true });
 
@@ -20,126 +32,148 @@ function close() {
   modal.value = false;
   isEdit.value = false;
 
-  formData.name =  ""
-  formData.group =  []
-  formData.target =  ""
-  formData.isDevelopment70 =  false
-  formData.isDevelopment20 =  false
-  formData.isDevelopment10 =  false
-  formData.achievement10 =  "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
-  formData.achievement5 =  "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
-  formData.achievement0 =  "ไม่ได้ดำเนินการพัฒนา"
+  formData.name = "";
+  formData.group = [];
+  formData.target = "";
+  formData.isDevelopment70 = false;
+  formData.isDevelopment20 = false;
+  formData.isDevelopment10 = false;
+  formData.achievement10 =
+    "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
+  formData.achievement5 =
+    "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
+  formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      name: formData.name,
+      target: formData.target,
+      summary: 0,
+      achievement10: formData.achievement10,
+      achievement5: formData.achievement5,
+      achievement0: formData.achievement0,
+      isDevelopment70: formData.isDevelopment70,
+      isDevelopment20: formData.isDevelopment20,
+      isDevelopment10: formData.isDevelopment10,
+      kpiUserEvaluationId: idKpi.value,
+    };
+    http
+  });
 }
 </script>
 <template>
   <q-dialog persistent v-model="modal">
     <q-card style="width: 80%">
-      <DialogHeader
-        :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
-        :close="close"
-      />
-      <q-separator />
-      <q-card-section>
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            <q-input
-              v-model="formData.name"
-              outlined
-              dense
-              class="inputgreen"
-              label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
-            >
-            </q-input>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formData.name"
+                outlined
+                dense
+                class="inputgreen"
+                label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
+              >
+              </q-input>
+            </div>
+            <div class="column">
+              <q-checkbox
+                v-model="formData.isDevelopment70"
+                label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+              />
+              <q-checkbox
+                v-model="formData.isDevelopment20"
+                label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+              />
+              <q-checkbox
+                v-model="formData.isDevelopment10"
+                label="10 การฝึกอบรมอื่นๆ"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                label="เป้าหมายการนำไปพัฒนางาน"
+                v-model="formData.target"
+                outlined
+                type="textarea"
+                dense
+                class="inputgreen"
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-card bordered>
+                <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
+                  <div class="col-4 text-center">
+                    <span>ระดับคะแนน</span>
+                  </div>
+                  <div class="col-8 text-start">
+                    <span>เกณฑ์การประเมิน</span>
+                  </div>
+                </div>
+                <div class="row q-pa-sm">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>10</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement10"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                    ></q-input>
+                  </div>
+                </div>
+                <q-separator />
+                <div class="row q-pa-sm bg-grey-2">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>5</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement5"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                    ></q-input>
+                  </div>
+                </div>
+                <q-separator />
+                <div class="row q-pa-sm">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>0</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement0"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                    ></q-input>
+                  </div>
+                </div>
+              </q-card>
+            </div>
           </div>
-          <div class="column">
-            <q-checkbox
-              v-model="formData.isDevelopment70"
-              label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-            />
-            <q-checkbox
-              v-model="formData.isDevelopment20"
-              label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-            />
-            <q-checkbox
-              v-model="formData.isDevelopment10"
-              label="10 การฝึกอบรมอื่นๆ"
-            />
-          </div>
-          <div class="col-12">
-            <q-input
-              label="เป้าหมายการนำไปพัฒนางาน"
-              v-model="formData.target"
-              outlined
-              type="textarea"
-              dense
-              class="inputgreen"
-            ></q-input>
-          </div>
-          <div class="col-12">
-            <q-card bordered>
-              <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
-                <div class="col-4 text-center">
-                  <span>ระดับคะแนน</span>
-                </div>
-                <div class="col-8 text-start">
-                  <span>เกณฑ์การประเมิน</span>
-                </div>
-              </div>
-              <div class="row q-pa-sm">
-                <div class="col-4 text-center self-start text-body1">
-                  <span>10</span>
-                </div>
-                <div class="col-8">
-                  <q-input
-                    class="inputgreen"
-                    v-model="formData.achievement10"
-                    outlined
-                    dense
-                    label="เกณฑ์การประเมิน"
-                  ></q-input>
-                </div>
-              </div>
-              <q-separator />
-              <div class="row q-pa-sm bg-grey-2">
-                <div class="col-4 text-center self-start text-body1">
-                  <span>5</span>
-                </div>
-                <div class="col-8">
-                  <q-input
-                    class="inputgreen"
-                    v-model="formData.achievement5"
-                    outlined
-                    dense
-                    label="เกณฑ์การประเมิน"
-                  ></q-input>
-                </div>
-              </div>
-              <q-separator />
-              <div class="row q-pa-sm">
-                <div class="col-4 text-center self-start text-body1">
-                  <span>0</span>
-                </div>
-                <div class="col-8">
-                  <q-input
-                    class="inputgreen"
-                    v-model="formData.achievement0"
-                    outlined
-                    dense
-                    label="เกณฑ์การประเมิน"
-                  ></q-input>
-                </div>
-              </div>
-            </q-card>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
+        </q-card-section>
+        <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>