diff --git a/src/App.vue b/src/App.vue index b161d4906d3407983920455226cafb2550b2f86f..94d49230e0c8f941740fa1ebcbc8d41484aced92 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,6 +30,14 @@ body { color: #6992b4; } +.bground-light { + background-color: #f1f7fc; +} + +.bground-dark { + background-color: #6992b4; +} + .text-red { color: #f4476b; } diff --git a/src/components/kpiCard.vue b/src/components/kpiCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..e63b0f6bd4e0df534b8787f706b1d02d38997f1b --- /dev/null +++ b/src/components/kpiCard.vue @@ -0,0 +1,39 @@ +<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> diff --git a/src/router/index.js b/src/router/index.js index 8bbed355ebff716e1c69a6d84cfa4a561cb698f9..02fd825abeddd9fcf37ebf05615b442dd439650f 100644 --- a/src/router/index.js +++ b/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({ diff --git a/src/views/KpiIndex.vue b/src/views/KpiIndex.vue new file mode 100644 index 0000000000000000000000000000000000000000..2449e5b8a06e11180b3bfc1b7209d274ee6c608a --- /dev/null +++ b/src/views/KpiIndex.vue @@ -0,0 +1,88 @@ +<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