30 changed files with 1193 additions and 1326 deletions
@ -1,62 +0,0 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<div class="row"> |
||||
<div class="col-6"> |
||||
<h5 class="m-0 font-weight-bold text-primary mt-2">Data Tipe Peti</h5> |
||||
</div> |
||||
<div class="col-6 text-right"> |
||||
<a href="{{ route('dashboard.typepeti.create') }}" class="btn btn-success btn-icon-split"> |
||||
<span class="text">Tambah Tipe Peti</span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th class="text-center" style="width: 20px">No</th> |
||||
<th>Tipe Peti</th> |
||||
<th>Ukuran Peti</th> |
||||
<th>Deskripsi Peti</th> |
||||
<th class="text-center">Action</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
@php |
||||
$notype = 1; |
||||
@endphp |
||||
@forelse ($typepeti as $data_typepeti) |
||||
<tr> |
||||
<td class="text-center">{{ $notype++ }}</td> |
||||
<td>{{ $data_typepeti->type }}</td> |
||||
<td>{{ $data_typepeti->size_peti }}</td> |
||||
<td>{{ $data_typepeti->description }}</td> |
||||
<td class="text-center"> |
||||
<a href="{{ route('dashboard.typepeti.show', [$data_typepeti->id]) }}"> |
||||
<i class="fa fa-eye mr-2" style="font-size: 20px"></i> |
||||
</a> |
||||
<a href="{{ route('dashboard.typepeti.edit', [$data_typepeti->id]) }}"> |
||||
<i class="fa fa-edit mr-2" style="font-size: 20px"></i> |
||||
</a> |
||||
<form action="{{ route('dashboard.typepeti.destroy', $data_typepeti->id) }}" |
||||
method="POST" style="display: inline;"> |
||||
@csrf |
||||
@method('DELETE') |
||||
<button type="submit" |
||||
onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')" |
||||
style="border: none; background: none; cursor: pointer;"> |
||||
<i class="fa fa-trash text-danger" style="font-size: 20px"></i> |
||||
</button> |
||||
</form> |
||||
</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,38 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<div class="row"> |
||||
<div class="col-6"> |
||||
<h5 class="m-0 font-weight-bold text-primary mt-2">Data Tipe Peti</h5> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th class="text-center" style="width: 20px">No</th> |
||||
<th>Tipe Peti</th> |
||||
<th>Ukuran Peti</th> |
||||
<th>Deskripsi Peti</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
@php |
||||
$notype = 1; |
||||
@endphp |
||||
@forelse ($typepeti as $data_typepeti) |
||||
<tr> |
||||
<td class="text-center">{{ $notype++ }}</td> |
||||
<td>{{ $data_typepeti->type }}</td> |
||||
<td>{{ $data_typepeti->size_peti }}</td> |
||||
<td>{{ $data_typepeti->description }}</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,59 +0,0 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<div class="row"> |
||||
<div class="col-6"> |
||||
<h5 class="m-0 font-weight-bold text-primary mt-2">Data User</h5> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th>No</th> |
||||
<th>Nama</th> |
||||
<th>Email</th> |
||||
<th>No. HP</th> |
||||
<th>Alamat</th> |
||||
<th>Ditugaskan</th> |
||||
<th class="text-center">Action</th> |
||||
</tr> |
||||
</thead> |
||||
<tfoot> |
||||
<tr> |
||||
<th>No</th> |
||||
<th>Nama</th> |
||||
<th>Email</th> |
||||
<th>No. HP</th> |
||||
<th>Alamat</th> |
||||
<th>Ditugaskan</th> |
||||
<th class="text-center">Action</th> |
||||
</tr> |
||||
</tfoot> |
||||
<tbody> |
||||
@php |
||||
$noUser = 1; |
||||
@endphp |
||||
@forelse ($user as $data) |
||||
<tr> |
||||
<td class="text-center">{{ $noUser++ }}</td> |
||||
<td>{{ $data->fullname }}</td> |
||||
<td>{{ $data->email }}</td> |
||||
<td>{{ isset($data->no_hp) ? $data->no_hp : '-' }}</td> |
||||
<td>{{ isset($data->address) ? $data->address : '-' }}</td> |
||||
<td>{{ $data->warehouse->name }}</td> |
||||
<td class="text-center"> |
||||
<a href="{{ route('dashboard.user.show', [$data->id]) }}"> |
||||
<i class="fa fa-eye mr-2" style="font-size: 20px"></i> |
||||
</a> |
||||
</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,65 +0,0 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<div class="row"> |
||||
<div class="col-6"> |
||||
<h5 class="m-0 font-weight-bold text-primary mt-2">Data Peminjaman</h5> |
||||
</div> |
||||
<div class="col-6 text-right"> |
||||
<a href="{{ route('dashboard.peminjaman.create') }}" class="btn btn-success btn-icon-split"> |
||||
<span class="text">Tambah Peminjaman</span> |
||||
</a> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th class="text-center">No</th> |
||||
<th>Kode Peti</th> |
||||
<th>Nama Customer</th> |
||||
<th>Tgl Peminjaman</th> |
||||
<th>PJ Peminjaman</th> |
||||
<th>Asal Gudang</th> |
||||
<th class="text-center">Action</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
@php |
||||
$no_peminjaman = 1; |
||||
@endphp |
||||
@forelse ($peminjaman as $data_peminjaman) |
||||
<tr> |
||||
<td class="text-center">{{ $no_peminjaman++ }}</td> |
||||
<td>{{ $data_peminjaman->peti->customer->code_customer }} - |
||||
{{ $data_peminjaman->peti->tipe_peti->type }}</td> |
||||
<td>{{ $data_peminjaman->peti->customer->name }}</td> |
||||
<td>{{ \Carbon\Carbon::parse($data_peminjaman->exit_at)->format('d/m/Y') }}</td> |
||||
<td>{{ $data_peminjaman->exit_pic }}</td> |
||||
<td>{{ $data_peminjaman->warehouse->name }}</td> |
||||
<td class="text-center"> |
||||
<a href="{{ route('dashboard.peminjaman.edit', $data_peminjaman->id) }}" title="Edit"> |
||||
<i class="fa fa-edit mr-2" style="font-size: 20px"></i> |
||||
</a> |
||||
<form action="{{ route('dashboard.peminjaman.destroy', $data_peminjaman->id) }}" |
||||
method="POST" style="display: inline;"> |
||||
@csrf |
||||
@method('DELETE') |
||||
<button type="submit" |
||||
onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')" |
||||
title="Delete" style="border: none; background: none; cursor: pointer;"> |
||||
<i class="fa fa-trash text-danger" style="font-size: 20px"></i> |
||||
</button> |
||||
</form> |
||||
</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,88 +0,0 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Data Pengembalian</h6> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th>No</th> |
||||
<th>Kode Peti</th> |
||||
<th>Tgl Peinjaman</th> |
||||
<th>Estimasi Pengembalian</th> |
||||
<th>PJ Peminjaman</th> |
||||
<th>Asal WH Peminjaman</th> |
||||
<th>Tgl Pengembalian</th> |
||||
<th>PJ Pengembalian</th> |
||||
<th>Tujuan WH Pengembalian</th> |
||||
<th>Kondisi Peti</th> |
||||
<th>Status</th> |
||||
<th class="text-center">Action</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
@php |
||||
$no_peminjaman = 1; |
||||
@endphp |
||||
{{-- @foreach ($peminjaman as $data) |
||||
|
||||
@endforeach --}} |
||||
@forelse ($peminjaman as $data) |
||||
<tr> |
||||
<td>{{ $no_peminjaman++ }}</td> |
||||
<td>{{ $data->peti->customer->code_customer }} - |
||||
{{ $data->peti->tipe_peti->type }}</td> |
||||
<td>{{ \Carbon\Carbon::parse($data->exit_at)->format('d/m/Y') }}</td> |
||||
<td>{{ \Carbon\Carbon::parse($data->est_pengembalian)->format('d/m/Y') }}</td> |
||||
<td>{{ $data->exit_pic }}</td> |
||||
<td>{{ $data->warehouse->name }}</td> |
||||
<td> |
||||
@if ($data->enter_at) |
||||
{{ \Carbon\Carbon::parse($data->enter_at)->format('d-m-Y') }} |
||||
@else |
||||
<p class="text-center font-weight-bold">-</p> |
||||
@endif |
||||
</td> |
||||
<td> |
||||
@if ($data->enter_pic) |
||||
{{ $data->enter_pic }} |
||||
@else |
||||
<p class="text-center font-weight-bold">-</p> |
||||
@endif |
||||
</td> |
||||
<td> |
||||
@if ($data->enter_warehouse) |
||||
{{ $data->warehouse->name }} |
||||
@else |
||||
<p class="text-center font-weight-bold">-</p> |
||||
@endif |
||||
</td> |
||||
<td> |
||||
@if ($data->kondisi_peti) |
||||
{{ $data->kondisi_peti }} |
||||
@else |
||||
<p class="text-center font-weight-bold">-</p> |
||||
@endif |
||||
</td> |
||||
<td> |
||||
@if ($data->enter_warehouse === null) |
||||
Not Return |
||||
@else |
||||
Return |
||||
@endif |
||||
</td> |
||||
<td class="text-center"> |
||||
<a href="{{ route('dashboard.pengembalian.edit', [$data->id]) }}" title="Edit"> |
||||
<i class="fa fa-edit mr-2" style="font-size: 20px"></i> |
||||
</a> |
||||
</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,42 @@
|
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3"> |
||||
<div class="row"> |
||||
<div class="col-6"> |
||||
<h5 class="m-0 font-weight-bold text-primary mt-2">Data Disposal</h5> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<div class="table-responsive"> |
||||
<table class="table table-bordered" id="tablebarang" width="100%" cellspacing="0"> |
||||
<thead> |
||||
<tr> |
||||
<th class="text-center">No</th> |
||||
<th>Kode Peti</th> |
||||
<th>Nama Customer</th> |
||||
<th>Tanggal Disposal</th> |
||||
<th>Alasan Disposal</th> |
||||
<th>Status Peti</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
@php |
||||
$nodisposal = 1; |
||||
@endphp |
||||
@forelse ($disposal as $data_disposal) |
||||
<tr> |
||||
<td>{{ $nodisposal++ }}</td> |
||||
<td>{{ $data_disposal->peti->fix_lot }}</td> |
||||
<td>{{ $data_disposal->customer->name }}</td> |
||||
<td>{{ \Carbon\Carbon::parse($data_disposal->date_disposal)->format('d/m/Y') }}</td> |
||||
<td>{{ $data_disposal->description }}</td> |
||||
<td>{{ $data_disposal->status_disposal }}</td> |
||||
</tr> |
||||
@empty |
||||
<p>Data Kosong</p> |
||||
@endforelse |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,288 @@
|
||||
<div class="d-sm-flex align-items-center justify-content-between mb-4"> |
||||
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1> |
||||
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i |
||||
class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-primary shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Pengadaan</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahPeti }} |
||||
</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Earnings (Monthly) Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-success shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-success text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Peminjaman</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahPeminjaman }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Earnings (Monthly) Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-info shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Pengembalian</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahPengembalian }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-calendar fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Pending Requests Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-warning shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" style="font-size: 13px;"> |
||||
<strong>Reminder Pengembalian</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $reminder }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-calendar fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Area Bar Chart --> |
||||
<div class="col-xl-7 col-lg-7"> |
||||
<div class="card shadow mb-4" style="max-height: 600px;"> |
||||
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Grafik Peminjaman VS Pengembalian</h6> |
||||
</div> |
||||
@php |
||||
$chartData = app('App\Http\Controllers\HomeController')->generateChartData(); |
||||
@endphp |
||||
<div class="card-body" style="height: 80%;"> <!-- Sesuaikan persentase tinggi konten yang diinginkan --> |
||||
<label for="yearFilter">Pilih Tahun:</label> |
||||
<select id="yearFilter" class="form-control"> |
||||
@foreach ($chartData['years'] as $year) |
||||
@if ($chartData['exitData'][$loop->index] || $chartData['enterData'][$loop->index]) |
||||
<option value="{{ $year }}">{{ $year }}</option> |
||||
@endif |
||||
@endforeach |
||||
</select> |
||||
|
||||
<canvas id="ChartAssetStatus" style="width: 100px; height: 68px;"></canvas> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Area Pie Chart --> |
||||
<div class="col-xl-5 col-lg-5"> |
||||
<div class="card shadow mb-4"> |
||||
<!-- Card Header - Dropdown --> |
||||
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Grafik Pengadaan Peti</h6> |
||||
</div> |
||||
@php |
||||
$chartDataPie = app('App\Http\Controllers\HomeController')->generateChartDataPie(); |
||||
@endphp |
||||
|
||||
<div class="card-body"> |
||||
<label for="yearFilterPie">Pilih Tahun:</label> |
||||
<select id="yearFilterPie" class="form-control"> |
||||
@foreach ($chartDataPie['years'] as $year) |
||||
@if (count($chartDataPie['enterData']) > 0 && $chartDataPie['enterData'][$loop->index]) |
||||
<option value="{{ $year }}">{{ $year }}</option> |
||||
@endif |
||||
@endforeach |
||||
</select> |
||||
|
||||
<canvas id="myPieChartsiopas"></canvas> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@push('script') |
||||
<!-- script pie chart --> |
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
||||
<script> |
||||
// Function to update the pie chart based on selected year |
||||
function updatePieChart(selectedYear) { |
||||
// Call the controller function to get data for the selected year |
||||
var chartDataPie = {!! json_encode(app('App\Http\Controllers\HomeController')->generateChartDataPie()) !!}; |
||||
var yearIndex = chartDataPie.years.indexOf(selectedYear); |
||||
|
||||
// Update the pie chart data |
||||
myPieChart.data.datasets[0].data = chartDataPie.enterData[yearIndex]; |
||||
myPieChart.update(); |
||||
|
||||
// Save selected year to local storage |
||||
localStorage.setItem('selectedYearPie', selectedYear); |
||||
} |
||||
|
||||
// Initial chart data |
||||
var initialChartDataPie = {!! json_encode(app('App\Http\Controllers\HomeController')->generateChartDataPie()) !!}; |
||||
|
||||
// Get the canvas element for the pie chart |
||||
var ctxPie = document.getElementById("myPieChartsiopas").getContext('2d'); |
||||
|
||||
// Create the initial pie chart instance |
||||
var myPieChart = new Chart(ctxPie, { |
||||
type: 'pie', |
||||
data: { |
||||
labels: initialChartDataPie.monthNames, |
||||
datasets: [{ |
||||
data: initialChartDataPie.enterData[0], |
||||
backgroundColor: ["#4e73df", "#1cc88a", "#36b9cc", "#ff6384", "#ff9f40", "#9966ff", |
||||
"#cc65fe", |
||||
"#ffcc29", "#a4e56d", "#ff3d00", "#9c9c9c", "#0d47a1" |
||||
], |
||||
}] |
||||
}, |
||||
options: { |
||||
responsive: true, |
||||
plugins: { |
||||
legend: { |
||||
position: 'right', |
||||
maxHeight: 200, |
||||
}, |
||||
tooltip: { |
||||
callbacks: { |
||||
label: function(context) { |
||||
var label = context.label || ''; |
||||
if (label) { |
||||
label += ' : '; |
||||
} |
||||
label += Math.round(context.parsed * 1) + ' Peti'; |
||||
return label; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
}); |
||||
|
||||
// Event listener for year filter change |
||||
document.getElementById('yearFilterPie').addEventListener('change', function() { |
||||
var selectedYear = this.value; |
||||
updatePieChart(selectedYear); |
||||
}); |
||||
|
||||
// On page load, try to retrieve the selected year from local storage |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
var selectedYear = localStorage.getItem('selectedYearPie'); |
||||
if (selectedYear) { |
||||
// If a year is found, set the dropdown value and update the chart |
||||
document.getElementById('yearFilterPie').value = selectedYear; |
||||
updatePieChart(selectedYear); |
||||
} |
||||
}); |
||||
</script> |
||||
|
||||
<!-- script bar chart --> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
var ctx = document.getElementById('ChartAssetStatus').getContext('2d'); |
||||
var myChart; |
||||
var chartData = @json($chartData); |
||||
|
||||
function updateChart(selectedYear) { |
||||
var selectedYearIndex = chartData.years.indexOf(selectedYear); |
||||
|
||||
// Mengambil data berdasarkan tahun yang dipilih |
||||
var updatedExitData = chartData.exitData[selectedYearIndex]; |
||||
var updatedEnterData = chartData.enterData[selectedYearIndex]; |
||||
|
||||
// Memperbarui chart hanya dengan data tahun yang dipilih |
||||
myChart.data.labels = chartData.monthNames; |
||||
myChart.data.datasets[0].data = updatedExitData; |
||||
myChart.data.datasets[1].data = updatedEnterData; |
||||
|
||||
myChart.update(); |
||||
} |
||||
|
||||
myChart = new Chart(ctx, { |
||||
type: 'bar', |
||||
data: { |
||||
labels: chartData.monthNames, // Menggunakan nama bulan sebagai label |
||||
datasets: [{ |
||||
label: 'Peminjaman', |
||||
data: chartData.exitData[ |
||||
0], // Menggunakan data tahun saat ini sebagai awalan |
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)', |
||||
borderColor: 'rgba(75, 192, 192, 1)', |
||||
borderWidth: 1 |
||||
}, { |
||||
label: 'Pengembalian', |
||||
data: chartData.enterData[ |
||||
0], // Menggunakan data tahun saat ini sebagai awalan |
||||
backgroundColor: 'rgba(255, 159, 64, 0.2)', |
||||
borderColor: 'rgba(255, 159, 64, 1)', |
||||
borderWidth: 1 |
||||
}] |
||||
}, |
||||
options: { |
||||
scales: { |
||||
y: { |
||||
beginAtZero: true |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var yearFilter = document.getElementById('yearFilter'); |
||||
yearFilter.addEventListener('change', function() { |
||||
var selectedYear = yearFilter.value; |
||||
updateChart(selectedYear); |
||||
// Simpan tahun yang dipilih ke local storage |
||||
localStorage.setItem('selectedYear', selectedYear); |
||||
}); |
||||
|
||||
// Kondisi Pertama: Setelah halaman dimuat |
||||
// Coba baca tahun yang disimpan di local storage |
||||
var selectedYear = localStorage.getItem('selectedYear'); |
||||
if (selectedYear) { |
||||
yearFilter.value = selectedYear; |
||||
updateChart(selectedYear); |
||||
} else { |
||||
// Jika tidak ada tahun yang disimpan, pilih tahun saat ini |
||||
selectedYear = new Date().getFullYear(); |
||||
yearFilter.value = selectedYear; |
||||
updateChart(selectedYear); |
||||
} |
||||
}); |
||||
</script> |
||||
@endpush |
||||
@ -1,194 +0,0 @@
|
||||
@extends('layouts.main') |
||||
@section('content') |
||||
<div class="d-sm-flex align-items-center justify-content-between mb-4"> |
||||
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-primary shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Pengadaan</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahAsset }} |
||||
</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Earnings (Monthly) Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-success shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-success text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Peminjaman</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahPeminjaman }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Earnings (Monthly) Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-info shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1" style="font-size: 14px;"> |
||||
<strong>Pengembalian</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $jumlahPengembalian }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-calendar fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Pending Requests Card Example --> |
||||
<div class="col-xl-3 col-md-6 mb-4"> |
||||
<div class="card border-left-warning shadow h-100 py-2"> |
||||
<div class="card-body"> |
||||
<div class="row no-gutters align-items-center"> |
||||
<div class="col mr-2"> |
||||
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" style="font-size: 13px;"> |
||||
<strong>Reminder Pengembalian</strong> |
||||
</div> |
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" style="font-size: 25px;"> |
||||
{{ $reminder }}</div> |
||||
</div> |
||||
<div class="col-auto"> |
||||
<i class="fas fa-calendar fa-2x text-gray-300"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-xl-8 col-lg-7"> |
||||
<div class="card shadow mb-4"> |
||||
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Grafik Peminjaman VS Pengembalian</h6> |
||||
<div class="dropdown no-arrow"> |
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" |
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
||||
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i> |
||||
</a> |
||||
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" |
||||
aria-labelledby="dropdownMenuLink"> |
||||
<div class="dropdown-header">Dropdown Header:</div> |
||||
<a class="dropdown-item" href="#">Action</a> |
||||
<a class="dropdown-item" href="#">Another action</a> |
||||
<div class="dropdown-divider"></div> |
||||
<a class="dropdown-item" href="#">Something else here</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@php |
||||
$chartData = app('App\Http\Controllers\HomeController')->generateChartData(); |
||||
@endphp |
||||
|
||||
<div class="card-body"> |
||||
<canvas id="ChartAssetStatus" style="max-height: 500px;"></canvas> <!-- Atur tinggi chart --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<!-- Pie Chart --> |
||||
<div class="col-xl-4 col-lg-5"> |
||||
<div class="card shadow mb-4"> |
||||
<!-- Card Header - Dropdown --> |
||||
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Grafik Pengadaan Barang</h6> |
||||
<div class="dropdown no-arrow"> |
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" |
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
||||
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i> |
||||
</a> |
||||
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" |
||||
aria-labelledby="dropdownMenuLink"> |
||||
<div class="dropdown-header">Dropdown Header:</div> |
||||
<a class="dropdown-item" href="#">Action</a> |
||||
<a class="dropdown-item" href="#">Another action</a> |
||||
<div class="dropdown-divider"></div> |
||||
<a class="dropdown-item" href="#">Something else here</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- Card Body --> |
||||
<div class="card-body"> |
||||
<div class="chart-pie pt-4 pb-2"> |
||||
<canvas id="myPieChart"></canvas> |
||||
</div> |
||||
<div class="mt-4 text-center small"> |
||||
<span class="mr-2"> |
||||
<i class="fas fa-circle text-primary"></i> Direct |
||||
</span> |
||||
<span class="mr-2"> |
||||
<i class="fas fa-circle text-success"></i> Social |
||||
</span> |
||||
<span class="mr-2"> |
||||
<i class="fas fa-circle text-info"></i> Referral |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@push('script') |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
var ctx = document.getElementById('ChartAssetStatus').getContext('2d'); |
||||
|
||||
var myChart = new Chart(ctx, { |
||||
type: 'bar', |
||||
data: { |
||||
labels: {!! json_encode($chartData['monthNames']) !!}, |
||||
datasets: [{ |
||||
label: 'Peminjaman', |
||||
data: {!! json_encode($chartData['exitData']) !!}, |
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)', |
||||
borderColor: 'rgba(75, 192, 192, 1)', |
||||
borderWidth: 1 |
||||
}, { |
||||
label: 'Pengembalian', |
||||
data: {!! json_encode($chartData['enterData']) !!}, |
||||
backgroundColor: 'rgba(255, 159, 64, 0.2)', |
||||
borderColor: 'rgba(255, 159, 64, 1)', |
||||
borderWidth: 1 |
||||
}] |
||||
}, |
||||
options: { |
||||
scales: { |
||||
y: { |
||||
beginAtZero: true |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
@endpush |
||||
@endsection |
||||
Loading…
Reference in new issue