Merge branch 'issue-36-Lihat-KPI' into 'main'

Issue 36 lihat kpi

See merge request !14

src/App.vue

@@ -30,6 +30,14 @@ body {
   color: #6992b4;
 }
 
+.bground-light {
+  background-color: #f1f7fc;
+}
+
+.bground-dark {
+  background-color: #6992b4;
+}
+
 .text-red {
   color: #f4476b;
 }

src/components/kpiCard.vue

+<template>
+  <div class="card mx-3 my-1 bground-light">
+      <div class="card-body">
+          <h5 class="card-title">{{kpi.name}}</h5>
+          <p class="card-subtitle text-blue">{{kpi.description}}</p>
+          <p class="card-subtitle text-blue mt-1">Deadline: {{kpi.deadline_time}}</p>
+      </div>
+      
+      <div class="card-footer">
+        <ul class="list-group list-group-horizontal" id="footer">
+          <li class="list-group-item bground-light text-blue">Target: {{kpi.target}}</li>
+          <li class="list-group-item bground-light text-blue">Weight: {{kpi.weight}}</li>
+        </ul>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KpiCard",
+  props: {
+      kpi : Object
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped>
+#footer{
+  width: 100%;
+}
+</style>

src/router/index.js

@@ -10,6 +10,7 @@ import DepartemenIndex from "../views/DepartemenIndex.vue";
 import KaryawanEdit from "../views/KaryawanEdit.vue";
 import AdminInsert from "../views/AdminInsert.vue";
 import AdminEdit from "../views/AdminEdit.vue";
+import KpiIndex from "../views/KpiIndex.vue";
 
 const routes = [
   {
@@ -67,6 +68,11 @@ const routes = [
     name: "AdminEdit",
     component: AdminEdit,
   },
+  {
+    path: "/kpi",
+    name: "kpiIndex",
+    component: KpiIndex,
+  },
 ];
 
 const router = createRouter({

src/views/KpiIndex.vue

+<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>
+                        <!-- isi mulai di sini -->
+                        <div class="col-6 mx-3 mb-3">
+                            <select
+                                v-model="filter"
+                                class="form-select"
+                                aria-label="Default select example"
+                                @change="getKpi">
+                                <option value="Harian" selected>Harian</option>
+                                <option value="Mingguan">Mingguan</option>
+                                <option value="Bulanan">Bulanan</option>
+                                <option value="Custom">Custom</option>
+                            </select>
+                        </div>
+                        <template v-for="kpi in kpis" :key="kpi">
+                            <KpiCard :kpi="kpi"></KpiCard>
+                        </template>
+                </div>
+            </div>
+    </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+import KpiCard from "../components/kpiCard"
+
+
+export default {
+    name: "KpiIndex",
+    components: {
+        Header,
+        Sidebar,
+        KpiCard
+    }, 
+    data(){
+        return{
+            temp_kpi: {
+                employee_id: 1,
+                name: "KPI",
+                description: "Deskripsi dari KPI",
+                target: "100%",
+                is_score_inverted: false,
+                target_type: "percentage",
+                weight: "20",
+                deadline: null,
+                deadline_time: "23:00",
+            },
+            filter:"Harian",
+            kpis: [],
+
+        }
+    },
+    methods: {
+        getKpi(){
+            this.kpis = []
+            this.kpis.push(this.temp_kpi)
+            this.kpis.push(this.temp_kpi)
+            this.kpis.push(this.temp_kpi)
+            this.kpis.push(this.temp_kpi)
+        }
+    },
+    mounted(){
+        this.getKpi()
+    }
+}
+</script>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+
+</style>
\ No newline at end of file