dashboard.blade.php
user_8248690604
php_laravel_blade
3 years ago
24 kB
4
Indexable
@extends('templates/main')
@section('css')
<link rel="stylesheet" href="{{ asset('css/dashboard/style.css') }}">
<style>
.loader {
border: 5px solid #f3f3f3;
/* Light grey */
border-top: 5px solid #3498db;
/* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1.3s linear infinite;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
@endsection
@section('content')
<div class="row page-title-header">
<div class="col-12">
<div class="page-header d-flex justify-content-between align-items-center">
<h4 class="page-title">Dashboard</h4>
<button class="setting-btn" data-toggle="modal" data-target="#pengaturanTokoModal">
Pengaturan Toko
</button>
</div>
</div>
</div>
<div class="row modal-group">
<div class="modal fade" id="pengaturanTokoModal" tabindex="-1" role="dialog"
aria-labelledby="pengaturanTokoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="market_form" action="{{ url('/market/update') }}" method="POST">
@csrf
<div class="modal-header">
<h5 class="modal-title" id="pengaturanTokoModalLabel">Pengaturan Toko</h5>
<button type="button" class="close close-btn" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<div class="col-12">
<div class="form-group row">
<label
class="col-lg-3 col-md-3 col-sm-4 col-12 col-form-label font-weight-bold">Nama
Toko</label>
<div class="col-lg-9 col-md-9 col-sm-8 col-12">
<input type="text" class="form-control" name="nama_toko"
placeholder="Masukkan Nama Toko" value="{{ $market->nama_toko }}">
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-12 offset-lg-3 offset-md-3 offset-sm-4 error-notice"
id="nama_toko_error"></div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-md-3 col-sm-4 col-12 col-form-label font-weight-bold">No
Telepon</label>
<div class="col-lg-9 col-md-9 col-sm-8 col-12">
<input type="text" class="form-control" name="no_telp"
placeholder="Masukkan No Telepon" value="{{ $market->no_telp }}">
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-12 offset-lg-3 offset-md-3 offset-sm-4 error-notice"
id="no_telp_error"></div>
</div>
<div class="form-group row">
<label
class="col-lg-3 col-md-3 col-sm-4 col-12 col-form-label font-weight-bold">Alamat</label>
<div class="col-lg-9 col-md-9 col-sm-8 col-12">
<textarea class="form-control" name="alamat" rows="4" placeholder="Masukkan Alamat">{{ $market->alamat }}</textarea>
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-12 offset-lg-3 offset-md-3 offset-sm-4 error-notice"
id="alamat_error"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-simpan"><i class="mdi mdi-content-save"></i>
Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-6 col-12 mb-4">
<div class="card b-radius card-noborder bg-blue">
<div class="card-body custom-card-p">
<div class="row">
<div class="col-12 d-flex justify-content-start align-items-center icon-card">
<div class="icon-round text-white">
Rp
</div>
<div class="ml-3">
<p class="m-0 text-white">Pemasukan Harian</p>
<h5 class="text-white">{{ number_format($incomes_daily, 2, ',', '.') }}</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-6 col-12 mb-4">
<div class="card b-radius card-noborder">
<div class="card-body custom-card-p">
<div class="row">
<div class="col-12 d-flex justify-content-start align-items-center icon-card">
<div class="icon-round-2">
<i class="mdi mdi-account-multiple"></i>
</div>
<div class="ml-3">
<p class="m-0">Pelanggan Harian</p>
<h5>{{ $customers_daily }} Orang</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
<div class="card b-radius card-noborder">
<div class="card-body">
<div class="row">
<div class="col-12 mb-4 d-flex justify-content-between align-items-center">
<h5 class="font-weight-semibold chart-title">Pemasukan 1 Minggu Terakhir</h5>
<div class="dropdown">
<button class="btn btn-filter-chart icon-btn dropdown-toggle" type="button"
id="dropdownMenuIconButton1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Pemasukan
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton1">
<a class="dropdown-item chart-filter" href="#"
data-filter="pemasukan">Pemasukan</a>
<a class="dropdown-item chart-filter" href="#"
data-filter="pelanggan">Pelanggan</a>
</div>
</div>
</div>
<div class="col-12">
<canvas id="myChart" style="width: 100%; height: 315px;"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card b-radius card-noborder">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<div class="form-group">
<div class="col-12 text-center">
<p class="m-0">Filter Tahun</p>
</div>
<div class="input-group mt-2">
<div class="col-md-1"></div>
<input type="text" class="form-control col-md-4 form-control-md yearPicker"
placeholder="Tahun Awal" id="year_awal" name="year_awal" required="required"
required>
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control col-md-4 form-control-md yearPicker"
placeholder="Tahun Akhir" id="year_akhir" name="year_akhir" required="required"
required>
<div class="col-md-1">
<button type="submit" class="btn btn-primary btn-search" id="btn-filter">
<i class="mdi mdi-filter"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 text-center mt-2">
<p class="m-0 total_pemasukan_title">Total Pemasukan</p>
<h2 class="font-weight-bold all-incomes"></h2>
<p class="m-0 txt-light min-max-date"></p>
</div>
<div class="col-12 text-center mt-4">
<div class="btn-view-all">
<i class="mdi mdi-chevron-down"></i>
</div>
</div>
<div class="col-12">
<hr>
<div class="d-flex justify-content-between align-items-center">
<h5 class="font-weight-semibold">Riwayat Transaksi</h5>
@php
$access = \App\Acces::where('user', auth()->user()->id)->first();
@endphp
<button class="btn btn-view-transaction" type="button"
data-access="{{ $access->kelola_laporan }}">Semua</button>
</div>
</div>
<div class="col-12">
@foreach ($kd_transaction_uniques as $transaksi)
@php
$ket_transaksi = \App\Transaction::where('kode_transaksi', $transaksi->kode_transaksi)->first();
if (!isset($ket_transaksi)) {
$ket_transaksi = \App\TransactionNonPPN::where('kode_transaksi', $transaksi->kode_transaksi)->first();
}
@endphp
<div class="text-group mt-3">
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-start">
<span class="icon-transaksi">
<i class="mdi mdi-swap-horizontal"></i>
</span>
<div class="ml-2">
<p class="kode_transaksi font-weight-semibold">
{{ $transaksi->kode_transaksi }}</p>
<p class="des-transaksi">Rp.
{{ number_format($ket_transaksi->total, 2, ',', '.') }} <span
class="dot"><i
class="mdi mdi-checkbox-blank-circle"></i></span>
{{ $ket_transaksi->kasir }}</p>
</div>
</div>
<span
class="w-transaksi">{{ Carbon\Carbon::parse($ket_transaksi->created_at)->diffForHumans() }}</span>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script src="{{ asset('js/dashboard/script.js') }}"></script>
<script src="{{ asset('plugins/js/Chart.min.js') }}"></script>
<script src="{{ asset('plugins/js/ChartRadius.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"
rel="stylesheet" />
<script type="text/javascript">
@if ($message = Session::get('update_success'))
swal(
"Berhasil!",
"{{ $message }}",
"success"
);
@endif
$(".yearPicker").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
orientation: "bottom"
});
$(document).ready(function() {
$y_awal = document.getElementById('year_awal').value;
$y_akhir = document.getElementById('year_akhir').value;
$.ajax({
url: "{{ url('/dashboard/all-incomes') }}/" + $y_awal + '/' + $y_akhir,
method: "GET",
beforeSend: function() {
$('.all-incomes').addClass('loader');
},
success: function(response) {
var all_income = response.all_incomes;
var min_date = response.min_date;
var max_date = response.max_date;
$('.all-incomes').removeClass('loader');
$('.all-incomes').html('Rp ' + all_income);
$('.min-max-date').html(min_date + ' - ' + max_date)
}
});
});
// ------------------------------ FILTER TOTAL PEMASUKAN --------------------------------- //
$(document).on('click', '#btn-filter', function(e) {
e.preventDefault();
$y_awal = document.getElementById('year_awal').value;
$y_akhir = document.getElementById('year_akhir').value;
console.log($y_awal);
if ($y_awal == 0 || $y_akhir == 0)
alert("input tahun harus diisi");
else if ($y_awal > $y_akhir) {
alert("tahun awal tidak bisa lebih besar dari tahun akhir");
} else {
$.ajax({
url: "{{ url('/dashboard/all-incomes') }}/" + $y_awal + '/' + $y_akhir,
method: "GET",
beforeSend: function() {
$('.all-incomes').html('');
$('.min-max-date').html('')
$('.all-incomes').addClass('loader');
},
// ==================== Tambahan 'error' ==================== //
success: function(response) {
var all_income = response.all_incomes;
$('.all-incomes').removeClass('loader');
if (response.error != null) {
$('.total_pemasukan_title').html('');
$('.min-max-date').html(response.error)
} else {
var min_date = response.min_date;
var max_date = response.max_date;
$('.total_pemasukan_title').html('Total Pemasukan');
$('.all-incomes').html('Rp ' + all_income);
$('.min-max-date').html(min_date + ' - ' + max_date);
}
}
// ==================== Tambahan 'error' ==================== //
});
}
});
// ------------------------------ FILTER TOTAL PEMASUKAN --------------------------------- //
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@if (count($incomes) != 0)
@foreach ($incomes as $income)
"{{ date('d M, Y', strtotime($income)) }}",
@endforeach
@endif
],
datasets: [{
label: '',
data: [
@if (count($incomes) != 0)
@foreach ($incomes as $income)
@php
$total_n = \App\Transaction::whereDate('created_at', $income)->sum('total_barang');
if ($total_n == null) {
$total_n = 0;
}
$total_nppn = \App\TransactionNonPPN::whereDate('created_at', $income)->sum('total_barang');
if ($total_nppn == null) {
$total_nppn = 0;
}
$total = $total_n + $total_nppn;
@endphp
"{{ $total }}",
@endforeach
@endif
],
backgroundColor: 'RGB(44, 77, 240)',
borderColor: 'RGB(44, 77, 240)',
borderWidth: 0
}]
},
options: {
title: {
display: false,
text: ''
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return 'Rp. ' + value.toString().replace(
/\B(?=(\d{3})+(?!\d))/g,
",");
} else {
return 'Rp. ' + value;
}
}
}
}],
xAxes: [{
barPercentage: 0.2
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
});
$(document).on('click', '.chart-filter', function(e) {
e.preventDefault();
var data_filter = $(this).attr('data-filter');
if (data_filter == 'pemasukan') {
$('.btn-filter-chart').html('Pemasukan');
$('.chart-title').html('Pemasukan 1 Minggu Terakhir');
} else if (data_filter == 'pelanggan') {
$('.btn-filter-chart').html('Pelanggan');
$('.chart-title').html('Pelanggan 1 Minggu Terakhir');
}
$.ajax({
url: "{{ url('/dashboard/chart') }}/" + data_filter,
method: "GET",
beforeSend: function() {
$('.myChart').addClass('loader');
},
success: function(response) {
console.log("success");
$('.myChart').removeClass('loader');
if (data_filter == 'pemasukan') {
if (response.incomes.length != 0) {
changeDataPemasukan(myChart, response.incomes, response.total);
}
} else if (data_filter == 'pelanggan') {
if (response.customers.length != 0) {
changeDataPelanggan(myChart, response.customers, response.jumlah);
}
}
}
});
});
$(document).on('click', '.btn-view-transaction', function() {
var check_access = $(this).attr('data-access');
if (check_access == 1) {
window.open("{{ url('/report/transaction') }}", "_self");
} else {
swal(
"",
"Maaf anda tidak memiliki akses",
"error"
);
}
});
</script>
@endsection
Editor is loading...