diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 7f2524dc8a05688e0d5116eaacc61a860a489534..2742b764d021033973c122343427927ccf85ac36 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -12,7 +12,7 @@
             {{ c.name}}
           </th>
           </template>
-          <th class="text-blue">Aksi</th>
+          <th v-if="this.edit || this.delete" class="text-blue">Aksi</th>
         </tr>
       </thead>
       <tbody>
@@ -35,9 +35,9 @@
               </template>
             </template>
 
-          <td style="text-align: center">
-            <button @click="this.$emit('edit-entry', e[columns.Id.data])" class="btn btn-blue"> <i class="icon ion-android-create" style="font-size: 20px"></i> Edit </button>
-            <button @click="this.$emit('delete-entry', e[columns.Id.data])" class="btn-red"> <i class="icon ion-ios-trash-outline" style="font-size: 23px"></i> </button>
+          <td v-if="this.edit || this.delete" style="text-align: center">
+            <button v-if="this.edit" @click="this.$emit('edit-entry', e[columns.Id.data])" class="btn btn-blue"> <i class="icon ion-android-create" style="font-size: 20px"></i> Edit </button>
+            <button v-if="this.delete" @click="this.$emit('delete-entry', e[columns.Id.data])" class="btn-red"> <i class="icon ion-ios-trash-outline" style="font-size: 23px"></i> </button>
           </td>
         </tr>
       </tbody>
