241 lines
9.5 KiB
PHP
241 lines
9.5 KiB
PHP
@extends('admin_master')
|
|
@push('css_admin')
|
|
|
|
<link rel="stylesheet" href="{{ asset('/') }}dist/libs/prismjs/themes/prism-okaidia.min.css">
|
|
<link rel="stylesheet" href="{{ asset('/') }}dist/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css">
|
|
|
|
<!-- Owl Carousel -->
|
|
<link rel="stylesheet" href="../../dist/libs/owl.carousel/dist/assets/owl.carousel.min.css">
|
|
|
|
@endpush
|
|
@section('admin')
|
|
|
|
<div class="container-fluid">
|
|
<!-- Owl carousel -->
|
|
<div class="owl-carousel counter-carousel owl-theme">
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-primary shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-user-male.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-primary mb-1"> Dewan Direksi</p>
|
|
<h5 class="fw-semibold text-primary mb-0">3</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-warning shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-briefcase.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-warning mb-1">Karyawan</p>
|
|
<h5 class="fw-semibold text-warning mb-0">5</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-info shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-mailbox.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-info mb-1">Pekerja</p>
|
|
<h5 class="fw-semibold text-info mb-0">169</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-danger shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-favorites.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-danger mb-1">Mitra</p>
|
|
<h5 class="fw-semibold text-danger mb-0">175</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-success shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-speech-bubble.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-success mb-1">Nilai Mutu</p>
|
|
<h5 class="fw-semibold text-success mb-0">8</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="card border-0 zoom-in bg-light-info shadow-none">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<img src="../../dist/images/svgs/icon-connect.svg" width="50" height="50" class="mb-3" alt="" />
|
|
<p class="fw-semibold fs-3 text-info mb-1">Gudang</p>
|
|
<h5 class="fw-semibold text-info mb-0">3</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Row 1 -->
|
|
<div class="row">
|
|
<div class="col-lg-12 d-flex align-items-strech">
|
|
<div class="card w-100">
|
|
<div class="card-body">
|
|
<div class="d-sm-flex d-block align-items-center justify-content-between mb-9">
|
|
<div class="mb-3 mb-sm-0">
|
|
<h5 class="card-title fw-semibold">Jumlah Grade Yang Terpilih</h5>
|
|
<p class="card-subtitle mb-0"></p>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-12 col-md-8">
|
|
<div id="chart"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@endsection
|
|
@push('js_admin')
|
|
<script src="{{ asset('/') }}dist/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="{{ asset('/') }}dist/js/datatable/datatable-basic.init.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
|
|
<script src="{{ asset('/') }}dist/js/datatable/datatable-advanced.init.js"></script>
|
|
<script src="../../dist/libs/jquery/dist/jquery.min.js"></script>
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- core files -->
|
|
<!-- ---------------------------------------------- -->
|
|
<script src="../../dist/js/app.min.js"></script>
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- current page js files -->
|
|
<!-- ---------------------------------------------- -->
|
|
<script src="../../dist/libs/owl.carousel/dist/owl.carousel.min.js"></script>
|
|
<script src="../../dist/libs/apexcharts/dist/apexcharts.min.js"></script>
|
|
{{--<script src="../../dist/js/dashboard.js"></script>--}}
|
|
|
|
<script>
|
|
$.ajax({
|
|
url: '{{ asset('admin/dashboard/get') }}',
|
|
type: 'GET',
|
|
success: function (data){
|
|
console.log(data)
|
|
var chart = {
|
|
series: [
|
|
{
|
|
name: "Banyak Grade yg dipilih",
|
|
data: data.data,
|
|
}
|
|
],
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
type: "bar",
|
|
fontFamily: "Plus Jakarta Sans', sans-serif",
|
|
foreColor: "#adb0bb",
|
|
height: 320,
|
|
stacked: true,
|
|
},
|
|
colors: ["var(--bs-primary)", "var(--bs-secondary)"],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
barHeight: "60%",
|
|
columnWidth: "20%",
|
|
borderRadius: [6],
|
|
borderRadiusApplication: 'end',
|
|
borderRadiusWhenStacked: 'all'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
borderColor: "rgba(0,0,0,0.1)",
|
|
strokeDashArray: 3,
|
|
xaxis: {
|
|
lines: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -5,
|
|
max: 5,
|
|
title: {
|
|
// text: 'Age',
|
|
},
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
categories: data.grade,
|
|
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
},
|
|
tooltip: {
|
|
theme: "dark",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), chart);
|
|
chart.render();
|
|
},
|
|
});
|
|
$(function () {
|
|
//
|
|
// Carousel
|
|
//
|
|
$(".counter-carousel").owlCarousel({
|
|
loop: true,
|
|
margin: 30,
|
|
mouseDrag: true,
|
|
autoplay: true,
|
|
autoplayTimeout: 4000,
|
|
autoplaySpeed: 2000,
|
|
nav: false,
|
|
rtl: true,
|
|
responsive: {
|
|
0: {
|
|
items: 2,
|
|
},
|
|
576: {
|
|
items: 2,
|
|
},
|
|
768: {
|
|
items: 3,
|
|
},
|
|
1200: {
|
|
items: 5,
|
|
},
|
|
1400: {
|
|
items: 6,
|
|
},
|
|
},
|
|
});
|
|
|
|
})
|
|
</script>
|
|
@endpush
|
|
|