Untitled
unknown
plain_text
4 years ago
18 kB
6
Indexable
<template>
<div class="home">
<!-- Page Wrapper -->
<div id="wrapper">
<Sidebar />
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<Navbar />
<!-- Begin Page Content -->
<div class="container-fluid">
<div
class="d-sm-flex align-items-center justify-content-between mb-4"
>
<h1 class="h3 mb-5 text-gray-800">Report Summary</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4" v-for="karyawan in karyawans"
:key="karyawan.id">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div
class="row no-gutters align-items-center"
>
<div
class="col-12 font-weight-bold text-capitalize "
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 20px;"
>
Karyawan Aktif
</div>
<div class="col-4">
<div class="header mt-4 text-center">
<h6>Active</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
{{ karyawan.active }}
</p>
</div>
</div>
<div class="col-4">
<div
class="header border-left-dark mt-4 text-center"
style="border-left: 1px solid rgba(166, 172, 190, 0.5) !important;"
>
<h6>Borrower</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
{{ karyawan.borrower }}
</p>
</div>
</div>
<div class="col-4">
<div
class="header border-left-dark mt-4 text-center"
style="border-left: 1px solid rgba(166, 172, 190, 0.5) !important;"
>
<h6>Bulan ini</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
{{ karyawan.bulanini }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize "
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 20px;"
>
Pinjaman tersalurkan
</div>
<div class="col-6">
<div class="header mt-4 text-center">
<h6>Bulan ini</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
20
</p>
</div>
</div>
<div class="col-6">
<div
class="header border-left-dark mt-4 text-center"
style="border-left: 1px solid rgba(166, 172, 190, 0.5) !important;"
>
<h6>Rata-rata</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
20
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize "
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 20px;"
>
Pinjaman dalam proses
</div>
<div class="col-6">
<div class="header mt-4 text-center">
<h6>Jumlah</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
20
</p>
</div>
</div>
<div class="col-6">
<div
class="header border-left-dark mt-4 text-center"
style="border-left: 1px solid rgba(166, 172, 190, 0.5) !important;"
>
<h6>Rata-rata</h6>
<p
style="font-size: 20px; font-weight: 500; font-family: Poppins; color: #007AFF;"
>
20
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize text-center"
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 18px;"
>
HC Comben <br />
Recommendation
</div>
<div class="col-12">
<div class="header mt-4 text-center">
<h6
style="color: #007AFF; font-size: 24px; font-family: Poppins;
font-style: normal;
font-weight: bold;"
>
20
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize text-center"
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 18px;"
>
HC Comben <br />
Update
</div>
<div class="col-12">
<div class="header mt-4 text-center">
<h6
style="color: #007AFF; font-size: 24px; font-family: Poppins;
font-style: normal;
font-weight: bold;"
>
20
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize text-center"
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 18px;"
>
Loan <br />
Approval
</div>
<div class="col-12">
<div class="header mt-4 text-center">
<h6
style="color: #007AFF; font-size: 24px; font-family: Poppins;
font-style: normal;
font-weight: bold;"
>
20
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div
class="col-12 font-weight-bold text-capitalize text-center"
style="font-family: 'Poppins';
color: #4F4F4F; font-size: 18px;"
>
Loan <br />
Approve
</div>
<div class="col-12">
<div class="header mt-4 text-center">
<h6
style="color: #007AFF; font-size: 24px; font-family: Poppins;
font-style: normal;
font-weight: bold;"
>
20
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 my-auto">
<div class="card px-5 py-4">
<apexcharts
width="100%"
type="bar"
:options="chartOptions"
:series="series"
></apexcharts>
</div>
</div>
<div class="col-lg-4 my-auto">
<div class="card px-5 py-4">
<apexcharts
width="100%"
type="bar"
:options="chartOptions"
:series="series"
></apexcharts>
</div>
</div>
<div class="col-lg-4 my-auto">
<div class="card">
<div ref="chart" class="chart"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card my-5 mx-2">
<h4
class="my-3 mx-4"
style="color:#404040; font-family: Poppins;
font-style: normal;
font-weight: 600;"
>
Pinjaman dalam proses
</h4>
<table class="table my-2 ">
<thead class="mx-2">
<tr>
<th scope="col">Borrower</th>
<th scope="col">NIK</th>
<th scope="col">Lokasi</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-6">
<div class="card my-5 mx-2">
<h4
class="my-3 mx-4"
style="color:#404040; font-family: Poppins;
font-style: normal;
font-weight: 600;"
>
Approved Loan
</h4>
<table class="table my-2 ">
<thead class="mx-2">
<tr>
<th scope="col">Borrower</th>
<th scope="col">NIK</th>
<th scope="col">Lokasi</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
<tr>
<th scope="row">Ann Marlin</th>
<td>082123</td>
<td>Head Office</td>
<td>31 Nov 2020</td>
<td>10.000.000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<Footer />
<!-- End of Footer -->
</div>
</div>
<!-- End of Page Wrapper -->
</div>
</template>
<script>
// @ is an alias to /src
import Sidebar from "../components/navigation/Sidebar.vue";
import Navbar from "../components/navigation/Navbar.vue";
import Footer from "../components/navigation/Footer.vue";
import ApexCharts from "apexcharts/dist/apexcharts.js";
import VueApexCharts from "vue-apexcharts";
import dashboardService from "../services/dashboard.service";
export default {
name: "Home",
components: {
Sidebar,
Navbar,
Footer,
apexcharts: VueApexCharts,
},
data() {
return {
karyawans: [],
chartOptions: {
chart: {
id: "vuechart-example",
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
},
series: [
{
name: "series-1",
data: [30, 40, 45, 50, 49, 60, 70, 91],
},
],
};
},
created() {
dashboardService
.getAll()
.then((response) => {
this.karyawans = response.data;
})
.catch((error) => {
console.log("Eror Data Tidak Di Temukan", error.response);
});
},
mounted() {
// code from Example: https://apexcharts.com/javascript-chart-demos/area-charts/spline/
var options = {
chart: {
height: 300,
type: "radialBar",
},
series: [70, 60, 50, 40],
colors: ["#39D074", "#FF3B30", "#007AFF", "#FFEB3B"],
labels: ["Visibly", "Joint Analytics", "Green Tech", "Kambing"],
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: false,
},
},
},
},
};
if (this.$refs.chart) {
// HTML element exists
var chart = new ApexCharts(this.$refs.chart, options);
chart.render();
}
},
};
</script>
Editor is loading...