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