325 lines
14 KiB
PHP
325 lines
14 KiB
PHP
@extends('layoutadmin.app')
|
|
@section('content')
|
|
@include('layoutadmin.navbar')
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">weekend</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Pendapatan Perbulan</p>
|
|
<h4 class="mb-0">Rp {{ number_format($totalIncome, 0, ',', '.') }}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than
|
|
last month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">weekend</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Pengeluaran Perbulan</p>
|
|
<h4 class="mb-0">Rp {{ number_format($totalExpenses, 0, ',', '.') }}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than
|
|
last month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">person</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Total Pelanggan Tahun Ini</p>
|
|
<h4 class="mb-0">{{ number_format($totalCustomersPerYear) }} Orang</h4>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than
|
|
last month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">weekend</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Pendapatan Pertahun</p>
|
|
<h4 class="mb-0">Rp {{ number_format($totalYearIncome, 0, ',', '.') }}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+5% </span>than
|
|
last year</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col-lg-6 col-md-6 mt-4 mb-4">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="pendapatan" class="chart-canvas" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 ">Grafik Pendapatan Per Bulan</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 mt-4 mb-4">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="pengeluaran" class="chart-canvas" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 ">Grafik Pengeluaran Per Bulan </h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var ctx = document.getElementById("pendapatan").getContext("2d");
|
|
|
|
new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Agus", "Sept", "Okto", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Pendapatan",
|
|
tension: 0.4,
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
borderSkipped: false,
|
|
backgroundColor: "rgba(255, 255, 255, .8)",
|
|
// Menggunakan data dari controller
|
|
data: @json($monthlyIncome), // Mengonversi PHP array ke JavaScript array
|
|
maxBarThickness: 6
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 0,
|
|
suggestedMax: 500,
|
|
beginAtZero: true,
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
color: "#fff"
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
|
|
|
|
var ctx2 = document.getElementById("pengeluaran").getContext("2d");
|
|
|
|
new Chart(ctx2, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Agus", "Sept", "Okto", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Pengeluaran",
|
|
tension: 0,
|
|
borderWidth: 0,
|
|
pointRadius: 5,
|
|
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
|
pointBorderColor: "transparent",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
data: @json($monthlyExpenses), // Mengonversi PHP array ke JavaScript array
|
|
maxBarThickness: 6
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt">
|
|
<h6 class="mb-0">Peta Persebaran Data Pelanggan</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="map" style="height: 500px; width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var map = L.map('map').setView([-7.7479, 113.2161], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
L.marker([-7.7479, 113.2161]).addTo(map)
|
|
.bindPopup('Probolinggo')
|
|
.openPopup();
|
|
|
|
var pelangganList = <?php echo json_encode($pelangganList); ?>;
|
|
|
|
pelangganList.forEach(function(pelanggan) {
|
|
if (pelanggan.latitude && pelanggan.longitude) {
|
|
L.marker([pelanggan.latitude, pelanggan.longitude]).addTo(map)
|
|
.bindPopup('Pelanggan: ' + pelanggan.nama + '<br> Alamat: ' + pelanggan
|
|
.alamat);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</div>
|
|
@endsection
|
|
<script src="{{ asset('assetsadmin/js/plugins/chartjs.min.js') }}"></script>
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|