diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index 1ff4c6f80241094d844e76ef9d44d02334b31f27..bb102b5b2808815ad8ffc545815e0439bb3209c1 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -13,7 +13,7 @@
                             </router-link>
                         </div>
                         <div class="row p-3">
-                            <h1 class="text-blue">{{this.kpi_name}}</h1>
+                            <h1 class="text-blue">{{this.kpi.kpi_name}}</h1>
                             <hr class="my-4 " style="border: 1px solid #6992b4">
                         </div>
                         <form @submit="insert" autocomplete="off" id="formAdmin">
@@ -21,16 +21,16 @@
                                 <div class="col">
                                         <div class="mb-3 me-3">
                                         <label  for="NameInput" class="text-blue"> Nama </label>
-                                        <input v-model="kpi_name" type="text" id="NameInput" class="form-control" readonly>
+                                        <input v-model="kpi.kpi_name" type="text" id="NameInput" class="form-control" readonly>
                                     </div>
                                         <div class="mb-3 me-3">
                                         <label for="deskripsiInput" class="text-blue"> Deskripsi </label>
-                                        <input v-model="description" type="text" id="deskripsiInput" class="form-control" readonly>
+                                        <input v-model="kpi.description" type="text" id="deskripsiInput" class="form-control" readonly>
                                     </div>
                                     <div class="mb-3 me-3">
                                         <label for="typeInput" class="text-blue"> Periode </label>
                                         <select
-                                            v-model="period_type"
+                                            v-model="kpi.period_type"
                                             class="form-select"
                                             aria-label="Default select example"
                                             id="typeInput"
@@ -43,18 +43,18 @@
                                     </div>
                                     <div v-show="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" readonly>
+                                        <input v-model="kpi.deadline" type="date" id="deadlineInput" class="form-control" readonly>
                                     </div>
                                     <div class="mb-3 me-3">
                                         <label for="deadlineTimeInput" class="text-blue"> Waktu Deadline </label>
-                                        <input v-model="deadline_time" type="time" id="deadlineTimeInput" class="form-control" readonly>
+                                        <input v-model="kpi.deadline_time" type="time" id="deadlineTimeInput" class="form-control" readonly>
                                     </div>
                                 </div>
                                 <div class="col">
                                     <div class="mb-3">
                                         <label for="typeInput" class="text-blue"> Jenis Target </label>
                                         <select
-                                            v-model="target_type"
+                                            v-model="kpi.target_type"
                                             class="form-select"
                                             aria-label="Default select example"
                                             id="typeInput" disabled>
@@ -64,14 +64,14 @@
                                     </div>
                                     <div class="mb-3">
                                         <label for="targetInput" class="text-blue"> Target </label>
-                                        <input v-model="target" type="number" id="tarrgetInput" class="form-control" readonly>
+                                        <input v-model="kpi.target" type="number" id="tarrgetInput" class="form-control" readonly>
                                     </div>
                                     <div class="mb-3">
                                         <label for="weightInput" class="text-blue"> Bobot </label>
-                                        <input v-model="weight" type="number" id="weightInput" class="form-control" readonly>
+                                        <input v-model="kpi.weight" type="number" id="weightInput" class="form-control" readonly>
                                     </div>
                                     <div class="mb-3">
-                                        <input v-model="inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" disabled>
+                                        <input v-model="kpi.inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" disabled>
                                         <label class="form-check-label text-blue ms-2" for="CheckDefault">Target Inverted </label>
                                     </div>
 
@@ -127,17 +127,21 @@ export default {
     },
     data() {
         return{
-            emp_id: 1,
-            kpi_name: "Kebersihan",
-            description: "Lingkungan Salman Bersih",
-            target: 100,
-            inverted: false,
-            target_type: "Persentase",
-            weight: 20,
-            period_type: "Harian",
-            deadline: "",
-            deadline_time: "23:00",
+            temp_kpi : {
+                emp_id: 1,
+                kpi_name: "Kebersihan",
+                description: "Lingkungan Salman Bersih",
+                target: 100,
+                inverted: false,
+                target_type: "Persentase",
+                weight: 20,
+                period_type: "Harian",
+                deadline: "",
+                deadline_time: "23:00",
+            },
+            kpi : {},
             filter: "",
+            kpi_id: "",
             columns: {
                 Id : {
                 name : "Id",
@@ -214,10 +218,16 @@ export default {
             this.assignees = this.temp_assignees
             this.getBawahan()
             //get assignee ke backend then getBawahan
+        },
+        getKpi(){
+            this.kpi = this.temp_kpi
+            //get kpi dengan id kpi_id
         }
 
     },
     mounted(){
+        this.kpi_id = this.$route.params.id
+        this.getKpi()
         this.getAssignee()
     }