diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index ac47228f117c032492398111a693d5d407b4fdbc..13c5f9026409a97cf341a3184287ea3a515c0704 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -16,7 +16,7 @@
                             <h1 class="text-blue">Buat KPI</h1>
                             <hr class="my-4 " style="border: 1px solid #6992b4">
                         </div>
-                        <form @submit="insert" autocomplete="off" id="formAdmin">
+                        <form @submit="insert" autocomplete="off" id="formKPI">
                         <div class="row p-3">
                                 <div class="col">
                                         <div class="mb-3 me-3">
@@ -34,13 +34,13 @@
                                             class="form-select"
                                             aria-label="Default select example"
                                             id="typeInput">
-                                            <option value="Harian" selected>Harian</option>
-                                            <option value="Mingguan">Mingguan</option>
-                                            <option value="Bulanan">Bulanan</option>
-                                            <option value="Custom">Custom</option>
+                                            <option value="daily" selected>Harian</option>
+                                            <option value="weekly">Mingguan</option>
+                                            <option value="monthly">Bulanan</option>
+                                            <option value="custom">Custom</option>
                                         </select>
                                     </div>
-                                    <div v-show="period_type == 'Custom'" class="mb-3 me-3">
+                                    <div v-if="period_type == 'custom'" class="mb-3 me-3">
                                         <label for="deadlineInput" class="text-blue"> Waktu Deadline </label>
                                         <input v-model="deadline" type="date" id="deadlineInput" class="form-control" required>
                                     </div>
@@ -62,7 +62,7 @@
                                             class="form-select"
                                             aria-label="Default select example"
                                             id="typeInput">
-                                            <option value="Angka" selected>Angka</option>
+                                            <option value="number" selected>Angka</option>
                                             <option value="Persentase">Persentase</option>
                                         </select>
                                     </div>
