366 lines
16 KiB
PHP
366 lines
16 KiB
PHP
@extends('layouts.base')
|
|
|
|
@section('content-header')
|
|
<div class="col-12">
|
|
<div class="container" style="display: contents">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0"> Dashboard</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card" id="calculationPendapatan">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Laporan Pendapatan dan Pengeluaran</h5>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
|
|
<!-- ./card-body -->
|
|
<div class="card-footer">
|
|
<div class="row">
|
|
<div class="col-sm-3 col-6">
|
|
<div class="description-block border-right">
|
|
<span class="description-percentage" id="penjualanHaripercentageOfSalesGrowth">
|
|
</span>
|
|
<h5 class="description-header" id="penjualanHari"></h5>
|
|
<span class="description-text">Pendapatan Hari ini</span>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-sm-3 col-6">
|
|
<div class="description-block border-right">
|
|
<span class="description-percentage" id="pengeluaranHaripercentageOfSalesGrowth">
|
|
</span>
|
|
<h5 class="description-header" id="pengeluaranHari"></h5>
|
|
<span class="description-text">Pengeluaran Hari ini</span>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-sm-3 col-6">
|
|
<div class="description-block border-right">
|
|
<span class="description-percentage" id="penjualanBulanpercentageOfSalesGrowth">
|
|
</span>
|
|
<h5 class="description-header" id="penjualanBulan"></h5>
|
|
<span class="description-text">Pendapatan Bulan ini</span>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-sm-3 col-6">
|
|
<div class="description-block">
|
|
<span class="description-percentage" id="pengeluaranBulanpercentageOfSalesGrowth">
|
|
</span>
|
|
<h5 class="description-header" id="pengeluaranBulan"></h5>
|
|
<span class="description-text">Pengeluaran Bulan ini</span>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.card-footer -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
<!-- Main content -->
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header border-0">
|
|
<h3 class="card-title">Menu Terlaris</h3>
|
|
<div class="card-tools">
|
|
<a href="#" class="btn btn-tool btn-sm">
|
|
<i class="fas fa-download"></i>
|
|
</a>
|
|
<a href="#" class="btn btn-tool btn-sm">
|
|
<i class="fas fa-bars"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<table class="table table-striped table-valign-middle" id="table-terlaris">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Menu</th>
|
|
<th>Harga</th>
|
|
<th>Terjual</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col-md-6 -->
|
|
<div class="col-lg-6">
|
|
<!-- /.card -->
|
|
<div class="card">
|
|
<div class="card-header border-0">
|
|
<div class="d-flex justify-content-between">
|
|
<h3 class="card-title">Penjualan</h3>
|
|
<a href="javascript:void(0);">View Report</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex">
|
|
<p class="d-flex flex-column">
|
|
<span class="text-bold text-lg" id="penjualanSepanjangWaktu"></span>
|
|
<span>Penjualan Keseluruhan</span>
|
|
</p>
|
|
<p class="ml-auto d-flex flex-column text-right">
|
|
<span class="text-success" id="persentaseSepanjangWaktu">
|
|
<i class="fas fa-arrow-up"></i> 33.1%
|
|
</span>
|
|
<span class="text-muted">dari bulan lalu</span>
|
|
</p>
|
|
</div>
|
|
<!-- /.d-flex -->
|
|
|
|
<div class="position-relative mb-4">
|
|
<canvas id="sales-chart" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="d-flex flex-row justify-content-end">
|
|
<span class="mr-2">
|
|
<i class="fas fa-square text-primary"></i> Bulan ini
|
|
</span>
|
|
|
|
<span>
|
|
<i class="fas fa-square text-gray"></i> Bulan Kemarin
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.col-md-6 -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</div>
|
|
<!-- /.content -->
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }} ">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
|
|
<!-- ChartJS -->
|
|
<script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
'use strict'
|
|
|
|
var ticksStyle = {
|
|
fontColor: '#495057',
|
|
fontStyle: 'bold'
|
|
}
|
|
|
|
var mode = 'index'
|
|
var intersect = true
|
|
|
|
$.ajax({
|
|
url: "{{ route('dashboard.getChart') }}",
|
|
type: "GET",
|
|
cache: false,
|
|
async: false,
|
|
success: function(response) {
|
|
var data = response.data;
|
|
console.log(data);
|
|
$('#penjualanSepanjangWaktu').append(converRp(data.allPenjualan));
|
|
var $salesChart = $('#sales-chart')
|
|
var salesChart = new Chart($salesChart, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: Object.keys(data.weekThisMonth),
|
|
datasets: [{
|
|
backgroundColor: '#007bff',
|
|
borderColor: '#007bff',
|
|
data: Object.values(data.weekThisMonth)
|
|
},
|
|
{
|
|
backgroundColor: '#ced4da',
|
|
borderColor: '#ced4da',
|
|
data: Object.values(data.weekLastMonth)
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
tooltips: {
|
|
mode: mode,
|
|
intersect: intersect
|
|
},
|
|
hover: {
|
|
mode: mode,
|
|
intersect: intersect
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
// display: false,
|
|
gridLines: {
|
|
display: true,
|
|
lineWidth: '4px',
|
|
color: 'rgba(0, 0, 0, .2)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: $.extend({
|
|
beginAtZero: true,
|
|
// Include a dollar sign in the ticks
|
|
callback: function(value, index,
|
|
values) {
|
|
return converRp(value)
|
|
}
|
|
}, ticksStyle)
|
|
}],
|
|
xAxes: [{
|
|
display: true,
|
|
gridLines: {
|
|
display: false
|
|
},
|
|
ticks: ticksStyle
|
|
}]
|
|
}
|
|
}
|
|
})
|
|
},
|
|
error: function(response) {
|
|
console.log(response);
|
|
}
|
|
})
|
|
})
|
|
|
|
$(document).ready(function() {
|
|
$('#table-terlaris').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
searching: false,
|
|
"bLengthChange": false,
|
|
"bFilter": true,
|
|
"bInfo": false,
|
|
ajax: "{{ route('dashboard.menuTerlaris') }}",
|
|
columns: [{
|
|
data: 'DT_RowIndex',
|
|
name: 'DT_RowIndex',
|
|
className: 'text-center'
|
|
},
|
|
{
|
|
data: 'nama_produk',
|
|
name: 'nama_produk'
|
|
},
|
|
{
|
|
data: 'harga_produk',
|
|
name: 'harga_produk',
|
|
'render': function(data, type, full, meta) {
|
|
// change to IDR
|
|
return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
|
},
|
|
className: 'text-right'
|
|
},
|
|
{
|
|
data: 'jumlah_produk_terjual',
|
|
name: 'jumlah_produk_terjual'
|
|
}
|
|
]
|
|
})
|
|
})
|
|
|
|
$(document).ready(function() {
|
|
getCalculationPendapatan();
|
|
})
|
|
|
|
function getCalculationPendapatan() {
|
|
$.ajax({
|
|
url: "{{ route('dashboard.getCalculationPendapatan') }}",
|
|
type: "GET",
|
|
cache: false,
|
|
async: false,
|
|
success: function(response) {
|
|
var data = response.data;
|
|
changeDataFromCalculate('penjualanBulan', data.pendapatanBulan
|
|
.penjualanSatuBulan, data.pendapatanBulan.percentageOfSalesGrowth,
|
|
data.pendapatanBulan.statusCalculation)
|
|
changeDataFromCalculate('penjualanHari', data.pendapatanHari
|
|
.penjualanHariIni, data.pendapatanHari.percentageOfSalesGrowth,
|
|
data.pendapatanHari.statusCalculation)
|
|
changeDataFromCalculate('pengeluaranBulan', data.pengeluaranBulan
|
|
.pengeluaranSatuBulan, data.pengeluaranBulan.percentageOfSalesGrowth,
|
|
data.pengeluaranBulan.statusCalculation)
|
|
changeDataFromCalculate('pengeluaranHari', data.pengeluaranHari
|
|
.pengeluaranHariIni, data.pengeluaranHari.percentageOfSalesGrowth,
|
|
data.pengeluaranHari.statusCalculation)
|
|
},
|
|
error: function(response) {
|
|
console.log(response);
|
|
}
|
|
})
|
|
}
|
|
|
|
function changeDataFromCalculate(id, penjualanSatuBulan, percentageOfSalesGrowth, statusCalculation) {
|
|
// change to IDR
|
|
if (penjualanSatuBulan == null) {
|
|
penjualanSatuBulan = 0;
|
|
} else {
|
|
penjualanSatuBulan;
|
|
}
|
|
|
|
$('#' + id).append(converRp(penjualanSatuBulan));
|
|
|
|
// pembulatan 2 angka di belakang koma
|
|
percentageOfSalesGrowth = percentageOfSalesGrowth.toFixed(2);
|
|
switch (statusCalculation) {
|
|
case 1:
|
|
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
|
|
percentageOfSalesGrowth + '%')
|
|
$('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
|
|
break;
|
|
case 2:
|
|
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-up"></i> ' +
|
|
percentageOfSalesGrowth + '%')
|
|
$('#' + id + 'percentageOfSalesGrowth').addClass('text-success')
|
|
break;
|
|
case 3:
|
|
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-down"></i> ' +
|
|
percentageOfSalesGrowth + '%')
|
|
$('#' + id + 'percentageOfSalesGrowth').addClass('text-danger')
|
|
break;
|
|
default:
|
|
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
|
|
percentageOfSalesGrowth + '%')
|
|
$('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
|
|
break;
|
|
}
|
|
}
|
|
|
|
function converRp(params) {
|
|
return ('Rp. ' + params.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') ?? 0);
|
|
}
|
|
</script>
|
|
@endpush
|