@@ -82,6 +82,15 @@ export default {
     endpoint: String,
     filter: String,
     filter_column: String,
+    edit: {
+      type: Boolean,
+      default: true
+    },
+    delete: {
+      type: Boolean,
+      default: true
+    },
+
 
   },
   data() {
diff --git a/src/router/index.js b/src/router/index.js
index 862b265a3ead2b37c7e456f6c1d218f3c407add5..c2a01246327e62980221cee72f3fa404c7e6bc38 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,8 @@ import AdminEdit from "../views/AdminEdit.vue";
 import KpiIndex from "../views/KpiIndex.vue";
 import Test from "../views/Test.vue";
 import ManagerKpiIndex from "../views/ManagerKpiIndex.vue";
+import ManagerKaryawanIndex from "../views/ManagerKaryawanIndex.vue";
+import ManagerKaryawanDetail from "../views/ManagerKaryawanDetail.vue";
 
 const routes = [
   {
@@ -80,6 +82,16 @@ const routes = [
     name: "ManagerkpiIndex",
     component: ManagerKpiIndex,
   },
+  {
+    path: "/manager/karyawan",
+    name: "ManagerkaryawanIndex",
+    component: ManagerKaryawanIndex,
+  },
+  {
+    path: "/manager/karyawan/:id",
+    name: "ManagerKaryawanDetail",
+    component: ManagerKaryawanDetail,
+  },
   {
     path: "/test",
     name: "test",
diff --git a/src/views/ManagerKaryawanDetail.vue b/src/views/ManagerKaryawanDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe68c842ed8deadb8b3c27176ab4acd834b94ed4
--- /dev/null
+++ b/src/views/ManagerKaryawanDetail.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="container-fluid">
+            <div class="row flex-nowrap">
+                <Sidebar current_page = "About"></Sidebar>
+                <div class="col ps-md-2 pt-2">
+                    <Header></Header>
+                    <div class="row p-3">
+                            <router-link :to="{ path: '/manager/karyawan' }" style="text-decoration: none">
+                            <div class="d-flex flex-row justify-content-start align-items-center illustration" id="back">
+                            <i class="icon ion-chevron-left text-blue" style="font-size: 20px"></i>
+                            <p class="text-blue ms-1">kembali</p>
+                            </div>
+                            </router-link>
+                    </div>
+                    <div class="row p-2">
+                        <div class="col">
+                        <h1 class="text-blue">NAMA</h1>
+                        </div>
+                    </div>
+                    <form @submit="report" autocomplete="off" id="formReport">
+                    <div class="row p-2">
+                        
+                            <div class="col p-2">
+                                <label for="startReport" class="text-blue"> Tanggal awal </label>
+                                <input v-model="startReport" type="date" id="startReport" class="form-control" required>
+                            </div>
+                            <div class="col p-2">
+                                <label for="endReport" class="text-blue"> Tanggal akhir </label>
+                                <input v-model="endReport" type="date" id="endReport" class="form-control" required>
+                            </div>
+                            <div class="col p-2">
+                                <button type="submit" class="btn-blue p-1 mt-3" >Buat Report</button>
+                            </div>
+                    </div>
+                    </form>
+                    <hr class="m-2">
+                    <div class="row p-2">
+                        <h2 class="text-blue">Daftar KPI</h2>
+                    </div>
+                    <div class="row p-2">
+                        <div class="col-6 p-2">
+                        <select
+                            v-model="filter"
+                            class="form-select"
+                            aria-label="Default select example"
+                        >
+                            <option selected value="">Semua</option>
+                            <option v-for="p in periods" :key="p" :value="p.data">{{p.name}}</option>
+                        </select>
+                        </div>
+                    </div>
+                    <div class="row p-2">
+                        <Table2
+                            :endpoint="'kpis'"
+                            :columns="columns"
+                            :filter="filter"
+                            :filter_column="'period_type'"
+                            :edit = "false"
+                            :delete = "false"
+                            @detail-entry="detailKaryawan"
+                        ></Table2>
+                    </div>
+                </div>
+            </div>
+    </div>
+</template>
+
+<script>
+
+import Table2 from "../components/table-2";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+// import { HTTP } from "../http-common";
+
+
+export default {
+    name: "ManagerKaryawanDetail",
+    components: {
+        Header,
+        Sidebar,
+        Table2
+    },
+    data(){
+        return{
+            filter: "",
+            columns: {
+                Id: {
+                name : "Id",
+                data : "id",
+                hidden : true,
+                clickable : false
+                },
+                Nama: {
+                name : "Nama",
+                data : "name",
+                hidden : false,
+                clickable : true
+                },
+                Periode: {
+                name : "Periode",
+                data : "period_type",
+                hidden : false,
+                clickable : false
+                },
+            },
+            periods: [
+                {name: "Harian",
+                data: "daily"},
+                {name: "Mingguan",
+                data: "weekly"},
+                {name: "Bulanan",
+                data: "monthly"},
+                {name: "Tahunan",
+                data: "yearly"},
+                {name: "Custom",
+                data: "custom"},
+            ],
+        }
+    },
+    methods: {
+        detailKaryawan(id){
+            //routing page detail
+            console.log(id)
+        }
+    }
+    
+}
+</script>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.btn-blue {
+  background-color: #6992b4;
+  color: #f1f7fc;
+  border-radius: 8px;
+  margin-right: 5px;
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/ManagerKaryawanIndex.vue b/src/views/ManagerKaryawanIndex.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fcc8ee07cb70bb56c8782d6dfd29e2fdc7b18bda
--- /dev/null
+++ b/src/views/ManagerKaryawanIndex.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="container-fluid">
+            <div class="row flex-nowrap">
+                <Sidebar current_page = "About"></Sidebar>
+                <div class="col ps-md-2 pt-2">
+                    <Header></Header>
+                    <div class="row p-2">
+                        <div class="col">
+                        <h1 class="text-blue">Daftar Karyawan</h1>
+                        </div>
+                    </div>
+                    <div class="row p-2">
+                        <Table2
+                            :endpoint="'kpis'"
+                            :columns="columns"
+                            :filter="filter"
+                            :filter_column="'period_type'"
+                            :edit = "false"
+                            :delete = "false"
+                            @detail-entry="detailKaryawan"
+                        ></Table2>
+                    </div>
+                </div>
+            </div>
+    </div>
+</template>
+
+<script>
+
+import Table2 from "../components/table-2";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+// import { HTTP } from "../http-common";
+
+
+export default {
+    name: "ManagerKaryawanIndex",
+    components: {
+        Header,
+        Sidebar,
+        Table2
+    },
+    data(){
+        return{
+            filter: "",
+            columns: {
+                Id: {
+                name : "Id",
+                data : "id",
+                hidden : true,
+                clickable : false
+                },
+                Nama: {
+                name : "Nama",
+                data : "name",
+                hidden : false,
+                clickable : true
+                },
+                Periode: {
+                name : "Periode",
+                data : "period_type",
+                hidden : false,
+                clickable : false
+                },
+            }
+        }
+    },
+    methods: {
+        detailKaryawan(id){
+            //routing page detail
+            console.log(id)
+        }
+    }
+    
+}
+</script>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.btn {
+  background-color: #6992b4;
+  color: #f1f7fc;
+  border-radius: 15px;
+  padding: 7px;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/ManagerKpiIndex.vue b/src/views/ManagerKpiIndex.vue
index 327e09d41cd08d618d20b3a7e4ec2094e2215e3c..5daa7a35cb6d48f957ab500aaef05ab44f6679ce 100644
--- a/src/views/ManagerKpiIndex.vue
+++ b/src/views/ManagerKpiIndex.vue
@@ -27,6 +27,7 @@
                         </select>
                         </div>
                     </div>
+                    <div class="row p-2">
                         <Table2
                             :endpoint="'kpis'"
                             :columns="columns"
@@ -36,6 +37,7 @@
                             @delete-entry="deleteKpi"
                             @detail-entry="detailKpi"
                         ></Table2>
+                    </div>
                 </div>
             </div>
     </div>