@@ -107,32 +107,48 @@ export default {
             description: "",
             target: "",
             inverted: false,
-            target_type: "Angka",
+            target_type: "number",
             weight: 0,
-            period_type: "Harian",
-            deadline: "",
+            period_type: "Daily",
+            deadline: null,
             deadline_time: "",
         }
     },
     methods: {
         insert(e){
             e.preventDefault();
+            if (this.inverted){
+                this.inverted = 1
+            }else{
+                this.inverted = 0
+            }
+
+            if (this.period_type != "custom"){
+                this.deadline = null
+            }
+
             let data = {
-                username: this.username, 
-                email: this.email,
-                password: this.password,
-                password_confirmation: this.password}
-            HTTP.post("register", data, {
+                name: this.kpi_name, 
+                description: this.description,
+                target: this.target,
+                is_score_inverted: this.inverted,
+                target_type: this.target_type,
+                weight: this.weight,
+                period_type: this.period_type,
+                deadline: this.deadline,
+                deadline_time: this.deadline_time}
+            console.log(data)
+            HTTP.post("kpis", data, {
                 headers:{
                     'Content-Type': 'application/json'
                 }
             }).then((res)=>{
                 if (res.status == 200){
-                    alert("Admin berhasil ditambahkan")
-                    document.getElementById("formAdmin").reset();
+                    alert("KPI berhasil dibuat")
+                    document.getElementById("formKPI").reset();
                 }
-            }).catch(()=>{
-                alert("Gagal menambahkan Admin")
+            }).catch((err)=>{
+                alert(err)
             })
             
         }
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index bb102b5b2808815ad8ffc545815e0439bb3209c1..858cfca3068cc4ef9040927ae814181d6eb81a15 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -35,10 +35,10 @@
                                             aria-label="Default select example"
                                             id="typeInput"
                                             disabled>
-                                            <option value="Harian" selected>Harian</option>
-                                            <option value="Mingguan">Mingguan</option>
-                                            <option value="Bulanan">Bulanan</option>
-                                            <option value="Custom">Custom</option>
+                                            <option value="daily" selected>Harian</option>
+                                            <option value="weekly">Mingguan</option>
+                                            <option value="monthly">Bulanan</option>
+                                            <option value="custom">Custom</option>
                                         </select>
                                     </div>
                                     <div v-show="period_type == 'Custom'" class="mb-3 me-3">
@@ -58,8 +58,8 @@
                                             class="form-select"
                                             aria-label="Default select example"
                                             id="typeInput" disabled>
-                                            <option value="Angka" selected>Angka</option>
-                                            <option value="Persentase">Persentase</option>
+                                            <option value="number" selected>Angka</option>
+                                            <option value="precentage">Persentase</option>
                                         </select>
                                     </div>
                                     <div class="mb-3">
@@ -85,7 +85,7 @@
                                 <v-select multiple v-model="selected_employee"
                                  :options="employees"
                                  label="name"
-                                 :selectable="(option) => !assignees.some(assignee => assignee.employee_id === option.employee_id)">
+                                 :selectable="(option) => !assignees.some(assignee => assignee.id === option.id)">
                                 </v-select>
                             </div>
                             <div class="col">
@@ -112,7 +112,7 @@
 import Header from "../components/header"
 import Sidebar from "../components/sidebar"
 import Table from "../components/table"
-// import { HTTP } from '../http-common'
+import { HTTP } from '../http-common'
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
 
@@ -145,7 +145,7 @@ export default {
             columns: {
                 Id : {
                 name : "Id",
-                data : "employee_id",
+                data : "id",
                 hidden : true,
                 clickable : false
                 },
@@ -159,7 +159,7 @@ export default {
             assignees: [],
             temp_assignees: [
                 {
-                    employee_id : 1,
+                    id : 1,
                     name : "Budi"
                 }
             ],
@@ -167,31 +167,31 @@ export default {
             selected_employee: [],
             temp_employees: [
             {
-            employee_id: 1,
+            id: 1,
             name: "Budi",
             },
             {
-            employee_id: 2,
+            id: 2,
             name: "Asep",
             },
             {
-            employee_id: 3,
+            id: 3,
             name: "Yana",
             },
             {
-            employee_id: 4,
+            id: 4,
             name: "Yusuf",
             },
             {
-            employee_id: 5,
+            id: 5,
             name: "Siti",
             },
             {
-            employee_id: 6,
+            id: 6,
             name: "Yuni",
             },
             {
-            employee_id: 7,
+            id: 7,
             name: "Hadi",
             },
       ],
@@ -201,14 +201,25 @@ export default {
         assign(){
             //for all selected_employee attach kpi
             //tambahin ke employees
+            let emp_ids = {employee_ids: []}
             this.selected_employee.forEach((emp) => {
                 this.assignees.push(emp)
+                emp_ids.employee_ids.push(emp.id)
+            })
+            HTTP.post(`kpis/${this.kpi_id}/attach`, emp_ids).catch(()=>{
+                alert("Gagal assign KPI")
+                return
             })
             this.selected_employee = []
         },
         detach(id){
             //detach kpi ke backend
-            this.assignees = this.assignees.filter(x => x.employee_id != id)
+            let emp_ids = {employee_ids: [id]}
+            HTTP.post(`kpis/${this.kpi_id}/detach`, emp_ids).catch(()=>{
+                alert("Gagal menghapus KPI dari karyawan")
+                return
+            })
+            this.assignees = this.assignees.filter(x => x.id != id)
         },
         getBawahan(){
             //get bawahan ke backend
@@ -222,6 +233,10 @@ export default {
         getKpi(){
             this.kpi = this.temp_kpi
             //get kpi dengan id kpi_id
+            // HTTP.get(`kpis/${this.kpi_id}`).then((res)=>{
+            //     console.log(res.data)
+            //     this.kpi = res.data
+            // }).catch(()=> alert("Error loading page"))
         }
 
     },